/* BOLLSEN design tokens — GENERATED by Design System/bollsen/build-site-tokens.py from foundations/tokens.css. Do not edit here; edit tokens.css and rebuild. */ :root{color-scheme:only light;--navy:#13152b;--navy-2:#2b2e66;--navy-theme:#293241;--amber:#ffbc03;--amber-warm:#fdbc2f;--amber-soft:#fff3c4;--amber-ink:#9a5a00;--star:#f99b1c;--deep:#18234f;--grad-band:linear-gradient(90deg,#13152b 0%,#2b2e66 50%,#13152b 100%);--grad-footer:linear-gradient(180deg,#2b2e66 0%,#1f2150 55%,#13152b 100%);--grad-ring:conic-gradient(from 180deg,#ffbc03,#f99b1c,#2b2e66,#13152b,#ffbc03);--white:#ffffff;--ink:#1d2036;--ink-theme:#000000;--review:#282828;--muted:#4a5170;--muted-2:#5b5f80;--muted-light:#8a8fa8;--line:#e3e5f0;--line-2:#e6e8ef;--line-dark:rgba(255,255,255,.08);--muted-on-navy:#c9cbe0;--bg:#ffffff;--bg-soft:#f5f6fb;--bg-soft-2:#fafbfd;--bg-soft-3:#eceef6;--bg-tile:#d5d8e3;--success:#1d7a4f;--success-soft:#e3f4ea;--sale:#b3000f;--bump:#b45309;--link-hover:#2b2e66;--life-plus:#4cb861;--life-plus-dark:#2b6d38;--life-plus-tint:#cfebd5;--life-pink:#f5abc2;--life-pink-dark:#bd174a;--soundpro:#242856;--soundpro-accent:#d4528c;--soundpro-accent-dark:#d41854;--moto:#373535;--workpro:#287a66;--workpro-accent:#fdc34a;--watersafe:#3dc4e8;--watersafe-dark:#0f6a82;--kidz-blue:#4face0;--kidz-blue-dark:#1a6995;--kidz-coral:#ec7360;--kidz-yellow:#fdc34a;--kidz-green:#46bb9a;--kidz-pink:#e16ca8;--space-xs:8px;--space-sm:16px;--space-md:24px;--space-lg:40px;--space-section:60px;--space-section-sm:48px;--w-content:1020px;--w-wide:1180px;--w-narrow:760px;--radius-bar:4px;--radius-sm:8px;--radius-card:12px;--radius-tile:16px;--radius-button:999px;--radius-pill:999px;--radius-round:50%;--radius-theme:5px;--elev-1:0 1px 3px rgba(19,21,43,.08);--elev-2:0 18px 30px rgba(19,21,43,.14);--elev-hover:0 12px 28px rgba(19,21,43,.22);--elev-modal:0 24px 40px rgba(19,21,43,.14);--elev-theme:0 1px 3px rgba(0,0,0,.3);--font:Montserrat,system-ui,-apple-system,sans-serif;--font-alt:'Walter Turncoat',cursive;--weight-body:500;--weight-label:600;--weight-bold:700;--weight-headline:800;--weight-display:800;--size-display:74px;--size-h1:40px;--size-section:28px;--size-h2:22px;--size-h3:19px;--size-article:17px;--size-body-lg:16px;--size-body:15px;--size-ui:14px;--size-small:13px;--size-caption:12px;--size-kicker:11px;--leading-heading:1.2;--leading-body:1.6;--leading-article:1.7;--text:var(--ink);--text-strong:var(--navy);--text-strong-2:var(--navy-2);--text-muted:var(--muted);--text-muted-2:var(--muted-2);--text-faint:var(--muted-light);--surface:#ffffff;--surface-soft:var(--bg-soft);--surface-soft-2:var(--bg-soft-2);--surface-soft-3:var(--bg-soft-3);--surface-tile:var(--bg-tile);--band:var(--navy);--band-2:var(--navy-2);--on-band:#ffffff;--on-band-muted:var(--muted-on-navy);--line-strong:var(--navy);--accent:var(--amber);--on-accent:var(--navy);--accent-hover:#ffc933;--scheme:light;--fkcart-success:#5ba238;--trustpilot:#00b67a} html[data-theme="dark"]{--scheme:dark;--text:#e9ebf5;--text-strong:#ffffff;--text-strong-2:#c9cbe0;--text-muted:#aeb2cc;--text-muted-2:#9a9ec0;--text-faint:#7d82a6;--surface:#0f1020;--surface-soft:#171932;--surface-soft-2:#1d1f3a;--surface-soft-3:#232643;--surface-tile:#30335a;--band:#1b1e3f;--band-2:#2b2e66;--on-band:#ffffff;--on-band-muted:#c9cbe0;--line:rgba(255,255,255,.12);--line-2:rgba(255,255,255,.16);--line-strong:#e9ebf5;--accent:#ffbc03;--on-accent:#13152b;--accent-hover:#ffc933;--link-hover:#ffd36b;--amber-soft:#3a2d06;--amber-ink:#ffd36b;--success:#4cc38a;--success-soft:#10301f;--sale:#ff6b74;--bump:#f0a04b;--grad-band:linear-gradient(90deg,#1b1e3f 0%,#2b2e66 50%,#1b1e3f 100%);--grad-footer:linear-gradient(180deg,#1b1e3f 0%,#141633 55%,#0f1020 100%);--elev-1:0 1px 3px rgba(0,0,0,.5);--elev-2:0 18px 30px rgba(0,0,0,.55);--elev-hover:0 12px 28px rgba(0,0,0,.6);--elev-modal:0 24px 40px rgba(0,0,0,.6);color-scheme:dark} /* ---- Site chrome on the tokens (UK) ------------------------------------------ Replaces the Customizer "TOPBAR-GRADIENT-TEST" block of 2026-10-08 (Armin, 2026-10-20: "keep and tokenise"). Same rules, values now come from the tokens: #1a1c3d / #33367a became the navy pair #13152b / #2b2e66. The !important flags are kept because Flatsome prints its own colours inline. */ #top-bar{background:var(--grad-band)!important} #top-bar,#top-bar a,#top-bar strong,#top-bar span,#top-bar p{color:var(--on-band,#fff)!important} .page-box .box-text{background:var(--grad-band)!important} .footer-wrapper .footer-2{background:linear-gradient(135deg,var(--band,#13152b) 0%,var(--band-2,#2b2e66) 100%)!important} .footer-wrapper .footer-2 .col-inner{background-color:transparent!important} .footer-wrapper .absolute-footer{background:var(--band,#13152b)!important} .button.primary:not(.is-outline):not(.icon){background-color:var(--band,#13152b)!important;border-color:var(--line-strong,#13152b)!important;color:var(--on-band,#fff)!important} .button.primary:not(.is-outline):not(.icon):hover{background-color:var(--band-2,#2b2e66)!important;border-color:var(--navy-2)!important} .button.primary.is-outline{color:var(--text-strong,#13152b)!important;border-color:var(--line-strong,#13152b)!important} .button.primary.is-outline:hover{background-color:var(--band,#13152b)!important;color:var(--on-band,#fff)!important} /* ---- Gold pill hover: brighten + zoom (Armin, 2026-10-21, option 9 of the hover review) ---- One rule for every gold pill in both themes: the gold warms to --accent-hover while the pill grows 4 %, presses back to 98 %. !important because the homepage CSS block and Flatsome set their own hover/transition on some of these. Selectors = every gold button found on the live templates. */ .bh-btn:not(.bh-btn-s):not(.bh-btn-l),.bh-v3__shop,.bh-v3__add,.bj-more,.gbtn,.ugc-add,.bdh-btn,.sgc-add,.sg-go,.tp-btn,.bmix-add,.bshp-add,.bh-sp .go,.button.secondary:not(.is-outline),.single_add_to_cart_button,.wpcf7-submit.button,#place_order{transition:transform .18s cubic-bezier(.2,.7,.2,1),background-color .2s ease,color .2s ease!important;filter:none!important} .bh-btn:not(.bh-btn-s):not(.bh-btn-l):hover,.bh-v3__shop:hover,.bh-v3__add:hover,.bj-more:hover,.gbtn:hover,.ugc-add:hover,.bdh-btn:hover,.sgc-add:hover,.sg-go:hover,.tp-btn:hover,.bmix-add:hover,.bshp-add:hover,.bh-sp .go:hover,.button.secondary:not(.is-outline):hover,.single_add_to_cart_button:hover,.wpcf7-submit.button:hover,#place_order:hover{transform:scale(1.04)!important;background-color:var(--accent-hover)!important;filter:none!important} .bh-btn:not(.bh-btn-s):not(.bh-btn-l):active,.bh-v3__shop:active,.bh-v3__add:active,.bj-more:active,.gbtn:active,.ugc-add:active,.bdh-btn:active,.sgc-add:active,.sg-go:active,.tp-btn:active,.bmix-add:active,.bshp-add:active,.bh-sp .go:active,.button.secondary:not(.is-outline):active,.single_add_to_cart_button:active,.wpcf7-submit.button:active,#place_order:active{transform:scale(.98)!important} /* the homepage CSS block paints its gold pills with id specificity + !important (body.home #content …) — the hover has to match that weight */ body.home #content .bh-btn:not(.bh-btn-s):not(.bh-btn-l):hover,body.home #content .gbtn:hover,body.home #content .bj-more:hover,body.home #content .bh-v3__shop:hover,body.home #content .bh-v3__add:hover,body.home #content .ugc-add:hover{background:var(--accent-hover)!important} /* footer newsletter arrow (block 139307 paints it with #footer .bh-loop … !important) */ #footer .bh-loop .wpcf7-submit:hover{background:var(--accent-hover)!important;filter:none!important} @media (prefers-reduced-motion:reduce){.bh-btn:not(.bh-btn-s):not(.bh-btn-l),.bh-v3__shop,.bh-v3__add,.bj-more,.gbtn,.ugc-add,.bdh-btn,.sgc-add,.sg-go,.tp-btn,.bmix-add,.bshp-add,.bh-sp .go,.button.secondary:not(.is-outline),.single_add_to_cart_button,.wpcf7-submit.button,#place_order{transition:none!important;transform:none!important}} /* ---- Secondary (outline) pills: same motion as the gold pill (Armin, 2026-10-21 "Go") ---- Hover fills with the navy band + white text; the two kinds that already sit ON a navy band (.bh-btn-l in the AR KI band, .dark .button.is-outline on the legal pages) fill with the surface instead, so the fill stays visible. The body[class] #content and body.home #content variants match the weight of the page / block rules that paint these buttons with !important. */ .bh-btn-s,.bh-btn-l,.bh-rv-all,.button.primary.is-outline,.button.secondary.is-outline,.dark .button.is-outline{transition:transform .18s cubic-bezier(.2,.7,.2,1),background-color .2s ease,color .2s ease,border-color .2s ease!important;filter:none!important} .bh-btn-s:hover,.bh-rv-all:hover,.button.primary.is-outline:hover,.button.secondary.is-outline:hover,body.home #content .bh-btn-s:hover,body[class] #content .button.primary.is-outline:hover,body[class] #content .button.secondary.is-outline:hover{transform:scale(1.04)!important;background:var(--band)!important;color:var(--on-band)!important;border-color:var(--band)!important;filter:none!important} .bh-btn-l:hover,.dark .button.is-outline:hover,body.home #content .bh-btn-l:hover,body[class] #content .dark .button.is-outline:hover{transform:scale(1.04)!important;background:var(--surface)!important;color:var(--text-strong)!important;border-color:var(--surface)!important;filter:none!important} .bh-btn-s:active,.bh-btn-l:active,.bh-rv-all:active,.button.primary.is-outline:active,.button.secondary.is-outline:active,.dark .button.is-outline:active{transform:scale(.98)!important} @media (prefers-reduced-motion:reduce){.bh-btn-s,.bh-btn-l,.bh-rv-all,.button.primary.is-outline,.button.secondary.is-outline,.dark .button.is-outline{transition:none!important;transform:none!important}} /* ---- Cookie banner (WebToffee) on the site's button spec (Armin, 2026-11-04, Phase 3 I30) ---- Colours are set in the plugin's banner settings (it prints them inline): navy bar, amber "Accept all", white outline "Reject", white text link "Manage choices". The free plugin ignores its own custom-CSS field, so the shape lives here: pills, Montserrat 800, 46 px, no uppercase. Reject sits next to Accept at the same size on phones (UK ICO: rejecting must be as easy as accepting). Same treatment for the preference centre ("Manage choices"). */ .wcc-consent-container .wcc-btn,.wcc-preference-wrapper .wcc-btn{border-radius:var(--radius-button)!important;font-family:var(--font)!important;font-weight:var(--weight-headline)!important;font-size:14px!important;line-height:1.2!important;text-transform:none!important;letter-spacing:0!important;min-height:46px;padding:10px 22px!important;border-width:2px!important;transition:transform .18s cubic-bezier(.2,.7,.2,1),background-color .2s ease!important} .wcc-consent-container .wcc-btn-accept:hover,.wcc-preference-wrapper .wcc-btn-accept:hover{background-color:var(--accent-hover)!important;border-color:var(--accent-hover)!important;transform:scale(1.04)} .wcc-consent-container .wcc-btn-reject:hover,.wcc-preference-wrapper .wcc-btn-reject:hover,.wcc-preference-wrapper .wcc-btn-preferences:hover{background-color:var(--band-2,#2b2e66)!important} .wcc-consent-container .wcc-btn:focus-visible,.wcc-preference-wrapper .wcc-btn:focus-visible,.wcc-preference-wrapper .wcc-btn-close:focus-visible{outline:3px solid var(--accent,#ffbc03)!important;outline-offset:3px} .wcc-consent-container .wcc-btn-customize{border-color:transparent!important;background:none!important;text-decoration:underline;text-underline-offset:3px;font-size:13px!important;font-weight:var(--weight-bold)!important;padding-left:6px!important;padding-right:6px!important} /* the title is the bold first line of the text (the plugin's own title element lacks aria-level) */ .wcc-consent-container .wcc-notice-des strong:first-child{display:block;color:var(--on-band);font-size:15px;font-weight:var(--weight-headline);margin-bottom:6px} .wcc-consent-container .wcc-notice-des,.wcc-consent-container .wcc-notice-des p{font-family:var(--font);font-size:13px;line-height:1.55} .wcc-consent-container .wcc-notice-des a,.wcc-consent-container a.wcc-policy{color:var(--on-band)!important;text-decoration:underline;text-underline-offset:2px} .wcc-preference-wrapper .wcc-btn-close img{filter:invert(1)} .wcc-preference-wrapper,.wcc-preference-wrapper .wcc-preference-title{font-family:var(--font)} .wcc-consent-container .wcc-btn:hover,.wcc-preference-wrapper .wcc-btn:hover{opacity:1!important} /* preference centre text links (plugin blue #1863dc, 3.3:1 on navy) and the "Always Active" label (#008000, 3.5:1) */ .wcc-preference-wrapper a,.wcc-preference-wrapper .wcc-link,.wcc-preference-wrapper .wcc-show-desc-btn{color:var(--on-band)!important;text-decoration:underline;text-underline-offset:2px} .wcc-preference-wrapper .wcc-always-active{color:#4cc38a!important} @media (max-width:576px){ .wcc-consent-container .wcc-notice-btn-wrapper{display:flex;flex-wrap:wrap;gap:10px} .wcc-consent-container .wcc-notice-btn-wrapper .wcc-btn{margin:0!important} .wcc-consent-container .wcc-notice-btn-wrapper .wcc-btn-reject{order:1;flex:1 1 0;width:auto} .wcc-consent-container .wcc-notice-btn-wrapper .wcc-btn-accept{order:2;flex:1 1 0;width:auto} .wcc-consent-container .wcc-notice-btn-wrapper .wcc-btn-customize{order:3;flex:1 0 100%;min-height:36px} } @media (prefers-reduced-motion:reduce){.wcc-consent-container .wcc-btn,.wcc-preference-wrapper .wcc-btn{transition:none!important;transform:none!important}} /* WooCommerce "Sale!" bubble: Flatsome paints it white on the secondary amber (1.68:1). Navy text keeps the amber and passes contrast (~11:1), same pairing as the amber buttons. */ .badge-inner.on-sale,.badge-inner .onsale{color:var(--on-accent,#13152b)} /* PDP "Tested to EN 352-2" table (.bts-tb is a
): Flatsome fades every dl to opacity .9, which took its --success link to 4.36:1 (#328760 measured). Full opacity: 5.4:1. I30, 5 Nov. */ .bts .bts-tb{opacity:1} /* Contrast (I30, 5 Nov). UK-side overrides: mu 21 is byte-identical across markets, so these fixes live here. (The reviews "Q:" marker override that sat here went into the reviews stylesheet itself on 12 Nov, fleet-wide.) */ /* Prices: Flatsome paints every span.amount #111; on the navy like the rest of the UI (I31, 12 Nov). Flatsome's own exceptions (.dark, header cart) are more specific and keep working. */ body span.amount{color:var(--text-strong,#13152b)} /* Blog "Summarize with AI" label: #999 on the soft box 2.64:1; muted-2 5.73:1. */ .llm-summarize-box span.llm-label{color:var(--text-muted-2,#5b5f80)} /* Blog category label: Flatsome fades every h6 to .8, so amber-ink showed as #ae7b33 (3.70:1). Full opacity: 5.47:1. */ .entry-category{opacity:1} /* Heading ramp (I33, Armin 5 Nov): sub-headings at the heading weight 800. The shared child theme forces h2{font-weight:600!important} on every market (bollsen-common.css); UK-only override here, so the fleet file stays untouched. /shop/ product names (.bshp-nm, 700) are card labels, not sub-headings, and keep their own weight. */ body h2:not(.bshp-nm){font-weight:800!important} /* Review titles on the small-title role, 16 px (I33, 5 Nov). The widget CSS comes from the shared reviews dashboard (.brv-item-title 1.05em = 16.8 px), so the UK override lives here; phones keep the theme's 15 px H3. */ .brv-list .brv-item-title{font-size:var(--size-body-lg,16px)} @media (max-width:767px){.brv-list .brv-item-title{font-size:15px}} /* ---- Buttons on one spec (I34, Armin 5 Nov 2026: 1A pill + sentence case, 3 amber card buttons) ---- Flatsome's and WooCommerce's own buttons (product-page Add to basket, Write a review, Return to shop, loop buttons, Place order) still had 5 px corners and capitals, and black text on the gold. The redesign spec is a pill in sentence case with navy text on gold. The /shop/ card button (.bshp-add) is set in bshp.css. */ .button,a.button,button.button,input.button,.single_add_to_cart_button{border-radius:var(--radius-button)!important;text-transform:none!important;letter-spacing:0!important} .single_add_to_cart_button,.button.alt:not(.is-outline),.button.secondary:not(.is-outline){color:var(--on-accent,#13152b)!important;font-weight:800!important} .single_add_to_cart_button{font-size:17px!important} /* ---- Layout on one rhythm (I35, Armin 6 Nov 2026: 1A three widths, 2A full-width tinted sections, 3A section spacing 60 / 48 px). Measured first: a core product page had 6–8 content widths and 17–470 px between sections, because each block family sets its own padding in its own copy of block CSS (60+ blocks) and the tinted product-page sections were boxes on the 1050 px container with 24 px inside. These rules live here, in one place, so every family follows the tokens; the block CSS keeps its look otherwise. Thin strips (benefits bar, ticker, press quotes, express pay), the hero, the buy box, the sticky bar, blog article text and checkout are deliberately not touched. */ /* 3A: every section block gets the section token top and bottom, and no outer margin (the padding is the gap). */ .bai,.bah,.bts,.bv6,.bc,.bfq,.bs1f,.byp-sec,#dsm .dsm-sec,.dgd .band,.wsr,.nm-section,.bsp,.bj,body.home .ugc, .bh-band,.bh-ab-ar-in,.bh-ab-main,.ix-sec,.ix-tech,.u4-s{padding-top:var(--space-section-sm)!important;padding-bottom:var(--space-section-sm)!important;margin-top:0!important;margin-bottom:0!important} @media (min-width:850px){ .bai,.bah,.bts,.bv6,.bc,.bfq,.bs1f,.byp-sec,#dsm .dsm-sec,.dgd .band,.wsr,.nm-section,.bsp,.bj,body.home .ugc, .bh-band,.bh-ab-ar-in,.bh-ab-main,.ix-sec,.ix-tech,.u4-s{padding-top:var(--space-section)!important;padding-bottom:var(--space-section)!important} /* 1A standard column: content on the container's 1020 px. These wrappers added 16–24 px of their own inside it. */ .bv6-in,.bs1f-in,.bai-in,.bah-in,.bts-in,.byp-sec,.dgd .band{padding-left:0!important;padding-right:0!important} .dgd .band .w{max-width:none} /* Reading blocks on the narrow width: the comparison table joins the FAQ (was 880 px). */ .bc .bc-in{max-width:var(--w-narrow)} /* Home: AR KI TECH and About were 1140 / 1100 px; back on the column. */ .bh-ab-ar-in,.bh-ab-main{max-width:calc(var(--w-content) + 30px)!important;padding-left:15px!important;padding-right:15px!important} /* 1A wide pages: one 1180 px column (IEM page 1176–1183, IEM products 1200, blog hub 1200, Videos 1100). */ .ix-wrap,.u4-w{max-width:calc(var(--w-wide) + 30px)!important;padding-left:15px!important;padding-right:15px!important} .bdh{max-width:var(--w-wide)!important} #bvl.bvl{width:min(var(--w-wide),calc(100vw - 30px))!important;max-width:none!important;margin-left:50%!important;transform:translateX(-50%)} /* Deep Sleep Mask head block and BYP: their own 980 px inner width and 15 px side padding, on the column now. */ #dsm{padding-left:0!important;padding-right:0!important} #dsm .dsm-in,.byp-in{max-width:var(--w-content)!important} /* 2A: tinted sections run edge to edge like the home bands; the content stays on the column. The pseudo-element copies the section's own background (each product sets its own tint), so no colour is repeated here. html/body clip x. */ .bai,.bah,.bts,.byp-sec.byp-tint,#dsm .dsm-sec.tint,.byp-faq-band,.product-footer .section.dark{position:relative;isolation:isolate;border-radius:0!important} .bai::before,.bah::before,.bts::before,.byp-sec.byp-tint::before,#dsm .dsm-sec.tint::before,.byp-faq-band::before,.product-footer .section.dark::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:inherit;z-index:-1;pointer-events:none} #dsm .dsm-sec.tint{margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important} } /* Rating stars before the reviews CSS arrives (6 Nov, Armin's reload recording). The reviews client prints its CSS in the footer (fleet file mu 33), ~440 KB after the buy-box stars on a product page, so on a fresh load the star SVGs painted at full width (a column of giant black stars). The same base rules here, in the head, with the dashboard's values as fallbacks; the dashboard CSS still wins when it lands. */ .brv-stars{position:relative;display:inline-flex;line-height:1;white-space:nowrap;font-size:var(--brv-star-size,1em);vertical-align:middle} .brv-stars-row{display:inline-flex;gap:var(--brv-star-gap,2px);color:var(--brv-empty,#e3e5f0)} .brv-stars-fill{position:absolute;inset:0 auto 0 0;overflow:hidden;color:var(--brv-gold,#f99b1c)} .brv-stars-fill .brv-stars-row{color:var(--brv-gold,#f99b1c)} .brv-stars svg{width:1em;height:1em;flex:none;fill:currentColor} .brv-badge{display:inline-flex;gap:.35em;align-items:center} /* PDP "From £16.24 a pair in the 4-pack" line keeps its own 4px / 8px spacing (6 Nov, Armin: the larger spacing). On staging the Sublium plugin zeroes every margin in the summary once its plans render (body.sublium-plans-rendered #et-boc …, an ID selector), which made the block start loose and then tighten; !important holds the design spacing from the first paint whether or not Sublium is active. */ .product-summary .pdp-save-line{margin:4px 0 8px!important} /* ---- Header menu fit + Unique Melody mark (moved here 6 Nov 2026 from the footer block "follow-us-social-icons-footer-icons", element "Header nav fit", Alen 21 Oct). In the footer it reached the browser ~360 KB after the menu, so on every page the menu first painted with the full "Unique Melody" text (124 px instead of 58), wrapped to two lines and snapped back (~0.011 CLS sitewide). Same rules, now in the head. */ /* 21 Oct 2026: 6 desktop menu items on one line. Fluid gaps; below 1480px "Unique Melody" shows as the UM mark + New tag (full name stays for screen readers) */ @media (min-width:850px){#masthead .header-nav-main.nav-left>li{margin-right:clamp(8px,calc(1.6vw - 11.5px),16px)!important}} /* 21 Oct 2026: pulsing gold New badge on the UM item (on the link, because Flatsome uses li::after for the dropdown arrow) */ @keyframes umNewPulse{0%{box-shadow:0 0 0 0 rgba(255,188,3,.75)}70%{box-shadow:0 0 0 6px rgba(255,188,3,0)}100%{box-shadow:0 0 0 0 rgba(255,188,3,0)}} @media (min-width:850px){#header #masthead .header-nav-main.nav-left>li.menu-um>a.nav-top-link::after{content:"New";position:relative;top:-7px;margin-left:4px;padding:1px 4px;border-radius:999px;background:var(--accent,#ffbc03);color:var(--on-accent,#13152b);font:800 8px/1.2 Montserrat,sans-serif;letter-spacing:.04em;text-transform:uppercase;text-indent:0;pointer-events:none;animation:umNewPulse 2s ease-out infinite}} @media (prefers-reduced-motion:reduce){#header #masthead .header-nav-main.nav-left>li.menu-um>a.nav-top-link::after{animation:none}} @media (min-width:850px) and (max-width:1639px){ #header #masthead .header-nav-main.nav-left>li.menu-um>a.nav-top-link{position:relative;display:block;width:36px;height:22px;padding:0!important;overflow:visible;white-space:nowrap;font-size:0!important;color:transparent!important;background:url(/wp-content/uploads/2026/10/unique-melody-mark-navy.png) left center/auto 16px no-repeat} #header #masthead .header-nav-main.nav-left>li.menu-um>a.nav-top-link>i{display:none} #header #masthead .header-nav-main.nav-left>li.menu-um>a.nav-top-link::after{position:absolute;top:50%;left:31px;transform:translateY(-105%)} #header #masthead .header-nav-main.nav-left>li.menu-um{position:relative;padding-right:22px} } /* PDP placeholders for the rows the pack script inserts on load (6 Nov 2026, CLS; printed by mu 22): age chips (Kidz+), "Kids" hint (Watersafe+), ticks list under the form. Same outer height as the real row (form.cart is a flex column with a 16 px gap, so the gap is the same either way); hidden once the real row is there. Measured 768–1440: 67 / 40 / 82.6 px. Below 768 the rows land under the first screen, so no placeholder (the ticks wrap to 116–133 px there). */ .pdp-ph{display:none} @media (min-width:768px){ form.cart>.pdp-ph-ages{display:block;height:67px} form.cart>.pdp-ph-kids{display:block;height:40px} .product-summary>.pdp-ph-ticks{display:block;height:82.6px;flex:0 0 100%;order:5} } form.cart:has(>.pdp-ages)>.pdp-ph-ages,form.cart:has(>.pdp-kids)>.pdp-ph-kids,.product-summary:has(>.pdp-ticks)>.pdp-ph-ticks{display:none!important} /* PayPal button container: its height (47.6 px) held before the PayPal script renders the button (was 35 → 48 on load). */ .single-product form.cart>.fkwcppcp-express-button-container{min-height:47.6px} /* ---- Leftovers from the 12 Nov re-measure (I31 / I32, Armin 12 Nov). Flatsome defaults and shared files brought onto the scale and the tokens for UK; each rule names what it replaces. The body prefix / !important are needed because flatsome.css loads after this file and its rules have the same weight. */ /* Flatsome sizes its footer line and product-box text at .9em of 16 px = 14.4 px, post meta at .8em = 12.8 px. */ body .absolute-footer,body .product-small .box-text{font-size:var(--size-ui,14px)} body footer.entry-meta{font-size:var(--size-small,13px)} /* Tables inside our blocks: Flatsome's th/td are .9em (12.6 px in the category facts table, the Dog+ chart and the Deep Sleep Mask comparison) and #666. */ body .catb-facts th,body .catb-facts td,body .dgd .chart th,body .dgd .chart td,body #dsm table.cmp th,body #dsm table.cmp td{font-size:var(--size-small,13px)} body .catb-facts td,body .dgd .chart td{color:var(--text-muted-2,#5b5f80)} /* "Write a review" buttons: Flatsome's .97em = 15.52 px. */ body .brv-write .button,body .brv-write summary.button{font-size:var(--size-body,15px)} /* Hairlines Flatsome paints #ececec / #ddd (product tabs, attributes table, related products, post meta and navigation, accordions) and the #e0e0e0 of the "Summarize with AI" buttons (mu 21, shared file): the line tokens. */ body .woocommerce-tabs,body .related-products-wrapper,body .woocommerce-product-attributes th,body .woocommerce-product-attributes td,body footer.entry-meta,body .navigation-post .next-prev-nav,body .navigation-post .flex-col,body .accordion-title{border-color:var(--line-2)!important} body .llm-btn{border-color:var(--line)!important}