/* ==========================================================================
   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;
  --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;
  --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;
}

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);
}

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

.btn--cream:hover {
  background: #fff;
  border-color: #fff;
}

.btn--outline {
  background: transparent;
  border-color: var(--cream-70);
  color: var(--cream);
}

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

.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(--navy-deep);
  color: var(--cream);
  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(--orange);
  transform: rotate(45deg);
}

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

/* --- Hero frame: navy card that holds header + 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: var(--navy);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
  transition: --accent 700ms ease;
}

/* Accent tint washed across the card, following the active product. */
.hero-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 55%),
    radial-gradient(120% 90% at 88% 12%, color-mix(in srgb, var(--accent) 14%, 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(--cream);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(14rem, 40vw, 30rem);
  line-height: 0.78;
  opacity: 0.05;
  white-space: nowrap;
  user-select: none;
}

/* The real brand seal, reduced to cream marks on transparent so the navy
   disc drops out and it reads as texture rather than a stack of logos. */
.hero-deco__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.08;
  animation: seal-spin var(--dur, 60s) linear infinite;
  animation-direction: var(--dir, normal);
}

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

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

.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;
}

.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;
  border: 2px solid var(--cream-70);
  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: var(--cream-10);
  border-color: var(--cream);
}

.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: 18px;
  background: var(--navy-deep);
  box-shadow: 0 16px 40px rgba(10, 16, 50, 0.35);
}

.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(--cream);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}

.site-nav__link:hover {
  background: var(--cream-10);
}

.no-js .site-nav {
  position: static;
  padding: 0;
  background: none;
  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;
    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;
}

/* Accent-reactive in the hero, where --accent is animated. Elsewhere
   --accent falls back to its registered initial value, the brand orange. */
.eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow__sep {
  margin: 0 0.35em;
}

.hero__title {
  margin: 0;
  color: var(--cream);
  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(--accent);
}

.hero__lede {
  margin: 0;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(247, 233, 195, 0.84);
  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(--cream-45);
  border-radius: var(--radius-pill);
  color: var(--cream);
  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(--accent);
  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 {
  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(--badge-accent, var(--accent));
  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.5625rem;
  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;
}

.dot {
  display: block;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(247, 233, 195, 0.35);
  overflow: hidden;
  cursor: pointer;
  transition:
    width 400ms var(--ease),
    background-color 400ms var(--ease);
}

/* Keeps a 44px tap target without enlarging the visible dot. */
.dot::before {
  content: "";
  position: absolute;
  inset: -17px -6px;
}

.dot:hover {
  background: rgba(247, 233, 195, 0.55);
}

.dot[aria-current="true"] {
  width: 44px;
  background: rgba(247, 233, 195, 0.25);
}

.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);
}

/* --- Section: navy variant --------------------------------------------- */
.section--navy {
  position: relative;
  isolation: isolate;
  background: #17397A;
}

.section--navy .section__inner {
  position: relative;
  z-index: 1;
}

.section--navy .section__title {
  color: var(--cream);
}

.section--navy .section__sub {
  color: rgba(247, 233, 195, 0.75);
}

/* --- Product grid (line-up) --------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem 1.15rem 1.15rem;
  border-radius: 20px;
  background: #F5EDDC;
  box-shadow: 0 10px 26px rgba(8, 14, 46, 0.22);
  transition:
    transform 260ms var(--ease),
    box-shadow 260ms var(--ease);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(8, 14, 46, 0.34);
}

/* 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;
  width: 86%;
  margin: 0 auto 0.9rem;
  aspect-ratio: 0.73;
}

.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);
}

.product-card__badge {
  position: absolute;
  top: -10px;
  right: -18px;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.05rem;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--accent);
}

.product-card__badge b {
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.product-card__badge small {
  color: var(--cream);
  font-size: 0.4375rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

.product-card__name {
  margin: 0 0 0.3rem;
  color: var(--navy-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  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.9rem;
  color: rgba(26, 36, 86, 0.7);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.product-card__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 0.9rem;
}

.product-card__stats > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.15rem;
  padding-inline: 0.5rem;
  text-align: center;
}

.product-card__stats > div:first-child {
  padding-left: 0;
}

.product-card__stats > div:last-child {
  padding-right: 0;
}

.product-card__stats > div + div {
  border-left: 1px solid rgba(26, 36, 86, 0.25);
}

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

.product-card__stats dt {
  color: rgba(26, 36, 86, 0.6);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
}

.product-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.product-card__tags li {
  padding: 0.2rem 0.6rem;
  border: 1.5px solid rgba(26, 36, 86, 0.4);
  border-radius: var(--radius-pill);
  color: var(--navy-ink);
  font-size: 0.75rem;
  line-height: 1.4;
}

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

.product-card__price {
  margin: 0;
  color: var(--navy-ink);
  font-weight: 700;
  font-size: 1.375rem;
  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-radius: var(--radius-pill);
  background: var(--navy);
  color: var(--cream);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 200ms var(--ease),
    transform 200ms var(--ease);
}

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

/* --- 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__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;
}

.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: 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;
}

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

.footer__sep {
  margin: 0 0.5rem;
}

.footer__admin {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast) var(--ease);
}

.footer__admin:hover {
  color: var(--cream);
}

@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;
  }

  .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;
}

.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;
}

/* 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: 18px;
  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__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;
  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;
}

.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);
}

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

.confirm__ref {
  display: inline-block;
  margin: 0.75rem 0 0.25rem;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.confirm__lines {
  display: grid;
  gap: 0.4rem;
  margin: 1.25rem 0;
  padding: 1.25rem 0;
  border-block: 1px solid rgba(30, 45, 120, 0.15);
  list-style: none;
  text-align: left;
}

/* ==========================================================================
   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.
   ========================================================================== */

.cart-button {
  position: relative;
  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);
}

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

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

/* display:grid would otherwise beat the user agent's [hidden] rule, leaving a
   badge reading "0" on an empty cart. */
.cart-button__count[hidden] {
  display: none;
}

.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(--orange);
  color: var(--navy-ink);
  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);
}

.drawer__total {
  display: flex;
  justify-content: space-between;
  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;
}