/* =========================================================
   Simple Screens - design system (single source of truth)
   Neutral, flat and typographic: one sans, cool greys, hairline
   borders instead of shadows, and green reserved for the primary
   action. Restyled 2026-07-27 on the CEO's "modern clean
   professional" brief, replacing the warm cream/serif treatment.

   The home page loads this file too, so this :root is the ONLY
   place these values are defined. It used to carry its own copy.
   ========================================================= */
/* ---- PALETTE: Simple Screens own identity, adopted 2026-08-13 ---------
   This site competes with magneticscreen.net, which carries the cloudpillo
   palette this file used to share byte for byte. The token NAMES are unchanged
   so the 130+ rules in this file, nav.css and src/index.html keep resolving;
   only the VALUES moved. Mapping:

     #0b6bcb  blue       primary CTA only          -> --accent / --gold
     #1f2328  graphite   text, icons, dark panels  -> --ink / --gold-deep
     #dfe3e7  cool grey  tinted borders, save pill -> --gold-soft / --accent-soft
     #f8f9fa  near white page tint, card surfaces  -> --cream
     #f1f3f5  light grey panel backgrounds         -> --cream-2 / --accent-tint
     #6b6b6b  muted text                           -> --ink-soft
     #ebebeb  hairline borders                     -> --line
     #00b67a  star fill                            -> --star

   Blue is CTA-only: icons, labels and links stay graphite, which is why
   --gold-deep maps to the graphite and not to a second blue.

   The sibling's pale blue (#e9f3fb), sky blue (#b4e2f8) and soft yellow
   (#f2bc41 / #f4ca66) are deliberately gone. They were its most recognisable
   surfaces. Do not reintroduce them.

   ACCESSIBILITY: white on #0b6bcb measures approximately 5.28:1 and PASSES
   WCAG AA for normal text. The previous orange (#ff7300) measured 2.73:1 and
   failed; this file used to carry a note keeping it anyway to match the
   reference site. That exception no longer applies here. The sibling repo is
   untouched and still carries the orange and its note.
   ---------------------------------------------------------------------- */
:root{
  /* ---- Surfaces ---- */
  --white:#ffffff;
  --cream:#f8f9fa;         /* page tint and card surfaces */
  --cream-2:#f1f3f5;       /* light grey panel */
  --line:#ebebeb;          /* hairline divider */
  --line-strong:#d8d8d8;   /* interactive borders (inputs, outline buttons) */

  /* ---- Text. Contrast measured against #ffffff:
         --ink 15.9:1, --ink-strong 15.9:1, --ink-soft 5.0:1.
         --ink-faint is 2.9:1, which is below AA even for large text, so it
         is decorative only and never carries information. ---- */
  --ink:#1f2328;
  --ink-strong:#1f2328;
  --ink-soft:#6b6b6b;
  --ink-faint:#9b9b9b;

  /* ---- Accent: the primary action, and nothing else. ---- */
  --accent:#0b6bcb;
  --accent-hover:#0a5aad;
  --accent-tint:#f1f3f5;   /* light grey wash */
  --accent-soft:#dfe3e7;   /* grey border */

  /* ---- Trustpilot star fill ---- */
  --star:#00b67a;

  /* ---- Legacy aliases. 130+ rules across this file, nav.css and the
         home page still reference --gold*. Rather than rewrite every one
         and risk missing a few, they are remapped here: --gold carries the
         CTA blue, and everything that used to be "accent text" or
         "accent tint" resolves to graphite or a hairline. That is what keeps
         blue on the primary CTA and off everything else. ---- */
  --gold:var(--accent);
  --gold-deep:var(--ink-strong);
  --gold-soft:#dfe3e7;
  --wood:var(--ink-soft);

  /* ---- Shape and depth. Hard-edged on purpose (2026-08-13). The sibling is
         soft-cornered throughout at 10px and 16px with low shadows on its
         cards; this site is square at 4px and separates surfaces with a
         hairline border instead. Corner language is one of the three things a
         visitor registers before reading anything, so it is doing real work
         here. Do not soften these back toward the sibling. ---- */
  --radius:4px;
  --radius-lg:6px;
  --radius-pill:999px;     /* only for genuine pills: badges, avatars */
  --shadow:0 1px 2px rgba(15,20,25,.05);
  --shadow-sm:0 1px 2px rgba(15,20,25,.04);

  --maxw:1180px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Body drops 18px -> 17px and the headings gain weight and negative tracking. An 18px
   body with 500-weight headings reads soft and editorial; a professional interface wants
   a denser body and headings that hold their own without a display face to lean on. */
body{font-family:"Work Sans",system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.6;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Work Sans",system-ui,-apple-system,sans-serif;font-weight:650;line-height:1.18;letter-spacing:-.021em;color:var(--ink)}
h1{font-size:clamp(1.9rem,4.2vw,2.7rem);letter-spacing:-.028em}
h2{font-size:clamp(1.5rem,3vw,2.05rem);letter-spacing:-.024em}
h3{font-size:1.2rem;font-weight:600}
h4{font-size:1.02rem;font-weight:600}
p{color:var(--ink-soft)}
.wrap,.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Eyebrows lose the green and most of the letter-spacing: 0.18em reads like a 2015
   lifestyle site, and the colour was the main thing making green feel omnipresent. */
.section-label,.eyebrow{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}

/* ---- Buttons: flat, 6px, no lift, no glow. State is carried by colour alone. ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--radius);font-family:"Work Sans",system-ui,-apple-system,sans-serif;font-size:.95rem;font-weight:600;letter-spacing:0;cursor:pointer;border:1px solid transparent;transition:background-color .15s ease,border-color .15s ease,color .15s ease;text-align:center}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-ghost,.btn-outline{background:#fff;color:var(--ink);border:1px solid var(--line-strong)}
.btn-ghost:hover,.btn-outline:hover{background:var(--cream);border-color:var(--ink-faint);color:var(--ink)}
.btn-light{background:#fff;color:var(--ink);border:1px solid var(--line-strong)}
.btn-light:hover{background:var(--cream)}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark:hover{background:var(--ink-strong);border-color:var(--ink-strong)}
.btn-paypal{background:#ffc439;color:#14264b;font-weight:700;border-color:#ffc439}
.btn-paypal:hover{background:#f0b429;border-color:#f0b429}
.btn-block{width:100%}
/* Visible keyboard focus. The old sheet had none at all. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius)}

/* ---- Nav (solid, inner pages) ---- */
.nav--solid{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;color:var(--ink);margin-right:auto}
.brand .mark{width:34px;height:34px;border-radius:50%;flex:none;background:var(--ink);color:#fff;display:grid;place-items:center}
.nav--solid .brand .mark{background:var(--accent)}
.brand .flag{height:26px;width:auto;display:block;border-radius:3px;flex:none}
.brand .name{font-family:"Work Sans",system-ui,-apple-system,sans-serif;font-size:1.18rem;letter-spacing:.01em;line-height:1.05}
.brand .name small{display:block;font-family:"Work Sans",system-ui,-apple-system,sans-serif;font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.nav-links{display:none;align-items:center;gap:26px}
.nav-links a{color:var(--ink-soft);font-weight:600;font-size:.97rem;transition:.2s}
.nav-links a:hover{color:var(--gold-deep)}
.cart-icon{position:relative;display:flex;color:var(--ink)}
.cart-icon:hover{color:var(--gold-deep)}
#cart-badge{position:absolute;top:-8px;right:-10px;background:var(--gold-deep);color:#fff;font-size:.66rem;font-weight:700;min-width:18px;height:18px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;padding:0 5px}
.nav-cta{display:none;min-height:44px;padding:0 22px;border-radius:var(--radius);background:var(--accent);color:#fff;font-weight:700;font-size:.92rem;align-items:center}
.burger{width:48px;height:48px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.overlay{position:fixed;inset:0;z-index:55;background:var(--ink);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;opacity:0;visibility:hidden;transform:translateY(-12px);transition:.35s ease;padding:80px 24px 40px}
body.menu-open .overlay{opacity:1;visibility:visible;transform:none}
.overlay a{color:#fff;font-family:"Work Sans",system-ui,-apple-system,sans-serif;font-size:2rem;font-weight:500;min-height:52px;display:flex;align-items:center}
.overlay a:hover{color:var(--gold-soft)}
.overlay .btn{margin-top:18px;font-family:"Work Sans",system-ui,-apple-system,sans-serif;font-size:1rem}

/* ---- Footer (matches home) ---- */
.footer{background:#12171c;color:rgba(255,255,255,.7);padding:46px 0 calc(36px + var(--safe-b));margin-top:40px}
.footer .wrap{display:flex;flex-direction:column;gap:22px}
.footer .brand{color:#fff}
.footer .brand .name{color:#fff}
.footer-cols{display:grid;grid-template-columns:1fr;gap:26px}
.footer-col h4{color:#fff;font-family:"Work Sans",system-ui,-apple-system,sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;opacity:.75}
.footer-col nav{display:flex;flex-direction:column;gap:11px}
.footer-col nav a{font-size:.94rem;font-weight:600;transition:.2s;padding:3px 0;display:inline-block}
.footer-col nav a:hover{color:var(--gold-soft)}
@media(min-width:620px){.footer-cols{grid-template-columns:repeat(3,1fr)}}
.footer .fine{font-size:.82rem;opacity:.6;border-top:1px solid rgba(255,255,255,.12);padding-top:22px}

/* =========================================================
   PRODUCT PAGE
   ========================================================= */
#product-hero{padding:0 0 12px}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-soft);padding:14px 0 4px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--gold-deep)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .current{color:var(--ink);font-weight:600}

.review-row{display:flex;gap:16px;align-items:flex-start;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 22px;margin:14px 0 8px}
.review-row .stars{display:flex;gap:2px;flex-shrink:0;margin-top:2px}
.review-row .stars svg{width:16px;height:16px;color:var(--gold)}
.review-row-title{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px}
.review-row-quote{font-style:italic;color:var(--ink);margin-bottom:8px}
.review-row-author{display:flex;align-items:center;gap:10px}
.review-row-avatar{width:32px;height:32px;border-radius:50%;background:var(--cream-2);color:var(--gold-deep);display:flex;align-items:center;justify-content:center;font-family:"Work Sans",system-ui,-apple-system,sans-serif;font-weight:600;font-size:.82rem}
.review-row-name{font-weight:600;font-size:.9rem}

.product-title-block{margin:14px 0 4px;max-width:860px}
.product-h1-keywords{font-size:.78rem;line-height:1.35;font-weight:700;color:var(--ink-soft);font-family:"Work Sans",system-ui,-apple-system,sans-serif;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.product-aspirational-headline{font-size:clamp(1.55rem,3.6vw,2.15rem);line-height:1.12;color:var(--ink);font-weight:650;font-family:"Work Sans",system-ui,-apple-system,sans-serif;margin-top:2px;max-width:780px}
.product-features-subheadline{font-size:clamp(.98rem,1.5vw,1.12rem);line-height:1.45;color:var(--ink-soft);font-weight:400;font-family:"Work Sans",system-ui,-apple-system,sans-serif;margin-top:8px;max-width:780px}
/* The title block moved into the ~525px buy column with the 2026-08-08 reformat.
   The sizes above were set when it spanned the full 1132px row, where a 4.6vw
   headline and a 25px sub read correctly; in the column they cost 256px above
   the price and pushed Add to Cart off the fold. Scoped down here rather than
   changed globally, so the full-width usage elsewhere is untouched. */
.product-info .product-aspirational-headline{font-size:clamp(1.55rem,2.5vw,2.05rem);line-height:1.14}
.product-info .product-features-subheadline{font-size:1rem;line-height:1.45;margin-top:8px}
.product-highlights{padding:clamp(30px,5vw,52px) 0;border-top:1px solid var(--line)}

.highlight-row{display:grid;grid-template-columns:1fr;gap:14px;margin:26px 0 8px}
@media(min-width:560px){.highlight-row{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.highlight-row{grid-template-columns:repeat(4,1fr)}}
.highlight-card{display:flex;gap:12px;align-items:flex-start;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px}
.highlight-icon{width:40px;height:40px;border-radius:var(--radius);background:#fff;border:1px solid var(--gold-soft);color:var(--gold-deep);display:grid;place-items:center;flex-shrink:0}
/* ── Guarantee cards ──────────────────────────────────────────────────────
   One neutral surface for all four, replacing the pale blue / sky blue / soft
   yellow / grey run inherited from the cloudpillo palette (2026-08-13). That
   pastel sequence is a signature of magneticscreen.net, which this site
   competes with, so the per-card shading is deliberately gone rather than
   recoloured. The cards now inherit the base .highlight-card surface and are
   separated by their border alone. */
.highlight-card .highlight-icon{color:var(--gold-deep);border-color:inherit}
.highlight-text strong{display:block;font-size:.92rem}
.highlight-text span{font-size:.82rem;color:var(--ink-soft);line-height:1.45}

.product-grid{display:grid;grid-template-columns:1fr;gap:28px;margin:22px 0 12px}
@media(min-width:880px){.product-grid{grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);gap:42px;align-items:start}}

/* Gallery: vertical thumb rail beside the main stage (reference layout).
   The rail sits BELOW the stage on mobile and to the left on desktop, and the
   buttons keep the .gallery-thumb + data-src contract main.js binds to. */
.product-gallery{display:grid;grid-template-columns:1fr;gap:12px;align-self:start}
@media(min-width:880px){
  .product-gallery{grid-template-columns:78px minmax(0,1fr);position:sticky;top:82px}
  /* One photo means no rail, so the stage takes the full width. */
  .product-gallery.is-single{grid-template-columns:minmax(0,1fr)}
}
.gallery-rail{display:flex;gap:10px;order:2;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gallery-rail::-webkit-scrollbar{display:none}
@media(min-width:880px){
  .gallery-rail{order:0;flex-direction:column;overflow-x:visible;overflow-y:auto;max-height:560px;padding-bottom:0}
}
.gallery-thumb{width:72px;height:72px;flex:none;border-radius:var(--radius);overflow:hidden;border:1.5px solid var(--line);background:var(--cream);cursor:pointer;padding:0;transition:.2s}
.gallery-thumb:hover{border-color:var(--gold-soft)}
.gallery-thumb.active{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,115,0,.14)}
.gallery-thumb img{width:100%;height:100%;object-fit:cover}
.gallery-stage{position:relative;min-width:0}
.gallery-main{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(160deg,var(--cream),var(--cream-2));aspect-ratio:1/1;border:1px solid var(--line)}
.gallery-main img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.gallery-sale-badge{position:absolute;top:14px;left:14px;z-index:2;background:var(--accent);color:#fff;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:6px 13px;border-radius:999px}
.gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:.2s;z-index:2}
.gallery-arrow:hover{background:#fff;border-color:var(--gold);color:var(--gold-deep)}
.gallery-arrow svg{width:20px;height:20px}
.gallery-prev{left:12px}
.gallery-next{right:12px}

.product-info{padding-top:0}
.price-block{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;margin:12px 0 4px}
.price-was{color:var(--ink-soft);text-decoration:line-through;font-size:1.05rem}
.price-now{font-size:clamp(2rem,3.2vw,2.25rem);font-weight:700;font-family:"Work Sans",system-ui,-apple-system,sans-serif;color:var(--ink);line-height:1}
.price-tax{font-size:.86rem;color:var(--ink-soft)}
.price-save{display:inline-block;background:#fff;border:1px solid var(--gold-soft);color:var(--gold-deep);font-weight:700;font-size:.8rem;padding:5px 11px;border-radius:999px;margin-bottom:10px}
/* display:inline-block above would otherwise beat the hidden attribute's UA display:none,
   so a no-sale product showed a "Save $0" pill. */
.price-save[hidden]{display:none}
/* Unboxed countdown line immediately beneath the compact Trustpilot score. */
.tp-inline-rating + .sale-timer{margin:0 0 12px;padding:0;border:0;background:transparent;color:inherit;text-align:left;font-family:inherit}
.tp-inline-rating + .sale-timer:empty{margin:0}
.product-short-desc{color:var(--ink-soft);margin:12px 0 18px}

/* Variation (size) selector */
/* The size and colour selectors are <button>s, and a button does NOT inherit the page font.
   Without this they render in the UA default (Arial 13px) while everything around them is Inter. */
button,input,select,textarea{font:inherit;color:inherit}
.variant-select{margin:18px 0 6px}
.variant-select-label{font-size:.95rem;color:var(--ink-soft);margin-bottom:10px}
.variant-select-label strong{color:var(--ink)}

/* ── Option cards (reference buy box) ─────────────────────────────────────
   cloudpillo stacks its choices as full-width cards: a radio dot, the option
   name, then the price on its own line, with the selected card outlined in
   the sky blue. The old treatment here was a wrap-around row of small chips,
   which is the single thing that stopped the reformatted page reading as the
   reference page even after the layout matched.

   The radio is drawn with ::before rather than a real <input>, because these
   controls are <button>s and <a>s built by renderSizes() in the product
   layout. Restyling instead of re-marking keeps the in-page variant switcher,
   the per-size colour sync and the legacy per-variant-page links untouched. */
.variant-options{display:flex;flex-direction:column;gap:10px}
.variant-option{position:relative;display:flex;align-items:center;gap:13px;
  border:1.5px solid var(--line);border-radius:var(--radius-lg);padding:14px 18px;
  text-decoration:none;color:var(--ink);background:#fff;transition:.2s;width:100%;text-align:left}
.variant-option::before{content:"";width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--line-strong);flex:none;transition:.2s}
.variant-option:hover{border-color:var(--accent)}
.variant-option.is-active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(11,107,203,.30)}
.variant-option.is-active::before{border-color:var(--gold);border-width:6px}
.variant-option-name{font-weight:700;font-size:1rem;line-height:1.3}
.variant-option-price{font-size:.95rem;font-weight:700;color:var(--ink)}
/* Name above price, both to the left of the card, as on the reference. */
.variant-option{flex-wrap:wrap}
.variant-option .variant-option-name{flex:1 1 auto}
.variant-option .variant-option-price{flex:0 0 auto;margin-left:auto}

/* The colour picker is a label-only choice with no price, so it stays a
   compact chip row rather than becoming a stack of near-empty cards. */
#colour-select .variant-options{flex-direction:row;flex-wrap:wrap}
#colour-select .variant-option{width:auto;padding:10px 16px;border-radius:var(--radius)}
#colour-select .variant-option::before{width:14px;height:14px}
#colour-select .variant-option.is-active::before{border-width:4px}
/* Size dropdown: used instead of the button grid once a family carries a lot of sizes
   (see SIZE_DROPDOWN_MIN in the product layouts). Styled to match .variant-option. */
.variant-select-input{width:100%;font:inherit;font-size:1rem;font-weight:600;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:13px 40px 13px 16px;cursor:pointer;transition:.2s;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23333' stroke-width='2.2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.variant-select-input:hover{border-color:var(--gold)}
.variant-select-input:focus-visible{outline:none;border-color:var(--gold-deep);box-shadow:inset 0 0 0 1px var(--gold-deep)}

/* ---- Trust strip, full width directly under the nav ---- */
.trust-strip{background:var(--cream);border-bottom:1px solid var(--line)}
.trust-strip-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 34px;margin:0;padding:11px 0}
.trust-strip-list li{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--ink-soft);line-height:1.35}
.trust-strip-list li strong{color:var(--ink);font-weight:700}
.trust-strip-list svg{width:18px;height:18px;color:var(--gold-deep);flex:none}
.trust-strip-stars{display:flex;gap:1px;flex:none}
.trust-strip-stars svg{width:14px;height:14px;color:var(--star)}
@media(max-width:720px){
  .trust-strip-list{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:26px;padding:10px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .trust-strip-list::-webkit-scrollbar{display:none}
  .trust-strip-list li{white-space:nowrap;font-size:.8rem}
}

/* ---- Rating line in the buy box (renders only when real figures exist) ---- */
.buybox-rating{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;color:var(--ink-soft);margin-bottom:12px}
.buybox-rating strong{color:var(--ink);font-weight:700}
.buybox-rating em{font-style:italic}
.buybox-rating:hover{color:var(--gold-deep)}
.buybox-stars{display:flex;gap:1px;flex:none}
.buybox-stars svg{width:16px;height:16px;color:var(--star)}

/* ---- Benefit bullets under the price ---- */
.buybox-bullets{list-style:none;margin:14px 0 0;display:grid;gap:8px}
.buybox-bullets li{display:flex;align-items:flex-start;gap:9px;font-size:.95rem;color:var(--ink);line-height:1.4}
.buybox-bullets svg{width:18px;height:18px;color:var(--gold-deep);flex:none;margin-top:3px}

/* ---- Reassurance rows under the Add to Cart button.
   Replaces the old 2x2 .atc-trust-grid: same four claims, now one chip-icon
   row each, below the button rather than above the variant selectors. ---- */
.buybox-rows{list-style:none;margin:0;display:grid;gap:10px;padding:18px 0;border-top:1px solid var(--line)}
.buybox-rows li{display:flex;align-items:center;gap:13px;font-size:.94rem;color:var(--ink);line-height:1.45}
/* --line rather than --cream: the page tint is too close to white to read as a chip. */
.buybox-row-chip{width:38px;height:38px;border-radius:var(--radius-lg);background:var(--line);display:grid;place-items:center;flex:none}
.buybox-rows svg{width:19px;height:19px;color:var(--gold-deep)}
.buybox-rows strong{font-weight:700}
.buybox-rows a{color:var(--gold-deep);font-weight:600;text-decoration:underline}

/* ---- Cross-sell inside the buy box, each row with a one-tap add ---- */
.buybox-also{border-top:1px solid var(--line);padding:20px 0 4px}
.buybox-also-heading{font-size:1.3rem;margin-bottom:14px}
.buybox-also-item{display:flex;align-items:center;gap:14px;padding:10px 0}
.buybox-also-pic{width:64px;height:64px;border-radius:var(--radius-lg);overflow:hidden;background:var(--cream-2);flex:none}
.buybox-also-pic img{width:100%;height:100%;object-fit:cover}
.buybox-also-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.buybox-also-name{font-size:1.02rem;font-weight:600;color:var(--ink);line-height:1.25}
.buybox-also-name:hover{color:var(--gold)}
.buybox-also-price{font-weight:700;color:var(--ink);font-size:.98rem}
.buybox-also-add{width:44px;height:44px;border-radius:50%;border:none;background:var(--gold);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;transition:.2s}
.buybox-also-add:hover{transform:scale(1.06)}
.buybox-also-add svg{width:20px;height:20px}
.buybox-also-add .ic-tick{display:none}
.buybox-also-add.is-added{background:var(--star)}
.buybox-also-add.is-added .ic-plus{display:none}
.buybox-also-add.is-added .ic-tick{display:block}

/* ---- Disclosures ---- */
.buybox-disclosures{border-top:1px solid var(--line);margin-top:16px}
.buybox-disc{border-bottom:1px solid var(--line)}
.buybox-disc summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px;cursor:pointer;list-style:none;font-size:1.02rem;font-weight:600;color:var(--ink)}
.buybox-disc summary::-webkit-details-marker{display:none}
.buybox-disc-icon{flex:none;color:var(--ink);transition:transform .3s}
.buybox-disc-icon svg{width:17px;height:17px;display:block}
.buybox-disc[open] .buybox-disc-icon{transform:rotate(45deg)}
.buybox-disc-body{padding:0 2px 20px}
.buybox-disc-body p{font-size:.94rem;color:var(--ink-soft);line-height:1.6;margin-bottom:12px}
.buybox-disc-body p:last-child{margin-bottom:0}
.buybox-disc-body a{color:var(--gold-deep);font-weight:600;text-decoration:underline}
.buybox-disc-body .spec-table{border-top:none;max-width:none}
.buybox-disc-body .spec-table th,.buybox-disc-body .spec-table td{padding:10px 2px;font-size:.92rem}

/* Price restated immediately above the Add to Cart button. Moved here from an
   inline <style> block in product.njk so the whole buy box is themed in one place. */
.atc-price{display:flex;align-items:baseline;gap:10px;margin:22px 0 0}
.atc-price-label{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.atc-price-now{font-size:1.5rem;font-weight:700;color:var(--ink)}
.atc-price-was{font-size:1rem;font-weight:600;color:var(--ink-soft);text-decoration:line-through}

/* Add to cart. The reference button is full width, tall and fully pilled, and
   it is the only thing on its row. The quantity stepper moves above it rather
   than competing with it for width. */
.atc-row{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:18px 0 16px}
.qty-input{display:inline-flex;align-self:flex-start;align-items:center;border:1.5px solid var(--line);border-radius:var(--radius-pill);overflow:hidden;background:#fff}
.qty-btn{width:46px;height:52px;background:transparent;border:none;font-size:1.3rem;cursor:pointer;color:var(--ink)}
.qty-btn:hover{color:var(--gold-deep)}
.qty-input input{width:46px;height:52px;border:none;text-align:center;font-size:1rem;font-weight:600;background:transparent;-moz-appearance:textfield}
.qty-input input::-webkit-outer-spin-button,.qty-input input::-webkit-inner-spin-button{-webkit-appearance:none}
.atc-row .qty-btn{width:42px;height:48px}
.atc-row .qty-input input{width:42px;height:48px}
.atc-btn{width:100%;height:60px;min-height:60px;font-size:1.15rem;font-weight:700;
  border-radius:var(--radius-pill);white-space:nowrap;justify-content:center}
.ship-note{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ink-soft)}
.ship-note svg{color:var(--gold-deep)}
/* Compact delivery/reassurance note under the review and countdown stack. */
.delivery-banner{display:flex;gap:10px;align-items:flex-start;margin-top:10px;margin-bottom:16px;
  padding:11px 13px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink)}
.delivery-banner svg{color:var(--gold-deep);flex-shrink:0;margin-top:1px}
.delivery-banner span{font-size:.88rem;line-height:1.45;color:var(--ink-soft)}
.delivery-banner strong{color:var(--ink);font-weight:700}
.delivery-banner em{font-style:normal;color:var(--ink);font-weight:700}

#product-details,#faq,#buying-guide,#cta-banner{padding:clamp(48px,7vw,80px) 0}
#product-details{border-top:1px solid var(--line)}
.details-heading{margin:6px 0 22px}
.about-para{margin-bottom:14px;color:var(--ink-soft);font-size:1.05rem}
.product-video{padding:clamp(36px,6vw,64px) 0 0}
.product-video-el{width:100%;height:auto;display:block;border-radius:var(--radius-lg);background:#000;box-shadow:var(--shadow-sm)}
.product-specs{padding:clamp(36px,6vw,64px) 0 0}
.product-specs-grid{display:grid;grid-template-columns:1fr;gap:22px}
.product-spec-figure{margin:0;width:100%}
.product-spec-figure img{display:block;width:100%;height:auto}
.product-about-images{padding:clamp(36px,6vw,64px) 0 0}
.about-images-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.about-image-figure{margin:0;width:100%}
.about-image-figure:only-child{grid-column:1/-1}
.about-image-figure img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
@media (max-width:700px){.about-images-grid{grid-template-columns:1fr}}
.spec-table{width:100%;border-collapse:collapse;max-width:760px;border-top:1px solid var(--line)}
.spec-table th,.spec-table td{text-align:left;padding:15px 4px;border-bottom:1px solid var(--line);font-size:1rem;vertical-align:top}
.spec-table th{width:40%;font-weight:600;color:var(--ink-soft)}
.spec-table td{color:var(--ink);font-weight:600}

/* Cart upsell / cross-sell card */
.cart-upsell{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--gold-soft);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm)}
.cart-upsell[hidden]{display:none}
.cart-upsell-pic{flex-shrink:0;width:88px;height:88px;border-radius:var(--radius);overflow:hidden;background:var(--cream)}
.cart-upsell-pic img{width:100%;height:100%;object-fit:cover}
.cart-upsell-body{flex:1;min-width:0}
.cart-upsell-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:4px}
.cart-upsell-body h3{font-family:"Work Sans",system-ui,-apple-system,sans-serif;font-size:1.15rem;margin-bottom:4px}
.cart-upsell-body h3 a{color:var(--ink)}
.cart-upsell-desc{color:var(--ink-soft);font-size:.9rem;line-height:1.5;margin:0}
.cart-upsell-action{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}
.cart-upsell-price{font-family:"Work Sans",system-ui,-apple-system,sans-serif;font-size:1.25rem;font-weight:600;color:var(--ink)}
.cart-upsell-price s{color:var(--ink-soft);font-size:.9rem;font-weight:400;margin-left:6px}
.cart-upsell-btn{height:44px;font-size:.92rem;white-space:nowrap}
@media(max-width:560px){
  .cart-upsell{flex-direction:column;align-items:stretch;text-align:left}
  .cart-upsell-pic{width:100%;height:160px}
  .cart-upsell-action{flex-direction:row;align-items:center;justify-content:space-between}
}

/* FAQ (details/summary styled like home) */
#faq{background:var(--cream)}
.faq-wrap{max-width:780px;margin:0 auto;text-align:center}
.faq-wrap h2{margin-bottom:4px}
.faq-item{text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);margin-top:14px;overflow:hidden}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;cursor:pointer;list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-q h3{font-family:"Work Sans",system-ui,-apple-system,sans-serif;font-size:1.06rem;font-weight:600;line-height:1.4}
.faq-icon{flex-shrink:0;color:var(--gold-deep);transition:transform .3s}
.faq-item[open] .faq-icon{transform:rotate(45deg)}
/* Scoped to the <details> accordion ONLY. The home pages run a different,
   max-height-based .faq-a accordion in their own inline CSS, and an unscoped
   padding here leaks onto it: overflow:hidden clips at the PADDING edge, so
   22px of answer text showed under every collapsed home-page question. */
details.faq-item .faq-a{padding:0 24px 22px;color:var(--ink-soft);font-size:1rem}

/* Buying guide */
#buying-guide{background:var(--cream)}
.guide-inner{max-width:820px;margin:0 auto}
.guide-title{margin-bottom:12px}
.guide-meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--ink-soft);font-size:.85rem;margin-bottom:30px}
.guide-meta span{display:flex;align-items:center;gap:6px}
.guide-inner :is(h2,h3){clear:both;margin:40px 0 12px;color:var(--ink)}
.guide-inner h2{font-size:clamp(1.6rem,4vw,2.1rem)}
.guide-inner h2::after{content:"";display:block;width:46px;height:3px;margin-top:14px;background:var(--accent);border-radius:3px}
.guide-inner h3{font-size:1.3rem}
.guide-inner p{color:var(--ink-soft);font-size:1.05rem;margin-bottom:16px}
.guide-inner ul,.guide-inner ol{margin:0 0 18px 22px}
.guide-inner li{margin-bottom:7px;color:var(--ink-soft)}
.guide-inner strong{color:var(--ink);font-weight:600}
.guide-inner a{color:var(--gold-deep);text-decoration:underline}
/* Buttons inside prose must keep their button styling, not the link colour */
.guide-inner a.btn{text-decoration:none}
.guide-inner a.btn-primary,.guide-inner a.btn-dark{color:#fff}

#cta-banner{position:relative;background:var(--ink);color:#fff;text-align:center;overflow:hidden}
#cta-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 50% 0%,rgba(180,226,248,.30) 0%,rgba(180,226,248,0) 60%)}
#cta-banner .container{position:relative;z-index:2;max-width:720px}
#cta-banner h2{color:#fff}
#cta-banner p{color:rgba(255,255,255,.82);margin:14px auto 26px}

/* =========================================================
   SHOP LISTING / PRODUCT CARDS
   ========================================================= */
.shop-page{padding:48px 0 70px}
.shop-page-head{max-width:680px;margin:0 0 36px}
.shop-page-head h1{margin-bottom:12px}
.shop-category + .shop-category{margin-top:54px}
.shop-cat-title{font-family:"Work Sans",system-ui,-apple-system,sans-serif;font-size:clamp(1.5rem,3vw,1.9rem);font-weight:600;margin-bottom:22px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.shop-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:620px){.shop-grid{grid-template-columns:1fr 1fr}}
@media(min-width:920px){.shop-grid{grid-template-columns:repeat(3,1fr)}}
.scard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:.3s}
.scard:hover{border-color:var(--ink-faint)}
.scard-pic{position:relative;display:block;aspect-ratio:1/1;background:var(--cream)}
.scard-pic img{width:100%;height:100%;object-fit:cover}
.scard-badge{position:absolute;top:14px;left:14px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.scard-meta{padding:24px;display:flex;flex-direction:column;flex:1}
.scard-meta .stars{display:flex;gap:2px;margin-bottom:12px}
.scard-meta .stars svg{width:16px;height:16px;color:var(--gold)}
.scard-meta h3{font-family:"Work Sans",system-ui,-apple-system,sans-serif;font-size:1.32rem;font-weight:600;margin-bottom:8px}
.scard-meta>p{color:var(--ink-soft);font-size:.98rem;margin-bottom:18px;flex:1}
.scard-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.scard-price .now{font-family:"Work Sans",system-ui,-apple-system,sans-serif;font-size:1.7rem;font-weight:600;color:var(--ink);line-height:1}
.scard-price .was{color:var(--ink-soft);text-decoration:line-through;font-size:1.05rem}
.scard-price .ship{width:100%;font-size:.85rem;font-weight:600;color:var(--gold-deep)}
.scard .btn{width:100%}

/* =========================================================
   CART
   ========================================================= */
#cart-page{padding:40px 0 80px}
.cart-header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.cart-continue{color:var(--gold-deep);font-weight:600;font-size:.92rem}
.cart-welcome{color:var(--ink-soft);margin-bottom:30px}
.cart-empty{text-align:center;padding:70px 20px;color:var(--ink-soft)}
.cart-empty svg{color:var(--line);margin:0 auto 16px}
.cart-empty p{margin-bottom:20px}
.cart-layout{display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
@media(min-width:880px){.cart-layout{grid-template-columns:2fr 3fr;gap:40px}}
.cart-trust{margin-top:48px;border-top:1px solid var(--line);padding-top:40px}
.cart-trust-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:760px){.cart-trust-grid{grid-template-columns:repeat(3,1fr);gap:30px}}
.cart-trust-item{display:flex;flex-direction:column;gap:12px}
.cart-trust-icon{width:52px;height:52px;border-radius:var(--radius);background:var(--cream);border:1px solid var(--gold-soft);color:var(--gold-deep);display:grid;place-items:center}
.cart-trust-body h3{font-family:"Work Sans",system-ui,-apple-system,sans-serif;font-size:1.15rem;margin-bottom:6px}
.cart-trust-body p{font-size:.92rem;color:var(--ink-soft);line-height:1.6;margin:0}
.cart-items{display:flex;flex-direction:column;gap:16px}
.cart-item{display:grid;grid-template-columns:96px 1fr auto;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;align-items:center}
.cart-item-img{width:96px;height:96px;border-radius:var(--radius);overflow:hidden;background:var(--cream)}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-body{min-width:0}
.cart-item-body h3{font-family:"Work Sans",system-ui,-apple-system,sans-serif;font-size:1.12rem;margin-bottom:6px;overflow-wrap:break-word;word-break:break-word}
.cart-item-meta{list-style:none;font-size:.85rem;color:var(--ink-soft)}
.cart-item-controls{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.cart-item-price{font-weight:600;font-size:1.1rem;font-family:"Work Sans",system-ui,-apple-system,sans-serif}
.cart-remove{background:none;border:none;color:var(--ink-soft);cursor:pointer;padding:4px}
.cart-remove:hover{color:var(--gold-deep)}
.cart-sidebar{display:flex;flex-direction:column;gap:16px}
@media(min-width:880px){.cart-sidebar{position:sticky;top:90px}}
.cart-summary,.cart-customer{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px}
.cart-summary h2,.cart-customer h2{font-size:1.3rem;margin-bottom:16px}
.cart-summary-row{display:flex;justify-content:space-between;padding:7px 0;font-size:.96rem}
.cart-summary-free{color:var(--gold-deep);font-weight:600}
.cart-delivery-hint{font-size:.78rem;color:var(--gold-deep);font-weight:600;margin:2px 0 0;text-align:right}
.cart-delivery-options{margin:12px 0 4px;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.cart-delivery-options-title{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px}
.cart-delivery-option{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:9px 0;cursor:pointer}
.cart-delivery-option+ .cart-delivery-option{border-top:1px solid var(--line)}
.cart-delivery-option input{margin-top:3px;accent-color:var(--gold-deep)}
.cart-delivery-option strong{display:block;font-size:.92rem}
.cart-delivery-option small{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:2px;line-height:1.35}
.cart-delivery-option-price{font-weight:700;color:var(--ink);white-space:nowrap}
.cart-summary-total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-weight:700;font-size:1.15rem}
.cart-section-label{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:4px 0 12px}
.cart-section-divider{height:1px;background:var(--line);margin:18px 0}
.cart-field{margin-bottom:13px}
.cart-field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
.cart-field .req{color:var(--gold-deep)}
.cart-optional{color:var(--ink-soft);font-weight:400}
.cart-field input,.cart-field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius);font-family:"Work Sans",system-ui,-apple-system,sans-serif;font-size:.95rem;background:#fff;color:var(--ink)}
.cart-field input:focus,.cart-field textarea:focus{outline:none;border-color:var(--gold)}
.cart-field-error{display:none;font-size:.78rem;color:var(--gold-deep);margin-top:5px}
.cart-field.is-invalid input,.cart-field.is-invalid textarea{border-color:#b42318}
.cart-field.is-invalid .cart-field-error{display:block}
.cart-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cart-divider{text-align:center;position:relative;color:var(--ink-soft);font-size:.82rem;margin:4px 0}
.cart-divider::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.cart-divider span{background:var(--white);padding:0 12px;position:relative}
.cart-secure{display:flex;align-items:center;justify-content:center;gap:7px;font-size:.82rem;color:var(--ink-soft)}
.cart-secure svg{color:var(--gold-deep)}

/* =========================================================
   ORDER RESULT
   ========================================================= */
#order-success-page,#order-cancel-page{padding:90px 0}
.order-result{max-width:560px;margin:0 auto;text-align:center}
.order-result-icon{width:84px;height:84px;border-radius:50%;background:var(--cream);border:1px solid var(--gold-soft);color:var(--gold-deep);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.order-result-icon--error{background:#fef3f2;border-color:#fecdca;color:#b42318}
.order-result-icon--spin svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.order-result h1{margin-bottom:14px}
.order-result p{color:var(--ink-soft);margin-bottom:14px}
.order-result .btn{margin-top:12px}
.order-ref{display:inline-block;margin:4px auto 18px;padding:9px 18px;border:1px solid var(--gold-soft);border-radius:var(--radius);background:var(--cream);font-size:.92rem;font-weight:600;color:var(--ink)}

/* =========================================================
   ABOUT PAGE (2026-07-31): company-first layout for ad-platform
   verification (Google MC site quality, Meta business review).
   Own class family, NOT .prose-page, so its link/underline rules
   never fight the cards and buttons here.
   ========================================================= */
.about-page{padding:50px 0 80px}
.about-hero{max-width:760px;margin-bottom:42px}
.about-hero h1{margin-bottom:8px}
.about-lede{color:var(--ink-soft);font-size:1.15rem;line-height:1.55;margin-bottom:18px}
.about-chips{display:flex;flex-wrap:wrap;gap:8px}
.about-chip{display:inline-block;background:var(--cream-2);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.85rem;font-weight:600;color:var(--ink)}
.about-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:start;margin-bottom:48px}
@media(min-width:880px){.about-grid{grid-template-columns:1.4fr 1fr;gap:52px}}
.about-story h2{font-size:1.5rem;margin:0 0 12px}
.about-story h2 + p{margin-top:0}
.about-story p{margin-bottom:15px;color:var(--ink-soft);line-height:1.65}
.about-story p + h2{margin-top:34px}
.about-story a{color:var(--ink-strong);text-decoration:underline;text-underline-offset:2px}
.about-company-card{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 20px;position:sticky;top:90px}
.about-company-card h2{font-size:1.12rem;margin-bottom:16px}
.about-range-heading{font-size:1.5rem;margin-bottom:18px}
.about-cards{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:44px}
@media(min-width:640px){.about-cards{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.about-cards{grid-template-columns:repeat(4,1fr)}}
.about-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.about-card h3{font-size:1.02rem;margin-bottom:8px}
.about-card p{font-size:.92rem;color:var(--ink-soft);line-height:1.6}
.about-policies{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin-bottom:36px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.about-policies p{color:var(--ink-soft);margin:0}
.about-policy-links{display:flex;flex-wrap:wrap;gap:8px}
.about-policy-links a{display:inline-block;border:1px solid var(--line-strong);border-radius:999px;padding:7px 16px;font-size:.88rem;font-weight:600;color:var(--ink);text-decoration:none;transition:.2s}
.about-policy-links a:hover{border-color:var(--gold);color:var(--gold-deep)}
.about-cta{display:flex;flex-wrap:wrap;gap:12px}

/* =========================================================
   PROSE / CONTACT
   ========================================================= */
.prose-page{padding:50px 0 80px}
/* CEO 2026-07-27: every page shares the one site width (--maxw via .container) */
.prose-page h1{margin-bottom:8px}
.prose-updated{color:var(--ink-soft);font-size:.88rem;margin-bottom:32px}
.prose-page h2{font-size:1.5rem;margin:34px 0 12px}
.prose-page h3{font-size:1.18rem;margin:22px 0 8px}
.prose-page p{margin-bottom:15px;color:var(--ink-soft)}
.prose-page ul{margin:0 0 18px 22px}
.prose-page li{margin-bottom:7px;color:var(--ink-soft)}
.prose-page a{color:var(--ink-strong);text-decoration:underline;text-underline-offset:2px}
/* A .btn inside prose is a BUTTON, not a link: the rule above (0,2,0) was beating
   .btn-primary (0,1,0) and repainting the label, so every CTA on a prose page rendered
   dark-on-green with an underline. It was unreadable before this restyle too, just as
   green-on-green rather than 2.55:1. */
.prose-page a.btn{text-decoration:none}
/* Card links are cards, not prose links. Same override reason as .btn above. */
/* Whole-card links: the .prose-page underline is for inline links, not for cards.
   Any new card class that is itself an <a> belongs on this list. */
.prose-page a.lp-card,.prose-page a.scard-pic,.prose-page a.scard,.prose-page a.quote-route{text-decoration:none;color:inherit}
.prose-page a.lp-card h3,.prose-page a.lp-card p{text-decoration:none}
.prose-page a.btn-primary,.prose-page a.btn-quote-calc,.prose-page a.btn-quote-calc:hover{color:#fff}
.prose-page a.btn-ghost,.prose-page a.btn-outline,.prose-page a.btn-light{color:var(--ink)}
.prose-page a.btn-dark{color:#fff}
.prose-page .btn{text-decoration:none}
.contact-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
@media(min-width:880px){.contact-grid{grid-template-columns:1fr 1fr;gap:48px}}
.contact-form{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px}
.contact-form .cart-field{margin-bottom:16px}
.form-status{margin-top:14px;font-size:.9rem}
.form-status.ok{color:var(--gold-deep)}
.form-status.err{color:#b42318}
/* contact details (shared layout, matches the home page contact section) */
.contact-intro p{color:var(--ink-soft);font-size:1.06rem;margin-bottom:24px;max-width:460px}
.contact-methods{display:grid;gap:14px}
.cmethod{display:flex;align-items:center;gap:16px;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;transition:.25s;text-decoration:none}
.cmethod:hover{border-color:var(--gold-soft);}
.cmethod .ic{width:46px;height:46px;flex:none;border-radius:var(--radius);background:#fff;border:1px solid var(--gold-soft);display:grid;place-items:center}
.cmethod .ic svg{width:22px;height:22px;color:var(--gold-deep)}
.cmethod small{display:block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.cmethod b{font-size:1.05rem;font-weight:600;color:var(--ink);word-break:break-word}
.company-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;margin-top:24px}
.company-card h3{margin-bottom:6px}
.company-card .sub{color:var(--ink-soft);font-size:.95rem;margin-bottom:20px}
.detail-list{list-style:none;display:grid;gap:0;margin:0}
.detail-list li{display:grid;grid-template-columns:1fr;gap:2px;padding:14px 0;border-top:1px solid var(--line)}
.detail-list li:first-child{border-top:none;padding-top:0}
.detail-list .k{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.detail-list .v{font-size:1rem;color:var(--ink);line-height:1.5}
.detail-list .v a{color:var(--gold-deep);font-weight:600}

/* ---- Lightbox ---- */
#gallery-main-img{cursor:zoom-in}

/* Delivery-time line under the payment strip (real claims: 5-7 days per the
   shipping policy page, threshold/fee from site.json) */
.atc-delivery-note{display:flex;gap:8px;align-items:center;margin:12px 0 0;font-size:.85rem;color:var(--ink-soft)}
.atc-delivery-note svg{flex-shrink:0;color:var(--accent)}
.atc-delivery-note strong{color:var(--ink)}

/* Sticky buy bar: appears once the in-page Add to Cart button scrolls off the
   top, and retires at the footer so it never covers the final CTA (main.js).
   Replaces the old mobile-only .mobile-buy-bar; it now runs at every width,
   gaining the thumbnail, product name and benefit ticks on desktop. The cookie
   banner (z 9999) deliberately outranks it. */
.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:120;background:rgba(255,255,255,.97);backdrop-filter:saturate(180%) blur(12px);border-top:1px solid var(--line);padding:10px 0 calc(10px + var(--safe-b));transform:translateY(110%);transition:transform .3s ease;box-shadow:0 -10px 30px -20px rgba(14,26,43,.45)}
.sticky-buy.is-visible{transform:none}
.sticky-buy[hidden]{display:none}
.sticky-buy-inner{max-width:var(--maxw);margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:16px}
.sticky-buy-pic{width:46px;height:46px;border-radius:var(--radius);object-fit:cover;background:var(--cream-2);flex:none}
.sticky-buy-meta{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.sticky-buy-name{font-size:1.02rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-buy-points{list-style:none;display:none;gap:22px;margin:0}
.sticky-buy-points li{display:flex;align-items:center;gap:7px;font-size:.84rem;color:var(--ink-soft);white-space:nowrap}
.sticky-buy-points svg{width:15px;height:15px;color:var(--star);flex:none}
.sticky-buy-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none;line-height:1.1}
.sticky-buy-now{font-size:1.25rem;font-weight:700;color:var(--ink);white-space:nowrap}
.sticky-buy-price s{color:var(--ink-soft);font-size:.85rem}
.sticky-buy-save{background:var(--gold-soft);color:var(--ink);font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:999px}
.sticky-buy-btn{min-height:48px;height:48px;padding:0 26px;flex:none}
/* Desktop: room for the benefit ticks, as on the reference bar. */
@media(min-width:880px){
  .sticky-buy-points{display:flex}
  .sticky-buy-price{flex-direction:row;align-items:baseline;gap:9px}
}
/* Narrow phones: drop the thumbnail and struck price so the button keeps its width. */
@media(max-width:480px){
  .sticky-buy-inner{gap:12px;padding:0 16px}
  .sticky-buy-pic,.sticky-buy-price s{display:none}
  .sticky-buy-name{font-size:.92rem}
  .sticky-buy-btn{padding:0 18px}
}

.lightbox-overlay{position:fixed;inset:0;background:rgba(31,27,22,.9);display:none;align-items:center;justify-content:center;z-index:300;padding:30px;cursor:zoom-out}
.lightbox-overlay.open{display:flex}
.lightbox-overlay img{max-width:92vw;max-height:90vh;border-radius:var(--radius)}

/* ---- Responsive ---- */
@media(min-width:880px){
  .burger{display:none}
  .nav-links{display:flex}
  .nav-cta{display:inline-flex}
}
@media(max-width:560px){
  .cart-field-row{grid-template-columns:1fr}
  /* Cart row: image + title on top, controls full-width below */
  .cart-item{grid-template-columns:72px 1fr;gap:14px;align-items:start}
  .cart-item-img{width:72px;height:72px}
  .cart-item-controls{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Cart discount code */
.cart-discount-entry{margin-top:14px}
.cart-discount-entry label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
.cart-discount-input{display:flex;gap:8px}
.cart-discount-input input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);font-size:.95rem;font-family:inherit;background:#fff;color:var(--ink)}
.cart-discount-input .btn{padding:10px 16px}
.cart-discount-msg{font-size:.9rem;margin:8px 0 0}
.cart-discount-msg.err{color:#b42318}
.cart-discount-msg.ok{color:var(--accent)}
.cart-discount-remove{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit;font-size:.85rem}
.cart-summary-row[hidden],.cart-discount-entry label[hidden],.cart-discount-input[hidden]{display:none}
a.btn-review-red,.prose-page a.btn-review-red{background:#e8192c;color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.03em;border-radius:var(--radius)}
a.btn-review-red:hover,.prose-page a.btn-review-red:hover{background:#c31423;color:#fff}


/* ── Language switcher (bilingual EN/NL, added 2026-07-26) ────────────────── */
.topnav__lang{
  display:inline-flex;align-items:center;padding:0 14px;height:36px;
  border:1px solid var(--line,var(--line));border-radius:var(--radius);
  font-size:.86rem;font-weight:600;text-decoration:none;color:inherit;
  white-space:nowrap;transition:.2s;
}
.topnav__lang:hover{border-color:var(--gold,var(--accent));color:var(--gold-deep,var(--ink-strong))}
@media (max-width:900px){ .topnav__lang{margin-left:auto;margin-right:8px} }


/* ── Quote form (the five /quote/* lead-capture pages) ───────────────────── */
.quote-form{margin:28px 0 0;max-width:760px}
.qf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.qf-field{display:flex;flex-direction:column;gap:6px}
.qf-field--wide{grid-column:1/-1}
.qf-field>span{font-size:.86rem;font-weight:600;color:var(--ink-soft,var(--ink-soft))}
.qf-field input,.qf-field select,.qf-field textarea{
  font:inherit;font-size:1rem;padding:11px 13px;border:1px solid var(--line,var(--line));
  border-radius:var(--radius);background:#fff;color:var(--ink,var(--ink));width:100%;
}
.qf-field input:focus,.qf-field select:focus,.qf-field textarea:focus{
  outline:none;border-color:var(--gold,var(--accent));box-shadow:0 0 0 3px rgba(95,128,67,.16);
}
.qf-field textarea{resize:vertical;min-height:110px}
.qf-submit{margin-top:22px}
.qf-status{margin:14px 0 0;font-size:.95rem;min-height:1.4em}
.qf-status.is-ok{color:var(--accent);font-weight:600}
.qf-status.is-error{color:#b42318;font-weight:600}
.qf-note{margin:10px 0 0;font-size:.85rem;color:var(--ink-soft,var(--ink-soft))}
.quote-routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:28px 0 8px}
/* two big visual options on /quote and /offerte (CEO 2026-07-27) */
.quote-routes--two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));max-width:920px}
.quote-route--pic{padding:0;overflow:hidden}
/* 1:1 because the quote route photography is square (a 4/3 crop cut the door
   shot's head and feet off). Cover still applies for any non-square replacement. */
.quote-route--pic img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--cream-2)}
.quote-route--pic .quote-route-body{padding:22px 24px}
.quote-route--pic .btn{margin-top:12px}
.quote-route{display:block;padding:22px 24px;border:1px solid var(--line,var(--line));border-radius:var(--radius-lg);
  background:#fff;text-decoration:none;color:inherit;transition:.25s}
.quote-route:hover{border-color:var(--gold,var(--accent));}
.quote-route h3{margin:0 0 6px;font-size:1.12rem}
.quote-route p{margin:0;font-size:.95rem;color:var(--ink-soft,var(--ink-soft))}
@media (max-width:640px){ .qf-grid{grid-template-columns:1fr} }


/* ── Keyword landing pages (/special-offer/*) ────────────────────────────── */
.lp-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin:28px 0 40px}
.lp-card{display:flex;flex-direction:column;border:1px solid var(--line,var(--line));border-radius:var(--radius-lg);
  overflow:hidden;background:#fff;text-decoration:none;color:inherit;transition:.25s}
.lp-card:hover{border-color:var(--gold,var(--accent));}
.lp-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--cream-2,var(--cream-2))}
.lp-card-body{padding:16px 18px}
.lp-card-body h3{margin:0 0 6px;font-size:1.02rem;line-height:1.35}
.lp-rating{margin:0 0 6px;font-size:.84rem;color:var(--ink-soft,var(--ink-soft))}
.lp-price{margin:0;font-weight:700;color:var(--gold-deep,var(--ink-strong))}

/* ── Quote pages: the two-path chooser, modelled on the live quote pages ── */
.quote-choice{display:grid;grid-template-columns:1fr;gap:16px;margin:26px 0 8px}
@media(min-width:760px){.quote-choice{grid-template-columns:1fr 1fr}}
.quote-choice-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;padding:24px 22px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.quote-choice-card .eyebrow{margin-bottom:0}
.quote-choice-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;flex-shrink:0}
.quote-choice-icon--person{background:var(--accent-tint);color:var(--accent)}
.quote-choice-icon--calc{background:#eaf7ef;color:#178a50}
/* Calculator CTA: green, deliberately distinct from the azure primary (CEO 2026-07-30).
   #157a47 measures 5.38:1 against white, matching the azure primary's 5.28:1 (AA).
   The lighter #178a50 used for the icon tints is only 4.39:1, so it is NOT used here. */
.btn-quote-calc{background:#157a47;color:#fff;border:1px solid #157a47}
.btn-quote-calc:hover{background:#10693c;border-color:#10693c;color:#fff}
/* Quote-form popup (quote-modal.njk) */
.quote-modal{border:none;border-radius:var(--radius-lg);padding:26px 26px 30px;width:min(680px,94vw);max-height:88vh;overflow-y:auto;box-shadow:0 24px 64px rgba(15,20,25,.25)}
.quote-modal::backdrop{background:rgba(15,20,25,.55)}
.quote-modal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:4px}
.quote-modal-head h2{margin:0}
.quote-modal-close{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);background:#fff;color:var(--ink);cursor:pointer;flex-shrink:0}
.quote-modal-close:hover{background:var(--cream-2)}
.quote-modal-intro{color:var(--ink-soft);margin-bottom:6px}
.quote-modal-hint{font-size:.85rem;color:var(--ink-soft);margin:14px 0 0}

/* ── Marketing Command Centre embedded forms (CEO 2026-07-30) ──────────────────
   The MCC script injects its own baseline styles and sets the submit button's
   background INLINE to its red accent (#e8192c), which clashes with this site's
   azure, hence the !important. Everything else here just brings the inputs and
   headings into the site's own type and border language. */
.mcc-form-wrap .mcc-heading{font-family:"Work Sans",system-ui,-apple-system,sans-serif;font-weight:650;font-size:1.3rem;line-height:1.18;letter-spacing:-.021em;color:var(--ink)}
.mcc-form-wrap .mcc-intro{color:var(--ink-soft)}
.mcc-form label{color:var(--ink)}
.mcc-form input[type=text],.mcc-form input[type=email],.mcc-form input[type=tel],.mcc-form textarea,.mcc-form select{
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:11px 13px;color:var(--ink);min-height:46px}
.mcc-form input:focus,.mcc-form textarea:focus,.mcc-form select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.mcc-form button{background:var(--accent) !important;border-radius:var(--radius);min-height:46px;padding:0 24px;
  font-family:"Work Sans",system-ui,-apple-system,sans-serif;font-weight:600;letter-spacing:0}
.mcc-form button:hover{background:var(--accent-hover) !important}
.quote-choice-card h3{margin:0}
.quote-choice-card p{margin:0 0 6px}
.quote-choice-card .btn{margin-top:auto}
/* Quote-page FAQs use the canonical .faq-item accordion (CEO 2026-07-30). The old
   flat h3+p rule is gone: the h3 now lives inside .faq-q, which styles it, and the
   stray margin pushed the summary row out of line. */
.quote-faq{margin:34px 0 8px}
.quote-faq h2{margin-bottom:16px}


/* ---- Shop page (WM-057) ---------------------------------------------------
   The keyword-pipe h1 is the SEO heading, so it is capped rather than rendered as
   a display wall (same reasoning as the PDP's .product-h1-keywords). The jump nav
   is the live page's own four category links, which pointed at nothing until the
   commerce grids were restored. */
.prose-page h1:not(.product-h1-keywords) { font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.2; }
/* The :not() is load-bearing. This rule was written for the SHOP page keyword h1, but
   .prose-page h1 (0,1,1) outranks .product-h1-keywords (0,1,0), so unscoped it re-inflated
   every title-block keyword h1 to 38px and inverted the intended hierarchy on /quote/* and
   the PDP. The keyword line is the SEO heading and stays 15px; the aspirational headline is
   the display heading. insectscreens.it is the reference. */
.shop-lede { font-size: 1.05rem; color: var(--muted, #666); margin-top: .35rem; }
.shop-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0 2.2rem; }
.shop-jump a {
  display: inline-block; padding: .5rem .95rem; border: 1px solid rgba(0,0,0,.14);
  border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .95rem;
  color: inherit; background: rgba(0,0,0,.02);
}
.shop-jump a:hover { background: rgba(0,0,0,.06); }
.prose-page h2[id] { scroll-margin-top: 90px; }

/* ── Complete company-wide Trustpilot review snapshot ───────────────────── */
.tp-inline-rating{display:flex;align-items:center;gap:7px;width:max-content;max-width:100%;margin:6px 0 12px;color:var(--ink);font-size:.9rem;line-height:1.2;text-decoration:none}
.tp-inline-rating:hover em{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.tp-inline-rating strong{white-space:nowrap}.tp-inline-rating em{font-family:Georgia,"Times New Roman",serif;font-size:1.06em}
.tp-inline-stars{display:inline-flex;gap:2px;flex:none}.tp-inline-star{display:grid;place-items:center;width:19px;height:19px;background:#d9dce1;color:#fff;font-size:13px;line-height:1}.tp-inline-star.is-filled{background:#00b67a}
.tp-reviews{padding:72px 0;background:#f5f5f2;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tp-reviews-head{text-align:center;max-width:760px;margin:0 auto 22px}.tp-reviews-head h2{font-size:clamp(2rem,5vw,3.25rem);margin:5px 0 12px;letter-spacing:-.035em}.tp-reviews-head>p:last-child{color:var(--ink-soft);font-size:1.02rem}
.tp-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;color:var(--ink);text-decoration:none;margin:0 auto 34px;font-size:.9rem}.tp-summary>strong{font-size:1.05rem}.tp-summary b{font-weight:700}
.tp-stars,.tp-card-stars{display:inline-flex;gap:2px}.tp-star,.tp-card-star{display:grid;place-items:center;width:21px;height:21px;background:#d9dce1;color:#fff;font-size:15px;line-height:1}.tp-star.is-filled,.tp-card-star.is-filled{background:#00b67a}
.tp-carousel-shell{position:relative}.tp-review-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,calc((100% - 44px)/3));gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;list-style:none;margin:0;padding:2px 1px 12px;scrollbar-width:none}.tp-review-track::-webkit-scrollbar{display:none}
.tp-review-card{display:flex;flex-direction:column;scroll-snap-align:start;background:#fff;border:1px solid #e7e7e4;border-radius:14px;padding:25px 24px;min-height:280px;box-shadow:0 3px 16px rgba(15,20,25,.035)}.tp-card-stars{margin-bottom:18px}.tp-review-card h3{font-size:1.18rem;line-height:1.3;margin:0 0 12px}.tp-review-card h3 a{color:var(--ink);text-decoration:none}.tp-review-card h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.tp-review-text{white-space:pre-line;color:var(--ink-soft);line-height:1.55;margin:0 0 24px}.tp-review-card footer{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding-top:16px;margin-top:auto;font-size:.82rem}.tp-review-card footer span{color:var(--ink-soft);text-align:right}
.tp-carousel-arrow{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font:400 30px/1 system-ui;cursor:pointer;box-shadow:0 4px 14px rgba(15,20,25,.1)}.tp-carousel-arrow:hover{border-color:#00b67a}.tp-carousel-arrow--prev{left:-21px}.tp-carousel-arrow--next{right:-21px}
.tp-review-provenance{text-align:center;color:var(--ink-soft);font-size:.82rem;margin:18px 0 0}.tp-review-provenance a{color:var(--ink);text-underline-offset:2px}
@media(max-width:900px){.tp-review-track{grid-auto-columns:minmax(290px,calc((100% - 22px)/2))}.tp-carousel-arrow--prev{left:-10px}.tp-carousel-arrow--next{right:-10px}}
@media(max-width:620px){.tp-inline-rating{flex-wrap:wrap;gap:6px;margin-bottom:12px;font-size:.84rem}.tp-reviews{padding:54px 0}.tp-review-track{grid-auto-columns:88%}.tp-carousel-arrow{display:none}.tp-summary{max-width:310px}}

/* ═══════════════════════════════════════════════════════════════════════════
   EDITORIAL PDP (2026-08-23)
   Product pages restructured to the shape of thecoldlife.com/products/
   ultimate-showerhead, on David's direction. Layout only: no pricing change,
   and no band here renders anything the catalog does not already hold.

   Two structural changes to what was here before:
     1. The STICKY column flips. The gallery used to stick and the buy column
        scrolled away; the reference does the opposite, and it is the better
        behaviour because the price and the button are what a shopper scrolls
        back for. The gallery override below un-sticks it.
     2. Section headings gain a display scale (.pdp-display-heading) over a
        small uppercase eyebrow (.pdp-eyebrow), which is the reference page's
        single most recognisable typographic move.
   Corner language is untouched: still square at --radius, still separated by a
   hairline rather than a shadow (see the :root note).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared section typography ───────────────────────────────────────────── */
.pdp-eyebrow{display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px}
.pdp-eyebrow-center{text-align:center}
.pdp-display-heading{font-family:"Work Sans",system-ui,-apple-system,sans-serif;
  font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.05;font-weight:700;letter-spacing:-.015em;
  text-transform:uppercase;color:var(--ink);text-align:center;margin:0 0 34px}
.pdp-eyebrow:not(.pdp-eyebrow-center)+.pdp-display-heading{text-align:left}

/* ── Hero: which column sticks ───────────────────────────────────────────── */
/* The reference page sticks its BUY column and scrolls the gallery. We keep the
   gallery sticky instead, deliberately. Their buy column is short — a title, a
   price, two tier cards and a button — so it fits the viewport and pins
   cleanly. Ours is not: it carries the keyword h1, price, mesh, size and colour
   selectors, the quantity block, the button, a badge row, four reassurance
   rows, the cross-sell list and five accordions. A `position:sticky` element
   taller than the viewport pins at its TOP and its bottom is unreachable, which
   would put the accordions permanently off-screen. Gallery-sticky gives the
   same "the product stays with you" effect with no such failure, and the sticky
   buy bar (#sticky-buy) already keeps price and Add to Cart on screen the whole
   way down. Do not flip these without shortening the buy column first. */
@media(min-width:880px){
  .pdp-hero .product-gallery{position:sticky;top:82px}
}

/* The display name is now the visual title; the keyword <h1> above it stays
   small and grey so the SEO string is present without owning the page. */
.pdp-display-name{font-family:"Work Sans",system-ui,-apple-system,sans-serif;
  font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.05;font-weight:700;letter-spacing:-.015em;
  text-transform:uppercase;color:var(--ink);margin:0 0 8px}
.product-info .product-aspirational-headline{font-size:1rem;line-height:1.5;font-weight:400;
  color:var(--ink-soft);margin:0 0 4px}

/* ── Quantity block ──────────────────────────────────────────────────────── */
/* Boxed like the reference page's tier stack, but it holds the plain stepper
   and the plain price. Multi-buy pricing is a CEO gate and was not taken. */
.qty-block{margin:18px 0 4px;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--radius)}
.qty-block .variant-select-label{margin:0 0 10px}
.qty-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.qty-row .atc-price{margin:0}

/* ── Stock + dispatch line ───────────────────────────────────────────────── */
.atc-stock{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px;
  font-size:.9rem;color:var(--ink-soft)}
.atc-stock strong{color:var(--ink);text-transform:uppercase;letter-spacing:.06em;font-size:.78rem}
.atc-stock-dot{width:8px;height:8px;border-radius:50%;background:var(--star);flex:none}
.atc-stock-sep{color:var(--ink-faint)}

/* ── Trust badges under the button ───────────────────────────────────────── */
.atc-badges{list-style:none;margin:0 0 18px;padding:14px 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.atc-badges li{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--ink);font-weight:600}
.atc-badges svg{width:22px;height:22px;flex:none;color:var(--ink-soft)}

/* ── Marquee band ────────────────────────────────────────────────────────── */
/* Content is repeated 4x in the markup so a -50% translate never shows a gap.
   Honours reduced-motion by simply standing still. */
.pdp-marquee{overflow:hidden;background:var(--ink);color:#fff;padding:16px 0;margin:8px 0 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pdp-marquee-track{display:flex;align-items:center;gap:22px;width:max-content;
  animation:pdp-marquee 38s linear infinite}
.pdp-marquee-item{font-family:"Work Sans",system-ui,-apple-system,sans-serif;
  font-size:.95rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.pdp-marquee-dot{opacity:.45;font-size:.8rem}
@keyframes pdp-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.pdp-marquee-track{animation:none}}

/* ── Benefit triptych ────────────────────────────────────────────────────── */
.pdp-benefits{padding:64px 0;background:var(--cream)}
.pdp-benefit-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:700px){.pdp-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.pdp-benefit-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pdp-benefit-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px;text-align:center}
.pdp-benefit-icon{width:46px;height:46px;margin:0 auto 14px;display:grid;place-items:center;
  color:var(--ink)}
.pdp-benefit-icon svg{width:30px;height:30px}
.pdp-benefit-card h3{font-family:"Work Sans",system-ui,-apple-system,sans-serif;
  font-size:1.02rem;font-weight:700;line-height:1.25;margin:0 0 8px;color:var(--ink)}
.pdp-benefit-card p{font-size:.92rem;line-height:1.5;color:var(--ink-soft);margin:0}
.pdp-benefit-cta{text-align:center;margin:34px 0 0}
.pdp-benefit-cta .btn{min-width:240px;justify-content:center;height:54px;border-radius:var(--radius-pill)}

/* ── Editorial: alternating image and text ───────────────────────────────── */
.pdp-editorial{padding:64px 0}
.pdp-editorial-row{display:grid;grid-template-columns:1fr;gap:22px;align-items:center;
  margin:0 0 44px}
.pdp-editorial-row:last-child{margin-bottom:0}
@media(min-width:880px){
  .pdp-editorial-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px}
  /* Flip the media to the right on every other row. Order is set on the
     children rather than with direction:rtl so text stays left-to-right. */
  .pdp-editorial-row.is-flipped .pdp-editorial-media{order:2}
  .pdp-editorial-row.is-flipped .pdp-editorial-text{order:1}
}
.pdp-editorial-media{margin:0;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--cream)}
/* Show the WHOLE image. This forced a 4:3 box with object-fit:cover, which
   cropped the top and bottom off every square image, and 72 of the 84
   product images on this site are square (David, 2026-08-23: "the images
   underneath the main section are being cut"). Natural ratio, no crop. */
.pdp-editorial-media img{display:block;width:100%;height:auto}
.pdp-editorial-text p{font-size:1.06rem;line-height:1.62;color:var(--ink);margin:0}

/* ── Spec stat band ──────────────────────────────────────────────────────── */
.pdp-statband{padding:64px 0;background:var(--ink);color:#fff}
.pdp-statband .pdp-eyebrow{color:rgba(255,255,255,.62)}
.pdp-statband .pdp-display-heading{color:#fff}
.pdp-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16)}
@media(min-width:880px){.pdp-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pdp-stat{background:var(--ink);padding:30px 20px;text-align:center}
.pdp-stat-value{font-family:"Work Sans",system-ui,-apple-system,sans-serif;
  font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.2;font-weight:700;color:#fff;margin:0 0 8px}
.pdp-stat-label{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin:0}
.pdp-stat-note{text-align:center;margin:26px 0 0;font-size:.92rem}
.pdp-stat-note a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ── About body: centred measure under the display heading ───────────────── */
.pdp-about-body{max-width:760px;margin:0 auto}

/* Section rhythm for the bands that reuse existing ids. */
#product-details,#specifications,#reviews,#faq{padding:56px 0}

/* Custom-size note under the size selector (front-matter customQuote, opt-in:
   the door family sells set sizes plus made-to-order, 2026-08-23). */
.variant-select-note{margin:-6px 0 10px;font-size:.88rem;line-height:1.45;color:var(--ink-soft)}
.variant-custom-note{margin:8px 0 0;font-size:.88rem;color:var(--ink-soft)}
.variant-custom-note a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.variant-custom-note a:hover{color:var(--accent)}

/* ── Custom-quote page (restyled 2026-08-23, David: modern easy-to-use UX) ── */
.quote-lede{max-width:760px;font-size:1.06rem;line-height:1.6}
.quote-steps{list-style:none;display:grid;grid-template-columns:1fr;gap:14px;margin:26px 0 6px;padding:0}
@media(min-width:760px){.quote-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.quote-step{position:relative;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 20px 18px}
.quote-step-num{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:.85rem;font-weight:700;margin-bottom:10px}
.quote-step h3{margin:0 0 6px;font-size:1.05rem}
.quote-step p{margin:0;font-size:.92rem;color:var(--ink-soft)}
.quote-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px;padding:0}
.quote-chips li{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:8px 15px;font-size:.88rem;color:var(--ink);font-weight:600}
.quote-chips svg{width:17px;height:17px;color:var(--ink-soft);flex:none}
.quote-standard-note{margin:14px 0 0;font-size:.95rem;color:var(--ink-soft)}
/* The ported SEO article, tamed: it keeps every heading, but the h3/h4 pairs
   render as one visual unit instead of four competing sizes. */
.quote-article{max-width:760px;margin-top:46px;padding-top:34px;border-top:1px solid var(--line)}
.quote-article h2{font-size:1.4rem;margin:32px 0 10px}
.quote-article h3{font-size:1.1rem;margin:24px 0 2px}
.quote-article h4{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 8px}
.quote-article p{margin-bottom:14px;color:var(--ink-soft)}

/* Mesh-grade explainer under the mesh selector (front-matter meshGuide,
   opt-in; 2026-08-23). Compact on purpose: it sits inside the buy column. */
.mesh-guide{margin:10px 0 0;padding:12px 14px;background:var(--cream);border:1px solid var(--line);
  border-radius:var(--radius);display:grid;gap:8px}
.mesh-guide-row dt{font-size:.82rem;font-weight:700;color:var(--ink);margin:0 0 1px}
.mesh-guide-row dd{font-size:.85rem;line-height:1.45;color:var(--ink-soft);margin:0}

/* Order confirmation next-steps line. Replaced the .fifi-order block, which styled a
   mascot belonging to a different brand three lineages back. */
.order-next{max-width:460px;margin:8px auto 26px;color:var(--ink-soft);font-size:.98rem;line-height:1.6}