/* BestDiscounts. The full system is in DESIGN.md.
   The shape of a Greek price-comparison site (a header with a categories button and a wide search, chips,
   banners, department tiles, rows of product cards), finished with care: Commissioner type, light line
   icons, a white page with soft diffused shadows, a floating header, large blocks built as a plate sitting
   in a tray, and buttons that carry their arrow in a small circle of their own.
   Red = a discount our price records back. Grey outline = the shop's claim alone. Amber = our records
   contradict the shop. Yellow is the brand, never a status.
   Motion: a press answers in 140ms, hovers and small popovers in 150 to 250ms, and panels leave faster than
   they arrive. Hover effects exist only where there is a real pointer. Only transform and opacity animate
   (a lifted shadow is a pseudo-element that fades in). Slow, staggered rises are kept for content entering
   the viewport. Anything a finger drags runs on springs (site.js). Reduced motion keeps fades, drops movement. */
:root{
  color-scheme:light dark;
  --page:#FFFFFF;--tint:#F4F4F1;--tint-2:#EAEAE5;--well:#F4F4F1;--card:#FFFFFF;
  --ink:#16171A;--ink-2:#3B3D42;--muted:#686B72;--muted-2:#8E9198;
  --hair:rgba(22,23,26,.08);--hair-2:rgba(22,23,26,.16);
  --yellow:#FFC933;--yellow-2:#FFD45C;--yellow-soft:#FFF4D1;
  --red:#D92D20;--red-ink:#B42318;
  --green:#0E7A3E;--green-bg:#E5F4EA;--amber:#9A5800;--amber-bg:#FFF1DA;--grey-bg:#EEEEEA;
  --island:rgba(255,255,255,.84);--menu:rgba(255,255,255,.96);--scrim:rgba(22,23,26,.32);
  --shadow-xs:0 1px 2px rgba(22,23,26,.05);
  --shadow-s:0 1px 2px rgba(22,23,26,.04),0 6px 16px -6px rgba(22,23,26,.10);
  --shadow:0 2px 4px rgba(22,23,26,.03),0 18px 36px -12px rgba(22,23,26,.16);
  --shadow-l:0 4px 8px rgba(22,23,26,.04),0 30px 60px -18px rgba(22,23,26,.26);
  --font:"Commissioner Variable","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --t-press:140ms;--t-hover:200ms;--t-pop:220ms;--t-exit:150ms;
  --highlight:inset 0 1px 0 rgba(255,255,255,.65);
  --gutter:max(16px,env(safe-area-inset-left));
  --wrap-max:1344px;
  --r-xl:32px;
}
@media (min-width:834px){:root{--gutter:max(32px,env(safe-area-inset-left))}}
@media (prefers-color-scheme:dark){
  :root{
    --page:#111214;--tint:#1A1B1E;--tint-2:#24262A;--well:#25272B;--card:#1C1D21;
    --ink:#F2F2EE;--ink-2:#D2D3CF;--muted:#A3A6AD;--muted-2:#6F737A;
    --hair:rgba(255,255,255,.08);--hair-2:rgba(255,255,255,.16);
    --yellow-soft:#342B10;--red-ink:#FF8A80;
    --green:#5BD08A;--green-bg:#13301F;--amber:#F6B65A;--amber-bg:#36270E;--grey-bg:#26282C;
    --island:rgba(28,29,33,.84);--menu:rgba(17,18,20,.96);--scrim:rgba(0,0,0,.55);
    --shadow-xs:0 1px 2px rgba(0,0,0,.3);
    --shadow-s:0 1px 2px rgba(0,0,0,.3),0 8px 18px -8px rgba(0,0,0,.5);
    --shadow:0 2px 4px rgba(0,0,0,.3),0 18px 36px -12px rgba(0,0,0,.6);
    --shadow-l:0 4px 8px rgba(0,0,0,.35),0 30px 60px -18px rgba(0,0,0,.7);
    --highlight:inset 0 1px 0 rgba(255,255,255,.05);
  }
}
@media (prefers-reduced-transparency:reduce){:root{--island:var(--card);--menu:var(--page)}}
@media (prefers-contrast:more){:root{--hair:var(--ink);--hair-2:var(--ink);--muted:var(--ink-2)}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:104px;-webkit-tap-highlight-color:transparent}
body{margin:0;overflow-x:clip;background:var(--page);color:var(--ink);font:16px/1.55 var(--font);-webkit-font-smoothing:antialiased;font-synthesis:none;text-rendering:optimizeLegibility}
::selection{background:rgba(255,201,51,.5);color:#16171A}
h1,h2,h3,p,dl,dd,ol,ul,fieldset,figure{margin:0}
fieldset{min-width:0;padding:0;border:0}
a{color:var(--ink);text-decoration:none}
button,input,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
main:focus{outline:none}
.ph-light{flex:none;line-height:1}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* every sideways scroller is a positioning context, so hidden labels inside it scroll and clip with it
   instead of widening the page */
.chips ul,.tab-list,.subnav,.pills,.shelf-track,.mega-panes,.mega-tabs,.tbl-wrap,.sheet-body,.chip,.pill,.tab{position:relative}
.chips ul,.tab-list,.subnav,.pills{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - var(--gutter) - 20px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - var(--gutter) - 20px),transparent 100%)}
.skip{position:absolute;left:-9999px;top:8px;z-index:99;padding:10px 18px;border-radius:999px;background:var(--ink);color:var(--page);font-weight:600}
.skip:focus{left:12px}
.muted{color:var(--muted);font-size:14px}
.nw{white-space:nowrap}
.n{color:var(--muted);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}

/* ---- buttons and links: pills, the arrow nested in its own circle ---------------------------------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 22px;border:0;border-radius:999px;font-size:15px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) var(--ease-out)}
.btn:active{transform:scale(.97)}
.bi{display:grid;place-items:center;width:36px;height:36px;margin-right:-16px;border-radius:50%;font-size:17px;transition:transform var(--t-pop) var(--ease-out)}
.btn-primary{background:var(--yellow);color:#16171A}
.btn-primary .bi{background:#16171A;color:var(--yellow)}
.btn-ink{background:var(--ink);color:var(--page)}
.btn-ink .bi{background:var(--yellow);color:#16171A}
.btn-quiet{background:var(--tint);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.btn-quiet .bi{background:var(--card);color:var(--ink);box-shadow:var(--shadow-xs)}
.more{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-size:15px;font-weight:600;white-space:nowrap}
.mi{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--tint);font-size:15px;
  transition:transform var(--t-pop) var(--ease-out),background-color var(--t-hover) var(--ease-out),color var(--t-hover) var(--ease-out)}
.more:active .mi{transform:scale(.9);transition-duration:var(--t-press)}
/* hover effects only where there is a real pointer: on touch a tap would leave them stuck on */
@media (hover:hover) and (pointer:fine){
  .btn:hover .bi{transform:translate3d(2px,-1px,0) scale(1.06)}
  .btn-primary:hover{background:var(--yellow-2)}
  .btn-ink:hover{background:var(--ink-2)}
  .btn-quiet:hover{background:var(--tint-2)}
  .more:hover .mi{transform:translate3d(3px,0,0);background:var(--yellow);color:#16171A}
}
.eyebrow{display:inline-flex;align-items:center;width:fit-content;min-height:26px;padding:0 11px;border-radius:999px;background:var(--tint);color:var(--ink-2);font-size:11px;font-weight:650;letter-spacing:.1em;line-height:1;text-transform:uppercase}

/* ---- badges: red only when our records back a discount ---------------------------------------- */
.tag{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:7px;font-size:12px;font-weight:650;line-height:1.2;white-space:nowrap}
.k-hot{background:var(--ink);color:var(--page)}
.k-plain{background:var(--card);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--hair-2)}
.vchip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 11px 0 9px;border-radius:999px;font-size:12.5px;font-weight:600;line-height:1.2}
.vchip .ph-light{font-size:16px}
.vchip.v-ok{background:var(--green-bg);color:var(--green)}
.vchip.v-warn{background:var(--amber-bg);color:var(--amber)}
.vchip.v-plain{background:var(--grey-bg);color:var(--ink-2)}
.off{display:inline-flex;align-items:center;min-height:26px;padding:0 9px;border-radius:8px;background:var(--red);color:#FFFFFF;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.off-claim{background:var(--card);color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--hair-2)}
.off-warn{background:var(--amber-bg);color:var(--amber)}
.price{font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ref{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.save{color:var(--green);font-size:13.5px;font-weight:650}
.evidence{display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:14px;line-height:1.45}
.evidence .ph-light{margin-top:1px;font-size:18px;color:var(--ink)}
.stale-note{color:var(--amber)}
.ended{color:var(--muted);font-weight:600}

/* ---- the header: a floating island, the page scrolls underneath -------------------------------- */
.hdr{position:sticky;top:0;z-index:60;padding-top:10px}
.hdr-wrap{position:relative}
.hdr-island{display:flex;align-items:center;gap:10px;min-height:64px;padding:8px;border-radius:22px;background:var(--island);
  box-shadow:0 0 0 1px var(--hair),var(--shadow);-webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px)}
.logo{display:inline-flex;align-items:center;gap:10px;flex:none;padding-left:6px;color:var(--ink)}
.mk-bg{fill:#16171A}.mk-fg{fill:#FFC933}.mk-ln{stroke:#FFC933;stroke-width:3;stroke-linecap:round}
@media (prefers-color-scheme:dark){.mk-bg{fill:#FFC933}.mk-fg{fill:#16171A}.mk-ln{stroke:#16171A}}
.wordmark{font-size:18px;font-weight:750;letter-spacing:-.035em}
.wordmark span{color:var(--muted);font-weight:500}
.cats-btn{display:inline-flex;align-items:center;gap:9px;flex:none;height:48px;padding:0 18px 0 14px;border:0;border-radius:14px;background:var(--ink);color:var(--page);font-size:15px;font-weight:600;
  transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) var(--ease-out)}
.cats-btn .ph-light{font-size:20px}
.cats-btn[aria-expanded="true"]{background:var(--ink-2)}
.cats-btn:active{transform:scale(.97)}
.hsearch{position:relative;display:flex;align-items:center;flex:1;min-width:0;height:48px;padding:0 4px 0 16px;border-radius:14px;background:var(--tint);color:var(--muted);
  transition:background-color var(--t-hover) var(--ease-out),box-shadow var(--t-hover) var(--ease-out)}
.hsearch:focus-within{background:var(--card);box-shadow:0 0 0 1.5px var(--ink)}
.hsearch>.ph-light{font-size:20px}
.hsearch input{flex:1;min-width:0;height:100%;padding:0 10px;border:0;background:transparent;color:var(--ink);font-size:16px}
.hsearch input::placeholder{color:var(--muted);opacity:1}
.hsearch input:focus{outline:none}
.hsearch input::-webkit-search-cancel-button{display:none}
.hs-go{display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:11px;background:var(--yellow);color:#16171A;font-size:18px;transition:transform var(--t-press) var(--ease-out)}
.hs-go:active{transform:scale(.94)}
.nav{display:flex;align-items:center;gap:2px;flex:none}
.nav a{display:flex;align-items:center;height:44px;padding:0 14px;border-radius:12px;color:var(--ink-2);font-size:14.5px;font-weight:550;
  transition:background-color var(--t-hover) var(--ease-out),color var(--t-hover) var(--ease-out),transform var(--t-press) var(--ease-out)}
.nav a:active,.burger:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .cats-btn:hover{background:var(--ink-2)}
  .hs-go:hover{transform:translate3d(1px,0,0)}
  .nav a:hover{background:var(--tint);color:var(--ink)}
}
.nav a[aria-current]{background:var(--tint);color:var(--ink);font-weight:700}
.burger{display:none;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:14px;background:var(--tint);color:var(--ink);transition:transform var(--t-press) var(--ease-out)}
.bars{position:relative;display:block;width:18px;height:12px}
.bars::before,.bars::after{content:"";position:absolute;left:0;width:18px;height:1.5px;border-radius:2px;background:currentColor;transition:transform 300ms var(--ease-in-out)}
.bars::before{top:2px}.bars::after{top:9px}
.burger[aria-expanded="true"] .bars::before{transform:translate3d(0,3.5px,0) rotate(45deg)}
.burger[aria-expanded="true"] .bars::after{transform:translate3d(0,-3.5px,0) rotate(-45deg)}
@media (max-width:1099px){.nav{display:none}.burger{display:grid}}
/* phones: two rows; the logo row scrolls away and the search stays at the top */
@media (max-width:833px){
  html{scroll-padding-top:72px}
  .hdr{top:-64px;padding-top:8px}
  .hdr-island{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"burger logo" "search search";gap:6px 4px;min-height:0;padding:6px;border-radius:20px}
  .burger{grid-area:burger}
  .logo{grid-area:logo}
  .hsearch{grid-area:search;height:46px}
  .cats-btn{display:none}
}

/* ---- the categories panel: departments on the left, their categories on the right --------------- */
.mega{position:absolute;top:calc(100% + 8px);left:var(--gutter);right:var(--gutter);overflow:hidden;border-radius:24px;background:var(--card);box-shadow:0 0 0 1px var(--hair),var(--shadow-l);
  opacity:0;transform:translate3d(0,-6px,0) scale(.98);transform-origin:20% 0;transition:opacity var(--t-exit) var(--ease-out),transform var(--t-exit) var(--ease-out)}
.mega.open{opacity:1;transform:none;transition-duration:200ms,260ms}
.mega-in{display:grid;grid-template-columns:272px minmax(0,1fr);max-height:min(68dvh,560px)}
.mega-tabs{display:flex;flex-direction:column;gap:2px;padding:12px;overflow:auto;background:var(--tint)}
.mega-tab{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 12px;border:0;border-radius:12px;background:none;color:var(--ink-2);font-size:15px;font-weight:550;text-align:left;transition:background-color var(--t-exit) var(--ease-out),color var(--t-exit) var(--ease-out)}
.mega-tab>.ph-light:first-child{font-size:22px}
.mega-tab>.ph-light:last-child{margin-left:auto;font-size:14px;opacity:0;transform:translate3d(-4px,0,0);transition:opacity var(--t-exit) var(--ease-out),transform var(--t-exit) var(--ease-out)}
.mega-tab[aria-selected="true"]{background:var(--card);color:var(--ink);font-weight:650;box-shadow:var(--shadow-xs)}
.mega-tab[aria-selected="true"]>.ph-light:last-child{opacity:1;transform:none}
.mega-panes{padding:22px 24px;overflow:auto}
.mega-h{margin:0 0 14px 12px;font-size:20px;font-weight:750;letter-spacing:-.025em}
.mega-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 8px;padding:0;list-style:none}
.mega-list a{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 12px 0 8px;border-radius:14px;color:var(--ink);font-size:15px;transition:background-color var(--t-exit) var(--ease-out)}
.mega-list .ph-light{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--well);font-size:21px;transition:background-color var(--t-exit) var(--ease-out),color var(--t-exit) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .mega-tab:hover{color:var(--ink)}
  .mega-list a:hover{background:var(--tint)}
  .mega-list a:hover .ph-light{background:var(--yellow);color:#16171A}
}
.mega-list .n{margin-left:auto}
.mega-empty{padding:28px;color:var(--muted)}
.mega-foot{padding:14px 24px;box-shadow:inset 0 1px 0 var(--hair)}
@media (max-width:833px){.mega{display:none}}

/* ---- search suggestions, under the field ------------------------------------------------------- */
.hs-panel{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:3;max-height:min(68dvh,560px);overflow:auto;overscroll-behavior:contain;padding:8px;border-radius:20px;background:var(--card);box-shadow:0 0 0 1px var(--hair),var(--shadow-l);text-align:left;
  transform-origin:50% 0;transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
@starting-style{.hs-panel{opacity:0;transform:translate3d(0,-4px,0) scale(.98)}}
.hs-group{padding:10px 10px 6px;color:var(--muted);font-size:11px;font-weight:650;letter-spacing:.1em;text-transform:uppercase}
.hs-opt{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:6px 10px 6px 6px;border-radius:12px;color:var(--ink)}
.hs-opt[aria-selected="true"]{background:var(--tint)}
.hs-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--well);font-size:22px}
.hs-opt[aria-selected="true"] .hs-ic{background:var(--card)}
.hs-t{min-width:0}
.hs-t b{display:block;overflow:hidden;font-size:14.5px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.hs-t span{color:var(--muted);font-size:12.5px}
.hs-p{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.hs-all{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;margin-top:6px;padding:0 14px;border-radius:12px;background:var(--tint);color:var(--ink);font-size:14.5px;font-weight:600}
.hs-all[aria-selected="true"]{background:var(--tint-2)}
@media (hover:hover) and (pointer:fine){
  .hs-opt:hover{background:var(--tint)}
  .hs-opt:hover .hs-ic{background:var(--card)}
  .hs-all:hover{background:var(--tint-2)}
}
.hs-empty{padding:14px 12px;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.scrim{position:fixed;inset:0;z-index:50;background:var(--scrim);opacity:0;transition:opacity var(--t-exit) var(--ease-out)}
.scrim.open{opacity:1;transition-duration:200ms}

/* ---- the phone menu: a frosted sheet under the header, links rising in turn ------------------- */
.mmenu{position:fixed;left:0;right:0;top:0;bottom:0;z-index:58;overflow:auto;overscroll-behavior:contain;padding:16px var(--gutter) 48px;background:var(--menu);
  -webkit-backdrop-filter:saturate(170%) blur(28px);backdrop-filter:saturate(170%) blur(28px)}
.mm-links{display:grid;gap:2px;padding:0;list-style:none}
.mm-links li{overflow:hidden}
.mm-links a{display:block;padding:7px 4px;color:var(--ink);font-size:28px;font-weight:700;letter-spacing:-.035em}
.mm-links a[aria-current]{color:var(--muted)}
.mm-cats{display:grid;gap:4px;margin-top:22px;padding-top:18px;box-shadow:inset 0 1px 0 var(--hair)}
.mm-dept summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 4px;font-size:17px;font-weight:650;list-style:none;cursor:pointer}
.mm-dept summary::-webkit-details-marker{display:none}
.mm-dept summary>.ph-light:first-child{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--tint);font-size:22px}
.mm-dept summary>.ph-light:last-child{margin-left:auto;color:var(--muted);transition:transform 250ms var(--ease-out)}
.mm-dept[open] summary>.ph-light:last-child{transform:rotate(180deg)}
.mm-dept ul{display:grid;padding:0 4px 10px 58px;list-style:none}
.mm-dept a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){
  .mmenu:not([hidden]){animation:fade 200ms var(--ease-out) both}
  .mmenu:not([hidden]) .mm-links a{animation:mask-up 420ms var(--ease-out) both}
  .mmenu:not([hidden]) .mm-links li:nth-child(2) a{animation-delay:40ms}
  .mmenu:not([hidden]) .mm-links li:nth-child(3) a{animation-delay:80ms}
  .mmenu:not([hidden]) .mm-links li:nth-child(4) a{animation-delay:120ms}
  .mmenu:not([hidden]) .mm-links li:nth-child(5) a{animation-delay:160ms}
  .mmenu:not([hidden]) .mm-links li:nth-child(n+6) a{animation-delay:200ms}
  .mmenu:not([hidden]) .mm-cats{animation:rise 420ms var(--ease-out) 220ms both}
}
@keyframes fade{from{opacity:0}}
@keyframes mask-up{from{transform:translate3d(0,105%,0)}}
@keyframes rise{from{opacity:0;transform:translate3d(0,16px,0)}}

/* ---- page structure ---------------------------------------------------------------------------- */
.sec{padding-top:clamp(64px,8vw,120px)}
.sec-tight{padding-top:clamp(40px,5vw,64px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 28px;margin-bottom:24px}
.sec-title{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.sec-head h2{max-width:24em;font-size:clamp(24px,2.6vw,34px);font-weight:750;line-height:1.1;letter-spacing:-.035em;text-wrap:balance}
.sec-head h2 .n{font-size:.6em;letter-spacing:0}
.sec-sub{margin-top:-4px;color:var(--muted);font-size:15px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;color:var(--muted);font-size:13px}
.crumbs .sep{display:inline-flex;color:var(--muted-2);font-size:11px}
.crumbs a{color:var(--muted);transition:color var(--t-exit) var(--ease-out)}
.crumbs [aria-current]{max-width:40ch;overflow:hidden;color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
.wrap>.crumbs:first-child{padding-top:clamp(18px,2.6vw,30px)}
.page-head{padding-top:clamp(18px,2.6vw,30px)}
.page-head .crumbs{margin-bottom:clamp(22px,3.4vw,40px)}
.page-head .eyebrow{margin-bottom:16px}
.page-head h1{max-width:18em;font-size:clamp(34px,4.6vw,60px);font-weight:750;line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.lead{max-width:40em;margin-top:16px;color:var(--muted);font-size:clamp(16px,1.5vw,19px);line-height:1.5;text-wrap:pretty}
.page-head+.wrap{padding-top:clamp(30px,4vw,48px)}
.subnav{display:flex;gap:8px;margin:26px calc(-1 * var(--gutter)) 0;padding:2px var(--gutter);overflow-x:auto;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav a{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;padding:0 18px 0 14px;border-radius:999px;background:var(--tint);color:var(--ink-2);font-size:14.5px;font-weight:550;
  transition:background-color var(--t-hover) var(--ease-out),color var(--t-hover) var(--ease-out),transform var(--t-press) var(--ease-out)}
.subnav a .ph-light{font-size:18px}
.subnav a:active{transform:scale(.97)}
.subnav a[aria-current]{background:var(--ink);color:var(--page)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:28px}

/* ---- homepage: chips, two banners ------------------------------------------------------------- */
.top{padding-top:16px}
.chips{margin:0 calc(-1 * var(--gutter)) 16px}
.chips ul{display:flex;gap:8px;padding:2px var(--gutter);overflow-x:auto;scrollbar-width:none;list-style:none}
.chips ul::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:40px;padding:0 12px 0 12px;border-radius:999px;background:var(--tint);color:var(--ink);font-size:14px;font-weight:550;white-space:nowrap;
  transition:background-color var(--t-hover) var(--ease-out),transform var(--t-press) var(--ease-out)}
.chip .ph-light{font-size:18px}
.chip .n{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-right:-4px;padding:0 8px;border-radius:999px;background:var(--card);color:var(--ink-2);font-size:12px;font-weight:650}
.chip:active{transform:scale(.97)}
.banners{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:1024px){.banners{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.banner{min-width:0;border-radius:var(--r-xl)}
.banner-brand{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:clamp(28px,4vw,52px);background:var(--yellow);color:#16171A}
.banner-brand .eyebrow{background:rgba(22,23,26,.09);color:#16171A}
.banner-brand h1{max-width:9em;font-size:clamp(40px,5.2vw,70px);font-weight:800;line-height:.98;letter-spacing:-.05em;text-wrap:balance}
.banner-lead{max-width:30em;color:rgba(22,23,26,.8);font-size:clamp(16px,1.4vw,18px);line-height:1.5;text-wrap:pretty}
.banner-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:6px}
.banner-brand .more{color:#16171A}
.banner-brand .mi{background:rgba(22,23,26,.09);color:#16171A}
.banner-brand .btn-ink{background:#16171A;color:#FFFFFF}
@media (hover:hover) and (pointer:fine){
  .banner-brand .more:hover .mi{background:#16171A;color:#FFC933}
  .banner-brand .btn-ink:hover{background:#2A2C31}
}
/* the top of the homepage settles in once as the page opens (CSS only, nothing waits on the script) */
@media (prefers-reduced-motion:no-preference){
  .top .chips,.top .banner{animation:rise 600ms var(--ease-drawer) both}
  .top .banner-brand{animation-delay:60ms}
  .top .banner-deal{animation-delay:120ms}
}
.banner-try{color:rgba(22,23,26,.75);font-size:14px}
.banner-try a{color:#16171A;font-weight:650;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.banner-stats{margin-top:auto;padding-top:6px;color:rgba(22,23,26,.72);font-size:13px;font-weight:550}
.banner-art{position:absolute;top:-120px;right:-90px;z-index:-1;width:260px;height:auto;color:rgba(22,23,26,.07)}
@media (max-width:640px){.banner-art{top:-110px;right:-96px;width:220px}}
.banner-art circle{fill:currentColor}
.banner-art path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.banner-deal .bezel-in{display:flex;flex-direction:column;padding:clamp(18px,2.4vw,28px)}
.banner-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:20px}

/* the plate in its tray: large blocks sit in a tinted shell with concentric corners */
.bezel{padding:6px;border-radius:var(--r-xl);background:var(--tint);box-shadow:inset 0 0 0 1px var(--hair)}
.bezel-in{height:100%;border-radius:calc(var(--r-xl) - 6px);background:var(--card);box-shadow:0 0 0 1px var(--hair),var(--shadow-s),var(--highlight)}

/* the deal of the day */
.spot{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
@media (min-width:640px){.spot{grid-template-columns:minmax(150px,34%) minmax(0,1fr);align-items:start}}
@media (max-width:639px){.spot>.media{display:none}}
.spot-info{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.spot-kicker{display:flex;flex-wrap:wrap;gap:6px}
.spot-title{font-size:clamp(20px,2vw,26px);font-weight:700;line-height:1.18;letter-spacing:-.03em;text-wrap:balance}
.spot-title a{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.spot-title a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}}
.spot-meta,.prod-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px;margin-left:-4px;padding-left:4px;overflow-x:clip;color:var(--muted);font-size:13.5px}
.spot-meta>*::before,.prod-meta>*::before{content:"·";display:inline-block;width:16px;margin-left:-16px;text-align:center}
.spot-price{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.spot .price{font-size:clamp(30px,3.4vw,42px);letter-spacing:-.04em}
.mini-timeline{display:grid;gap:10px;width:100%;margin-top:2px;padding:14px 16px;border-radius:18px;background:var(--tint);list-style:none}
.mini-timeline li{position:relative;padding-left:20px;color:var(--muted);font-size:13px;line-height:1.4}
.mini-timeline li::before{content:"";position:absolute;left:1px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.mini-timeline li:not(:last-child)::after{content:"";position:absolute;left:4.5px;top:15px;bottom:-12px;width:1px;background:var(--hair-2)}
.mt-when{display:block;color:var(--ink);font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}
.spot-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:4px}
.starting{display:flex;flex-direction:column;align-items:flex-start;gap:14px;height:100%}
.starting h2{max-width:16em;font-size:clamp(26px,2.8vw,38px);font-weight:750;line-height:1.06;letter-spacing:-.04em;text-wrap:balance}
.starting-lead{max-width:36em;color:var(--muted);font-size:16px;line-height:1.55;text-wrap:pretty}
.steps{display:grid;gap:10px;width:100%;margin-top:4px;padding:0;list-style:none}
@media (min-width:640px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:639px){.steps li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:2px 14px;align-items:center;padding:14px}.steps .step-ic{grid-row:span 2;margin:0}}
.steps li{display:flex;flex-direction:column;gap:3px;padding:16px;border-radius:20px;background:var(--tint)}
.step-ic{display:grid;place-items:center;width:42px;height:42px;margin-bottom:8px;border-radius:13px;background:var(--card);font-size:22px;box-shadow:var(--shadow-xs)}
.steps b{font-size:15px;font-weight:650}
.steps span:last-child{color:var(--muted);font-size:13.5px;line-height:1.4}
.starting-more{margin-top:auto;padding-top:8px}

/* the deals of the day: a tinted panel, its introduction beside a row of cards */
.panel{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:clamp(20px,3vw,36px);border-radius:var(--r-xl);background:var(--tint)}
@media (min-width:1024px){.panel{grid-template-columns:250px minmax(0,1fr);gap:32px;align-items:center}}
.panel-intro{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.panel-intro .eyebrow{background:var(--card)}
.panel-intro h2{font-size:clamp(26px,2.6vw,34px);font-weight:750;line-height:1.04;letter-spacing:-.04em}
.panel-intro p:not(.eyebrow){color:var(--muted);font-size:15px;line-height:1.5}

/* departments: tabs over a grid of tiles */
.tabs{display:flex;flex-direction:column;gap:20px}
.tab-list{display:flex;gap:8px;margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter);overflow-x:auto;scrollbar-width:none}
.tab-list::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;padding:0 18px 0 14px;border:0;border-radius:999px;background:var(--tint);color:var(--ink-2);font-size:14.5px;font-weight:550;
  transition:background-color var(--t-hover) var(--ease-out),color var(--t-hover) var(--ease-out),transform var(--t-press) var(--ease-out)}
.tab .ph-light{font-size:19px}
.tab[aria-selected="true"]{background:var(--ink);color:var(--page)}
.tab:active{transform:scale(.97)}
.tab-panel:focus-visible{outline-offset:6px;border-radius:24px}
.tab-panel{transition:opacity 180ms var(--ease-out)}
@starting-style{.tab-panel{opacity:0}}
.tab-panel[data-instant]{transition:none}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;min-height:172px;padding:22px 12px 16px;border-radius:24px;background:var(--card);color:var(--ink);text-align:center;
  box-shadow:0 0 0 1px var(--hair),var(--shadow-xs);transition:transform var(--t-pop) var(--ease-out)}
.tile:active{transform:scale(.97);transition-duration:var(--t-press)}
.tile-ic{display:grid;place-items:center;width:64px;height:64px;margin-bottom:8px;border-radius:20px;background:var(--well);font-size:34px;
  transition:background-color var(--t-hover) var(--ease-out),color var(--t-hover) var(--ease-out),transform var(--t-pop) var(--ease-out)}
.tile::before,.card::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity var(--t-pop) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .tile:hover{transform:translate3d(0,-3px,0)}
  .tile:hover::before{opacity:1}
  .tile:hover .tile-ic{background:var(--yellow);color:#16171A;transform:scale(1.04)}
}
.tile-t{font-size:14.5px;font-weight:650;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.tile-n{color:var(--muted);font-size:12.5px}
.tile-d{margin-top:4px;padding:2px 9px;border-radius:999px;background:var(--yellow-soft);color:var(--ink);font-size:11.5px;font-weight:650}
@media (max-width:560px){
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .tile{min-height:0;padding:16px 6px 12px;border-radius:18px}
  .tile-ic{width:48px;height:48px;margin-bottom:4px;border-radius:15px;font-size:26px}
  .tile-t{font-size:12.5px}.tile-n{font-size:11.5px}.tile-d{display:none}
}

/* how we help: an introduction beside four short points */
.helps{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:960px){.helps{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}.helps-intro{position:sticky;top:112px}}
.helps-intro{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.helps-intro h2{font-size:clamp(28px,3.2vw,44px);font-weight:750;line-height:1.04;letter-spacing:-.045em;text-wrap:balance}
.helps-intro p:not(.eyebrow){max-width:30em;color:var(--muted);font-size:16px;line-height:1.55}
.helps-intro .sec-head{margin:0}
.helps-list{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:0;list-style:none}
@media (min-width:640px){.helps-list:not(.stack){grid-template-columns:repeat(2,minmax(0,1fr))}}
.helps-list li{display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2.4vw,30px);border-radius:26px;background:var(--tint)}
.hi{display:grid;place-items:center;width:52px;height:52px;margin-bottom:10px;border-radius:16px;background:var(--card);font-size:28px;box-shadow:var(--shadow-xs)}
.helps-list h3{font-size:18px;font-weight:700;letter-spacing:-.025em}
.helps-list p{color:var(--muted);font-size:14.5px;line-height:1.55}
.follow{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;padding:clamp(22px,3vw,36px);border-radius:var(--r-xl);background:var(--yellow-soft)}
.follow-ic{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:20px;background:var(--yellow);color:#16171A;font-size:34px}
.follow-t{flex:1;min-width:240px}
.follow h2{font-size:clamp(22px,2.4vw,30px);font-weight:750;letter-spacing:-.035em}
.follow p{margin-top:4px;color:var(--ink-2);font-size:15px}
.history-note{display:flex;align-items:flex-start;gap:10px;max-width:84ch;margin-top:22px;color:var(--muted);font-size:13px;line-height:1.55}
.history-note .ph-light{margin-top:1px;font-size:17px}

/* ---- product cards and rows of them ---------------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{position:relative;display:flex;flex-direction:column;min-width:0;padding:8px 8px 16px;border-radius:22px;background:var(--card);box-shadow:0 0 0 1px var(--hair),var(--shadow-xs);
  transition:transform var(--t-pop) var(--ease-out)}
.card:active{transform:scale(.985);transition-duration:var(--t-press)}
.card>:not(.media){margin-inline:8px}
/* the well's corners are the card's minus its padding, so the two curves stay concentric */
.media{position:relative;display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;border-radius:14px;background:var(--well);color:var(--ink);font-size:54px}
.media>.ph-light{transition:transform 300ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translate3d(0,-3px,0)}
  .card:hover::before{opacity:1}
  .card:hover .media>.ph-light{transform:scale(1.07)}
}
.badges{position:absolute;top:8px;left:8px;right:8px;z-index:1;display:flex;flex-wrap:wrap;gap:4px}
.media-lg{border-radius:22px;font-size:clamp(72px,8vw,104px)}
.card-cat{margin-top:12px;overflow:hidden;color:var(--muted);font-size:12px;font-weight:550;text-overflow:ellipsis;white-space:nowrap}
.card-title{display:-webkit-box;min-height:2.6em;margin-top:4px;overflow:hidden;font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.01em;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.card-title a{color:var(--ink)}
.card-price{margin-top:10px}
.card-price .price{font-size:21px}
.card-ref{margin-top:2px}
.card-meta{margin-top:6px;overflow:hidden;color:var(--muted);font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.card-note{margin-top:10px}
.card-when{display:flex;align-items:center;gap:6px;margin-top:10px;color:var(--muted);font-size:12px}
.card-when.ended{color:var(--ink-2)}
.card.is-ended{opacity:.6}
.grid-cat .card-cat,.same-cat .card-cat{display:none}
.stretch::after{content:"";position:absolute;inset:0;z-index:2;border-radius:22px}
.stretch:focus-visible{outline:none}
.stretch:focus-visible::after{outline:2px solid var(--ink);outline-offset:3px}
.card.sk{pointer-events:none;box-shadow:0 0 0 1px var(--hair)}
.sk-line{display:block;height:12px;margin-top:12px;border-radius:6px;background:var(--tint)}
.sk .w40{width:40%}.sk .w60{width:60%}.sk .w80{width:80%}
.shelf{position:relative}
.shelf-track{display:grid;grid-auto-flow:column;grid-auto-columns:252px;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:-12px calc(-1 * var(--bleed,0px)) -32px;padding:12px var(--bleed,0px) 32px;scroll-padding-inline:var(--bleed,0px)}
.shelf-track::-webkit-scrollbar{display:none}
.shelf-track>*{scroll-snap-align:start}
.paddle{position:absolute;top:calc(50% - 26px);z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--card);color:var(--ink);font-size:18px;
  box-shadow:0 0 0 1px var(--hair),var(--shadow);transition:opacity var(--t-hover) var(--ease-out),transform var(--t-press) var(--ease-out)}
.paddle.prev{left:-16px}.paddle.next{right:-16px}
@media (hover:hover) and (pointer:fine){.paddle:hover{transform:scale(1.06)}}
.paddle:active{transform:scale(.94)}
.paddle:disabled{opacity:0;pointer-events:none}
.shelf.no-scroll .paddle{display:none}
@media (max-width:833px){
  .paddle{display:none}
  .sec .shelf,.wrap>.sec .shelf{--bleed:var(--gutter)}
  .panel .shelf{--bleed:20px}
  .shelf-track{grid-auto-columns:minmax(196px,62vw);gap:12px}
}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card{padding:6px 6px 12px;border-radius:18px}
  .card>:not(.media){margin-inline:6px}
  .media{border-radius:12px;font-size:42px}
  .card-title{font-size:14px}
  .card-price .price{font-size:18px}
  .stretch::after{border-radius:18px}
}

/* ---- category pages --------------------------------------------------------------------------- */
.cat-head{display:flex;align-items:center;gap:18px;margin-top:clamp(20px,3vw,32px)}
.cat-ic{display:grid;place-items:center;flex:none;width:72px;height:72px;border-radius:22px;background:var(--yellow);color:#16171A;font-size:38px}
.cat-head h1{font-size:clamp(30px,4vw,50px);font-weight:750;line-height:1.04;letter-spacing:-.045em}
.cat-sub{margin-top:6px;color:var(--muted);font-size:15px}
@media (max-width:560px){.cat-ic{width:56px;height:56px;border-radius:18px;font-size:30px}}
.pills{display:flex;gap:8px;margin:22px calc(-1 * var(--gutter)) 0;padding:2px var(--gutter);overflow-x:auto;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:40px;padding:0 16px 0 12px;border-radius:999px;background:var(--tint);color:var(--ink-2);font-size:14px;font-weight:550;
  transition:background-color var(--t-hover) var(--ease-out),color var(--t-hover) var(--ease-out),transform var(--t-press) var(--ease-out)}
.pill .ph-light{font-size:18px}
.pill:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .chip:hover,.tab:not([aria-selected="true"]):hover,.subnav a:not([aria-current]):hover,.pill:hover{background:var(--tint-2);color:var(--ink)}
}
.cat-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:28px}
.cat-main{min-width:0}
@media (min-width:961px){.cat-layout{grid-template-columns:268px minmax(0,1fr);gap:36px;align-items:start}.cat-layout.no-side{grid-template-columns:minmax(0,1fr)}}
.cat-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:20px}
.tool-btn{display:none;align-items:center;gap:8px;flex:none;min-height:46px;padding:0 18px 0 14px;border:0;border-radius:999px;background:var(--ink);color:var(--page);font-size:14.5px;font-weight:600;transition:transform var(--t-press) var(--ease-out)}
.tool-btn .ph-light{font-size:19px}
.tool-btn:active{transform:scale(.97)}
.grid-cat{grid-template-columns:repeat(auto-fill,minmax(212px,1fr))}
@media (max-width:560px){.grid-cat{grid-template-columns:repeat(2,minmax(0,1fr))}}
.more-row{display:flex;justify-content:center;margin-top:32px}
.filter-empty{margin-top:12px}
.dept{padding-top:clamp(36px,5vw,56px)}
.dept:first-child{padding-top:0}
.dept h2{display:flex;align-items:center;gap:12px;margin-bottom:20px;font-size:clamp(22px,2.4vw,30px);font-weight:750;letter-spacing:-.035em}
.dept h2 .ph-light{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--tint);font-size:24px}

/* ---- catalogs (categories, search results): sort tabs, active filters, the filter panel ------------- */
.cat-alert{display:inline-flex;align-items:center;gap:8px;flex:none;margin-left:auto;min-height:40px;padding:0 16px 0 12px;border-radius:999px;background:var(--tint);color:var(--ink);font-size:14px;font-weight:600;
  transition:background-color var(--t-hover) var(--ease-out),transform var(--t-press) var(--ease-out)}
.cat-alert .ph-light{font-size:18px}
.cat-alert:active{transform:scale(.97)}
.find{display:flex;align-items:center;gap:8px;flex:1 1 260px;max-width:440px;height:46px;padding:0 16px;border-radius:999px;background:var(--tint);color:var(--muted);
  transition:background-color var(--t-hover) var(--ease-out),box-shadow var(--t-hover) var(--ease-out)}
.find:focus-within{background:var(--card);box-shadow:0 0 0 1.5px var(--ink)}
.find .ph-light{font-size:19px}
.find input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--ink);font-size:15px}
.find input::placeholder{color:var(--muted);opacity:1}
.find input:focus{outline:none}
.find input::-webkit-search-cancel-button{display:none}
.quick{display:none;align-items:center;gap:8px;flex:none;min-height:46px;padding:0 14px;border:0;border-radius:999px;background:var(--tint);color:var(--ink);font-size:14.5px;font-weight:600;
  transition:background-color var(--t-hover) var(--ease-out),color var(--t-hover) var(--ease-out),transform var(--t-press) var(--ease-out)}
.quick .ph-light{font-size:18px}
.quick .n{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--card);color:var(--ink-2);font-size:12px;font-weight:650}
.quick[aria-pressed="true"]{background:var(--ink);color:var(--page)}
.quick:active{transform:scale(.97)}
@media (max-width:960px){.quick{display:inline-flex}}
.tool-n{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-right:-6px;padding:0 6px;border-radius:999px;background:var(--yellow);color:#16171A;font-size:12px;font-weight:700}
.sorts{position:relative;display:flex;gap:4px 24px;margin:0 0 18px;overflow-x:auto;scrollbar-width:none;box-shadow:inset 0 -1px 0 var(--hair)}
.sorts::-webkit-scrollbar{display:none}
@media (min-width:834px){.sorts{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}}
.sort-btn{flex:none;min-height:46px;padding:0;border:0;background:none;color:var(--muted);font-size:14.5px;font-weight:600;white-space:nowrap;transition:color var(--t-hover) var(--ease-out)}
.sort-btn[aria-pressed="true"]{color:var(--ink)}
.sort-btn:active{opacity:.7}
.sort-line{position:absolute;left:0;bottom:0;width:1px;height:2px;background:var(--ink);transform-origin:0 0;pointer-events:none}
.sorts:not(.ready) .sort-btn[aria-pressed="true"]{box-shadow:inset 0 -2px 0 var(--ink)}
.sorts:not(.ready) .sort-line{display:none}
@media (hover:hover) and (pointer:fine){.sort-btn:hover{color:var(--ink)}.cat-alert:hover{background:var(--tint-2)}}
@media (max-width:833px){
  .sorts{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - var(--gutter) - 20px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - var(--gutter) - 20px),transparent 100%)}
  .cat-alert span{display:none}
  .cat-alert{padding:0 11px}
}
.active{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px}
.achip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px 0 14px;border:0;border-radius:999px;background:var(--ink);color:var(--page);font-size:13.5px;font-weight:600;
  transition:transform var(--t-press) var(--ease-out)}
.achip .ph-light{font-size:14px}
.achip:active{transform:scale(.96)}
.achip-all{min-height:36px;padding:0 6px;border:0;background:none;color:var(--ink);font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.facets{display:flex;flex-direction:column;gap:24px}
.facet{min-width:0}
.facet-h{margin:0 0 10px 4px;padding:0;color:var(--ink);font-size:13.5px;font-weight:700}
.check.is-zero{opacity:.42;cursor:default}
.fbox.is-folded .is-extra{display:none}
.fbox.is-searching .is-extra{display:flex}
.facet-more{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:4px 0 0 8px;padding:0;border:0;background:none;color:var(--ink);font-size:14px;font-weight:600}
.facet-more .ph-light{font-size:15px}
.facet-find{display:flex;align-items:center;gap:8px;height:42px;margin-bottom:8px;padding:0 14px;border-radius:999px;background:var(--tint);color:var(--muted)}
.facet-find:focus-within{background:var(--card);box-shadow:0 0 0 1.5px var(--ink)}
.facet-find input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-size:14px}
.facet-find input:focus{outline:none}
.facet-find input::-webkit-search-cancel-button{display:none}
/* price: a histogram of what the other filters leave, two handles on a log scale, typed amounts */
.hist{display:flex;align-items:flex-end;gap:2px;height:46px;padding:0 11px}
.hist span{flex:1;height:calc(var(--h,0) * 100%);border-radius:2px 2px 0 0;background:var(--hair-2);transition:background-color var(--t-hover) var(--ease-out)}
.hist.is-set span.on{background:var(--ink)}
.range{position:relative;height:28px;margin:0 0 8px}
.range-track,.range-fill{position:absolute;left:11px;right:11px;top:12px;height:4px;border-radius:2px;background:var(--tint-2)}
.range-fill{background:var(--ink);transform-origin:0 0}
.range input{position:absolute;inset:0;width:100%;height:28px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.range input::-webkit-slider-runnable-track{height:28px;background:none;border:0}
.range input::-moz-range-track{height:28px;background:none;border:0}
.range input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:22px;height:22px;margin-top:3px;border:0;border-radius:50%;background:var(--card);
  box-shadow:0 0 0 1.5px var(--ink),0 2px 6px rgba(22,23,26,.18);cursor:grab;transition:transform var(--t-press) var(--ease-out)}
.range input::-moz-range-thumb{pointer-events:auto;width:22px;height:22px;border:0;border-radius:50%;background:var(--card);box-shadow:0 0 0 1.5px var(--ink),0 2px 6px rgba(22,23,26,.18);cursor:grab}
.range input:active::-webkit-slider-thumb{transform:scale(1.12);cursor:grabbing}
.range input:active::-moz-range-thumb{cursor:grabbing}
.range input:focus-visible{outline:none}
.range input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--ink),0 0 0 6px rgba(255,201,51,.55)}
.range input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--ink),0 0 0 6px rgba(255,201,51,.55)}
.pins{display:flex;align-items:center;gap:8px}
.pin{display:flex;flex:1;align-items:center;gap:4px;min-width:0;height:42px;padding:0 12px;border-radius:12px;background:var(--tint);color:var(--muted);font-size:14px;
  transition:background-color var(--t-hover) var(--ease-out),box-shadow var(--t-hover) var(--ease-out)}
.pin:focus-within{background:var(--card);box-shadow:0 0 0 1.5px var(--ink)}
.pin input{flex:1;width:100%;min-width:0;border:0;background:transparent;color:var(--ink);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.pin input::placeholder{color:var(--muted);font-weight:500;opacity:1}
.pin input:focus{outline:none}
.pin-to{flex:none;color:var(--muted);font-size:13px}
.results{margin-top:6px}

/* segmented control: a highlight slides to the chosen segment (springs in site.js) */
.seg{position:relative;display:inline-flex;max-width:100%;padding:4px;overflow-x:auto;border-radius:999px;background:var(--tint);scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg-glide{position:absolute;top:4px;bottom:4px;left:4px;filter:drop-shadow(0 0 .5px rgba(22,23,26,.3)) drop-shadow(0 1px 2px rgba(22,23,26,.08))}
.seg-thumb{display:block;height:100%;border-radius:999px;background:var(--card);clip-path:inset(0 100% 0 0 round 999px)}
@media (prefers-color-scheme:dark){.seg-glide{filter:none}.seg-thumb{background:var(--tint-2)}}
.seg-btn{position:relative;z-index:1;flex:none;min-height:38px;padding:0 16px;border:0;border-radius:999px;background:none;color:var(--muted);font-size:14px;font-weight:600;white-space:nowrap;transition:color var(--t-hover) var(--ease-out)}
.seg-btn[aria-pressed="true"]{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.seg-btn:hover{color:var(--ink)}}
.seg-btn:active{opacity:.7}
.seg-btn .n{margin-left:4px}
.seg-btn .sm{display:none}
@media (max-width:560px){.seg-btn{padding:0 11px;font-size:13.5px}.seg-btn .lg{display:none}.seg-btn .sm{display:inline}}
.seg:not(.ready) .seg-btn[aria-pressed="true"]{background:var(--card);box-shadow:0 0 0 1px var(--hair)}
.seg:not(.ready) .seg-glide{display:none}

/* filters: checkboxes in soft groups; at 960px and below they move into a sheet you can drag */
.side{min-width:0}
.sheet-head,.sheet-foot{display:none}
.sheet-body{display:flex;flex-direction:column;gap:22px}
.fgroup legend{margin:0 0 10px 4px;color:var(--ink);font-size:13.5px;font-weight:700}
.fbox{display:flex;flex-direction:column;padding:6px;border-radius:22px;background:var(--tint)}
.check{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px 0 10px;border-radius:16px;cursor:pointer;transition:background-color var(--t-exit) var(--ease-out)}
.check input{position:absolute;opacity:0;pointer-events:none}
.cb{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:7px;background:var(--card);color:transparent;font-size:15px;box-shadow:inset 0 0 0 1.5px var(--hair-2);
  transition:background-color var(--t-exit) var(--ease-out),box-shadow var(--t-exit) var(--ease-out),color var(--t-exit) var(--ease-out),transform var(--t-press) var(--ease-out)}
.check:active .cb{transform:scale(.92)}
.check input:checked+.cb{background:var(--ink);color:var(--page);box-shadow:none}
.check input:focus-visible+.cb{outline:2px solid var(--ink);outline-offset:2px}
.check-t{flex:1;min-width:0;overflow:hidden;font-size:14.5px;text-overflow:ellipsis;white-space:nowrap}
.more-checks summary{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:16px;color:var(--ink);font-size:14px;font-weight:600;list-style:none;cursor:pointer}
.more-checks summary::-webkit-details-marker{display:none}
@media (hover:hover) and (pointer:fine){.check:hover,.more-checks summary:hover{background:var(--card)}}
@media (min-width:961px){.side{position:sticky;top:104px;max-height:calc(100dvh - 120px);overflow:auto;scrollbar-width:thin}}
@media (max-width:960px){
  .tool-btn{display:inline-flex}
  .side{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;flex-direction:column;max-height:88dvh;border-radius:28px 28px 0 0;background:var(--card);
    box-shadow:0 -20px 50px rgba(22,23,26,.2);transform:translate3d(0,100%,0);visibility:hidden}
  .side.is-open,.side.is-moving{visibility:visible}
  .side.is-moving{will-change:transform}
  .sheet-head{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;padding:8px 12px 4px;touch-action:none;cursor:grab;user-select:none}
  .sheet-head:active{cursor:grabbing}
  .grabber{grid-column:1/-1;justify-self:center;width:40px;height:5px;margin-bottom:8px;border-radius:3px;background:var(--hair-2)}
  .sheet-title{grid-column:2;font-size:17px;font-weight:700;text-align:center}
  .sheet-x{grid-column:3;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--tint);color:var(--ink);font-size:18px;transition:transform var(--t-press) var(--ease-out)}
  .sheet-x:active{transform:scale(.92)}
  .sheet-body{overflow:auto;overscroll-behavior:contain;padding:10px 16px 18px}
  .sheet-foot{display:block;padding:12px 16px calc(12px + env(safe-area-inset-bottom));box-shadow:inset 0 1px 0 var(--hair)}
  .sheet-foot .btn{width:100%}
  .sheet-scrim{position:fixed;inset:0;z-index:79;background:var(--scrim);opacity:0}
}
@media (min-width:961px){.sheet-scrim{display:none!important}}

/* ---- deal pages -------------------------------------------------------------------------------- */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px}
.selects{display:flex;flex-wrap:wrap;gap:8px}
.select select{height:46px;padding:0 40px 0 18px;border:0;border-radius:999px;background-color:var(--tint);color:var(--ink);font-size:14px;font-weight:550;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
@media (hover:hover) and (pointer:fine){.select select:hover{background-color:var(--tint-2)}}
.list-h{display:flex;align-items:center;gap:10px;margin:48px 0 18px;font-size:clamp(20px,2vw,26px);font-weight:750;letter-spacing:-.035em}
.toolbar+.list-h{margin-top:32px}
.list-h .n{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 10px;border-radius:999px;background:var(--tint);color:var(--ink-2);font-size:13px;font-weight:650;letter-spacing:0}
.callout{display:flex;align-items:flex-start;gap:12px;margin:0 0 28px;padding:16px 20px;border-radius:20px;background:var(--tint);color:var(--ink-2);font-size:14.5px;line-height:1.55}
.callout .ph-light{margin-top:1px;font-size:20px;color:var(--ink)}
.empty .bezel-in{display:flex;flex-direction:column;align-items:center;gap:10px;padding:clamp(36px,6vw,64px) 24px;text-align:center}
.empty-ic{display:grid;place-items:center;width:64px;height:64px;margin-bottom:6px;border-radius:20px;background:var(--yellow);color:#16171A;font-size:32px}
.empty-title{max-width:22em;font-size:clamp(20px,2.2vw,26px);font-weight:750;letter-spacing:-.035em;text-wrap:balance}
.empty p:not(.empty-title){max-width:34em;color:var(--muted);font-size:15.5px;line-height:1.55}
.empty-act{margin-top:12px}
.defs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:12px}
.defs.one-col{grid-template-columns:minmax(0,1fr)}
.defs>div{padding:20px 22px;border-radius:22px;background:var(--tint)}
.defs dt{margin-bottom:10px;font-weight:700}
.defs dd{color:var(--muted);font-size:14.5px;line-height:1.55}
@media (min-width:900px){.split-sec{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}}
.split-sec .lead{margin-top:0}

/* ---- product page ------------------------------------------------------------------------------ */
.pp{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:clamp(18px,2.6vw,30px)}
@media (min-width:961px){.pp{grid-template-columns:minmax(0,1fr) 384px;gap:52px;align-items:start}.pp-buy{position:sticky;top:104px}}
.pp-main,.pp-buy{min-width:0}
.pp-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;color:var(--muted);font-size:14px}
.pp-kicker a{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 10px;border-radius:999px;background:var(--tint);color:var(--ink);font-weight:600;transition:background-color var(--t-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.pp-kicker a:hover{background:var(--tint-2)}}
.pp-kicker .ph-light{font-size:19px}
.prod-title{margin:16px 0 12px;font-size:clamp(28px,3.4vw,46px);font-weight:750;line-height:1.06;letter-spacing:-.04em;text-wrap:balance}
.stock{display:inline-flex;align-items:center;gap:6px}
.stock::before{content:""!important;width:8px!important;height:8px;margin:0!important;border-radius:50%;background:currentColor}
.stock.ok{color:var(--green)}.stock.no{color:var(--red-ink)}
.verdict{margin-top:26px;padding:20px 22px;border-radius:24px;background:var(--tint)}
.verdict.v-ok{background:var(--green-bg)}.verdict.v-warn{background:var(--amber-bg)}
.verdict-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.verdict-head .ph-light{font-size:24px}
.v-ok .verdict-head{color:var(--green)}.v-warn .verdict-head{color:var(--amber)}.v-plain .verdict-head{color:var(--ink)}
.verdict-head strong{font-size:19px;font-weight:700;letter-spacing:-.025em}
.verdict p:not(.verdict-head){max-width:62ch;color:var(--ink-2);font-size:15px;line-height:1.55}
.pp-main .evidence{margin-top:16px}
.pp-buy .bezel-in{display:flex;flex-direction:column;gap:8px;padding:10px 10px 22px}
.pp-buy .bezel-in>:not(.media){margin-inline:12px}
.pp-buy .media-lg{aspect-ratio:16/10;margin-bottom:12px;border-radius:16px;font-size:92px}
.buy-label{color:var(--muted);font-size:14px}
.buy-price{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.buy-price .price{font-size:46px;letter-spacing:-.045em}
.buy-ref{font-size:15px}
.pp-buy .vchip{align-self:flex-start}
.buy-act{margin-top:12px}
.buy-act .btn{width:100%}
.buy-shops{font-size:14px;text-align:center}
.buy-shops a{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (max-width:960px){.pp-buy .media-lg{display:none}.pp-buy .bezel-in{padding-top:22px}}
.history .bezel-in{padding:clamp(18px,2.6vw,32px)}
.history .how{margin-bottom:18px}
.chart-wrap{position:relative;overflow-x:auto}
.chart{display:block;width:100%;height:auto;font-family:var(--font);font-variant-numeric:tabular-nums;touch-action:pan-y}
@media (max-width:640px){.chart{min-width:560px}}
.c-grid{stroke:var(--hair)}
.c-axis{fill:var(--muted);font-size:12px}
.c-line{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.c-dot{fill:var(--card);stroke:var(--ink);stroke-width:2}
.c-end{fill:var(--yellow);stroke:var(--ink);stroke-width:2.5}
.c-label{fill:var(--muted);font-size:12px}
.c-strong{fill:var(--ink);font-weight:650;font-size:13px}
.c-was{stroke:var(--muted-2);stroke-dasharray:4 5}
.c-cross{stroke:var(--muted-2);stroke-width:1;opacity:0}
.c-hover{fill:var(--yellow);stroke:var(--ink);stroke-width:2.5;opacity:0}
.c-hit{fill:transparent;cursor:crosshair}
.chart.is-hover .c-cross,.chart.is-hover .c-hover{opacity:1}
.tip{position:absolute;top:0;left:0;padding:9px 13px;border-radius:14px;background:var(--card);color:var(--ink);font-size:12px;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,-112%);
  box-shadow:0 0 0 1px var(--hair),var(--shadow);transition:opacity 120ms var(--ease-out)}
.tip.on{opacity:1}
.tip b{display:block;font-size:17px;font-variant-numeric:tabular-nums}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:24px 20px;margin-top:28px;padding-top:24px;box-shadow:inset 0 1px 0 var(--hair)}
.kpis dt{color:var(--muted);font-size:12.5px}
.kpis dd{margin-top:2px;font-size:28px;font-weight:750;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.kpis p{color:var(--muted);font-size:12.5px}
.single-record{margin-top:18px;color:var(--muted);font-size:15px}
.compare{display:flex;flex-direction:column;gap:16px;max-width:760px}
.cmp-row{display:grid;gap:6px 18px}
@media (min-width:700px){.cmp-row{grid-template-columns:230px minmax(0,1fr);align-items:center}}
.cmp-row dt{font-size:15px;font-weight:650}
.cmp-sub{display:block;color:var(--muted);font-size:12.5px;font-weight:400}
.cmp-row dd{display:flex;align-items:center;gap:12px;min-width:0}
.cmp-bar{display:block;flex:none;width:calc(var(--w) * .78);min-width:4px;height:26px;border-radius:8px}
.cmp-ours{background:var(--ink)}
.cmp-claim{box-shadow:inset 0 0 0 1.5px var(--muted-2)}
.cmp-val{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.table-view{margin-top:22px}
.table-view summary{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-size:15px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{padding:10px 12px 10px 0;box-shadow:inset 0 -1px 0 var(--hair-2);color:var(--muted);font-size:12px;font-weight:650;text-align:left;white-space:nowrap}
.tbl td{padding:10px 12px 10px 0;box-shadow:inset 0 -1px 0 var(--hair)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.shop-list{display:grid;gap:10px;padding:0;list-style:none}
.shop-row{display:grid;grid-template-columns:180px minmax(0,1fr) auto 220px;align-items:center;gap:12px 24px;padding:18px 18px 18px 24px;border-radius:24px;background:var(--card);box-shadow:0 0 0 1px var(--hair),var(--shadow-xs)}
.shop-name p{font-size:18px;font-weight:700;letter-spacing:-.025em}
.best{display:inline-flex;margin-top:6px;padding:3px 10px;border-radius:999px;background:var(--green-bg);color:var(--green);font-size:12px;font-weight:650}
.shop-title{font-size:14.5px}
.shop-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px;color:var(--muted);font-size:12.5px}
.shop-meta a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.shop-price{font-size:22px;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.shop-act .btn{width:100%}
@media (max-width:833px){
  .shop-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name price" "info info" "act act";padding:18px}
  .shop-name{grid-area:name}.shop-price{grid-area:price}.shop-info{grid-area:info}.shop-act{grid-area:act}
}
.shops-note{margin-top:14px}
.disclosure{max-width:84ch;margin-top:44px;color:var(--muted);font-size:12.5px}

/* ---- checker ----------------------------------------------------------------------------------- */
.checker .bigsearch{max-width:860px}
.bigsearch .field{padding:6px;border-radius:999px;background:var(--tint);box-shadow:inset 0 0 0 1px var(--hair)}
.field-in{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 20px;border-radius:999px;background:var(--card);color:var(--muted);box-shadow:0 0 0 1px var(--hair),var(--shadow-s);transition:box-shadow var(--t-hover) var(--ease-out)}
.field-in:focus-within{box-shadow:0 0 0 1.5px var(--ink),var(--shadow-s)}
.field-in>.ph-light{font-size:22px}
.field-in input{flex:1;min-width:0;height:48px;border:0;background:transparent;color:var(--ink);font-size:17px}
.field-in input::placeholder{color:var(--muted);opacity:1}
.field-in input:focus{outline:none}
.help{margin:14px 0 0 24px;color:var(--muted);font-size:13px;line-height:1.5}
.help a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.results-count{min-height:1.5em;margin:26px 0 16px;color:var(--muted);font-size:15px}
.results-count a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.checker+.callout{margin-top:28px}
@media (max-width:560px){.field-in{padding-left:14px}.field-in input{font-size:16px}.field-in .btn span:first-child{display:none}.field-in .btn{padding:0 20px 0 6px}.field-in .btn .bi{margin:0}}

/* ---- coupons, europe, telegram, text pages ----------------------------------------------------- */
.coupons{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px}
.coupon{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px;border-radius:26px;background:var(--card);box-shadow:0 0 0 1px var(--hair),var(--shadow-xs)}
.coupon-shop,.coupon-exp{display:inline-flex;align-items:center;gap:8px}
.coupon-shop{color:var(--muted);font-size:13px;font-weight:600}
.coupon-shop .ph-light,.coupon-exp .ph-light{font-size:17px}
.coupon h3{font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-.025em}
.codebox{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 18px;border-radius:999px;background:var(--tint);box-shadow:inset 0 0 0 1.5px var(--hair-2)}
.codebox code{font:700 17px/1 var(--mono);letter-spacing:.08em}
.copy{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 16px 0 12px;border:0;border-radius:999px;background:var(--ink);color:var(--page);font-size:13.5px;font-weight:600;transition:transform var(--t-press) var(--ease-out)}
.copy:active{transform:scale(.96)}
.formula{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.f-box{padding:12px 18px;border-radius:999px;background:var(--tint);font-size:15px;font-weight:600}
.f-res{background:var(--yellow);color:#16171A}
.f-op{color:var(--muted);font-weight:600}
.soon{max-width:34em;margin-bottom:16px;color:var(--muted)}
.tg-post{max-width:460px;padding:20px 22px;border-radius:24px;background:var(--card);font-size:15px;line-height:1.55;box-shadow:0 0 0 1px var(--hair),var(--shadow-s)}
.prose>*{max-width:720px}
.prose h2{margin:44px 0 10px;font-size:clamp(20px,2vw,26px);font-weight:750;letter-spacing:-.03em}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--ink-2);font-size:16.5px;line-height:1.65}
.facts{display:grid;gap:8px;margin-top:8px}
.facts div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px}
.facts dt{color:var(--muted)}

/* ---- footer ------------------------------------------------------------------------------------ */
.site-footer{margin-top:clamp(72px,10vw,128px);padding:clamp(40px,5vw,64px) 0 28px;background:var(--tint);color:var(--muted);font-size:14px}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
@media (min-width:834px){.foot-top{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px}}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.foot-brand .logo{padding-left:0}
.foot-brand p{max-width:30em;line-height:1.55}
.foot-check{display:flex;align-items:center;gap:8px;font-size:13px}
.foot-h{margin-bottom:12px;color:var(--ink);font-size:14px;font-weight:700}
.foot-col ul{display:grid;gap:10px;padding:0;list-style:none}
.foot-col a{color:var(--muted);transition:color var(--t-exit) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.crumbs a:hover,.foot-col a:hover{color:var(--ink)}}
.foot-legal{display:grid;gap:12px;margin-top:44px;padding-top:24px;box-shadow:inset 0 1px 0 var(--hair);font-size:12.5px;line-height:1.55}
.legal-bits{display:flex;flex-wrap:wrap;gap:4px 18px}
.toast{position:fixed;left:50%;bottom:24px;z-index:95;max-width:calc(100% - 32px);padding:13px 20px;border-radius:999px;background:var(--ink);color:var(--page);font-size:14.5px;font-weight:600;opacity:0;pointer-events:none;
  box-shadow:var(--shadow-l);transform:translate(-50%,100%);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
.toast.on{opacity:1;transform:translate(-50%,0);transition-duration:250ms,300ms}

/* ---- entering the viewport: a slow rise (site.js marks only what starts below the fold) ---------- */
@media (prefers-reduced-motion:no-preference){
  .rv-wait{opacity:0;transform:translate3d(0,24px,0)}
  .rv-go{transition:opacity 800ms var(--ease-out),transform 800ms var(--ease-drawer)!important;transition-delay:calc(var(--i,0) * 50ms)!important}
}
/* reduced motion: fewer and gentler, not none. Fades and colour changes stay; movement goes. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;scroll-behavior:auto!important}
  .btn,.bi,.mi,.chip,.tab,.pill,.subnav a,.nav a,.burger,.cats-btn,.hs-go,.tile,.tile-ic,.card,.media>.ph-light,.paddle,.cb,.tool-btn,.copy,.sheet-x,
  .mega,.mega-tab>.ph-light,.hs-panel,.toast,.bars::before,.bars::after,.mm-dept summary>.ph-light{transition-property:opacity,background-color,color!important}
  .card:hover,.tile:hover,.tile:hover .tile-ic,.card:hover .media>.ph-light,.btn:hover .bi,.more:hover .mi,.mega,.hs-panel{transform:none!important}
}
@media (forced-colors:active){
  .off,.tag,.vchip,.best,.seg-thumb,.cb,.chip,.tab,.eyebrow{border:1px solid CanvasText}
  .card,.tile,.bezel-in,.hdr-island,.mega,.hs-panel{outline:1px solid CanvasText}
}