/* JC Atacados main.css: single stylesheet. Contract: docs/DESIGN.md (tokens 2, components 3, motion 4).
   Order: fonts, tokens, base, layout, components, pages, motion fallbacks.
   Rules: every hover rule sits inside @media (hover:hover); yellow text only on ink (DESIGN 7 review rule);
   JS never selects by class (data-js only), CSS never depends on data-js except where DESIGN does. */

/* 1. fonts */
/* subsets made by tools/subset-fonts.py (Latin-1 + curly quotes; Archivo axes wght 400..800, wdth 62..100);
   render.mjs publishes only the files referenced here and appends ?v=<hash> */
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-400-800-w62-100-latin.woff2?v=8aeb6a1f") format("woff2");font-weight:400 800;font-stretch:62% 100%;font-display:swap}
@font-face{font-family:"Goldman";src:url("/assets/fonts/goldman-400-latin.woff2?v=47db53f6") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Goldman";src:url("/assets/fonts/goldman-700-latin-s.woff2?v=9b0bc0b7") format("woff2");font-weight:700;font-display:swap}

/* 2. tokens */
:root{
  color-scheme:light;
  /* surfaces */
  --c-page:#F3F2EC;
  --c-surface:#FFFFFF;
  --c-tile:#F7F8F3;
  --c-soft:#ECEBE4;
  --c-soft-2:#E2E0D7;
  --c-zone:#FFF6B0;
  /* ink */
  --c-ink:#0A0A0A;
  --c-ink-2:#2D2C28;
  --c-muted:#62605A;
  --c-line:#E4E2D9;
  --c-line-2:#CFCCC0;
  --c-field:#8A877D; /* edge of a text field that has nothing else to show it (3.59:1 on white, 3.20 on the page; WCAG 1.4.11) */
  --c-art:#151513;
  /* brand and status */
  --c-yellow:#FFF700;
  --c-yellow-hi:#F0E800;
  --c-ok:#1B7A45;
  --c-warn:#8A5300;
  --c-on-dark:#FFFFFF;
  --c-on-dark-2:#BABABA;
  --c-scrim:rgba(10,10,10,.48);
  /* type */
  --f-sans:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-display:"Goldman","Archivo",system-ui,sans-serif;
  --fs-micro:12px;
  --fs-sm:13px;
  --fs-ui:14.5px;
  --fs-body:15px;
  --fs-input:16px;
  --fs-h3:18px;
  --fs-sec:clamp(20px,1vw + 16px,26px);
  --fs-h1:clamp(24px,1.6vw + 18px,34px);
  --fs-price:24px;
  --fs-price-xl:clamp(48px,3vw + 36px,60px);
  --fs-total:28px;
  --fst-art:62%;
  --fst-tight:75%;
  --fst-label:87.5%;
  /* spacing */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-7:32px;--s-8:40px;--s-9:56px;
  --g:16px;
  --gap:10px;
  /* shape */
  --r-xs:4px;--r-tag:6px;--r-sm:10px;--r-ctl:12px;--r-tile:12px;--r-card:18px;--r-lg:22px;--r-pill:999px;
  --bw:1px;--bw-strong:1.5px;--bw-focus:2.5px;
  --sh-card:0 1px 2px rgba(24,22,12,.05),0 6px 16px -8px rgba(24,22,12,.10);
  --sh-card-up:0 2px 4px rgba(24,22,12,.05),0 16px 30px -14px rgba(24,22,12,.26);
  --sh-pop:0 30px 70px -24px rgba(0,0,0,.5);
  --sh-bar:0 -10px 28px -18px rgba(0,0,0,.28);
  /* layers */
  --z-pdpbar:30;--z-header:40;--z-listbar:45;--z-toast:60;--z-sheet:75;--z-drawer:80;--z-gate:90;--z-skip:100;
  /* motion */
  --t-fast:150ms;--t-base:200ms;--t-slow:250ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-io:cubic-bezier(.4,0,.2,1);
  /* layout */
  --wrap:1280px;
  --hdr:61px;
  --ctl:44px;
  --ctl-lg:52px;
  --listbar:64px;
  --rail-n:2.12;
  --cols:2;
  --cols-cat:2;
}
@media (min-width:640px){:root{--g:24px;--gap:14px;--rail-n:3.2;--cols:3;--cols-cat:3}}
@media (min-width:960px){:root{--g:32px;--gap:16px;--hdr:73px;--rail-n:4;--cols:4;--cols-cat:3}}
@media (min-width:1200px){:root{--rail-n:5;--cols:6;--cols-cat:4}}

/* 3. base */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 12px)}
/* fixed bottom bars never hide the focused control (WCAG 2.4.11) */
@media (max-width:959px){
  html:has(body[data-page="product"] .pdp__buy){scroll-padding-bottom:calc(var(--ctl-lg) + 33px + env(safe-area-inset-bottom))}
  html:has(body.has-lbar){scroll-padding-bottom:calc(var(--listbar) + 30px + env(safe-area-inset-bottom))}
}
/* scroll lock: list.js pads body by the scrollbar width (no shift, and the backdrop covers the full width) */
html.is-locked,html.is-locked body{overflow:hidden;overscroll-behavior:none}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;font-family:var(--f-sans);font-size:var(--fs-body);line-height:1.45;color:var(--c-ink);background:var(--c-page);-webkit-font-smoothing:antialiased}
body>main{flex:1 0 auto}
img,svg{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,figure{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
:focus-visible{outline:var(--bw-focus) solid var(--c-ink);outline-offset:2px;box-shadow:0 0 0 6px var(--c-yellow)}
.on-dark :focus-visible{outline-color:var(--c-yellow);box-shadow:none}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--g));margin-inline:auto;padding-inline:var(--g)}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.skip{position:absolute;left:8px;top:-80px;z-index:var(--z-skip);background:var(--c-ink);color:#fff;padding:12px 16px;border-radius:var(--r-ctl);font-weight:600}
.skip:focus{top:8px}
[aria-disabled="true"]{cursor:not-allowed}

/* sample banner (3.1): not sticky, not fixed */
.sample{display:flex;align-items:center;justify-content:center;gap:8px;height:24px;flex:none;background:repeating-linear-gradient(-45deg,var(--c-yellow) 0 8px,var(--c-ink) 8px 16px);font-size:var(--fs-micro);font-weight:700;font-stretch:var(--fst-label);letter-spacing:.06em;text-transform:uppercase}
.sample span{background:var(--c-ink);color:var(--c-yellow);padding:2px 8px;border-radius:var(--r-xs);line-height:16px}

/* header (3.2) */
/* opaque, no backdrop blur (a blur under a 94% white bar cost a GPU pass per scroll frame for no visible effect);
   flex:none keeps it 61/73 px in the body column, the 1px shadow covers a row left by a fractional scroll offset */
.hdr{position:sticky;top:0;z-index:var(--z-header);flex:none;background:var(--c-surface);border-bottom:var(--bw) solid var(--c-line);box-shadow:0 -1px 0 var(--c-surface)}
.hdr__in{display:flex;align-items:center;gap:8px;height:calc(var(--hdr) - 1px)}
.hdr__logo{flex:none;display:flex;align-items:center;min-height:var(--ctl);border-radius:var(--r-xs)}
.hdr__logo picture{display:block}
.hdr__img{width:44px;height:44px}
.search{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.search>.ic{position:absolute;left:13px;color:var(--c-muted);pointer-events:none}
.search__in{width:100%;height:var(--ctl);border:var(--bw-strong) solid transparent;border-radius:var(--r-ctl);background:var(--c-soft);padding:0 12px 0 42px;font-size:var(--fs-input);font-weight:500;outline:none;-webkit-appearance:none;appearance:none;transition:background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.search__in::placeholder{color:var(--c-muted);font-weight:400;opacity:1}
.search__in:not(:placeholder-shown){padding-right:44px}
.search__in:focus{background:var(--c-surface);border-color:var(--c-ink);box-shadow:0 0 0 4px var(--c-yellow)}
.search__in::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.search__x{position:absolute;right:0;width:var(--ctl);height:var(--ctl);border-radius:var(--r-ctl);display:grid;place-items:center;color:var(--c-muted)}
.hbtn{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--ctl);min-width:var(--ctl);border-radius:var(--r-ctl);font-weight:650;font-size:var(--fs-ui);white-space:nowrap;transition:background-color var(--t-fast),transform var(--t-fast)}
.hbtn:active{transform:scale(.96)}
.hbtn--wa{background:var(--c-soft)}
.hbtn--list{background:var(--c-ink);color:var(--c-on-dark)}
.hbtn__l{display:none}
.count{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-pill);background:var(--c-yellow);color:var(--c-ink);font:700 12px/20px var(--f-display);text-align:center;box-shadow:0 0 0 2px var(--c-surface);transition:transform var(--t-base) var(--ease-out)}
.count.is-empty{transform:scale(0)}
.count.is-bumped{animation:bump 220ms var(--ease-out)}
@keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.3)}100%{transform:scale(1)}}
@media (hover:hover){
  .search__in:not(:focus):hover{border-color:var(--c-line-2)}
  .search__x:hover{background:var(--c-soft-2);color:var(--c-ink)}
  .hbtn--wa:hover{background:var(--c-soft-2)}
  .hbtn--list:hover{background:#26251F}
}
@media (min-width:960px){
  .hdr__in{gap:12px}
  .hdr__img{width:auto;height:40px}
  .search{max-width:640px;margin-left:24px}
  .hbtn{padding:0 16px 0 13px}
  .hbtn__l{display:inline}
  .hbtn--wa{margin-left:auto;background:none;box-shadow:inset 0 0 0 var(--bw) var(--c-line-2)}
  .hbtn--list{margin-left:auto}
  .hbtn--wa:not([hidden])+.hbtn--list{margin-left:0}
  .count{position:static;box-shadow:none;margin-left:2px}
  .count.is-empty{display:none}
}
@media (min-width:960px) and (hover:hover){.hbtn--wa:hover{background:var(--c-soft);box-shadow:inset 0 0 0 var(--bw) var(--c-ink)}}

/* chips (3.3): active only through aria-current */
/* the vertical padding sits on the scroller, so the focus ring (outline + 6px halo) is not clipped */
.chips{padding-block:0}
.chips__list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--g) * -1);padding:8px var(--g);scroll-padding-inline:var(--g)}
.chips__list::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:8px;height:var(--ctl);padding:0 16px 0 6px;border-radius:var(--r-pill);background:var(--c-surface);border:var(--bw) solid var(--c-line);font-size:var(--fs-ui);font-weight:600;white-space:nowrap;transition:border-color var(--t-fast),background-color var(--t-fast),transform var(--t-fast)}
.chip__ic{width:32px;height:32px;border-radius:50%;background:var(--c-soft);display:grid;place-items:center}
.chip__ic .ic{width:19px;height:19px}
.chip--wh .chip__ic{background:var(--c-ink);color:var(--c-yellow)}
.chip--wh .chip__ic .ic{width:15px;height:15px}
.chip[aria-current]{background:var(--c-yellow);border-color:var(--c-ink)}
.chip[aria-current] .chip__ic{background:var(--c-surface);color:var(--c-ink)}
.chip:active{transform:scale(.97)}
@media (hover:hover){.chip:hover{border-color:var(--c-ink)}}
@media (min-width:960px){.chips{padding-block:8px 0}.chips__list{flex-wrap:wrap;overflow:visible;margin-inline:0;padding:8px 0 6px}}

/* perks (3.4) */
.perks{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;padding-block:2px 4px;font-size:var(--fs-sm);font-weight:600;font-stretch:var(--fst-label);color:var(--c-ink-2);white-space:nowrap}
.perks li{display:inline-flex;align-items:center;gap:6px}
.perks .ic{width:16px;height:16px}
.perks__bolt{color:var(--c-ink)}
/* "Pedir na mesa" entry (comanda, docs/COMANDA.md): customers already in the store */
.tablecta{display:flex;align-items:center;gap:12px;margin:12px 0 4px;padding:10px 14px 10px 10px;border-radius:var(--r-card);background:var(--c-ink);color:var(--c-on-dark)}
.tablecta__ic{flex:none;width:44px;height:44px;border-radius:var(--r-ctl);background:var(--c-yellow);color:var(--c-ink);display:grid;place-items:center}
.tablecta__tx{flex:1;min-width:0;display:grid;gap:2px}
.tablecta__tx b{font:700 16px/1.2 var(--f-display)}
.tablecta__tx small{font-size:var(--fs-sm);color:var(--c-on-dark-2)}
.tablecta>.ic{flex:none;color:var(--c-yellow)}
@media (min-width:960px){.tablecta{display:inline-flex;max-width:520px}}
@media (max-width:389px){.perks li:nth-child(3){display:none}}

/* sections and rails (3.5) */
.sec{margin-top:var(--s-4)}
.sec+.sec{margin-top:var(--s-7)}
.sec__hd{display:flex;align-items:center;gap:12px;min-height:var(--ctl);margin-bottom:var(--s-2)}
.sec__hd>div:first-child{min-width:0}
.sec__t{font-family:var(--f-display);font-weight:700;font-size:var(--fs-sec);line-height:1.1}
.sec__sub{font-size:var(--fs-sm);color:var(--c-muted);margin-top:2px}
.sec__more{margin-left:auto;display:inline-flex;align-items:center;gap:4px;min-height:var(--ctl);padding-left:8px;font-size:var(--fs-ui);font-weight:650;white-space:nowrap;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.sec__more .ic{width:17px;height:17px}
.sec__nav{display:none;gap:6px}
.nbtn{width:var(--ctl);height:var(--ctl);border-radius:50%;background:var(--c-surface);border:var(--bw) solid var(--c-line-2);display:grid;place-items:center;transition:border-color var(--t-fast),opacity var(--t-fast)}
.nbtn .ic{width:18px;height:18px}
.nbtn:disabled{opacity:.35;cursor:default}
@media (hover:hover){.sec__more:hover{text-decoration-thickness:2.5px}.nbtn:not(:disabled):hover{border-color:var(--c-ink)}}
@media (min-width:960px) and (hover:hover){.sec__nav{display:flex}}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--rail-n) - 1) * var(--gap)) / var(--rail-n));gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin:-6px calc(var(--g) * -1) -16px;padding:6px var(--g) 16px;scroll-padding-inline:var(--g)}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
@media (min-width:960px){.rail{margin-inline:-8px;padding-inline:8px;scroll-padding-inline:8px}}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap)}

/* wholesale zone (3.17) */
.zone{margin-inline:calc(var(--g) * -1);padding:18px var(--g) 22px;background:var(--c-zone)}
@media (min-width:640px){.zone{margin-inline:0;border-radius:var(--r-lg);padding:22px 24px 26px}}

/* card (3.6) */
.card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--c-surface);border-radius:var(--r-card);padding:6px;box-shadow:var(--sh-card);transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
@media (hover:hover){.card:hover{transform:translateY(-2px);box-shadow:var(--sh-card-up)}}
.card.is-in-list{box-shadow:var(--sh-card),0 0 0 2px var(--c-ink)}
@media (hover:hover){.card.is-in-list:hover{box-shadow:var(--sh-card-up),0 0 0 2px var(--c-ink)}}
.card__media{position:relative;display:block;aspect-ratio:1;border-radius:var(--r-tile);background:var(--c-tile);overflow:hidden;container:tile/inline-size}
.card__name{margin-top:8px;padding-inline:2px;font-size:14px;line-height:1.3;font-weight:500;min-height:2.6em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.card__name a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r-card)}
.card__name a:focus-visible{outline:none;box-shadow:none}
.card__name a:focus-visible::after{outline:var(--bw-focus) solid var(--c-ink);outline-offset:2px;box-shadow:0 0 0 6px var(--c-yellow)}
.card__price{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:4px 8px;margin-top:8px;padding-inline:2px}
.card__meta{font-size:var(--fs-micro);font-weight:600;color:var(--c-muted);white-space:nowrap;line-height:1.2;padding-bottom:3px}
.card__meta s{font-weight:500}
.is-wh .card__meta--unit{display:none}
.card__act{position:relative;z-index:2;margin-top:auto;padding-top:10px}
.card__badge{position:absolute;left:6px;bottom:6px;z-index:1;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--r-pill);background:var(--c-ink);color:var(--c-on-dark);font-size:var(--fs-micro);font-weight:750;font-stretch:var(--fst-label);line-height:1;letter-spacing:.02em}
.card__badge--av{background:var(--c-surface);color:var(--c-warn);font:650 12px/1 var(--f-sans);font-stretch:var(--fst-label);box-shadow:0 0 0 var(--bw) var(--c-line)}
.card__badge--av::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.card__badge--off{color:var(--c-muted)}
@media (min-width:960px){.card{padding:8px}.card__name{font-size:15px;margin-top:10px}}
/* unavailable: dim media and tag only, text stays AA */
.card--indisponivel .card__media>*:not(.card__badge){opacity:.45}
.card--indisponivel .tag{filter:grayscale(1);opacity:.7}

/* art: no-photo tile and photo tile share the same frame (G20) */
/* row 1 is the same on every tile (one brand line at 17cqw x .9 + gap + size line): the pack picture keeps one
   scale for every brand; brandFit caps two lines at 8.5cqw so they fit the same height (G20) */
.art{position:absolute;inset:0;display:grid;grid-template-rows:calc(16.9cqw + max(11px,6.4cqw)) minmax(0,1fr);row-gap:3cqw;padding:7cqw 7cqw 0;color:var(--c-art);text-align:center}
.art__hd{display:grid;justify-items:center;align-content:end;gap:1.6cqw} /* end: the size line sits at the bottom of the fixed header row on every tile, whatever the brand size (QA r3) */
.art__brand{font-weight:800;font-stretch:var(--fst-art);text-transform:uppercase;line-height:.9;font-size:calc(var(--bf) * 1cqw);letter-spacing:.005em;white-space:nowrap}
.art__size{display:flex;align-items:baseline;justify-content:center;gap:.4em;font-size:max(11px,6.4cqw);line-height:1;white-space:nowrap}
.art__size b{font-family:var(--f-display);font-weight:700}
.art__size i{font-style:normal;font-weight:650;font-stretch:var(--fst-tight);text-transform:uppercase;letter-spacing:.06em;font-size:max(10px,.74em);color:var(--c-muted)}
.art__size .art__var{color:var(--c-art);font-weight:800}
/* narrow tiles (360 px phones): with a variant the pack word goes (the pictogram shows the pack), so the line fits */
@container tile (max-width:150px){.art__size:has(.art__var) i:not(.art__var){display:none}}
.art__pic{position:relative;min-height:0}
/* --pk-accent: neutral label grey unless the item has a reviewed brand tint (inline style on the same svg wins);
   a black band would read as a black brand pack (G19) */
.pic{--pk-accent:#A8A59B;position:absolute;left:50%;bottom:calc(4% * (1 - var(--pk-v,1)));height:calc(100% * var(--pk-v,1));width:auto;aspect-ratio:1;transform:translateX(-50%);overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}
/* --pk-v (card.js volK): smaller volumes of one pack drawn smaller, base kept on the 96% line; clear glass for white
   and rosé wine (pack-vinho body is fill:var(--pk-glass,currentColor); a type, never a brand color) */
.pic--clear{--pk-glass:#DDE2D0}
.art__pic>img{position:absolute;left:50%;bottom:calc(4% - 6.818% * var(--pk-h,1));height:calc(113.6% * var(--pk-h,1));width:auto;aspect-ratio:1;max-width:none;transform:translateX(-50%);object-fit:contain}
.art__pic>img+.pic{display:none}
@container tile (max-width:99px){.art{padding:8cqw;grid-template-rows:minmax(0,1fr)}.art__hd{display:none}.pic{stroke-width:1.1px}}
@container tile (min-width:360px){.pic{stroke-width:2.25px}}
.art--lg .pic{height:calc(100% * var(--pk-k,1) * var(--pk-v,1));bottom:calc(4% * (1 - var(--pk-k,1) * var(--pk-v,1)))}
/* the hero photo follows the same pack scale as the hero pictogram (G20) */
.art--lg .art__pic>img{height:calc(113.6% * var(--pk-h,1) * var(--pk-k,1));bottom:calc(4% - 6.818% * var(--pk-h,1) * var(--pk-k,1))}
/* photos that lie down (card.js PHOTO_WIDE: chocolate bars): scaled by the tile width, not the pictogram height.
   A 2:1 box shows the bottom half of the 800x800 photo (the bar sits there, on the 6% bottom padding), 86% of the
   tile wide (43cqw tall) or less on a low picture area; the bar bottom (12% of the box height) on the 96% line */
.art .art__pic>img.art__img--wide{--wh:min(43cqw,92%);height:var(--wh);aspect-ratio:2/1;bottom:calc(4% - .12 * var(--wh));object-fit:cover;object-position:50% 100%}
/* 16:10 hero below 640 px: a smaller header (x .55, one or two lines alike) leaves the product as the main element */
@media (max-width:639px){
  .art--lg{grid-template-rows:calc(10cqw + max(11px,4.4cqw)) minmax(0,1fr)}
  .art--lg .art__brand{font-size:calc(var(--bf) * .55cqw)}
  .art--lg .art__size{font-size:max(11px,4.4cqw)}
}

/* price tag (shelf label) */
.tag{display:inline-flex;flex-direction:column;align-items:stretch;flex:none;max-width:100%;border-radius:var(--r-tag);overflow:hidden;line-height:1;box-shadow:0 1px 0 rgba(10,10,10,.08)}
.tag__p{display:flex;align-items:flex-start;background:var(--c-yellow);color:var(--c-ink);padding:6px 8px 5px 7px;font-family:var(--f-display);font-weight:700;white-space:nowrap}
.tag__cur{font-family:var(--f-sans);font-stretch:var(--fst-tight);font-weight:750;font-size:11px;margin:2px 3px 0 0}
.tag__int{font-size:var(--fs-price);letter-spacing:-.02em}
.tag__dec{font-size:13px;margin:1px 0 0 1px}
.tag--long .tag__int{font-size:19px}
.tag--long .tag__dec{font-size:12px}
.tag__u{align-self:flex-end;margin-left:3px;font-family:var(--f-sans);font-size:12px;font-weight:600;font-stretch:var(--fst-label)}
.tag__wh{display:flex;align-items:center;gap:4px;background:var(--c-ink);color:var(--c-on-dark);padding:4px 7px 4px 6px;font-size:12.5px;font-weight:600;font-stretch:var(--fst-label);letter-spacing:.01em;white-space:nowrap}
.tag__wh .ic{width:9px;height:13px;color:var(--c-yellow)}
.tag__wh b{color:var(--c-yellow);font-weight:750}
.tag__wh s{color:var(--c-on-dark-2);font-weight:500}
.tag__p--wh,.tag__wh--on{display:none}
.is-wh .tag__p--wh,.is-wh .tag__wh--on{display:flex}
.is-wh .tag__p:not(.tag__p--wh),.is-wh .tag__wh:not(.tag__wh--on){display:none}
.tag.is-switched .tag__p{animation:flash 240ms var(--ease-out)}
@keyframes flash{0%{background:#FFFFFF}100%{background:var(--c-yellow)}}
.price-ask{font-size:var(--fs-ui);font-weight:650}

/* add button and stepper */
.add{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:var(--ctl);border-radius:var(--r-ctl);background:var(--c-soft);color:var(--c-ink);font-weight:650;font-size:var(--fs-ui);white-space:nowrap;transition:background-color var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.add .ic{width:18px;height:18px;stroke-width:2.2}
.add:active{transform:scale(.97)}
@keyframes pop{0%{transform:scale(.94)}100%{transform:scale(1)}}
.add--wa{background:var(--c-surface);box-shadow:inset 0 0 0 var(--bw-strong) var(--c-ink)}
.add--off{background:none;color:var(--c-muted);font-weight:600;cursor:default;box-shadow:inset 0 0 0 var(--bw) var(--c-line)}
@media (hover:hover){.add:not(.add--off):hover{background:var(--c-ink);color:var(--c-on-dark)}}
.step{display:none;grid-template-columns:var(--ctl) minmax(0,1fr) var(--ctl);align-items:center;height:var(--ctl);border-radius:var(--r-ctl);background:var(--c-ink);color:var(--c-on-dark)}
.is-in-list .step,.step--on{display:grid}
.is-in-list .add[data-js="add"]{display:none}
.step__b{height:var(--ctl);display:grid;place-items:center;border-radius:var(--r-ctl);transition:background-color var(--t-fast)}
.step__b .ic{width:18px;height:18px;stroke-width:2.2}
@media (hover:hover){.step__b:hover{background:#26251F}}
.step__n{width:100%;min-width:0;height:var(--ctl);border:0;border-radius:0;background:transparent;text-align:center;font:700 17px/1 var(--f-display);color:var(--c-yellow);-moz-appearance:textfield;appearance:textfield;padding:0}
.step__n::-webkit-outer-spin-button,.step__n::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.step :focus-visible{outline-color:var(--c-yellow);outline-offset:-4px;box-shadow:none}
.step.is-pop,.add.is-pop,.btn.is-pop{animation:pop 180ms var(--ease-out)}

/* store photo tile (first item of a shelf) and pickup band (3.8) */
.shot{position:relative;display:block;min-height:100%;border-radius:var(--r-card);overflow:hidden;background:var(--c-ink);color:var(--c-on-dark);isolation:isolate;box-shadow:var(--sh-card)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease-out)}
.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 35%,rgba(10,10,10,.88) 100%)}
@media (hover:hover){.shot:hover img{transform:scale(1.03)}}
.shot__tx{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;display:grid;gap:6px;justify-items:start}
.eyebrow{font-size:var(--fs-micro);font-weight:750;font-stretch:var(--fst-label);letter-spacing:.08em;text-transform:uppercase;background:var(--c-yellow);color:var(--c-ink);padding:4px 7px 3px;border-radius:var(--r-xs);line-height:1}
.shot strong{font-family:var(--f-display);font-weight:700;font-size:20px;line-height:1.05}
.shot__more{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:650;text-decoration:underline;text-underline-offset:3px}
.shot:focus-visible{outline-offset:3px}
/* scrim for AA text over the bright facade wall: white text measured >= 11.9:1 on every pixel under it (390, 1440) */
.band{position:relative;display:flex;align-items:flex-end;min-height:300px;margin-top:var(--s-8);margin-inline:calc(var(--g) * -1);overflow:hidden;background:var(--c-ink);color:var(--c-on-dark)}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 40%}
.band::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.7) 55%,rgba(10,10,10,.3) 100%)}
.band__tx{position:relative;z-index:2;display:grid;gap:10px;justify-items:start;padding:28px var(--g) 26px;max-width:560px}
.band h2{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,2vw + 18px,34px);line-height:1.05;text-wrap:balance}
.band p{color:var(--c-on-dark);max-width:34ch}
/* full bleed black band right above the black footer: no page colored strip between them */
@media (max-width:639px){
  /* the footer overlaps the band by 1 px and paints over it (positioned, later in the DOM): at a fractional band edge
     the photo row under the partly covered scrim showed as a light line */
  main:has(>.band:last-child)+.ft{position:relative;margin-top:-1px}
  /* full bleed onto the black footer: the scrim ends in solid ink, no light seam row (QA r3); darker only */
  .band::before{background:linear-gradient(0deg,#0A0A0A 0%,rgba(10,10,10,.9) 12%,rgba(10,10,10,.7) 55%,rgba(10,10,10,.3) 100%)}
}
.band .btn{margin-top:6px}
.band :focus-visible{outline-color:var(--c-yellow);box-shadow:none}
@media (min-width:640px){
  .band{min-height:240px;margin-inline:0;border-radius:var(--r-lg)}
  .band img{object-position:center 40%}
  .band::before{background:linear-gradient(90deg,rgba(10,10,10,.8) 0%,rgba(10,10,10,.1) 60%),linear-gradient(0deg,rgba(10,10,10,.75) 0%,rgba(10,10,10,.35) 60%,rgba(10,10,10,.15) 100%)} /* text sits left */
  .band__tx{padding:36px 40px}
}
@media (min-width:960px){.band{min-height:300px}}

/* catalog and search (3.10) */
.cat__hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding-top:var(--s-3)}
.cat__t{font-family:var(--f-display);font-weight:700;font-size:var(--fs-h1);line-height:1.1;overflow-wrap:anywhere;text-wrap:balance}
.cat__n{font-size:var(--fs-ui);color:var(--c-muted);font-weight:500}
.cat__main{min-width:0}
.cat__bar{display:flex;align-items:center;gap:8px;margin-block:var(--s-3)}
.fbtn{flex:none;display:inline-flex;align-items:center;gap:8px;height:var(--ctl);padding:0 16px 0 13px;border-radius:var(--r-ctl);background:var(--c-ink);color:var(--c-on-dark);font-weight:650;font-size:var(--fs-ui);white-space:nowrap}
.fbtn .ic{color:var(--c-yellow);width:18px;height:18px}
.fbtn[data-count]:not([data-count="0"])::after{content:attr(data-count);min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-pill);background:var(--c-yellow);color:var(--c-ink);font:700 12px/20px var(--f-display);text-align:center}
.sort{position:relative;flex:1;display:inline-flex;align-items:center;justify-content:flex-end;min-width:0}
.sort select{-webkit-appearance:none;appearance:none;height:var(--ctl);max-width:100%;border-radius:var(--r-ctl);border:var(--bw-strong) solid var(--c-line-2);background:var(--c-surface);padding:0 30px 0 10px;font-size:var(--fs-ui);font-weight:600;font-stretch:var(--fst-label);cursor:pointer;text-overflow:ellipsis}
.sort .ic{position:absolute;right:9px;width:16px;height:16px;pointer-events:none}
.vt{flex:none;display:inline-flex;border-radius:var(--r-ctl);background:var(--c-soft)}
.vt a{width:var(--ctl);height:var(--ctl);border-radius:var(--r-ctl);display:grid;place-items:center;color:var(--c-muted);transition:background-color var(--t-fast),color var(--t-fast)}
.vt a[aria-current]{background:var(--c-surface);color:var(--c-ink);box-shadow:var(--sh-card)}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s-3)}
.pills:empty{display:none}
.pill{position:relative;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px 0 14px;border-radius:var(--r-pill);background:var(--c-ink);color:var(--c-on-dark);font-size:var(--fs-ui);font-weight:600;white-space:nowrap}
.pill::before{content:"";position:absolute;inset:-4px 0}
.pill .ic{width:16px;height:16px}
.pill--clear{background:none;color:var(--c-ink);text-decoration:underline;text-underline-offset:3px;padding:0 6px}
@media (hover:hover){.sort select:hover{border-color:var(--c-ink)}.vt a:not([aria-current]):hover{color:var(--c-ink)}.pill:not(.pill--clear):hover{background:#26251F}.pill--clear:hover{text-decoration-thickness:2px}}
.cat__grid{display:grid;grid-template-columns:repeat(var(--cols-cat),minmax(0,1fr));gap:var(--gap)}
.empty{display:grid;justify-items:center;gap:10px;padding:36px 20px;text-align:center;background:var(--c-surface);border-radius:var(--r-card);box-shadow:var(--sh-card)}
.empty+.sec{margin-top:var(--s-7)}
.empty__title{font-size:var(--fs-h3);font-weight:700}
.empty__text{color:var(--c-muted)}
.empty__wa{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--ctl-lg);padding:0 20px;border-radius:var(--r-ctl);background:var(--c-yellow);color:var(--c-ink);box-shadow:inset 0 0 0 var(--bw-strong) var(--c-ink);font-weight:700;transition:background-color var(--t-fast)}
.empty__clear{min-height:var(--ctl);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.empty__wa:hover{background:var(--c-yellow-hi)}}
/* filters: ONE element, bottom sheet below 960px, sticky sidebar from 960px */
.filters{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sheet);max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;background:var(--c-surface);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.18);transform:translateY(102%);visibility:hidden;transition:transform var(--t-slow) var(--ease-out),visibility 0s linear var(--t-slow)}
.filters.is-open{transform:none;visibility:visible;box-shadow:0 -10px 40px rgba(0,0,0,.18),0 0 0 100vmax var(--c-scrim);transition:transform var(--t-slow) var(--ease-out)}
.filters:focus,.filters:focus-visible{outline:none;box-shadow:0 -10px 40px rgba(0,0,0,.18),0 0 0 100vmax var(--c-scrim)}
.filters::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--c-line-2)}
.filters__hd{display:flex;align-items:center;padding:18px 10px 4px 20px}
.filters__hd h2{font-family:var(--f-display);font-size:20px;font-weight:700}
.filters__body{overflow:auto;overscroll-behavior:contain;padding:0 20px calc(12px + env(safe-area-inset-bottom))}
.filters__set{border:0;margin:0;padding:14px 0;border-top:var(--bw) solid var(--c-line);min-width:0}
.filters__set:first-child{border-top:0}
.filters__set legend{float:left;width:100%;margin-bottom:8px;padding:0;font-size:var(--fs-micro);font-weight:700;font-stretch:var(--fst-label);letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted)}
.filters__opt{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:40px;margin:0 6px 6px 0;padding:0 13px;border-radius:var(--r-pill);border:var(--bw) solid var(--c-line-2);background:var(--c-surface);font-size:var(--fs-ui);font-weight:550;cursor:pointer;transition:border-color var(--t-fast),background-color var(--t-fast)}
.filters__opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.filters__opt:has(input:checked){background:var(--c-yellow);border-color:var(--c-ink)}
.filters__opt:has(input:focus-visible){outline:var(--bw-focus) solid var(--c-ink);outline-offset:2px}
.filters__opt:has(input:disabled){opacity:.5;cursor:default}
.filters__opt input:disabled{cursor:default}
.filters__n{color:var(--c-muted);font-size:var(--fs-micro);font-weight:600}
.filters__opt:has(input:checked) .filters__n{color:var(--c-ink)}
.filters__set--price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 10px}
.filters__set--price legend{grid-column:1/-1}
.filters__num{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:var(--fs-micro);font-weight:600;color:var(--c-muted)}
.filters__num input{width:100%;max-width:160px;height:var(--ctl);border:var(--bw-strong) solid var(--c-field);border-radius:var(--r-ctl);background:var(--c-surface);padding:0 12px;font-size:var(--fs-input);color:var(--c-ink);-moz-appearance:textfield;appearance:textfield}
/* /c/<group>/: the Categoria options are links (search.js), the current group marked like a checked option */
a.filters__opt{color:var(--c-ink);text-decoration:none}
a.filters__opt[aria-current]{background:var(--c-yellow);border-color:var(--c-ink)}
a.filters__opt[aria-current] .filters__n{color:var(--c-ink)}
.filters__num input:focus{border-color:var(--c-ink)}
.filters__num input::placeholder{color:var(--c-muted);opacity:1}
.filters__done{position:sticky;bottom:0;display:flex;align-items:center;justify-content:center;width:100%;height:var(--ctl-lg);margin-top:8px;border-radius:var(--r-ctl);background:var(--c-ink);color:var(--c-on-dark);font-weight:700;box-shadow:0 0 0 12px var(--c-surface)}
@media (hover:hover){.filters__opt:not(:has(input:disabled)):hover{border-color:var(--c-ink)}}
@media (min-width:960px){
  .cat{display:grid;grid-template-columns:248px minmax(0,1fr);gap:32px;align-items:start}
  .filters{position:sticky;top:var(--filters-top,calc(var(--hdr) + 16px));left:auto;right:auto;bottom:auto;z-index:auto;max-height:none;transform:none;visibility:visible;border-radius:var(--r-card);box-shadow:var(--sh-card);transition:none}
  .filters.is-open,.filters:focus,.filters:focus-visible{box-shadow:var(--sh-card)}
  .filters::before,.filters__hd,.filters__done,.fbtn{display:none}
  .filters__body{overflow:visible;padding:8px 16px}
}

/* rows mode (G7): .is-rows (catalog list view, any width) and .rail--rows (wholesale shelf, below 640px).
   Placed after .grid and .cat__grid so display:block wins over their display:grid. */
.is-rows{container:rows/inline-size;display:block}
@media (max-width:639px){
  .rail--rows{container:rows/inline-size;display:block;overflow:visible;margin:0;padding:0}
  .rail--rows>.card:nth-child(n+6){display:none}
}
@container rows (min-width:1px){
  .card{display:grid;grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"m n n" "m p a";column-gap:10px;row-gap:6px;align-items:end;padding:12px 0;border-radius:0;background:none;box-shadow:none;border-bottom:var(--bw) solid var(--c-line)}
  .card:first-child{border-top:var(--bw) solid var(--c-line)}
  .card.is-in-list{box-shadow:inset 3px 0 0 var(--c-ink);padding-left:11px}
  .card__media{grid-area:m;align-self:start;width:64px}
  .card__name{grid-area:n;margin:0;min-height:0;padding:0}
  .card__name a::after{border-radius:0}
  .card__price{grid-area:p;margin:0;padding:0}
  .card__act{grid-area:a;width:var(--ctl);padding:0}
  .card.is-in-list .card__act,.card__act:has(.add--wa,.add--off){width:132px}
  .step{grid-template-columns:var(--ctl) minmax(0,1fr) var(--ctl)}
  .add[data-js="add"]{width:var(--ctl);background:var(--c-ink);color:var(--c-yellow)}
  .add[data-js="add"] .add__l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* the saving badge sits under the 64 px thumb, never over the bottle neck or the can top (QA r3); the tile
     corners clip through .art, so the badge can leave the tile */
  .card__media{overflow:visible}
  .card__media>.art{border-radius:inherit;overflow:hidden}
  .card__badge{top:calc(100% + 4px);left:50%;bottom:auto;transform:translateX(-50%);height:18px;padding:0 5px;white-space:nowrap}
  .card__badge--av{display:none}
  .sk-card{grid-template-columns:64px minmax(0,1fr);column-gap:10px;padding:12px 0;border-radius:0;background:none;border-bottom:var(--bw) solid var(--c-line)}
  .sk-card .sk:nth-child(1){grid-row:span 3;align-self:start}
  .sk-card .sk:nth-child(4){height:40px;width:96px}
  .sk-card .sk:nth-child(5){display:none}
  @media (hover:hover){
    .card:hover{transform:none;box-shadow:none}
    .card.is-in-list:hover{box-shadow:inset 3px 0 0 var(--c-ink)}
  }
}

/* product page (3.11) */
.crumbs ol{display:flex;align-items:center;gap:0 6px;padding-block:4px;font-size:var(--fs-sm);color:var(--c-muted)}
.crumbs li{flex:none;display:inline-flex;align-items:center;gap:6px;min-width:0}
.crumbs li:last-child{flex:0 1 auto}
.crumbs li:last-child span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumbs li+li::before{content:"";flex:none;width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.6}
.crumbs a{display:inline-flex;align-items:center;min-height:var(--ctl);min-width:var(--ctl);text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--c-ink);font-weight:600}
@media (hover:hover){.crumbs a:hover{color:var(--c-ink)}}
.pdp{display:grid;gap:20px}
.pdp__media{background:var(--c-surface);border-radius:var(--r-lg);padding:8px;box-shadow:var(--sh-card)}
.pdp__tile{aspect-ratio:5/4;border-radius:16px}
.pdp__credit{margin:8px 4px 2px;font-size:var(--fs-micro);color:var(--c-muted)}
.pdp__credit a{text-decoration:underline;text-underline-offset:2px}
.pdp__info{display:grid;gap:16px;align-content:start;min-width:0}
/* 44px tall hit area without moving the layout */
.pdp__brand a{display:inline-block;min-width:var(--ctl);padding-block:12.6px;margin-block:-12.6px;font-size:var(--fs-sm);font-weight:700;font-stretch:var(--fst-label);letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted);text-decoration:underline;text-underline-offset:3px}
.pdp__name{margin-top:4px;font-size:var(--fs-h1);line-height:1.12;font-weight:720;letter-spacing:-.012em;overflow-wrap:anywhere}
.pdp__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mpill{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:var(--r-pill);background:var(--c-surface);border:var(--bw) solid var(--c-line);font-size:var(--fs-sm);font-weight:600}
.mpill b{font-family:var(--f-display)}
.pdp__ean{font-size:var(--fs-micro);color:var(--c-muted);font-variant-numeric:tabular-nums;margin-left:4px}
.pdp__price{display:grid;gap:8px;justify-items:start}
.tag--xl{border-radius:10px}
.tag--xl .tag__p{padding:12px 16px 10px 14px}
.tag--xl .tag__cur{font-size:18px;margin:6px 6px 0 0}
.tag--xl .tag__int{font-size:var(--fs-price-xl)}
.tag--xl .tag__dec{font-size:26px;margin-top:3px}
.tag--xl .tag__u{font-size:15px;margin:0 0 6px 6px}
.tag--xl .tag__wh{font-size:15px;padding:9px 14px 9px 12px;gap:7px}
.tag--xl .tag__wh .ic{width:11px;height:16px}
.pdp__save{font-size:var(--fs-ui);color:var(--c-ink-2)}
.pdp.is-wh .pdp__save{display:none} /* the applied nudge says the same */
.pdp__save b{font-weight:700}
.pdp__av{display:flex;align-items:center;gap:9px;font-size:var(--fs-ui);font-weight:600}
.dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c-ok);box-shadow:0 0 0 4px rgba(27,122,69,.14)}
.pdp__av--warn .dot{background:var(--c-warn);box-shadow:0 0 0 4px rgba(138,83,0,.14)}
.pdp__av--off .dot{background:var(--c-muted);box-shadow:none}
.qs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.qs button{height:var(--ctl);border-radius:var(--r-ctl);background:var(--c-surface);box-shadow:inset 0 0 0 var(--bw) var(--c-line-2);font:700 16px/1 var(--f-display);display:inline-flex;align-items:center;justify-content:center;gap:4px;transition:background-color var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)}
.qs button .ic{width:9px;height:13px}
.qs button small{font:600 12px/1 var(--f-sans)}
.qs button[aria-pressed="true"]{background:var(--c-ink);color:var(--c-on-dark);box-shadow:none}
.qs button[aria-pressed="true"] .ic{color:var(--c-yellow)}
@media (hover:hover){.qs button:not([aria-pressed="true"]):hover{box-shadow:inset 0 0 0 var(--bw-strong) var(--c-ink)}}
.pdp__buy{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px}
.step--lg{height:var(--ctl-lg);grid-template-columns:48px 52px 48px}
.step--lg .step__b,.step--lg .step__n{height:var(--ctl-lg)}
.step--lg .step__n{font-size:18px}
.pdp__buy .btn{padding:0 14px;gap:8px;min-width:0}
.pdp__buy .btn .ic{display:none}
/* narrow phones (QA r3): the text never leaves the button. Below 400 px a 44 px stepper; a 4+ digit total
   (main.js .is-long) and every total below 360 px trade the word for the + icon (the word stays for screen readers) */
@media (max-width:399px){
  .step--lg{grid-template-columns:44px 44px 44px}
  .pdp__buy .btn{padding:0 10px}
  .pdp__buy .btn.is-long .btn__l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pdp__buy .btn.is-long .ic{display:block}
}
@media (min-width:400px) and (max-width:479px){ /* a 5+ digit total (.is-xl) still needs the room */
  .pdp__buy .btn.is-xl .btn__l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pdp__buy .btn.is-xl .ic{display:block}
}
@media (max-width:359px){
  .pdp__buy .btn .btn__l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pdp__buy .btn:not(.is-long) .ic{display:block}
  .pdp__buy .btn.is-long .ic{display:none}
}
.pdp__inlist{font-size:var(--fs-sm);color:var(--c-ink-2)}
.pdp__alt{display:grid;gap:10px}
.pdp__alt>:only-child{grid-column:1/-1}
.legal18{display:flex;gap:10px;align-items:center;font-size:var(--fs-sm);color:var(--c-muted)}
.b18{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:var(--bw-strong) solid var(--c-ink);color:var(--c-ink);font:700 12px/1 var(--f-display)}
@media (max-width:959px){
  /* first screen at 390x844: shortcuts and +N nudge stay above the fixed bar (size and pack are on the tile) */
  .crumbs ol{padding-block:0}
  .pdp{gap:12px}
  .pdp__info{gap:12px}
  .pdp__meta{display:none}
  .pdp__save{display:none} /* the tag strip, the shortcut and the nudge say the same in the first screen */
  .legal18{font-size:var(--fs-micro);line-height:1.35}
  .b18{width:28px;height:28px;font-size:11px}
  .pdp__buy{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-pdpbar);padding:10px var(--g) calc(10px + env(safe-area-inset-bottom));background:var(--c-surface);border-top:var(--bw) solid var(--c-line);box-shadow:var(--sh-bar)}
}
@media (max-width:639px){.pdp__tile{aspect-ratio:16/10}}
@media (min-width:640px){.pdp__alt{grid-template-columns:1fr 1fr}}
@media (min-width:960px){
  .pdp{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:56px;align-items:start;padding-top:8px}
  .pdp__media{position:sticky;top:calc(var(--hdr) + 20px)}
  .pdp__tile{aspect-ratio:1}
}

/* overlays (dialog) */
dialog{color:inherit}
dialog::backdrop{background:var(--c-scrim);animation:fade var(--t-base) var(--ease-io)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* list drawer (3.12): side panel from 640px, bottom sheet below */
.drawer{position:fixed;inset:0 0 0 auto;z-index:var(--z-drawer);margin:0;width:min(440px,100%);height:100vh;height:100dvh;max-width:none;max-height:none;padding:0;border:0;overflow:hidden auto;overscroll-behavior:contain;background:var(--c-surface);flex-direction:column;transform:translateX(100%);transition:transform var(--t-slow) var(--ease-out);box-shadow:-24px 0 48px -24px rgba(0,0,0,.3)}
.drawer[open]{display:flex}
.drawer.is-open{transform:none}
.drawer:focus,.drawer:focus-visible{outline:none;box-shadow:-24px 0 48px -24px rgba(0,0,0,.3)}
@media (max-width:639px){
  .drawer{inset:auto 0 0 0;width:100%;height:auto;max-height:90vh;max-height:90dvh;border-radius:var(--r-lg) var(--r-lg) 0 0;transform:translateY(100%)}
  .drawer::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--c-line-2)}
}
.drawer__hd{display:flex;align-items:center;gap:8px;padding:18px 10px 10px 20px;border-bottom:var(--bw) solid var(--c-line)}
.drawer__t{font-family:var(--f-display);font-size:22px;font-weight:700;line-height:1.1}
.drawer__n{font-size:var(--fs-sm);font-weight:600;color:var(--c-muted)}
.drawer__bd{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 20px}
.drawer__ft{border-top:var(--bw) solid var(--c-line);padding:14px 20px calc(14px + env(safe-area-inset-bottom));display:grid;gap:12px;background:var(--c-surface)}
.drawer:has([data-js="list-empty"]:not([hidden])) .drawer__ft{display:none}
.drawer__hd,.drawer__ft{flex:none}
/* low screens (zoom 200 to 400%, phone in landscape): the lines would get the leftover height, down to 0 px, and the
   footer was cut. Here the whole drawer scrolls, lines then footer (WCAG 1.4.10, QA r3) */
@media (max-height:620px){
  .drawer__bd{flex:none;overflow:visible}
  .drawer__hd{padding-block:12px 8px}
  .drawer__ft{padding-block:10px calc(10px + env(safe-area-inset-bottom));gap:8px}
}
.drawer__note{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--fs-sm);color:var(--c-muted)}
.drawer__note .linkbtn{flex:none;color:var(--c-ink)}
.drawer__note .is-note{color:var(--c-ink);font-weight:650}
.drawer__empty{display:grid;justify-items:center;text-align:center;gap:10px;padding:48px 12px}
.drawer__empty h3{font-size:var(--fs-h3);font-weight:700}
.drawer__empty p{color:var(--c-muted);font-size:var(--fs-ui)}
.drawer__empty .ic-big{width:64px;height:64px;border-radius:18px;background:var(--c-yellow);color:var(--c-ink);box-shadow:inset 0 0 0 var(--bw-strong) var(--c-ink);display:grid;place-items:center}
.drawer__empty .ic-big .ic{width:28px;height:28px}
.line{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:var(--bw) solid var(--c-line)}
.line:last-child{border-bottom:0}
.line--missing .line__name,.line--error{color:var(--c-muted)}
.line--error{display:block;font-size:var(--fs-ui)}
.thumb{position:relative;display:block;width:56px;aspect-ratio:1;border-radius:var(--r-tile);background:var(--c-tile);overflow:hidden;container:tile/inline-size}
.line__main{display:grid;gap:8px;min-width:0}
.line__top{display:flex;align-items:flex-start;gap:6px}
.line__name{flex:1;min-width:0;font-size:var(--fs-ui);font-weight:550;line-height:1.3;padding-top:2px}
.line__rm{flex:none;width:var(--ctl);height:var(--ctl);margin:-10px -12px 0 0;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--c-muted);transition:background-color var(--t-fast),color var(--t-fast)}
@media (hover:hover){.line__name:hover{text-decoration:underline;text-underline-offset:3px}.line__rm:hover{background:var(--c-soft);color:var(--c-ink)}}
.line__unit{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:var(--fs-sm);color:var(--c-muted)}
.line__unit b{font-family:var(--f-display);font-weight:700;font-size:14px;color:var(--c-ink);padding:1px 0;border-radius:var(--r-xs)}
.line--wh .line__unit b{background:var(--c-yellow);padding:1px 5px}
.line__tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:5px;background:var(--c-ink);color:var(--c-yellow);font-size:var(--fs-micro);font-weight:700;font-stretch:var(--fst-label)}
.line__tag .ic{width:7px;height:11px}
.line__unit.is-switched b{animation:flash 240ms var(--ease-out)}
.line__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.line .step{display:grid;width:132px}
.line__total{font-family:var(--f-display);font-weight:700;font-size:18px;white-space:nowrap}
.line__off{color:var(--c-warn);font-weight:600}
.line__total--ask{font:600 var(--fs-ui)/1 var(--f-sans);color:var(--c-muted)}

/* wholesale nudge (+N), drawer lines and product page */
/* no overflow:hidden here: it would clip the ::before that makes the 36 px drawer nudge a 44 px target */
.nudge{position:relative;display:flex;align-items:center;gap:6px;width:100%;min-height:36px;padding:0 6px 0 10px;border-radius:var(--r-tag);background:var(--c-soft);font-size:var(--fs-sm);font-weight:600;font-stretch:var(--fst-label);text-align:left;isolation:isolate;transition:background-color var(--t-fast)}
.nudge::before{content:"";position:absolute;inset:-4px 0}
.nudge .ic{width:9px;height:13px}
.nudge__bar{position:absolute;inset:0 auto 0 0;z-index:-1;width:calc(var(--p,0) * 100%);max-width:100%;border-radius:inherit;background:var(--c-yellow);transition:width var(--t-slow) var(--ease-out)}
.nudge__t{flex:1;min-width:0;padding-block:6px}
.nudge__go{flex:none;height:26px;padding:0 9px;border-radius:5px;background:var(--c-ink);color:var(--c-yellow);display:flex;align-items:center;font-weight:750}
.nudge--done,.nudge:disabled{background:var(--c-yellow);cursor:default}
p.nudge--done{margin:0}
.nudge--done .nudge__go{display:none}
.nudge--lg{min-height:var(--ctl);font-size:var(--fs-ui)}
@media (hover:hover){.nudge:not(.nudge--done):not(:disabled):hover{background:var(--c-soft-2)}}

/* drawer totals */
.sum{display:grid;gap:6px;margin:0}
.sum:empty{display:none}
.sum__row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sum dt{font-size:var(--fs-ui);color:var(--c-muted);display:inline-flex;align-items:center;gap:6px}
.sum dd{margin:0;font-size:var(--fs-ui);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.sum__row--save dt,.sum__row--save dd{color:var(--c-ink);font-weight:650}
.sum__row--save dd{background:var(--c-yellow);padding:1px 6px;border-radius:var(--r-xs)}
.sum__row--save .ic{width:8px;height:12px}
.sum__row--total dt{color:var(--c-ink);font-weight:650;font-size:var(--fs-body)}
.sum__row--total dd{font-family:var(--f-display);font-weight:700;font-size:var(--fs-total);line-height:1}

/* mobile list bar (G5): only with a non-empty list, never on the product page, never from 960px */
.lbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:var(--z-listbar);height:var(--listbar);display:flex;align-items:center;gap:10px;padding:0 8px 0 10px;border-radius:var(--r-lg);background:var(--c-ink);color:var(--c-on-dark);box-shadow:0 16px 36px -14px rgba(0,0,0,.6);text-align:left;width:auto}
.lbar__ic{position:relative;flex:none;width:44px;height:44px;border-radius:var(--r-ctl);background:#1E1E1C;display:grid;place-items:center}
.lbar__ic .count{box-shadow:0 0 0 2px var(--c-ink)}
.lbar__tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lbar__tx small{font-size:var(--fs-micro);color:var(--c-on-dark-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbar__tx b{font:700 19px/1.1 var(--f-display);white-space:nowrap;overflow:hidden}
@media (max-width:359px){.lbar__tx b{font-size:16px}} /* R$ 3.355,20 fits next to Ver lista at 320 px */
.lbar__go{flex:none;height:48px;padding:0 16px;border-radius:var(--r-ctl);background:var(--c-yellow);color:var(--c-ink);display:inline-flex;align-items:center;gap:6px;font-weight:750;font-size:var(--fs-body)}
.lbar:active{transform:scale(.99)}
body.has-lbar{padding-bottom:calc(var(--listbar) + 20px + env(safe-area-inset-bottom))}
body[data-page="product"] .lbar{display:none!important}
@media (max-width:959px){
  body[data-page="product"]:has(.pdp__buy),body[data-page="product"]:has(.pdp__buy).has-lbar{padding-bottom:calc(var(--ctl-lg) + 21px + env(safe-area-inset-bottom))}
}
@media (min-width:960px){.lbar{display:none!important}body.has-lbar{padding-bottom:0}}

/* age gate (3.13) */
.gate{z-index:var(--z-gate);width:min(380px,calc(100% - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:26px;background:var(--c-surface);overflow:auto;box-shadow:var(--sh-pop)}
.gate[open]{animation:rise var(--t-slow) var(--ease-out)}
.gate:focus,.gate:focus-visible{outline:none;box-shadow:var(--sh-pop)}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.gate::backdrop{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.gate__ph{position:relative;aspect-ratio:16/9;background:var(--c-ink)}
.gate__ph img{width:100%;height:100%;object-fit:cover}
.gate__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 40%,rgba(10,10,10,.55) 100%)}
.gate__logo{position:relative;z-index:1;width:64px;height:64px;margin:-32px auto 0;box-shadow:0 0 0 4px var(--c-surface)}
.gate__bd{padding:16px 24px 22px;text-align:center}
.gate h2{font-size:24px;font-weight:750;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.gate p{color:var(--c-muted);margin-top:6px}
.gate__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.gate__btns .btn{padding:0 12px}
.gate small{display:block;margin-top:14px;font-size:var(--fs-micro);color:var(--c-muted)}

/* footer (3.14): vertical spacing with padding-block only */
.ft{flex:none;margin-top:var(--s-8);background:var(--c-ink);color:var(--c-on-dark);padding-block:36px calc(24px + env(safe-area-inset-bottom))}
.ft__in{display:grid;gap:28px}
.ft__logo{height:54px;width:auto}
.ft__tag{margin-top:12px;color:var(--c-on-dark-2);font-size:var(--fs-ui);max-width:28ch}
.ft h2{font-size:var(--fs-micro);font-weight:700;font-stretch:var(--fst-label);letter-spacing:.11em;text-transform:uppercase;color:var(--c-on-dark-2);margin-bottom:12px}
.ft__li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-ui);margin-bottom:10px}
.ft__li .ic{width:18px;height:18px;color:var(--c-yellow);margin-top:1px}
.ft__li small{display:block;color:var(--c-on-dark-2);font-size:var(--fs-sm)}
.ft__li a{text-decoration:underline;text-underline-offset:3px}
.ft__li small a{display:inline-block;padding-block:12.6px;margin-block:-12.6px} /* 44px hit area (13px x 1.45 + 25.2), same layout */
.ft__also{display:flex;align-items:center;gap:12px;min-height:var(--ctl);padding-left:14px;font-size:var(--fs-ui);color:var(--c-on-dark-2)}
.ft__also .ic{color:var(--c-yellow)}
.ft__cta{display:grid;gap:8px;align-content:start}
.app{display:flex;align-items:center;gap:12px;min-height:var(--ctl-lg);padding:0 16px 0 14px;border-radius:var(--r-ctl);box-shadow:inset 0 0 0 var(--bw) rgba(255,255,255,.24);font-weight:650;transition:box-shadow var(--t-fast)}
.app .ic{color:var(--c-yellow)}
.app small{margin-left:auto;font-size:var(--fs-micro);font-weight:600;color:var(--c-on-dark-2)}
@media (hover:hover){a.app:hover{box-shadow:inset 0 0 0 var(--bw) var(--c-yellow)}.ft__nav a:hover,.ft__li a:hover{text-decoration-thickness:2px}}
/* links start at the top of their column (a wrapping flex row would stretch them to the column height) */
.ft__nav{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;gap:4px 18px}
.ft__nav a{display:inline-flex;align-items:center;min-height:var(--ctl);font-size:var(--fs-ui);text-decoration:underline;text-underline-offset:3px}
.ft__legal{position:relative;margin-top:28px;padding-block:18px 0;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;font-size:var(--fs-sm);color:var(--c-on-dark-2)}
/* the divider spans the content column, not the .wrap padding (QA r3) */
.ft__legal::before{content:"";position:absolute;top:0;left:var(--g);right:var(--g);border-top:var(--bw) solid rgba(255,255,255,.14)}
.ft__credit{flex-basis:100%;font-size:var(--fs-micro)}
.ft__credit a{text-decoration:underline;text-underline-offset:2px}
.ft__legal strong{color:var(--c-on-dark);font-weight:600}
.ft--min .ft__legal{margin-top:0;padding-block:0}
.ft--min .ft__legal::before{content:none}
.ft--min .ft__credit{display:none}
@media (min-width:960px){.ft{padding-block:48px 28px}.ft__in{grid-template-columns:1.2fr 1.3fr 1fr auto;gap:40px}.ft__nav{margin-top:-13px}} /* link text on the "Loja" line */

/* toast (3.15): 960px and up only; mobile uses the list bar.
   list.js forces inline display:flex for notes (demo "WhatsApp em configuracao") so they show at every width. */
.toast{position:fixed;right:var(--g);top:calc(var(--hdr) + 12px);z-index:var(--z-toast);display:none;align-items:center;gap:14px;max-width:360px;padding:8px 8px 8px 16px;border-radius:var(--r-card);background:var(--c-ink);color:var(--c-on-dark);font-size:var(--fs-ui);font-weight:550;box-shadow:0 14px 34px -12px rgba(0,0,0,.45);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity var(--t-base),transform var(--t-base) var(--ease-out)}
@media (min-width:960px){.toast{display:flex}}
/* notes below 960 px (list.js forces display:flex): at the bottom, above the product page bar and the list bar,
   never over the price at the top of the product page */
@media (max-width:959px){.toast{top:auto;bottom:calc(var(--ctl-lg) + 33px + env(safe-area-inset-bottom));left:var(--g);right:var(--g);max-width:none;transform:translateY(8px)}}
.toast:not(.is-on){visibility:hidden;transition:opacity var(--t-base),transform var(--t-base) var(--ease-out),visibility 0s linear var(--t-base)} /* never an invisible tab stop */
.toast.is-on{opacity:1;transform:none;pointer-events:auto}
.toast .ic{width:18px;height:18px;color:var(--c-yellow)}
.toast span{min-width:0;padding-block:10px}
.toast:has(button[hidden]){padding-right:16px}
.toast button{flex:none;height:var(--ctl);padding:0 14px;border-radius:var(--r-ctl);background:var(--c-yellow);color:var(--c-ink);font-weight:700;transition:background-color var(--t-fast)}
.toast :focus-visible{outline-color:var(--c-yellow);box-shadow:none}
@media (hover:hover){.toast button:hover{background:var(--c-yellow-hi)}}

/* skeleton (3.16) */
.sk{background:linear-gradient(90deg,#EAE9E2 0%,#F5F4EF 50%,#EAE9E2 100%);background-size:200% 100%;animation:shimmer 1.2s linear infinite;border-radius:var(--r-sm)}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
.sk-card{background:var(--c-surface);border-radius:var(--r-card);padding:6px;display:grid;gap:8px}
.sk-card .sk:nth-child(1){aspect-ratio:1;border-radius:var(--r-tile)}
.sk-card .sk:nth-child(2){height:12px;width:85%}
.sk-card .sk:nth-child(3){height:12px;width:55%}
.sk-card .sk:nth-child(4){height:56px;width:62%;border-radius:var(--r-tag)}
.sk-card .sk:nth-child(5){height:var(--ctl);border-radius:var(--r-ctl)}
@media (min-width:960px){.sk-card{padding:8px}}

/* grid entrance (JS adds .is-anim on result swaps, max 12 items) */
.is-anim>:nth-child(-n+12){animation:fadeUp var(--t-base) var(--ease-out) both}
.is-anim>:nth-child(2){animation-delay:24ms}.is-anim>:nth-child(3){animation-delay:48ms}.is-anim>:nth-child(4){animation-delay:72ms}.is-anim>:nth-child(5){animation-delay:96ms}.is-anim>:nth-child(6){animation-delay:120ms}.is-anim>:nth-child(7){animation-delay:144ms}.is-anim>:nth-child(8){animation-delay:168ms}.is-anim>:nth-child(9){animation-delay:192ms}.is-anim>:nth-child(10){animation-delay:216ms}.is-anim>:nth-child(11){animation-delay:240ms}.is-anim>:nth-child(12){animation-delay:264ms}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* buttons and shared bits (3.17) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--ctl-lg);padding:0 20px;border-radius:var(--r-ctl);font-weight:700;font-size:15.5px;white-space:nowrap;transition:background-color var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.btn:active{transform:scale(.98)}
.btn--pri{background:var(--c-ink);color:var(--c-on-dark)}
.btn--pri .ic{color:var(--c-yellow)}
.btn--y{background:var(--c-yellow);color:var(--c-ink);box-shadow:inset 0 0 0 var(--bw-strong) var(--c-ink)}
.btn--line{background:var(--c-surface);color:var(--c-ink);box-shadow:inset 0 0 0 var(--bw-strong) var(--c-ink)}
.btn--sm{height:var(--ctl);font-size:var(--fs-ui);padding:0 16px}
.btn--block{display:flex;width:100%}
@media (hover:hover){.btn--pri:hover{background:#26251F}.btn--y:hover{background:var(--c-yellow-hi)}.btn--line:hover{background:var(--c-soft)}}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;cursor:not-allowed}
.btn__sum{font-family:var(--f-display);font-weight:700;color:var(--c-yellow)}
.linkbtn{display:inline-flex;align-items:center;min-height:var(--ctl);padding:0 4px;font-size:var(--fs-ui);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.linkbtn:hover{text-decoration-thickness:2px}}
.xbtn{flex:none;width:var(--ctl);height:var(--ctl);border-radius:50%;display:grid;place-items:center;margin-left:auto;transition:background-color var(--t-fast)}
@media (hover:hover){.xbtn:hover{background:var(--c-soft)}}
.more{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:var(--s-6)}
.more__n{font-size:var(--fs-micro);color:var(--c-muted)}
.more__n:empty{display:none}
/* WhatsApp demo mode (<html data-whatsapp-demo="1">): CTAs keep their real look for layout review,
   href="#whatsapp" + aria-disabled="true"; JS shows "WhatsApp em configuracao" on click. */
html[data-whatsapp-demo] a[href="#whatsapp"][aria-disabled="true"]{opacity:1;cursor:not-allowed}

/* other pages (3.18): /como-comprar/ (how), /privacidade/ (privacy), /menor/ (underage), /404 */
.page{padding-block:var(--s-5) var(--s-2)}
.page__t{font-family:var(--f-display);font-weight:700;font-size:var(--fs-h1);line-height:1.1;overflow-wrap:anywhere;text-wrap:balance}
.page__lead{margin-top:var(--s-2);max-width:52ch;color:var(--c-muted);text-wrap:pretty}
.prose{max-width:680px}
.prose>*+*{margin-top:var(--s-3)}
.prose>h2{margin-top:var(--s-6);font-size:var(--fs-h3);font-weight:700;line-height:1.25}
.prose ul{list-style:disc;padding-left:1.25em}
.prose a{text-decoration:underline;text-underline-offset:3px}
.how__steps{display:grid;gap:var(--gap);margin-top:var(--s-5)}
.how__step{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:2px 14px;padding:16px;background:var(--c-surface);border-radius:var(--r-card);box-shadow:var(--sh-card)}
.how__ic{grid-row:span 2;width:48px;height:48px;border-radius:var(--r-ctl);background:var(--c-yellow);color:var(--c-ink);box-shadow:inset 0 0 0 var(--bw-strong) var(--c-ink);display:grid;place-items:center}
.how__n{position:absolute;top:10px;left:10px;min-width:22px;height:22px;padding:0 5px;border-radius:var(--r-pill);background:var(--c-ink);color:var(--c-on-dark);font:700 12px/22px var(--f-display);text-align:center}
.how__step h2{font-size:var(--fs-h3);font-weight:700;line-height:1.25}
.how__step p{color:var(--c-muted);font-size:var(--fs-ui)}
.how__box{display:grid;gap:12px;justify-items:start;margin-top:var(--s-6);padding:20px;background:var(--c-surface);border-radius:var(--r-card);box-shadow:var(--sh-card)}
.how__box h2{font-family:var(--f-display);font-weight:700;font-size:var(--fs-sec);line-height:1.1}
.how__box p{color:var(--c-ink-2);max-width:56ch}
.how__box--dark{background:var(--c-ink);color:var(--c-on-dark);justify-items:stretch}
.how__box--dark .ft__cta{max-width:420px}
@media (min-width:640px){.how__steps{grid-template-columns:repeat(3,minmax(0,1fr))}.how__step{grid-template-columns:minmax(0,1fr);gap:10px;padding:20px}.how__ic{grid-row:auto}.how__n{top:14px;left:14px}.how__box{padding:24px 28px}}
.minor{display:grid;justify-items:center;align-content:center;gap:14px;max-width:440px;padding-block:56px 40px;text-align:center}
.minor__logo{width:96px;height:auto}
.minor .page__lead{text-wrap:balance}
.how__cta{margin-top:var(--s-6)}
.search--lg{gap:8px;max-width:560px;margin-top:var(--s-4);margin-left:0}
.how__ex{display:grid;gap:8px;justify-items:start}
.how__box .how__exn{font-size:var(--fs-sm);color:var(--c-muted)}
.search--lg .search__in{height:var(--ctl-lg);padding-right:12px;background:var(--c-surface);border-color:var(--c-field)}
.search--lg .btn{flex:none;height:var(--ctl-lg)}

/* low screens (zoom 400%, phone in landscape): the header scrolls away and the fixed bars get thinner, so the
   content keeps most of the height (WCAG 1.4.10, QA r3) */
@media (max-height:500px){
  :root{--listbar:48px}
  html{scroll-padding-top:12px}
  .hdr{position:relative}
  .lbar{bottom:calc(6px + env(safe-area-inset-bottom))}
  .lbar__ic{width:36px;height:36px}
  .lbar__go{height:38px}
}
@media (max-height:500px) and (max-width:959px){
  html:has(body[data-page="product"] .pdp__buy){scroll-padding-bottom:calc(var(--ctl) + 21px + env(safe-area-inset-bottom))}
  .pdp__buy{padding-block:6px calc(6px + env(safe-area-inset-bottom))}
  .step--lg,.step--lg .step__b,.step--lg .step__n,.pdp__buy .btn{height:var(--ctl)}
  body[data-page="product"]:has(.pdp__buy),body[data-page="product"]:has(.pdp__buy).has-lbar{padding-bottom:calc(var(--ctl) + 13px + env(safe-area-inset-bottom))}
}

/* Windows contrast themes: selected states and button edges drawn with system colors (backgrounds and inset
   shadows are dropped there) (QA r3) */
@media (forced-colors:active){
  .chip[aria-current],.filters__opt:has(input:checked),a.filters__opt[aria-current],.qs button[aria-pressed="true"],.vt a[aria-current]{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .filters__opt:has(input:checked) .filters__n,a.filters__opt[aria-current] .filters__n,.qs button[aria-pressed="true"] .ic{color:HighlightText}
  .btn,.add,.qs button,.hbtn,.app,.nudge,.empty__wa,.step,.fbtn,.pill,.lbar__go,.toast button,.vt a{border:1px solid ButtonText}
  .search__in:focus{outline:2px solid Highlight}
}

/* 4. reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .sk{animation:none}
  .is-anim>*{animation:none!important}
  dialog::backdrop{animation:none} /* the universal selector does not reach ::backdrop */
}
@media (prefers-reduced-motion:reduce) and (hover:hover){
  .card:hover,.shot:hover img{transform:none}
}