/* ==========================================================================
   Rashtions — remaining store sections, plus three components ported from
   Vengeance UI (React/Tailwind in the original; vanilla CSS here).
   ========================================================================== */

:root{ --utility-h:34px }

/* ---------------------------------------------------------- utility bar */
.utility{
  position:fixed;top:0;left:0;right:0;z-index:101;
  height:var(--utility-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gut);
  background:var(--ink);color:var(--paper);
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
}
.utility__right{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.utility a{color:currentColor;text-decoration:none;opacity:.85}
.utility a:hover{opacity:1}
.utility__lang{
  background:none;border:1px solid rgba(244,239,229,.35);color:currentColor;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  padding:4px 9px;cursor:pointer;transition:background-color .3s ease,color .3s ease;
}
.utility__lang:hover{background:var(--paper);color:var(--ink)}

.topbar{top:var(--utility-h)}
.topbar__actions{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px)}
.topbar__cta{
  color:currentColor;text-decoration:none;
  font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid currentColor;padding:10px 18px;
  transition:background-color .3s ease,color .3s ease;
}
.topbar__cta:hover{background:var(--ink);color:var(--paper)}

/* ------------------------------------------------------ smart nutrition */
.nutrition{
  padding:clamp(50px,8vh,100px) var(--gut);
  border-top:1px solid var(--ink-12);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);
  gap:clamp(30px,5vw,90px);
}
.nutrition__h{font-size:clamp(30px,3.6vw,58px)}
.nutrition__list{list-style:none;margin:0;padding:0}
.nutrition__list li{
  display:grid;grid-template-columns:44px minmax(140px,.6fr) 1fr;
  align-items:baseline;gap:clamp(12px,2vw,30px);
  padding:20px 0;border-bottom:1px solid var(--ink-12);
}
.nutrition__list li:first-child{border-top:1px solid var(--ink-12)}
.nutrition__list span{font-size:.62rem;letter-spacing:.18em;color:var(--rust)}
.nutrition__list b{
  font-family:var(--display);font-weight:400;
  font-size:clamp(17px,1.6vw,24px);letter-spacing:-.01em;
}
.nutrition__list i{font-style:normal;font-size:.86rem;line-height:1.6;color:var(--ink-60)}

/* --------------------------------------------------------- quantity row */
.buy{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.qty{display:inline-flex;align-items:center;border:1px solid rgba(246,241,231,.4)}
.qty button{
  background:none;border:0;cursor:pointer;color:inherit;
  width:38px;height:44px;font-size:1rem;line-height:1;
  transition:background-color .25s ease;
}
.qty button:hover{background:rgba(246,241,231,.16)}
.qty output{min-width:34px;text-align:center;font-variant-numeric:tabular-nums;font-size:.9rem}

/* -------------------------------------------------------------- bundles */
.bundles{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(70px,11vh,150px) var(--gut);
  border-top:1px solid var(--ink-12);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);
  column-gap:clamp(34px,6vw,100px);row-gap:0;align-items:center;
  background:var(--paper);
}
.bundles::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url(../assets/theme-brown.png) repeat;
  background-size:clamp(280px,26vw,460px);
  background-position:var(--bundles-tile-x,0) var(--bundles-tile-y,0);
  opacity:.1;
}
.bundles__h{font-size:clamp(36px,4.8vw,80px);margin:0 0 22px}
.bundles__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.5vw,40px)}
.tier{border-top:1px solid var(--ink);padding-top:22px}
.tier__buy{margin:0 0 14px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.tier__off{
  margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(46px,6vw,104px);line-height:.9;letter-spacing:-.04em;
}
.tier__off em{font-style:normal;font-size:.32em;color:var(--rust);margin-left:.06em}
.tier__l{margin:12px 0 0;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-60)}
.tier__aed{margin:10px 0 0;font-size:.82rem;color:var(--ink);font-variant-numeric:tabular-nums}
.tier__aed s{color:var(--ink-60);margin-left:8px}
.bundles__cta{margin-top:28px}
.bundles__head .lede{color:var(--ink)}
.bundles__retail{
  grid-column:1 / -1;margin:clamp(24px,4vh,42px) 0 0;padding-top:18px;
  border-top:1px solid var(--ink-12);
  font-size:.6rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-60);
}

/* -------------------------------------------------------- bite boost go */
.boost{
  position:relative;min-height:78svh;display:grid;align-content:center;
  padding:clamp(70px,11vh,140px) var(--gut);overflow:hidden;isolation:isolate;
  background:var(--paper);
}
.boost__bg{
  /* Taller than the band on purpose: js/store.js parallaxes this +/-6%, and an
   * element sized exactly to the box would drag a bare edge into view at the
   * top or bottom of the travel. The 4% overhang is the slack that costs, and
   * it is wider than the 3.5% the parallax actually spends. */
  position:absolute;left:0;right:0;top:-4%;z-index:-1;
  width:100%;height:108%;object-fit:cover;object-position:center bottom;
  will-change:transform;
}
.boost::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* Reaches only as far as the copy does. The photograph's own ground is
     already this cream, so the wash exists to seat the type, not to hide the
     picture — it is clear well before the bites begin at 38% across. */
  background:linear-gradient(90deg,var(--paper) 15%,rgba(244,239,229,.55) 27%,rgba(244,239,229,0) 38%);
}
.boost__body{max-width:34ch}
.boost__h{font-size:clamp(40px,5.6vw,92px);margin:0 0 22px}

/* ==========================================================================
   LINE HOVER LINK — ported from Vengeance UI "line-hover-link"
   (slide + arc variants, on our tokens)
   ========================================================================== */
.link-hover{
  cursor:pointer;position:relative;display:inline-flex;width:fit-content;
  white-space:nowrap;color:currentColor;text-decoration:none;outline:none;
}
.link-hover::before{
  content:"";position:absolute;left:0;top:100%;
  width:100%;height:1px;background:currentColor;pointer-events:none;
}
.link-hover:focus-visible{outline:2px solid color-mix(in srgb,currentColor 45%,transparent);outline-offset:.25rem}
.link-hover--slide::before{transform:scale3d(0,1,1);transform-origin:100% 50%;transition:transform .3s ease}
.link-hover--slide:hover::before,
.link-hover--slide:focus-visible::before{transform:scale3d(1,1,1);transform-origin:0% 50%}

.link-hover--arc::before{display:none}
.link-hover__graphic{
  position:absolute;left:0;top:0;fill:none;stroke:currentColor;
  stroke-width:1px;pointer-events:none;
}
.link-hover__graphic--stroke path{stroke-dasharray:1;stroke-dashoffset:1}
.link-hover__graphic--arc{left:-23%;top:73%}
.link-hover__graphic--arc path{transition:stroke-dashoffset .4s cubic-bezier(.7,0,.3,1)}
.link-hover:hover .link-hover__graphic--stroke path,
.link-hover:focus-visible .link-hover__graphic--stroke path{
  stroke-dashoffset:0;transition-duration:.3s;transition-timing-function:cubic-bezier(.8,1,.7,1);
}

.faq__all{
  display:inline-block;margin-top:clamp(30px,5vh,54px);
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rust);
}

/* --------------------------------------------------------------- footer */
.foot{
  padding:clamp(60px,9vh,120px) var(--gut) clamp(28px,4vh,44px);
  border-top:1px solid var(--ink-12);
  display:block;
}
.foot__top{
  display:grid;grid-template-columns:1.1fr .7fr .9fr 1.3fr;
  gap:clamp(28px,4vw,70px);
  padding-bottom:clamp(40px,6vh,70px);
}
.foot__logo{height:26px;width:auto;margin-bottom:18px}
.foot__ar{font-family:var(--arabic);font-size:1rem;color:var(--ink-60);margin:0}
.foot__col{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.foot__col a{color:var(--ink-60);font-size:.8rem;transition:color .3s ease}
.foot__col a:hover{color:var(--zone-ink)}
.foot__ttl{
  margin:0 0 6px;font-size:.62rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--rust);
}
.foot__note{margin:0 0 6px;font-size:.8rem;color:var(--ink-60);line-height:1.6;max-width:34ch}
.foot__col--wide .signup__form{max-width:none;width:100%}
.foot__bar{
  border-top:1px solid var(--ink-12);padding-top:22px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-30);
}

/* The maker's credit — the last line on the page, under the legal bar and
   quieter than it. Clause & Code's mark keeps its own teal and gold rather
   than being tinted into this palette: it is somebody else's brand, and at
   this size it reads as a signature, not as a second logo competing with the
   Rashtions one above. It sits back a little until you look at it. */
.foot__by{
  margin:26px 0 0;display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,1.6vw,18px);
  opacity:.72;transition:opacity .35s ease;
}
.foot__by:hover{opacity:1}
.foot__by-label{
  font-size:.6rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-30);
}
/* heights, not widths: the two marks have very different aspect ratios
   (2.7 and 0.55), so matching them by height is what makes them sit level */
.foot__by-mark{height:26px;width:auto}
.foot__by-bot{height:34px;width:auto}

/* --------------------------------------------------------------- drawer */
.drawer{position:fixed;inset:0;z-index:180}
.drawer[hidden]{display:none}
.drawer__scrim{position:absolute;inset:0;background:rgba(27,20,16,.5);opacity:0;transition:opacity .4s ease}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{
  position:absolute;top:0;right:0;height:100%;
  width:min(420px,92vw);background:var(--paper);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.drawer.is-open .drawer__panel{transform:translateX(0)}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 28px;border-bottom:1px solid var(--ink-12);
}
.drawer__ttl{margin:0;font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.drawer__ttl em{font-style:normal;color:var(--ink-30);margin-left:10px}
.drawer__x{background:none;border:0;cursor:pointer;font-size:1.5rem;line-height:1;color:var(--ink)}
.drawer__body{flex:1;overflow-y:auto;padding:26px 28px}
.drawer__empty{color:var(--ink-30);font-size:.9rem;margin:0}
.cart-line{
  display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--ink-12);
}
.cart-line b{font-family:var(--display);font-weight:400;font-size:1.05rem}
.cart-line span{font-size:.75rem;color:var(--ink-60);font-variant-numeric:tabular-nums}
.cart-line button{background:none;border:0;cursor:pointer;color:var(--ink-30);font-size:1.1rem}
.cart-line button:hover{color:var(--rust)}
.drawer__foot{padding:24px 28px;border-top:1px solid var(--ink-12)}
.drawer__total{
  display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
}
.drawer__total b{font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:-.02em}
.drawer__nudge{
  margin:0 0 14px;padding:10px 14px;
  background:rgba(158,74,44,.08);color:var(--rust);
  font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.drawer__row{
  display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-60);
}
.drawer__row em{font-style:normal;color:var(--ink-30)}
.drawer__row b{font-family:var(--display);font-weight:400;font-size:1rem;color:var(--rust)}
.drawer__checkout{display:block;width:100%;text-align:center;border:0;cursor:pointer;font-family:var(--ui)}
.drawer__checkout.is-disabled{opacity:.4}
.drawer__continue{
  display:block;margin:14px auto 0;background:none;border:0;cursor:pointer;
  font-family:var(--ui);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-60);text-decoration:underline;text-underline-offset:3px;
}
.drawer__continue:hover{color:var(--ink)}

/* ----------------------------------------------------------- responsive */
@media (max-width:980px){
  .nutrition,.bundles{grid-template-columns:1fr;gap:34px}
  .foot__top{grid-template-columns:1fr 1fr;row-gap:40px}
  .boost::after{background:linear-gradient(180deg,var(--paper) 14%,rgba(244,239,229,.7) 48%,rgba(244,239,229,0) 72%)}
  /* A four-jar lineup cannot survive a portrait crop, so on narrow screens the
   * photograph is shown whole and pinned to the foot of the band — which is
   * where the gradient above already clears space for it. */
  .boost{min-height:64svh}
  /* The photograph's top edge is blended into the paper in the file itself
     (see tools/), so shown whole it meets the page without a seam. */
  .boost__bg{top:0;height:100%;object-fit:contain;object-position:center bottom}
}
@media (max-width:860px){
  .utility span:first-child{display:none}
  .utility{justify-content:flex-end}
  .topbar__cta{padding:9px 13px;letter-spacing:.14em}
  .nutrition__list li{grid-template-columns:34px 1fr;row-gap:6px}
  .nutrition__list i{grid-column:2}
  .bundles__grid{grid-template-columns:1fr;gap:20px}
  .foot__top{grid-template-columns:1fr}
}



/* ==========================================================================
   MOTION PRIMITIVES + THE SECTIONS ADDED IN THEIR ORIGINAL ORDER
   ========================================================================== */

/* split-word masks */
/* Fraunces' WONK axis draws noticeably deep, characterful descenders —
   deeper than the tight line-height:.94 on .display leaves room for, so the
   reveal mask was cropping the tails off g/y/p/j. Pad the mask itself well
   past the glyphs' real ink instead of past the font's nominal line box. */
.sw{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.05em 0 .24em}
.sw > i{display:inline-block;font-style:inherit;will-change:transform}

/* scroll progress, riding the utility bar */
.utility__progress{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--rust);transform:scaleX(0);transform-origin:0 50%;
}


/* ----------------------------------------- two ingredients, one idea */
/* The heritage scene: the label's own tile geometry as the walls, the why
   in copy, then the whole jar laid out as a row of six. Centred — the one
   scene that speaks rather than sells. */
.story{
  position:relative;min-height:78svh;display:grid;align-content:center;justify-items:center;
  padding:clamp(70px,11vh,140px) var(--gut);overflow:hidden;isolation:isolate;
  text-align:center;
  background:var(--paper);
}
.story::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url(../assets/theme-brown.png) repeat;
  background-size:clamp(280px,26vw,460px);
  background-position:var(--story-tile-x,0) var(--story-tile-y,0);
  opacity:.1;
}
.story__inner{position:relative;max-width:52ch}
.story__h{font-size:clamp(30px,3.4vw,54px);margin:16px 0 18px}
.story__inner .lede{max-width:44ch;margin-inline:auto;font-size:clamp(14px,1vw,16px)}
.story__ar{
  margin:18px 0 0;font-family:var(--arabic);
  font-size:clamp(16px,1.4vw,22px);color:var(--rust);
}

/* the six foods, assembled: the flying date lands as one of its own row
   rather than a lone corner ornament — see js/site.js paintFlyer, which
   targets #storyDates wherever it now sits. Kept close under the copy
   (not a screen away) so the flight — tuned to land once #storyDates is
   on screen — finishes inside this section instead of bleeding into the
   next one. */
.story__ings-k{
  position:relative;margin:clamp(18px,2.8vh,32px) 0 0;
  font-family:var(--ui);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-60);
}
.story__ings{
  position:relative;margin-top:clamp(14px,2vh,20px);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;
  gap:clamp(14px,4vw,28px);max-width:1180px;width:100%;margin-inline:auto;
}
.story__ings-item{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  width:clamp(78px,22vw,116px);margin:0;
}
.story__ings-item img{
  width:100%;height:clamp(78px,20vw,116px);object-fit:contain;
  filter:drop-shadow(0 20px 26px rgba(27,20,16,.16));
}
.story__ings-item figcaption{
  font-family:var(--ui);font-size:.62rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);
  text-align:center;
}
/* one line on anything wider than a phone, matching the client's own
   ingredient row — six items shrink together via vw before they'd ever
   need to wrap, and grow larger than the mobile 3x2 grid needs */
@media (min-width:760px){
  .story__ings{flex-wrap:nowrap;gap:clamp(18px,3vw,44px)}
  .story__ings-item{width:clamp(90px,10.2vw,168px);gap:16px}
  .story__ings-item img{height:clamp(90px,9.6vw,168px)}
}

/* --------------------------------------------------------- gift set */
/* Copy on the left, one box at a time on the right between two arrows. This
   used to be a pinned horizontal gallery below the copy, which buried the ten
   boxes under a screen of empty text. */
.gift{
  position:relative;isolation:isolate;
  /* the boxes' own materials: crimson velvet, lit warm from below by the
     gold interior — colours sampled from the client's gift photography */
  background:linear-gradient(165deg,#4A1420 0%,#3A0E1A 38%,#2B0813 70%,#20060E 100%);
  color:#F2E7D6;
  padding:clamp(80px,12vh,160px) var(--gut) clamp(70px,10vh,130px);
  display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);
  grid-template-rows:auto 1fr;
  grid-template-areas:"intro carousel" "cta carousel";
  gap:clamp(28px,4vw,80px);align-items:center;overflow:clip;
}
.gift__intro{grid-area:intro}
.gift__carousel{grid-area:carousel}
.gift__cta{grid-area:cta;align-self:start;justify-self:start}
.gift::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  /* gold pooled low, the way the open box lights its lid */
  background:
    radial-gradient(70% 55% at 30% 108%, rgba(214,171,94,.30), transparent 68%),
    radial-gradient(46% 46% at 96% 2%, rgba(214,171,94,.14), transparent 70%);
}
.gift::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(../assets/theme-brown.png) repeat;
  background-size:clamp(280px,26vw,460px);
  background-position:var(--gift-tile-x,0) var(--gift-tile-y,0);
  /* overlay reads the tile through the section's own velvet colour instead
     of stamping brown on top of it */
  mix-blend-mode:overlay;opacity:.4;
}
.gift > *{position:relative;z-index:1}
.gift .label{color:#D6AB5E}
.gift__intro{padding:0;max-width:58ch}
.gift__h{font-size:clamp(38px,5.2vw,88px);margin:0 0 26px}
.gift__p{color:rgba(242,231,214,.72);line-height:1.7;margin:0 0 34px;max-width:44ch}

.gift__carousel{
  display:grid;align-items:center;justify-content:center;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:'prev stage next' '. idx .';
  gap:clamp(10px,1.6vw,26px);
}
.gcar__stage{
  grid-area:stage;position:relative;display:grid;
  width:100%;max-width:470px;aspect-ratio:5/4;margin-inline:auto;
}
/* A gold frame, not a glow: the thin foiled line the boxes themselves use. */
.gcar__stage::before{
  content:"";position:absolute;inset:-16px;pointer-events:none;
  border:1px solid rgba(214,171,94,.45);border-radius:16px;
}

/* every box occupies the same cell; only the current one is shown */
.gcar__stage .box{
  grid-area:1/1;margin:0;opacity:0;pointer-events:none;
}
.gcar__stage .box.is-on{opacity:1;pointer-events:auto}
.box img{
  width:100%;height:100%;object-fit:cover;border-radius:10px;
  /* a lit top edge, then the object's own weight below it */
  box-shadow:0 26px 60px rgba(0,0,0,.7);
  will-change:transform,opacity;
}
.gcar__btn{
  appearance:none;cursor:pointer;padding:0;
  width:clamp(42px,3.4vw,54px);aspect-ratio:1;border-radius:50%;
  background:transparent;border:1px solid rgba(239,231,218,.28);
  color:#EFE7DA;display:grid;place-items:center;
  transition:background-color .35s ease,border-color .35s ease,transform .35s ease;
}
.gcar__btn:first-of-type{grid-area:prev}
.gcar__btn:last-of-type{grid-area:next}
.gcar__btn svg{width:42%;height:42%;fill:none;stroke:currentColor;stroke-width:1.6}
.gcar__btn:hover{background:rgba(239,231,218,.1);border-color:rgba(239,231,218,.55)}
.gcar__btn:active{transform:scale(.94)}
.gcar__btn:focus-visible{outline:2px solid #EFE7DA;outline-offset:3px}

.gcar__idx{
  grid-area:idx;margin:8px 0 0;text-align:center;
  font-family:var(--display);font-weight:300;font-size:.95rem;
  color:rgba(239,231,218,.5);
}
.gcar__idx b{font-weight:300;font-size:1.5rem;color:#EFE7DA;margin-right:.15em}

/* ==========================================================================
   PINNED FLAVOUR STAGE
   One screen. The jar and its copy swap in and out while the ground colour
   and the tile field cross-dissolve underneath.
   ========================================================================== */
.fstage{
  position:relative;height:100svh;overflow:hidden;
  color:#F6F1E7;isolation:isolate;
}
/* the scene announces itself — top-left, clear of the marks on the right */
.fstage__title{
  position:absolute;z-index:2;left:var(--gut);top:clamp(108px,14vh,150px);
  margin:0;font-size:.66rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(246,241,231,.72);
}
.fstage__bg{position:absolute;inset:0;z-index:-3;background:#7A5240;will-change:background-color}
.fstage__tiles{position:absolute;inset:0;z-index:-2;overflow:hidden}
.ftile{
  position:absolute;inset:-10%;opacity:0;
  background-repeat:repeat;background-size:clamp(280px,26vw,460px);
  background-position:var(--fstage-tile-x,0) var(--fstage-tile-y,0);
  will-change:opacity,transform;
}
.fstage::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(115% 85% at 42% 45%,transparent 28%,rgba(0,0,0,.4) 100%);
}

.fstage__inner{
  height:100%;display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:clamp(24px,5vw,90px);
  /* same fix as the mobile rule below: padding-top alone (~90px at a short
     viewport) landed almost exactly at the fixed header's own height, so the
     centred copy's index line rode right under the topbar. */
  padding:calc(var(--utility-h) + clamp(90px,12vh,140px)) var(--gut) clamp(90px,12vh,130px);
}
.fstage__media{position:relative;display:grid;place-items:center;height:100%}
.fjar{
  grid-area:1/1;width:clamp(190px,25vw,370px);height:auto;opacity:0;
  filter:drop-shadow(0 44px 62px rgba(0,0,0,.45));
  will-change:transform,opacity;
}
.fstage__copy{display:grid;align-items:center}
.fslide{grid-area:1/1;opacity:0;max-width:38ch}
.fslide > *{will-change:transform,opacity}

/* Claim marks — parked in the empty column between the copy (which ends at
   77% across) and the right gutter, so they never crowd the type. The middle
   one is inset to break the stack out of a rigid line. */
.fstage__marks{
  position:absolute;z-index:2;pointer-events:none;
  /* The topbar is fixed and its underside sits at ~115px, so the stack starts
     below that with room to spare rather than tucking under it. */
  top:clamp(130px,16vh,170px);right:clamp(18px,3.4vw,54px);
  display:grid;justify-items:end;gap:clamp(10px,1.6vh,24px);
}
.fstage__marks img{
  display:block;width:clamp(74px,7.6vw,116px);height:auto;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.34));
  will-change:transform;
}
.fstage__marks img:nth-child(2){margin-right:clamp(16px,2.4vw,40px)}

.fstage__nav{
  position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(26px,5vh,52px);
  display:flex;align-items:center;justify-content:flex-end;gap:20px;z-index:3;
}
.fstage__dots{display:flex;gap:12px}
.fstage__dots button{
  appearance:none;border:0;padding:0;cursor:pointer;
  width:34px;height:2px;background:rgba(246,241,231,.3);
  transition:background-color .4s ease,transform .4s ease;
}
.fstage__dots button.is-on{background:#F6F1E7;transform:scaleY(2)}

@media (max-width:980px){
  /* this used to live in an earlier @media block, ABOVE the base .gift and
     .gcar__stage rules further down this file — same specificity, so the
     later base rule always won regardless of screen width. The gift section
     never actually stacked on mobile, which squeezed the carousel stage
     down to a sliver next to the two arrow buttons. */
  .gift{
    grid-template-columns:1fr;grid-template-rows:auto auto auto;
    grid-template-areas:"intro" "carousel" "cta";
    gap:clamp(30px,5vh,54px);
  }
  .gift__cta{justify-self:stretch}
  .gcar__stage{max-width:340px}
  .fstage__inner{
    grid-template-columns:1fr;grid-template-rows:1fr auto;
    gap:10px;
    /* clears the header AND the badge row above the jar (.fstage__marks,
       positioned separately) — the jar used to start before the badges even
       finished, overlapping them by ~30px. */
    padding-top:calc(var(--utility-h) + clamp(120px,17vh,150px));
    /* trimmed along with everything below it: on a short window (~600-650px,
       common with a real phone's browser chrome) the old spacing pushed the
       price row and Add to Cart button below the fold entirely — this was
       never a contrast problem, the content just didn't fit the screen. */
    padding-bottom:clamp(56px,9vh,110px);
  }
  .fstage__media{height:auto;min-height:24svh}
  .fjar{width:clamp(140px,38vw,220px)}
  .fslide{max-width:none}
  .fstage .flavour__idx{margin-bottom:10px}
  .fstage .flavour__h{font-size:clamp(30px,7.5vw,52px);margin-bottom:12px}
  .fstage .flavour__p{font-size:.9rem;margin-bottom:16px}
  .fstage .flavour__meta{padding-top:14px;margin-bottom:18px}
  .fstage .qty button{width:30px;height:36px;font-size:.85rem}
  .fstage .qty output{min-width:26px;font-size:.8rem}
  .fstage .btn--buy{padding:13px 20px;font-size:.6rem}
  /* the dot nav has no room to sit next to a mobile-width buy row without
     crowding it, and the flavours are already reachable by scrolling. */
  .fstage__nav{display:none}
}


/* ---------------------------------------------------- floating ingredients */
/* Real ingredient photography drifting behind the jar. Each flavour carries
   its own set, and they cross-dissolve with the rest of the stage. */
/* The layer is pinned to the jar's own box rather than to the stage, and it is
   sized off the same clamp the jar uses. That makes every slot coordinate a
   jar unit — 0% is the jar's left edge, 100% its right — so an item placed at
   92% stays three-quarters swallowed by the glass at any viewport, instead of
   sliding out into open space as the column resizes. */
.fstage__ing{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(190px,25vw,370px);   /* identical to .fjar */
  aspect-ratio:324/382;            /* the jar's own proportion */
  z-index:0;pointer-events:none;
}
.fstage__inner{position:relative;z-index:1}
.fstage__nav{z-index:3}

.fgroup{position:absolute;inset:0;opacity:0}
.fing-slot{
  position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);
  width:calc(var(--s) * 62%);      /* of the jar, so they scale with it */
}
.fing-slot img{
  width:100%;height:auto;display:block;
  transform:rotate(var(--r));
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.34));
  will-change:transform;
}

@media (max-width:980px){
  /* one column of layout leaves no room for a tall stack, so the marks run as
     a small row along the top instead */
  .fstage__marks{
    /* was landing above the fixed topbar's own bottom edge, so its top slice
       rode underneath the header — clear it the same way the title row does. */
    top:clamp(100px,14.5vh,130px);right:12px;left:12px;
    grid-auto-flow:column;justify-content:end;justify-items:center;
    gap:clamp(6px,2vw,12px);
  }
  .fstage__marks img{width:clamp(34px,10vw,46px)}
  .fstage__marks img:nth-child(2){margin-right:0}
  .fstage__ing{width:clamp(150px,42vw,240px)}   /* tracks .fjar's mobile clamp */
  /* keep them clear of the copy on a single column */
  .fgroup .fing-slot:nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){
  .fing-slot img{animation:none}
}