/* ============================================================
   UI KIT — shared across every page
   chips · options · fields · selects · accordions · tabs ·
   drawers · overlays · empty & loading states · toasts
   ============================================================ */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- interior page hero ---------- */
.phero{padding-block:clamp(20px,2.6vw,40px) 0;position:relative}
.phero__in{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.4vw,40px);align-items:end}
/* the page title grew, so the line under it follows the same heading ->
   description step as every section head rather than a local 12px */
.phero__text{grid-column:1/8;display:grid;gap:var(--space-sub);justify-items:start}
/* The distance from a page title to the first block under it is one number on
   every page. It used to be split between three .phero variants, each with its
   own bottom padding, and whatever top padding the content block happened to
   carry — which is why it ran from 29px to 92px across the site. The title
   gives nothing; the block below gives the half-gap every section gives. */
.phero + section,
.phero + div + section{padding-top:calc(var(--section-default) / 2)}
.phero__t{
  font-family:var(--display);font-weight:300;line-height:.98;letter-spacing:-.022em;
  font-size:var(--d1);text-wrap:balance;
}
.phero__t em{font-style:italic}
.phero__sub{color:var(--ink-70);max-width:46ch;font-size:var(--t-lead);text-wrap:pretty}
.phero__act{display:flex;gap:12px;flex-wrap:wrap;padding-top:6px}
.phero__meta{grid-column:9/13;display:grid;gap:14px;align-self:end;border-top:1px solid var(--line);padding-top:16px}
/* label sits above its value: reads as a spec list, not a lopsided row */
.phero__meta li{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:4px}
.phero__meta b{font-weight:500;font-size:var(--t-body);font-variant-numeric:tabular-nums}
.phero__meta span{font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-45)}
/* min-width:0 or the picture's intrinsic size pushes the grid wider than the
   viewport and the page scrolls sideways on a phone */
.phero__fig{grid-column:1/13;min-width:0;margin-top:clamp(18px,2.4vw,34px);aspect-ratio:16/6.4;overflow:hidden;background:var(--ivory);border-radius:var(--radius-lg);}
.phero__fig img{width:100%;height:100%;object-fit:cover}

.phero--split .phero__text{grid-column:1/7;grid-row:1}
/* one image box on every landing page: same height, same top edge, same radius,
   whatever the copy beside it does */
.phero--split .phero__fig{grid-column:8/13;grid-row:1/3;margin-top:0;aspect-ratio:auto;
  align-self:start;height:clamp(300px,33vw,500px)}
/* the copy runs the width of the column it lives in, so the left side reads
   as one block: headline, a line or two of explanation, then the spec strip */
.phero--split .phero__sub{max-width:none}
/* in the split hero the spec list reads as a strip under the copy, not a stack */
.phero--split .phero__meta{grid-column:1/7;grid-row:2;border-top:1px solid var(--line);padding-top:16px;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:16px}
/* split hero with no spec list: the copy centres against the image beside it */
.phero--mid .phero__fig{grid-row:1}
.phero--mid .phero__text{align-self:center}
.phero--mid .phero__sub{max-width:min(100%,62ch)}
.phero--tight{padding-bottom:0}

.phero--tight .phero__t{font-size:clamp(2.57rem,4.11vw,3.5rem)}
/* two numbers, side by side, on a rule only as wide as they are */
.phero--tight .phero__meta{
  grid-column:9/13;display:flex;gap:clamp(28px,3.2vw,52px);
  border-top:0;padding-top:0;align-self:end;
}
.phero--tight .phero__meta li{position:relative;padding-top:14px}
.phero--tight .phero__meta li::before{
  content:"";position:absolute;top:0;left:0;width:28px;height:1px;background:var(--line);
}
.phero--tight .phero__meta b{font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,1.9vw,2rem);line-height:1}
/* heading and supporting line share one horizontal composition: the copy sits
   out to the right and low, against the last lines of the heading */
.phero--lede{padding-bottom:0}
.phero--lede .phero__text{
  grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);
  gap:0 clamp(18px,2.4vw,40px);align-items:end;justify-items:stretch;
}
.phero--lede .phero__t{grid-column:1/8;font-size:clamp(2.66rem,4.39vw,3.74rem)}
.phero--lede .phero__sub{
  grid-column:9/13;align-self:end;max-width:min(100%,440px);
  padding-bottom:clamp(6px,.8vw,12px);
}
/* one hairline, no label above it */
.phero--lede .phero__sub::before{
  content:"";display:block;width:clamp(80px,7vw,120px);height:1px;background:var(--line);
  margin-bottom:clamp(16px,1.6vw,22px);
}
@media (max-width:900px){
  .phero--lede .phero__text{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.4vw,26px)}
  .phero--lede .phero__t,.phero--lede .phero__sub{grid-column:1}
  .phero--lede .phero__sub{max-width:46ch;padding-bottom:0}
  .phero--lede .phero__sub::before{display:none}
}
/* a hero whose supporting line deserves a wider measure than the default.
   Declared after phero--tight so it wins at the same specificity. */
.phero--wide-sub .phero__sub{max-width:min(100%,600px)}
.phero--wide-sub .phero__text{gap:var(--space-sub)}
/* and one that also wants a larger headline */
.phero.phero--lead .phero__t{font-size:clamp(2.57rem,4.63vw,3.93rem)}
/* the information pages open on a nav list, so the intro needs a clearer break */
.phero--doc .phero__text{gap:clamp(24px,2.4vw,34px)}
@media (max-width:1024px){
  .phero__text,.phero--split .phero__text{grid-column:1/13;grid-row:auto}
  .phero__meta,.phero--split .phero__meta{grid-column:1/13;grid-row:auto;
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:14px}
  /* the right-hand metric column has no room to be a column any more, so the
     facts run as one line under the copy instead of squeezing into 4 grid cols */
  .phero--tight .phero__meta{grid-column:1/13;grid-row:auto;
    gap:clamp(28px,5vw,52px);margin-top:clamp(20px,3vw,30px)}
  /* height:auto, or the desktop fixed height stays and the ratio turns it into
     a 533px-wide box on a 390px screen */
  .phero--split .phero__fig{grid-column:1/13;grid-row:auto;margin-top:22px;aspect-ratio:16/9;
    height:auto;min-height:0}
  .phero__fig{aspect-ratio:16/8}
}
/* the page title has its own clamps, so raising the display ramp does not reach
   it — on a phone it was landing under the section titles below it */
@media (max-width:700px){
  /* these titles carry a hand-placed line break composed for a wide measure.
     At phone width each clause wraps again and the title runs to four lines,
     so the break stands down and the text finds its own. */
  .phero__t br{display:none}
  .phero--tight .phero__t{font-size:clamp(2.65rem,4.11vw,3.5rem)}
  .phero--lede .phero__t{font-size:clamp(2.7rem,4.39vw,3.74rem)}
  .phero.phero--lead .phero__t{font-size:clamp(2.8rem,4.63vw,3.93rem)}
}

@media (max-width:560px){
  .phero__meta,.phero--split .phero__meta{grid-auto-flow:row;gap:12px}
  .phero__meta li{flex-direction:row-reverse;justify-content:space-between;align-items:baseline;width:100%}
  /* this one is a wrapping row, not a full-width stack, so the items keep
     their own width and the label stays above the number */
  .phero--tight .phero__meta{flex-wrap:wrap;gap:20px 34px}
  .phero--tight .phero__meta li{flex-direction:column-reverse;justify-content:flex-start;
    align-items:flex-start;width:auto}
}

/* ---------- breadcrumbs ---------- */
.crumbs{padding-block:clamp(12px,1.4vw,18px)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs li{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--ink-25)}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}

/* ---------- chips ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{
  /* a link and a button must sit identically in the row */
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;height:40px;padding:0 18px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:var(--t-label);font-weight:500;letter-spacing:var(--ls-ui);text-transform:uppercase;color:var(--ink-70);
  transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease);
  white-space:nowrap;
}
.chip:hover{box-shadow:inset 0 0 0 1px var(--ink-25);color:var(--ink)}
.chip.is-on{background:var(--ink);color:var(--milk);box-shadow:none}

/* ---------- custom checkbox / pill options ---------- */
.opt{display:flex;align-items:center;gap:11px;cursor:pointer;padding:7px 0;position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt__box{
  width:17px;height:17px;flex:none;box-shadow:inset 0 0 0 1px var(--line);
  display:grid;place-items:center;transition:background .25s var(--ease),box-shadow .25s var(--ease);
}
.opt__box svg{width:11px;height:11px;stroke:var(--milk);fill:none;stroke-width:1.8;
  opacity:0;transform:scale(.6);transition:opacity .25s var(--ease),transform .3s var(--slow)}
.opt input:checked+.opt__box{background:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt input:checked+.opt__box svg{opacity:1;transform:none}
.opt input:focus-visible+.opt__box{outline:2px solid var(--accent);outline-offset:2px}
.opt__l{font-size:var(--t-meta);color:var(--ink-70);transition:color .25s}
.opt:hover .opt__l,.opt input:checked~.opt__l{color:var(--ink)}
.opt__n{margin-left:auto;font-size:var(--t-label);color:var(--ink-25);font-variant-numeric:tabular-nums}

.opt--pill{padding:0}
.opt__pill{
  display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line);font-size:var(--t-meta);color:var(--ink-70);
  transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
.opt--pill:hover .opt__pill{box-shadow:inset 0 0 0 1px var(--ink-25);color:var(--ink)}
.opt--pill input:checked+.opt__pill{background:var(--ink);color:var(--milk);box-shadow:none}
.opts{display:grid;gap:2px}
.opts--pills{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- fields ---------- */
.field{position:relative;display:block}
.field__in{
  width:100%;height:56px;padding:20px 14px 6px;background:transparent;color:var(--ink);
  border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius-sm);outline:none;
  font-size:var(--t-body);transition:box-shadow .3s var(--ease);
}
.field__in::placeholder{color:transparent}
.field__in:hover{box-shadow:inset 0 0 0 1px var(--ink-25)}
.field__in:focus{box-shadow:inset 0 0 0 1px var(--ink)}
.field__lb{
  position:absolute;left:15px;top:18px;color:var(--ink-45);font-size:var(--t-body);pointer-events:none;
  transition:transform .3s var(--slow),font-size .3s var(--slow),color .3s var(--ease);transform-origin:left top;
}
.field__in:focus+.field__lb,.field__in:not(:placeholder-shown)+.field__lb{
  transform:translateY(-11px) scale(.72);color:var(--ink-45);letter-spacing:.08em;text-transform:uppercase;
}
.field__hint{display:block;font-size:var(--t-label);color:var(--ink-45);margin-top:6px;letter-spacing:.04em}
.field--err .field__in{box-shadow:inset 0 0 0 1px #B4553F}
.field--err .field__hint{color:#B4553F}
.fields{display:grid;gap:12px}
.fields--2{grid-template-columns:1fr 1fr}
@media (max-width:620px){.fields--2{grid-template-columns:1fr}}

/* ---------- select ---------- */
.sel{position:relative;display:inline-flex;align-items:center}
.sel select{
  appearance:none;height:44px;padding:0 38px 0 15px;background:transparent;color:var(--ink);
  border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius-sm);outline:none;cursor:pointer;
  font-size:var(--t-meta);letter-spacing:.02em;transition:box-shadow .3s var(--ease);
}
.sel select:hover{box-shadow:inset 0 0 0 1px var(--ink-25)}
.sel select:focus-visible{box-shadow:inset 0 0 0 1px var(--ink)}
.sel__ico{position:absolute;right:14px;width:12px;height:12px;pointer-events:none;stroke:currentColor;fill:none;stroke-width:1.3}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--line-soft)}
.acc__i{border-bottom:1px solid var(--line-soft)}
.acc__i summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;
  /* the whole row is the target, not just the words */
  /* more air above the question than below it, so each item reads as a block
     and the rule under it separates items instead of underlining the answer */
  padding:clamp(22px,2.3vw,32px) 0 clamp(20px,2vw,26px);list-style:none;
  font-size:clamp(1rem,.8vw + .85rem,1.1875rem);
  font-weight:500;letter-spacing:-.005em;transition:color .3s var(--ease);
}
.acc__i summary::-webkit-details-marker{display:none}
.acc__i summary:hover{color:var(--accent)}
.acc__i summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.acc__ico{width:15px;height:15px;flex:none;color:var(--ink-45);
  transition:transform .45s var(--slow),color .3s var(--ease)}
.acc__i summary:hover .acc__ico{color:var(--accent)}
.acc__i[open] .acc__ico{transform:rotate(45deg)}
.acc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--slow)}
.acc__i[open] .acc__body{grid-template-rows:1fr}
/* the gap to the rule belongs to the panel, not to whatever markup is inside it */
.acc__body>div{overflow:hidden;padding-bottom:clamp(22px,2.1vw,28px)}
.acc__body p,.acc__body div>p{color:var(--ink-70);max-width:72ch}
.acc__body p + p{margin-top:14px}
.acc__body ul{display:grid;gap:8px}
.acc__body li{color:var(--ink-70);font-size:var(--t-meta);display:flex;gap:10px}
.acc__body li::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--accent);margin-top:9px;flex:none}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:clamp(16px,2.4vw,34px);border-bottom:1px solid var(--line-soft);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  position:relative;padding:0 0 14px;white-space:nowrap;color:var(--ink-45);
  font-size:var(--t-meta);font-weight:500;letter-spacing:var(--ls-ui);text-transform:uppercase;
  transition:color .3s var(--ease);display:inline-flex;gap:7px;align-items:baseline;
}
.tab span{font-size:var(--t-label);color:var(--ink-25)}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--slow)}
.tab:hover{color:var(--ink)}
.tab.is-on{color:var(--ink)}
.tab.is-on::after{transform:scaleX(1)}

/* ---------- pagination ---------- */
.pg{display:flex;align-items:center;justify-content:center;gap:8px;padding-top:calc(var(--section-compact) / 2)}
.pg__n,.pg__arrow{
  min-width:46px;height:46px;display:grid;place-items:center;font-size:var(--t-meta);
  border-radius:var(--radius-sm);
  font-variant-numeric:tabular-nums;color:var(--ink-45);
  transition:color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.pg__n:hover,.pg__arrow:hover{color:var(--ink);background:var(--ivory)}
.pg__n:focus-visible,.pg__arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pg__n.is-on{background:var(--ink);color:var(--milk)}
.pg__n.is-on:hover{background:var(--ink);color:var(--milk)}
.pg__arrow svg{width:13px;height:13px}
.pg__arrow[aria-disabled="true"]{opacity:.3;pointer-events:none}

/* ---------- quantity ---------- */
.qty{display:inline-flex;align-items:center;box-shadow:inset 0 0 0 1px var(--line);height:42px;border-radius:var(--radius-sm);}
.qty button{width:38px;height:100%;display:grid;place-items:center;transition:background .3s var(--ease)}
.qty button:hover{background:var(--ivory)}
.qty button svg{width:12px;height:12px}
.qty input{width:34px;text-align:center;border:0;background:none;outline:none;font-size:var(--t-meta);
  font-variant-numeric:tabular-nums}

/* ---------- mini product row ---------- */
.mini{display:flex;gap:14px;align-items:center;padding:10px 0;transition:opacity .3s}
.mini:hover{opacity:.72}
.mini__img{border-radius:var(--radius-md);width:62px;flex:none;aspect-ratio:4/5;overflow:hidden;background:var(--ivory)}
.mini__img img{width:100%;height:100%;object-fit:cover}
.mini__body{display:grid;gap:2px}
.mini__brand{font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45)}
.mini__name{font-size:var(--t-meta);font-weight:500;line-height:1.3}
.mini__price{font-size:var(--t-meta);font-variant-numeric:tabular-nums}
.mini__price i{font-style:normal;color:var(--ink-45);margin-left:8px}

/* ---------- editorial insert in a grid ---------- */
.einsert{
  grid-column:span 2;position:relative;display:grid;align-content:end;gap:10px;overflow:hidden;border-radius:var(--radius-lg);
  min-height:clamp(300px,26vw,420px);padding:clamp(20px,2.2vw,36px);color:var(--on-dark);background:var(--dark);
}
.einsert__media{position:absolute;inset:0}
.einsert__media img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:transform 1.3s var(--slow)}
.einsert:hover .einsert__media img{transform:scale(1.04)}
.einsert__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(16,13,10,.76),rgba(16,13,10,.14) 60%)}
.einsert__body{position:relative;z-index:2;display:grid;gap:10px;justify-items:start;max-width:40ch}
.einsert .label{color:rgba(242,237,230,.68)}
.einsert__t{font-family:var(--display);font-weight:300;font-size:var(--d3);line-height:1.02;letter-spacing:-.018em;text-wrap:balance}
.einsert__p{color:rgba(242,237,230,.76);font-size:var(--t-meta)}
.einsert .link{color:var(--on-dark)}
@media (max-width:700px){.einsert{grid-column:span 2}}

/* ---------- ingredient list ---------- */
.ingl{display:grid;gap:0;border-top:1px solid var(--line-soft)}
.ingl__i{display:grid;grid-template-columns:minmax(140px,1fr) 2.2fr auto;gap:clamp(12px,2vw,30px);
  align-items:baseline;padding:clamp(14px,1.7vw,22px) 0;border-bottom:1px solid var(--line-soft)}
.ingl__n{font-weight:500;font-size:clamp(1rem,.8vw + .86rem,1.1875rem);letter-spacing:-.005em}
.ingl__d{color:var(--ink-70);font-size:var(--t-meta)}
.ingl__go{font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:color .3s}
.ingl__go svg{width:12px;height:12px;transition:transform .45s var(--slow)}
.ingl__i:hover .ingl__go{color:var(--ink)}
.ingl__i:hover .ingl__go svg{transform:translateX(4px)}
@media (max-width:760px){.ingl__i{grid-template-columns:1fr;gap:6px}}

/* ---------- order timeline ---------- */
.tl{display:grid;gap:0;grid-auto-flow:column;grid-auto-columns:1fr;position:relative}
.tl__i{display:grid;gap:12px;justify-items:start;position:relative;padding-top:26px}
.tl__i::before{content:"";position:absolute;top:9px;left:0;right:0;height:1px;background:var(--line)}
.tl__i.is-done::before,.tl__i.is-now::before{background:var(--ink)}
.tl__dot{position:absolute;top:2px;left:0;width:16px;height:16px;border-radius:50%;background:var(--milk);
  box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center}
.tl__dot svg{width:9px;height:9px;stroke:var(--milk);fill:none;stroke-width:2;opacity:0}
.tl__i.is-done .tl__dot{background:var(--ink);box-shadow:none}
.tl__i.is-done .tl__dot svg{opacity:1}
.tl__i.is-now .tl__dot{background:var(--milk);box-shadow:inset 0 0 0 2px var(--ink)}
.tl__l{font-size:var(--t-meta);color:var(--ink-45)}
.tl__i.is-done .tl__l,.tl__i.is-now .tl__l{color:var(--ink)}
@media (max-width:620px){
  .tl{grid-auto-flow:row;gap:18px}
  .tl__i{padding-top:0;padding-left:30px}
  .tl__i::before{top:0;bottom:-18px;left:7px;right:auto;width:1px;height:auto}
  .tl__i:last-child::before{display:none}
  .tl__dot{top:0;left:0}
}

/* ---------- empty + loading ---------- */
.empty{display:grid;justify-items:center;text-align:center;gap:14px;padding:clamp(50px,8vw,110px) 20px;
  max-width:46ch;margin-inline:auto}
.empty__ico{width:46px;height:46px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line);border-radius:50%}
.empty__ico svg{width:19px;height:19px;stroke:var(--ink-45);fill:none;stroke-width:1.2}
.empty__t{font-family:var(--display);font-weight:300;font-size:var(--d3);line-height:1.05;
  letter-spacing:-.015em;text-wrap:balance}
.empty__p{color:var(--ink-70);font-size:var(--t-meta)}
.empty .btn{margin-top:8px}

.sk{display:grid;gap:10px}
.sk__img{aspect-ratio:4/5;background:var(--ivory)}
.sk__l{height:11px;background:var(--ivory);width:70%}
.sk__l--s{width:40%}
.skeletons .sk__img,.skeletons .sk__l{position:relative;overflow:hidden}
.skeletons .sk__img::after,.skeletons .sk__l::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  animation:shimmer 1.5s infinite;
}
@keyframes shimmer{to{transform:translateX(100%)}}

/* ---------- scrim, drawer, toast ---------- */
.scrim{position:fixed;inset:0;z-index:70;background:rgba(21,18,14,.38);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .28s var(--ease)}
.scrim.on{opacity:1}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(430px,100vw);background:var(--milk);
  border-radius:var(--radius-xl) 0 0 var(--radius-xl);
  display:flex;flex-direction:column;transform:translateX(101%);
  /* no cast shadow: the scrim behind it is what separates the panel from the
     page, and the shadow spilled onto the content as the panel slid in */
  opacity:0;transition:transform .28s var(--slow),opacity .28s var(--ease);
}
.drawer.on{transform:none;opacity:1}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px var(--gutter-d,24px);border-bottom:1px solid var(--line-soft)}
.drawer__head button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.3}
.drawer__ship{padding:14px 24px;border-bottom:1px solid var(--line-soft);display:grid;gap:9px}
.drawer__ship p{font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-70)}
.meter{display:block;height:2px;background:var(--stone);position:relative;overflow:hidden}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--accent);transition:width .6s var(--slow)}
.drawer__body{flex:1;overflow-y:auto;padding:4px 24px}
.drawer__empty{flex:1;display:grid;align-content:center;justify-items:center;gap:12px;text-align:center;padding:30px 28px}
.drawer__empty-t{font-family:var(--display);font-weight:300;font-size:var(--d4);letter-spacing:-.012em}
.drawer__empty-p{color:var(--ink-70);font-size:var(--t-meta);max-width:30ch}
.drawer__cross{border-top:1px solid var(--line-soft);padding:14px 24px 4px}
.drawer__foot{border-top:1px solid var(--line-soft);padding:18px 24px 22px;display:grid;gap:12px}
.drawer__sum{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t-meta)}
.drawer__sum b{font-size:1.125rem;font-weight:500;font-variant-numeric:tabular-nums}
.drawer__note{font-size:var(--t-label);color:var(--ink-45);letter-spacing:.04em}
.btn--full{width:100%}
.drawer__view{justify-self:center}

.cline{display:grid;grid-template-columns:76px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.cline__img{aspect-ratio:4/5;overflow:hidden;background:var(--ivory)}
.cline__img img{width:100%;height:100%;object-fit:cover}
.cline__b{display:grid;gap:4px;align-content:start}
.cline__brand{font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45)}
.cline__n{font-size:var(--t-meta);font-weight:500;line-height:1.3}
.cline__v{font-size:var(--t-label);color:var(--ink-45)}
.cline__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
/* removal lives in the corner of the line, not as a word under the quantity */
.cline{position:relative}
.cline__x{
  position:absolute;top:16px;right:0;width:32px;height:32px;display:grid;place-items:center;
  color:var(--ink-25);transition:color .25s var(--ease),transform .35s var(--slow);
}
.cline__x svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.4}
.cline__x:hover{color:var(--ink)}
.cline__x:hover svg{transform:rotate(90deg)}
.cline__x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cline.is-going{opacity:0;transition:opacity .18s var(--ease)}
.cline__row{padding-right:34px}
.cline__p{font-size:var(--t-meta);font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- wishlist drawer ---------- */
/* it sits beside the bag drawer and borrows its shell; only the width ramp,
   the quicker slide and the rows below are its own */
.drawer--wish{width:min(460px,100vw);transition:transform .36s cubic-bezier(.22,.61,.36,1)}
.drawer--wish:not(.on){transition-duration:.28s}   /* leaving is a touch quicker */
@media (max-width:1024px){.drawer--wish{width:min(400px,100vw)}}
@media (max-width:560px){
  .drawer--wish{width:100vw;border-radius:0}
}
.drawer__empty--tight{align-content:start;padding-top:clamp(48px,12vh,96px);gap:10px}
.drawer__empty-i{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);
  border-radius:50%;margin-bottom:6px}
.drawer__empty-i svg{width:17px;height:17px;stroke:var(--ink-45);fill:none;stroke-width:1.2}
.drawer__empty--tight .btn{margin-top:8px}

.wline{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:start;
  padding:15px 0;border-bottom:1px solid var(--line-soft)}
.wline__img{aspect-ratio:4/5;overflow:hidden;background:var(--ivory);border-radius:var(--radius-sm)}
.wline__img img{width:100%;height:100%;object-fit:cover}
.wline__b{display:grid;gap:3px;align-content:start;min-width:0}
.wline__brand{font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45)}
.wline__n{font-size:var(--t-meta);font-weight:500;line-height:1.3}
.wline__n:hover{color:var(--accent)}
.wline__p{font-size:var(--t-meta);font-weight:500;font-variant-numeric:tabular-nums;margin-top:2px}
.wline__add{
  justify-self:start;margin-top:8px;font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;
  padding-bottom:3px;border-bottom:1px solid var(--line);transition:color .3s var(--ease),border-color .3s var(--ease);
}
.wline__add:hover{color:var(--accent);border-color:var(--accent)}
.wline__rm{width:26px;height:26px;display:grid;place-items:center;color:var(--ink-25);
  border-radius:50%;transition:color .3s var(--ease),background .3s var(--ease)}
.wline__rm svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.4}
.wline__rm:hover{color:var(--ink);background:var(--ivory)}

@media (prefers-reduced-motion:reduce){.drawer--wish{transition:none}}

.toast{position:fixed;left:50%;bottom:26px;z-index:90;transform:translate(-50%,calc(100% + 40px));
  background:var(--ink);color:var(--milk);padding:13px 20px;display:flex;align-items:center;gap:12px;
  font-size:var(--t-meta);transition:transform .55s var(--slow);max-width:calc(100vw - 32px)}
.toast.on{transform:translate(-50%,0)}
.toast svg{width:14px;height:14px;stroke:var(--accent-soft);fill:none;stroke-width:1.6;flex:none}
.toast a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ---------- search overlay ---------- */
/* search: the field is the interface, the lists below are shortcuts */
.sover{position:fixed;inset:0;z-index:85;background:var(--milk);display:flex;flex-direction:column;
  opacity:0;transform:translateY(-10px);transition:opacity .28s var(--ease),transform .3s var(--slow)}
.sover.on{opacity:1;transform:none}
.sover__bar{padding-block:clamp(14px,1.8vw,26px)}
.sover__in{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px)}
.sover__form{
  flex:1;display:flex;align-items:center;gap:14px;min-width:0;
  border-bottom:1px solid var(--line);padding-bottom:clamp(10px,1.2vw,16px);
  transition:border-color .3s var(--ease);
}
.sover__form:focus-within{border-bottom-color:var(--ink)}
.sover__icon{width:20px;height:20px;stroke:var(--ink-45);fill:none;stroke-width:1.3;flex:none;
  transition:stroke .3s var(--ease)}
.sover__form:focus-within .sover__icon{stroke:var(--ink)}
.sover__form input{
  flex:1;min-width:0;border:0;background:none;outline:none;border-radius:0;color:var(--ink);
  font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,3.4vw,2.6rem);letter-spacing:-.015em;
  caret-color:var(--accent);
}
.sover__form input::placeholder{color:var(--ink-25)}
.sover__form input::-webkit-search-cancel-button{display:none}
.sover__close{flex:none;color:var(--ink-45);transition:color .3s var(--ease)}
.sover__close:hover{color:var(--ink)}
.sover__close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.3}

.sover__body{flex:1;overflow-y:auto;padding-block:clamp(20px,2.4vw,34px) 40px;
  border-top:1px solid var(--line-soft)}
.sover__h{font-size:var(--t-meta);font-weight:500;letter-spacing:.01em;color:var(--ink-45)}
.sover__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr);
  gap:clamp(20px,2.6vw,44px)}
.sover__col{display:grid;align-content:start;gap:clamp(12px,1.3vw,18px)}
/* On a phone the product picks pushed the two lists that actually help someone
   search below the fold. Search opens on the lists; products arrive once there
   is a query. display:none takes the column's grid track and gap with it, and
   its images are loading="lazy", so nothing is fetched for a hidden block. */
@media (max-width:700px){
  .sover__col--picks{display:none}
}
.sover__pop{display:grid;gap:1px}
/* the arrow belongs to the words, so the row is only as wide as its text */
.sover__pop a{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 0;font-size:var(--t-body);color:var(--ink-70);
  transition:color .25s var(--ease);
}
.sover__pop svg{width:12px;height:12px;flex:none;stroke:currentColor;fill:none;stroke-width:1.3;
  opacity:0;transform:translateX(-3px);transition:opacity .22s var(--ease),transform .22s var(--ease)}
.sover__pop a:hover,.sover__pop a:focus-visible{color:var(--ink)}
.sover__pop a:hover svg,.sover__pop a:focus-visible svg{opacity:.6;transform:translateX(3px)}

/* one lead product, two compact rows beside it */
.sover__grid{display:grid;grid-template-columns:minmax(0,57fr) minmax(0,43fr);
  gap:clamp(16px,1.6vw,20px)}
.sover__side{display:grid;gap:clamp(16px,1.6vw,20px);align-content:start}
.sover__card{display:grid;gap:9px;align-content:start}
.sover__card .sover__ph{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--ivory);
  border-radius:var(--radius-md)}
.sover__card img,.sover__row img{width:100%;height:100%;object-fit:cover;
  transition:transform .25s var(--ease)}
.sover__card:hover img,.sover__row:hover img{transform:scale(1.02)}
.sover__card b,.sover__row b{font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--ink-45);font-weight:500;display:block}
.sover__card em,.sover__row em{font-style:normal;font-size:var(--t-meta);font-weight:500;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .25s var(--ease)}
.sover__card:hover em,.sover__row:hover em{color:var(--accent)}
.sover__card span,.sover__row span.sover__price{font-size:var(--t-meta);font-variant-numeric:tabular-nums}

.sover__row{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center}
.sover__row .sover__ph{aspect-ratio:4/5;overflow:hidden;background:var(--ivory);
  border-radius:var(--radius-sm);display:block}
.sover__rowb{display:grid;gap:4px;min-width:0}
.sover__rowb span{font-size:var(--t-meta);font-variant-numeric:tabular-nums}
.sover__go{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.3;color:var(--ink-45);
  opacity:0;transform:translateX(-3px);transition:opacity .22s var(--ease),transform .22s var(--ease)}
.sover__row:hover .sover__go{opacity:1;transform:translateX(0)}
@media (max-width:860px){
  .sover__grid{grid-template-columns:1fr}
}

.sover__results{display:grid;gap:clamp(20px,2.4vw,32px)}
.sres__group{display:grid;gap:10px}
.sres__list{display:grid;gap:1px}
.sres__row{display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-soft);
  transition:transform .3s var(--ease)}
.sres__row:hover{transform:translateX(4px)}
.sres__row img{width:48px;height:60px;object-fit:cover;background:var(--ivory);border-radius:var(--radius-sm)}
.sres__t{display:grid;gap:2px;flex:1;min-width:0}
.sres__t b{font-weight:500;font-size:var(--t-meta)}
.sres__t span{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45)}
.sres__p{font-size:var(--t-meta);font-variant-numeric:tabular-nums;color:var(--ink-45)}
@media (max-width:860px){
  .sover__cols{grid-template-columns:1fr;gap:clamp(22px,4vw,32px)}
  .sover__grid{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  .sover__grid::-webkit-scrollbar{display:none}
  .sover__card{flex:0 0 min(46vw,190px)}
}

/* ---------- product grid ---------- */
.pgrid{display:grid;gap:clamp(18px,2vw,34px) clamp(12px,1.5vw,26px)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1100px){.grid--3{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.grid--4,.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.pgrid{gap:22px 10px}}

/* ---------- misc shared ---------- */
.note{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-meta);color:var(--ink-70)}
.note svg{width:16px;height:16px;flex:none;stroke:var(--ink-45);fill:none;stroke-width:1.2;margin-top:2px}
.divider{height:1px;background:var(--line-soft);margin-block:clamp(30px,4vw,60px)}
.lede{font-size:var(--t-lead);color:var(--ink-70);max-width:62ch;text-wrap:pretty}

/* ---------- small layout utilities (replacing one-off inline styles) ---------- */
.pt-sm{padding-top:clamp(14px,1.6vw,22px)}
.pt-md{padding-top:clamp(22px,2.6vw,38px)}
.center{justify-self:center;text-align:center}
.meta-note{font-size:var(--t-meta);color:var(--ink-45)}
.einsert--solo{grid-column:auto}
.field__in--area{height:auto;padding-top:22px;resize:vertical;font-family:inherit}
.order-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2vw,32px)}
.u-line{text-decoration:underline;text-underline-offset:3px}
.num{font-variant-numeric:tabular-nums}