/* SHOKH — shared chrome + collection/lookbook styles
   Tokens mirror brand/design-tokens.css. Palette rules: no gold in UI,
   no pure black, cherry once per view. */

:root{
  --rosemilk:#FBF1F2; --petal:#F3D7DD; --cherry:#C4123F; --maroon:#7A1F2B;
  --blackcherry:#3D0C15; --roselight:#F4A7BB;
  --hairline:rgba(61,12,21,.16); --ink-soft:rgba(61,12,21,.68);
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--rosemilk);color:var(--blackcherry);
  font-family:"Instrument Sans",system-ui,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--cherry);outline-offset:3px}
.serif{font-family:"Fraunces",serif}
.urdu{font-family:"Gulzar",serif;line-height:1.5}
.mono{font-family:ui-monospace,Menlo,monospace}
.eyeb{font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.wrap{max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,64px)}
.btn{display:inline-block;font-size:13.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:17px 36px;white-space:nowrap;transition:background .2s,color .2s,border-color .2s;text-align:center}
.btn-cherry{background:var(--cherry);color:#fff}
.btn-cherry:hover{background:var(--maroon)}
.btn-line{border:1.5px solid var(--blackcherry)}
.btn-line:hover{background:var(--blackcherry);color:var(--rosemilk)}
.btn-dark{background:var(--blackcherry);color:var(--rosemilk)}
.btn-dark:hover{background:var(--maroon)}
.btn-ghost{border:1.5px solid rgba(251,241,242,.55);color:var(--rosemilk)}
.btn-ghost:hover{border-color:var(--rosemilk);background:rgba(251,241,242,.08)}

/* ---------- announcement marquee ---------- */
.annc{background:var(--blackcherry);color:var(--rosemilk);overflow:hidden;height:38px;display:flex;align-items:center}
.annc .track{display:flex;white-space:nowrap;animation:marq 28s linear infinite;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.annc span{padding-right:56px}
.annc span i{font-style:normal;color:var(--roselight);margin-right:14px}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(251,241,242,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s}
nav.solid{border-bottom-color:var(--hairline)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.logo{font-family:"Fraunces",serif;font-weight:600;font-size:26px;letter-spacing:.02em}
.links{display:flex;gap:32px;font-size:14.5px;font-weight:500}
.links a{padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s}
.links a:hover{border-bottom-color:var(--maroon)}
.links a.on{border-bottom-color:var(--maroon);font-weight:600}
.nav-r{display:flex;gap:22px;align-items:center;font-size:14.5px;font-weight:600}
.nav-cta{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--blackcherry);color:var(--rosemilk);padding:11px 22px}
.nav-cta:hover{background:var(--maroon)}
.bag-btn{position:relative}
.bag-count{position:absolute;top:-9px;right:-14px;background:var(--cherry);color:#fff;
  font-size:10.5px;min-width:18px;height:18px;border-radius:9px;display:none;align-items:center;justify-content:center;padding:0 5px}
.bag-count.on{display:inline-flex}

/* burger + mobile sheet */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;margin-left:-8px}
.burger span{display:block;width:22px;height:1.5px;background:var(--blackcherry);transition:transform .3s var(--ease),opacity .2s}
.burger.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mnav{position:absolute;top:100%;left:0;right:0;background:var(--rosemilk);border-bottom:1px solid var(--hairline);
  padding:6px clamp(20px,4vw,64px) 26px;opacity:0;transform:translateY(-10px);pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);max-height:calc(100svh - 72px);overflow:auto}
.mnav.on{opacity:1;transform:none;pointer-events:auto}
.mnav a{display:flex;justify-content:space-between;align-items:center;
  font-family:"Fraunces",serif;font-weight:500;font-size:23px;padding:15px 0;border-bottom:1px solid var(--hairline)}
.mnav a.on{color:var(--maroon)}
.mnav a::after{content:"→";font-family:"Instrument Sans",sans-serif;font-size:15px;color:var(--maroon)}
.mnav a.btn{display:block;width:100%;margin-top:22px;border-bottom:none;
  font-family:"Instrument Sans",sans-serif;font-size:13.5px;padding:17px 36px}
.mnav a.btn::after{content:none}
@media(max-width:1020px){.links{display:none}.nav-cta{display:none}.burger{display:flex}
  .nav-in{justify-content:space-between}.logo{position:absolute;left:50%;transform:translateX(-50%)}}
@media(min-width:1021px){.mnav{display:none}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

section{padding:clamp(56px,7vw,100px) 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:clamp(28px,4vw,48px);flex-wrap:wrap}
.sec-head h2{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(28px,3.4vw,46px);line-height:1.1}
.sec-head .eyeb{color:var(--cherry);display:block;margin-bottom:12px}
.sec-head .more{font-size:13.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:2px solid var(--maroon);padding-bottom:6px}

/* ---------- breadcrumb ---------- */
.crumb{padding-top:20px;font-size:13px;color:var(--ink-soft)}
.crumb a:hover{color:var(--blackcherry)}

/* ---------- collection hero ----------
   Image box aspect is matched to each source file so the model is never cropped.
   Column split shifts with it so the text column doesn't leave dead space.
   ch-34 = 1792x2400 · default 4/5 = 1856x2304 · ch-43 = 2400x1792 · ch-169 = 2752x1536 */
.chero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;
  padding-top:clamp(30px,4vw,56px);padding-bottom:clamp(34px,4vw,54px)}
.chero.ch-34{grid-template-columns:1.12fr 1fr}
.chero.ch-34 .im{aspect-ratio:3/4}
.chero.ch-43{grid-template-columns:.68fr 1fr}
.chero.ch-43 .im{aspect-ratio:4/3}
.chero.ch-169{grid-template-columns:.6fr 1fr}
.chero.ch-169 .im{aspect-ratio:16/9}
.chero .tx{max-width:560px}
.chero h1{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(38px,5vw,72px);line-height:1.02;margin-top:16px}
.chero h1 em{font-style:italic;color:var(--maroon)}
.chero .lede{margin-top:18px;font-size:clamp(15px,1.3vw,18px);color:var(--ink-soft);max-width:470px}
.chero .facts{margin-top:26px;display:flex;gap:24px;flex-wrap:wrap;font-size:13.5px;font-weight:500;color:var(--ink-soft)}
.chero .facts span::before{content:"—";color:var(--maroon);margin-right:8px;font-weight:600}
.chero .im{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--petal)}
.mirror{transform:scaleX(-1)}
.chero .im img{width:100%;height:100%;object-fit:cover}
.chero .im .mark{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-family:"Gulzar",serif;
  font-size:clamp(52px,6vw,92px);color:rgba(251,241,242,.92);line-height:1.5;pointer-events:none;
  text-shadow:0 2px 26px rgba(61,12,21,.45)}
@media(max-width:900px){
  .chero,.chero.ch-34,.chero.ch-43,.chero.ch-169{grid-template-columns:1fr;padding-bottom:26px}
  .chero .im{order:-1}
  /* a 16/9 hero collapses to ~190px on a phone. Portrait box instead: the landscape
     sources get cropped on the SIDES only, so the model still shows head to hem. */
  .chero .im,.chero.ch-34 .im,.chero.ch-43 .im,.chero.ch-169 .im{aspect-ratio:4/5}
  .chero.ch-43 .im img{object-position:64% center}   /* banner-look: model right of centre */
  .chero.ch-169 .im img{object-position:72% center}  /* lawn-wide: model far right */
}

/* ---------- filter / sort bar ---------- */
.filterbar{position:sticky;top:72px;z-index:40;background:rgba(251,241,242,.95);backdrop-filter:blur(10px);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.filterbar .fb{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:12px;padding-bottom:12px}
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chips button{font-size:13px;font-weight:600;letter-spacing:.04em;padding:9px 17px;border:1.5px solid var(--hairline);
  border-radius:999px;transition:border-color .2s,background .2s,color .2s;white-space:nowrap}
.chips button:hover{border-color:var(--blackcherry)}
.chips button.on{background:var(--blackcherry);color:var(--rosemilk);border-color:var(--blackcherry)}
.sortwrap{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft);margin-left:auto}
.sortwrap select{font:inherit;font-size:13px;font-weight:600;color:var(--blackcherry);background:transparent;
  border:1.5px solid var(--hairline);padding:9px 12px;cursor:pointer}
.count{font-size:13px;color:var(--ink-soft)}
@media(max-width:700px){
  .filterbar .fb{gap:10px}
  .chips{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .chips::-webkit-scrollbar{display:none}
  .sortwrap{margin-left:0}
}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.grid,.grid.g3{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.grid,.grid.g3{grid-template-columns:repeat(2,1fr)}}
.card{position:relative}
.card .imwrap{position:relative;overflow:hidden}
.card .im{aspect-ratio:3/4;background:var(--petal);display:block}
.card .im img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .7s var(--ease)}
.card:hover .im img{transform:scale(1.05)}
.card .flag{position:absolute;top:12px;left:12px;background:rgba(251,241,242,.94);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:7px 11px}
.card .qa{position:absolute;left:0;right:0;bottom:0;background:rgba(61,12,21,.92);color:var(--rosemilk);
  font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:15px 0;text-align:center;
  transform:translateY(100%);transition:transform .35s var(--ease)}
.card:hover .qa,.card:focus-within .qa{transform:none}
.card .meta{padding:14px 2px 0}
.card .nm{font-weight:600;font-size:15px}
.card .ds{font-size:13px;color:var(--ink-soft)}
.card .wear{font-size:12px;color:var(--maroon);margin-top:4px;font-weight:500}
.card .pr{font-family:ui-monospace,Menlo,monospace;font-size:13.5px;margin-top:5px}
@media(hover:none){.card .qa{position:static;transform:none;display:block;width:100%}}

/* "next drop" placeholder tile — honest, no fake stock */
.soon{border:1.5px dashed var(--hairline);aspect-ratio:3/4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:26px;gap:10px}
.soon .u{font-family:"Gulzar",serif;font-size:44px;color:var(--roselight);line-height:1.5}
.soon h4{font-family:"Fraunces",serif;font-weight:500;font-size:21px}
.soon p{font-size:13px;color:var(--ink-soft);max-width:200px}

.empty{grid-column:1/-1;text-align:center;padding:60px 0;color:var(--ink-soft)}

/* ---------- editorial break band ----------
   Band height follows the image's own aspect (4/3 = the landscape sources), so the
   model is shown head to hem instead of being sliced by a fixed min-height. */
.edito{background:var(--blackcherry);color:var(--rosemilk);display:grid;grid-template-columns:1fr 1fr}
.edito.flip .im{order:-1}
.edito .txt{padding:clamp(44px,6vw,86px) clamp(26px,4vw,72px);display:flex;flex-direction:column;
  justify-content:center;min-width:0}
.edito .txt .eyeb{color:var(--roselight)}
.edito h2{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(26px,3vw,42px);line-height:1.1;margin-top:14px}
.edito h2 em{font-style:italic;color:var(--roselight)}
.edito p{margin-top:16px;color:rgba(251,241,242,.75);max-width:430px}
.edito .btn{margin-top:30px;align-self:flex-start}
.edito .im{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--maroon)}
.edito .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.edito.ed-1x1 .im{aspect-ratio:1/1}
@media(max-width:900px){
  .edito{grid-template-columns:1fr}
  .edito.flip .im{order:0}
  /* square, not 4/3 — a 4/3 band is only ~280px tall on a phone */
  .edito .im,.edito.ed-1x1 .im{aspect-ratio:1/1}
}

/* ---------- notes / how-to-wear ---------- */
.notes{background:var(--petal)}
.notes .row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
@media(max-width:820px){.notes .row{grid-template-columns:1fr}}
.notes .it .ic{font-family:"Fraunces",serif;font-style:italic;font-weight:500;font-size:30px;color:var(--maroon);
  border-bottom:1px solid var(--hairline);padding-bottom:14px;margin-bottom:16px}
.notes .it h4{font-family:"Fraunces",serif;font-weight:500;font-size:20px}
.notes .it p{font-size:14.5px;color:var(--ink-soft);margin-top:8px;max-width:330px}

/* ---------- mini faq ---------- */
.faq .fq{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(28px,5vw,80px)}
@media(max-width:900px){.faq .fq{grid-template-columns:1fr}}
.faq h2{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(28px,3.2vw,44px);line-height:1.1}
.faq .sub{margin-top:14px;color:var(--ink-soft);max-width:340px}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:20px;padding:22px 0;font-weight:600;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"Fraunces",serif;font-size:26px;color:var(--maroon);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 0 22px;color:var(--ink-soft);font-size:15px;max-width:560px}

/* ---------- drop-list capture ---------- */
.capture{background:#fff;border-top:1px solid var(--hairline);padding:clamp(50px,6vw,86px) 0;text-align:center}
.capture .urdu-mark{font-family:"Gulzar",serif;font-size:clamp(56px,5vw,92px);color:var(--cherry);line-height:1.5}
.capture h2{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(28px,3.4vw,46px)}
.capture p{color:var(--ink-soft);margin-top:12px}
.capture form{margin:28px auto 0;display:flex;max-width:520px;border:1.5px solid var(--blackcherry)}
.capture input{flex:1;border:none;background:transparent;padding:17px 20px;font:inherit;color:inherit;min-width:0}
.capture input:focus{outline:none}
.capture .btn{border:none}
.capture .note{font-size:12.5px;margin-top:12px;color:var(--ink-soft)}

/* ---------- lookbook ---------- */
/* 16/9 matches hero-wide.png (2752x1536) exactly — no vertical crop, head stays in frame */
/* no max-height here: with aspect-ratio set, capping the height makes the box
   shrink its width too and the band stops spanning the viewport */
.lb-hero{position:relative;aspect-ratio:16/9;display:flex;align-items:center;
  overflow:hidden;background:var(--blackcherry)}
.lb-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.9}
/* copy sits mid-left, so the scrim is weighted left rather than bottom */
.lb-hero .shade{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(61,12,21,.84) 0%,rgba(61,12,21,.5) 34%,rgba(61,12,21,.12) 62%,rgba(61,12,21,0) 78%),
             linear-gradient(180deg,rgba(61,12,21,.28) 0%,rgba(61,12,21,.1) 45%,rgba(61,12,21,.45) 100%)}
/* width:100% or the flex item shrinks to content and auto-margins centre it */
.lb-hero .wrap{position:relative;z-index:1;width:100%;color:var(--rosemilk)}
.lb-hero .eyeb{color:var(--roselight)}
.lb-hero h1{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(38px,5vw,76px);line-height:1;margin-top:10px}
/* Nastaliq ascenders run well above the line box — margin keeps them off the eyebrow */
.lb-hero .u{font-family:"Gulzar",serif;font-size:clamp(34px,3.2vw,58px);color:var(--roselight);
  line-height:1.5;margin-top:clamp(34px,3.4vw,60px)}
.lb-hero p{margin-top:16px;color:rgba(251,241,242,.8);max-width:480px}
@media(max-width:760px){.lb-hero{aspect-ratio:4/5}}

.lb-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,34px);align-items:center;
  padding-top:clamp(46px,6vw,96px);padding-bottom:clamp(46px,6vw,96px)}
.lb-split.flip .fig{order:2}
@media(max-width:900px){.lb-split{grid-template-columns:1fr}.lb-split.flip .fig{order:0}}
.lb-split .fig{position:relative;overflow:hidden;background:var(--petal)}
.lb-split .fig img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.lb-split.sq .fig img{aspect-ratio:1/1}
.lb-split .cap .eyeb{color:var(--cherry)}
.lb-split .cap h2{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(26px,3vw,42px);line-height:1.1;margin-top:14px}
.lb-split .cap h2 em{font-style:italic;color:var(--maroon)}
.lb-split .cap p{margin-top:16px;color:var(--ink-soft);max-width:420px}
.lb-split .cap .shop{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}

/* 16/9 matches lawn-wide.png (2752x1536) — full figure, no slice */
.lb-wide{position:relative;overflow:hidden;aspect-ratio:16/9;display:flex;align-items:center}
.lb-wide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.lb-wide .shade{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(61,12,21,.8) 0%,rgba(61,12,21,.46) 34%,rgba(61,12,21,.08) 64%,rgba(61,12,21,0) 80%),
             linear-gradient(180deg,rgba(61,12,21,.22) 0%,rgba(61,12,21,.08) 50%,rgba(61,12,21,.38) 100%)}
.lb-wide .cap{position:relative;z-index:1;width:100%;max-width:1440px;margin:0 auto;
  color:var(--rosemilk);padding:0 clamp(20px,4vw,64px)}
.lb-wide .cap>*{max-width:520px}
.lb-wide .cap h3{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(24px,2.8vw,38px)}
.lb-wide .cap p{color:rgba(251,241,242,.78);margin-top:8px;max-width:460px;font-size:14.5px}
.lb-wide .cap .btn{margin-top:20px}

/* On a phone there is no room to set copy beside the model, and overlaying it
   covers her. Stack instead: photo, then caption on the dark ground. */
@media(max-width:760px){
  .lb-wide{display:block;aspect-ratio:auto;background:var(--blackcherry)}
  .lb-wide img{position:static;width:100%;height:auto;aspect-ratio:4/5;
    object-fit:cover;object-position:70% center}
  .lb-wide .shade{display:none}
  .lb-wide .cap{padding:clamp(26px,6vw,38px) clamp(20px,4vw,64px) clamp(32px,7vw,44px)}
  .lb-wide .cap>*{max-width:none}
}

.lb-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,34px);
  padding-top:clamp(46px,6vw,96px);padding-bottom:clamp(46px,6vw,96px)}
@media(max-width:760px){.lb-duo{grid-template-columns:1fr}}
.lb-duo figure{background:var(--petal)}
.lb-duo img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top}
.lb-duo figcaption{padding:14px 2px 0;font-size:13.5px;color:var(--ink-soft)}
.lb-duo figcaption b{display:block;font-family:"Fraunces",serif;font-weight:500;font-size:19px;color:var(--blackcherry)}

.lb-quote{text-align:center;padding:clamp(50px,7vw,110px) 0;background:var(--petal)}
.lb-quote .u{font-family:"Gulzar",serif;font-size:clamp(64px,8vw,130px);color:var(--maroon);line-height:1.5}
.lb-quote p{font-family:"Fraunces",serif;font-style:italic;font-size:clamp(20px,2.4vw,32px);margin-top:6px}
.lb-quote span{display:block;margin-top:14px;font-size:13px;color:var(--ink-soft)}

/* ---------- footer ---------- */
footer{background:var(--blackcherry);color:var(--rosemilk);padding:64px 0 40px}
.f-in{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
@media(max-width:900px){.f-in{grid-template-columns:1fr 1fr}}
.f-logo{font-family:"Fraunces",serif;font-weight:600;font-size:30px}
.f-urdu{font-family:"Gulzar",serif;font-size:54px;color:var(--roselight);line-height:1.5}
footer h5{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,241,242,.6);margin-bottom:16px}
footer ul{list-style:none;font-size:14.5px}
footer li{padding:5px 0}
footer a:hover{color:var(--roselight)}
.f-bot{margin-top:56px;padding-top:24px;border-top:1px solid rgba(251,241,242,.18);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:rgba(251,241,242,.55)}

/* ---------- drawer + toast ---------- */
.drawer-scrim{position:fixed;inset:0;background:rgba(61,12,21,.4);opacity:0;pointer-events:none;transition:opacity .3s;z-index:90}
.drawer-scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--rosemilk);z-index:95;
  transform:translateX(100%);transition:transform .4s var(--ease);display:flex;flex-direction:column;
  border-left:1px solid var(--hairline)}
.drawer.on{transform:none}
.drawer .dh{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--hairline)}
.drawer .dh h3{font-family:"Fraunces",serif;font-weight:500;font-size:22px}
.drawer .items{flex:1;overflow:auto;padding:10px 24px}
.d-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--hairline)}
.d-item img{width:72px;height:96px;object-fit:cover;object-position:center top}
.d-item .nm{font-weight:600;font-size:14.5px}
.d-item .ds{font-size:12.5px;color:var(--ink-soft)}
.d-item .pr{font-family:ui-monospace,Menlo,monospace;font-size:13px;margin-top:6px}
.d-item .rm{margin-left:auto;align-self:flex-start;font-size:12px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.d-item .rm:hover{color:var(--maroon)}
.d-empty{padding:40px 0;text-align:center;color:var(--ink-soft);font-size:14.5px}
.drawer .df{padding:20px 24px;border-top:1px solid var(--hairline)}
.drawer .df .tot{display:flex;justify-content:space-between;font-weight:600;margin-bottom:14px}
.drawer .df .btn{display:block;width:100%}
.drawer .df .cod{font-size:12.5px;color:var(--ink-soft);text-align:center;margin-top:10px}
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,80px);background:var(--blackcherry);
  color:var(--rosemilk);font-size:14px;font-weight:500;padding:14px 26px;z-index:99;visibility:hidden;
  transition:transform .4s var(--ease),visibility 0s .4s}
.toast.on{transform:translate(-50%,0);visibility:visible;transition:transform .4s var(--ease)}

/* touch targets: these render 16–29px tall, well under the 44px minimum */
@media(max-width:1020px){
  .nav-r{gap:18px}
  /* :not(.nav-cta) — the CTA is display:none here and must stay that way */
  .nav-r>a:not(.nav-cta),.nav-r .bag-btn{min-height:44px;display:inline-flex;align-items:center}
  .crumb a{display:inline-block;padding:7px 0}
  .sec-head .more{padding-top:10px;padding-bottom:9px}
  .drawer .dh button{min-width:44px;min-height:44px}
  .d-item .rm{padding:10px 0 10px 12px}
  .chips button{min-height:42px}
  .sortwrap select{min-height:44px}
}

/* small phones: long CTA labels must wrap rather than force page-wide overflow */
@media(max-width:560px){
  .btn{padding:16px 22px;white-space:normal}
  .edito .btn,.lb-wide .btn,.lb-split .cap .btn{align-self:stretch;width:100%}
}

@media (prefers-reduced-motion:reduce){
  .annc .track{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important}
}