/* ==========================================================================
   TOGOCAVIAR — luxury resale
   ==========================================================================
   The name is the concept. Togo is Hermès' grained calfskin; Caviar is Chanel's
   pebbled leather. Both are GRAINS — the thing a connoisseur reads with a
   thumb. So the site's signature is texture and lot-numbered connoisseurship,
   not another shiny storefront.

   Structural rule (Codex consult, and the reason this isn't just "black
   Shopify"): the CHROME is noir, the MERCHANDISE sits on warm ivory. Resale
   photography is shot on white seamless; drop it on black and you get grey
   halos, and cream leather or a champagne dial stops reading true. In resale
   the photograph IS the condition report, so it gets neutral gallery light.
   Noir stays dominant by area and by frame, never under the goods.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,700&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --noir:#0B0B0C;          /* page shell            */
  --noir-2:#141416;        /* raised chrome         */
  --noir-3:#1E1E22;        /* hairline fills        */
  --ivory:#F2EFE8;         /* the gallery slab      */
  --paper:#FFFFFF;         /* product card          */
  --orange:#F26B21;        /* Hermès accent — fills, on dark only */
  --orange-deep:#B4470F;   /* same accent as TEXT on light: 2.6:1 fails, this passes */
  --ink:#17171A;
  --dim:rgba(255,255,255,.60);
  --dimmer:rgba(255,255,255,.40);
  --hair-d:rgba(255,255,255,.13);
  --hair-l:#E3DED2;
  --ok:#3E7A54;
  --r:2px;                 /* almost none. rounding reads high-street, not house */
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,4vw,56px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--noir);color:#fff;
  font-family:Archivo,system-ui,sans-serif;font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---- type ------------------------------------------------------------- */
.disp{font-family:'Bodoni Moda',Georgia,serif;font-weight:400;line-height:1.02;
  letter-spacing:-.015em}
/* balance evens the rag instead of leaving one word stranded on the last line,
   and the ch ceiling stops a wide viewport running the headline into a strip */
h1.disp{font-size:clamp(38px,5.4vw,74px);text-wrap:balance;max-width:16ch}
h2.disp{font-size:clamp(30px,4.2vw,54px)}
h3.disp{font-size:clamp(20px,2.4vw,28px)}
.lot{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--orange)}
.muted{color:var(--dim)}
.wrap{width:100%;max-width:1460px;margin-inline:auto;padding-inline:var(--pad)}

/* Leather grain. The name is two leather grains, so the texture is the brand
   mark, not decoration. feTurbulence, no image request. */
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.30;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E")}

/* ---- announcement: the enforcement mechanism, not a badge -------------- */
.announce{background:var(--orange);color:#1A0A02;position:relative;z-index:5}
.announce .wrap{display:flex;gap:14px;align-items:center;justify-content:center;
  min-height:38px;flex-wrap:wrap;text-align:center}
.announce p{margin:0;font-size:12.5px;font-weight:500;letter-spacing:.01em}
.announce a{text-decoration:underline;text-underline-offset:3px;font-weight:700}

/* ---- header ----------------------------------------------------------- */
/* Was translucent + backdrop-filter. Over a near-black page a blur buys nothing
   visible and carries the glassmorphism tell — a house like this should have a
   solid door. */
header{position:sticky;top:0;z-index:40;background:var(--noir);
  border-bottom:1px solid var(--hair-d)}
.nav{display:flex;align-items:center;gap:28px;min-height:70px}
.brand{font-family:'Bodoni Moda',serif;font-size:23px;letter-spacing:.01em;
  white-space:nowrap;margin-right:6px}
.brand b{font-weight:400}
.brand span{color:var(--orange)}
.navlinks{display:flex;gap:26px;list-style:none;margin:0;padding:0;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.navlinks a{padding:8px 0;display:block;position:relative;color:var(--dim);
  transition:color .2s var(--ease)}
.navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;
  height:1px;background:var(--orange);transition:right .32s var(--ease)}
.navlinks a:hover,.navlinks a[aria-current]{color:#fff}
.navlinks a:hover::after,.navlinks a[aria-current]::after{right:0}
.navtools{margin-left:auto;display:flex;align-items:center;gap:6px}
.icbtn{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r);
  color:var(--dim);transition:color .2s,background .2s}
.icbtn:hover{color:#fff;background:var(--noir-3)}
.cartbtn{position:relative}
.cartcount{position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;
  background:var(--orange);color:#1A0A02;border-radius:99px;font-size:10px;
  font-weight:700;display:grid;place-items:center;line-height:1}
.cartcount[hidden]{display:none}
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.burger span{display:block;width:22px;height:2px;background:#fff;
  transition:transform .26s var(--ease),opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---- hero ------------------------------------------------------------- */
.hero{position:relative;border-bottom:1px solid var(--hair-d);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,72px);
  align-items:center;padding-block:clamp(56px,8vw,116px)}
.hero-copy p.lead{font-size:clamp(15px,1.3vw,17px);color:var(--dim);max-width:46ch;
  margin:22px 0 32px}
.hero h1 em{font-style:italic;color:var(--orange)}
/* The hero plate is no longer a white rectangle pasted onto black. Codex's rule
   — merchandise on neutral light ground — is right for the GRID, where the
   photograph is the condition report and the buyer is judging colour and wear.
   The hero is not an inspection surface, it is a desire surface, and applying
   an inspection rule to it produced a white box floating in the dark.
   The photograph is now lit natively on black and falls off to near-black at
   every edge, so it bleeds into the page instead of sitting in a frame. The
   light in this section comes from the photograph, not from a CSS gradient. */
.hero-figure{position:relative;aspect-ratio:4/5;background:var(--noir);
  display:grid;place-items:center;overflow:hidden}
.hero-figure img{width:100%;height:100%;object-fit:cover}

/* Measured, not eyeballed: the page renders rgb(12,12,13) and the photograph's
   own black is rgb(0,0,0), so the plate's edge showed as a faint rectangle even
   though both read as "black". Patching the colours would be fragile — instead
   the plate bleeds to the top, right and bottom of the section so those three
   boundaries stop existing, and only the remaining left edge is masked away.
   The mask sits on the IMG, not the figure, so the lot plate is not faded with
   it — and because the parallax img is width:100% its left edge still aligns
   with the frame. */
@media(min-width:901px){
  .hero{min-height:min(86vh,860px);display:grid;align-items:center}
  .hero .wrap{grid-template-columns:1fr}
  /* 54% let the copy box run 47px into the image's fade zone. Harmless at this
     width because the mask is still transparent there, but it only stays
     harmless by luck — keep the two boxes genuinely disjoint. */
  .hero-copy{max-width:min(46%,600px)}
  .hero-figure{position:absolute;top:0;right:0;bottom:0;left:auto;
    width:min(50%,780px);aspect-ratio:auto;height:auto}
  .hero-figure img{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 20%);
                           mask-image:linear-gradient(to right,transparent 0,#000 20%)}
}
/* the lot plate — auction-house provenance, the detail a theme never has */
.plate{position:absolute;left:0;bottom:0;background:var(--noir);color:#fff;
  padding:14px 18px;border-top:2px solid var(--orange);max-width:78%}
.plate .lot{color:var(--orange);display:block;margin-bottom:4px}
.plate strong{display:block;font-weight:600;font-size:14px}
.plate span.p{color:var(--dim);font-size:13px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 30px;border-radius:var(--r);font-weight:600;
  font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;
  transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s}
.btn-p{background:var(--orange);color:#1A0A02}
.btn-p:hover{background:#fff}
.btn-g{border:1px solid var(--hair-d);color:#fff}
.btn-g:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* ---- trust strip ------------------------------------------------------ */
.trust{border-bottom:1px solid var(--hair-d);background:var(--noir-2)}
.trust ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr)}
.trust li{padding:26px 22px;border-right:1px solid var(--hair-d)}
.trust li:last-child{border-right:0}
.trust b{display:block;font-size:13px;letter-spacing:.04em;margin-bottom:4px}
.trust p{margin:0;font-size:12.5px;color:var(--dim);line-height:1.5}

/* ---- section furniture ------------------------------------------------ */
.sec{padding-block:clamp(52px,7vw,92px)}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:34px;flex-wrap:wrap}
.sechead p{margin:10px 0 0;color:var(--dim);max-width:52ch;font-size:14px}
.link-more{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--orange);border-bottom:1px solid transparent;
  padding-bottom:3px;transition:border-color .2s}
.link-more:hover{border-color:var(--orange)}

/* ---- category tiles --------------------------------------------------- */
/* Cut-outs floating in the dark, not white photographs with a scrim over them.
   The pool of light behind each subject is the tile's only "background" — it
   gives the darkness a source, which is what separates a lit room from a black
   rectangle. No authored ground shadow: a fake contact shadow is exactly what
   gives a composite away, so these float rather than pretend to stand. */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.cat{position:relative;aspect-ratio:3/4;overflow:hidden;display:block;
  background:
    radial-gradient(62% 46% at 50% 44%, rgba(242,107,33,.16), transparent 70%),
    radial-gradient(90% 70% at 50% 40%, #1B1B1F, var(--noir) 72%)}
.cat img{width:100%;height:100%;object-fit:contain;
  transition:transform 1s var(--ease);
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.65))}
.cat:hover img{transform:scale(1.05) translateY(-6px)}
.cat figcaption{position:absolute;inset:auto 0 0 0;padding:24px;
  background:linear-gradient(to top,rgba(11,11,12,.95) 40%,transparent)}
.cat h3{margin:0;font-family:'Bodoni Moda',serif;font-weight:400;font-size:26px}
.cat span{font-size:12px;color:var(--dim);letter-spacing:.06em}

/* ---- THE GALLERY SLAB — merchandise on ivory, never on black ---------- */
.slab{background:var(--ivory);color:var(--ink);position:relative;z-index:2}
.slab .sechead p{color:#5A564D}
.slab .link-more{color:var(--orange-deep)}
.slab .link-more:hover{border-color:var(--orange-deep)}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,26px)}
.card{background:var(--paper);border:1px solid var(--hair-l);position:relative;
  display:flex;flex-direction:column;transition:border-color .25s,transform .25s var(--ease)}
.card:hover{border-color:var(--ink);transform:translateY(-3px)}
.card .shot{aspect-ratio:1;overflow:hidden;background:#fff;position:relative}
.card .shot img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card:hover .shot img{transform:scale(1.045)}
.card .body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:5px;flex:1}
.card .brand-l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:#6B665C}
.card .name{font-size:14px;font-weight:500;line-height:1.35;color:var(--ink)}
.card .price{margin-top:auto;padding-top:10px;font-size:16px;font-weight:600;
  font-family:'Bodoni Moda',serif}
.card .was{font-size:12.5px;color:#7C776C;text-decoration:line-through;
  margin-left:8px;font-family:Archivo,sans-serif;font-weight:400}
.card .add{position:absolute;left:10px;right:10px;bottom:10px;background:var(--ink);
  color:#fff;min-height:44px;border-radius:var(--r);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;opacity:0;transform:translateY(6px);
  transition:opacity .22s,transform .22s var(--ease);display:grid;place-items:center}
.card .shot:hover .add,.card .add:focus-visible{opacity:1;transform:none}
.card .add:hover{background:var(--orange-deep)}

/* condition grade — the resale vocabulary, colour-coded but never colour-only */
.grade{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:4px 8px;border:1px solid currentColor;border-radius:var(--r);width:max-content}
.g-pristine{color:#1F6B3E}
.g-excellent{color:#2F6D8C}
.g-verygood{color:#7A5A16}
.g-good{color:#6B665C}
.sold{position:absolute;top:10px;left:10px;background:var(--ink);color:#fff;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:5px 9px}

/* ---- condition scale explainer ---------------------------------------- */
.scale{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  border:1px solid var(--hair-d)}
.scale div{padding:22px;border-right:1px solid var(--hair-d)}
.scale div:last-child{border-right:0}
.scale h4{margin:0 0 8px;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.scale p{margin:0;font-size:13px;color:var(--dim);line-height:1.55}
.scale .bar{height:3px;margin-bottom:16px;background:var(--noir-3)}
.scale div:nth-child(1) .bar{background:var(--orange)}
.scale div:nth-child(2) .bar{background:rgba(242,107,33,.72)}
.scale div:nth-child(3) .bar{background:rgba(242,107,33,.46)}
.scale div:nth-child(4) .bar{background:rgba(242,107,33,.24)}

/* ---- editorial: the name story ---------------------------------------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,72px);
  align-items:center}
.story .txt p{color:var(--dim);font-size:15px;max-width:50ch}
.story .txt p b{color:#fff;font-weight:500}
.story figure{margin:0;aspect-ratio:5/4;overflow:hidden;background:var(--noir-3)}
.story figure img{width:100%;height:100%;object-fit:cover}

/* ---- newsletter ------------------------------------------------------- */
.news{border-top:1px solid var(--hair-d);background:var(--noir-2)}
.news .wrap{padding-block:clamp(44px,6vw,72px);text-align:center}
.news form{display:flex;gap:10px;max-width:520px;margin:26px auto 0;flex-wrap:wrap}
.news input{flex:1;min-width:220px;min-height:52px;padding:0 18px;background:var(--noir);
  border:1px solid var(--hair-d);color:#fff;border-radius:var(--r)}
.news input::placeholder{color:var(--dimmer)}
.news small{display:block;margin-top:14px;color:var(--dimmer);font-size:12px}

/* ---- footer ----------------------------------------------------------- */
footer{border-top:1px solid var(--hair-d);padding-block:56px 34px;position:relative;z-index:2}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:36px}
footer h5{margin:0 0 14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dimmer);font-weight:600}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:13.5px}
footer ul a{color:var(--dim);transition:color .2s}
footer ul a:hover{color:var(--orange)}
.fbot{margin-top:44px;padding-top:22px;border-top:1px solid var(--hair-d);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12px;color:var(--dimmer)}

/* ---- cart drawer ------------------------------------------------------ */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.62);opacity:0;
  pointer-events:none;transition:opacity .3s;z-index:60}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);
  background:var(--noir-2);border-left:1px solid var(--hair-d);z-index:70;
  transform:translateX(100%);transition:transform .38s var(--ease);
  display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer header{position:static;background:none;backdrop-filter:none;
  display:flex;align-items:center;justify-content:space-between;padding:20px 22px;
  border-bottom:1px solid var(--hair-d)}
.drawer h3{margin:0;font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.dlist{flex:1;overflow-y:auto;padding:8px 22px}
.ditem{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:16px 0;
  border-bottom:1px solid var(--hair-d);align-items:center}
.ditem img{width:64px;height:64px;object-fit:cover;background:var(--ivory)}
.ditem .n{font-size:13px;line-height:1.4}
.ditem .b{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dimmer)}
.ditem .pr{font-size:14px;font-family:'Bodoni Moda',serif}
.rm{font-size:11px;color:var(--dimmer);text-decoration:underline;
  text-underline-offset:3px;margin-top:5px;text-align:left}
.rm:hover{color:var(--orange)}
.dfoot{padding:20px 22px;border-top:1px solid var(--hair-d)}
.drow{display:flex;justify-content:space-between;margin-bottom:6px;font-size:13.5px}
.drow.tot{font-size:19px;font-family:'Bodoni Moda',serif;margin:12px 0 16px}
.dfoot .btn{width:100%}
.empty{padding:60px 22px;text-align:center;color:var(--dim);font-size:14px}

/* ---- shop page: filters ----------------------------------------------- */
.shophead{border-bottom:1px solid var(--hair-d);padding-block:clamp(34px,5vw,62px)}
.shoplayout{display:grid;grid-template-columns:236px 1fr;gap:clamp(22px,3vw,44px);
  align-items:start}
.filters{position:sticky;top:92px}
.fgroup{border-bottom:1px solid var(--hair-l);padding:18px 0}
.fgroup:first-child{padding-top:0}
.fgroup h4{margin:0 0 12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#6B665C;font-weight:700}
.fopt{display:flex;align-items:center;gap:10px;min-height:34px;font-size:13.5px;
  cursor:pointer;color:#3A372F}
.fopt input{accent-color:var(--orange-deep);width:16px;height:16px}
.fopt .ct{margin-left:auto;font-size:11.5px;color:#8A857A}
.toolbar{display:flex;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.toolbar .count{font-size:13px;color:#5A564D}
.toolbar select{margin-left:auto;min-height:44px;padding:0 14px;background:#fff;
  border:1px solid var(--hair-l);color:var(--ink);border-radius:var(--r)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--hair-l);padding:7px 12px;font-size:12.5px;border-radius:var(--r)}
.chip button{color:#8A857A;font-size:15px;line-height:1}
.chip button:hover{color:var(--orange-deep)}
.nores{padding:70px 0;text-align:center;color:#5A564D}
.filtertoggle{display:none}

/* ---- product detail --------------------------------------------------- */
.pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);
  align-items:start;padding-block:clamp(30px,4vw,56px)}
.gal{display:grid;gap:10px}
.gal .main{aspect-ratio:1;background:var(--paper);overflow:hidden}
.gal .main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.thumbs button{aspect-ratio:1;background:var(--paper);overflow:hidden;
  border:1px solid transparent;transition:border-color .2s}
.thumbs button[aria-current="true"]{border-color:var(--orange)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.pinfo .brand-l{font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--orange)}
.pinfo h1{font-family:'Bodoni Moda',serif;font-weight:400;font-size:clamp(26px,3.4vw,40px);
  margin:10px 0 14px;line-height:1.12}
.pprice{display:flex;align-items:baseline;gap:12px;margin:18px 0}
.pprice .now{font-family:'Bodoni Moda',serif;font-size:30px}
.pprice .rrp{color:var(--dimmer);text-decoration:line-through;font-size:15px}
.pprice .save{color:var(--orange);font-size:12.5px;font-weight:600;letter-spacing:.06em}
.spec{width:100%;border-collapse:collapse;margin:22px 0;font-size:13.5px}
.spec th,.spec td{text-align:left;padding:11px 0;border-bottom:1px solid var(--hair-d);
  vertical-align:top}
.spec th{color:var(--dimmer);font-weight:500;width:38%;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding-top:14px}
.report{background:var(--noir-2);border:1px solid var(--hair-d);padding:20px;margin:24px 0}
.report h4{margin:0 0 12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dimmer)}
.report ul{margin:0;padding-left:18px;display:grid;gap:7px;font-size:13.5px;color:var(--dim)}
.report .grade{margin-bottom:14px}
.auth{display:flex;gap:14px;align-items:flex-start;padding:18px;
  border:1px solid var(--orange);background:rgba(242,107,33,.07);margin:22px 0}
.auth svg{flex-shrink:0;margin-top:2px}
.auth p{margin:0;font-size:13px;color:var(--dim);line-height:1.55}
.auth b{color:#fff;display:block;font-size:13.5px;margin-bottom:4px}

/* ---- responsive ------------------------------------------------------- */
@media(max-width:1080px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .trust ul{grid-template-columns:repeat(2,1fr)}
  .trust li:nth-child(2){border-right:0}
  .trust li:nth-child(1),.trust li:nth-child(2){border-bottom:1px solid var(--hair-d)}
  .scale{grid-template-columns:repeat(2,1fr)}
  .scale div:nth-child(2){border-right:0}
}
@media(max-width:900px){
  .navlinks{display:none}
  .burger{display:flex}
  .hero .wrap,.story,.pdp{grid-template-columns:1fr}
  .hero-figure{order:-1;aspect-ratio:1}
  .shoplayout{grid-template-columns:1fr}
  .filters{position:static;display:none;background:#fff;border:1px solid var(--hair-l);
    padding:18px;margin-bottom:20px}
  .filters.on{display:block}
  .filtertoggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;
    padding:0 16px;border:1px solid var(--hair-l);background:#fff;color:var(--ink);
    font-size:13px;font-weight:600;border-radius:var(--r)}
  /* mobile nav sheet */
  .navlinks.open{display:grid;position:absolute;top:100%;left:0;right:0;
    background:var(--noir-2);border-bottom:1px solid var(--hair-d);
    padding:10px var(--pad) 22px;gap:0}
  .navlinks.open li{border-bottom:1px solid var(--hair-d)}
  .navlinks.open a{padding:15px 0;font-size:15px;color:#fff}
}
@media(max-width:660px){
  .grid,.cats{grid-template-columns:repeat(2,1fr)}
  .cats{gap:2px}
  .cat{aspect-ratio:4/5}
  .fgrid{grid-template-columns:1fr 1fr}
  .fgrid > div:first-child{grid-column:1/-1}
  .card .add{opacity:1;transform:none;position:static;margin:12px 16px 16px}
  .thumbs{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:420px){
  .grid{grid-template-columns:1fr}
  .scale{grid-template-columns:1fr}
  .scale div{border-right:0;border-bottom:1px solid var(--hair-d)}
}
/* 360px overflowed by 13px: the wordmark plus FOUR 44px icon buttons need
   324px and only 320px exists. Search and account both live in the menu on
   small screens, so they come out of the bar rather than shrinking the tap
   targets below 44px — a 40px button is a worse fix than one fewer button. */
@media(max-width:400px){
  :root{--pad:16px}
  .brand{font-size:20px}
  .navtools .icbtn[aria-label="Search"],
  .navtools .icbtn[aria-label="Account"]{display:none}
  .nav{gap:12px}
}
/* Footer and list links sat at ~30px of effective height. Inline links inside a
   sentence are exempt from the 44px rule; stacked navigation links are not. */
/* 13.5px x 1.6 line-height + 22px padding = 43.6px. Four tenths short of the
   rule is still short of the rule. */
footer ul a,.navlinks.open a{display:block;padding-block:12px}
footer ul{gap:0}
.link-more{display:inline-block;padding-block:12px}
/* left:-9999px still participates in layout in some engines; clip is inert. */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   MOTION
   --------------------------------------------------------------------------
   Restraint is the brief. This is a shop, not a scroll story — motion must
   never stand between someone and the product. Reveals fire once, run ~520ms,
   and the grid is legible the instant it lands.
   ========================================================================== */

.rv{opacity:0;transform:translate3d(0,18px,0);will-change:transform;
    transition:opacity .52s var(--ease),transform .52s var(--ease)}
.rv.in{opacity:1;transform:translate3d(0,0,0)}
.rv.done{will-change:auto}

/* .rv.in and .card:hover are both (0,2,0), so the later rule would win and the
   hover lift would silently die. One extra class settles it. */
.grid .card:hover{transform:translateY(-3px)}

/* Hero image parallax — ParallaxImage_prod's geometry, transcribed. The frame
   is fixed and the media inside it drifts; the media is oversized by exactly
   the parallax amount and inset by half, so travel of ±(N/200)·h can never
   expose an edge. Bounded by construction. */
.pxi > img{position:absolute;left:0;width:100%;
  top:calc(var(--pa) * -0.5%);height:calc(100% + var(--pa) * 1%);
  object-fit:cover;will-change:transform;backface-visibility:hidden}

/* Cart badge acknowledges the add. Feedback, not decoration — without it the
   drawer opening is the only confirmation, and that is easy to miss. */
@keyframes pop{0%{transform:scale(1)}42%{transform:scale(1.55)}100%{transform:scale(1)}}
.cartcount.bump{animation:pop .42s var(--ease)}

/* Load-in for the hero only. Below the fold is IntersectionObserver's job. */
@keyframes rise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
.hero-copy > *{animation:rise .72s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms)}
.hero-figure{animation:rise .9s var(--ease) both;animation-delay:120ms}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .pxi > img{position:static;height:100%;transform:none!important}
  .hero-copy > *,.hero-figure{animation:none}
  .cartcount.bump{animation:none}
}