/* ===================================================================== Soft theme, site-wide (client approved 24/09/2026: "the purple change on the home page should be applied to all pages"). Loaded last on every page. Dusty plum for text, buttons and accents; lavender for large areas; white header; soft white scrolled pill; lavender footer with a plum bottom bar. ===================================================================== */ :root{ --soft-plum:#553f63; --soft-plum-2:#7a6390; --soft-violet:#a58bbb; --soft-lav:#f3edf7; --soft-lav-2:#e7ddef; --soft-lilac:#d4c5e3; --soft-mist:#faf7fc; --soft-ink:#3f3346; --soft-body:#62576a; --soft-gold:#8c6a2c; /* the old saturated brand purple, remapped */ --brand:#553f63; --brand-dk:#43304f; --brand-700:#3f2f48; --brand-50:#faf7fc; --brand-100:#f3edf7; --brand-200:#e7ddef; } /* ---------- header: white bar, plum text ---------- */ html body .site-header:not(.is-floating){ background:rgba(255,255,255,.97) !important; border-bottom:1px solid var(--soft-lav-2) !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } html body .site-header .brand-logo-dark, html body .site-header .brand-logo-pill{ display:none !important; } html body .site-header .brand-logo-light{ display:block !important; opacity:1 !important; } html body .site-header.is-floating .brand-logo-light{ display:none !important; } html body .site-header.is-floating .brand-logo-pill{ display:block !important; } html body .site-header .primary-nav .nav-root > li > a, html body.is-immersive-page .site-header .primary-nav .nav-root > li > a, html body.is-immersive-page .site-header.is-floating .primary-nav .nav-root > li > a{ color:var(--soft-plum) !important; } html body .site-header .primary-nav .nav-root > li > a:hover, html body .site-header .primary-nav .nav-root > li > a:focus-visible, html body.is-immersive-page .site-header .primary-nav .nav-root > li > a:hover, html body.is-immersive-page .site-header.is-floating .primary-nav .nav-root > li > a:hover, html body.is-immersive-page .site-header.is-floating .primary-nav .nav-root > li > a:focus-visible{ color:var(--soft-plum-2) !important; } html body .site-header .primary-nav .nav-root > li > a.nav-cta, html body.is-immersive-page .site-header .primary-nav .nav-root > li > a.nav-cta, html body.is-immersive-page .site-header.is-floating .primary-nav .nav-root > li > a.nav-cta{ color:#fff !important; background:var(--soft-plum) !important; border-color:var(--soft-plum) !important; } html body .site-header svg, html body .site-header .nav-utility a, html body .site-header .nav-utility button{ color:var(--soft-plum) !important; } html body .site-header .bmb-nav-toggle-bar, html body .site-header.is-floating .bmb-nav-toggle-bar{ background:var(--soft-plum) !important; } /* final audit 24/09/2026: in the scrolled pill the logo link was 77x40 on desktop and 58x30 on phones, under the 44px touch target. The link box is now at least 44px tall with the logo centred in it; the logo keeps its size and the pill keeps its height. */ html body .site-header .brand{ min-height:44px !important; align-items:center; } /* dropdown panels */ html body .site-header .sub-menu, html body .site-header .primary-nav ul ul{ background:#fff !important; border-color:var(--soft-lav-2) !important; } html body .site-header .sub-menu a, html body .site-header .primary-nav ul ul a{ color:var(--soft-ink) !important; } html body .site-header .sub-menu a:hover, html body .site-header .primary-nav ul ul a:hover{ background:var(--soft-lav) !important; color:var(--soft-plum) !important; } /* phone menu drawer (menu fix 24/09/2026): the rules above colour the links plum for the white bar, and style.css paints the open drawer purple, so the labels could not be read and the open submenu showed as a white box. At phone width the drawer is a light panel with plum labels and no boxes. The Contact us pill keeps its own colours. Same values as home-brochure.css, clinic-proto.css and clinic-sleep.css. */ @media (max-width:768px){ html body.mobile-nav-open .site-header.site-header{ background:#fff !important; border-bottom:1px solid var(--soft-lav-2) !important; } html body.mobile-nav-open .site-header .primary-nav{ background:var(--soft-mist) !important; } html body .site-header .primary-nav .nav-root > li.has-submenu{ border-bottom-color:var(--soft-lav-2) !important; } html body .site-header .primary-nav .nav-root > li > a:not(.nav-cta){ color:var(--soft-plum) !important; } html body .site-header .primary-nav .nav-root > li.has-submenu.is-expanded > a{ color:var(--soft-plum-2) !important; } html body .site-header .primary-nav .submenu{ background:transparent !important; border-color:transparent !important; box-shadow:none !important; } html body .site-header .primary-nav .submenu a{ color:var(--soft-ink) !important; background:transparent !important; } html body .site-header .primary-nav .submenu a:hover, html body .site-header .primary-nav .submenu a:focus-visible{ color:var(--soft-plum-2) !important; background:transparent !important; } html body .site-header .primary-nav .nav-search-item .nav-search-btn{ background:#fff !important; border-color:var(--soft-lilac) !important; color:var(--soft-body) !important; } html body .site-header .primary-nav .nav-search-item .nav-search-label{ color:var(--soft-body) !important; } html body .site-header .primary-nav .nav-root > li.nav-account-item > a.nav-account, html body .site-header .primary-nav .nav-root > li.nav-cart-item > a.nav-cart{ background:var(--soft-lav) !important; border-color:var(--soft-lav-2) !important; color:var(--soft-plum) !important; } html body .site-header .nav-account .nav-account-face, html body .site-header .nav-cart .nav-cart-face{ border-color:var(--soft-violet) !important; } html body .site-header .nav-account.is-in .nav-account-face{ background:var(--soft-plum) !important; border-color:var(--soft-plum) !important; color:#fff !important; } html body .site-header .primary-nav .nav-root > li.nav-tel-item > a.nav-tel{ color:var(--soft-body) !important; } html body .site-header .primary-nav .nav-tel strong{ color:var(--soft-plum) !important; } html body.mobile-nav-open .site-header button.bmb-nav-toggle > span.bmb-nav-toggle-bar{ background:var(--soft-plum) !important; } } /* ---------- footer: lavender with a plum bottom bar ---------- */ html body .site-footer{ background:var(--soft-mist) !important; border-top:1px solid var(--soft-lav-2) !important; } html body .site-footer, html body .site-footer a, html body .site-footer p, html body .site-footer li, html body .site-footer h2, html body .site-footer h3, html body .site-footer h4{ color:var(--soft-body) !important; } html body .site-footer .footer-col-head{ color:var(--soft-plum) !important; } html body .site-footer > *:last-child{ background:var(--soft-plum) !important; margin:2rem calc(50% - 50vw) 0 !important; padding:1rem 22px !important; max-width:none !important; width:auto !important; } html body .site-footer > *:last-child, html body .site-footer > *:last-child *{ color:rgba(255,255,255,.9) !important; } /* final audit 24/09/2026: the footer's own bottom padding left a 20 to 27px lavender strip under the plum bar on every page. The bar is always the last child and carries its own padding, so it now sits flush. */ html body .site-footer{ padding-bottom:0 !important; } /* phone: footer links were 20px tall and the social icons 28px; pad the tap area to 44px without moving anything (the negative margin gives the space back; the rows are already 60px apart) */ @media (max-width:768px){ html body .site-footer li a{ display:inline-block !important; padding-top:12px !important; padding-bottom:12px !important; margin-top:-12px !important; margin-bottom:-12px !important; } html body .site-footer .footer-social a{ padding:12px !important; margin:-12px !important; } /* at the very bottom the fixed WhatsApp button sat on top of the copyright line ("All rig..."); keep the text clear of it, as the service pages already do */ html body .site-footer > *:last-child{ padding-left:84px !important; padding-right:84px !important; } } /* ---------- shared buttons and links ---------- */ html body .bmb-cta--primary, html body .cta:not(section), html body .button-primary{ background:var(--soft-plum) !important; border-color:var(--soft-plum) !important; color:#fff !important; } /* final audit 24/09/2026: where no page family sets its own, style.css still gave the plum primary the old near-black aubergine shadow and, on hover, flipped it to a white button (homepage "Book Now", the sleep clinic booking button). Soft plum shadow, and hover goes one step deeper plum like the header pill. */ html :where(body:not(.home-concept)) .bmb-cta--primary{ box-shadow:0 10px 24px -8px rgba(85,63,99,.3) !important; } /* low weight: the homepage keeps its approved shadow */ html body .bmb-cta--primary:hover, html body .bmb-cta--primary:focus-visible{ background:var(--brand-dk) !important; border-color:var(--brand-dk) !important; color:#fff !important; box-shadow:0 12px 28px -8px rgba(85,63,99,.38) !important; } /* header Contact us pill: at the top of the page its hover changed nothing (only the pill state darkened); now both states darken, and its shadow is plum instead of near-black */ html body .site-header .primary-nav .nav-root > li > a.nav-cta{ box-shadow:0 4px 12px -4px rgba(85,63,99,.35) !important; } html body .site-header .primary-nav .nav-root > li > a.nav-cta:hover, html body .site-header .primary-nav .nav-root > li > a.nav-cta:focus-visible{ background:var(--brand-dk) !important; border-color:var(--brand-dk) !important; color:#fff !important; box-shadow:0 6px 16px -4px rgba(85,63,99,.42) !important; } /* ---------- cookie banner ---------- */ html body .bmb-consent-btn--primary{ background:var(--soft-plum) !important; border-color:var(--soft-plum) !important; } html body .bmb-consent-btn--secondary{ color:var(--soft-plum) !important; border-color:var(--soft-plum) !important; } html body .bmb-consent-text a{ color:var(--soft-plum) !important; } /* final audit 24/09/2026: the focus ring was pale pink #efd9f3 (about 1.2:1 on white, invisible to keyboard users), the secondary hover was the same pink, and the buttons were 39px tall (44px touch target at every width now, so touch tablets get it too) */ html body .bmb-consent-btn:focus-visible, html body .bmb-consent-pref input[type=checkbox]:focus-visible{ outline:2px solid var(--soft-plum-2) !important; outline-offset:2px !important; } html body .bmb-consent-btn--secondary:hover{ background:var(--soft-lav) !important; } html body .bmb-consent-btn--primary:hover{ background:var(--brand-dk) !important; border-color:var(--brand-dk) !important; opacity:1 !important; } html body .bmb-consent-actions .bmb-consent-btn{ min-height:44px !important; } /* ---------- menus: desktop dropdowns and the phone drawer (they painted themselves with the old purple --bg/--bg-2) ---------- */ html body .primary-nav .submenu, html body .primary-nav .flyout, html body .primary-nav .flyout-panel{ background:#ffffff !important; border-color:var(--soft-lav-2) !important; box-shadow:0 18px 40px -14px rgba(85,63,99,.22) !important; } html body .primary-nav .submenu a, html body .primary-nav .flyout-cat-label{ color:var(--soft-body) !important; } html body .primary-nav .submenu a:hover, html body .primary-nav .submenu a:focus-visible, html body .primary-nav .flyout-cat.is-open > .flyout-cat-label{ color:var(--soft-plum) !important; background:var(--soft-lav) !important; } html body .site-header .nav-cart:focus-visible, html body .site-header .nav-account:focus-visible, html body .site-header .primary-nav a:focus-visible{ outline:2px solid var(--soft-violet) !important; outline-offset:3px !important; } @media (max-width:768px){ html body.mobile-nav-open.mobile-nav-open .site-header.site-header, html body.mobile-nav-open.mobile-nav-open .site-header.is-floating{ background:#ffffff !important; border-bottom:1px solid var(--soft-lav-2) !important; } html body.mobile-nav-open.mobile-nav-open .primary-nav.primary-nav, html body .primary-nav.primary-nav{ background:rgba(255,255,255,.98) !important; } html body .primary-nav .nav-root > li{ border-bottom-color:var(--soft-lav-2) !important; } html body .primary-nav .nav-root > li > a, html body .primary-nav .nav-root > li > button, html body .primary-nav .submenu-toggle, html body .primary-nav .nav-root > li > a svg{ color:var(--soft-plum) !important; } html body .primary-nav .submenu{ background:transparent !important; box-shadow:none !important; } html body .primary-nav .nav-search-item .nav-search-btn{ background:#ffffff !important; border-color:var(--soft-lilac) !important; color:var(--soft-body) !important; } html body .primary-nav .nav-search-item .nav-search-btn:hover, html body .primary-nav .nav-search-item .nav-search-btn:focus-visible{ background:var(--soft-mist) !important; border-color:var(--soft-violet) !important; } html body .primary-nav .nav-root > li.nav-account-item > a.nav-account, html body .primary-nav .nav-root > li.nav-cart-item > a.nav-cart{ background:#ffffff !important; border-color:var(--soft-lilac) !important; color:var(--soft-plum) !important; } html body .primary-nav .nav-root > li.nav-account-item > a.nav-account:hover, html body .primary-nav .nav-root > li.nav-cart-item > a.nav-cart:hover{ background:var(--soft-mist) !important; border-color:var(--soft-violet) !important; } html body .nav-account .nav-account-face, html body .nav-cart .nav-cart-face{ border-color:var(--soft-violet) !important; color:var(--soft-plum) !important; } html body .nav-account.is-in .nav-account-face{ background:var(--soft-plum) !important; border-color:var(--soft-plum) !important; color:#ffffff !important; } html body .primary-nav .nav-root > li.nav-tel-item > a.nav-tel{ color:var(--soft-body) !important; } html body .primary-nav .nav-tel strong{ color:var(--soft-plum) !important; } html body.mobile-nav-open .bmb-nav-toggle-bar{ background:var(--soft-plum) !important; } /* final audit 24/09/2026: the open drawer covers the whole screen, including the header, so it hid the logo; and at 98% white with a blur the page headline showed through behind the menu labels. Solid lavender-white drawer (the value home-brochure.css and the clinic pages ask for), logo lifted above it. */ html body.mobile-nav-open #primary-nav{ background:var(--soft-mist) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } html body.mobile-nav-open .site-header .brand{ position:relative !important; z-index:96 !important; } /* on that solid drawer the search field and the Sign in / Cart tiles are white with a lilac edge on every page (some families had made them the same lavender-white as the drawer, so they disappeared into it) */ html body.mobile-nav-open #primary-nav .nav-search-item .nav-search-btn, html body.mobile-nav-open #primary-nav .nav-root > li.nav-account-item > a.nav-account:not(.is-in), html body.mobile-nav-open #primary-nav .nav-root > li.nav-cart-item > a.nav-cart{ background:#ffffff !important; border-color:var(--soft-lilac) !important; } html body.mobile-nav-open #primary-nav .nav-search-item .nav-search-btn:is(:hover, :focus-visible), html body.mobile-nav-open #primary-nav .nav-root > li.nav-account-item > a.nav-account:not(.is-in):is(:hover, :focus-visible), html body.mobile-nav-open #primary-nav .nav-root > li.nav-cart-item > a.nav-cart:is(:hover, :focus-visible){ background:var(--soft-lav) !important; border-color:var(--soft-violet) !important; } /* submenu links: one ink colour on every page (the service family had them a shade lighter) */ html body.mobile-nav-open #primary-nav .submenu a{ color:var(--soft-ink) !important; } html body.mobile-nav-open #primary-nav .submenu a:is(:hover, :focus-visible){ color:var(--soft-plum-2) !important; } /* "Call us" was 42px tall; 44px tap target */ html body.mobile-nav-open #primary-nav .nav-tel{ min-height:44px !important; } } /* ================= page family: A_service ================= */ /* ===================================================================== Soft theme, family A_service: the service pages, /blogs/ and /faq/ (every one is body.svc-cream, styled by service.css + service-cream.css [+ blogs.css]). Loaded after soft-base.css. Brings the page bodies in line with the approved homepage: white page, lavender bands and cards, dusty plum headings, links and buttons, a soft lavender final band, gold stars. Colours only (no text, layout or spacing changes), apart from section 9, which stops one hero photo being cropped, section 9b, which moves one scroll cue off a footnote, and the footer padding in section 5, which keeps the copyright line clear of the booking pill. ===================================================================== */ /* Scope: every rule starts with html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split), which matches only this family's 17 pages (the 14 photo-hero service pages, /blogs/, /faq/ and /bump-to-birth-hands-on-crash-course/), not the store, account or clinic pages that share body.svc-cream. */ /* ---------- 1. palette: remap the cream theme + the old purple tokens ---------- */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split){ /* service-cream.css tokens (its !important rules all read these) */ --c-paper:#ffffff; --c-card:#ffffff; --c-soft:#f3edf7; --c-line:#e7ddef; --c-ink:#3f3346; --c-body:#62576a; --c-muted:#7a6390; --c-plum:#553f63; --c-purple:#7a6390; /* style.css / service.css tokens that still carried saturated purple or blue */ --bg:#ffffff; --bg-2:#f3edf7; --bg-3:#e7ddef; --navy:#553f63; --accent:#a58bbb; --accent-ink:#7a6390; --gold:#a58bbb; --gold-dk:#7a6390; --spectrum-1:#7a6390; --spectrum-4:#a58bbb; --spectrum-5:#a58bbb; --brand:#553f63; --brand-dk:#43304f; --brand-700:#3f2f48; --brand-50:#faf7fc; --brand-100:#f3edf7; --brand-200:#e7ddef; background:#ffffff !important; } /* final audit 24/09/2026: html itself still took style.css var(--bg), the saturated #8d319b, which shows in phone overscroll above the header and below the footer. Same white as the page. */ html:has(> body.svc-cream):has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split){ background:#ffffff !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) main{ background:#ffffff !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--immersive{ background:#ffffff !important; } /* ---------- 2. text: plum headings, plum-2 accents, readable body ---------- */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview > :not(.service-hero--immersive) :is(h1,h2,h3,h4){ color:#553f63 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview > :not(.service-hero--immersive) :is(h1,h2,h3,h4) em{ color:#7a6390 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview > :not(.service-hero--immersive) .bmb-eyebrow{ color:#7a6390 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview > :not(.service-hero--immersive) .bmb-eyebrow::before, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview > :not(.service-hero--immersive) .bmb-eyebrow::after{ background:#a58bbb !important; border-color:#a58bbb !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview > :not(.service-hero--immersive) strong{ color:#553f63 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview > :not(.service-hero--immersive) a:not(.bmb-cta):not(.service-floating-cta){ color:#553f63; text-decoration-color:#a58bbb; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview > :not(.service-hero--immersive) a:not(.bmb-cta):not(.service-floating-cta):hover{ color:#7a6390; text-decoration-color:#7a6390; } /* links inside running copy: plum sits too close to the body text (1.36:1) to be spotted by colour alone, so underline them in violet (titles stay plain) */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview > :not(.service-hero--immersive) :is(p,li,dd):not([class*="title"]) > a:not(.bmb-cta):not(.service-related-cta):not(.service-floating-cta){ text-decoration-line:underline !important; text-decoration-color:#a58bbb !important; text-decoration-thickness:1px; text-underline-offset:3px; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview > :not(.service-hero--immersive) :is(p,li,dd):not([class*="title"]) > a:not(.bmb-cta):not(.service-related-cta):not(.service-floating-cta):is(:hover,:focus-visible){ color:#7a6390 !important; text-decoration-color:#7a6390 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-faq-body a{ color:#553f63 !important; text-decoration-color:#a58bbb !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-faq-body a:hover{ color:#7a6390 !important; text-decoration-color:#7a6390 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-related-cta, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-related-cta:hover{ color:#553f63 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-related-bullets .bmb-bullet-heart{ color:#a58bbb !important; } /* lean + split heroes (/blogs/, /faq/, bump-to-birth): no purple glow, plum type */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-hero::before{ background:radial-gradient(circle, rgba(165,139,187,.22) 0%, rgba(165,139,187,0) 65%) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-hero::after{ background:radial-gradient(circle, rgba(212,197,227,.30) 0%, rgba(212,197,227,0) 65%) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-hero:not(.service-hero--immersive) .service-hero-eyebrow{ color:#7a6390 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-hero:not(.service-hero--immersive) .service-hero-display{ color:#553f63 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-hero:not(.service-hero--immersive) .service-hero-display em{ color:#7a6390 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-hero:not(.service-hero--immersive) .service-hero-lead{ color:#62576a !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-hero-meta > div{ background:#f3edf7 !important; border-color:#e7ddef !important; color:#3f3346 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-hero-meta > div span{ color:#7a6390 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-hero-figure{ background:linear-gradient(135deg,#f3edf7,#e7ddef) !important; } /* immersive photo hero: keep the photo, light type, lilac eyebrow (was pink) */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-hero--immersive .bmb-eyebrow{ color:#e7ddef !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-hero--immersive strong{ color:#ffffff !important; } /* ---------- 3. surfaces: white sections, lavender cards and bands ---------- */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview :is(.service-intro,.service-oils,.service-areas,.service-prep, .service-related,.service-banner,.service-benefits,.service-process,.service-results){ background:#ffffff !important; border-top-color:#f3edf7 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview :is(.service-intro--alt,.service-areas--alt){ background:#faf7fc !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-testimonials{ background:linear-gradient(180deg,#faf7fc 0%,#f3edf7 100%) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) :is(.service-benefit-card,.service-prep-card,.service-story,.service-related-figure,.service-card-figure), html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-benefits-grid li, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-related-grid li, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-discomforts-grid li, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-process-grid > li{ background:#f3edf7 !important; border-color:#e7ddef !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-story:hover{ background:#f3edf7 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-discomforts-grid li:hover{ border-color:#d4c5e3 !important; } /* final audit 24/09/2026: service.css still shadowed these cards in near-black aubergine (rgba(31,8,36)); plum like the rest */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-discomforts-grid li{ box-shadow:0 6px 18px -10px rgba(85,63,99,.28) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-discomforts-grid li:hover{ box-shadow:0 12px 26px -12px rgba(85,63,99,.36) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-testimonials-grid > li, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-testimonials .service-story{ background:#ffffff !important; border-color:#e7ddef !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-testimonials-grid > li::before{ color:#d4c5e3 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-story-stars{ color:#8c6a2c !important; } /* final audit: gold #b8924f was 2.9:1 on white, under the 3:1 a star rating needs; this is 5:1 */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-story-tag{ background:#e7ddef !important; color:#553f63 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-story footer, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-faq-answer{ border-top-color:#e7ddef !important; } /* card hover lift: lilac edge + plum-tinted shadow (was periwinkle) */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-benefits-grid li:hover, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-related-grid li:hover, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-story:hover{ border-color:#d4c5e3 !important; box-shadow:0 12px 30px -14px rgba(85,63,99,.18) !important; } /* soft corner glows on cards and the reviews band: lavender instead of blue */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-prep-card::before{ background:radial-gradient(circle, rgba(165,139,187,.16) 0%, transparent 60%) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-testimonials::before{ background:radial-gradient(ellipse, rgba(165,139,187,.10) 0%, transparent 65%) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-benefit-num{ color:#7a6390 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-prep-note{ background:#ffffff !important; border-color:#e7ddef !important; border-left-color:#a58bbb !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview :is(.service-intro-figure,.service-areas-figure,.service-banner-figure,.service-card-figure){ background:#e7ddef !important; border-color:#e7ddef !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) :is(.service-banner-figure,.service-course-gallery) figcaption, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-intro-figure figcaption{ color:#553f63 !important; } /* ---------- 4. FAQ accordions ---------- */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview details.service-faq, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-faq-list details{ background:#faf7fc !important; border-color:#e7ddef !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview details.service-faq[open], html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-faq-list details[open]{ background:#ffffff !important; border-color:#d4c5e3 !important; box-shadow:0 12px 30px -16px rgba(85,63,99,.18) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-faq > summary, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-faq-list summary{ color:#3f3346 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-faq > summary:hover, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-faq-list summary:hover{ color:#553f63 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-faq > summary::after{ color:#a58bbb !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-faq-list summary::after{ border-color:#a58bbb !important; } /* the FAQ band is see-through: over the hero photo on photo-hero pages (keep light type), over the white page on /faq/ (dark type, it was white on white) */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--immersive section:is(.service-faq,.service-faqs){ background-image:linear-gradient(rgba(38,28,44,.34),rgba(38,28,44,.34)) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--immersive section:is(.service-faq,.service-faqs) > .bmb-section-head h2{ color:#ffffff !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--immersive section:is(.service-faq,.service-faqs) > .bmb-section-head .bmb-eyebrow{ color:#e7ddef !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview:not(.service-preview--immersive) section:is(.service-faq,.service-faqs) > .bmb-section-head h2{ color:#553f63 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview:not(.service-preview--immersive) section:is(.service-faq,.service-faqs) > .bmb-section-head .bmb-eyebrow{ color:#7a6390 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview:not(.service-preview--immersive) section.service-faqs--alt{ background:#faf7fc !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview :is(.service-faqs--alt,.service-intro--alt) details.service-faq:not([open]), html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview :is(.service-faqs--alt,.service-intro--alt) .service-faq-list details:not([open]){ background:#ffffff !important; } /* ---------- 5. buttons ---------- */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .bmb-cta--primary{ background:#553f63 !important; border-color:#553f63 !important; color:#fff !important; box-shadow:0 10px 24px rgba(85,63,99,.20) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .bmb-cta--primary:hover{ background:#43304f !important; box-shadow:0 12px 28px rgba(85,63,99,.26) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .bmb-cta--ghost{ background:#ffffff !important; color:#553f63 !important; border:1px solid #d4c5e3 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .bmb-cta--ghost:hover{ background:#f3edf7 !important; color:#553f63 !important; border-color:#a58bbb !important; } /* on the photo hero the buttons stay light so they read on the photo */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-hero-ctas--immersive .bmb-cta--primary{ background:#ffffff !important; border-color:#ffffff !important; color:#553f63 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-hero-ctas--immersive .bmb-cta--ghost{ background:transparent !important; color:#fff !important; border-color:rgba(255,255,255,.7) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-hero-ctas--immersive .bmb-cta--ghost:hover{ background:rgba(255,255,255,.14) !important; color:#fff !important; } /* floating booking pill: plum like every other primary button, with a white ring so it stays a separate button over the plum footer bar and the plum button in the final band */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-floating-cta{ background:#553f63 !important; color:#fff !important; box-shadow:0 0 0 2px rgba(255,255,255,.92), 0 14px 36px -10px rgba(63,51,70,.45), 0 4px 10px -3px rgba(63,51,70,.25) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-floating-cta:is(:hover,:focus-visible){ background:#43304f !important; color:#fff !important; box-shadow:0 0 0 2px #ffffff, 0 18px 44px -8px rgba(63,51,70,.5), 0 5px 12px -2px rgba(63,51,70,.3) !important; } /* at the very bottom the fixed pill used to sit on the copyright line: give the plum bar room underneath so the whole line stays readable. On phones the WhatsApp button (fixed, bottom right, lifted above the pill on these pages) then reaches the line's right end, so keep the wrapped line clear of it. */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split):has(.service-floating-cta) .site-footer > p.copyright:last-child{ padding-bottom:calc(1rem + 48px) !important; } @media (max-width:720px){ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split):has(.service-floating-cta) .site-footer > p.copyright:last-child{ padding-left:84px !important; padding-right:84px !important; } } /* ---------- 6. final band: soft lavender like the homepage's last band ---------- */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-cta{ background:linear-gradient(120deg,#efe6f5 0%,#e2d5ee 100%) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-cta :is(h1,h2,h3){ color:#553f63 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-cta :is(h1,h2,h3) em{ color:#7a6390 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-cta :is(p,li,span,dt,dd){ color:#62576a !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-cta .bmb-eyebrow{ color:#7a6390 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-cta strong{ color:#553f63 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-cta .bmb-cta--primary, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-cta .bmb-cta--primary *{ color:#fff !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-cta .bmb-cta--ghost, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-cta .bmb-cta--ghost *{ color:#553f63 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-cta .bmb-cta--ghost{ background:#ffffff !important; border-color:#d4c5e3 !important; } /* final audit 24/09/2026: the white rule above outranked the hover in section 3, so this button had no hover */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-cta .bmb-cta--ghost:hover, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-cta .bmb-cta--ghost:focus-visible{ background:#f3edf7 !important; border-color:#a58bbb !important; } /* ---------- 7. /blogs/ archive ---------- */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--archive .service-archive-section{ border-top-color:#f3edf7 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--archive .service-archive-section:nth-of-type(even){ background:linear-gradient(120deg,#efe6f5 0%,#e2d5ee 100%) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--archive .service-archive-section:nth-of-type(even) :is(h2,.service-section-lead){ color:#553f63 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--archive .service-archive-section:nth-of-type(even) .bmb-eyebrow{ color:#7a6390 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--archive .service-archive-section:nth-of-type(even) .bmb-eyebrow::before{ background:#a58bbb !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--archive .service-archive-more a, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--archive .service-archive-section:nth-of-type(even) .service-archive-more a{ color:#553f63 !important; border-color:#a58bbb !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--archive .service-archive-more a:hover, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--archive .service-archive-section:nth-of-type(even) .service-archive-more a:hover{ color:#7a6390 !important; } /* featured picks: sat on the deep purple band, now on lavender */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .blog-index .blog-feature{ background:rgba(255,255,255,.72) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .blog-index .blog-feature:hover{ background:#ffffff !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .blog-index .blog-featured-list:not([data-view="topic"]) > .blog-feature:first-child, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .blog-index .blog-featured-list[data-view="topic"] > .blog-feature:not([hidden]){ background:transparent !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .blog-index .blog-feature-media{ background:#e7ddef !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .blog-index .blog-feature:has(a:focus-visible){ outline-color:#a58bbb !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .blog-feature-topic{ color:#7a6390 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .blog-feature-title{ color:#553f63 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .blog-feature-excerpt, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .blog-featured-list:not([data-view="topic"]) > .blog-feature:first-child .blog-feature-excerpt, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .blog-featured-list[data-view="topic"] > .blog-feature:not([hidden]) .blog-feature-excerpt{ color:#62576a !important; } /* archive cards: white with a lavender hairline (were cream) */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--archive .post-grid--archive .bmb-post-card{ background:#ffffff !important; box-shadow:0 0 0 1px #e7ddef, 0 12px 30px -18px rgba(85,63,99,.22) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--archive .post-grid--archive .bmb-post-card:hover{ box-shadow:0 0 0 1px #d4c5e3, 0 10px 26px rgba(85,63,99,.10), 0 30px 60px rgba(85,63,99,.08) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--archive .post-grid--archive .bmb-post-card-img, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--archive .post-grid--archive .bmb-post-card-img--empty{ background:linear-gradient(135deg,#faf7fc,#f3edf7) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .blog-index .post-grid--archive .bmb-post-card[data-topic] .bmb-post-card-img::after{ background:rgba(85,63,99,.88) !important; color:#fff !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--archive .post-grid--archive .bmb-post-card-cta{ color:#553f63 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--archive .post-grid--archive .bmb-post-card:hover .bmb-post-card-cta, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--archive .post-grid--archive h3 a:hover{ color:#7a6390 !important; } /* search, topic pills, suggestions */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .blog-index .blog-search{ border-color:#e7ddef !important; box-shadow:0 1px 2px rgba(63,51,70,.04), 0 14px 34px -20px rgba(85,63,99,.28) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .blog-index .blog-search:focus-within{ border-color:#a58bbb !important; box-shadow:0 0 0 4px rgba(165,139,187,.22), 0 14px 34px -20px rgba(85,63,99,.28) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .blog-index .blog-search-topic{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23553f63' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .blog-index .blog-search-icon{ color:#7a6390 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .blog-index .blog-suggest-title mark{ color:#553f63 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .blog-suggest-topic{ background:#f3edf7 !important; color:#553f63 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .blog-index .blog-empty-action--primary:hover, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview a.blog-empty-action--primary:hover{ background:#43304f !important; } /* ---------- 8. lactation / results blocks that hard-code the old purple ---------- */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview :is(.lc-issues-title,.lc-hours-time,.lc-fee-price,.service-result-num){ color:#553f63 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .colostrum-box h3{ color:#553f63 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .lc-bio-toggle:focus-visible{ outline-color:#a58bbb !important; } /* ---------- 9. bump-to-birth split hero: show the whole photo ---------- The flyer photo is 1083x800 (landscape) but the split-hero frame is a 4:5 portrait with object-fit:cover, which cut off the right-hand parent and the circle. Let the frame follow the photo's own shape so nothing is cropped. */ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-hero--split .service-hero-figure{ aspect-ratio:auto !important; background:#ffffff !important; align-self:center; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview .service-hero--split .service-hero-figure img{ height:auto !important; object-fit:contain !important; } /* ---------- 9b. photo-hero legibility (desktop) ---------- Prenatal (the only right-aligned hero) had its copy on the bright side of the left-to-right scrim, so the eyebrow, stat labels and title washed out on the beige wall. Mirror the scrim so the dark side sits under the copy. MLD: the centred scroll cue sat on the last line of the results footnote. Move it to the right edge of the content column (MLD only: hero-anchor-right is unique to it, and the facial and lighten-legs heroes do not collide). */ @media (min-width:721px){ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--hero-right .service-hero-bg-scrim{ background: linear-gradient(270deg, rgba(20,14,12,.72) 0%, rgba(20,14,12,.55) 28%, rgba(20,14,12,.25) 55%, rgba(20,14,12,.05) 85%, rgba(20,14,12,.10) 100%), linear-gradient(180deg, rgba(20,14,12,0) 0%, rgba(20,14,12,0) 70%, rgba(20,14,12,.45) 100%) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--hero-anchor-right .service-hero--immersive:has(.service-hero-results-note) .service-hero-scroll{ left:auto !important; right:max(3rem, calc((100vw - var(--service-max)) / 2 + 1rem)) !important; /* the photo is paler there than in the centre, so firm up the halo */ color:#ffffff !important; text-shadow:0 1px 3px rgba(20,14,12,.55), 0 1px 12px rgba(20,14,12,.5) !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .service-preview--hero-anchor-right .service-hero--immersive:has(.service-hero-results-note) .service-hero-scroll > span{ color:#ffffff !important; } } /* ---------- 10. phone menu drawer ---------- The drawer paints itself with var(--bg)/var(--bg-2), which section 1 turns white/lavender on these pages, so its light-on-purple details need plum. */ @media (max-width:768px){ html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .primary-nav .nav-root > li.has-submenu{ border-bottom-color:#e7ddef !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .primary-nav .submenu a, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .primary-nav .flyout-cat-label{ color:#62576a !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .primary-nav .submenu a:hover, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .primary-nav .submenu a:focus-visible, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .primary-nav .flyout-cat.is-open > .flyout-cat-label{ color:#553f63 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .primary-nav .nav-search-item .nav-search-btn{ background:#ffffff !important; border-color:#d4c5e3 !important; color:#62576a !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .primary-nav .nav-search-item .nav-search-btn:hover, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .primary-nav .nav-search-item .nav-search-btn:focus-visible{ background:#faf7fc !important; border-color:#a58bbb !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .primary-nav .nav-root > li.nav-account-item > a.nav-account, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .primary-nav .nav-root > li.nav-cart-item > a.nav-cart{ background:#ffffff !important; border-color:#d4c5e3 !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .primary-nav .nav-root > li.nav-account-item > a.nav-account:hover, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .primary-nav .nav-root > li.nav-account-item > a.nav-account:focus-visible, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .primary-nav .nav-root > li.nav-cart-item > a.nav-cart:hover, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .primary-nav .nav-root > li.nav-cart-item > a.nav-cart:focus-visible{ background:#faf7fc !important; border-color:#a58bbb !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .nav-account .nav-account-face, html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .nav-cart .nav-cart-face{ border-color:#a58bbb !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .nav-account.is-in .nav-account-face{ background:#553f63 !important; border-color:#553f63 !important; color:#ffffff !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .primary-nav .nav-root > li.nav-tel-item > a.nav-tel{ color:#62576a !important; } html body.svc-cream:has(.service-preview--immersive,.service-preview--archive,.service-preview > section.service-faqs,.service-preview > section.service-hero--split) .primary-nav .nav-tel strong{ color:#553f63 !important; } } /* ================= page family: B_article ================= */ /* ===================================================================== Soft theme, family B: article + product-detail pages (47 URLs). Scope: every rule starts with html:has(link[href*="/css/pages/article.css"]), because article.css is loaded by exactly these 47 pages and by no other page (checked against templates.json, 24/09/2026). CSS only; no text changes. Palette: plum #553f63, plum-2 #7a6390, violet #a58bbb, lavender #f3edf7 / #e7ddef, lilac #d4c5e3, mist #faf7fc, ink #3f3346, body #62576a, white. ===================================================================== */ /* ---------- 1. tokens: the purple-theme variables, remapped for these pages ---------- */ html:has(link[href*="/css/pages/article.css"]){ --bg:#faf7fc; --bg-2:#faf7fc; --bg-3:#faf7fc; --navy:#553f63; --navy-dk:#7a6390; --gold:#a58bbb; --gold-dk:#7a6390; --accent:#a58bbb; --accent-ink:#7a6390; --spectrum-1:#553f63; --surface:#ffffff; background:#faf7fc !important; } html:has(link[href*="/css/pages/article.css"]) body :is(main, .bmb-magazine-preview, .bmb-article-preview, .bmb-promo-pause){ --ink:#3f3346; --ink-2:#62576a; --muted:#7a6390; --line:#e7ddef; --line-rose:#d4c5e3; } /* the article "cream theme" tokens (article.css, bottom) */ html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview){ --c-paper:#faf7fc; --c-card:#ffffff; --c-soft:#f3edf7; --c-ink:#553f63; --c-body:#62576a; --c-muted:#7a6390; --c-plum:#553f63; --c-purple:#553f63; --c-line:#e7ddef; } /* ---------- 2. page surface: mist, no purple drench at the sides ---------- */ html:has(link[href*="/css/pages/article.css"]) body, html:has(link[href*="/css/pages/article.css"]) body main, html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview){ background:#faf7fc !important; background-image:none !important; } /* six articles still point the header logo at the CREAM file (made for the old purple bar), so on the new white header the logo nearly vanished; show the blue logo the other pages use */ html:has(link[href*="/css/pages/article.css"]) body .site-header img.brand-logo[src*="bmb-logo-cream"]{ content:url("/img/bmb-logo-blue.webp"); } /* ---------- 3. type ---------- */ html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) :is(h1,h2,h3,h4,h5,h6){ color:#553f63 !important; } html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) strong{ color:#553f63 !important; } html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) :is(.bmb-mag-meta, .bmb-mag-byline){ color:#7a6390 !important; } html:has(link[href*="/css/pages/article.css"]) body .bmb-magazine-preview .bmb-mag-meta-sep{ color:#a58bbb !important; } /* links: plum text, violet underline; hover plum-2 (never white) */ html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) a:not(.bmb-cta):not(.bmb-mag-category):not(.product-card-cta):not(.bmb-product-card-cta):not(.product-card-thumb):not(.bmb-shop-card-cta), html:has(link[href*="/css/pages/article.css"]) body .bmb-magazine-preview .bmb-mag-byline .bmb-mag-author{ color:#553f63 !important; text-decoration-color:#a58bbb !important; } html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) a:not(.bmb-cta):not(.bmb-mag-category):not(.product-card-cta):not(.bmb-product-card-cta):not(.bmb-shop-card-cta):is(:hover, :focus-visible){ color:#7a6390 !important; text-decoration-color:#7a6390 !important; } /* ---------- 4. magazine article parts ---------- */ html:has(link[href*="/css/pages/article.css"]) body .bmb-magazine-preview .bmb-mag-category{ background:#553f63 !important; color:#fff !important; } html:has(link[href*="/css/pages/article.css"]) body .bmb-magazine-preview .bmb-mag-category:is(:hover, :focus-visible){ background:#7a6390 !important; color:#fff !important; } html:has(link[href*="/css/pages/article.css"]) body .bmb-magazine-preview .bmb-mag-hero{ background:#f3edf7 !important; } html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) .bmb-mag-pullquote{ background:#f3edf7 !important; border:1px solid #d4c5e3 !important; } html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) .bmb-mag-pullquote::before{ color:#a58bbb !important; } html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) .bmb-mag-pullquote p{ color:#553f63 !important; } html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) .bmb-mag-remedy{ background:#fff !important; border-color:#e7ddef !important; } html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) .bmb-mag-remedy:hover{ border-color:#d4c5e3 !important; } html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) .bmb-mag-remedy::before{ color:#a58bbb !important; } html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) .bmb-mag-bottomline{ background:#f3edf7 !important; border:1px solid #e7ddef !important; } /* final audit: no side stripe; a hairline all round, like the pull-quote card */ html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) .bmb-mag-bottomline h3{ color:#7a6390 !important; } html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) .bmb-mag-bottomline p{ color:#62576a !important; } html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) .bmb-mag-ornament, html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) .bmb-mag-ornament::before{ color:#a58bbb !important; } html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) .bmb-mag-footer{ border-top-color:#e7ddef !important; } /* FAQ accordions */ html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) .bmb-faq-item{ background:#fff !important; border-color:#e7ddef !important; } html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) .bmb-faq-item summary{ color:#3f3346 !important; } /* ---------- 5. buttons ---------- */ /* primary: plum pill, white text */ html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) .bmb-cta:not(.bmb-cta--ghost), html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) .bmb-cta--primary{ background:#553f63 !important; background-image:none !important; color:#fff !important; border-color:#553f63 !important; box-shadow:0 10px 24px rgba(85,63,99,.18) !important; } html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) .bmb-cta:not(.bmb-cta--ghost):is(:hover, :focus-visible){ background:#43304f !important; border-color:#43304f !important; color:#fff !important; } /* final audit: hover goes one step deeper plum on every page family, like the header pill */ /* ghost: white pill, plum text, lilac border (was purple-on-purple, text invisible) */ html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) .bmb-cta.bmb-cta--ghost{ background:#fff !important; background-image:none !important; color:#553f63 !important; border:1px solid #d4c5e3 !important; box-shadow:none !important; } html:has(link[href*="/css/pages/article.css"]) body :is(.bmb-magazine-preview, .bmb-article-preview) .bmb-cta.bmb-cta--ghost:is(:hover, :focus-visible){ background:#f3edf7 !important; color:#553f63 !important; border-color:#a58bbb !important; } /* ---------- 6. pricing-update notice (product pages) ---------- */ html:has(link[href*="/css/pages/article.css"]) body .bmb-promo-pause{ background:#f3edf7 !important; background-image:none !important; border:1px solid #e7ddef !important; } /* final audit: the 4px plum side stripe is gone */ html:has(link[href*="/css/pages/article.css"]) body .bmb-promo-pause-eyebrow{ color:#7a6390 !important; } html:has(link[href*="/css/pages/article.css"]) body .bmb-promo-pause-msg{ color:#62576a !important; } html:has(link[href*="/css/pages/article.css"]) body .bmb-promo-pause-msg a{ color:#553f63 !important; text-decoration-color:#a58bbb !important; } html:has(link[href*="/css/pages/article.css"]) body .bmb-promo-pause-msg a:is(:hover, :focus-visible){ color:#7a6390 !important; } /* ---------- 7. product cards (related products) ---------- */ html:has(link[href*="/css/pages/article.css"]) body :is(.product-card-cta, .bmb-product-card-cta){ color:#553f63 !important; border-color:#d4c5e3 !important; } html:has(link[href*="/css/pages/article.css"]) body :is(.product-card-cta, .bmb-product-card-cta):is(:hover, :focus-visible){ background:#f3edf7 !important; color:#553f63 !important; border-color:#a58bbb !important; } /* ---------- 7b. product-page blocks: specs as lavender chips, violet bullets ---------- */ html:has(link[href*="/css/pages/article.css"]) body .bmb-article-preview .bmb-service-spec{ background:#f3edf7 !important; border-color:#e7ddef !important; } html:has(link[href*="/css/pages/article.css"]) body .bmb-article-preview .bmb-service-spec dt{ color:#7a6390 !important; } html:has(link[href*="/css/pages/article.css"]) body .bmb-article-preview :is(.bmb-benefit-col, .bmb-bundle-card, .bmb-shop-card, .related-products .product-card){ border-color:#e7ddef !important; } html:has(link[href*="/css/pages/article.css"]) body .bmb-article-preview :is(.bmb-benefit-col ul li, .bmb-bundle-list li + li, .bmb-bundle-spec-row + .bmb-bundle-spec-row)::before{ background:#a58bbb !important; } html:has(link[href*="/css/pages/article.css"]) body .bmb-article-preview .bmb-shop-card-badge svg{ fill:#a58bbb !important; } /* shop-beauty hero: lavender wash instead of the purple drench; the two ambient blobs in violet and lilac */ html:has(link[href*="/css/pages/article.css"]) body .bmb-article-preview .bmb-shop-hero{ background:linear-gradient(180deg,#faf7fc 0%,#f3edf7 100%) !important; } html:has(link[href*="/css/pages/article.css"]) body .bmb-article-preview .bmb-shop-hero::before{ background:radial-gradient(circle, rgba(165,139,187,.30) 0%, rgba(165,139,187,0) 65%) !important; } html:has(link[href*="/css/pages/article.css"]) body .bmb-article-preview .bmb-shop-hero::after{ background:radial-gradient(circle, rgba(212,197,227,.45) 0%, rgba(212,197,227,0) 65%) !important; } html:has(link[href*="/css/pages/article.css"]) body .bmb-article-preview .bmb-shop-hero-display em{ color:#7a6390 !important; } /* layout fix (was broken before this change): a two-card benefits grid kept its two 280px columns on phones (the :has() rule outranks the 720px one-column rule), so /product/membership/ and similar pages ran off both edges at 390px. */ @media (max-width:720px){ html:has(link[href*="/css/pages/article.css"]) body .bmb-article-preview .bmb-benefits-grid{ grid-template-columns:1fr !important; } } /* ---------- 8. in-article tools (inline