/* ==========================================================================
   Protein पूरा — theme styles
   Tokens follow design-system/proteinpoora/MASTER.md
   Sections are marked so they map 1:1 to Shopify sections later.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --navy: #1E2D78;
  --navy-deep: #16225E;
  --navy-ink: #1A2456;
  --pack-blue: #2F63C9;
  --pack-green: #257A60;   /* the pudina label, darkened for 4.5:1 on cream */
  --cream: #F7E9C3;
  --cream-soft: #FBF3DC;
  --cream-70: rgba(247, 233, 195, 0.7);
  --cream-45: rgba(247, 233, 195, 0.45);
  --cream-10: rgba(247, 233, 195, 0.1);
  --orange: #F08A2A;

  /* The hero's warm ground, and the inks that read on it. The hero, its
     ticker and its header run on this; everything below the fold keeps navy,
     cream and orange. Every pair here was checked against WCAG AA on the
     plain ground, on its warm corner, and under each of the five product
     accent washes -- the ink colours are not interchangeable with the cream
     ones above, which only work on navy. */
  --sand: #F7F1E3;
  --sand-warm: #F0E6CE;
  --tan: #C9A96A;
  --bronze: #8F7343;
  --bark: #33210F;
  --cocoa: #2F2417;
  --umber: #5A4B3A;
  --rust: #A6391A;
  --rust-deep: #8A2D12;

  --paper: #FFFFFF;
  --tile: #F3F4F8;
  --text: #4A5068;
  --line: #E4E6EF;
  --error: #C4321F;

  --font-display: 'Baloo 2', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius-pill: 999px;
  --radius-hero: 24px;
  --gutter: 20px;
  --frame: 8px;
  --container: 1200px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1);
  --t-fast: 160ms;
  --t-base: 220ms;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --radius-hero: 32px;
    --frame: 10px;
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Any author rule that sets a display beats the user agent's [hidden], so
   `el.hidden = true` quietly does nothing on anything styled as flex or grid.
   That has caught the cart count, the checkout form and the page heading.
   One rule, once, rather than a guard per component. */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--orange);
  color: var(--navy-ink);
  font-weight: 600;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

/* Both of these sit only on the hero's sand ground -- the primary in the hero
   itself, the small one in the header -- so they are the warm pair outright
   rather than a scoped override. A cream fill would be invisible there. */
/* A button that is off has to look off. The box minimum switches three of
   them, and a full-strength navy pill that ignores a tap is worse than no
   button at all. */
.btn[disabled],
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--cream {
  background: var(--rust);
  border-color: var(--rust);
  color: var(--cream);
}

.btn--cream:hover {
  background: var(--rust-deep);
  border-color: var(--rust-deep);
}

.btn--outline {
  background: transparent;
  border-color: var(--bronze);
  color: var(--cocoa);
}

.btn--outline:hover {
  background: rgba(143, 115, 67, 0.12);
  border-color: var(--cocoa);
}

.btn--sm {
  min-height: 44px;
  padding: 0 1.15rem;
  font-size: 0.9375rem;
}

@media (min-width: 768px) {
  .btn {
    min-height: 52px;
    padding: 0 1.75rem;
  }

  .btn--sm {
    min-height: 44px;
    padding: 0 1.25rem;
  }
}

/* --- Section: announcement ticker -------------------------------------- */
.ticker {
  overflow: hidden;
  background: var(--tan);
  color: var(--bark);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

.ticker__track {
  display: flex;
  width: max-content;
  padding: 0.8rem 0;
  animation: ticker-scroll 36s linear infinite;
}

.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track {
  animation-play-state: paused;
}

.ticker__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticker__item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-right: 1.25rem;
  white-space: nowrap;
}

.ticker__item::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--rust);
  transform: rotate(45deg);
}

@keyframes ticker-scroll {
  to {
    transform: translateX(-50%);
  }
}

/* --- Hero frame: warm card that holds the hero ------------------------- */

/* Registered so the accent can be transitioned. Every accent-reactive
   element reads var(--accent), so animating this one property cross-fades
   the headline, eyebrow, chip dots, glow and card tint together. */
@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #F08A2A;
}

.hero-frame {
  position: relative;
  margin: var(--frame);
  border-radius: var(--radius-hero);
  background: linear-gradient(150deg, var(--sand-warm) 0%, var(--sand) 46%, var(--sand) 100%);
  color: var(--cocoa);
  overflow: hidden;
  isolation: isolate;
  transition: --accent 700ms ease;
}

/* Accent tint washed across the card, following the active product. Held at
   12%: on the old navy it could be strong, but here it lands under the hero's
   own text, and past about 14% the eyebrow stops clearing 4.5:1 on the
   lighter accents. */
.hero-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 55%),
    radial-gradient(120% 90% at 88% 12%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 60%);
  pointer-events: none;
}

/* --- Hero decoration: brand watermark and rotating seals ---------------- */
.hero-deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hero-deco__word {
  position: absolute;
  left: -0.14em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bronze);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(14rem, 40vw, 30rem);
  line-height: 0.78;
  opacity: 0.07;
  white-space: nowrap;
  user-select: none;
}

/* The real brand seal, reduced to marks on transparent so the disc drops out
   and it reads as texture rather than a stack of logos. The artwork is cream,
   which was right on navy and invisible on sand, so it is used as a mask and
   painted instead -- and where masks are not supported the seals simply do
   not render, rather than showing up as tan squares. */
.hero-deco__seal {
  position: absolute;
  top: var(--top);
  left: var(--left);
  width: var(--size);
  height: var(--size);
  animation: seal-spin var(--dur, 60s) linear infinite;
  animation-direction: var(--dir, normal);
}

@supports (mask-image: url("../img/logo-seal-cream.png")) or
          (-webkit-mask-image: url("../img/logo-seal-cream.png")) {
  .hero-deco__seal {
    background: var(--bronze);
    opacity: 0.16;
    -webkit-mask: url("../img/logo-seal-cream.png") center / contain no-repeat;
    mask: url("../img/logo-seal-cream.png") center / contain no-repeat;
  }
}

@keyframes seal-spin {
  to { transform: rotate(360deg); }
}

/* --- Site bar: the header, which now stays ----------------------------- */

/* It used to live inside the hero's card and scroll away with it, so past the
   fold there was no cart, no nav and no pre-order button anywhere on the page.
   It sits above the hero at rest -- the hero still reads as one field -- and
   takes a ground of its own the moment it is over content that is not the
   hero. That ground is the hero's own sand rather than navy, so the header's
   ink is the same colour whether it is stuck or not: a bar that flipped from
   dark text to light halfway down the page is one more thing to get wrong. */
.site-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: transparent;
  color: var(--cocoa);
  transition:
    background-color 220ms var(--ease),
    box-shadow 220ms var(--ease);
}

/* The hero is a rounded navy card inset by --frame; at rest the bar sits on
   top of it, so it is pulled down over the card rather than floating above. */
.site-bar .site-header {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 0.9rem var(--gutter);
  transition: padding 220ms var(--ease);
}

.site-bar.is-stuck {
  background: var(--sand);
  box-shadow: 0 6px 24px rgba(51, 33, 15, 0.16);
}

.site-bar.is-stuck .site-header {
  padding-block: 0.6rem;
}

/* The hero card starts under the bar rather than after it. */
.site-bar + main > .hero-frame {
  margin-top: calc(var(--frame) - 74px);
  padding-top: 74px;
}

@media (min-width: 768px) {
  .site-bar + main > .hero-frame {
    margin-top: calc(var(--frame) - 82px);
    padding-top: 82px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-bar,
  .site-bar .site-header {
    transition: none;
  }
}

/* --- Section: header ---------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* The wordmark is in two places on different grounds: the header's sand bar
   and the navy footer. Cream is the default because the footer cannot be
   scoped from inside the header. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 1.625rem;
  line-height: 1;
  text-decoration: none;
}

.site-bar .wordmark {
  color: var(--cocoa);
}

.wordmark__seal {
  flex: none;
  width: 42px;
  height: 42px;
}

.wordmark__text {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
}

.wordmark__latin {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.wordmark__hindi {
  position: relative;
  font-weight: 800;
}

.wordmark__swoosh {
  position: absolute;
  left: 2%;
  bottom: -0.34em;
  width: 96%;
  height: 0.3em;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.menu-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--cocoa);
  border: 2px solid var(--bronze);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.menu-toggle:hover {
  background: rgba(143, 115, 67, 0.12);
  border-color: var(--cocoa);
}

.menu-toggle__icon {
  width: 20px;
  height: 20px;
}

.menu-toggle__icon path {
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast);
  transform-origin: center;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon .bar-top {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon .bar-mid {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon .bar-bottom {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile nav: a panel that drops below the header */
.site-nav {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: var(--gutter);
  right: var(--gutter);
  display: none;
  padding: 0.5rem;
  border-radius: 20px;
  background: var(--sand);
  border: 1px solid var(--bronze);
  box-shadow: 0 16px 40px rgba(51, 33, 15, 0.22);
}

.site-nav.is-open,
.no-js .site-nav {
  display: block;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1rem;
  border-radius: 12px;
  color: var(--cocoa);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}

.site-nav__link:hover {
  background: rgba(143, 115, 67, 0.14);
}

.no-js .site-nav {
  position: static;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.no-js .site-nav__list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.25rem;
}

@media (min-width: 1024px) {
  .site-header {
    padding-top: 1.5rem;
  }

  .wordmark__seal {
    width: 48px;
    height: 48px;
  }

  .wordmark {
    font-size: 1.85rem;
  }

  .site-nav,
  .site-nav.is-open {
    position: static;
    display: block;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .site-nav__list {
    flex-direction: row;
    gap: 0.25rem;
  }

  .site-nav__link {
    min-height: 44px;
    padding: 0 1rem;
    font-size: 0.9375rem;
  }

  .menu-toggle {
    display: none;
  }
}

/* --- Section: hero ------------------------------------------------------ */
.hero {
  position: relative;
  z-index: 1;
}

.hero__inner {
  display: grid;
  gap: 2.25rem;
  padding: 2.75rem var(--gutter) 0;
  text-align: center;
}

.hero__copy {
  display: grid;
  gap: 1.25rem;
  justify-items: center;
}

/* Fixed rust, not var(--accent): four of the five product accents fall below
   4.5:1 on the sand ground, and this is 12px uppercase. The accent still
   follows the product everywhere it is not text -- the card wash, the chip
   dots, the carousel glow and the dot fill. */
.eyebrow {
  margin: 0;
  color: var(--rust);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow__best {
  font-weight: 800;
}

.eyebrow__sep {
  margin: 0 0.35em;
}

.hero__title {
  margin: 0;
  color: var(--cocoa);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.3rem, 1.39rem + 3.89vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.hero__title-line {
  display: block;
}

.hero__title-line--accent {
  color: var(--rust);
}

.hero__lede {
  margin: 0;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--umber);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

/* Phones: one swipeable row that bleeds to the card edges.
   Wider screens: wraps and centers. */
.hero__facts {
  display: flex;
  gap: 0.5rem;
  justify-self: stretch;
  width: calc(100% + 2 * var(--gutter));
  margin: 0 calc(-1 * var(--gutter));
  padding: 0.25rem var(--gutter);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.hero__facts::-webkit-scrollbar {
  display: none;
}

.hero__facts::after {
  content: "";
  flex: none;
  width: 1px;
}

.hero__facts > li {
  flex: none;
  scroll-snap-align: start;
}

@media (min-width: 600px) {
  .hero__facts {
    flex-wrap: wrap;
    justify-content: center;
    justify-self: center;
    width: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .hero__facts::after {
    display: none;
  }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 36px;
  padding: 0 0.9rem;
  border: 1.5px solid var(--bronze);
  border-radius: var(--radius-pill);
  color: var(--cocoa);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.chip::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* --- Hero showcase: coverflow product carousel -------------------------- */

@property --glow {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

.hero__visual {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  width: 100%;
  padding-bottom: 2.5rem;
}

.showcase__name {
  margin: 0;
  color: var(--cocoa);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  line-height: 1.2;
  text-align: center;
  transition:
    opacity 300ms var(--ease),
    transform 300ms var(--ease),
    filter 300ms var(--ease);
}

.showcase__name.is-out {
  opacity: 0;
  transform: translateX(-20px);
  filter: blur(6px);
}

.showcase__name.is-enter {
  opacity: 0;
  transform: translateX(20px);
  filter: blur(6px);
  transition: none;
}

.showcase__stage {
  position: relative;
  width: 72vw;
  max-width: 320px;
  aspect-ratio: 0.73;
  perspective: 700px;
  touch-action: pan-y;
}

.showcase__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 170%;
  height: 170%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent), transparent 72%);
  opacity: 0.14;
  animation: glow-breathe 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glow-breathe {
  0%, 100% { opacity: 0.12; }
  50%      { opacity: 0.18; }
}

/* Bleeds a little past the stage so the neighbouring pouches show, then
   clips them. The badge lives outside this box so it is never cut. */
.showcase__viewport {
  position: absolute;
  inset: 0 -20%;
  z-index: 1;
  overflow: hidden;
}

.showcase__track {
  position: absolute;
  inset: 0 20%;
}

.showcase__track {
  margin: 0;
  padding: 0;
  list-style: none;
}

.showcase__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(0) scale(0.42);
  filter: blur(3px);
  z-index: 0;
  transition:
    transform 550ms var(--ease-spring),
    opacity 550ms var(--ease-spring),
    filter 550ms var(--ease-spring);
  pointer-events: none;
}

.showcase__slide[data-rel="0"] {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: none;
  z-index: 3;
}

.showcase__slide[data-rel="-1"] {
  opacity: 0.3;
  transform: translateX(-44%) scale(0.58);
  filter: blur(2px);
  z-index: 2;
}

.showcase__slide[data-rel="1"] {
  opacity: 0.3;
  transform: translateX(44%) scale(0.58);
  filter: blur(2px);
  z-index: 2;
}

.showcase__slide[data-rel="-2"] {
  transform: translateX(-64%) scale(0.42);
}

.showcase__slide[data-rel="2"] {
  transform: translateX(64%) scale(0.42);
}

/* The float runs on every slide so it never restarts on a product change. */
.showcase__float {
  position: relative;
  width: 100%;
  height: 100%;
  animation: showcase-float 5s ease-in-out infinite;
}

@keyframes showcase-float {
  0%, 100% { transform: translateY(-4px); }
  50%      { transform: translateY(4px); }
}

.showcase__pack {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(8, 12, 40, 0.4));
}

/* Sits inside the stage so it covers the active pouch's upper left corner
   and never strays onto the pouch behind it. */
.showcase__badge {
  position: absolute;
  top: 3%;
  left: 2%;
  z-index: 4;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.1rem;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--rust);
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  transition: transform 250ms var(--ease);
  pointer-events: none;
}

.showcase__badge.is-flipping {
  transform: rotateY(90deg);
}

.showcase__badge-num {
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.showcase__badge-label {
  color: var(--cream);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}

.showcase__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dot-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.dot {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(90, 75, 58, 0.4);
  cursor: pointer;
  transition:
    width 400ms var(--ease),
    background-color 400ms var(--ease);
}

/* The tap target: 44px tall, and as wide as the gap between dots allows
   without two of them fighting over the same pixels. */
.dot::before {
  content: "";
  position: absolute;
  inset: -17px -8px;
}

.dot:hover {
  background: rgba(90, 75, 58, 0.6);
}

.dot[aria-current="true"] {
  width: 44px;
  background: rgba(90, 75, 58, 0.22);
}

.dot__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

/* This duration is the carousel's cadence: the fill's animationend is
   what advances it, so changing this number changes the pace. */
.dot[aria-current="true"] .dot__fill {
  animation: dot-fill 2800ms linear forwards;
}

.hero__visual.is-paused .dot[aria-current="true"] .dot__fill {
  animation-play-state: paused;
}

@keyframes dot-fill {
  to { width: 100%; }
}

@media (min-width: 768px) {
  .hero__inner {
    padding-top: 3.5rem;
  }

  .hero__lede {
    font-size: 1.125rem;
  }
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: 3rem;
    max-width: var(--container);
    margin-inline: auto;
    padding: 2.5rem calc(var(--gutter) + 0.5rem) 4.5rem;
    text-align: left;
  }

  .hero__copy {
    justify-items: start;
    gap: 1.5rem;
  }

  .hero__lede {
    font-size: 1.1875rem;
  }

  .hero__actions,
  .hero__facts {
    justify-content: flex-start;
  }

  .hero__facts {
    justify-self: start;
  }

  .hero__visual {
    width: 100%;
    padding-bottom: 0;
  }

  .showcase__stage {
    width: 100%;
    max-width: 340px;
  }

  .showcase__badge {
    width: 88px;
    height: 88px;
  }

  .showcase__badge-num {
    font-size: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .showcase__stage {
    max-width: 360px;
  }
}

/* Phones: centre pouch only, at 72% width. */
@media (max-width: 767px) {
  .showcase__slide:not([data-rel="0"]) {
    opacity: 0 !important;
  }

  .showcase__viewport {
    inset: 0;
  }

  .showcase__track {
    inset: 0;
  }

  .hero-deco__word {
    font-size: clamp(11rem, 62vw, 20rem);
  }
}

/* --- Compact frame: header only (inner pages) --------------------------- */
.hero-frame--compact {
  padding-bottom: 1.1rem;
}

@media (min-width: 1024px) {
  .hero-frame--compact {
    padding-bottom: 1.5rem;
  }
}

/* --- Buttons on light grounds ------------------------------------------ */
.btn--navy {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--cream);
}

.btn--navy:hover {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--navy-ink);
}

.btn--ghost:hover {
  border-color: var(--navy-ink);
}

.chip--light {
  border-color: var(--line);
  color: var(--navy-ink);
}

/* --- Sections on the page ground --------------------------------------- */
.section {
  padding: 3.5rem var(--gutter);
}

.section--flush-top {
  padding-top: 0;
}

.section__inner {
  max-width: var(--container);
  margin-inline: auto;
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.section__title {
  margin: 0;
  color: var(--navy-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.section__sub {
  margin: 0.35rem 0 0;
  color: var(--text);
}

.section__link {
  color: var(--pack-blue);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.section__link:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .section {
    padding: 5.5rem var(--gutter);
  }

  .section__head {
    margin-bottom: 2rem;
  }
}

/* --- Price + facts (shared) --------------------------------------------- */
.price {
  display: grid;
  line-height: 1.1;
}

.price__amount {
  color: var(--navy-ink);
  font-weight: 700;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.price__weight {
  color: var(--text);
  font-size: 0.8125rem;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Shared decoration: scattered rotating brand seals ------------------ */
.seal-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.seal-field__seal {
  position: absolute;
  top: var(--top);
  left: var(--left);
  width: var(--size);
  height: var(--size);
  background: url("../img/logo-seal-cream.png") center / contain no-repeat;
  opacity: 0.06;
  animation: seal-spin var(--dur, 60s) linear infinite;
  animation-direction: var(--dir, normal);
}

/* --- Product grid (line-up) --------------------------------------------- */
/* Five products do not divide into three columns: the old grid left two cards
   stranded beside a hole, and stacked to 3400px on a phone. Below the width
   where all five fit, it becomes a swipe rail instead -- the whole line-up in
   one gesture rather than six screens of scrolling. */
.product-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0 var(--gutter) 0.5rem;
  margin-inline: calc(var(--gutter) * -1);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

.product-grid > li {
  scroll-snap-align: start;
}

@media (min-width: 1100px) {
  .product-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.15rem;
    padding-inline: 0;
    margin-inline: 0;
    overflow-x: visible;
  }
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.85rem 0.95rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  transition:
    border-color 200ms var(--ease),
    transform 200ms var(--ease);
}

/* On the page ground a card lifts by its border, not a drop shadow -- five
   shadowed cards in a row is what made this read as heavy. */
.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--navy);
}

/* Reveal on scroll, staggered by --i. */
.product-grid > li {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 600ms var(--ease),
    transform 600ms var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}

.product-grid.is-in > li {
  opacity: 1;
  transform: none;
}

/* The pouch sits straight on the cream, no tile behind it. Sized to the
   pouch's own aspect so it nearly reaches the card's inner edges and the
   badge lands on its corner rather than floating beside it. */
.product-card__media {
  position: relative;
  margin: 0 0 0.85rem;
  padding: 0.5rem;
  border-radius: 16px;
  background: var(--tile);
  aspect-ratio: 1;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 20px rgba(23, 57, 122, 0.28));
  transition: transform 260ms var(--ease);
}

.product-card:hover .product-card__media img {
  transform: scale(1.04);
}

/* Bestseller, quietly. It sits inside the tile rather than overflowing the
   corner like the protein badge, and it is white with a hairline rather than
   a filled colour — the point is that someone scanning five packs notices two
   of them, not that the page shouts. The star carries the accent; the words
   stay navy so they read at a glance without competing with the name.

   One component, used on the line-up cards and again in the box builder. The
   --sm modifier is for the builder, whose cards are half the width on a phone
   and where a full-size pill would cover most of the pack. */
.best-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  margin: 0;
  padding: 0.3rem 0.62rem 0.3rem 0.5rem;
  /* A firmer edge than --line: the pill is white on a near-white tile, and
     the border is the only thing holding its shape. */
  border: 1px solid rgba(30, 45, 120, 0.18);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--navy-ink);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.best-pill svg {
  width: 14px;
  height: 14px;
  color: var(--orange);
}

/* The builder's cards are narrower than the line-up's at every width, and
   half a phone wide below 640px, so the pill steps down twice rather than
   once — a label should not cover the pack it is labelling. */
.best-pill--sm {
  top: 7px;
  left: 7px;
  gap: 0.26rem;
  padding: 0.24rem 0.52rem 0.24rem 0.42rem;
  font-size: 0.75rem;
}

.best-pill--sm svg {
  width: 12px;
  height: 12px;
}

@media (max-width: 639px) {
  .best-pill--sm {
    top: 6px;
    left: 6px;
    padding: 0.2rem 0.46rem 0.2rem 0.36rem;
    font-size: 0.6875rem;
  }

  .best-pill--sm svg {
    width: 11px;
    height: 11px;
  }
}

.product-card__badge {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 2;
  display: grid;
  place-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.product-card__name {
  margin: 0 0 0.25rem;
  color: var(--navy-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.15;
}

.product-card__name a {
  text-decoration: none;
}

/* Stretches the link over the card; the button sits above it. */
.product-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
}

.product-card__desc {
  margin: 0 0 0.5rem;
  color: var(--text);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* Protein and weight as one readable line, in place of a three-column table
   whose labels had shrunk to 9px to fit. */
.product-card__facts {
  margin: 0 0 1rem;
  color: var(--pack-blue);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.product-card__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-top: auto;
}

.product-card__price {
  margin: 0;
  color: var(--navy-ink);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.product-card__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.25rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: var(--cream);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 200ms var(--ease),
    transform 200ms var(--ease);
}

.product-card__btn:hover {
  background: var(--accent);
  transform: translateY(-2px);
}

/* The five singles are catalogue, not checkout: they are only sold inside a
   combo, so where a card used to carry a button it now carries a quiet label.
   Not a link — the card's title already stretches a link over the whole card,
   and a second link to the same page is noise to a screen reader. */
.product-card__tag {
  margin: 0;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* --- Section: product page ---------------------------------------------- */
.crumbs {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
}

.crumbs a {
  color: var(--pack-blue);
  text-decoration: none;
}

.crumbs a:hover {
  text-decoration: underline;
}

.product {
  display: grid;
  gap: 1.5rem;
}

.gallery {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
}

.gallery__stage {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--tile);
  overflow: hidden;
}

.gallery__zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.gallery__zoom:disabled {
  cursor: default;
}

.gallery__main {
  width: 100%;
  height: 100%;
  padding: 8%;
  object-fit: contain;
}

.gallery__main[data-kind="photo"] {
  padding: 0;
  object-fit: cover;
}

.thumbs {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
}

.thumb {
  flex: none;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--tile);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}

.thumb:hover {
  border-color: var(--pack-blue);
}

.thumb[aria-current="true"] {
  border-color: var(--navy);
  border-width: 2px;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb[data-kind="pack"] img {
  padding: 6px;
  object-fit: contain;
}

/* --- Buy box ------------------------------------------------------------- */
.buy {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  min-width: 0;
}

.buy__title {
  margin: 0;
  color: var(--navy-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.buy__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  color: var(--navy-ink);
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.buy__tax {
  margin: 0;
  color: var(--text);
  font-size: 0.8125rem;
}

.buy__tagline {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.55;
}

.field {
  display: grid;
  gap: 0.5rem;
}

.field__label {
  color: var(--navy-ink);
  font-size: 0.875rem;
  font-weight: 600;
}

.field__label span {
  color: var(--text);
  font-weight: 400;
}

.sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.size-option {
  min-height: 44px;
  padding: 0 1rem;
  border: 2px solid var(--navy);
  border-radius: 8px;
  background: var(--navy);
  color: var(--cream);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 40px;
}

.qty {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.qty__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--navy-ink);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}

.qty__btn:hover {
  background: var(--cream-soft);
}

.qty__input {
  width: 46px;
  height: 44px;
  border: 0;
  border-inline: 1px solid var(--line);
  background: transparent;
  color: var(--navy-ink);
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
}

.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.buy__status {
  margin: 0;
  min-height: 1.4em;
  color: var(--navy-ink);
  font-size: 0.875rem;
  font-weight: 500;
}

.buy__only {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: var(--tile);
  color: var(--navy-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.buy__note {
  margin: 0;
  color: var(--text);
  font-size: 0.875rem;
}

/* --- Accordion (product description) ------------------------------------ */
.acc {
  border-top: 1px solid var(--line);
}

.acc:last-of-type {
  border-bottom: 1px solid var(--line);
}

.acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  color: var(--navy-ink);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.acc__head::-webkit-details-marker {
  display: none;
}

.acc__head::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--navy-ink);
  border-bottom: 2px solid var(--navy-ink);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
}

.acc[open] .acc__head::after {
  transform: translateY(2px) rotate(-135deg);
}

.acc__body {
  padding-bottom: 1rem;
  color: var(--text);
}

.acc__body > :first-child {
  margin-top: 0;
}

.acc__body > :last-child {
  margin-bottom: 0;
}

.acc__body ul {
  margin: 0;
  padding-left: 1.1rem;
}

.acc__body li {
  margin-bottom: 0.25rem;
}

@media (min-width: 900px) {
  .product {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 3rem;
  }

  .gallery {
    position: sticky;
    top: 1.5rem;
    max-width: 480px;
  }
}


/* --- Nutrition panel ---------------------------------------------------- */
.nutrition {
  max-width: 760px;
  border: 2px solid var(--navy-ink);
  border-radius: 16px;
  overflow: auto;
}

.nutrition table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.nutrition caption {
  padding: 1rem 1.25rem;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1.15;
  text-align: left;
}

.nutrition caption small {
  display: block;
  margin-top: 0.25rem;
  color: rgba(247, 233, 195, 0.85);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
}

.nutrition th,
.nutrition td {
  padding: 0.6rem 1.25rem;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: baseline;
}

.nutrition thead th {
  border-top: 0;
  background: var(--cream-soft);
  color: var(--navy-ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nutrition thead th:not(:first-child),
.nutrition td {
  text-align: right;
  white-space: nowrap;
}

.nutrition tbody th {
  color: var(--navy-ink);
  font-weight: 500;
}

.nutrition .is-sub th {
  padding-left: 2.25rem;
  color: var(--text);
  font-weight: 400;
}

.nutrition .is-hero th,
.nutrition .is-hero td {
  background: rgba(240, 138, 42, 0.14);
  color: var(--navy-ink);
  font-weight: 700;
}

.nutrition__foot {
  margin: 0;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--line);
  background: var(--cream-soft);
  color: var(--text);
  font-size: 0.8125rem;
}

/* Phone: tighter cells, headers may wrap. Must come after the nowrap rule above. */
@media (max-width: 767px) {
  .nutrition th,
  .nutrition td {
    padding: 0.55rem 0.6rem;
    font-size: 0.9375rem;
  }

  .nutrition caption,
  .nutrition__foot {
    padding-inline: 0.6rem;
  }

  .nutrition thead th:not(:first-child) {
    white-space: normal;
  }

  .nutrition thead th {
    font-size: 0.6875rem;
  }

  .nutrition .is-sub th {
    padding-left: 1.5rem;
  }
}

/* --- Lightbox ------------------------------------------------------------ */
.lightbox {
  max-width: min(96vw, 1100px);
  max-height: 96vh;
  padding: 0;
  border: 0;
  background: transparent;
}

.lightbox::backdrop {
  background: rgba(10, 16, 50, 0.88);
}

.lightbox__img {
  max-width: 96vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 16px;
}

.lightbox__bar {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 0 0;
}

/* On the lightbox's dark overlay, so it keeps the cream pair. */
.lightbox__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--cream-70);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.lightbox__btn:hover {
  background: var(--cream-10);
  border-color: var(--cream);
}

.lightbox__btn svg {
  width: 20px;
  height: 20px;
}

/* --- Section: proof strip ----------------------------------------------- */

/* The one value-prop beat between the hero and the shop. It also breaks the
   hero's navy from the sections below it, which used to run together as a
   single blue slab. */
/* --- Proof strip ---------------------------------------------------------
   Four claims under the hero. It used to be three centred captions with a
   small icon floating above each, which is the shape every template ships
   with — and one of the icons was a credit card. Cards now, left-aligned, led
   by the figure: the number is what is worth reading, and left alignment gives
   four short blocks a spine to sit on instead of drifting in their columns. */
.proof {
  padding: 2rem var(--gutter) 2.25rem;
  background: var(--cream-soft);
}

.proof__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .proof__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
}

.proof__item {
  display: flex;
  flex-direction: column;
  padding: 1rem 0.9rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}

@media (min-width: 900px) {
  .proof__item {
    padding: 1.15rem 1.15rem 1.25rem;
  }
}

/* The icon is a marker, not the message, so it sits small and above rather
   than large and centred. */
.proof__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 0.8rem;
  border-radius: 12px;
  background: var(--sand);
  color: var(--rust);
}

.proof__icon svg {
  width: 24px;
  height: 24px;
}

.proof__figure {
  margin: 0;
  color: var(--navy-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.625rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
  .proof__figure {
    font-size: 1.875rem;
  }
}

.proof__label {
  margin: 0.2rem 0 0.4rem;
  color: var(--navy-ink);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.25;
}

.proof__note {
  margin: 0;
  color: var(--text);
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* The line-up's button sits under the price row rather than beside it:
   "Protein numbers" does not fit next to ₹99 in a 217px card, and a full-width
   target is easier to hit. */
.product-card > .product-card__btn {
  width: 100%;
  margin-top: 0.7rem;
}

/* --- Nutrition dialog ---------------------------------------------------
   The same table the product page carries, without the trip. */
.nutri {
  width: min(94vw, 620px);
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--paper);
  color: var(--navy-ink);
  overflow: hidden;
}

.nutri::backdrop {
  background: rgba(16, 24, 56, 0.55);
}

.nutri__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.15rem 0.9rem;
  border-bottom: 1px solid var(--line);
}

.nutri__eyebrow {
  margin: 0 0 0.15rem;
  color: var(--pack-blue);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nutri__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.15;
}

.nutri__sub {
  margin: 0.25rem 0 0;
  color: var(--text);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.nutri__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -0.35rem -0.35rem 0 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--navy-ink);
  cursor: pointer;
}

.nutri__close svg {
  width: 18px;
  height: 18px;
}

.nutri__close:hover {
  background: var(--tile);
}

/* The table's own border and radius belong to the page version; inside the
   dialog the dialog is the frame. */
.nutri__body {
  max-width: none;
  border-top: 0;
  max-height: min(58vh, 460px);
  border: 0;
  border-radius: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.nutri__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.15rem 1.15rem;
  border-top: 1px solid var(--line);
}

.nutri__note {
  flex: 1 1 14rem;
  margin: 0;
  color: var(--text);
  font-size: 0.75rem;
  line-height: 1.45;
}

@media (max-width: 480px) {
  .nutri__foot .btn {
    flex: 1 1 100%;
  }
}

/* --- Section: combos ---------------------------------------------------- */

/* Bundle photography is landscape, and the packs in it are the point, so these
   cards are wide where the line-up's are tall. */
.combos-section {
  background: var(--cream-soft);
}

.combo-grid {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .combo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* All five packs in one shot: the widest picture gets the widest card. */
  .combo--wide {
    grid-column: 1 / -1;
  }
}

.combo__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
}

/* Photo beside the words rather than above them: as a stacked card, a
   2:1 group shot of five packs was setting a 630px row height on its own. */
@media (min-width: 900px) {
  .combo--wide .combo__card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
  }
}

.combo__media {
  background: var(--tile);
}

.combo__media img {
  width: 100%;
  height: auto;
}

/* The duo shots are cropped to a band so two cards side by side stay the
   same height whatever the source photograph's ratio is. */
.combo:not(.combo--wide) .combo__media img {
  aspect-ratio: 1.55;
  object-fit: cover;
  object-position: center 55%;
}

.combo__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.1rem 1.25rem 1.2rem;
}

@media (min-width: 900px) {
  .combo--wide .combo__body {
    padding: 1.5rem 1.75rem;
  }
}

.combo__name {
  margin: 0 0 0.4rem;
  color: var(--navy-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.15;
}

.combo__desc {
  margin: 0 0 0.85rem;
  max-width: 48ch;
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* What is in the box, as a row of chips rather than a list to read. */
.combo__contents {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
}

.combo__contents li {
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(30, 45, 120, 0.18);
  border-radius: var(--radius-pill);
  color: var(--navy-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.combo__buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: auto;
}

.combo__price {
  margin: 0;
  color: var(--navy-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
}

.combo__was {
  margin-left: 0.25rem;
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
}

/* --- Section: build your own box ----------------------------------------
   The section stays on the page background so it does not make a third
   coloured band between the cream combos and the white FAQ. The panel does the
   separating instead — which also happens to look like what it is. */
.box-panel {
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--cream-soft);
}

/* Explicit counts rather than auto-fit: at 390px the panel's inner width is a
   few pixels short of two 150px tracks, and auto-fit silently drops to one
   enormous card per row. Two, three, five. */
.box-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .box-panel {
    padding: 1.25rem;
  }

  .box-card {
    padding: 0.7rem;
  }

  .box-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
  }
}

@media (min-width: 1100px) {
  .box-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
  }
}

/* A card, not a list row: the pack shots are the best thing the brand owns and
   at 56px they were wallpaper. */
.box-card {
  display: flex;
  flex-direction: column;
  padding: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  transition:
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.box-card.is-chosen {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.box-card__media {
  position: relative;
  margin-bottom: 0.6rem;
  padding: 0.35rem;
  border-radius: 12px;
  background: var(--tile);
  aspect-ratio: 1;
}

.box-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(23, 57, 122, 0.22));
  transition: transform 220ms var(--ease);
}

/* A pack going into the box should look like it went somewhere. */
.box-card.is-adding .box-card__media img {
  transform: scale(1.09);
}

.box-card__badge {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8125rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.box-card__name {
  margin: 0 0 0.15rem;
  color: var(--navy-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
}

.box-card__meta {
  margin: 0 0 0.6rem;
  color: var(--text);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

/* Add first, stepper once there is something to step. One control at a time
   is less to read, and the swap is itself the confirmation that it worked. */
.box-card__add,
.box-card .qty--box {
  margin-top: auto;
  width: 100%;
  height: 44px;
}

.box-card__add {
  border: 1.5px solid var(--navy);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.box-card__add:hover {
  background: var(--navy);
  color: var(--cream);
}

.box-card .qty--box {
  display: flex;
  justify-self: stretch;
}

.box-card .qty--box .qty__input {
  flex: 1;
  width: auto;
}

/* --- the bar --------------------------------------------------------- */

.box-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.box-bar__state {
  flex: 1 1 15rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.box-bar__meter {
  flex: 1 1 auto;
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

/* Where a pack lands. It is the target of the flight, so it has to be a fixed,
   findable point rather than a label that moves as the count text rewraps. */
.box-crate {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--navy);
  transition: transform 220ms var(--ease), border-color 220ms var(--ease);
}

.box-crate svg {
  width: 24px;
  height: 24px;
}

/* A pack has just gone in. */
.box-crate.is-catching {
  transform: scale(1.12);
  border-color: var(--navy);
}

.box-crate.is-full {
  border-color: var(--pack-green);
  color: var(--pack-green);
}

/* The pack in flight: a clone, so nothing in the card moves or reflows. */
.pack-fly {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(23, 57, 122, 0.3));
  will-change: transform, opacity;
}

.box-progress {
  display: flex;
  gap: 0.3rem;
}

.box-progress__pip {
  width: 100%;
  max-width: 2.5rem;
  height: 6px;
  border-radius: 999px;
  background: rgba(30, 45, 120, 0.16);
  transition:
    background-color 220ms var(--ease),
    transform 220ms var(--ease);
}

.box-progress__pip.is-filled {
  background: var(--navy);
}

/* Past the minimum the track has done its job; it goes green and stops
   competing with the total for attention. */
.box-progress.is-complete .box-progress__pip {
  background: var(--pack-green);
}

.box-bar__count {
  margin: 0;
  color: var(--navy-ink);
  font-weight: 600;
  line-height: 1.4;
}

.box-bar__total {
  margin: 0;
  color: var(--navy-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: transform 180ms var(--ease);
}

.box-bar__total.is-bumped {
  transform: scale(1.06);
}

.box-bar__label {
  margin-right: 0.35rem;
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
}

/* On a phone the cards run past the fold, so the count, the total and the
   button follow you down rather than waiting at the bottom. */
@media (max-width: 767px) {
  .box-bar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-inline: -0.85rem;
    margin-bottom: -0.85rem;
    padding: 0.85rem calc(0.85rem + env(safe-area-inset-left, 0px)) calc(0.85rem + env(safe-area-inset-bottom, 0px));
    border-radius: 0 0 19px 19px;
    background: var(--cream-soft);
    box-shadow: 0 -8px 16px -12px rgba(23, 57, 122, 0.4);
  }

  .box-bar .btn {
    flex: 1 1 100%;
  }
}

/* Not a box yet: say so where the cart is decided, and give the button
   nothing to do until it is fixed. */
.drawer__warn {
  margin: 0 0 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: var(--cream-soft);
  color: var(--navy-ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
}

/* --- Section: FAQ ------------------------------------------------------- */

/* The accordion is the product page's, reused. Answers are set narrow: the
   container is 1200px wide and a line of prose that long is unreadable. */
.faq {
  max-width: 46rem;
}

.faq .acc__head {
  font-size: 1rem;
  padding: 1.05rem 0;
}

.faq .acc__body {
  padding-bottom: 1.15rem;
}

.faq .acc__body p {
  margin: 0 0 0.6rem;
  max-width: 60ch;
}

.faq .acc__body p:last-child {
  margin-bottom: 0;
}

/* --- Section: footer ------------------------------------------------------ */
.footer {
  margin: var(--frame);
  padding: 2rem var(--gutter);
  border-radius: var(--radius-hero);
  background: var(--navy);
  color: var(--cream);
}

.footer__inner {
  display: grid;
  gap: 1.25rem;
  max-width: var(--container);
  margin-inline: auto;
}

.footer__tag {
  margin: 0.5rem 0 0;
  color: rgba(247, 233, 195, 0.8);
}

.footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__nav a {
  font-weight: 500;
  text-decoration: none;
}

.footer__nav a:hover {
  text-decoration: underline;
}

/* The only place on the site a customer can reach a human. An <address>,
   because that is what the element is for, and not italic, because that is
   the browser's idea rather than ours. Both are real links: a phone number
   you cannot tap on a phone is a phone number nobody calls. */
.footer__contact {
  margin: 0;
  color: var(--cream);
  font-size: 0.9375rem;
  font-style: normal;
  line-height: 1.7;
}

.footer__contact-label {
  display: block;
  color: rgba(247, 233, 195, 0.7);
  font-size: 0.8125rem;
}

.footer__contact a {
  color: var(--cream);
  text-decoration-color: rgba(247, 233, 195, 0.45);
  text-underline-offset: 3px;
  /* 44px of tap target without moving anything: the padding overlaps the
     line-height rather than adding to it. */
  display: inline-block;
  padding-block: 0.55rem;
  margin-block: -0.55rem;
}

.footer__contact a:hover {
  text-decoration-color: var(--cream);
}

.footer__legal {
  margin: 0;
  color: rgba(247, 233, 195, 0.65);
  font-size: 0.8125rem;
}

.footer__sep {
  margin: 0 0.5rem;
}


@media (min-width: 768px) {
  .footer {
    padding: 3rem var(--gutter);
  }

  .footer__inner {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .footer__legal {
    grid-column: 1 / -1;
  }
}

/* --- Motion: one orchestrated entrance --------------------------------- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

[data-reveal] {
  animation: rise 560ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-reveal] {
    animation: none;
  }

  .ticker__track {
    animation: none;
    padding-left: var(--gutter);
  }

  .btn,
  .menu-toggle,
  .menu-toggle__icon path,
  .site-nav__link {
    transition: none;
  }

  /* Hero showcase: no auto-advance, no motion. Dots switch instantly. */
  .showcase__float,
  .showcase__glow,
  .hero-deco__seal,
  .seal-field__seal {
    animation: none;
  }

  /* Line-up cards: visible immediately, no lift or scale on hover. */
  .product-grid > li {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .product-card,
  .product-card__media img,
  .product-card__btn {
    transition: none;
  }

  .box-card,
  .box-card__media img,
  .box-progress__pip,
  .box-bar__total,
  .box-crate {
    transition: none;
  }

  .box-crate.is-catching {
    transform: none;
  }

  .box-card.is-adding .box-card__media img,
  .box-bar__total.is-bumped {
    transform: none;
  }

  .product-card:hover,
  .product-card__btn:hover {
    transform: none;
  }

  .product-card:hover .product-card__media img {
    transform: none;
  }

  .hero-frame,
  .showcase__slide,
  .showcase__name,
  .showcase__badge,
  .dot {
    transition: none;
  }

  .dot[aria-current="true"] .dot__fill {
    animation: none;
    width: 100%;
  }
}

/* ==========================================================================
   Pre-order checkout
   One section in Shopify terms: the picker maps to line items and the address
   block to the customer/shipping address, so the markup stays close to what
   the cart and checkout templates already expect.
   ========================================================================== */

/* --- Form controls ------------------------------------------------------- */
.input,
.textarea,
.select {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--navy-ink);
  font: inherit;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.textarea {
  min-height: 96px;
  resize: vertical;
}

.select {
  appearance: none;
  padding-right: 2.4rem;
  /* Chevron drawn inline so the control needs no extra request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231A2456' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
  cursor: pointer;
}

.input::placeholder,
.textarea::placeholder {
  color: #9AA0B4;
}

.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(240, 138, 42, 0.25);
}

.field__hint {
  margin: 0;
  color: var(--text);
  font-size: 0.8125rem;
}

/* select.input inherits the input's box, but not its type colour or its
   arrow room, and Safari will not give it the same height without this. */
select.input {
  height: 48px;
  padding-right: 2.25rem;
  color: var(--navy-ink);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231A2456' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 18px 18px;
}

select.input:invalid {
  color: var(--text);
}

.field__error {
  margin: 0;
  color: var(--error);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Empty by default, so a clean form is not padded out by reserved space. */
.field__error:empty {
  display: none;
}

.field__optional {
  color: var(--text);
  font-weight: 400;
}

.field.is-invalid .input,
.field.is-invalid .textarea,
.field.is-invalid .select {
  border-color: var(--error);
}

.field__label .req {
  color: var(--error);
}

/* --- Checkout layout ----------------------------------------------------- */
.checkout {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 900px) {
  .checkout {
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.95fr);
    gap: 2.75rem;
  }
}

.checkout__step {
  margin: 0 0 1.75rem;
  padding: 0;
  border: 0;
}

.checkout__step:last-of-type {
  margin-bottom: 0;
}

.checkout__legend {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.35rem;
  padding: 0;
  color: var(--navy-ink);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
}

.checkout__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--cream);
  font-size: 0.9375rem;
}

.checkout__note {
  margin: 0 0 1.1rem 2.4rem;
  color: var(--text);
  font-size: 0.9375rem;
}

.form-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 620px) {
  .form-grid--2 {
    grid-template-columns: 1fr 1fr;
  }

  .form-grid .span-2 {
    grid-column: 1 / -1;
  }
}

/* --- Product picker ------------------------------------------------------ */
.picker {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.picker__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.picker__row.is-chosen {
  border-color: var(--navy);
  background: var(--cream-soft);
}

.picker__row.is-out {
  opacity: 0.6;
}

.picker__thumb {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.picker__name {
  margin: 0;
  color: var(--navy-ink);
  font-weight: 600;
}

.picker__meta {
  margin: 0;
  color: var(--text);
  font-size: 0.8125rem;
}

.picker__out {
  color: var(--error);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Between the combos and the loose packs. Without it the five ₹85 rows read
   as products that suddenly got cheap, rather than as parts of a box. */
.picker__split {
  display: grid;
  gap: 0.15rem;
  margin-top: 0.5rem;
  padding: 0.85rem 0.9rem;
  border-radius: 14px;
  background: var(--cream-soft);
}

.picker__split strong {
  color: var(--navy-ink);
  font-family: var(--font-display);
  font-size: 1.0625rem;
}

.picker__split span {
  color: var(--text);
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* Below ~400px the name wraps awkwardly between the thumb and the stepper.
   Reclaiming the space from the thumbnail keeps each row to one line. */
@media (max-width: 420px) {
  .picker__row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 0.6rem;
    padding: 0.6rem;
  }

  .picker__thumb {
    width: 40px;
    height: 40px;
  }

  .picker__meta {
    font-size: 0.75rem;
  }
}

/* --- Order summary ------------------------------------------------------- */
.summary {
  position: sticky;
  top: 1.25rem;
  padding: 1.25rem;
  border-radius: 20px;
  background: var(--cream-soft);
  box-shadow: 0 10px 26px rgba(8, 14, 46, 0.1);
}

.summary__title {
  margin: 0 0 0.9rem;
  color: var(--navy-ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.summary__lines {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.summary__row {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 0 0 0.35rem;
  color: var(--text);
  font-size: 0.9375rem;
}

.summary__row span:last-child {
  color: var(--navy-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.summary__row #summary-delivery.is-free {
  color: var(--pack-green);
}

.summary__nudge {
  margin: 0.25rem 0 0.6rem;
  color: var(--pack-blue);
  font-size: 0.875rem;
  font-weight: 600;
}

.summary__line {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  color: var(--navy-ink);
  font-size: 0.9375rem;
}

.summary__line span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.summary__empty {
  margin: 0 0 1rem;
  color: var(--text);
  font-size: 0.9375rem;
}

.summary__total {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(30, 45, 120, 0.15);
  color: var(--navy-ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.summary__total span:last-child {
  font-variant-numeric: tabular-nums;
}

/* The summary panel is already cream, so this one goes white to read as a
   notice rather than as an indented paragraph. */
.summary__warn {
  margin: 0.85rem 0 0;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: var(--paper);
  color: var(--navy-ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
}

.summary__note {
  margin: 0.9rem 0 0;
  color: var(--text);
  font-size: 0.8125rem;
}

.form-status {
  margin: 0.75rem 0 0;
  min-height: 1.2em;
  font-size: 0.875rem;
  font-weight: 500;
}

.form-status[data-tone="error"] {
  color: var(--error);
}

/* The reason, under the sentence. Quieter than the message above it, but on
   screen rather than in a console nobody opens on a phone — a screenshot of a
   failed order should say what went wrong. */
.form-status__detail {
  display: block;
  margin-top: 0.4rem;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
}

/* --- Confirmation -------------------------------------------------------- */
.confirm {
  max-width: 560px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
  border-radius: 20px;
  background: var(--cream-soft);
  text-align: center;
}

/* ==========================================================================
   Cart — header button and drawer
   Shaped like a Shopify cart drawer so the port swaps the contents, not the
   layout. Built by assets/js/cart.js; there is no cart without JavaScript.
   ========================================================================== */

/* In the header, so it sits on the sand bar, not on navy. */
.cart-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--bronze);
  border-radius: 50%;
  background: transparent;
  color: var(--cocoa);
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.cart-button:hover {
  background: rgba(143, 115, 67, 0.12);
  border-color: var(--cocoa);
}

.cart-button__icon {
  width: 20px;
  height: 20px;
}

.cart-button__count {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--rust);
  color: var(--cream);
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Below this the wordmark, cart, CTA and menu button stop fitting on one row.
   The cart is the more useful of the two buttons, so the text CTA goes. */
@media (max-width: 560px) {
  .header__actions .btn--cream {
    display: none;
  }
}

/* --- Drawer -------------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
}

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 50, 0.45);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}

.drawer.is-open .drawer__scrim {
  opacity: 1;
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(400px, 100%);
  background: var(--paper);
  box-shadow: -20px 0 50px rgba(8, 14, 46, 0.25);
  transform: translateX(100%);
  transition: transform var(--t-base) var(--ease);
}

.drawer.is-open .drawer__panel {
  transform: translateX(0);
}

.drawer__panel:focus-visible {
  outline: none;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.drawer__title {
  margin: 0;
  color: var(--navy-ink);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
}

.drawer__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--navy-ink);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}

.drawer__close:hover {
  background: var(--tile);
}

.drawer__close svg {
  width: 18px;
  height: 18px;
}

.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

.drawer__empty {
  display: grid;
  gap: 1rem;
  justify-items: center;
  padding: 3rem 0;
  color: var(--text);
  text-align: center;
}

.drawer__list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.drawer__line {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.drawer__line:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.drawer__thumb {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.drawer__name {
  margin: 0;
  color: var(--navy-ink);
  font-weight: 600;
  line-height: 1.3;
}

.drawer__price {
  margin: 0;
  color: var(--text);
  font-size: 0.8125rem;
}

.drawer__controls {
  display: grid;
  gap: 0.3rem;
  justify-items: center;
}

.qty--sm .qty__btn {
  width: 34px;
  height: 34px;
  font-size: 1rem;
}

.qty--sm .qty__input {
  width: 36px;
  height: 34px;
  font-size: 0.875rem;
}

.linklike {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
}

.linklike:hover {
  color: var(--error);
}

.drawer__foot {
  padding: 1.1rem 1.25rem;
  border-top: 1px solid var(--line);
  background: var(--cream-soft);
}

/* Subtotal and delivery, above the total they add up to. Showing the charge
   here rather than only at the checkout means nobody meets it for the first
   time on the payment screen. */
.drawer__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.35rem;
  color: var(--text);
  font-size: 0.875rem;
}

.drawer__row span:last-child {
  color: var(--navy-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.drawer__free {
  color: var(--pack-green) !important;
}

.drawer__nudge {
  margin: -0.4rem 0 0.9rem;
  color: var(--pack-blue);
  font-size: 0.8125rem;
  font-weight: 600;
}

.drawer__total {
  display: flex;
  justify-content: space-between;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  margin-bottom: 0.9rem;
  color: var(--navy-ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.drawer__total span:last-child {
  font-variant-numeric: tabular-nums;
}

.drawer__note {
  margin: 0.75rem 0 0;
  color: var(--text);
  font-size: 0.8125rem;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .drawer__scrim,
  .drawer__panel {
    transition: none;
  }
}

/* Explains why the picker is empty — a failed load, or a store that has not
   been connected to its database yet. */
.notice {
  display: grid;
  gap: 0.35rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: 12px;
  background: var(--cream-soft);
  color: var(--text);
  font-size: 0.9375rem;
  list-style: none;
}

.notice strong {
  color: var(--navy-ink);
  font-size: 1rem;
}

.notice a {
  justify-self: start;
  margin-top: 0.35rem;
  color: var(--pack-blue);
  font-weight: 600;
}