/* ==========================================================================
   DC Stix — base
   ========================================================================== */

:root {
  --ink: #0E0E10;
  --ink-soft: #1A1A1D;
  --paper: #FFFFFF;
  --paper-warm: #FAF8F5;
  /* The median tone of the ingredient photograph's own top edge — the row the
     copy band actually meets — so the two read as one continuous surface. */
  --warm: #EEE9E7;
  --warm-0: rgba(238, 233, 231, 0);   /* the same colour at zero alpha: fading
     to `transparent` goes through black in some engines and greys the seam */
  --gold: #C9A44C;
  --gold-light: #E3C87E;
  /* The DC mark's own gold — the median of the gold pixels in dc-logo.png,
     not an eyeballed approximation. 10:1 against the black bar. */
  --gold-mark: #E1AC47;
  --muted: rgba(14, 14, 16, 0.62);
  --muted-invert: rgba(255, 255, 255, 0.66);
  --rule: rgba(14, 14, 16, 0.10);

  --serif: "Playfair Display", "Didot", "Bodoni MT", Georgia, serif;
  --sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 88px);
  /* The page's content column. Every left-aligned section resolves its left
     edge as `min(--shell, 100% - 2 * --gutter)` centred, so headings line up
     down the page at every width. Putting the cap on a box that ALSO carries
     the gutter padding gives a different answer above ~1180px — that is what
     had the video-carousel heading sitting 60px right of the one above it. */
  --shell: 1320px;

  /* Navbar. Every number is the wireframe's own, at its 1440 design width;
     the vw terms resolve to exactly those values there and shrink below it. */
  --nav-h: 80px;
  /* One set of tokens for the whole bar, so re-colouring it is these five
     values and nothing else. Black per the reference; the Figma drop shadow
     is X0 Y4 blur 27, black at 35%. */
  --nav-bg: #000000;
  --nav-fg: #FFFFFF;
  --nav-cta-bg: #FFFFFF;
  --nav-cta-fg: #0E0E10;
  --nav-shadow: 0 4px 27px rgba(0, 0, 0, 0.35);
  --nav-r: 32px;            /* bottom corners only */
  --nav-pad: clamp(20px, 5.5556vw, 80px);
  --nav-mark: 64px;
  /* 32px is the gap between the link *boxes*, as specified. Each box carries
     8px of its own side padding (a bigger tap target, and it is what makes the
     rendered word spacing land on the wireframe's ~48px). For 32px of visible
     white space between the words instead, set --nav-link-pad to 0. */
  --nav-gap: 32px;
  --nav-link-pad: 8px;
  --nav-agap: 30px;         /* between the icons and the CTA */
  --nav-fs: 17px;
  --nav-cta-fs: 15px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }

body.dcs-body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Lock scroll while the loader runs */
html.dcs-loading, html.dcs-loading body { overflow: hidden; height: 100%; }

/* `height: auto` matters: the intrinsic width/height attributes on the image
   tags are presentational hints that would otherwise beat the CSS width and
   squash the artwork. Every override below re-states height explicitly. */
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.dcs-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 4px;
}
.dcs-skip:focus { left: 12px; top: 12px; }

/* ---------- type ---------- */
.dcs-display {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  font-size: clamp(2.15rem, 5.6vw, 4.35rem);
}
.dcs-display--sm { font-size: clamp(1.85rem, 4.2vw, 3.1rem); }
.dcs-body-copy {
  font-size: clamp(0.86rem, 1.05vw, 0.98rem);
  line-height: 1.72;
  color: var(--muted);
  margin: 0;
  font-weight: 300;
}
.dcs-invert .dcs-body-copy { color: var(--muted-invert); }

.dcs-btn {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  border: 0;
  padding: 13px 26px;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .3s var(--ease-out), transform .3s var(--ease-out);
}
.dcs-btn:hover { background: #2b2b30; transform: translateY(-1px); }
.dcs-btn--gold {
  background: var(--gold-light);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 0.8rem;
  padding: 9px 22px;
}
.dcs-btn--gold:hover { background: var(--gold); }

/* ---------- reveal-on-scroll ---------- */
.dcs-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.dcs-reveal.is-in { opacity: 1; transform: none; }

/* Failsafe: if dcs-core.js never parsed (blocked asset, CDN hiccup, a JS error
   before it could add .dcs-js) nothing would ever add .is-in and the content
   would stay invisible forever. Without that class, show everything. */
html:not(.dcs-js) .dcs-reveal,
html.dcs-js-failed .dcs-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .dcs-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   1. Loading screen
   ========================================================================== */
.dcs-loader {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--ink);
  display: grid;
  place-items: center;
  transition: opacity .5s var(--ease-in-out), visibility .5s;
}
.dcs-loader__glow {
  position: absolute;
  left: 50%; top: 50%;
  width: min(58vmin, 520px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.55);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.26) 26%, rgba(255,255,255,0.08) 46%, rgba(255,255,255,0) 68%);
  opacity: 0;
  pointer-events: none;
  filter: blur(6px);
  animation: dcsGlow 1.1s var(--ease-in-out) forwards;
}
@keyframes dcsGlow {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.5); }
  40%  { opacity: 1;    transform: translate(-50%, -50%) scale(1.02); }
  72%  { opacity: 0.85; transform: translate(-50%, -50%) scale(0.94); }
  100% { opacity: 0.3;  transform: translate(-50%, -50%) scale(1.12); }
}

/* The travelling logo: one element, positioned with fixed coords, that
   morphs from loader-centre to its slot in the navbar. */
.dcs-flylogo {
  position: fixed;
  z-index: 9200;
  left: 0; top: 0;
  width: var(--fl-size, 22vmin);
  height: var(--fl-size, 22vmin);
  transform: translate3d(var(--fl-x, 50vw), var(--fl-y, 50vh), 0) translate(-50%, -50%);
  transition:
    transform .75s var(--ease-in-out),
    width .75s var(--ease-in-out),
    height .75s var(--ease-in-out);
  pointer-events: none;
}
.dcs-flylogo img { width: 100%; height: 100%; object-fit: contain; }
.dcs-flylogo.is-hidden { opacity: 0; transition: opacity .25s linear; }

.dcs-loader.is-out { opacity: 0; visibility: hidden; }

/* Skip all of it for reduced motion / no-JS */
@media (prefers-reduced-motion: reduce) {
  .dcs-loader { display: none; }
  .dcs-flylogo { display: none; }
  .dcs-loader__glow { animation: none; }
}
html.no-js .dcs-loader, html.no-js .dcs-flylogo { display: none; }
/* And the moment the inline script decides not to run it. Without this the
   black panel is painted and stays until dcs-core.js parses and removes it —
   a full-screen black flash on every skipped load, which is now the common
   case rather than a rare one. */
html.dcs-loader-skip .dcs-loader,
html.dcs-loader-skip .dcs-flylogo { display: none; }

/* ==========================================================================
   Navbar
   ========================================================================== */
/* Measured from "sections wireframes/Navbar.png" at its 1440 design width:
   bar 1440x80, bottom corners r=32, content inset 80, mark 64, icons 24,
   CTA 118x38. The drop shadow is the Figma spec: X0 Y4 blur 27, black 14%. */
.dcs-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 800;
  transition: transform .45s var(--ease-out), opacity .5s linear;
  will-change: transform;
}
/* The bar is solid from the start, so hold it back until the loader lifts —
   otherwise a light slab flashes over the black screen. */
html.dcs-loading .dcs-nav { opacity: 0; }

.dcs-nav__bar {
  height: var(--nav-h);
  padding: 0 var(--nav-pad);
  background: var(--nav-bg);
  color: var(--nav-fg);
  border-radius: 0 0 var(--nav-r) var(--nav-r);
  box-shadow: var(--nav-shadow);

  /* 1fr | auto | 1fr keeps the mark dead centre whatever the two sides weigh. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/* Slide the bar away when the visitor is heading down a full-bleed section,
   bring it straight back the moment they scroll up. */
.dcs-nav.is-away { transform: translateY(-100%); }

/* ---- left: links ---- */
.dcs-nav__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  justify-self: start;
  /* Pull the first box's padding back out so the word — not the box — starts
     on the bar's 80px content edge, exactly as in the wireframe. */
  margin-left: calc(var(--nav-link-pad) * -1);
}
.dcs-nav__links a {
  display: inline-block;
  font-size: var(--nav-fs);
  line-height: 1;
  font-weight: 400;
  color: var(--nav-fg);
  text-decoration: none;
  padding: 6px var(--nav-link-pad);
  position: relative;
}
/* The page you are on, in the mark's gold. No underline: the colour alone
   carries it, and it ties the current page to the logo above it. `aria-current`
   is on the link either way, so the state is still announced to a screen reader
   and does not depend on anyone seeing the colour. */
.dcs-nav__links a.is-here,
.dcs-nav__panel a.is-here { color: var(--gold-mark); }
/* Underline grows from the left rather than the link shifting on hover. */
.dcs-nav__links a::after {
  content: "";
  position: absolute;
  left: var(--nav-link-pad); right: var(--nav-link-pad); bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.dcs-nav__links a:hover::after,
.dcs-nav__links a:focus-visible::after { transform: scaleX(1); }

/* ---- centre: the mark the loader flies into ---- */
.dcs-nav__spacer { justify-self: start; }

.dcs-nav__logo {
  width: var(--nav-mark);
  height: var(--nav-mark);
  display: block;
  justify-self: center;
  opacity: 0;
  transition: opacity .35s linear;
}
.dcs-nav__logo.is-visible { opacity: 1; }
.dcs-nav__logo img { width: 100%; height: 100%; object-fit: contain; }

/* ---- right: icons + CTA ---- */
.dcs-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--nav-agap);
  justify-self: end;
}
.dcs-nav__icon {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  opacity: .9;
  transition: opacity .25s linear, transform .25s var(--ease-out);
}
.dcs-nav__icon:hover { opacity: 1; transform: translateY(-1px); }
/* The supplied PNGs are 24x24 solid black. Pinned to that size so they are
   never resampled, and inverted to white for the dark bar — invert flips the
   colour channels and leaves the alpha alone, so the edges stay clean. */
.dcs-nav__icon img {
  width: 24px; height: 24px;
  display: block;
  filter: invert(1);
}

.dcs-nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  height: 38px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--nav-cta-bg);
  color: var(--nav-cta-fg);
  font-size: var(--nav-cta-fs);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s linear, transform .25s var(--ease-out);
}
.dcs-nav__cta:hover { background: #E6E6E6; transform: translateY(-1px); }

/* ---- phone menu ---- */
.dcs-nav__toggle {
  display: none;
  justify-self: start;
  width: 34px; height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  /* Flex, not grid: grid's default align-content stretches the two implicit
     rows to the button height, which throws the bars apart and turns the
     crossed "X" state into a chevron. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.dcs-nav__toggle span {
  display: block;
  width: 20px; height: 1.6px;
  background: var(--nav-fg);
  border-radius: 2px;
  transition: transform .3s var(--ease-out), opacity .3s linear;
}
.dcs-nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.8px) rotate(45deg); }
.dcs-nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.8px) rotate(-45deg); }

.dcs-nav__panel {
  background: var(--nav-bg);
  border-radius: 0 0 var(--nav-r) var(--nav-r);
  box-shadow: var(--nav-shadow);
  margin-top: -1px;
  padding: 6px var(--nav-pad) 18px;
}
.dcs-nav__panel ul { list-style: none; margin: 0; padding: 0; }
.dcs-nav__panel a {
  display: block;
  padding: 11px 0;
  font-size: 16px;
  color: var(--nav-fg);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.dcs-nav__panel li:last-child a { border-bottom: 0; }

/* ==========================================================================
   2 + 3. Hero and the box-stacking showcase
   ========================================================================== */
.dcs-showcase {
  position: relative;
  background: var(--paper);
}
.dcs-showcase__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  height: 100vh;
  overflow: hidden;
  display: block;
}

/* -- hero backdrop -- */
/* The supplied artwork (hero-bg-2) is a frame: wheat, almond and pistachio down
   the left edge, oats and cashew down the right, and a completely empty middle
   40% for the copy to sit in — measured, not assumed. Two consequences drive
   everything below.

   1. It may be cropped top and bottom but NEVER at the sides, or the subject
      leaves the picture. So the size is driven by width, not by `cover`. At
      1440x900 `cover` would have cut 207px off each side and taken the wheat
      and the cashew with it.
   2. The field it leaves above and below is #FEFDFD against a #FFFFFF page —
      one level of difference, below the threshold of vision. So there is no
      seam to hide and no mask to maintain; the picture simply stops.

   The layer is its own element rather than a background on the stage because
   initShowcase fades it out with the hero copy, and the stage has to stay
   opaque underneath the boxes. */
.dcs-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--paper);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  /* Only the opacity moves, and only from JS. Without JS it stays at 1. */
  will-change: opacity;
}

/* -- hero copy -- */
/* The copy is centred in the band it can actually use — from under the navbar
   down to the scroll cue — rather than pinned a fixed distance below the bar.
   Pinned, it sat high and crowded the navbar; centred, the air above the
   wordmark and the air under the subheading balance at any window height.

   Two elements, not one: the band does the centring and .dcs-hero stays a
   content-sized block, because initShowcase both moves .dcs-hero (writing its
   transform every frame to fade the copy out as the first box climbs) and
   measures its rect to decide when that fade ends. Centring it with a transform
   of its own would be overwritten; centring it by stretching it would make the
   measured bottom the band's, not the text's. */
.dcs-hero-band {
  position: absolute;
  left: 0; right: 0;
  top: var(--nav-h);
  /* clear of the cue and of the box peeking in from below */
  bottom: calc(var(--peek, 8) * 1vh + 62px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}
.dcs-hero {
  width: min(94vw, 1320px);
  text-align: center;
  pointer-events: auto;
  will-change: transform, opacity;
}
/* Sized so the headline runs to roughly 50–60% of the viewport width, with a
   vh term so it can't outgrow a short window. */
.dcs-hero__wordmark {
  width: clamp(140px, min(20vw, 26vh), 420px);
  /* A touch more air under the mark than before (was 1.5vh / 22px max):
     Corinthia's B reaches high out of the headline's first line and was
     crowding the wordmark. */
  margin: 0 auto clamp(12px, 2.4vh, 32px);
}
.dcs-hero__title {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0;
  /* The cap is the size, not a ceiling that is never reached: 7.4vw passes
     90px at 1216px wide, so every desktop width renders the headline at
     exactly 90px. Below that it scales down on the same curve as before, and
     the 2.1rem floor still governs phones. */
  font-size: clamp(2.1rem, min(7.4vw, 16vh), 90px);

  /* The two knobs for the script word. --script-size is a multiple of the
     headline's own size: Corinthia's letters sit far smaller in their em box
     than Playfair's, so it has to be set much larger to carry the same weight
     on the line. --script-drop nudges it onto the serif's baseline. */
  --script-size: 2.05em;
  --script-drop: 0.02em;
}
.dcs-hero__line { display: block; }

/* One word of the headline in the script face.

   The enlargement is gated on html.dcs-script-ok, which initScriptFace adds
   only once Corinthia has actually loaded. The size exists solely to
   compensate for that font's small letters; applied to the Playfair fallback
   it would blow the word up to twice its neighbours. Ungated, the word simply
   sets like the rest of the headline — a failure nobody notices.

   `line-height` is pinned well below 1 so the enlarged glyph cannot stretch
   the line box and shove the second line down. It overhangs its own line
   instead, which is the point of a script; nothing clips it, as no ancestor
   here hides overflow. */
.dcs-script { font-family: "Corinthia", var(--serif); }

html.dcs-script-ok .dcs-script {
  font-weight: 700;
  font-style: normal;
  font-size: var(--script-size, 2.05em);
  /* Zero, not a fraction. At 0.5 the enlarged word still added 38px to the
     line and pushed the second line and the subhead down with it — measured.
     At 0 the inline box contributes nothing and the headline's own rhythm is
     untouched, while the glyph keeps sitting on the shared baseline. */
  line-height: 0;
  letter-spacing: 0.005em;
  white-space: nowrap;      /* a script word must never break mid-word */
  position: relative;
  top: var(--script-drop, 0.02em);
  padding: 0 0.03em;
}
.dcs-hero__sub {
  margin: clamp(14px, 2.4vh, 30px) auto 0;
  max-width: 34em;
  font-size: clamp(0.92rem, min(1.5vw, 2.6vh), 1.35rem);
  line-height: 1.65;
  font-weight: 300;
  color: rgba(14,14,16,0.72);
}

/* ---- hero entrance ----------------------------------------------------
   Each piece lifts and resolves on its own beat (--d). It is held at the
   start state only while JS is present AND the loader still has the page;
   `unlock()` adds .dcs-entered at the one point every path through the
   loader goes through, including the skip and reduced-motion paths.

   The hero element itself is off limits: initShowcase writes its transform
   and opacity every frame to fade the copy out as the first box climbs, so
   the entrance has to live on the children.  */
.dcs-hero__in {
  transition:
    opacity .85s var(--ease-out),
    transform .95s var(--ease-out),
    filter .85s var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.dcs-cue--in {
  transition: transform .9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.dcs-js:not(.dcs-entered) .dcs-hero__in {
  opacity: 0;
  transform: translate3d(0, 0.42em, 0);
  filter: blur(7px);
}
html.dcs-js:not(.dcs-entered) .dcs-hero__wordmark.dcs-hero__in {
  transform: translate3d(0, 14px, 0) scale(0.94);
}
html.dcs-js:not(.dcs-entered) .dcs-cue--in {
  transform: translate3d(0, 16px, 0);
}

/* Same contract as .dcs-reveal: without the JS that lifts the loader, the
   copy must never be left invisible. */
html:not(.dcs-js) .dcs-hero__in,
html.dcs-js-failed .dcs-hero__in,
html:not(.dcs-js) .dcs-cue--in,
html.dcs-js-failed .dcs-cue--in {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .dcs-hero__in, .dcs-cue--in,
  html.dcs-js:not(.dcs-entered) .dcs-hero__in,
  html.dcs-js:not(.dcs-entered) .dcs-hero__wordmark.dcs-hero__in,
  html.dcs-js:not(.dcs-entered) .dcs-cue--in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* -- boxes -- */
.dcs-boxes {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.dcs-box {
  position: absolute;
  left: 50%;
  /* baseline: the bottom edge of the centre box when it is vertically centred */
  bottom: calc(50% - 35vh);
  height: var(--eh);
  width: var(--eh); /* every source PNG is square */
  transform:
    translate3d(
      calc(-50% + var(--x, 0px) + var(--px, 0px)),
      calc(var(--y, 0px) + var(--pb, 0px)),
      0
    )
    scale(var(--s, 1));
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.dcs-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 26px 42px rgba(14, 14, 16, 0.16));
}

/* Layer order — 1 on top, then 2/3, then 4/5 */
.dcs-box--1 { z-index: 30; }
.dcs-box--2, .dcs-box--3 { z-index: 20; }
.dcs-box--4, .dcs-box--5 { z-index: 10; }

/* Scroll cue */
.dcs-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(14,14,16,0.4);
  transition: opacity .5s var(--ease-out);
}
.dcs-cue__line {
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, rgba(14,14,16,0.32), rgba(14,14,16,0));
}

/* ==========================================================================
   4. Crafted for every craving — pinned clip -> carousel sequence
   ========================================================================== */
.dcs-craving {
  position: relative;
  background: var(--ink);
  --vid: 240;    /* clip beat, vh   */
  --trans: 90;   /* hand-off beat   */
  --car: 180;    /* carousel beat   */
  height: calc((var(--vid) + var(--trans) + var(--car)) * 1vh);
}
.dcs-craving__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  height: 100vh;
  overflow: hidden;
  background: var(--ink);
}

/* -- the clip -- */
.dcs-craving__media {
  position: absolute;
  inset: 0;
  will-change: transform;
  z-index: 2;
}
.dcs-craving__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dcs-craving__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(14,14,16,0) 32%, rgba(14,14,16,0.34) 50%, rgba(14,14,16,0) 68%),
    radial-gradient(120% 90% at 50% 55%, rgba(14,14,16,0) 28%, rgba(14,14,16,0.6) 100%);
}

/* -- the line: one element that travels from centre to the top -- */
.dcs-craving__title {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 6;
  margin: 0;
  width: max-content;
  max-width: 92vw;
  text-align: center;
  color: #fff;
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-size: clamp(1.75rem, min(5.4vw, 9.5vh), 4.8rem);
  text-shadow: 0 2px 26px rgba(14, 14, 16, 0.55), 0 1px 3px rgba(14, 14, 16, 0.4);
  transform-origin: 50% 50%;
  transform:
    translate(-50%, -50%)
    translate3d(0, var(--ty, 50vh), 0)
    scale(var(--ts, 1));
  will-change: transform;
}
.dcs-craving__title .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  will-change: opacity, transform;
}

/* -- the carousel, which rises from below and then runs sideways -- */
.dcs-craving__car {
  /* the line parks at ~7.5vh and this block runs to 95vh, so the pair occupies
     roughly the 90vh the design calls for */
  position: absolute;
  left: 0; right: 0;
  top: 21vh; bottom: 5vh;
  z-index: 4;
  will-change: transform;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dcs-craving__viewport {
  /* `overflow: hidden` has to stay — it is what hides the rest of the track
     sideways — but it clips at the PADDING box, and the track is exactly as
     tall as a slide. So the tilted stix loses its tip at rest and loses much
     more of it when it lifts on hover.

     Padding opens the clip box vertically; the matching negative margin takes
     the same amount back out of the layout, so nothing moves and only the
     clipping region grows. Sides stay at 0, so the horizontal clip — the part
     that actually matters — is untouched. */
  --stix-bleed: 64px;
  padding: var(--stix-bleed) 0;
  margin: calc(var(--stix-bleed) * -1) 0;

  overflow: hidden;
  cursor: grab;
  /* Vertical pans stay with the browser; horizontal ones come to the drag
     handler. Without this a touch drag would just scroll the page. */
  touch-action: pan-y;
}
.dcs-craving.is-dragging .dcs-craving__viewport { cursor: grabbing; }
.dcs-craving.is-dragging,
.dcs-craving.is-dragging * { user-select: none; -webkit-user-select: none; }
.dcs-craving__viewport img { -webkit-user-drag: none; user-select: none; }
.dcs-craving__track {
  display: flex;
  align-items: center;
  will-change: transform;
  /* the tilted stix overhangs its column, so the track needs end padding or the
     first one is clipped by the viewport edge at rest */
  padding: 0 clamp(20px, 3.4vw, 64px);
}
.dcs-craving__slide {
  flex: 0 0 46vw;
  display: grid;
  grid-template-columns: minmax(84px, 0.4fr) 1fr;
  align-items: center;
  gap: clamp(14px, 2.2vw, 40px);
  padding: 0 clamp(18px, 2.6vw, 52px);
}
@media (min-width: 1700px) { .dcs-craving__slide { flex-basis: 40vw; } }

.dcs-craving__img {
  height: clamp(190px, 42vh, 420px);
  width: auto;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.55));

  /* Rest and hover are both written as these two variables, so the whole
     gesture is two numbers to tune rather than a transform to rewrite. */
  --stix-y: 0px;
  --stix-rot: -8deg;
  transform: translate3d(0, var(--stix-y), 0) rotate(var(--stix-rot));
  transform-origin: 50% 62%;
  transition: transform 1s cubic-bezier(0.25, 0.9, 0.25, 1);
  will-change: transform;
}

/* Hovering anywhere on a slide — the stix, its name, the description, the
   button — floats that stix up and lets it stand a little straighter.
   hover:hover keeps it off touch screens, where :hover sticks after a tap. */
@media (hover: hover) and (pointer: fine) {
  .dcs-craving__slide:hover .dcs-craving__img,
  .dcs-craving__slide:focus-within .dcs-craving__img {
    --stix-y: -20px;
    --stix-rot: -3.2deg;
  }
  /* Mid-drag the pointer sweeps across every slide in turn, which would set
     each one lifting and settling in sequence. */
  .dcs-craving.is-dragging .dcs-craving__img {
    --stix-y: 0px;
    --stix-rot: -8deg;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dcs-craving__img { transition: none; }
}
.dcs-craving__name {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: #fff;
}
.dcs-craving__tagline {
  font-size: clamp(0.78rem, 0.95vw, 0.92rem);
  line-height: 1.55;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 10px;
  max-width: 26em;
}
.dcs-craving__desc {
  font-size: clamp(0.76rem, 0.92vw, 0.9rem);
  line-height: 1.66;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 22px;
  max-width: 28em;
}
.dcs-craving__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(20px, 4vh, 44px);
  /* The viewport's clip-box bleed reaches down into this strip, so lift the
     dots above it — otherwise a press meant for a dot could start a drag. */
  position: relative;
  z-index: 1;
}
.dcs-craving__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  border: 0; padding: 0; cursor: pointer;
  transition: background .3s var(--ease-out), transform .3s var(--ease-out);
}
.dcs-craving__dot[aria-selected="true"] { background: var(--gold-light); transform: scale(1.35); }

@media (max-width: 899px) {
  /* side-by-side leaves a phone mostly empty, so the slide stacks: stix above,
     copy below, which fills the pinned area properly */
  .dcs-craving__car { top: 17vh; bottom: 4vh; }
  .dcs-craving__slide {
    flex-basis: 84vw;
    grid-template-columns: 1fr;
    align-content: center;
    justify-items: center;
    gap: clamp(14px, 2.4vh, 26px);
    padding: 0 clamp(14px, 4vw, 26px);
  }
  .dcs-craving__img { height: clamp(140px, 24vh, 240px); --stix-rot: -6deg; }
  .dcs-craving__text { text-align: center; max-width: 30rem; }
  .dcs-craving__name { font-size: clamp(1.15rem, 5.4vw, 1.5rem); margin-bottom: 8px; }
  .dcs-craving__tagline { font-size: 0.82rem; margin: 0 auto 8px; }
  .dcs-craving__desc { font-size: 0.8rem; margin: 0 auto 18px; }
}

/* ==========================================================================
   5. Five pouches — copy reveals, then the hand slides in
   ========================================================================== */
.dcs-pouches {
  position: relative;
  background: var(--paper);

  /* Scroll sequence, all distances in viewport heights except --seq-start,
     which is where the section's top has to reach to set things going. */
  --seq: 80;            /* pinned scroll the section holds for — just enough
                           that the pin releases as the hand lands, with no
                           stretch of held-still scrolling at the end */
  --seq-start: 0.5;     /* trigger when the section top is halfway up the screen */
  --seq-txt: 0.26;      /* how much scrolling each line's reveal takes */
  --seq-stagger: 0.06;  /* offset between the three lines */
  --seq-gap: 0.72;      /* image starts while the last line is still settling,
                           so the two beats run as one continuous move */
  --seq-img: 0.95;      /* how much scrolling the slide takes — bigger = slower */

  height: calc((100 + var(--seq)) * 1vh);
}
/* Pinned, so the long slide has scroll of its own to run in rather than
   racing the section off the top of the screen. */
.dcs-pouches__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
}
.dcs-pouches__inner {
  position: relative;
  z-index: 2;
  /* The stage already carries the gutter, so 100% here is the shell width. */
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
}
.dcs-pouches__copy { max-width: min(46%, 560px); }
.dcs-pouches__copy .dcs-body-copy {
  margin: clamp(18px, 3vh, 30px) 0 clamp(24px, 4vh, 36px);
}
.dcs-pouches__copy [data-seq] {
  opacity: 0;
  will-change: opacity, transform;
}

/* Bled to the right edge. The +0.389% cancels the PNG's transparent right
   padding so the wrist, not the file, touches the edge. --sx carries the
   slide-in and is a percentage of the element's own width. */
.dcs-pouches__media {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
  width: min(54vw, 800px);
  transform: translateY(-50%) translateX(calc(0.389% + var(--sx, 100%)));
  will-change: transform;
}
.dcs-pouches__media img { width: 100%; height: auto; }

@media (max-width: 859px) {
  /* No pin on a phone: the copy stacks above the image, so the pair is taller
     than the viewport and there is nothing to gain by holding it. The sequence
     runs shorter to fit the section's own pass through the screen. */
  .dcs-pouches {
    height: auto;
    --seq-txt: 0.2;
    --seq-stagger: 0.05;
    --seq-img: 0.45;
  }
  .dcs-pouches__stage {
    position: static;
    height: auto;
    overflow: hidden;
    display: block;
    padding: clamp(70px, 12vh, 130px) var(--gutter) clamp(40px, 7vh, 80px);
  }
  .dcs-pouches__copy { max-width: none; }
  .dcs-pouches__media {
    position: relative;
    top: auto; right: auto;
    width: calc(100% + var(--gutter));
    margin: clamp(28px, 5vh, 56px) calc(-1 * var(--gutter)) 0 auto;
    /* no vertical centring once it stacks — that would drag it over the copy */
    transform: translateX(calc(0.389% + var(--sx, 100%)));
  }
}

/* ==========================================================================
   6. Video carousel — pinned, scroll-driven sideways
   ========================================================================== */
.dcs-vidcar {
  position: relative;
  background: var(--paper);
  --car: 170;   /* sideways beat, vh */
  --lead: 19;   /* where the first tile starts, vw */
  height: calc((100 + var(--car)) * 1vh);
}
.dcs-vidcar__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 6vh, 76px);
}
.dcs-vidcar__head {
  /* Same column as .dcs-pouches__inner above it — see --shell. */
  width: min(var(--shell), 100% - var(--gutter) * 2);
  margin: 0 auto;
}
.dcs-vidcar__viewport { overflow: hidden; }
.dcs-vidcar__track {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 30px);
  padding-left: calc(var(--lead) * 1vw);
  padding-right: var(--gutter);
  will-change: transform;
}
.dcs-vidcar__item {
  flex: 0 0 auto;
  height: clamp(170px, 40vh, 440px);
  aspect-ratio: 16 / 9;
  background: var(--ink-soft);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1rem, 1.9vw, 1.8rem);
  font-weight: 300;
}
.dcs-vidcar__item video,
.dcs-vidcar__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 899px) {
  /* size by width on a phone: height-driven tiles come out exactly as wide as
     the viewport, so a whole tile could never sit inside the lead-in */
  .dcs-vidcar__item { height: auto; width: 74vw; }

  /* Phones and tablets: no pinning. A pinned full-screen stage leaves half
     the screen empty around a heading and one row of tiles, so here the
     section is only as tall as its content and the row is swiped sideways,
     snapping tile by tile. initVidcar stands down at this width. */
  .dcs-vidcar {
    height: auto;
    padding: clamp(28px, 6vw, 48px) 0 clamp(20px, 5vw, 40px);
  }
  .dcs-vidcar__stage {
    position: relative;
    height: auto;
    overflow: visible;
    display: block;
  }
  .dcs-vidcar__head { margin-bottom: clamp(18px, 4vw, 30px); }
  .dcs-vidcar__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .dcs-vidcar__viewport::-webkit-scrollbar { display: none; }
  .dcs-vidcar__track {
    transform: none !important;
    width: max-content;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .dcs-vidcar__item { scroll-snap-align: start; }

  /* and the stix arc below starts closer to the row */
  .dcs-ingredients__stage { padding-top: clamp(16px, 4vw, 36px); }
}

/* ==========================================================================
   7. Ingredients — stix travelling along a parabolic dome
   ========================================================================== */
.dcs-ingredients {
  position: relative;
  /* Warm white, sampled from the ingredient photograph's own ground so the
     band above it and the picture read as one surface.

     The section above this one is white, and the two met at a hard line. The
     gradient dissolves it: painted as the section's own BACKGROUND, not as an
     overlay, so it sits behind the stix rather than washing over them.

     The middle stops are the smoothstep blend of --paper and --warm, not evenly
     spaced ones — a straight ramp between two colours this close shows you
     exactly where it starts and stops, which is the thing being fixed. Recompute
     them if either token changes. */
  background-color: var(--warm);
  background-image: linear-gradient(
    to bottom,
    var(--paper) 0%,
    #FCFBFA 28%,
    #F6F4F3 50%,
    #F1EDEC 72%,
    #EFEAE8 88%,
    var(--warm) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% clamp(150px, 22vh, 300px);
  --ing-travel: 50;    /* how far along the curve the stix move, in hundredths of u */
}
/* The scroll hook. Nothing pins: the stage is an ordinary block and the travel
   comes from this element's passage across the window, so the stix move for as
   long as it is on screen. The photo sits outside it, which is what keeps the
   picture from being counted as part of the travel. */
.dcs-ingredients__scroller { position: relative; }
.dcs-ingredients__stage {
  position: static;
  display: block;
  /* transparent, or it would paint --warm straight over the blend above */
  background: transparent;
  /* The padding/negative-margin pair opens the clip box vertically without
     moving anything: the sides still clip the stix that ride out past the
     viewport, but a tilted one at the end of the arc is not sliced off. */
  padding: clamp(50px, 9vh, 130px) 0 90px;
  margin-bottom: -90px;
  overflow: hidden;
}
/* The gap the pinned stage used to leave under the heading, now that the stage
   is only as tall as its contents. */
.dcs-ingredients__title { margin-bottom: clamp(30px, 6vh, 88px); }
.dcs-ingredients__arc {
  position: relative;
  width: min(1560px, 124vw);
  margin-left: calc(50% - min(780px, 62vw));   /* full-bleed and centred */
  height: clamp(230px, 38vh, 420px);
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity .3s linear;
}
.dcs-ingredients__arc.is-ready { opacity: 1; }
.dcs-ingredients__stick {
  position: absolute;
  left: 50%;
  top: 0;
  height: clamp(120px, 24vh, 258px);
  width: auto;
  will-change: transform;
  filter: drop-shadow(0 16px 22px rgba(14, 14, 16, 0.14));
  /* JS writes the transform every frame; nothing here should fight it */
}
.dcs-ingredients__title {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--gutter);
  margin-top: clamp(-56px, -5vh, -10px);
  opacity: 0;
  will-change: opacity, transform;
}

/* ---- the photograph and its hotspots ---- */
.dcs-ingredients__photo {
  position: relative;
  width: 100%;
  line-height: 0;
}
/* The band is set to the photo's top-edge tone, but that edge still carries the
   picture's own texture and a slight gradient. This dissolves the last of the
   join: the band colour laid over the first stretch of the photograph, fading
   out. Where the two already match it is invisible; where they drift by a shade
   it hides the line. */
.dcs-ingredients__photo::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: clamp(48px, 7vw, 110px);
  background: linear-gradient(to bottom, var(--warm) 0%, var(--warm) 14%, var(--warm-0) 100%);
  pointer-events: none;
  z-index: 1;
}
.dcs-ingredients__photo > picture,
.dcs-ingredients__photo > img {
  display: block;
}
.dcs-ingredients__photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* Each ingredient carries a marker that is legible without any interaction:
   a dot with the name in a pill beside it. Hovering grows that same pill into
   a card — the name stays exactly where it was and the description opens
   underneath it, so nothing jumps. */
.dcs-hot {
  position: absolute;
  left: var(--hx, 50%);
  top: var(--hy, 50%);
  width: 0; height: 0;
  line-height: normal;
  z-index: 2;
  --dot: 26px;
  --pill-h: 34px;
  --pill-open: 266px;
}
/* The button is an invisible disc centred on the ingredient, deliberately far
   wider than the dot so the card opens as the cursor nears rather than on a
   pixel. Its centre is the origin every child is placed from; the pill hangs
   outside it, which is why nothing here clips. */
.dcs-hot__btn {
  position: absolute;
  left: 50%; top: 50%;
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

/* Centred with margins, not transforms — the hover scale owns the transform. */
.dcs-hot__dot {
  position: absolute;
  left: 50%; top: 50%;
  margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);
  width: var(--dot); height: var(--dot);
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 3px 12px rgba(24, 18, 12, 0.34),
    0 0 0 1px rgba(24, 18, 12, 0.12);
  transition: transform .3s var(--ease-out);
  z-index: 3;
}
/* A solid core inside the disc, so the marker reads as a deliberate pin rather
   than a stray highlight in the photograph. */
.dcs-hot__dot::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #6B4A2F;
}
/* The ripple. It never stops — not on hover, not while a card is open — so
   every ingredient keeps announcing itself. Brown, not white: the photograph
   is almost white, so a white ring vanished into it. The thin white halo keeps
   it legible where it crosses the dark jaggery and the oil. It sits behind the
   pill, so the pill occludes the half that would otherwise cross the name. */
.dcs-hot__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(107, 74, 47, 0.62);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
  animation: dcsPing 2.6s linear infinite;
  z-index: -1;
}
/* A second ring on the same loop, half a cycle behind. */
.dcs-hot__ripple {
  position: absolute;
  left: 50%; top: 50%;
  margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);
  width: var(--dot); height: var(--dot);
  border-radius: 50%;
  border: 2px solid rgba(107, 74, 47, 0.48);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
  pointer-events: none;
  animation: dcsPing 2.6s linear infinite;
  animation-delay: 1.3s;
  z-index: 0;
}
/* Linear, and the fade is held back to the last stretch. On an ease-out the
   ring was already at 2x and nearly transparent a quarter of the way in, which
   is why it read as nothing at all. */
@keyframes dcsPing {
  0%   { transform: scale(1);   opacity: 0; }
  10%  { opacity: 0.9; }
  55%  { opacity: 0.55; }
  100% { transform: scale(2.7); opacity: 0; }
}

/* The pill. Its top is pinned half a name-row above the dot, so the name sits
   level with the dot and everything that opens grows downwards from there. */
.dcs-hot__pill {
  position: absolute;
  top: 50%;
  margin-top: calc(var(--pill-h) / -2);
  display: block;
  /* Collapsed, the pill is exactly as wide as its name — a px value JS measures
     and writes to --pill-w, because `max-content` cannot be transitioned to a
     length. The cap is the fallback for the moment before that runs: without it
     `max-content` sizes the pill to the whole description set on one line. */
  width: var(--pill-w, max-content);
  max-width: var(--pill-open);
  background: #fff;
  border-radius: 999px;
  box-shadow:
    0 3px 14px rgba(24, 18, 12, 0.16),
    0 1px 2px rgba(24, 18, 12, 0.07);
  z-index: 2;
  overflow: hidden;
  transition:
    width .4s var(--ease-out),
    border-radius .4s var(--ease-out),
    box-shadow .4s var(--ease-out);
}
/* Which side of the dot the name sits on. The pill tucks under the dot by half
   its width, so the two read as one object; the padding on that side clears it. */
.dcs-hot--r .dcs-hot__pill { left: 50%; padding: 0 17px 0 calc(var(--dot) / 2 + 11px); }
.dcs-hot--l .dcs-hot__pill { right: 50%; padding: 0 calc(var(--dot) / 2 + 11px) 0 17px; }

.dcs-hot__name {
  display: flex;
  align-items: center;
  height: var(--pill-h);
  font-size: 0.83rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--ink);
  white-space: nowrap;
}
/* 0fr -> 1fr is the one way to transition to a height the content decides. */
.dcs-hot__more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease-out);
}
.dcs-hot__more > span { overflow: hidden; min-height: 0; }
.dcs-hot__text {
  display: block;
  padding-bottom: 13px;
  font-size: 0.78rem;
  line-height: 1.62;
  font-weight: 300;
  color: rgba(14, 14, 16, 0.66);
  opacity: 0;
  transition: opacity .28s linear;
}

/* While JS measures each pill's natural width, nothing may force it open and
   the description must be out of the way — it is what the cap above guards
   against, and it would otherwise measure as the pill's widest content. */
.dcs-hot__pill.is-measuring { width: max-content !important; }
.dcs-hot__pill.is-measuring .dcs-hot__more { display: none; }

/* ---- open ---- */
.dcs-hot.is-open,
.dcs-hot:focus-within { z-index: 6; }
.dcs-hot.is-open .dcs-hot__pill,
.dcs-hot__btn:focus-visible .dcs-hot__pill {
  width: var(--pill-open);
  border-radius: 15px;
  box-shadow: 0 14px 34px rgba(24, 18, 12, 0.18), 0 1px 2px rgba(24, 18, 12, 0.08);
}
.dcs-hot.is-open .dcs-hot__more,
.dcs-hot__btn:focus-visible .dcs-hot__more { grid-template-rows: 1fr; }
.dcs-hot.is-open .dcs-hot__text,
.dcs-hot__btn:focus-visible .dcs-hot__text { opacity: 1; transition-delay: .1s; }
.dcs-hot.is-open .dcs-hot__dot { transform: scale(1.12); }

@media (hover: hover) and (pointer: fine) {
  .dcs-hot:hover { z-index: 6; }
  .dcs-hot:hover .dcs-hot__pill {
    width: var(--pill-open);
    border-radius: 15px;
    box-shadow: 0 14px 34px rgba(24, 18, 12, 0.18), 0 1px 2px rgba(24, 18, 12, 0.08);
  }
  .dcs-hot:hover .dcs-hot__more { grid-template-rows: 1fr; }
  .dcs-hot:hover .dcs-hot__text { opacity: 1; transition-delay: .1s; }
  .dcs-hot:hover .dcs-hot__dot { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .dcs-hot__dot::after,
  .dcs-hot__ripple { animation: none; opacity: 0; }
  .dcs-hot__pill, .dcs-hot__more, .dcs-hot__text { transition: none; }
}


@media (max-width: 899px) {
  .dcs-ingredients__arc { height: clamp(180px, 30vh, 300px); }
  .dcs-ingredients__stick { height: clamp(96px, 18vh, 190px); }
  .dcs-hot { --dot: 18px; --pill-h: 26px; --pill-open: min(208px, 54vw); }
  .dcs-hot__btn { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .dcs-hot__dot::before { inset: 5.5px; }
  .dcs-hot--r .dcs-hot__pill { padding: 0 11px 0 calc(var(--dot) / 2 + 8px); }
  .dcs-hot--l .dcs-hot__pill { padding: 0 calc(var(--dot) / 2 + 8px) 0 11px; }
  .dcs-hot__name { font-size: 0.66rem; }
  .dcs-hot__text { font-size: 0.63rem; line-height: 1.5; padding-bottom: 10px; }
  .dcs-hot.is-open .dcs-hot__pill { border-radius: 12px; }
}

/* ==========================================================================
   7b. Shop grid
   --------------------------------------------------------------------------
   Measured off "Assets/Shop page.png" at its 1440 design width: square tiles,
   21px between columns, the meta row 26px under each tile and 85px of air
   before the next row. The grid uses the page's own content column rather than
   the wireframe's 80px margin, so it lines up with every other section.
   ========================================================================== */
.dcs-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dcs-shop {
  width: min(var(--shell), 100% - 2 * var(--gutter));
  margin: 0 auto;
  padding-top: calc(var(--nav-h) + clamp(26px, 5vh, 70px));
  padding-bottom: clamp(40px, 7vh, 96px);
}
.dcs-shop__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin: 0 0 clamp(24px, 4vh, 48px);
}
/* The line that closes the grid. It carries .dcs-display for the face and size,
   so it stays in step with every other display heading on the site. */
.dcs-shop__hook {
  margin: clamp(56px, 10vw, 150px) auto 0;
  text-align: center;
  max-width: 22em;
  line-height: 1.16;
}
.dcs-shop__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(12px, 1.5vw, 22px);
  row-gap: clamp(44px, 6vw, 86px);
}

/* ---- the card ---- */
.dcs-card { position: relative; }
.dcs-card__tile {
  position: relative;
  aspect-ratio: 1;
  background: #F4F4F4;
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* Covers the tile so the whole image area is the product link, and sits under
   the chevrons and the pill so those stay clickable in their own right. */
.dcs-card__link { position: absolute; inset: 0; z-index: 1; }

.dcs-card__shots { position: relative; width: 100%; height: 100%; }
/* The bundled box art is a square canvas whose visible box fills ~90% of the
   height and ~42% of the width. Capping the HEIGHT at 79% is what lands the
   visible box at the wireframe's 72.6% of the tile; the width cap is loose
   enough never to be the binding constraint on these files, so a flavour with
   different proportions still fits rather than being cropped. */
.dcs-card__shot {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 88%;
  max-height: 79%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.99);
  transition: opacity .45s var(--ease-out), transform .6s var(--ease-out);
}
.dcs-card__shot.is-on { opacity: 1; transform: none; }
/* A whisper of movement on the artwork itself, so the tile feels live under
   the cursor without the product appearing to change size. */
.dcs-card:hover .dcs-card__shot.is-on { transform: scale(1.028); }

/* ---- the hover furniture: weight pill and chevrons ---- */
.dcs-card__weight,
.dcs-card__nav {
  position: absolute;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .35s var(--ease-out);
}
.dcs-card__weight {
  top: clamp(10px, 4.3%, 20px);
  right: clamp(10px, 4.3%, 20px);
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  transform: translateY(-6px);
}
.dcs-card__nav {
  top: 50%;
  width: 34px; height: 34px;
  margin-top: -17px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dcs-card__nav svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dcs-card__nav--prev { left: clamp(8px, 4%, 26px); transform: translateX(-6px); }
.dcs-card__nav--next { right: clamp(8px, 4%, 26px); transform: translateX(6px); }

.dcs-card:hover .dcs-card__weight,
.dcs-card:focus-within .dcs-card__weight {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
/* The chevrons appear on every card, as the wireframe draws them. A card with
   only one image has nothing to move to, so initShopCards takes them out of the
   tab order and marks them disabled — the design is unchanged, but a keyboard
   or screen reader is never offered a control that does nothing. */
.dcs-card__nav[aria-disabled="true"] { cursor: default; opacity: 0; }
.dcs-card:hover .dcs-card__nav[aria-disabled="true"],
.dcs-card:focus-within .dcs-card__nav[aria-disabled="true"] { opacity: 0.45; }
.dcs-card:hover .dcs-card__nav,
.dcs-card:focus-within .dcs-card__nav {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.dcs-card__nav:hover { color: rgba(14, 14, 16, 0.6); }

/* ---- name, price, and the two buttons ---- */
.dcs-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: clamp(14px, 1.8vw, 26px);
}
.dcs-card__name {
  margin: 0;
  font-size: clamp(0.92rem, 1.35vw, 1.2rem);
  font-weight: 400;
  line-height: 1.25;
}
.dcs-card__price {
  margin: 6px 0 0;
  font-size: clamp(0.85rem, 1.15vw, 1.02rem);
  font-weight: 300;
  color: rgba(14, 14, 16, 0.72);
}
.dcs-card__buy {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.dcs-card__form { margin: 0; }

/* The supplied icon is drawn complete — cart, ring and all — so the button is
   only a frame for it. Hover does one thing: a small scale. No fill, no
   inversion, no shadow, nothing that repaints the artwork. */
.dcs-card__cart {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform .3s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.dcs-card__cart img { width: 46px; height: 46px; }
.dcs-card__cart:hover { transform: scale(1.06); }
.dcs-card__cart:active { transform: scale(1.02); }

.dcs-card__now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .32s var(--ease-out), transform .32s var(--ease-out), box-shadow .32s var(--ease-out);
}
.dcs-card__now:hover {
  background: #2B2B30;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(14, 14, 16, 0.24);
}
.dcs-card__now:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .dcs-card__shot,
  .dcs-card__cart, .dcs-card__now,
  .dcs-card__weight, .dcs-card__nav { transition: none; }
  .dcs-card:hover .dcs-card__shot.is-on { transform: none; }
  .dcs-card__cart:hover, .dcs-card__now:hover { transform: none; }
}

@media (max-width: 899px) {
  .dcs-shop__grid { grid-template-columns: repeat(2, 1fr); row-gap: clamp(32px, 7vw, 56px); }
  .dcs-card__meta { flex-wrap: wrap; gap: 10px; }
  .dcs-card__now { height: 40px; padding: 0 16px; font-size: 0.78rem; }
  .dcs-card__cart, .dcs-card__cart img { width: 40px; height: 40px; }
}
@media (max-width: 520px) {
  .dcs-shop__grid { grid-template-columns: 1fr; }
  .dcs-card__meta { flex-wrap: nowrap; }
}

/* The arc on its own, on the shop page. Nothing here pins: the section is an
   ordinary block a little over half a screen tall, and initArcFlow drives the
   stix from its passage across the window. That removes both the held moment
   and the empty band the pinned stage used to leave under the arc — so the
   negative margin that used to claw that band back is gone too.

   The padding/negative-margin pair opens the clip box vertically without moving
   anything, so a stick tilted at the end of the arc is not sliced off while the
   sides still clip the ones that ride out past the viewport. */
.dcs-ingredients--arconly {
  background: var(--paper);
  padding: clamp(46px, 9vh, 130px) 0 clamp(30px, 6vh, 90px);
}
.dcs-ingredients--arconly .dcs-ingredients__scroller { height: auto; }
.dcs-ingredients--arconly .dcs-ingredients__stage {
  position: static;
  height: auto;
  background: var(--paper);
  display: block;
  padding: 90px 0;
  margin: -90px 0;
  overflow: hidden;
}

/* ==========================================================================
   8. Footer nudge
   ========================================================================== */
/* The bottom padding is the whole gap between the button and the boxes. It
   used to be an enormous clamp(112px, 33vw, 580px) — 465px at a 1400px window —
   because back then the lineup was the footer's first child and climbed UP into
   this section, so the padding had to be deep enough to hold it. The lineup is
   an ordinary block after this section now, so the reserve is gone and this is
   just a gap. The artwork carries ~4.3% of its own height as transparency above
   the boxes, so the 80px here reads as a little over 100px on screen. */
.dcs-nudge {
  /* Deliberately one layer up. The arc section above it is pulled up by a
     negative margin so the two overlap, and the heading needs to rise over the
     pinned stage rather than hide behind it. Without this it happens anyway —
     but only because .dcs-reveal carries `will-change: transform`, which
     quietly makes its own stacking context. Anyone removing that would break
     the transition and never connect the two. */
  position: relative;
  z-index: 1;
  background: var(--paper);
  text-align: center;
  padding: clamp(60px, 11vh, 130px) var(--gutter) 80px;
}
.dcs-nudge .dcs-body-copy { margin: clamp(14px, 2.5vh, 24px) auto clamp(22px, 4vh, 34px); max-width: 34rem; }

/* ==========================================================================
   9. Footer — pinned, revealed by the page sliding off it
   --------------------------------------------------------------------------
   The footer is pinned to the bottom of the window and <main> slides up over
   it. No scroll handler drives this: the browser's own scrolling does all of
   it. main carries the page background and sits one layer above, so the strip
   of footer showing at any moment is simply the part main has cleared.

   The footer is out of flow once pinned, so .dcs-footer-spacer holds open the
   scroll room it used to occupy — without it the page would end at main's
   bottom edge and the footer could never be uncovered.

   Everything below the `html.dcs-footer-fixed` guard is the enhancement.
   Unguarded, the footer is an ordinary block at the end of the page, which is
   what a visitor gets with no JS, with a window too short to pin it to, or
   with reduced motion asked for.
   ========================================================================== */
main#MainContent {
  position: relative;
  z-index: 1;
  background: var(--paper);
}
.dcs-footer { background: var(--ink); color: #fff; position: relative; }
/* The lineup overhangs main's bottom edge by 17.2% of its own width, straight
   into the top of this panel. That space used to be reserved by the lineup
   itself, back when it was the footer's first child; now that it lives in main
   the footer has to reserve it, or the boxes land on top of the columns. The
   figure is the same 17.2% of the same min(1600px, 92vw), so the two stay
   locked together at every width. */
.dcs-footer--lineup { padding-top: calc(0.172 * min(1600px, 92vw)); }
.dcs-footer-spacer { height: 0; }

html.dcs-footer-fixed .dcs-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 0;
}
html.dcs-footer-fixed .dcs-footer-spacer { height: var(--footer-h, 0px); }

/* The lineup. The pull is a percentage of the LINEUP's width, not the page's,
   so the white/black boundary keeps hitting the same point on the boxes even
   once the lineup stops growing on very wide screens. The artwork is 46.3% of
   its width tall, so -17.2% leaves 37.2% of it hanging below main's bottom
   edge and ~62.8% above — the same split as the reference. */
.dcs-lineup {
  position: relative;
  width: min(1600px, 92vw);
  margin: 0 auto;
  pointer-events: none;
  /* flow-root, not a bare block: without a BFC the pull's negative bottom
     margin collapses out through this element and main's height stops
     accounting for the overhang. */
  display: flow-root;
}
.dcs-lineup__pull { margin-bottom: -17.2%; }
.dcs-lineup img { display: block; width: 100%; }
/* One centred column: mark, line, socials. */
.dcs-footer__inner {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(34px, 6vh, 70px) var(--gutter) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dcs-footer__logo { width: clamp(52px, 5vw, 68px); height: auto; margin: 0 0 clamp(16px, 2.4vh, 26px); }
.dcs-footer__blurb {
  font-size: clamp(0.8rem, 1.05vw, 0.95rem);
  line-height: 1.6;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 clamp(20px, 3vh, 34px);
  max-width: 32rem;
}
.dcs-footer__social { display: flex; justify-content: center; gap: 12px; }
.dcs-footer__social a {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(201,164,76,0.5);
  display: grid; place-items: center;
  color: var(--gold-light);
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.dcs-footer__social a:hover { background: var(--gold-light); color: var(--ink); }
.dcs-footer__social svg { width: 15px; height: 15px; fill: currentColor; }

.dcs-footer__bar {
  max-width: 1320px; margin: clamp(30px, 5vh, 54px) auto 0;
  padding: 16px var(--gutter) 20px;
  border-top: 1px solid rgba(255,255,255,0.09);
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  justify-content: space-between; align-items: center;
  font-size: 0.66rem; font-weight: 300;
  color: rgba(255,255,255,0.46);
}
@media (max-width: 640px) {
  .dcs-footer__bar { flex-direction: column; text-align: center; }
}
.dcs-footer__legal { display: flex; flex-wrap: wrap; gap: 12px 20px; }

/* ==========================================================================
   Mobile tuning
   ========================================================================== */
/* Below this the three link items, both icons and the CTA stop fitting side by
   side, so the links move into a panel under the bar. */
@media (max-width: 860px) {
  :root {
    --nav-h: 64px;
    --nav-r: 24px;
    --nav-mark: 44px;
    --nav-agap: 16px;
    --nav-cta-fs: 14px;
  }
  .dcs-nav__links { display: none; }
  .dcs-nav__toggle { display: flex; }
  .dcs-nav__cta { min-width: 0; height: 34px; padding: 0 16px; }
  /* Account lives in the panel on a phone; the cart stays on the bar. */
  .dcs-nav__actions .dcs-nav__icon:first-child { display: none; }
}

@media (max-width: 899px) {
  /* A 2:1 frame cannot fill a portrait screen without losing its subject: the
     wheat and the cashew live in the outer fifth of the picture, so scaling to
     the height would crop away everything that is in it and leave the empty
     middle. It is sized to a little over the width instead — enough that the
     ends bleed past the edges rather than floating inside them — and set at
     42% down, where the band lands between the wordmark and the subheading
     rather than across either of them. */
  .dcs-hero-bg { background-size: 125% auto; background-position: center 42%; }
}

@media (max-width: 767px) {
  /* a phone has less room under the bar, so the cue zone tightens */
  .dcs-hero-band { bottom: calc(var(--peek, 9) * 1vh + 48px); }
  .dcs-stixcar__slide { grid-template-columns: minmax(72px, 0.4fr) 1fr; }
  .dcs-stixcar__img { transform: rotate(-6deg); height: clamp(150px, 24vh, 220px); }
  .dcs-pouches__img { margin: 0 auto; }
}

/* ==========================================================================
   PHONE HERO (portrait, up to 767px) — no pinning
   --------------------------------------------------------------------------
   One ordinary scroll. The hero is a band one screen tall minus the part of
   the pistachio box that shows under it (35% of the box's artwork); the box
   row sits in the flow directly below. initShowcase only moves the boxes
   SIDEWAYS: they start stacked behind the pistachio box and have spread into
   the row by the time it reaches the middle of the screen — starting the
   moment the whole box is on screen. The craving section follows the row.

   Spacing inside the band is the phone wireframe's, as proportions of the
   free height (23 : 27 : 50 above the wordmark, between the copy and the
   cue, and under the cue), so it holds on tall and short phones alike.
   ========================================================================== */
.dcs-hero__mcue { display: none; }

@media (max-width: 767px) and (orientation: portrait) {
  .dcs-showcase { --peek-h: calc(24.5 * var(--u)); /* 35% of the 70u box */ }
  .dcs-showcase__stage {
    position: relative;
    height: auto;
    overflow: hidden;
  }

  .dcs-hero-bg {
    inset: 0 0 auto 0;
    /* a little past the band, so the scattered nuts can run down to the box */
    height: calc(100vh - var(--peek-h) + 14vw);
    height: calc(100svh - var(--peek-h) + 14vw);
    background-size: 100% auto;
    /* Anchored from the bottom, so the cashew-and-oats cluster always lands
       just above the box whatever the phone's height; the cap keeps the
       almond from sliding up under the navbar on a short screen. */
    background-position: center max(calc(100svh - var(--peek-h) - 234.5vw), -52vw);
  }

  .dcs-hero-band {
    position: relative;
    inset: auto;
    height: calc(100vh - var(--peek-h));
    height: calc(100svh - var(--peek-h));
    min-height: 118vw;
    padding: var(--nav-h) 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .dcs-hero-band::before { content: ""; flex: 23 1 0; }
  .dcs-hero-band::after  { content: ""; flex: 50 1 0; }
  .dcs-hero { flex: none; width: 92vw; }

  .dcs-hero__wordmark { width: 46vw; margin: 0 auto 5vw; }
  .dcs-hero__title { font-size: 9.2vw; line-height: 1.14; }
  .dcs-hero__sub {
    margin-top: 3.4vw;
    font-size: 3.55vw;
    line-height: 1.38;
    font-weight: 400;
    color: var(--ink);
  }

  /* The cue grows to fill the middle gap and sits on its floor. */
  .dcs-hero__mcue {
    display: flex;
    flex: 27 1 0;
    align-items: flex-end;
    justify-content: center;
    font-size: 3.4vw;
    letter-spacing: 0.02em;
    color: rgba(14, 14, 16, 0.42);
  }
  .dcs-cue { display: none; }

  /* The row: its centre line is the pistachio box's centre; every box is
     centred on it (the design centres them, it does not baseline them). */
  .dcs-boxes {
    position: relative;
    inset: auto;
    --row-c: calc(35 * var(--u));
    height: calc(70 * var(--u) + 30vw);
  }
  .dcs-box {
    bottom: auto;
    top: calc(var(--row-c) - (var(--pt) + var(--ch) / 2) * var(--u));
    transform: translate3d(calc(-50% + var(--x, 0px) + var(--px, 0px)), 0, 0);
  }
  .dcs-box img { filter: drop-shadow(0 14px 22px rgba(14, 14, 16, 0.16)); }
}

/* ==========================================================================
   PRODUCT PAGE
   --------------------------------------------------------------------------
   1. Product view: the card, and the page it opens into   (.dcs-pv)
   2. Benefits                                              (.dcs-benefits)
   3. Story — "A little nutty"                              (.dcs-story)
   4. Details — accordion + allergen | other Stix           (.dcs-pd, .dcs-acc)
   ========================================================================== */

/* ---- 1. Product view ------------------------------------------------------
   Desktop geometry is "product view-card.png" measured at its 1440 width.
   Every length is N * --pu (one design pixel). --pu is the smaller of the
   width and height ratios, so the whole card, Previous/Next included, always
   fits the window. --t runs 0 (card) -> 1 (page); initProductView writes it. */
.dcs-pv {
  --t: 0;
  --pu: min(calc(100vw / 1440), calc(100vh / 990));
  position: relative;
  background: var(--paper);
}
.dcs-pv__track { position: relative; height: 140vh; }
.dcs-pv__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  /* Clip sideways only (the neighbours run off both edges). Vertically the
     opened page may run a little past the window — it is then simply the top
     of a page that carries on scrolling. */
  overflow: hidden;
  overflow-x: clip;
  overflow-y: visible;
}
/* The room that overhang needs below the pinned stage, so it never sits on
   the benefits row. 630 design px is gallery top to buttons' foot, 185 is
   where that top lands once open; 70px leaves space for the cart message. */
@media (min-width: 1024px) {
  .dcs-pv {
    padding-bottom: max(0px, calc(185 * var(--pu) + 630 * var(--pu) * var(--pv-s, 1) + 70px - 100vh));
  }
}
/* The shell column, measured by initProductView to size the opened page. */
.dcs-pv__measure {
  width: min(var(--shell), 100% - 2 * var(--gutter));
  height: 0;
  margin: 0 auto;
  visibility: hidden;
  pointer-events: none;
}
.dcs-pv__reel {
  position: absolute;
  inset: 0;
  transition: transform .56s var(--ease-in-out);
}

/* The card. Its insets shrink to nothing as --t reaches 1, which is the whole
   of the "scale up to fit the screen": the frame grows to the window's edges
   while the content inside it stays exactly where it is. */
.dcs-pv__frame {
  position: absolute;
  top: calc(115 * var(--pu) * (1 - var(--t)));
  left: calc((50% - 656 * var(--pu)) * (1 - var(--t)));
  right: calc((50% - 657 * var(--pu)) * (1 - var(--t)));
  bottom: -2px;
  border-radius: calc(40 * var(--pu) * (1 - var(--t))) calc(40 * var(--pu) * (1 - var(--t))) 0 0;
  /* The flavour colour at 60%, fading out over the top of the card. As the
     card opens the fade lengthens a little (105 -> 190 design px), so behind
     the navbar it reads as the full page's wash, as in the design. */
  background:
    linear-gradient(to bottom, var(--pv-c) 0, var(--pv-c0) calc((105 + 85 * var(--t)) * var(--pu))),
    var(--paper);
}
/* The hairline down the card's sides, strongest at the top and gone by two
   thirds of the way down — measured off the wireframe, where it fades from
   #C2C2C2 to nothing between 44% and 66% of the card's height. */
.dcs-pv__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #C2C2C2;
  border-bottom: 0;
  border-radius: inherit;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 44%, transparent 66%);
          mask-image: linear-gradient(to bottom, #000 0, #000 44%, transparent 66%);
  opacity: calc(1 - var(--t));
  pointer-events: none;
}

/* The neighbours: whole cards, sitting 15 design px either side of this one
   and 20 lower, so on a wide screen more of them shows — a real carousel, not
   two decorative slivers. They slide out as the card opens. */
.dcs-pv__peek {
  position: absolute;
  top: calc(135 * var(--pu));
  width: calc(1313 * var(--pu));
  height: calc(898 * var(--pu));
  border-radius: calc(32 * var(--pu));
  border: 1px solid #E2E2E2;
  opacity: calc(1 - var(--t) * 1.5);
  transition: opacity .3s var(--ease-out);
}
.dcs-pv__peek--prev {
  right: calc(50% + 671 * var(--pu));
  background: linear-gradient(to bottom, var(--pv-prev) 0, var(--pv-prev0) calc(95 * var(--pu))), var(--paper);
  transform: translate3d(calc(-160 * var(--pu) * var(--t)), 0, 0);
}
.dcs-pv__peek--next {
  left: calc(50% + 672 * var(--pu));
  background: linear-gradient(to bottom, var(--pv-next) 0, var(--pv-next0) calc(95 * var(--pu))), var(--paper);
  transform: translate3d(calc(160 * var(--pu) * var(--t)), 0, 0);
}

/* One 1440-design-pixel-wide canvas, centred; everything inside is placed at
   the wireframe's own coordinates. */
.dcs-pv__canvas {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: calc(1440 * var(--pu));
  margin-left: calc(-720 * var(--pu));
}
.dcs-pv__canvas--nav { pointer-events: none; }
/* Opening the card lifts the content 56 design px — the full-page wireframe
   has the same layout 56px higher, once the card's top margin is gone. */
.dcs-pv__body {
  position: absolute;
  inset: 0;
  /* Opening the card also widens the content from the card's measure to the
     site's column (--pv-s, set by initProductView), so the gallery's left
     edge and the buttons' right edge land on the same lines as every section
     below. Scaled about the centre, at the gallery's top edge. */
  transform-origin: 50% calc(241 * var(--pu));
  transform: translate3d(0, calc(-56 * var(--pu) * var(--t)), 0)
             scale(calc(1 + (var(--pv-s, 1) - 1) * var(--t)));
  transition: opacity .42s var(--ease-out);
}

/* gallery */
.dcs-pv__gallery {
  position: absolute;
  left: calc(81 * var(--pu));
  top: calc(241 * var(--pu));
  width: calc(630 * var(--pu));
  height: calc(630 * var(--pu));
  background: #F7F7F7;
  overflow: hidden;
}
.dcs-pv__shots { position: absolute; inset: 0; }
/* Same box-art proportions as the Shop tiles, lifted so the thumbnails can
   overlap the foot of the box, as drawn. */
.dcs-pv__shot {
  position: absolute;
  left: 0; right: 0;
  top: 6%;
  width: 100%;
  height: 79%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .45s var(--ease-out);
}
.dcs-pv__shot.is-on { opacity: 1; }

.dcs-pv__chev {
  position: absolute;
  top: calc(276 * var(--pu));
  width: calc(44 * var(--pu));
  height: calc(44 * var(--pu));
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  z-index: 2;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
.dcs-pv__chev svg {
  width: calc(30 * var(--pu)); height: calc(30 * var(--pu));
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.dcs-pv__chev--prev { left: calc(12 * var(--pu)); }
.dcs-pv__chev--next { left: calc(570 * var(--pu)); }
.dcs-pv__chev--prev:hover { transform: translateX(-3px); }
.dcs-pv__chev--next:hover { transform: translateX(3px); }
/* One image: drawn, as designed, but quiet and inert. */
.dcs-pv__gallery[data-shots="1"] .dcs-pv__chev { opacity: 0.4; cursor: default; transform: none; }

.dcs-pv__thumbs {
  position: absolute;
  left: calc(26 * var(--pu));
  top: calc(473 * var(--pu));
  display: flex;
  gap: calc(18 * var(--pu));
  z-index: 2;
}
.dcs-pv__thumb {
  width: calc(128 * var(--pu));
  height: calc(128 * var(--pu));
  padding: 0;
  border: calc(4 * var(--pu)) solid transparent;
  background: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .25s var(--ease-out);
}
.dcs-pv__thumb img { width: 100%; height: 92%; object-fit: contain; }
.dcs-pv__thumb.is-on { border-color: #9D9D9D; }
.dcs-pv__thumb:not(.is-on):not(.dcs-pv__thumb--empty):hover { border-color: #D2D2D2; }
.dcs-pv__thumb--empty { background: #CCCCCC; cursor: default; }

/* information */
.dcs-pv__info {
  position: absolute;
  left: calc(753 * var(--pu));
  top: calc(238 * var(--pu));
  width: calc(606 * var(--pu));
}
.dcs-pv__title {
  margin: 0 0 calc(21 * var(--pu));
  font-family: var(--serif);
  font-weight: 500;
  font-size: calc(64 * var(--pu));
  line-height: 1;
  letter-spacing: -0.01em;
}
.dcs-pv__copy {
  max-width: calc(560 * var(--pu));
  font-size: calc(18 * var(--pu));
  line-height: calc(30 * var(--pu));
  color: var(--ink);
}
.dcs-pv__tagline, .dcs-pv__desc, .dcs-pv__desc p { margin: 0; }
.dcs-pv__desc p + p { margin-top: 0.6em; }

.dcs-pv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(11 * var(--pu));
  margin: calc(22 * var(--pu)) 0 0;
  padding: 0;
  list-style: none;
}
.dcs-pv__tags li {
  display: inline-flex;
  align-items: center;
  height: calc(43 * var(--pu));
  padding: 0 calc(20 * var(--pu));
  border: 1.2px solid var(--ink);
  border-radius: 999px;
  font-size: calc(20 * var(--pu));
  letter-spacing: 0.02em;
}

.dcs-pv__form { margin: 0; position: relative; }
.dcs-pv__sizes { display: flex; flex-wrap: wrap; gap: calc(10 * var(--pu)); margin-top: calc(25 * var(--pu)); }
.dcs-pv__size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(46 * var(--pu));
  min-width: calc(87 * var(--pu));
  padding: 0 calc(18 * var(--pu));
  border: 1.2px solid var(--ink);
  border-radius: calc(3 * var(--pu));
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: calc(20 * var(--pu));
  letter-spacing: 0.02em;
  cursor: pointer;
}
.dcs-pv__size.is-on { background: var(--ink); color: #fff; cursor: default; }
.dcs-pv__size:disabled { opacity: .35; cursor: not-allowed; }

.dcs-pv__qty { margin-top: calc(32 * var(--pu)); }
.dcs-pv__label {
  display: block;
  font-size: calc(20 * var(--pu));
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.dcs-pv__stepper { display: flex; align-items: center; margin-top: calc(7 * var(--pu)); }
.dcs-pv__step {
  display: grid;
  place-items: center;
  width: calc(46 * var(--pu));
  height: calc(46 * var(--pu));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  transition: transform .25s var(--ease-out);
}
.dcs-pv__step:hover { transform: scale(1.06); }
.dcs-pv__step:active { transform: scale(0.96); }
.dcs-pv__step svg {
  width: calc(24 * var(--pu)); height: calc(24 * var(--pu));
  fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round;
}
.dcs-pv__count {
  width: calc(42 * var(--pu));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: calc(20 * var(--pu));
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.dcs-pv__count::-webkit-outer-spin-button,
.dcs-pv__count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* The two buttons start 22 design px left of the text column and run to its
   right edge, as in the design. */
.dcs-pv__buy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(22 * var(--pu));
  width: calc(628 * var(--pu));
  margin: calc(45 * var(--pu)) 0 0 calc(-22 * var(--pu));
}
.dcs-pv__add,
.dcs-pv__now {
  height: calc(77 * var(--pu));
  border-radius: calc(28 * var(--pu));
  font: inherit;
  font-size: calc(20 * var(--pu));
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background .3s var(--ease-out), border-color .3s var(--ease-out),
              transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.dcs-pv__add { background: var(--paper); color: var(--ink); border: 1px solid #B8B8B8; }
.dcs-pv__add:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(14, 14, 16, 0.08); }
.dcs-pv__now { background: var(--ink); color: #fff; border: 0; }
.dcs-pv__now:hover { background: #2B2B30; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(14, 14, 16, 0.24); }
.dcs-pv__add:active, .dcs-pv__now:active { transform: translateY(0); }
.dcs-pv__add:disabled, .dcs-pv__now:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.dcs-pv__add.is-busy { opacity: .6; }
.dcs-pv__status {
  position: absolute;
  left: calc(-22 * var(--pu));
  top: 100%;
  margin: calc(12 * var(--pu)) 0 0;
  font-size: calc(15 * var(--pu));
  color: var(--muted);
  white-space: nowrap;
}
.dcs-pv__status:empty { display: none; }
.dcs-pv__status a { color: var(--ink); }

/* Previous · Scroll · Next — belong to the card, so they leave with it. */
.dcs-pv__nav {
  position: absolute;
  left: calc(87 * var(--pu));
  right: calc(87 * var(--pu));
  top: calc(906 * var(--pu));
  height: calc(55 * var(--pu));
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: calc(1 - var(--t) * 1.8);
  transform: translate3d(0, calc(24 * var(--pu) * var(--t)), 0);
  pointer-events: auto;
}
.dcs-pv.is-open .dcs-pv__nav { pointer-events: none; visibility: hidden; }
.dcs-pv__go {
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--pu));
  height: 100%;
  padding: 0 calc(30 * var(--pu)) 0 calc(24 * var(--pu));
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: calc(20 * var(--pu));
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background .3s var(--ease-out), transform .3s var(--ease-out);
}
.dcs-pv__go--next { padding: 0 calc(24 * var(--pu)) 0 calc(34 * var(--pu)); }
.dcs-pv__go svg {
  width: calc(22 * var(--pu)); height: calc(22 * var(--pu));
  fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s var(--ease-out);
}
.dcs-pv__go:hover { background: #2B2B30; }
.dcs-pv__go--prev:hover svg { transform: translateX(-3px); }
.dcs-pv__go--next:hover svg { transform: translateX(3px); }
.dcs-pv__scroll {
  font-size: calc(20 * var(--pu));
  letter-spacing: 0.04em;
  color: var(--ink);
  animation: dcs-pv-nudge 2.4s var(--ease-in-out) infinite;
}
@keyframes dcs-pv-nudge {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(5px); opacity: .55; }
}

/* Previous / Next: the whole reel moves one card across (card width + gap),
   the neighbour arriving where this card was, then the next page takes over
   and fades its content in on the same spot. */
.dcs-pv[data-leaving="next"] .dcs-pv__reel { transform: translate3d(calc(-1328 * var(--pu)), 0, 0); }
.dcs-pv[data-leaving="prev"] .dcs-pv__reel { transform: translate3d(calc(1328 * var(--pu)), 0, 0); }
.dcs-pv[data-leaving] .dcs-pv__nav { opacity: 0; transition: opacity .2s; }
.dcs-pv[data-entering] .dcs-pv__body { opacity: 0; }

/* No script: the card simply stays a card, and the page scrolls normally. */
html:not(.dcs-js) .dcs-pv__track,
html.dcs-js-failed .dcs-pv__track { height: auto; min-height: 100vh; }
html:not(.dcs-js) .dcs-pv__stage,
html.dcs-js-failed .dcs-pv__stage { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .dcs-pv__reel, .dcs-pv__body, .dcs-pv__shot { transition: none; }
  .dcs-pv__scroll { animation: none; }
}

/* ---- phones and tablets: the same card, stacked ---------------------------
   Nothing pins. The frame, neighbours and controls are driven by the first
   140px of scroll; the content is a normal column. */
@media (max-width: 1023px) {
  .dcs-pv { --pu: 1px; }
  .dcs-pv__track { height: auto; }
  .dcs-pv__stage {
    position: relative;
    height: auto;
    padding: calc(var(--nav-h) + 12px) 0 34px;
  }
  .dcs-pv__reel { position: relative; inset: auto; }
  .dcs-pv__frame {
    top: calc((var(--nav-h) + 12px) * (1 - var(--t)));
    left: calc(12px * (1 - var(--t)));
    right: calc(12px * (1 - var(--t)));
    border-radius: calc(24px * (1 - var(--t))) calc(24px * (1 - var(--t))) 0 0;
    background:
      linear-gradient(to bottom, var(--pv-c) 0, var(--pv-c0) calc(90px + 60px * var(--t))),
      var(--paper);
  }
  .dcs-pv__peek {
    top: calc(var(--nav-h) + 24px);
    width: 100vw;
    height: 70vh;
    border-radius: 20px;
  }
  .dcs-pv__peek--prev { right: calc(100% - 6px); transform: translate3d(calc(-20px * var(--t)), 0, 0); }
  .dcs-pv__peek--next { left: calc(100% - 6px); transform: translate3d(calc(20px * var(--t)), 0, 0); }

  .dcs-pv__canvas { position: relative; left: auto; top: auto; width: auto; margin: 0; }
  .dcs-pv__canvas--nav { pointer-events: auto; }
  .dcs-pv__body {
    position: relative;
    inset: auto;
    transform: none;
    padding: 30px clamp(26px, 6vw, 56px) 0;
    display: grid;
    gap: 28px;
  }
  .dcs-pv__gallery {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    max-width: 620px;
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto;
  }
  .dcs-pv__chev { top: calc(47% - 22px); width: 44px; height: 44px; }
  .dcs-pv__chev svg { width: 26px; height: 26px; }
  .dcs-pv__chev--prev { left: 6px; }
  .dcs-pv__chev--next { left: auto; right: 6px; }
  .dcs-pv__thumbs { left: 4%; right: 4%; top: auto; bottom: 4%; gap: 2.6%; }
  .dcs-pv__thumb { width: 22.5%; height: auto; aspect-ratio: 1; border-width: 3px; }

  .dcs-pv__info { position: relative; left: auto; top: auto; width: auto; max-width: 620px; margin: 0 auto; }
  .dcs-pv__title { font-size: clamp(34px, 8vw, 52px); margin-bottom: 16px; }
  .dcs-pv__copy { max-width: none; font-size: 15.5px; line-height: 1.7; }
  .dcs-pv__tags { gap: 8px; margin-top: 18px; }
  .dcs-pv__tags li { height: 36px; padding: 0 16px; font-size: 15px; }
  .dcs-pv__sizes { margin-top: 20px; gap: 8px; }
  .dcs-pv__size { height: 40px; min-width: 72px; padding: 0 14px; font-size: 16px; border-radius: 3px; }
  .dcs-pv__qty { margin-top: 22px; }
  .dcs-pv__label { font-size: 16px; }
  .dcs-pv__stepper { margin-top: 8px; }
  .dcs-pv__step { width: 40px; height: 40px; }
  .dcs-pv__step svg { width: 20px; height: 20px; }
  .dcs-pv__count { width: 42px; font-size: 17px; }
  .dcs-pv__buy { width: 100%; margin: 26px 0 0; gap: 10px; }
  .dcs-pv__add, .dcs-pv__now { height: 56px; border-radius: 20px; font-size: 16px; }
  .dcs-pv__status { left: 0; font-size: 13px; white-space: normal; }

  .dcs-pv__nav {
    position: relative;
    left: auto; right: auto; top: auto;
    height: 46px;
    max-width: 620px;
    margin: 34px auto 0;
    padding: 0 clamp(26px, 6vw, 56px);
    box-sizing: content-box;
  }
  /* Here Previous / Next sit at the foot of the stacked card — already below
     the point where the card has opened — so they stay put and usable rather
     than fading with it. The "Scroll" hint has nothing to say this far down. */
  .dcs-pv__nav,
  .dcs-pv.is-open .dcs-pv__nav { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
  .dcs-pv__scroll { visibility: hidden; }
  .dcs-pv__go { font-size: 15px; gap: 8px; padding: 0 20px 0 16px; }
  .dcs-pv__go--next { padding: 0 16px 0 22px; }
  .dcs-pv__go svg { width: 18px; height: 18px; }
  .dcs-pv__scroll { font-size: 14px; }

  .dcs-pv[data-leaving="next"] .dcs-pv__reel { transform: translate3d(-100vw, 0, 0); }
  .dcs-pv[data-leaving="prev"] .dcs-pv__reel { transform: translate3d(100vw, 0, 0); }
}

/* ---- 2. Benefits ---------------------------------------------------------- */
.dcs-benefits { padding: clamp(80px, 11.5vw, 166px) var(--gutter) clamp(70px, 9vw, 130px); }
.dcs-benefits__list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(36px, 7.4vw, 108px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dcs-benefits__item { text-align: center; }
.dcs-benefits__icon { display: block; width: 48px; height: 48px; margin: 0 auto; object-fit: contain; }
.dcs-benefits__label {
  margin: 20px 0 0;
  font-size: clamp(19px, 2.36vw, 34px);
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* ---- 3. Story ------------------------------------------------------------- */
.dcs-story { position: relative; }
.dcs-story__art { display: block; }
.dcs-story__art img { display: block; width: 100%; height: auto; }
.dcs-story__copy {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: calc(max(var(--gutter), (100% - var(--shell)) / 2) + min(520px, 34vw));
  padding: 0 0 5% max(var(--gutter), calc((100% - var(--shell)) / 2));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dcs-story__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.45vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.dcs-story__body {
  margin: clamp(22px, 3vw, 44px) 0 0;
  max-width: 500px;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.66;
}

/* ---- 4. Details ----------------------------------------------------------- */
.dcs-pd {
  --pd-left: max(var(--gutter), calc((100% - var(--shell)) / 2));
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  column-gap: clamp(28px, 6.6vw, 96px);
  align-items: start;
  padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 110px) var(--pd-left);
}
.dcs-pd__left { max-width: 490px; }

.dcs-acc__item { border-bottom: 1px solid #A9A9A9; }
.dcs-acc__head { margin: 0; font: inherit; }
.dcs-acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 15px 0 14px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.dcs-acc__item:first-child .dcs-acc__btn { padding-top: 0; }
/* A plus whose upright folds away into a minus when the panel opens. */
.dcs-acc__icon { position: relative; flex: 0 0 auto; width: 12px; height: 12px; }
.dcs-acc__icon::before,
.dcs-acc__icon::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 12px; height: 1.6px;
  margin-top: -0.8px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .35s var(--ease-out);
}
.dcs-acc__icon::after { transform: rotate(90deg); }
.dcs-acc__item.is-open .dcs-acc__icon::after { transform: rotate(0deg); }

.dcs-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease-out);
}
.dcs-acc__item.is-open .dcs-acc__panel { grid-template-rows: 1fr; }
.dcs-acc__inner { min-height: 0; overflow: hidden; }
.dcs-acc__text {
  padding: 2px 0 20px;
  font-size: clamp(14.5px, 1.12vw, 16px);
  line-height: 1.9;
  color: var(--ink);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}
.dcs-acc__item.is-open .dcs-acc__text { opacity: 1; transition-delay: .08s; }
/* Without script every panel is simply open. */
html:not(.dcs-js) .dcs-acc__panel,
html.dcs-js-failed .dcs-acc__panel { grid-template-rows: 1fr; }
html:not(.dcs-js) .dcs-acc__text,
html.dcs-js-failed .dcs-acc__text { opacity: 1; }

.dcs-pd__allergen {
  margin: clamp(34px, 3.8vw, 52px) 0 0;
  padding: 12px 16px 14px;
  border-radius: 6px;
  background: var(--pd-soft, #F4F4F4);
  font-size: clamp(14.5px, 1.2vw, 17px);
  line-height: 1.8;
}
.dcs-pd__allergen strong { font-weight: 600; }

/* The right column starts higher than the left by the height of its "View
   all" bar, so the cards' tops line up with the accordion's first row. */
.dcs-pd__right { min-width: 0; margin-top: -66px; }
.dcs-pd__bar {
  display: flex;
  justify-content: flex-end;
  padding-right: var(--pd-left);
  margin-bottom: 26px;
}
.dcs-pd__all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  color: var(--ink);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 500;
  text-decoration: none;
}
.dcs-pd__all svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s var(--ease-out);
}
.dcs-pd__all:hover svg { transform: translateX(4px); }

.dcs-pd__track {
  display: flex;
  gap: clamp(18px, 2.2vw, 32px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 var(--pd-left) 10px 0;
  scroll-padding-left: 0;
  cursor: grab;
  outline: none;
}
.dcs-pd__track::-webkit-scrollbar { display: none; }
.dcs-pd__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.dcs-pd__track.is-dragging .dcs-card { pointer-events: none; }
.dcs-pd__track:focus-visible { box-shadow: 0 0 0 2px var(--ink); }
.dcs-pd__slide { flex: 0 0 clamp(250px, 28.7vw, 413px); scroll-snap-align: start; }

@media (max-width: 899px) {
  .dcs-benefits__list { gap: 26px; }
  .dcs-benefits__icon { width: 38px; height: 38px; }
  .dcs-benefits__label { margin-top: 14px; }

  .dcs-story__copy {
    position: relative;
    width: auto;
    padding: 20px var(--gutter) 0;
  }
  .dcs-story { display: flex; flex-direction: column-reverse; }
  .dcs-story__art img { height: 68vw; object-fit: cover; object-position: 86% 50%; }

  .dcs-pd { grid-template-columns: 1fr; row-gap: 60px; padding-right: 0; }
  .dcs-pd__left { max-width: none; padding-right: var(--gutter); }
  .dcs-pd__right { margin-top: 0; }
  .dcs-pd__bar { margin-bottom: 16px; }
  .dcs-pd__slide { flex-basis: min(78vw, 360px); }
}
@media (max-width: 520px) {
  .dcs-benefits__list { flex-direction: column; align-items: center; gap: 34px; }
}

/* Carousel controls under the "other Stix": black round arrows with the dots
   between them, left edge on the first card's left edge. */
.dcs-pd__ctrl {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(26px, 3vw, 44px);
}
.dcs-pd__arrow {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  transition: transform .25s var(--ease-out), opacity .25s var(--ease-out), background .25s var(--ease-out);
}
.dcs-pd__arrow svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.dcs-pd__arrow:hover { background: #2B2B30; transform: scale(1.06); }
.dcs-pd__arrow:active { transform: scale(0.96); }
.dcs-pd__arrow[disabled] { opacity: .3; cursor: default; transform: none; background: var(--ink); }
.dcs-pd__dots { display: flex; align-items: center; gap: 6px; }
.dcs-pd__dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #D4D4D4;
  cursor: pointer;
  transition: background .3s var(--ease-out), transform .3s var(--ease-out);
}
.dcs-pd__dot:hover { background: #A8A8A8; }
.dcs-pd__dot.is-on { background: #3A3A3A; transform: scale(1.12); }
/* Without script the track still scrolls by hand; the controls would do nothing. */
html:not(.dcs-js) .dcs-pd__ctrl,
html.dcs-js-failed .dcs-pd__ctrl { display: none; }
@media (max-width: 899px) {
  .dcs-pd__arrow { width: 44px; height: 44px; }
  .dcs-pd__arrow svg { width: 20px; height: 20px; }
}

/* ==========================================================================
   PREVIEW LOCK
   --------------------------------------------------------------------------
   While Theme settings -> Preview lock is on, the pages behind the navbar and
   the shop buttons are not finished, so those controls are rendered as plain
   text rather than links (see snippets/header.liquid and the sections). They
   keep their shape, but nothing about them invites a click.
   ========================================================================== */
.dcs-btn.is-inert,
.dcs-nav__cta.is-inert {
  cursor: default;
  pointer-events: none;
}
.dcs-btn.is-inert:hover { background: var(--ink); transform: none; }
.dcs-btn--gold.is-inert:hover { background: transparent; }