/* ZAYEI — shared styles for the four collection pages.
   Per-product colour comes from three custom properties set on <html> by hero.js:
   --tone (background), --glow (light behind the product) and --accent (copper details, active states).
   They are registered so the background gradient itself animates between products.

   Motion language
   --ease-out     arrivals: fast start, long gentle settle (products landing, text arriving, page entrance)
   --ease-in      departures: quick, unfussy exits that get out of the way
   --ease-in-out  objects travelling between two resting places (outgoing product, orbit dot, colour)
   --ease-spring  small physical feedback with a hint of overshoot (presses, the sliding highlight)
   --ease-sine    ambient, endless motion (the slow float) */

@property --tone   { syntax: '<color>'; inherits: true; initial-value: #4e342e; }
@property --glow   { syntax: '<color>'; inherits: true; initial-value: #7a5240; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #ce8954; }

:root {
  --ink: #f8f4e7;
  --muted: #dccbbb;
  --soft: #b9a798;
  --line: rgb(255 255 255 / 0.14);
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  /* Apple system type: SF Pro on Apple devices, Inter (same proportions) everywhere else. */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-sine: cubic-bezier(0.37, 0, 0.63, 1);
  --colour: 1.2s;

  /* Glass: translucent fill, frosted backdrop, a lit top edge and a soft shadow underneath. */
  --glass-fill: linear-gradient(150deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.05) 50%, rgb(255 255 255 / 0.09));
  --glass-edge: rgb(255 255 255 / 0.18);
  --glass-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    inset 0 -1px 0 rgb(0 0 0 / 0.16),
    0 10px 26px -12px rgb(0 0 0 / 0.55);
  --glass-blur: blur(16px) saturate(170%);

  --deep: color-mix(in oklab, var(--tone) 34%, #060404);
  transition: --tone var(--colour) var(--ease-in-out), --glow var(--colour) var(--ease-in-out), --accent var(--colour) var(--ease-in-out);
  background: var(--deep);
  color-scheme: dark;
}

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

body {
  margin: 0;
  min-height: 100svh;
  color: var(--ink);
  background: transparent;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Restrained, product-matched background: soft light behind the product, deepening to the edges. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 70% 52%, color-mix(in oklab, var(--glow) 70%, transparent) 0%, transparent 70%),
    radial-gradient(120% 100% at 62% 50%, var(--tone) 0%, var(--deep) 100%);
}

img { max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #1a120e;
  font-size: 13px;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Glass buttons ---------- */

.arrow, .chip {
  border: 1px solid var(--glass-edge);
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* The selected state: the same glass, warmed by the product's accent colour. */
.switcher__indicator, .nav-indicator {
  border: 1px solid color-mix(in srgb, var(--accent) 60%, rgb(255 255 255 / 0.2));
  background:
    linear-gradient(150deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.04) 55%, rgb(255 255 255 / 0.1)),
    color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.38),
    inset 0 -1px 0 rgb(0 0 0 / 0.18),
    0 10px 28px -10px color-mix(in srgb, var(--accent) 45%, rgb(0 0 0 / 0.6));
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* ---------- Shared header & navigation ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 84px; /* reserved so the header never causes a layout jump */
  padding: 16px var(--gutter) 0;
}

.site-header__bar {
  max-width: var(--max);
  margin: 0 auto;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 10px 8px 26px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px;
  /* Opaque on purpose: the master logo's screen blend only hides its baked-in background over a solid fill.
     The highlight along the top edge keeps it in the same glass family as the buttons. */
  background:
    linear-gradient(rgb(255 255 255 / 0.06), transparent 60%),
    color-mix(in oklab, var(--tone) 42%, #0c0807);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 12px 32px rgb(0 0 0 / 0.2);
  view-transition-name: site-header;
}

.brand { display: block; flex: none; line-height: 0; border-radius: 6px; }
.brand img { display: block; width: auto; }
/* The supplied master logo has a dark baked-in background; screen blending lets the copper artwork sit on any tone. */
.brand--master img { height: 46px; mix-blend-mode: screen; filter: contrast(1.2); /* lifts the near-black backing to true black, which screen blending removes */ }
.brand--chocolate img { height: 50px; }

.site-nav { position: relative; }
.site-nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s var(--ease-out), background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), transform 0.45s var(--ease-spring);
}
.site-nav a:hover { color: var(--ink); background: rgb(255 255 255 / 0.07); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12); }
.site-nav a:active { transform: scale(0.96); transition-duration: 0.1s; }
.site-nav a[aria-current="page"] { color: var(--ink); background: none; box-shadow: none; }

/* Sits under the active link; glides between collections during page transitions. */
.nav-indicator {
  position: absolute;
  top: 0; left: 0;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  view-transition-name: nav-current;
}

/* ---------- Page transitions between collections (where supported) ---------- */

@view-transition { navigation: auto; }

::view-transition-group(nav-current) { animation-duration: 0.65s; animation-timing-function: var(--ease-out); }
::view-transition-group(site-header) { animation-duration: 0.5s; animation-timing-function: var(--ease-in-out); }
::view-transition-old(root) { animation: page-out 0.26s var(--ease-in) both; }
::view-transition-new(root) { animation: page-in 0.5s var(--ease-out) both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; } }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  max-width: var(--max);
  min-height: calc(100svh - 84px);
  margin: 0 auto;
  padding: clamp(12px, 2.5vh, 32px) var(--gutter) 22px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: 1fr auto auto;
  grid-template-areas:
    "copy stage"
    "switcher switcher"
    "foot foot";
  align-items: center;
  column-gap: clamp(16px, 3vw, 48px);
}

.hero__copy { grid-area: copy; position: relative; z-index: 4; padding-left: 1vw; }

.eyebrow {
  margin: 0 0 26px;
  color: color-mix(in srgb, var(--accent) 70%, var(--ink));
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.hero__title {
  margin: 0;
  font-size: clamp(42px, 5.4vw, 84px);
  font-weight: 800;
  line-height: 0.97;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero__title span {
  display: block;
  margin-top: 10px;
  font-size: 0.63em;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.rule { width: 66px; height: 2px; margin: 28px 0; background: var(--accent); transform-origin: left center; }

.hero__name {
  margin: 0;
  min-height: 2.9em; /* two lines reserved: long names never shift the controls */
  font: 600 clamp(20px, 2vw, 28px) / 1.45 var(--display);
}
.hero__name span { display: block; }
.hero__name [data-line] { color: color-mix(in srgb, var(--ink) 82%, var(--accent)); }

.hero__note {
  max-width: 380px;
  min-height: 3.6em;
  margin: 16px 0 0;
  color: var(--soft);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.concept-tag {
  display: inline-block;
  margin: 10px 0 0;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.concept-tag[hidden] { display: none; }
/* In collections that contain concept artwork the tag keeps its space, so nothing shifts when it appears. */
.concept-tag.is-off { visibility: hidden; }

.controls { display: flex; align-items: center; gap: 10px; margin-top: 28px; }

.arrow {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  padding: 0;
  border-radius: 50%;
  transition: transform 0.45s var(--ease-spring), border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.arrow svg { width: 18px; height: 18px; transition: transform 0.45s var(--ease-out); }
.arrow:hover { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background-color: rgb(255 255 255 / 0.06); }
/* The arrow hints at where it will take you. */
.arrow[data-prev]:hover svg { transform: translateX(-3px); }
.arrow[data-next]:hover svg { transform: translateX(3px); }
.arrow:active { transform: scale(0.9); transition-duration: 0.1s; }

.counter {
  min-width: 72px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.counter__num { display: inline-block; color: var(--ink); }

/* ---------- Stage ---------- */

.stage {
  grid-area: stage;
  position: relative;
  height: clamp(420px, calc(100svh - 300px), 700px);
  container-type: size;
  isolation: isolate;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  --px: 0;
  --py: 0;
}

/* The ring is a progress dial: its dot travels round as you move through the collection. */
.orbit {
  --orbit-size: min(90cqw, 86cqh); /* always a circle, whatever the stage proportions */
  position: absolute;
  left: 46%; top: 47%;
  width: var(--orbit-size);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0.45;
  z-index: 0;
}
/* Only the dot turns (around the ring's centre), so the ring's box never grows and causes overflow. */
.orbit::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  transform: rotate(calc(45deg + var(--orbit-rot, 0deg))) translateY(calc(var(--orbit-size) / -2));
  transition: transform 1.3s var(--ease-in-out);
}

/* Contact shadow: tightens and fades as the product floats up, in time with it. */
.floor {
  position: absolute;
  left: 46%; bottom: 0;
  width: 62%; height: 54px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgb(0 0 0 / 0.55), transparent 66%);
  filter: blur(8px);
  z-index: 0;
}

.callout {
  position: absolute;
  right: 0; top: 44%;
  z-index: 6;
  max-width: 150px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--accent);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.callout span { display: block; }
.callout small { display: block; margin-top: 7px; color: var(--soft); font-size: 8px; letter-spacing: 0.12em; }

/* Product states — entry (default), active, previous (smaller, raised, behind) and leaving.
   The transition used is the destination state's, so arrivals, demotions and exits each get
   their own timing. Every state lists the same filter functions so filters interpolate. */
.stage__item {
  --x: 34%; --y: 4%; --s: 0.84; --r: 5deg;
  position: absolute;
  left: 46%; bottom: 2%;
  height: 92%;
  aspect-ratio: var(--ratio);
  opacity: 0;
  transform: translate(calc(-50% + var(--x)), var(--y)) scale(var(--s)) rotate(var(--r));
  transform-origin: 50% 90%;
  filter: brightness(0.8) drop-shadow(0 14px 22px rgb(0 0 0 / 0));
  transition: transform 0.75s var(--ease-in), opacity 0.5s var(--ease-in), filter 0.75s var(--ease-in);
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
}
/* Going back, the incoming product arrives from the other side. */
.stage[data-direction="prev"] .stage__item:not(.is-active):not(.is-previous):not(.is-leaving) { --x: -34%; --r: -5deg; }

/* Arriving: a beat after the old product starts to move, then a long, soft settle. */
.stage__item.is-active {
  --x: 0%; --y: 0%; --s: 1; --r: 0deg;
  opacity: 1;
  filter: brightness(1) drop-shadow(0 14px 22px rgb(0 0 0 / 0.45));
  z-index: 3;
  transition:
    transform 1.2s var(--ease-out) 70ms,
    opacity 0.8s var(--ease-out) 70ms,
    filter 1.2s var(--ease-out) 70ms;
}
/* Stepping back: travels smoothly to its resting place behind the new product. */
.stage__item.is-previous {
  --x: 21%; --y: -11%; --s: 0.84; --r: 3deg;
  opacity: 0.58;
  filter: brightness(0.68) drop-shadow(0 14px 22px rgb(0 0 0 / 0.2));
  z-index: 2;
  transition: transform 1.1s var(--ease-in-out), opacity 0.9s var(--ease-in-out), filter 1.1s var(--ease-in-out);
}
/* Leaving: drifts further back and fades quickly, out of the way. */
.stage__item.is-leaving {
  --x: 30%; --y: -18%; --s: 0.72; --r: 4deg;
  opacity: 0;
  z-index: 1;
}
.stage__item.no-transition { transition: none !important; }

/* Inner layer: leans toward the pointer (transform) and floats (translate) independently of the state above. */
.stage__tilt {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.9s var(--ease-out);
}
.stage__item--jar img { display: block; width: 100%; height: 100%; object-fit: contain; }
.stage__item.is-active .stage__tilt {
  transform: translate3d(calc(var(--px) * 7px), calc(var(--py) * 4px), 0) rotate(calc(var(--px) * 0.8deg));
}

/* Before JS runs, keep the static fallback image in place. */
.stage noscript img { position: absolute; left: 46%; bottom: 2%; height: 92%; width: auto; transform: translateX(-50%); }

/* ---------- Chocolate: physical folding carton ---------- */

.stage__item--box {
  height: 84%;
  bottom: 5%;
  perspective: 1400px;
  perspective-origin: 50% -20%; /* viewed from slightly above, so the top flap shows */
  --depth: clamp(22px, 2.8vw, 38px);
}
.stage__item--box.is-active { filter: brightness(1) drop-shadow(18px 24px 20px rgb(0 0 0 / 0.5)); }
/* Boxes are real objects: they turn in 3D toward the pointer, revealing more spine or more face. */
.stage__item--box.is-active .stage__tilt {
  transform: rotateY(calc(var(--px) * 10deg)) rotateX(calc(var(--py) * -6deg));
}

.carton {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-8deg) rotateY(-24deg) rotateZ(-1.5deg);
  transition: transform 1.2s var(--ease-out);
}
.stage__item--box.is-previous .carton { transform: rotateX(-8deg) rotateY(-32deg) rotateZ(1deg); transition-timing-function: var(--ease-in-out); }

.carton__front {
  position: absolute;
  inset: 0;
  transform: translateZ(calc(var(--depth) / 2));
  backface-visibility: hidden;
  overflow: hidden;
  background: var(--spine);
}
.carton__front img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Printed-board sheen and crisp folded edges. */
.carton__front::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgb(255 255 255 / 0.14), transparent 24%, transparent 68%, rgb(0 0 0 / 0.22));
  box-shadow: inset 1px 0 rgb(255 255 255 / 0.35), inset -1px 0 rgb(0 0 0 / 0.4), inset 0 1px rgb(255 255 255 / 0.25);
}

.carton__side {
  position: absolute;
  top: 0; bottom: 0;
  right: calc(var(--depth) / -2);
  width: var(--depth);
  transform: rotateY(90deg);
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(90deg, rgb(0 0 0 / 0.42), rgb(0 0 0 / 0.18)), var(--spine);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
.carton__side span {
  writing-mode: vertical-rl;
  white-space: nowrap;
  color: rgb(255 240 215 / 0.82);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.carton__top {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--depth) / -2);
  height: var(--depth);
  transform: rotateX(90deg);
  backface-visibility: hidden;
  background: linear-gradient(rgb(255 255 255 / 0.3), rgb(255 255 255 / 0.12)), var(--lid); /* lit from above */
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}
.carton__top::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%; top: 62%;
  border-top: 1px solid rgb(0 0 0 / 0.25);
}

/* ---------- Product switcher ---------- */

.switcher {
  grid-area: switcher;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 1100px;
  margin: 18px auto 0;
}

/* One highlight that slides to whichever product you pick, with a touch of spring. */
.switcher__indicator {
  position: absolute;
  top: 0; left: 0;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  transition: transform 0.6s var(--ease-spring), width 0.6s var(--ease-spring), height 0.6s var(--ease-spring);
}
.switcher__indicator.no-transition { transition: none; }

.chip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition:
    color 0.35s var(--ease-out),
    background-color 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    transform 0.45s var(--ease-spring);
}
.chip:hover { color: var(--ink); border-color: rgb(255 255 255 / 0.3); background-color: rgb(255 255 255 / 0.05); }
.chip:active { transform: scale(0.95); transition-duration: 0.1s; }
/* The selected chip lets the sliding highlight show through it. */
.chip[aria-pressed="true"] {
  color: var(--ink);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.chip__dot {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--swatch);
  transition: box-shadow 0.4s var(--ease-out), transform 0.45s var(--ease-spring);
}
.chip[aria-pressed="true"] .chip__dot { transform: scale(1.25); box-shadow: 0 0 10px var(--swatch); }

.hero__foot {
  grid-area: foot;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 22px;
  color: var(--soft);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero__foot p { margin: 0; }
.hero__foot p:first-child, .hero__foot p:last-child { flex: none; white-space: nowrap; }
.hero__foot p:not(:first-child):not(:last-child) { flex: 1; text-align: center; }

/* ---------- Collection typography ---------- */

.page--dry-fruits .hero__title { text-transform: uppercase; }

.page--chocolates .hero__title {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.page--chocolates .hero__title span {
  margin-top: 0;
  font: italic 500 1em / inherit var(--display);
  color: color-mix(in srgb, var(--accent) 45%, #f1d8b4);
}

.page--energy .hero__title { font-weight: 700; }
.page--energy .hero__title span { font-family: var(--display); font-weight: 300; }

.page--savouries .hero__title { font-weight: 700; }

/* ---------- Motion: entrance, float (skipped entirely for reduced motion) ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Page entrance: copy rises in reading order, the rule draws itself, the product settles, the chips follow. */
  .hero__intro > *, .hero__product > *, .hero__foot { animation: rise 0.9s var(--ease-out) both; }
  .hero__intro > :nth-child(1) { animation-delay: 40ms; }
  .hero__intro > :nth-child(2) { animation-delay: 110ms; }
  .hero__intro > .rule { animation: draw 1s var(--ease-out) 260ms both; }
  .hero__product > :nth-child(1) { animation-delay: 240ms; }
  .hero__product > :nth-child(2) { animation-delay: 300ms; }
  .hero__product > :nth-child(3) { animation-delay: 330ms; }
  .hero__product > :nth-child(4) { animation-delay: 360ms; }
  .stage { animation: settle 1.2s var(--ease-out) 120ms both; }
  .chip { animation: rise 0.7s var(--ease-out) both; animation-delay: calc(420ms + var(--i, 0) * 45ms); }
  .switcher__indicator { animation: appear 0.6s var(--ease-out) 520ms both; }
  .hero__foot { animation-delay: 650ms; }

  /* A slow breath: the product floats and its shadow tightens in time. Never changes product. */
  .stage__tilt { animation: float 7s var(--ease-sine) infinite; }
  .floor { animation: breathe 7s var(--ease-sine) infinite; }
}

@keyframes rise { from { opacity: 0; translate: 0 14px; } }
@keyframes settle { from { opacity: 0; translate: 0 26px; } }
@keyframes appear { from { opacity: 0; } }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes breathe { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 0.9; opacity: 0.72; } }

/* ---------- Tablet landscape / small laptop ---------- */

@media (max-width: 1100px) {
  .site-nav a { padding: 0 14px; letter-spacing: 0.14em; }
  .callout { display: none; } /* would overlap the previous product; the name is already beside the controls */
}

/* ---------- Single column: tablet portrait and mobile ---------- */

@media (max-width: 860px) {
  .site-header { min-height: 0; padding-top: 12px; }
  .site-header__bar {
    flex-direction: column;
    gap: 6px;
    padding: 10px 8px 8px;
    border-radius: 28px;
  }
  .brand--master img { height: 38px; }
  .brand--chocolate img { height: 42px; }
  .site-nav { width: 100%; }
  .site-nav ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
  .site-nav a { min-height: 44px; padding: 0 2px; font-size: 10px; letter-spacing: 0.1em; text-align: center; }

  .hero {
    min-height: 0;
    padding-top: 22px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: none;
    text-align: center;
  }
  .hero__copy { display: contents; }
  .hero__intro { order: 1; }
  .stage { order: 2; grid-area: auto; }
  .hero__product { order: 3; }
  .switcher { order: 4; grid-area: auto; }
  .hero__foot { order: 5; grid-area: auto; }

  .eyebrow { margin-bottom: 14px; font-size: 10px; }
  .hero__title { font-size: clamp(36px, 8vw, 60px); }
  .rule { display: none; }

  .stage { height: clamp(330px, 48svh, 560px); margin-top: 14px; }
  .orbit, .floor, .stage__item, .stage noscript img { left: 50%; }
  .callout { display: none; }

  /* Name directly under the product at full width; arrows flank the counter below it. */
  .hero__product { display: flex; flex-direction: column; align-items: center; max-width: 560px; width: 100%; margin: 14px auto 0; }
  .hero__product .controls { order: 1; }
  .hero__product .hero__note { order: 2; }
  .hero__product .concept-tag { order: 3; }
  .hero__name { min-height: 2.9em; font-size: clamp(18px, 4.6vw, 24px); }
  .controls { justify-content: center; margin-top: 12px; }
  .hero__note { max-width: none; min-height: 3.6em; margin-top: 10px; }
  .concept-tag { margin-top: 2px; }

  /* Many products: one swipeable row instead of a tall stack of buttons. */
  .switcher {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: calc(100% + 2 * var(--gutter));
    max-width: none;
    margin: 16px calc(-1 * var(--gutter)) 0;
    padding: 2px var(--gutter) 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  }
  .switcher::-webkit-scrollbar { display: none; }
  .chip { flex: none; scroll-snap-align: center; padding: 0 15px; font-size: 12px; }

  .hero__foot { flex-direction: column; align-items: center; gap: 6px; margin-top: 18px; text-align: center; }
}

@media (max-width: 560px) {
  /* Short label keeps all four collections on one row; the full name stays available to screen readers. */
  .nav-extra {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .site-nav a { font-size: 9px; letter-spacing: 0.02em; }
  .stage__item--box { --depth: 20px; }
  .carton__side span { font-size: 6.5px; letter-spacing: 0.14em; }
}

/* ---------- Reduced motion: a simple cross-fade, no travel ---------- */

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  :root { --colour: 0.25s; }
  .stage__item, .stage__item.is-active, .stage__item.is-previous { transition: opacity 0.3s ease !important; }
  .stage__item:not(.is-active):not(.is-previous) { --x: 0%; --y: 0%; --s: 1; --r: 0deg; }
  .stage__item .stage__tilt { transform: none !important; transition: none; }
  .carton, .orbit::after { transition: none; }
  .switcher__indicator { transition-duration: 0.15s; transition-timing-function: ease; }
  .chip, .chip__dot, .site-nav a, .arrow, .arrow svg { transition: none; }
}

/* =====================================================================
   Stage 2 — catalogue grid, filters and product details panel
   ===================================================================== */

html { scrollbar-gutter: stable; }
html.panel-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* "Shop this collection" — glass pill in the hero that glides down to the grid. */
.shop-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin-top: 22px;
  padding: 0 22px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.45s var(--ease-spring), border-color 0.3s var(--ease-out);
}
.shop-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.45s var(--ease-out); }
.shop-link:hover { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.shop-link:hover svg { transform: translateY(3px); }
.shop-link:active { transform: scale(0.96); transition-duration: 0.1s; }

.filters__indicator {
  border: 1px solid color-mix(in srgb, var(--accent) 60%, rgb(255 255 255 / 0.2));
  background:
    linear-gradient(150deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.04) 55%, rgb(255 255 255 / 0.1)),
    color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.38), inset 0 -1px 0 rgb(0 0 0 / 0.18);
}

/* ---------- Catalogue section ---------- */

.catalogue {
  position: relative;
  padding: clamp(64px, 10vh, 120px) var(--gutter) clamp(72px, 10vh, 120px);
  /* A calmer, deeper ground under the grid, fading in from the hero above. */
  background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--deep) 88%, transparent) 220px);
  scroll-margin-top: 0;
}
.catalogue > * { max-width: var(--max); margin-left: auto; margin-right: auto; }

.catalogue__head { padding-left: 1vw; }
.catalogue__head .eyebrow { margin-bottom: 16px; }
.catalogue__title {
  margin: 0;
  font: 600 clamp(34px, 4vw, 58px) / 1.04 var(--display);
  letter-spacing: -0.02em;
}
.catalogue__intro { margin: 14px 0 0; max-width: 520px; color: var(--soft); font-size: 15px; line-height: 1.7; }

.catalogue__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: 34px;
  margin-bottom: 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.catalogue__count { margin: 0; color: var(--soft); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; }

.filters {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.filters__indicator {
  position: absolute;
  top: 0; left: 0;
  border-radius: 999px;
  pointer-events: none;
  transition: transform 0.55s var(--ease-spring), width 0.55s var(--ease-spring), height 0.55s var(--ease-spring);
}
.filters__indicator.no-transition { transition: none; }
.filter {
  position: relative;
  z-index: 1;
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  transition: color 0.3s var(--ease-out), transform 0.45s var(--ease-spring);
}
.filter:hover, .filter[aria-pressed="true"] { color: var(--ink); }
.filter:active { transform: scale(0.95); transition-duration: 0.1s; }

/* ---------- Product grid & cards ---------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}
.product[hidden] { display: none; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  border-radius: 24px;
  background: linear-gradient(165deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.02) 60%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 22px 44px -26px rgb(0 0 0 / 0.7);
  transition: transform 0.6s var(--ease-out), border-color 0.4s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgb(255 255 255 / 0.28);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 30px 54px -26px rgb(0 0 0 / 0.75);
}
@supports selector(:has(*)) {
  .card:has(.card__action:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; }
  .card__action:focus-visible { outline: none; }
}

/* Consistent 4:5 image well, lit in the product's own colour. */
.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(70% 58% at 50% 50%, color-mix(in oklab, var(--card-tone) 78%, #fff 10%), transparent 100%),
    color-mix(in oklab, var(--card-tone) 55%, #070505);
}
.card__media::after {
  content: '';
  position: absolute;
  left: 22%; right: 22%; bottom: 6%;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgb(0 0 0 / 0.5), transparent 70%);
  filter: blur(6px);
}
.card__media img {
  /* Absolutely centred so the percentage height always resolves against the 4:5 well. */
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 1;
  width: auto;
  height: 82%;
  max-width: 78%;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgb(0 0 0 / 0.4));
  transition: transform 0.8s var(--ease-out);
}
.card:hover .card__media img { transform: translateY(-6px) scale(1.03); }
/* Boxes keep their physical feel: a slight turn that straightens on hover. */
.card--box .card__media img {
  height: 76%;
  filter: none;
  border-radius: 2px;
  box-shadow: 12px 16px 26px rgb(0 0 0 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.2);
  transform: perspective(900px) rotateY(-14deg);
}
.card--box:hover .card__media img { transform: perspective(900px) rotateY(-5deg) translateY(-6px); }

.card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.card__category { margin: 0; color: var(--soft); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; }
.card__name { margin: 0; font: 600 23px / 1.2 var(--display); }
.card__desc { margin: 0; color: var(--soft); font-size: 13px; line-height: 1.6; }
.card__sizes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.card__sizes li {
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.concept-tag--small { align-self: flex-start; margin: 0; padding: 3px 9px; font-size: 9px; }

.card__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}
.card__action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.45s var(--ease-out); }
.card:hover .card__action svg { transform: translateX(4px); }
/* The whole card is the link target; the visible label stays the accessible name. */
.card__action::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }

/* Cards rise into place as they scroll into view, a few at a time. */
.product-grid.will-reveal .product {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.8s var(--ease-out), translate 0.9s var(--ease-out);
  transition-delay: calc(min(var(--i), 5) * 60ms);
}
.product-grid.will-reveal .product.is-in { opacity: 1; translate: 0 0; }

/* Filter view transition: cards glide; the page itself stays still. */
html.vt-filter::view-transition-old(root) { display: none; }
html.vt-filter::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(*) { animation-timing-function: var(--ease-out); }

/* ---------- Product details panel ---------- */

.panel {
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  color: var(--ink);
}
.panel::backdrop { background: rgb(6 4 4 / 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade-in 0.4s var(--ease-out) both; }
.panel.is-closing::backdrop { animation: fade-out 0.26s var(--ease-in) forwards; }

.panel__sheet {
  position: absolute;
  top: 12px; right: 12px; bottom: 12px;
  width: min(520px, calc(100% - 24px));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--glass-edge);
  border-radius: 28px;
  background: linear-gradient(170deg, color-mix(in oklab, var(--card-tone) 42%, #0b0807), #0b0807 72%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), -30px 0 80px rgb(0 0 0 / 0.45);
  animation: sheet-in 0.6s var(--ease-out) both;
}
.panel.is-closing .panel__sheet { animation: sheet-out 0.26s var(--ease-in) forwards; }

.panel__close {
  position: sticky;
  top: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin: 14px 14px -58px auto;
  padding: 0;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: transform 0.45s var(--ease-spring);
}
.panel__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.panel__close:hover { transform: rotate(90deg); }
.panel__close:active { transform: scale(0.9); transition-duration: 0.1s; }

.panel__media {
  position: relative;
  height: min(48vh, 420px); /* a definite height, so the image's percentage height resolves */
  background:
    radial-gradient(60% 60% at 50% 50%, color-mix(in oklab, var(--card-tone) 80%, #fff 12%), transparent 100%),
    color-mix(in oklab, var(--card-tone) 60%, #070505);
}
.panel__media img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: 86%;
  max-width: 80%;
  object-fit: contain;
  filter: drop-shadow(0 18px 20px rgb(0 0 0 / 0.45));
  animation: lift-in 0.8s var(--ease-out) 0.08s both;
}
.panel__media--box img {
  height: 80%;
  filter: none;
  border-radius: 2px;
  box-shadow: 14px 18px 30px rgb(0 0 0 / 0.5), inset 0 0 0 1px rgb(255 255 255 / 0.2);
  transform: perspective(900px) rotateY(-12deg);
}

.panel__body { padding: 28px 30px 34px; }
.panel__body > * { animation: rise 0.7s var(--ease-out) both; }
.panel__body > :nth-child(2) { animation-delay: 60ms; }
.panel__body > :nth-child(3) { animation-delay: 110ms; }
.panel__body > :nth-child(4) { animation-delay: 150ms; }
.panel__body > :nth-child(n+5) { animation-delay: 190ms; }
.panel__body .eyebrow { margin-bottom: 12px; }
.panel__title { margin: 0 0 12px; font: 600 clamp(30px, 3vw, 40px) / 1.1 var(--display); letter-spacing: -0.015em; outline: none; }
.panel__desc { margin: 12px 0 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.panel__note { margin: 10px 0 0; color: var(--soft); font-size: 13px; line-height: 1.6; font-style: italic; }

.facts { margin: 26px 0 0; border-top: 1px solid var(--line); }
.facts__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--soft); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; padding-top: 3px; }
.facts dd { margin: 0; font-size: 15px; line-height: 1.6; }

.panel__subhead { margin: 28px 0 10px; font: 600 20px / 1.2 var(--display); }
.nutrition { width: 100%; border-collapse: collapse; font-size: 14px; }
.nutrition th, .nutrition td { padding: 9px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.nutrition td { text-align: right; }

.panel__pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 34px; }
.panel__pager a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 48%;
  min-height: 42px;
  padding: 0 16px;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.3s var(--ease-out), transform 0.45s var(--ease-spring);
}
.panel__pager a:hover { color: var(--ink); }
.panel__pager a:active { transform: scale(0.96); transition-duration: 0.1s; }

@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes sheet-in { from { opacity: 0; translate: 56px 0; } }
@keyframes sheet-out { to { opacity: 0; translate: 40px 0; } }
@keyframes lift-in { from { opacity: 0; translate: 0 18px; } }

/* ---------- Catalogue: tablet & mobile ---------- */

@media (max-width: 860px) {
  .hero__product .shop-link { order: 4; margin-top: 16px; }
  .catalogue { padding-top: 56px; scroll-margin-top: 64px; }
  .catalogue__head { padding-left: 0; text-align: center; }
  .catalogue__intro { margin-left: auto; margin-right: auto; }
  .catalogue__bar { justify-content: center; text-align: center; }
}

@media (max-width: 640px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card { border-radius: 18px; }
  .card__body { padding: 14px 14px 16px; gap: 6px; }
  .card__name { font-size: 18px; }
  .card__desc { font-size: 12px; }
  .card__action { font-size: 10px; letter-spacing: 0.14em; }

  /* Details become a bottom sheet. */
  .panel__sheet {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%;
    max-height: calc(100dvh - 32px);
    border-radius: 24px 24px 0 0;
    animation-name: sheet-up;
  }
  .panel.is-closing .panel__sheet { animation-name: sheet-down; }
  .panel__body { padding: 22px 20px 30px; }
  .panel__media { height: min(40vh, 340px); }
  .facts__row { grid-template-columns: 100px minmax(0, 1fr); }
}
@keyframes sheet-up { from { translate: 0 70px; opacity: 0; } }
@keyframes sheet-down { to { translate: 0 60px; opacity: 0; } }

/* ---------- Catalogue: reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .card, .card__media img, .card__action svg, .shop-link, .shop-link svg, .filter, .filters__indicator, .panel__close, .panel__pager a { transition: none; }
  .card:hover, .card:hover .card__media img, .card--box:hover .card__media img { transform: none; }
  .card--box:hover .card__media img { transform: perspective(900px) rotateY(-14deg); }
  .panel__sheet, .panel.is-closing .panel__sheet, .panel__media img, .panel__body > * { animation: none; }
  .panel::backdrop { animation: none; }
}

/* =====================================================================
   Stage 3 — brand story section (one per collection, beneath the grid)
   Same structure everywhere; each collection supplies its own colours.
   ===================================================================== */

.story--dry-fruits { --s-tone: #5a3a2c; --s-glow: #8d5c3f; --s-accent: #d39363; }
.story--chocolates { --s-tone: #7d2541; --s-glow: #bb4a69; --s-accent: #f1abbc; }
.story--energy     { --s-tone: #6a5334; --s-glow: #b3905a; --s-accent: #edd3a3; }
.story--savouries  { --s-tone: #7a2720; --s-glow: #b9472f; --s-accent: #eda77f; }

.story {
  padding: clamp(24px, 4vh, 56px) var(--gutter) clamp(80px, 12vh, 140px);
  /* Continues the catalogue's deep ground, so the grid flows straight into the story. */
  background: color-mix(in oklab, var(--deep) 88%, transparent);
}

.story__inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  padding: clamp(28px, 4vw, 64px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--s-accent) 28%, transparent);
  border-radius: 36px;
  background:
    radial-gradient(60% 85% at 24% 55%, color-mix(in oklab, var(--s-glow) 55%, transparent), transparent 72%),
    linear-gradient(150deg, color-mix(in oklab, var(--s-tone) 72%, #0a0706), color-mix(in oklab, var(--s-tone) 28%, #070505));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 40px 80px -42px rgb(0 0 0 / 0.65);
}

/* ---------- Visual: three products, the outer two smaller and raised behind, echoing the hero ---------- */

.story__visual {
  position: relative;
  height: clamp(340px, 40vw, 540px);
  margin: 0;
  container-type: size;
}
.story__ring {
  position: absolute;
  left: 50%; top: 48%;
  width: min(92cqw, 88cqh);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid var(--s-accent);
  border-radius: 50%;
  opacity: 0.35;
}
.story__ring::after {
  content: '';
  position: absolute;
  top: 14.6%; right: 14.6%;
  width: 7px; height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: var(--s-accent);
  box-shadow: 0 0 12px var(--s-accent);
}
.story__item {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: auto;
  max-width: none;
  height: 80%;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 16px 20px rgb(0 0 0 / 0.45));
}
.story__item--2 { z-index: 3; transform: translateX(-50%); }
.story__item--1 { z-index: 2; height: 64%; bottom: 14%; transform: translateX(-112%) rotate(-4deg); filter: brightness(0.82) drop-shadow(0 14px 18px rgb(0 0 0 / 0.35)); }
.story__item--3 { z-index: 2; height: 64%; bottom: 14%; transform: translateX(12%) rotate(4deg); filter: brightness(0.82) drop-shadow(0 14px 18px rgb(0 0 0 / 0.35)); }

/* Chocolates: boxes fanned like a gift, turned slightly in 3D. */
.story__visual--box .story__item {
  height: 72%;
  bottom: 9%;
  filter: none;
  border-radius: 2px;
  box-shadow: 14px 18px 30px rgb(0 0 0 / 0.5), inset 0 0 0 1px rgb(255 255 255 / 0.2);
}
.story__visual--box .story__item--2 { transform: translateX(-50%) perspective(900px) rotateY(-10deg); }
.story__visual--box .story__item--1 { height: 60%; bottom: 17%; transform: translateX(-108%) perspective(900px) rotateY(16deg) rotate(-6deg); filter: brightness(0.85); }
.story__visual--box .story__item--3 { height: 60%; bottom: 17%; transform: translateX(8%) perspective(900px) rotateY(-22deg) rotate(6deg); filter: brightness(0.85); }

/* ---------- Copy ---------- */

.story__copy .eyebrow { color: color-mix(in srgb, var(--s-accent) 80%, var(--ink)); margin-bottom: 18px; }
.story__title { margin: 0; font: 600 clamp(32px, 3.6vw, 54px) / 1.08 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.story__lede { max-width: 46ch; margin: 18px 0 0; color: var(--muted); font-size: 16px; line-height: 1.7; }

.story__points { margin: 30px 0 0; padding: 0; list-style: none; }
.story__point {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid rgb(255 255 255 / 0.12);
}
.story__point:last-child { border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.story__num { padding-top: 3px; color: var(--s-accent); font: 600 14px / 1.4 var(--display); letter-spacing: 0.12em; }
.story__point h3 { margin: 0 0 4px; font: 600 20px / 1.3 var(--display); }
.story__point p { margin: 0; color: var(--soft); font-size: 14px; line-height: 1.65; }

/* ---------- Scroll reveal (only when motion is welcome; see reveal.js) ---------- */

html.has-reveal [data-reveal] {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 0.9s var(--ease-out), translate 1s var(--ease-out);
}
html.has-reveal [data-reveal].is-revealed { opacity: 1; translate: 0 0; }
html.has-reveal .story__copy > [data-reveal]:nth-child(2) { transition-delay: 80ms; }
html.has-reveal .story__copy > [data-reveal]:nth-child(3) { transition-delay: 160ms; }
html.has-reveal .story__point[data-reveal] { transition-delay: calc(240ms + var(--d, 0) * 110ms); }
/* The products arrive one after another: centre first, then the two behind it. */
html.has-reveal .story__visual .story__item { opacity: 0; translate: 0 28px; transition: opacity 0.9s var(--ease-out), translate 1.1s var(--ease-out); }
html.has-reveal .story__visual.is-revealed .story__item { opacity: 1; translate: 0 0; }
html.has-reveal .story__visual .story__item--1 { transition-delay: 160ms; }
html.has-reveal .story__visual .story__item--3 { transition-delay: 260ms; }

/* ---------- Story: tablet & mobile ---------- */

@media (max-width: 860px) {
  .story__inner { grid-template-columns: minmax(0, 1fr); padding: 26px 22px 30px; border-radius: 28px; }
  .story__visual { height: clamp(280px, 70vw, 440px); }
  .story__copy .eyebrow, .story__title, .story__lede { text-align: center; }
  .story__lede { margin-left: auto; margin-right: auto; }
}
@media (max-width: 480px) {
  .story__point { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .story__point h3 { font-size: 18px; }
}

/* =====================================================================
   Stage 4 — homepage testimonials (hidden until genuine, approved entries exist)
   ===================================================================== */

.voices {
  padding: 0 var(--gutter) clamp(90px, 12vh, 140px);
  background: color-mix(in oklab, var(--deep) 88%, transparent);
}
.voices[hidden] { display: none; }
.voices > * { max-width: var(--max); margin-left: auto; margin-right: auto; }

.voices__head { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.voices__head .eyebrow { margin-bottom: 14px; }
.voices__title { margin: 0; font: 600 clamp(32px, 3.6vw, 50px) / 1.08 var(--display); letter-spacing: -0.02em; }

.voices__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(16px, 2vw, 28px);
  padding: 0;
  list-style: none;
}
/* Fewer than three: keep them centred and readable rather than stretched across the page. */
.voices[data-count="1"] .voices__list { max-width: 680px; grid-template-columns: minmax(0, 1fr); }
.voices[data-count="2"] .voices__list { max-width: 1000px; }

.voice { display: flex; }
.voice__figure {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0;
  padding: clamp(26px, 2.6vw, 36px);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 24px;
  background: linear-gradient(165deg, rgb(255 255 255 / 0.055), rgb(255 255 255 / 0.015) 60%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
}

.voice__rating { margin: 0 0 14px; color: var(--accent); font-size: 14px; letter-spacing: 0.18em; }
.voice__star { color: rgb(255 255 255 / 0.2); }
.voice__star.is-on { color: var(--accent); }

.voice__quote { position: relative; margin: 0; }
.voice__quote::before {
  content: "\201C" / "";
  display: block;
  height: 0.55em;
  color: var(--accent);
  font: 600 64px / 1 var(--display);
  opacity: 0.7;
}
.voice__quote p { margin: 0; font: 600 clamp(18px, 1.5vw, 21px) / 1.6 var(--display); color: var(--ink); }

.voice__quote { margin-bottom: 24px; }
/* margin-top: auto keeps every name on the same line across a row of cards. */
.voice__by {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid rgb(255 255 255 / 0.1);
}
.voice__photo { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; }
.voice__meta { display: flex; flex-direction: column; gap: 3px; }
.voice__name { font-size: 14px; letter-spacing: 0.04em; }
.voice__about { color: var(--soft); font-size: 12px; }
.voice__product { color: var(--muted); text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.25); text-underline-offset: 3px; }
a.voice__product:hover { color: var(--ink); text-decoration-color: var(--accent); }

html.has-reveal .voice[data-reveal] { transition-delay: calc(var(--d, 0) * 90ms); }

@media (max-width: 640px) {
  .voice__figure { padding: 24px 22px; border-radius: 20px; }
  .voice__quote::before { font-size: 52px; }
}

/* =====================================================================
   Stage 5 — homepage FAQ accordion
   ===================================================================== */

.faq {
  padding: 0 var(--gutter) clamp(90px, 12vh, 140px);
  background: color-mix(in oklab, var(--deep) 88%, transparent);
  scroll-margin-top: 90px; /* clears the sticky header when arriving from #faq links */
}
.faq > * { max-width: 860px; margin-left: auto; margin-right: auto; }
.faq__head { text-align: center; margin-bottom: clamp(26px, 4vw, 44px); }
.faq__head .eyebrow { margin-bottom: 14px; }
.faq__title { margin: 0; font: 600 clamp(32px, 3.6vw, 50px) / 1.08 var(--display); letter-spacing: -0.02em; }

.faq__list { border-top: 1px solid rgb(255 255 255 / 0.12); }
.faq__item { border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.faq__q { margin: 0; font: inherit; }

.faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 64px; /* comfortable tap target */
  padding: 18px 6px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 600 clamp(18px, 1.6vw, 22px) / 1.35 var(--display);
  text-align: left;
  transition: color 0.3s var(--ease-out);
}
.faq__btn:hover { color: color-mix(in srgb, var(--accent) 45%, var(--ink)); }
.faq__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }

/* Plus that turns into a minus: a glass disc, with the vertical stroke folding away when open. */
.faq__icon {
  position: relative;
  flex: none;
  width: 36px; height: 36px;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
}
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 1.5px;
  margin: -0.75px 0 0 -6px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.45s var(--ease-spring), opacity 0.3s var(--ease-out);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon::after { transform: rotate(0deg); opacity: 0; }

/* Collapsible answer: height eases via grid rows; collapsed answers are hidden from tab order and AT. */
.faq__a { display: grid; grid-template-rows: 1fr; }
.faq__a-inner { min-height: 0; overflow: hidden; }
.is-enhanced .faq__a { grid-template-rows: 0fr; visibility: hidden; }
.is-enhanced .faq__item.is-open .faq__a { grid-template-rows: 1fr; visibility: visible; }
.is-animated .faq__a { transition: grid-template-rows 0.45s var(--ease-in-out), visibility 0s linear 0.45s; }
.is-animated .faq__item.is-open .faq__a { transition: grid-template-rows 0.55s var(--ease-out), visibility 0s; }

.faq__a-inner > :first-child { margin-top: 0; }
.faq__a-inner {
  max-width: 66ch; /* readable answer length */
  padding: 0 6px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}
.faq__a-inner > :last-child { margin-bottom: 24px; }
.faq__a-inner p { margin: 0 0 12px; }
.faq__a-inner ul { margin: 0 0 12px; padding-left: 1.1em; }
.faq__a-inner li { margin: 6px 0; }
.faq__a-inner li::marker { color: var(--accent); }
.faq__a-inner a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 3px; }
.faq__a-inner a:hover { text-decoration-color: var(--accent); }

/* Collection pages: a quiet link to the homepage FAQ beneath the story. */
.story__more { max-width: var(--max); margin: 30px auto 0; text-align: center; }
.story__more a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.story__more a:hover { color: var(--ink); }
.story__more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.45s var(--ease-out); }
.story__more a:hover svg { transform: translateX(4px); }

@media (max-width: 860px) { .faq { scroll-margin-top: 140px; } }
@media (prefers-reduced-motion: reduce) {
  .is-animated .faq__a, .is-animated .faq__item.is-open .faq__a { transition: none; }
  .faq__icon::before, .faq__icon::after, .story__more svg { transition: none; }
}

/* =====================================================================
   Stage 6 — final calls to action, shared footer
   ===================================================================== */

.cta {
  padding: 0 var(--gutter) clamp(90px, 12vh, 140px);
  background: color-mix(in oklab, var(--deep) 88%, transparent);
}
.cta--home      { --c-accent: #d39363; --c-glow: #8d5c3f; }
.cta--chocolates { --c-accent: #f1abbc; --c-glow: #bb4a69; }
.cta--energy    { --c-accent: #edd3a3; --c-glow: #b3905a; }
.cta--savouries { --c-accent: #eda77f; --c-glow: #b9472f; }

.cta__inner {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(22px, 5vw, 64px);
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--c-accent) 26%, transparent);
  border-radius: 36px;
  background:
    radial-gradient(70% 100% at 50% 0%, color-mix(in oklab, var(--c-glow) 42%, transparent), transparent 75%),
    rgb(255 255 255 / 0.02);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.09);
}
.cta__inner .eyebrow { color: color-mix(in srgb, var(--c-accent) 80%, var(--ink)); margin-bottom: 16px; }
.cta__title { margin: 0; font: 600 clamp(32px, 4vw, 56px) / 1.06 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.cta__text { max-width: 46ch; margin: 16px auto 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }

/* Buttons — same glass family as the rest of the site; the primary one is warmed by the accent. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.45s var(--ease-spring), border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.btn:hover { border-color: rgb(255 255 255 / 0.32); background-color: rgb(255 255 255 / 0.05); }
.btn:active { transform: scale(0.96); transition-duration: 0.1s; }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.45s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn--primary {
  border-color: color-mix(in srgb, var(--c-accent, var(--accent)) 60%, rgb(255 255 255 / 0.2));
  background:
    linear-gradient(150deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.04) 55%, rgb(255 255 255 / 0.1)),
    color-mix(in srgb, var(--c-accent, var(--accent)) 24%, transparent);
}

/* ---------- Shared footer ---------- */

.site-footer {
  border-top: 1px solid rgb(255 255 255 / 0.1);
  /* Solid ground: also lets the master logo's screen blend hide its baked-in background. */
  background: #0c0907;
  color: var(--muted);
}
.site-footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 7vh, 72px) var(--gutter) 36px;
  display: flex;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.site-footer__brand .brand { display: inline-block; }
.site-footer__brand img { height: 44px; }
.site-footer__tagline { margin: 14px 0 0; color: var(--soft); font: italic 400 16px / 1.4 var(--display); }
.site-footer__nav { display: flex; gap: clamp(40px, 8vw, 96px); flex-wrap: wrap; }
.site-footer__heading { margin: 0 0 14px; color: var(--soft); font-size: 10px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}
.site-footer li a:hover { color: var(--ink); }
.site-footer__base {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--gutter) 28px;
  border-top: 1px solid rgb(255 255 255 / 0.07);
  color: var(--soft);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.site-footer__base p { margin: 0; }

@media (max-width: 640px) {
  .cta__actions .btn { flex: 1 1 calc(50% - 10px); }
  .cta__actions .btn--primary { flex-basis: 100%; }
  .site-footer__inner { flex-direction: column; gap: 32px; }
  .site-footer li a { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn svg, .site-footer li a { transition: none; }
}

/* =====================================================================
   Catalogue completion — pending photos, vegetarian mark, extra views
   ===================================================================== */

/* Products without a supplied photo: a calm, honest frame in the product's tone — never a borrowed jar. */
.card__media.is-pending, .panel__media.is-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
  text-align: center;
}
.pending__name {
  position: relative;
  z-index: 1;
  color: rgb(255 255 255 / 0.78);
  font: italic 400 clamp(22px, 2.2vw, 30px) / 1.15 var(--display);
}
.pending__note {
  position: relative;
  z-index: 1;
  color: rgb(255 255 255 / 0.5);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.card__media.is-pending::after { display: none; }
.panel__media.is-pending .pending__name { font-size: clamp(28px, 3vw, 38px); }

/* Full-frame photographs (bowls, hearts): fill the card's 4:5 well edge to edge; in the details
   panel show the whole photo, centred, so its printed product name is never cropped. */
.card__media.is-photo img {
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  filter: none;
  transform: none;
  border-radius: 0;
  box-shadow: none;
}
.card__media.is-photo::after { display: none; }
.card:hover .card__media.is-photo img { transform: scale(1.03); }
.panel__media.is-photo img {
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: none;
  transform: none;
  box-shadow: none;
  border-radius: 0;
}

/* Vegetarian symbol (green square with a green dot) plus a text label. */
.card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 18px; }
.veg { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; letter-spacing: 0.06em; }
.veg__icon {
  position: relative;
  flex: none;
  width: 14px; height: 14px;
  border: 1.5px solid #2e9e47;
  border-radius: 2px;
  background: #fff;
}
.veg__icon::after {
  content: '';
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  background: #2e9e47;
}
.veg--small .veg__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.panel__body .veg { margin: 0 0 12px; }

/* Additional product views in the details panel. */
.panel__views { display: flex; gap: 8px; padding: 12px 30px 0; }
.panel__view {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in oklab, var(--card-tone) 50%, #070505);
  transition: border-color 0.3s var(--ease-out), transform 0.45s var(--ease-spring);
}
.panel__view img { max-width: 100%; max-height: 100%; object-fit: contain; }
.panel__view[aria-pressed="true"] { border-color: var(--accent); }
.panel__view:active { transform: scale(0.94); transition-duration: 0.1s; }


.site-footer__address { margin: 18px 0 0; color: var(--soft); font-size: 13px; font-style: normal; line-height: 1.7; }
.site-footer__hours { margin: 10px 0 0; color: var(--soft); font-size: 13px; }
.site-footer__brand { max-width: 320px; }
.gift-intro { padding-top: clamp(40px, 8vh, 96px); min-height: 50vh; }
.catalogue[hidden] { display: none; }

/* =====================================================================
   Shop features — header actions, favourites, add to cart, cart,
   checkout, search, contact, 404
   ===================================================================== */

/* ---------- Header actions (search · favourites · cart) ---------- */
.site-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.site-action {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--muted);
  transition: color 0.3s var(--ease-out), background-color 0.3s var(--ease-out), transform 0.45s var(--ease-spring);
}
.site-action:hover, .site-action[aria-current="page"] { color: var(--ink); background: rgb(255 255 255 / 0.07); }
.site-action:active { transform: scale(0.92); transition-duration: 0.1s; }
.site-action svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.site-action__badge {
  position: absolute;
  top: 4px; right: 2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #1a120e;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.site-action__badge[hidden] { display: none; }
.site-action__badge.is-bumped { animation: bump 0.5s var(--ease-spring); }
@keyframes bump { 40% { transform: scale(1.35); } }

@media (max-width: 860px) {
  .site-header__bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand . actions" "nav nav nav";
    align-items: center;
    row-gap: 6px;
  }
  .site-header__bar .brand { grid-area: brand; padding-left: 8px; }
  .site-header__bar .site-nav { grid-area: nav; }
  .site-actions { grid-area: actions; }
}

/* ---------- Favourite (heart) buttons ---------- */
.fav-btn {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  padding: 0;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--ink);
  transition: transform 0.45s var(--ease-spring), color 0.3s var(--ease-out);
}
.fav-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; transition: fill 0.3s var(--ease-out); }
.fav-btn[aria-pressed="true"] { color: #f08a74; }
.fav-btn[aria-pressed="true"] svg { fill: currentColor; }
.fav-btn:active { transform: scale(0.88); transition-duration: 0.1s; }
.fav-btn--card { position: absolute; top: 12px; right: 12px; z-index: 4; } /* above the card's stretched link */

/* ---------- Add to cart (product details) ---------- */
.buy { margin: 24px 0 0; padding: 20px 0 4px; border-top: 1px solid var(--line); }
.buy__sizes { margin: 0 0 16px; padding: 0; border: 0; }
.buy__sizes legend, .buy__single { margin: 0 0 10px; padding: 0; color: var(--soft); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }
.buy__single strong { color: var(--ink); font-size: 14px; font-weight: 400; letter-spacing: 0.02em; text-transform: none; }
.size-opt { position: relative; display: inline-flex; margin: 0 6px 6px 0; }
.size-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.size-opt span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 13px;
  transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.size-opt input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); }
.size-opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.buy__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.buy__add { flex: 1 1 160px; }
.buy__add.is-added { background: color-mix(in srgb, #2e9e47 30%, transparent); border-color: #2e9e47; }
.buy__view { display: inline-block; margin-top: 12px; color: var(--ink); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.buy__note { margin: 12px 0 0; color: var(--soft); font-size: 12px; line-height: 1.6; }
.buy__note a { color: var(--ink); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.qty__btn { width: 40px; height: 44px; border: 0; background: none; color: var(--ink); font-size: 18px; }
.qty__btn:hover:not(:disabled) { background: rgb(255 255 255 / 0.06); }
.qty__btn:disabled { opacity: 0.35; cursor: default; }
.qty__input {
  width: 44px; height: 44px; border: 0; background: none; color: var(--ink);
  font: inherit; font-size: 15px; text-align: center; -moz-appearance: textfield; appearance: textfield;
}
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  z-index: 200;
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: color-mix(in oklab, #0c0907 80%, transparent);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--ink);
  font-size: 13px;
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.4);
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 0.3s var(--ease-out), transform 0.45s var(--ease-out);
  pointer-events: none;
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Utility pages (cart, checkout, favourites, search, contact, 404) ---------- */
.utility { max-width: var(--max); margin: 0 auto; padding: clamp(32px, 6vh, 72px) var(--gutter) clamp(80px, 12vh, 140px); min-height: 60vh; }
.utility__head { margin-bottom: clamp(24px, 4vw, 40px); }
.utility__head .eyebrow { margin-bottom: 12px; }
.utility__title { margin: 0; font: 600 clamp(36px, 4.4vw, 60px) / 1.05 var(--display); letter-spacing: -0.02em; }
.utility__text { max-width: 56ch; margin: 14px 0 0; color: var(--muted); font-size: 16px; line-height: 1.7; }

.btn--small { min-height: 40px; padding: 0 16px; font-size: 11px; }
.text-btn {
  min-height: 36px; padding: 0; border: 0; background: none; color: var(--muted);
  font-size: 13px; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.25); text-underline-offset: 3px;
}
.text-btn:hover { color: var(--ink); }

.empty { padding: clamp(32px, 6vw, 64px) 0; text-align: center; }
.empty__title { margin: 0; font: 600 clamp(26px, 3vw, 36px) / 1.2 var(--display); outline: none; }
.empty__text { margin: 12px auto 0; max-width: 46ch; color: var(--muted); }
.empty .cta__actions { margin-top: 26px; }

/* Cart */
.cart, .checkout, .contact { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.line__thumb {
  display: grid; place-items: center; width: 96px; height: 120px; overflow: hidden; border-radius: 14px;
  background: radial-gradient(70% 60% at 50% 50%, color-mix(in oklab, var(--card-tone) 78%, #fff 10%), color-mix(in oklab, var(--card-tone) 55%, #070505));
}
.line__thumb img { width: 100%; height: 100%; object-fit: cover; }
.line__pending { color: rgb(255 255 255 / 0.7); font: italic 400 32px / 1 var(--display); }
.line__collection { margin: 0 0 4px; color: var(--soft); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }
.line__name { color: var(--ink); font: 600 21px / 1.25 var(--display); text-decoration: none; }
.line__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.line__size { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.line__controls { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.line__links { display: flex; gap: 14px; }

.summary {
  position: sticky; top: 110px;
  padding: 26px;
  border: 1px solid var(--glass-edge);
  border-radius: 24px;
  background: linear-gradient(165deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.015));
}
.summary__title { margin: 0 0 16px; font: 600 24px / 1.2 var(--display); }
.summary__rows { margin: 0; }
.summary__rows div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.summary__rows dt { color: var(--soft); }
.summary__rows dd { margin: 0; text-align: right; }
.summary__cta { width: 100%; margin-top: 20px; }
.summary__note { margin: 14px 0 0; color: var(--soft); font-size: 12px; line-height: 1.6; }
.summary__lines { margin: 0 0 12px; padding: 0; list-style: none; }
.summary__lines li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.summary__lines small { display: block; color: var(--soft); font-size: 12px; margin-top: 2px; }

/* Checkout & contact forms */
.checkout__form { display: grid; gap: 22px; }
.notice {
  margin: 0; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 16px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--muted); font-size: 14px; line-height: 1.6;
}
.notice strong { color: var(--ink); font-weight: 600; }
.notice[hidden] { display: none; }
.form-error { margin: 0; padding: 12px 16px; border-radius: 12px; background: rgb(228 87 61 / 0.15); border: 1px solid rgb(228 87 61 / 0.5); color: #ffd2c8; font-size: 14px; }
.form-error[hidden] { display: none; }
.group { display: grid; gap: 16px; margin: 0; padding: 0; border: 0; }
.group legend { margin-bottom: 4px; padding: 0; font: 600 21px / 1.3 var(--display); }
.field { display: grid; gap: 6px; }
.field label { color: var(--muted); font-size: 13px; }
.field .req { color: #f08a74; }
.field .opt { color: var(--soft); font-size: 12px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid rgb(255 255 255 / 0.2); border-radius: 12px;
  background: rgb(255 255 255 / 0.04); color: var(--ink); font: inherit; font-size: 16px;
  transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.field select option { color: #1a120e; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); background: rgb(255 255 255 / 0.07); outline: none; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: #e4573d; }
.field__hint { margin: 0; color: var(--soft); font-size: 12px; line-height: 1.6; }
.field__error { margin: 0; color: #ffb3a3; font-size: 13px; }
.field__error[hidden] { display: none; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 16px; }
.field--check { grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 12px; }
.field--check input { width: 22px; min-height: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); }
.field--check .field__error { grid-column: 1 / -1; }
.checkout__submit { justify-self: start; }

.send { max-width: 720px; }
.send__title { margin: 6px 0 0; font: 600 clamp(28px, 3vw, 40px) / 1.15 var(--display); outline: none; }
.send__text, .send__hint { color: var(--muted); line-height: 1.7; }
.send .cta__actions { justify-content: flex-start; margin: 22px 0 12px; }
.send__preview { margin-top: 18px; color: var(--muted); }
.send__preview summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; }
.send__preview pre { white-space: pre-wrap; padding: 16px; border-radius: 12px; background: rgb(255 255 255 / 0.04); font: 13px / 1.6 ui-monospace, Menlo, monospace; }
.send__done { display: flex; gap: 20px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }

/* Search */
.search-form { display: flex; gap: 10px; max-width: 640px; margin-bottom: 18px; }
.search-form input {
  flex: 1; min-height: 52px; padding: 0 18px; border: 1px solid rgb(255 255 255 / 0.2); border-radius: 999px;
  background: rgb(255 255 255 / 0.05); color: var(--ink); font: inherit; font-size: 16px;
}
.search-form input:focus { border-color: var(--accent); outline: none; }
.search-form input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.search-status { margin-bottom: 22px; }

/* Favourites page */
.fav-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; }
.page--favourites .card__name, .page--search .card__name { font-size: 21px; }

/* Contact */
.contact__heading { margin: 0 0 16px; font: 600 24px / 1.2 var(--display); }
.contact .facts { margin-top: 0; }
.contact .facts a { color: var(--ink); }
.contact address { font-style: normal; }
.contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

@media (max-width: 900px) {
  .cart, .checkout, .contact { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
}
@media (max-width: 560px) {
  .line { grid-template-columns: 72px minmax(0, 1fr); }
  .line__thumb { width: 72px; height: 90px; }
  .line__controls { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .search-form { flex-direction: column; }
  .send .cta__actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .site-action, .fav-btn, .fav-btn svg, .size-opt span, .toast { transition: none; }
  .site-action__badge.is-bumped { animation: none; }
}

/* Fix: thumbnails must stay inside their buttons (percent max-height doesn't resolve in a grid item). */
.panel__view { overflow: hidden; }
.panel__view img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }

/* Fix: tighter header between tablet and laptop widths so the shop icons always fit. */
@media (min-width: 861px) and (max-width: 1100px) {
  .site-header__bar { gap: 12px; padding-left: 18px; }
  .site-nav a { padding: 0 10px; letter-spacing: 0.1em; }
  .brand--master img { height: 40px; }
  .brand--chocolate img { height: 44px; }
}
@media (min-width: 861px) and (max-width: 960px) {
  .site-nav a { font-size: 10px; letter-spacing: 0.06em; padding: 0 8px; }
  .site-action { width: 40px; height: 40px; }
}

/* Price lines (empty "—" until prices are added to the catalogue data). */
.card__price { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 0; color: var(--soft); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.card__price-value { color: var(--ink); font-size: 15px; letter-spacing: 0.02em; text-transform: none; }
.buy__price { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; }
.buy__price-label { color: var(--soft); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }
.buy__price-value { color: var(--ink); font: 600 24px / 1.2 var(--display); }

/* =====================================================================
   Hero ring — crisp metal dial matching the logo
   Copper (master logo) everywhere; warm gold on Chocolates (logo + golden box detailing).
   --sheen is the highlight angle, set by hero.js (pointer, or the selected product).
   ===================================================================== */

@property --sheen { syntax: '<angle>'; inherits: true; initial-value: 45deg; }

:root {
  --metal-deep: #3f1c0b;
  --metal-dark: #73391a;
  --metal-mid: #b5683a;
  --metal-light: #eab182;
  --metal-shine: #fff1de;
}
.page--chocolates {
  --metal-deep: #43300c;
  --metal-dark: #7a5719;
  --metal-mid: #b88b35;
  --metal-light: #eccf88;
  --metal-shine: #fff8de;
}

.stage { transition: --sheen 0.7s var(--ease-out); }

.orbit {
  border: 0;
  opacity: 1;
  pointer-events: none; /* only the studs are interactive */
  /* Leans gently toward the pointer, like a physical dial. */
  transform: translate(-50%, -50%) perspective(1100px) rotateX(calc(var(--py) * -9deg)) rotateY(calc(var(--px) * 9deg));
  transition: transform 0.9s var(--ease-out);
  filter:
    drop-shadow(0 0 14px color-mix(in srgb, var(--metal-mid) 30%, transparent))
    drop-shadow(0 6px 10px rgb(0 0 0 / 0.35));
}

/* The ring: brushed metal (conic) with a bevel — lit inner edge, shadowed outer edge. */
.orbit::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side,
      transparent calc(100% - 5px),
      rgb(255 255 255 / 0.55) calc(100% - 4.4px),
      transparent calc(100% - 3.2px),
      transparent calc(100% - 1.4px),
      rgb(0 0 0 / 0.45) calc(100% - 0.4px)),
    conic-gradient(from calc(var(--sheen) - 90deg),
      var(--metal-dark) 0deg,
      var(--metal-mid) 38deg,
      var(--metal-light) 72deg,
      var(--metal-shine) 87deg,
      var(--metal-shine) 93deg,
      var(--metal-light) 108deg,
      var(--metal-mid) 142deg,
      var(--metal-deep) 182deg,
      var(--metal-dark) 215deg,
      var(--metal-mid) 248deg,
      var(--metal-light) 268deg,
      var(--metal-mid) 290deg,
      var(--metal-dark) 330deg,
      var(--metal-dark) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5.5px), #000 calc(100% - 5px), #000 calc(100% - 0.5px), transparent 100%);
  mask: radial-gradient(farthest-side, transparent calc(100% - 5.5px), #000 calc(100% - 5px), #000 calc(100% - 0.5px), transparent 100%);
}

/* The selection bead: a polished metal sphere riding the ring. */
.orbit::after {
  z-index: 2;
  width: 14px; height: 14px;
  margin: -7px;
  background: radial-gradient(circle at 35% 30%, var(--metal-shine) 0 16%, var(--metal-light) 36%, var(--metal-mid) 62%, var(--metal-deep) 100%);
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.35),
    0 2px 6px rgb(0 0 0 / 0.5),
    0 0 18px color-mix(in srgb, var(--metal-light) 55%, transparent);
}

/* Studs — one per product. */
.orbit__dial { position: absolute; inset: 0; z-index: 1; }
.orbit__notch {
  position: absolute;
  left: 50%; top: 50%;
  width: 32px; height: 32px; /* comfortable tap target around a small stud */
  margin: -16px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  transform: rotate(var(--a)) translateY(calc(var(--orbit-size) / -2));
  -webkit-tap-highlight-color: transparent;
}
.orbit__notch::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  margin: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--metal-shine) 0 14%, var(--metal-light) 34%, var(--metal-mid) 60%, var(--metal-deep) 100%);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.5);
  transition: transform 0.45s var(--ease-spring), opacity 0.3s var(--ease-out);
}
.orbit__notch:hover::before { transform: scale(1.6); }
.orbit__notch:active::before { transform: scale(1.2); transition-duration: 0.1s; }
.orbit__notch.is-active::before { opacity: 0; } /* the bead sits here */

/* Product name on hover, kept upright whatever the stud's position on the ring. */
.orbit__label {
  position: absolute;
  left: 50%; top: 50%;
  transform-origin: 0 0;
  transform: rotate(calc(var(--a) * -1)) translate(-50%, calc(-100% - 14px));
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--metal-light) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, #0c0907 75%, transparent);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out);
}
.orbit__notch:hover .orbit__label { opacity: 1; }
/* While a stud is hovered, lift the dial above the product so its label is never hidden. */
.orbit:has(.orbit__notch:hover) { z-index: 4; }

@media (max-width: 860px) {
  .orbit::before {
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px), #000 calc(100% - 0.5px), transparent 100%);
    mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px), #000 calc(100% - 0.5px), transparent 100%);
  }
  .orbit__label { display: none; } /* touch: no hover; tapping a stud simply selects */
}

@media (prefers-reduced-motion: reduce) {
  .stage { transition: none; }
  .orbit { transform: translate(-50%, -50%); transition: none; }
  .orbit__notch::before, .orbit__label { transition: none; }
}
.callout { pointer-events: none; } /* never blocks the dial studs */
/* Labels sit just outside the ring (radially outward), so the dial can stay behind the product. */
.orbit__label { transform: translateY(-26px) rotate(calc(var(--a) * -1)) translate(-50%, -50%); }
.orbit:has(.orbit__notch:hover) { z-index: 0; }
/* Floating stud name tag — above the products (the dial itself stays behind them). */
.orbit__tip {
  position: absolute;
  z-index: 7;
  transform: translate(-50%, -50%) scale(0.92);
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--metal-light) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, #0c0907 75%, transparent);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out), transform 0.35s var(--ease-out);
}
.orbit__tip.is-shown { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (max-width: 860px) { .orbit__tip { display: none; } }
@media (prefers-reduced-motion: reduce) { .orbit__tip { transition: none; } }

/* =====================================================================
   Smooth page changes — no blank frame
   The old and new pages overlap: the new page is opaque almost at once while the old one slides away.
   Direction follows the collection order (forward = to the right in the menu).
   ===================================================================== */
::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: vt-old-fade 0.32s var(--ease-in) both; }
::view-transition-new(root) { animation: vt-new-fade 0.36s var(--ease-out) both; }
html:active-view-transition-type(forward)::view-transition-old(root) { animation: vt-old-left 0.38s var(--ease-in-out) both; }
html:active-view-transition-type(forward)::view-transition-new(root) { animation: vt-new-from-right 0.42s var(--ease-out) both; }
html:active-view-transition-type(back)::view-transition-old(root) { animation: vt-old-right 0.38s var(--ease-in-out) both; }
html:active-view-transition-type(back)::view-transition-new(root) { animation: vt-new-from-left 0.42s var(--ease-out) both; }
::view-transition-group(nav-current) { animation-duration: 0.42s; }
::view-transition-group(site-header) { animation-duration: 0.36s; }

@keyframes vt-old-fade { to { opacity: 0; } }
@keyframes vt-new-fade { from { opacity: 0; } 40% { opacity: 1; } }
@keyframes vt-old-left { to { opacity: 0; transform: translateX(-48px); } }
@keyframes vt-old-right { to { opacity: 0; transform: translateX(48px); } }
@keyframes vt-new-from-right { from { opacity: 0; transform: translateX(48px); } 45% { opacity: 1; } }
@keyframes vt-new-from-left { from { opacity: 0; transform: translateX(-48px); } 45% { opacity: 1; } }

/* Arriving from another page: show the hero immediately (the page transition is the motion). */
html.vt-arrived .hero__intro > *,
html.vt-arrived .hero__product > *,
html.vt-arrived .hero__foot,
html.vt-arrived .stage,
html.vt-arrived .chip,
html.vt-arrived .switcher__indicator { animation: none !important; }

/* Quicker, livelier entrance on a fresh load. */
@media (prefers-reduced-motion: no-preference) {
  .hero__intro > *, .hero__product > *, .hero__foot { animation-duration: 0.6s; }
  .stage { animation-duration: 0.8s; animation-delay: 60ms; }
  .chip { animation-duration: 0.5s; animation-delay: calc(180ms + var(--i, 0) * 30ms); }
  .switcher__indicator { animation-delay: 240ms; }
  .hero__foot { animation-delay: 320ms; }
}

/* Faster product changes inside the hero (still choreographed: outgoing first, incoming settles). */
.stage__item { transition-duration: 0.55s, 0.38s, 0.55s; }
.stage__item.is-active { transition-duration: 0.85s, 0.55s, 0.85s; transition-delay: 40ms; }
.stage__item.is-previous { transition-duration: 0.8s, 0.65s, 0.8s; }
.orbit::after { transition-duration: 0.9s; }
.carton { transition-duration: 0.85s; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root),
  html:active-view-transition-type(forward)::view-transition-old(root),
  html:active-view-transition-type(forward)::view-transition-new(root),
  html:active-view-transition-type(back)::view-transition-old(root),
  html:active-view-transition-type(back)::view-transition-new(root) { animation: none; }
}

/* =====================================================================
   Expansion — navigation group, menu, gifting pages, mix builder,
   homepage features, Energy categories
   ===================================================================== */

/* Native Apple system font for body text, with platform fallbacks (no font files embedded). */
:root { --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif; }

/* ---------- Gifting dropdown + Make Your Own Mix (wide screens only) ---------- */
.nav-wide { display: none; }
@media (min-width: 1800px) { .nav-wide { display: block; } }
.nav-group { position: relative; }
.nav-group__btn {
  display: flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 16px; border: 0; border-radius: 999px;
  background: none; color: var(--muted); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; position: relative; z-index: 1;
}
.nav-group__btn:hover, .nav-group__btn[aria-expanded="true"] { color: var(--ink); background: rgb(255 255 255 / 0.07); }
.nav-group__btn[data-current] { color: var(--ink); }
.nav-group__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.3s var(--ease-out); }
.nav-group__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-group__menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 5;
  min-width: 200px; margin: 0; padding: 8px; list-style: none;
  border: 1px solid var(--glass-edge); border-radius: 18px;
  background: color-mix(in oklab, #0c0907 82%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 20px 40px rgb(0 0 0 / 0.4);
  animation: rise 0.25s var(--ease-out);
}
.nav-group__menu[hidden] { display: none; }
.nav-group__menu a { display: flex; min-height: 44px; align-items: center; padding: 0 14px; border-radius: 12px; color: var(--muted); font-size: 13px; letter-spacing: 0.04em; text-transform: none; text-decoration: none; }
.nav-group__menu a:hover, .nav-group__menu a[aria-current="page"] { color: var(--ink); background: rgb(255 255 255 / 0.07); }

/* ---------- Menu button + panel (below 1800px) ---------- */
.site-menu-btn { display: none; border: 0; background: none; cursor: pointer; }
@media (max-width: 1799px) { .site-menu-btn { display: grid; } }
.site-menu { position: fixed; inset: 0; z-index: 90; background: rgb(6 4 4 / 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade-in 0.25s var(--ease-out); }
.site-menu[hidden] { display: none; }
.site-menu__inner {
  position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(380px, calc(100% - 24px)); overflow-y: auto;
  padding: 28px 26px; border: 1px solid var(--glass-edge); border-radius: 26px;
  background: linear-gradient(170deg, color-mix(in oklab, var(--tone) 40%, #0b0807), #0b0807 70%);
  box-shadow: -30px 0 80px rgb(0 0 0 / 0.45);
  animation: sheet-in 0.4s var(--ease-out) both;
}
.site-menu__group + .site-menu__group { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.site-menu__title { margin: 0 0 8px; color: var(--soft); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; }
.site-menu ul { margin: 0; padding: 0; list-style: none; }
.site-menu a { display: flex; align-items: center; min-height: 46px; color: var(--ink); font: 600 20px / 1.2 var(--display); text-decoration: none; }
.site-menu a:hover, .site-menu a[aria-current="page"] { color: var(--accent); }
html.menu-open { overflow: hidden; }

/* ---------- Feature pages (Period Box, Diwali, Mix, About, Gifting hub) ---------- */
.page--feature main { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(80px, 12vh, 140px); }
.ghero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; min-height: calc(100svh - 120px); padding: clamp(24px, 5vh, 56px) 0; }
.ghero--wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ghero--text { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: clamp(48px, 10vh, 120px); }
.ghero__title { margin: 14px 0 0; font: 600 clamp(40px, 5vw, 72px) / 1.04 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.ghero__title span { display: block; font-style: italic; color: color-mix(in srgb, var(--accent) 50%, var(--ink)); }
.ghero__text { max-width: 52ch; margin: 18px 0 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.ghero__text a { color: var(--ink); }
.ghero__actions { justify-content: flex-start; margin-top: 28px; }
.ghero .notice { margin-top: 22px; max-width: 52ch; }
.ghero__media { position: relative; display: grid; place-items: center; border-radius: 32px; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 45%, color-mix(in oklab, var(--glow) 60%, transparent), transparent 75%); }
.ghero__media img { display: block; width: 100%; height: auto; max-height: 76vh; object-fit: contain; }
.ghero__media--dark { background: radial-gradient(60% 55% at 50% 50%, rgb(255 255 255 / 0.06), transparent 70%), #0b0908; border: 1px solid var(--line); }
.ghero__media--dark img { max-height: 70vh; width: auto; }
.ghero__trio { grid-template-columns: repeat(3, 1fr); gap: 12px; background: none; overflow: visible; }
.ghero__trio img { border-radius: 20px; box-shadow: 0 20px 40px rgb(0 0 0 / 0.4); }
.ghero__trio img:nth-child(2) { transform: translateY(-24px); }

.gsection { padding: clamp(48px, 8vh, 96px) 0 0; scroll-margin-top: 100px; }
.gsection__head { margin-bottom: clamp(22px, 3vw, 36px); }
.gsection__head .eyebrow { margin-bottom: 12px; }
.gsection__title { margin: 0; font: 600 clamp(30px, 3.4vw, 48px) / 1.08 var(--display); letter-spacing: -0.02em; }
.gsection__text { max-width: 60ch; margin: 12px 0 0; color: var(--muted); line-height: 1.7; }
.gsection__lede { margin: 0 0 24px; font: italic 400 clamp(22px, 2.2vw, 30px) / 1.3 var(--display); color: color-mix(in srgb, var(--accent) 45%, var(--ink)); }
.gsection__note { margin: 18px 0 0; color: var(--soft); font-size: 13px; line-height: 1.6; }

.tier-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tier-card { padding: 30px; border: 1px solid var(--glass-edge); border-radius: 26px; background: linear-gradient(165deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.015)); }
.tier-card h3 { margin: 0; font: 600 26px / 1.2 var(--display); }
.tier-card__price { margin: 8px 0 0; font: 600 34px / 1.1 var(--display); color: color-mix(in srgb, var(--accent) 55%, var(--ink)); }
.tier-card__text { margin: 12px 0 20px; color: var(--muted); line-height: 1.6; }

.gsection--blocks { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.blocks { display: grid; gap: 14px; }
.block { padding: 24px 26px; border-left: 2px solid var(--accent); background: rgb(255 255 255 / 0.03); border-radius: 0 18px 18px 0; }
.block h3 { margin: 0 0 6px; font: 600 22px / 1.25 var(--display); }
.block p { margin: 0; color: var(--muted); line-height: 1.6; }
.gfigure { margin: 0; }
.gfigure img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 24px 50px rgb(0 0 0 / 0.4); }
.gfigure figcaption { margin-top: 10px; color: var(--soft); font-size: 12px; line-height: 1.5; }
.gallery { display: grid; grid-template-columns: 0.8fr 1.2fr 1fr; gap: 16px; align-items: start; }

.builder { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.builder > .summary { position: sticky; top: 110px; }

/* Selectable chips (checkbox / radio) */
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.picks--format { margin-top: 14px; }
.pick { position: relative; display: inline-flex; }
.pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pick span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 13px; transition: border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out), color 0.25s var(--ease-out); }
.pick input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); }
.pick input:checked + span::before { content: '✓'; margin-right: 8px; color: var(--accent); }
.pick--radio input:checked + span::before { content: '●'; font-size: 10px; }
.pick input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.pick--wide { margin-top: 10px; }
.tiers-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tier-opt { position: relative; }
.tier-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tier-opt span { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; transition: border-color 0.25s, background-color 0.25s; }
.tier-opt strong { font: 600 20px / 1.2 var(--display); }
.tier-opt em { font-style: normal; color: var(--muted); }
.tier-opt input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.tier-opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.recipient { display: grid; gap: 14px; margin-top: 14px; }
.recipient[hidden] { display: none; }
.enq__actions { justify-content: flex-start; margin-top: 18px; }
.enq__actions .btn { flex: 1 1 calc(50% - 10px); }
.enq__hint { margin-top: 12px; }

/* Tabs (Diwali) */
.tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 28px; border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass-fill); }
.tabs [role="tab"] { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 13px; letter-spacing: 0.04em; }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); }
.tabpanel[hidden] { display: none; }

/* Diwali product picker */
.pick-group { border-top: 1px solid var(--line); }
.pick-group:last-child { border-bottom: 1px solid var(--line); }
.pick-group summary { display: flex; justify-content: space-between; align-items: center; min-height: 56px; cursor: pointer; font: 600 20px / 1.2 var(--display); }
.pick-group summary span { color: var(--soft); font: 12px var(--sans); }
.pick-list { margin: 0 0 14px; padding: 0; list-style: none; }
.pick-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px auto; gap: 10px; align-items: center; padding: 8px 0; }
.pick-row__name { color: var(--ink); font-size: 14px; }
.pick-row__size { color: var(--muted); font-size: 13px; }
.pick-row select, .pick-row input { min-height: 40px; padding: 0 10px; border: 1px solid rgb(255 255 255 / 0.2); border-radius: 10px; background: rgb(255 255 255 / 0.04); color: var(--ink); font: inherit; font-size: 14px; }
.pick-row select option { color: #1a120e; }
.tier-block { padding: 18px; border: 1px solid var(--line); border-radius: 18px; display: grid; gap: 14px; }
.tier-block + .tier-block { margin-top: 12px; }
.tier-block__head { display: flex; justify-content: space-between; align-items: center; }
.field-row--3 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
.mix__tools { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; }

/* ---------- Make Your Own Mix ---------- */
.mix { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.mix__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.mix-tile {
  position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px;
  background: #0b0908; color: var(--ink); text-align: left; cursor: pointer;
  transition: transform 0.45s var(--ease-spring), border-color 0.25s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.mix-tile img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
.mix-tile__name { display: block; padding: 10px 12px 12px; font-size: 13px; line-height: 1.3; }
.mix-tile__state { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.5); background: rgb(0 0 0 / 0.35); }
.mix-tile[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.mix-tile[aria-pressed="true"] .mix-tile__state { background: var(--accent); border-color: var(--accent); }
.mix-tile[aria-pressed="true"] .mix-tile__state::after { content: '✓'; display: grid; place-items: center; height: 100%; color: #1a120e; font-size: 14px; font-weight: 700; }
.mix-tile:hover { transform: translateY(-3px); }
.mix-tile:active { transform: scale(0.97); transition-duration: 0.1s; }
.mix__balance { position: sticky; top: 110px; display: grid; gap: 16px; padding: 26px; border: 1px solid var(--glass-edge); border-radius: 24px; background: linear-gradient(165deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.015)); }
.mix__meter { height: 8px; border-radius: 999px; background: rgb(255 255 255 / 0.1); overflow: hidden; }
.mix__meter span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--metal-mid), var(--metal-light)); transition: width 0.35s var(--ease-out), background 0.3s; }
.mix__meter span.is-done { background: linear-gradient(90deg, #2e9e47, #6fd08a); }
.mix__meter span.is-over { background: linear-gradient(90deg, #c9452e, #e4573d); }
.mix__remaining { margin: 0; color: var(--muted); font-size: 14px; }
.mix__remaining.is-bad { color: #ffb3a3; }
.mix__rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.mix-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "img name remove" "img range num"; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mix-row img { grid-area: img; width: 40px; height: 50px; object-fit: cover; border-radius: 8px; }
.mix-row__name { grid-area: name; font-size: 14px; }
.mix-row__range { grid-area: range; width: 100%; accent-color: var(--accent); min-height: 32px; }
.mix-row__num { grid-area: num; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.mix-row__num input { width: 58px; min-height: 36px; padding: 0 8px; border: 1px solid rgb(255 255 255 / 0.2); border-radius: 8px; background: rgb(255 255 255 / 0.04); color: var(--ink); font: inherit; text-align: right; }
.mix-row .text-btn { grid-area: remove; justify-self: end; }
.mix__price { font-size: 17px; }

/* ---------- Homepage features ---------- */
.features { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(80px, 12vh, 140px); background: none; }
.feature-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.feature-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); min-height: 340px; overflow: hidden;
  border: 1px solid var(--glass-edge); border-radius: 28px; color: var(--ink); text-decoration: none;
  background: linear-gradient(165deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.015));
  transition: transform 0.6s var(--ease-out), border-color 0.3s var(--ease-out);
}
.feature-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.feature-card:hover { transform: translateY(-4px); border-color: rgb(255 255 255 / 0.3); }
.feature-card:hover img { transform: scale(1.04); }
.feature-card__body, .mix-invite__body { display: flex; flex-direction: column; gap: 10px; justify-content: center; padding: clamp(22px, 2.6vw, 34px); }
.feature-card__title { font: 600 clamp(22px, 2vw, 28px) / 1.2 var(--display); }
.feature-card__text { color: var(--muted); font-size: 14px; line-height: 1.6; }
.feature-card__cta { margin-top: 6px; color: var(--accent); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.mix-invite {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0; margin-top: 18px; overflow: hidden;
  border: 1px solid var(--glass-edge); border-radius: 28px; color: var(--ink); text-decoration: none;
  background: linear-gradient(120deg, rgb(226 191 138 / 0.12), rgb(255 255 255 / 0.015));
  transition: transform 0.6s var(--ease-out), border-color 0.3s var(--ease-out);
}
.mix-invite:hover { transform: translateY(-4px); border-color: rgb(255 255 255 / 0.3); }
.mix-invite__imgs { display: grid; grid-template-columns: repeat(3, 1fr); }
.mix-invite__imgs img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.feature-card:focus-visible, .mix-invite:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ---------- Energy category intro + protein placeholders ---------- */
.catalogue__cat-intro { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 14px; }
.catalogue__cat-intro[hidden], .catalogue__count[hidden] { display: none; }
.cat-placeholder { max-width: 720px; margin: 8px auto 0; padding: clamp(32px, 5vw, 56px); text-align: center; border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 28px; }
.cat-placeholder[hidden] { display: none; }
.cat-placeholder__title { margin: 0; font: 600 clamp(28px, 3vw, 40px) / 1.1 var(--display); }
.cat-placeholder__text { margin: 12px 0 0; color: var(--muted); font-size: 17px; }
.cat-placeholder__note { margin: 8px 0 22px; color: var(--soft); font-size: 13px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ghero, .ghero--wide, .gsection--blocks, .builder, .mix { grid-template-columns: minmax(0, 1fr); }
  .ghero { min-height: 0; }
  .builder > .summary, .mix__balance { position: static; }
  .feature-cards { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .tier-cards, .tiers-pick { grid-template-columns: minmax(0, 1fr); }
  .feature-card { grid-template-columns: minmax(0, 1fr); }
  .feature-card img { aspect-ratio: 4 / 3; height: auto; }
  .mix-invite { grid-template-columns: minmax(0, 1fr); }
  .pick-row { grid-template-columns: minmax(0, 1fr) 64px auto; }
  .pick-row select, .pick-row__size { grid-column: 1 / -1; }
  .field-row--3 { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .enq__actions .btn { flex-basis: 100%; }
  .ghero__trio img:nth-child(2) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-card, .feature-card img, .mix-invite, .mix-tile, .mix__meter span, .pick span, .site-menu, .site-menu__inner, .nav-group__menu { transition: none; animation: none; }
}
.features { max-width: none; background: color-mix(in oklab, var(--deep) 88%, transparent); }
.features > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.stock-tag { align-self: flex-start; display: inline-block; margin: 0; padding: 3px 10px; border: 1px solid rgb(228 87 61 / 0.6); border-radius: 999px; color: #ffb3a3; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.buy .stock-tag { margin-bottom: 10px; }

/* WhatsApp scan-to-chat QR card */
.wa-qr { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--glass-edge); border-radius: 18px; background: rgb(255 255 255 / 0.04); }
.wa-qr img { flex: none; width: 132px; height: 132px; padding: 8px; border-radius: 12px; background: #fff; image-rendering: pixelated; }
.wa-qr__title { margin: 0 0 6px; font: 600 18px / 1.25 var(--display); color: var(--ink); }
.wa-qr__steps { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.wa-qr--center { max-width: 460px; margin: 0 auto; text-align: left; }
@media (max-width: 420px) { .wa-qr { flex-direction: column; text-align: center; } }

.feature-cards--single { grid-template-columns: minmax(0, 1fr); }
.feature-cards--single .feature-card { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
@media (max-width: 560px) { .feature-cards--single .feature-card { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   Glass tiles — one recipe for every tile on the site.
   Frosted, lightly tinted with the page's own --accent, a lit top and left edge,
   and a soft light that follows the pointer (--mx / --my set by ui.js).
   ===================================================================== */
.card, .feature-card, .mix-invite, .voice__figure, .tier-card, .tier-block, .mix-tile,
.summary, .mix__balance, .wa-qr, .cta__inner, .pbx-mini, .pbx-item, .pbx-panel, .pbx-pillar, .cat-placeholder {
  --tile-tint: var(--accent);
  border: 1px solid rgb(255 255 255 / 0.24);
  background:
    radial-gradient(360px circle at var(--mx, 50%) var(--my, -40%), rgb(255 255 255 / var(--glass-sheen, 0)), transparent 62%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--tile-tint) 12%, rgb(255 255 255 / 0.11)),
      color-mix(in srgb, var(--tile-tint) 5%, rgb(255 255 255 / 0.04)) 70%);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow:
    0 8px 32px rgb(0 0 0 / 0.22),
    inset 0 1px 0 rgb(255 255 255 / 0.45),
    inset 0 -1px 0 rgb(255 255 255 / 0.08),
    inset 0 0 4px 2px rgb(255 255 255 / 0.07);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.5s var(--ease-out), --glass-sheen 0.4s var(--ease-out);
}
@property --glass-sheen { syntax: '<number>'; inherits: false; initial-value: 0; }
.card, .feature-card, .mix-invite, .voice__figure, .tier-card, .tier-block, .mix-tile,
.wa-qr, .cta__inner, .pbx-mini, .pbx-item, .pbx-panel, .pbx-pillar, .cat-placeholder { position: relative; }
.cat-placeholder { border-style: solid; }
.cta__inner {
  background:
    radial-gradient(70% 100% at 50% 0%, color-mix(in oklab, var(--c-glow, var(--glow)) 38%, transparent), transparent 75%),
    radial-gradient(360px circle at var(--mx, 50%) var(--my, -40%), rgb(255 255 255 / var(--glass-sheen, 0)), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--c-accent, var(--accent)) 12%, rgb(255 255 255 / 0.1)), rgb(255 255 255 / 0.03) 70%);
}
/* The lit edges from the reference: a bright line across the top, fading down the left side. */
:is(.card, .feature-card, .mix-invite, .voice__figure, .tier-card, .tier-block, .mix-tile,
.summary, .mix__balance, .wa-qr, .cta__inner, .pbx-mini, .pbx-item, .pbx-panel, .pbx-pillar, .cat-placeholder)::before,
:is(.card, .feature-card, .mix-invite, .voice__figure, .tier-card, .tier-block, .mix-tile,
.summary, .mix__balance, .wa-qr, .cta__inner, .pbx-mini, .pbx-item, .pbx-panel, .pbx-pillar, .cat-placeholder)::after {
  content: '';
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
:is(.card, .feature-card, .mix-invite, .voice__figure, .tier-card, .tier-block, .mix-tile,
.summary, .mix__balance, .wa-qr, .cta__inner, .pbx-mini, .pbx-item, .pbx-panel, .pbx-pillar, .cat-placeholder)::before {
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.75), transparent);
}
:is(.card, .feature-card, .mix-invite, .voice__figure, .tier-card, .tier-block, .mix-tile,
.summary, .mix__balance, .wa-qr, .cta__inner, .pbx-mini, .pbx-item, .pbx-panel, .pbx-pillar, .cat-placeholder)::after {
  top: 0; left: 0; width: 1px; height: 100%;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.75), transparent, rgb(255 255 255 / 0.25));
}
/* Hover: the light comes up under the pointer and the tile lifts a touch. */
@media (hover: hover) and (pointer: fine) {
  :is(.card, .feature-card, .mix-invite, .mix-tile, .pbx-mini, .tier-card, .voice__figure):hover { --glass-sheen: 0.13; border-color: rgb(255 255 255 / 0.36); }
  :is(.summary, .mix__balance, .cta__inner, .wa-qr):hover { --glass-sheen: 0.06; }
}
.card:hover { box-shadow: 0 18px 44px -10px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 0 4px 2px rgb(255 255 255 / 0.08); }
.card:active, .feature-card:active, .mix-invite:active, .pbx-mini:active { transform: scale(0.985); transition-duration: 0.12s; }
/* The image well stays a solid, product-lit stage inside the glass. */
.card__media { border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.mix-tile { background-color: transparent; }
.mix-tile[aria-pressed="true"] { --glass-sheen: 0.1; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 8px 32px rgb(0 0 0 / 0.22); }

/* ---------- Small moments of feedback (driven by ui.js) ---------- */
.fav-btn.is-popping svg { animation: fav-pop 0.55s var(--ease-spring); }
.fav-btn.is-popping::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--accent); animation: fav-ring 0.6s var(--ease-out) forwards; pointer-events: none;
}
.fav-btn:not(.fav-btn--card) { position: relative; }
@keyframes fav-pop { 0% { transform: scale(1); } 35% { transform: scale(0.7); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes fav-ring { from { opacity: 0.9; transform: scale(0.8); } to { opacity: 0; transform: scale(1.7); } }
.fly-to-cart {
  position: fixed; z-index: 300; pointer-events: none; object-fit: contain;
  border-radius: 14px; filter: drop-shadow(0 12px 20px rgb(0 0 0 / 0.45));
}
.btn { transition: transform 0.4s var(--ease-spring), border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out), filter 0.3s; }
.btn:active { transform: scale(0.96); transition-duration: 0.1s; }

/* =====================================================================
   Special Period Box — warm, candle-lit burgundy taken from the box photograph.
   ===================================================================== */
.pbx-kicker { margin: 0 0 14px; color: color-mix(in srgb, var(--accent) 85%, var(--ink)); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; }
.pbx-title { margin: 0; font: 600 clamp(40px, 5vw, 72px) / 1.04 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.pbx-title em { display: block; color: #f2bdb6; font-style: italic; }
.pbx-h2 { margin: 0; font: 600 clamp(32px, 3.6vw, 50px) / 1.08 var(--display); letter-spacing: -0.02em; }
.pbx-lede { max-width: 46ch; margin: 18px 0 0; color: var(--muted); font-size: 17px; line-height: 1.65; }

.pbx-hero {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center;
  max-width: var(--max); margin: 0 auto; padding: clamp(20px, 4vh, 48px) var(--gutter) clamp(40px, 6vh, 72px);
}

/* Box switch: a glass track with a thumb that slides between the two boxes. */
.pbx-switch {
  --pos: 1;
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-top: 30px; padding: 4px;
  border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass-fill); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.pbx-switch__thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
  transform: translateX(calc(var(--pos) * 100%));
  border: 1px solid color-mix(in srgb, var(--accent) 60%, rgb(255 255 255 / 0.2));
  background: linear-gradient(150deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.04) 55%), color-mix(in srgb, var(--accent) 24%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 8px 22px -10px color-mix(in srgb, var(--accent) 60%, black);
  transition: transform 0.55s var(--ease-spring);
}
.pbx-switch__opt { position: relative; z-index: 1; }
.pbx-switch__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pbx-switch__opt span { display: block; min-width: 120px; padding: 12px 22px; text-align: center; font-size: 14px; letter-spacing: 0.08em; color: var(--muted); transition: color 0.3s; }
.pbx-switch__opt input:checked + span { color: var(--ink); }
.pbx-switch__opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 999px; }

.pbx-price { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 0; }
.pbx-price__num { font: 600 40px / 1 var(--display); font-variant-numeric: tabular-nums; }
.pbx-price__note { color: var(--soft); font-size: 13px; }

.pbx-contents { display: grid; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 520px; }
.pbx-item {
  --tile-tint: #f2bdb6;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
  padding: 8px 14px 8px 8px; border-radius: 16px; outline-offset: 2px;
}
.pbx-contents.is-swapping .pbx-item { animation: pbx-in 0.5s var(--ease-out) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes pbx-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.pbx-item__img { display: grid; place-items: center; width: 44px; height: 52px; overflow: hidden; border-radius: 10px; background: rgb(255 255 255 / 0.08); }
.pbx-item__img img { width: 100%; height: 100%; object-fit: cover; }
.pbx-item__name { font: 600 17px / 1.3 var(--display); }
.pbx-item__size { color: var(--soft); font-size: 13px; white-space: nowrap; }
.pbx-item__change { position: relative; z-index: 4; color: color-mix(in srgb, var(--accent) 85%, var(--ink)); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; }
.pbx-item__change:hover { text-decoration: underline; text-underline-offset: 3px; }
.pbx-actions { margin-top: 26px; }

/* Photo with hotspots */
.pbx-photo { margin: 0; perspective: 1200px; }
.pbx-photo__frame {
  --rx: 0deg; --ry: 0deg;
  position: relative; border-radius: 28px; overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.22);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.3);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.6s var(--ease-out);
}
.pbx-photo__frame img { display: block; width: 100%; height: auto; }
.pbx-photo__cap { margin: 14px 4px 0; color: var(--soft); font-size: 12px; line-height: 1.6; }
.pbx-spot { position: absolute; left: var(--x); top: var(--y); z-index: 2; transition: opacity 0.4s var(--ease-out); }
.pbx-spot.is-off { opacity: 0.35; }
.pbx-spot.is-off .pbx-spot__dot::before { animation: none; }
.pbx-spot__dot {
  position: relative; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0;
  border: 1px solid rgb(255 255 255 / 0.85); border-radius: 50%;
  background: rgb(255 255 255 / 0.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.35);
  transition: transform 0.4s var(--ease-spring), background-color 0.3s;
}
.pbx-spot__dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; transition: transform 0.4s var(--ease-spring); }
.pbx-spot__dot::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.7); animation: pbx-pulse 2.6s var(--ease-out) infinite; }
@keyframes pbx-pulse { 0% { transform: scale(1); opacity: 0.8; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
.pbx-spot__dot:hover, .pbx-spot.is-open .pbx-spot__dot, .pbx-spot.is-pointed .pbx-spot__dot { transform: scale(1.18); background: color-mix(in srgb, var(--accent) 55%, transparent); }
.pbx-spot.is-open .pbx-spot__dot::after { transform: scale(0.6); }
.pbx-spot.is-pointed { opacity: 1; }
.pbx-spot__tip {
  --tx: -50%;
  position: absolute; left: 50%; bottom: 26px; width: max-content; max-width: 220px; transform: translateX(var(--tx));
  display: grid; gap: 3px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid rgb(255 255 255 / 0.3); background: color-mix(in oklab, #2a0c12 78%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 16px 34px rgb(0 0 0 / 0.45);
  font-size: 12px; color: var(--muted); animation: pbx-tip 0.35s var(--ease-out);
}
.pbx-spot__tip[hidden] { display: none; }
.pbx-spot__tip strong { color: var(--ink); font: 600 16px / 1.25 var(--display); }
.pbx-spot__tip em { color: color-mix(in srgb, var(--accent) 85%, var(--ink)); font-style: normal; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
@keyframes pbx-tip { from { opacity: 0; transform: translate(var(--tx), 6px); } }
.pbx-spot--right .pbx-spot__tip { --tx: -88%; }
.pbx-spot--left .pbx-spot__tip { --tx: -12%; }

/* Personaliser */
.pbx-section { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 8vh, 96px) var(--gutter) 0; scroll-margin-top: 90px; }
.pbx-section__head { margin-bottom: clamp(24px, 3vw, 40px); }
.pbx-builder { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.pbx-side { position: sticky; top: 100px; display: grid; gap: 20px; }
.pbx-side .summary { position: static; }
.pbx-choice[hidden] { display: none; }
.pbx-choice__hint { margin-left: 6px; color: var(--soft); font: 400 13px / 1 var(--sans); letter-spacing: 0.04em; }
.pbx-choice { scroll-margin-top: 120px; }
.pbx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 96px), 1fr)); gap: 10px; }
@media (min-width: 961px) { .pbx-tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }
.pbx-tile { position: relative; display: grid; gap: 0; cursor: pointer; }
.pbx-tile input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pbx-tile__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px 16px 0 0; border: 1px solid rgb(255 255 255 / 0.2); border-bottom: 0; background: rgb(255 255 255 / 0.06); }
.pbx-tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.pbx-tile__name { padding: 10px 12px; border: 1px solid rgb(255 255 255 / 0.2); border-top: 0; border-radius: 0 0 16px 16px; background: rgb(255 255 255 / 0.06); font-size: 13px; line-height: 1.3; color: var(--muted); transition: background-color 0.3s, color 0.3s; }
.pbx-tile:hover .pbx-tile__img img { transform: scale(1.05); }
.pbx-tile input:checked ~ .pbx-tile__img, .pbx-tile input:checked ~ .pbx-tile__name { border-color: var(--accent); }
.pbx-tile input:checked ~ .pbx-tile__name { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); }
.pbx-tile input:checked ~ .pbx-tile__img::after { content: '✓'; position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #2a0c12; font-size: 13px; font-weight: 700; animation: fav-pop 0.45s var(--ease-spring); }
.pbx-tile input:focus-visible ~ .pbx-tile__img { outline: 2px solid var(--ink); outline-offset: 3px; }
.pbx-tile:active { transform: scale(0.97); }

/* Gift tag preview: cream card on a string, like the one tied to the box. */
.pbx-tag { position: relative; display: grid; justify-items: center; padding-top: 8px; transform-origin: 50% 0; }
.pbx-tag.is-swinging { animation: pbx-swing 1.1s var(--ease-out); }
@keyframes pbx-swing { 0% { transform: rotate(0); } 20% { transform: rotate(-4deg); } 45% { transform: rotate(2.6deg); } 70% { transform: rotate(-1.2deg); } 100% { transform: rotate(0); } }
.pbx-tag__string { width: 2px; height: 34px; background: linear-gradient(#8e2436, #6a1626); border-radius: 2px; }
.pbx-tag__card {
  position: relative; width: min(100%, 300px); min-height: 170px; margin-top: -4px; padding: 34px 26px 22px;
  border-radius: 10px 10px 14px 14px; background: linear-gradient(170deg, #f8ecdc, #efdcc4); color: #5a1a24;
  box-shadow: 0 22px 40px -18px rgb(0 0 0 / 0.6), inset 0 0 0 1px rgb(90 26 36 / 0.08);
  clip-path: polygon(16% 0, 84% 0, 100% 12%, 100% 100%, 0 100%, 0 12%);
  transform: rotate(-2deg);
}
.pbx-tag__hole { position: absolute; top: 12px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #3a1119; box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.5); }
.pbx-tag__to { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #8e4a52; }
.pbx-tag__msg { margin: 0; font: italic 400 21px / 1.35 var(--display); overflow-wrap: anywhere; }
.pbx-tag__from { margin: 12px 0 0; font: italic 400 15px / 1.3 var(--display); text-align: right; color: #8e4a52; }
.pbx-summary .summary__title { font-size: 22px; }

/* Homepage band */
.pbx-band { padding: clamp(40px, 7vh, 80px) var(--gutter); }
.pbx-band__inner {
  --tone: #3a1119; --glow: #7c2c38; --accent: #e3ab7e;
  max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(18px, 2.4vw, 28px); border-radius: 36px; border: 1px solid rgb(255 255 255 / 0.18);
  background: radial-gradient(70% 90% at 30% 50%, #6a2230, transparent 75%), linear-gradient(150deg, #3a1119, #210a0f);
  box-shadow: 0 40px 90px -40px rgb(0 0 0 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.2);
}
.pbx-band__photo { display: block; overflow: hidden; border-radius: 24px; }
.pbx-band__photo img { display: block; width: 100%; height: auto; transition: transform 1.2s var(--ease-out); }
.pbx-band__inner:hover .pbx-band__photo img { transform: scale(1.03); }
.pbx-band__copy { padding: clamp(8px, 2vw, 24px) clamp(4px, 2vw, 28px) clamp(8px, 2vw, 24px) 0; }
.pbx-band__copy .pbx-title { font-size: clamp(34px, 3.8vw, 58px); }
.pbx-band__tiers { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.pbx-mini { --tile-tint: #f2bdb6; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 16px 20px; border-radius: 18px; color: var(--ink); text-decoration: none; }
.pbx-mini__head { display: flex; gap: 12px; align-items: baseline; font: 600 20px / 1.2 var(--display); }
.pbx-mini__price { color: #f2bdb6; }
.pbx-mini__items { grid-column: 1; color: var(--muted); font-size: 13px; line-height: 1.5; }
.pbx-mini__go { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 20px; transition: transform 0.45s var(--ease-spring); }
.pbx-mini:hover .pbx-mini__go { transform: translateX(5px); }
.pbx-mini:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 960px) {
  .pbx-hero, .pbx-builder, .pbx-band__inner { grid-template-columns: minmax(0, 1fr); }
  .pbx-hero__copy { order: 2; }
  .pbx-photo { order: 1; }
  .pbx-side { position: static; }
  .pbx-band__copy { padding: 4px 6px 10px; }
}
@media (max-width: 520px) {
  .pbx-switch { display: grid; width: 100%; }
  .pbx-switch__opt span { min-width: 0; }
  .pbx-item { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .pbx-item__change { grid-column: 2 / -1; justify-self: start; margin-top: -6px; }
  .pbx-spot__dot { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .pbx-spot__tip { max-width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .pbx-spot__dot::before, .pbx-tag.is-swinging, .pbx-contents.is-swapping .pbx-item { animation: none; }
  .pbx-photo__frame { transform: none; }
}

/* ---------- Period Box: full photograph, 01 What / 02 Why / 03 Make it yours ---------- */
.pbx-stage { max-width: var(--max); margin: 0 auto; padding: clamp(8px, 2vh, 24px) var(--gutter) 0; }
.pbx-banner { margin: 0; }
.pbx-banner__frame {
  position: relative; overflow: hidden; border-radius: clamp(18px, 2.4vw, 32px);
  border: 1px solid rgb(255 255 255 / 0.22);
  box-shadow: 0 40px 90px -40px rgb(0 0 0 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.3);
}
.pbx-banner__frame img { display: block; width: 100%; height: auto; }
/* The painted "Shop Period Box" button in the photograph, made clickable. */
.pbx-banner__shop { position: absolute; left: 12.1%; top: 51.6%; width: 19.7%; height: 5.4%; z-index: 2; border-radius: 999px; transition: box-shadow 0.3s var(--ease-out), background-color 0.3s; }
.pbx-banner__shop:hover { background: rgb(255 255 255 / 0.08); box-shadow: 0 0 0 2px rgb(255 255 255 / 0.55), 0 0 30px rgb(227 171 126 / 0.45); }
.pbx-banner__shop:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pbx-banner__cap { margin: 12px 4px 0; color: var(--soft); font-size: 12px; line-height: 1.6; }

.pbx-num { display: inline-grid; place-items: center; min-width: 30px; height: 22px; margin-right: 12px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 999px; font-size: 10px; letter-spacing: 0.12em; }
.pbx-body { max-width: 58ch; margin: 16px 0 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.pbx-body strong { color: var(--ink); font-weight: 600; }

.pbx-what { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.pbx-panel { padding: clamp(20px, 2.6vw, 32px); border-radius: 28px; }
.pbx-panel .pbx-switch { margin-top: 0; }
.pbx-what__box { position: sticky; top: 100px; }

.pbx-cravings { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.pbx-craving {
  min-height: 44px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted);
  border: 1px solid var(--glass-edge); background: var(--glass-fill); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  transition: transform 0.4s var(--ease-spring), color 0.25s, background-color 0.25s, border-color 0.25s;
}
.pbx-craving:hover { color: var(--ink); transform: translateY(-2px); }
.pbx-craving:active { transform: scale(0.95); transition-duration: 0.1s; }
.pbx-craving[aria-pressed="true"] { color: #2a0c12; border-color: transparent; background: linear-gradient(150deg, #f6d2c8, #e3ab7e); }
.pbx-craving-line { min-height: 3.2em; margin: 14px 0 0; color: var(--soft); font-size: 14px; line-height: 1.6; }
.pbx-craving-line strong { display: block; color: var(--ink); font-weight: 500; }
.pbx-item { transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-spring), border-color 0.3s; }
.pbx-item.is-dim { opacity: 0.4; }
.pbx-item.is-match { transform: translateX(6px); border-color: rgb(246 210 200 / 0.75); --glass-sheen: 0.08; }

.pbx-why__head { max-width: 760px; }
.pbx-why__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(24px, 3vw, 40px); align-items: stretch; }
.pbx-quote { margin: 28px 0 0; padding: 0 0 0 22px; border-left: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); }
.pbx-quote p { margin: 0; font: 500 clamp(22px, 2.2vw, 30px) / 1.3 var(--display); letter-spacing: -0.015em; color: #f6d2c8; }
.pbx-rotator { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; min-height: 2.6em; margin: 6px 0 0; font: 600 clamp(26px, 2.8vw, 40px) / 1.2 var(--display); letter-spacing: -0.02em; }
.pbx-rotator__word { color: #f2bdb6; transition: opacity 0.3s var(--ease-in), transform 0.32s var(--ease-in), filter 0.3s; }
.pbx-rotator__word.is-out { opacity: 0; transform: translateY(-10px); filter: blur(4px); }
.pbx-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.pbx-pillar { padding: 24px 26px; border-radius: 24px; }
.pbx-pillar h3 { margin: 0 0 8px; font: 600 20px / 1.25 var(--display); letter-spacing: -0.01em; }
.pbx-pillar p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.pbx-statement { margin: clamp(48px, 8vh, 96px) auto 0; max-width: 18ch; text-align: center; font: 600 clamp(32px, 4.6vw, 64px) / 1.08 var(--display); letter-spacing: -0.03em; text-wrap: balance; }
.pbx-statement em { font-style: normal; color: #f2bdb6; }

.pbx-mode { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pbx-signoff { margin: clamp(40px, 6vh, 72px) 0 0; text-align: center; color: var(--soft); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; }
.pbx-signoff span { display: block; margin-top: 8px; color: #f2bdb6; letter-spacing: 0.12em; }

@media (max-width: 960px) {
  .pbx-what, .pbx-why__grid, .pbx-pillars { grid-template-columns: minmax(0, 1fr); }
  .pbx-what__box { position: static; }
}
@media (max-width: 600px) {
  .pbx-spot__dot { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
  .pbx-spot__dot::after { width: 6px; height: 6px; }
}
@media (prefers-reduced-motion: reduce) { .pbx-rotator__word { transition: none; } }
/* Homepage band with the full photograph: picture across the top, story and the two boxes beneath. */
.pbx-band__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2.4vw, 28px); }
.pbx-band__copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px clamp(24px, 4vw, 56px); align-items: end; padding: 0 clamp(4px, 1.6vw, 20px) clamp(4px, 1.6vw, 18px); }
.pbx-band__copy > .pbx-kicker, .pbx-band__copy > .pbx-title, .pbx-band__copy > .pbx-lede { grid-column: 1; }
.pbx-band__tiers { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
@media (max-width: 860px) { .pbx-band__copy { grid-template-columns: minmax(0, 1fr); } .pbx-band__tiers { grid-column: 1; grid-row: auto; margin-top: 18px; } }

/* =====================================================================
   About — Our Story (owner-supplied text)
   ===================================================================== */
.story-page { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.ab-hero { padding: clamp(56px, 14vh, 160px) 0 clamp(40px, 8vh, 96px); text-align: center; }
.ab-hero__title { margin: 0; font: 600 clamp(48px, 8vw, 120px) / 1 var(--display); letter-spacing: -0.045em; }
.ab-hero__title span { color: color-mix(in srgb, var(--accent) 70%, var(--ink)); }
.ab-hero__sub { margin: 26px 0 0; color: var(--soft); font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; }
.ab-section { padding: clamp(48px, 9vh, 110px) 0 0; }
.ab-h2 { margin: 0 0 18px; font: 600 clamp(30px, 3.8vw, 52px) / 1.08 var(--display); letter-spacing: -0.03em; text-wrap: balance; }
.ab-copy { max-width: 62ch; }
.ab-copy p, p.ab-copy { margin: 0 0 14px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.ab-copy strong, p.ab-copy strong { color: var(--ink); font-weight: 600; }
.ab-copy--wide { max-width: 72ch; }
.ab-copy--center { margin: 22px auto 0; text-align: center; }
.ab-copy .btn { margin-top: 12px; }
.ab-strong { color: var(--ink) !important; font-weight: 600; font-size: 19px !important; }

.ab-name { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.ab-name__word { display: grid; justify-items: center; gap: 10px; }
.ab-greek {
  font: 600 clamp(110px, 17vw, 240px) / 1 var(--display); letter-spacing: -0.04em;
  background: conic-gradient(from 200deg at 50% 50%, var(--metal-dark, #73391a), var(--metal-mid, #b5683a), var(--metal-light, #eab182), var(--metal-shine, #fff1de), var(--metal-light, #eab182), var(--metal-mid, #b5683a), var(--metal-dark, #73391a));
  background-size: 140% 140%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 18px 30px rgb(0 0 0 / 0.45));
  animation: ab-metal 9s var(--ease-sine) infinite alternate;
}
@keyframes ab-metal { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
.ab-greek__say { color: var(--soft); font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; }

.ab-search { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 28px 0; padding: 0; list-style: none; }
.ab-search li { padding: 24px; border-radius: 22px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.ab-search span { display: block; margin-bottom: 10px; color: color-mix(in srgb, var(--accent) 85%, var(--ink)); font-size: 12px; letter-spacing: 0.2em; }
.ab-quote { margin: clamp(32px, 6vh, 64px) auto 0; max-width: 24ch; text-align: center; }
.ab-quote p { margin: 0; font: 600 clamp(28px, 3.8vw, 52px) / 1.12 var(--display); letter-spacing: -0.03em; text-wrap: balance; }
.ab-quote footer { margin-top: 18px; color: var(--soft); font-size: 14px; }

.ab-personal { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ab-figure { margin: 0; }
.ab-figure img { display: block; width: 100%; height: auto; border-radius: 28px; border: 1px solid rgb(255 255 255 / 0.2); box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.8); }
.ab-figure figcaption { margin-top: 14px; color: #f2bdb6; font: 500 18px / 1.4 var(--display); text-align: center; }

.ab-worlds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.ab-world { display: grid; grid-template-columns: 1fr; min-height: 0; border-radius: 22px; }
.ab-world img { aspect-ratio: 4 / 5; height: auto; }
.ab-world span { padding: 14px 16px; font-weight: 500; font-size: 15px; }
.ab-chant { margin: clamp(32px, 5vh, 56px) 0 0; text-align: center; color: var(--muted); font: 500 clamp(20px, 2.2vw, 30px) / 1.35 var(--display); letter-spacing: -0.015em; }
.ab-chant strong { color: var(--ink); font-weight: 600; }

.ab-moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: m; }
.ab-moments li { padding: 26px; border-radius: 24px; counter-increment: m; }
.ab-moments li::marker { content: none; }
.ab-moments h3 { margin: 0 0 8px; font: 600 20px / 1.25 var(--display); }
.ab-moments h3::before { content: counter(m, decimal-leading-zero); display: block; margin-bottom: 12px; color: color-mix(in srgb, var(--accent) 85%, var(--ink)); font-size: 12px; letter-spacing: 0.2em; }
.ab-moments p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.ab-feeling { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ab-feelings { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ab-feelings li { padding: 16px 0 16px 34px; border-bottom: 1px solid var(--line); position: relative; font: 500 18px / 1.4 var(--display); letter-spacing: -0.01em; }
.ab-feelings li::before { content: ''; position: absolute; left: 4px; top: 24px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--metal-shine, #fff1de), var(--metal-mid, #b5683a)); }

.ab-standards { text-align: center; }
.ab-standards__title { margin: 0; font: 700 clamp(48px, 9vw, 132px) / 0.98 var(--display); letter-spacing: -0.05em; }
.ab-standards__lead { margin: 22px 0 0; font: 500 clamp(20px, 2.2vw, 28px) / 1.35 var(--display); color: var(--ink); }
.ab-nots { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px auto 0; max-width: 900px; }
.ab-nots span { padding: 10px 18px; border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass-fill); color: var(--muted); font-size: 14px; }
.ab-nots span:last-child { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }

.ab-promise { padding-bottom: clamp(64px, 10vh, 120px); }
.ab-promise__inner { max-width: 900px; }
.ab-welcome { margin: 22px 0 0; font: 600 22px / 1.3 var(--display); color: color-mix(in srgb, var(--accent) 70%, var(--ink)); }

@media (max-width: 960px) {
  .ab-name, .ab-personal, .ab-feeling, .ab-search, .ab-moments { grid-template-columns: minmax(0, 1fr); }
  .ab-worlds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .ab-worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .ab-greek { animation: none; } }
/* With Gifting, Make Your Own Mix and About in the bar, every link gives up a little room. */
@media (min-width: 1800px) { .site-nav a { padding: 0 15px; letter-spacing: 0.14em; } .nav-group__btn { padding: 0 14px; letter-spacing: 0.14em; } }

/* Whole products, never cropped: tall makhana jars and chocolate boxes sit on a soft-lit stage. */
.pbx-tile__img, .pbx-item__img, .ab-world__stage {
  display: grid; place-items: center;
  background: radial-gradient(75% 65% at 50% 45%, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.03) 75%);
}
.pbx-tile__img { position: relative; padding: 10px; }
.pbx-tile__img img, .pbx-item__img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.35)); }
.pbx-tile:hover .pbx-tile__img img { transform: translateY(-3px) scale(1.03); }
.pbx-item__img { padding: 3px; }
.ab-world__stage { aspect-ratio: 4 / 5; padding: 14px; overflow: hidden; }
.ab-world .ab-world__stage img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; filter: drop-shadow(0 10px 16px rgb(0 0 0 / 0.4)); }
.ab-world:hover .ab-world__stage img { transform: translateY(-4px) scale(1.03); }
.wa-qr__btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Sharp logo (vector, transparent) ---------- */
.brand--master img { mix-blend-mode: normal; filter: none; }

/* ---------- Phone header: logo centred on top, collections below, shop icons beneath ---------- */
@media (max-width: 860px) {
  .site-header__bar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brand" "nav" "actions";
    justify-items: center;
    row-gap: 8px;
    padding: 14px 8px 8px;
  }
  .site-header__bar .brand { padding-left: 0; justify-self: center; }
  .brand--master img { height: 60px; }
  .brand--chocolate img { height: 50px; }
  .site-header__bar .site-nav { justify-self: stretch; }
  /* The four icons stay together as one glass pill. */
  .site-actions {
    justify-self: center; gap: 6px; padding: 3px 8px;
    border: 1px solid var(--glass-edge); border-radius: 999px; background: rgb(255 255 255 / 0.05);
  }
}

/* ---------- Phone header: compact while scrolling (class set by site-nav.js) ---------- */
@media (max-width: 860px) {
  .site-header__bar, .brand img, .site-nav a, .site-action, .site-actions { transition-property: padding, height, min-height, width, row-gap, gap, color, background-color, transform; transition-duration: 0.35s; transition-timing-function: var(--ease-out); }
  .header-compact .site-header { padding-top: 6px; }
  .header-compact .site-header__bar { row-gap: 2px; padding: 6px 6px 5px; border-radius: 22px; }
  .header-compact .brand--master img { height: 32px; }
  .header-compact .brand--chocolate img { height: 30px; }
  .header-compact .site-nav a { min-height: 32px; }
  .header-compact .site-actions { padding: 0 6px; gap: 2px; }
  .header-compact .site-action { width: 34px; height: 34px; }
  .header-compact .site-action svg { width: 18px; height: 18px; }
  .header-compact .site-action__badge { top: 0; right: -2px; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .site-header__bar, .brand img, .site-nav a, .site-action, .site-actions { transition: none; }
}
/* The header keeps its space while compact; only the bar itself takes taps, so the empty area beneath it never blocks the page. */
@media (max-width: 860px) {
  .header-compact .site-header { pointer-events: none; }
  .header-compact .site-header__bar, .header-compact .site-menu { pointer-events: auto; }
}