/* =========================================================
   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: cloudpillo.com, adopted 2026-08-08 ----------------------
   The token NAMES are unchanged so the 130+ rules in this file, nav.css and
   src/index.html keep resolving; only the VALUES move to the reference
   palette. Mapping:

     #ff7300  orange     primary CTA only          -> --accent / --gold
     #0e1a2b  navy       text, icons, dark panels  -> --ink / --gold-deep
     #f4ca66  soft yellow tinted borders, save pill -> --gold-soft
     #f2bc41  yellow     announcement / accents    -> --sun
     #b4e2f8  sky blue   feature + risk panels     -> --sky
     #e9f3fb  pale blue  image + panel backgrounds -> --cream-2 / --accent-tint
     #f4f4f1  page grey  page tint                 -> --cream
     #6b6b6b  muted text                           -> --ink-soft
     #ebebeb  hairline borders                     -> --line
     #00b67a  star fill                            -> --star

   Orange is CTA-only on the reference site: icons, labels and links stay
   navy, which is why --gold-deep maps to the navy and not to a second
   orange. ---------------------------------------------------------------- */
:root{
  /* ---- Surfaces ---- */
  --white:#ffffff;
  --cream:#f4f4f1;         /* page tint */
  --cream-2:#e9f3fb;       /* pale blue 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:#0e1a2b;
  --ink-strong:#0e1a2b;
  --ink-soft:#6b6b6b;
  --ink-faint:#9b9b9b;

  /* ---- Accent: the primary action, and nothing else.
         WCAG NOTE, recorded deliberately: white on #ff7300 is 2.73:1, which
         FAILS AA. It is kept because it is the reference site's own Add to
         Cart combination and matching it was the brief (David, 2026-08-08).
         Navy on the same orange is 6.4:1 if that decision is ever revisited.
         Do not "fix" this silently in one repo: the fleet has to agree. ---- */
  --accent:#ff7300;
  --accent-hover:#e56800;
  --accent-tint:#e9f3fb;   /* pale blue wash */
  --accent-soft:#cfe6f7;   /* pale blue border */

  /* ---- Reference-palette additions ---- */
  --sky:#b4e2f8;
  --sun:#f2bc41;
  --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 orange, and everything that used to be "accent text" or
         "accent tint" resolves to navy or a hairline. That is what keeps
         orange on the primary CTA and off everything else. ---- */
  --gold:var(--accent);
  --gold-deep:var(--ink-strong);
  --gold-soft:#f4ca66;
  --wood:var(--ink-soft);

  /* ---- Shape and depth. The reference page is soft-cornered throughout:
         8px on small chips, 12-16px on cards and panels, and full pills on
         the primary buttons. The old 6px/10px read flat and boxy next to it,
         which was a large part of why the reformat did not look like
         cloudpillo even once the layout matched. ---- */
  --radius:10px;
  --radius-lg:16px;
  --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:"Inter",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:"Inter",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:"Inter",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:"Inter",system-ui,-apple-system,sans-serif;font-size:1.18rem;letter-spacing:.01em;line-height:1.05}
.brand .name small{display:block;font-family:"Inter",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:"Inter",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:"Inter",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:"Inter",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:"Inter",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:"Inter",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:"Inter",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:"Inter",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-card shades ────────────────────────────────────────────────
   Four surfaces drawn from the cloudpillo palette itself (David, 2026-08-08),
   replacing the fleet's blue/green/amber/violet pastels. Only declared palette
   values are used: pale blue, sky blue, soft yellow and the page grey. Icons
   stay navy throughout, because orange is CTA-only on the reference site. */
.highlight-card:nth-child(1){background:var(--cream-2);border-color:var(--accent-soft)}
.highlight-card:nth-child(2){background:var(--sky);border-color:#93d3f2}
.highlight-card:nth-child(3){background:var(--gold-soft);border-color:var(--sun)}
.highlight-card:nth-child(4){background:var(--cream);border-color:var(--line-strong)}
.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:"Inter",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(--sky)}
.variant-option.is-active{border-color:var(--sky);box-shadow:0 0 0 3px rgba(180,226,248,.45)}
.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:"Inter",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:"Inter",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:"Inter",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:"Inter",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:"Inter",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:"Inter",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:"Inter",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:"Inter",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:"Inter",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:"Inter",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)}
.fifi-order{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:460px;margin:8px auto 26px;background:var(--cream);border:1px solid var(--gold-soft);border-radius:var(--radius-lg);padding:24px 26px}
.fifi-order img{width:200px;max-width:70%;height:auto;display:block;border-radius:var(--radius-lg)}
.fifi-order-name{font-family:"Inter",system-ui,-apple-system,sans-serif;font-size:1.05rem;font-weight:600;color:var(--gold-deep);margin:0 0 6px}
.fifi-order-copy p{color:var(--ink-soft);font-size:.98rem;line-height:1.6;margin:0}

/* =========================================================
   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:"Inter",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:"Inter",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}}