/* ============================================================
   Roots & Spices — storefront shell styles
   Built from css/tokens.css (link fonts.css, tokens.css, then this).

   1. Base            — lifted from the launch page's base styles
   2. Motifs          — lifted brand helpers (+ railway extensions)
   3. Launch effects  — keyframes, cursor, seal (VERBATIM values)
   4. Layout          — container, sections, dividers
   5. Components      — nav, CTA, hero (launch treatment), story,
                        ticket, stamp, stubs, footer
   6. Motion          — reveals
   ============================================================ */

/* ---------- 1. Base (lifted from launch page) ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--body-leading);
  color: var(--text-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--text-strong);
  margin: 0 0 0.4em;
  text-wrap: balance;
}
/* Heading sizes are fluid BETWEEN token endpoints — proper sizes per
   breakpoint rather than shrunk desktop type; the launch type scale
   stays the single source of the endpoints. */
h1 { font-size: clamp(var(--text-3xl), 3vw + 1.5rem, var(--text-5xl)); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
h2 { font-size: clamp(var(--text-2xl), 2vw + 1.05rem, var(--text-3xl)); }
h3 { font-size: clamp(var(--text-xl), 1.2vw + 1rem, var(--text-2xl)); }
h4 { font-size: var(--text-xl); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--link-hover); }

small { font-size: var(--text-sm); }
strong { font-weight: var(--weight-bold); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

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

::selection { background: var(--turmeric-300); color: var(--charcoal-900); }

hr { border: none; border-top: var(--border-1) solid var(--border-subtle); margin: var(--space-6) 0; }

:focus-visible {
  outline: var(--border-2) solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ---------- 2. Motifs ---------- */
.rs-eyebrow {
  font-family: var(--eyebrow-family);
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}
.rs-label {
  font-family: var(--label-family);
  font-weight: var(--label-weight);
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.rs-perforation {
  background-image: radial-gradient(var(--perf-dot) 40%, transparent 42%);
  background-size: 16px 16px;
}
.rs-rule-gold {
  display: inline-flex; align-items: center; gap: var(--space-3);
  color: var(--accent-gold);
}
.rs-rule-gold::before, .rs-rule-gold::after {
  content: ""; width: 28px; height: 2px; background: currentColor;
}

/* Railway extensions */
.rs-station {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--eyebrow-family);
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}
.rs-station::before, .rs-station::after {
  content: "";
  width: 28px;
  height: var(--border-1);
  background: var(--accent-gold);
}
.rs-kicker {
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  line-height: var(--leading-snug);
  color: var(--accent-gold);
}
.rs-timetable {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-3) 0;
  border-top: var(--border-1) solid var(--border-subtle);
  border-bottom: var(--border-1) solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

/* ---------- 3. Launch effects (VERBATIM from the launch page) ---------- */
@keyframes rs-seal-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rs-drift { from { transform: scale(1); } to { transform: scale(1.08); } } /* defined-but-unused on the launch page; carried as-is */
@keyframes rs-zoom { from { transform: scale(1); } to { transform: scale(1.16); } }
@keyframes rs-dust {
  0%   { opacity: 0; transform: translate(0,0) scale(0.5); }
  7%   { opacity: var(--o); transform: translate(calc(var(--dx) * 0.10), calc(var(--dy) * -0.16)) scale(1); }
  32%  { opacity: calc(var(--o) * 0.78); transform: translate(calc(var(--dx) * 0.44 + var(--tx)), calc(var(--dy) * 0.16)) scale(0.94); }
  62%  { opacity: calc(var(--o) * 0.42); transform: translate(calc(var(--dx) * 0.74 - var(--tx)), calc(var(--dy) * 0.52)) scale(0.78); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--ds)); }
}
@keyframes rs-spark {
  0%   { opacity: 0.9; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

/* The launch page hides the native cursor everywhere (the wheel replaces
   it). Gated on html.rs-wheel — a class js/launch-fx.js adds only after
   the wheel cursor is actually injected — so a visitor never ends up
   with NO pointer at all (no-JS, or a failed script). Identical result
   to the launch rule whenever the wheel is running; the original reads:
   html, body, *, *::before, *::after { cursor: none !important; } */
html.rs-wheel, .rs-wheel body, .rs-wheel *, .rs-wheel *::before, .rs-wheel *::after { cursor: none !important; }

/* Corner seal — global, spinning, click cycles the colour scheme.
   Chrome (emboss/sheen/bevel) verbatim from the launch page's badge. */
.rs-seal {
  position: fixed;
  top: calc(var(--nav-height) + var(--seal-top));
  right: var(--seal-right);
  width: var(--seal-size);
  height: var(--seal-size);
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-circle);
  box-shadow: var(--seal-emboss);
  cursor: pointer;
  z-index: 90;
}
.rs-seal img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-circle);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform;
  animation: rs-seal-spin var(--seal-spin-dur) linear infinite;
}
.rs-seal__light {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-circle);
  pointer-events: none;
  background: var(--seal-sheen);
  box-shadow: var(--seal-bevel);
}
/* Press feedback when the seal changes the theme — a quick, quiet dip
   (the spark burst from launch-fx also fires). Scales the button, not
   the img, so it never fights the continuous spin. */
.rs-seal.is-tapped { animation: rs-seal-tap 280ms var(--ease-out); }
@keyframes rs-seal-tap {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* ---- time-of-day theme shift: the whole page eases from one palette to
   the next. The 4.5s transition is applied ONLY during a change
   (html.rs-theme-shift, toggled by js/theme.js and removed once it
   settles), so it never slows component hover states the rest of the
   time. Colour properties only — layout, opacity and transforms are
   untouched, so the wheel cursor, drawer and reveals are unaffected. ---- */
html.rs-theme-shift,
html.rs-theme-shift * {
  transition: background-color 4.5s var(--ease-standard),
              border-color 4.5s var(--ease-standard),
              color 4.5s var(--ease-standard),
              fill 4.5s var(--ease-standard),
              stroke 4.5s var(--ease-standard) !important;
}
/* The hero is a photographic colour scheme, not a token surface: its scrim
   is a gradient (which can't cross-fade) and its type is tuned to that
   scrim. Snap the whole hero to the new scheme at once instead of fading
   its text out of sync with a scrim that jumps — the page around it still
   eases. */
html.rs-theme-shift .rs-hero,
html.rs-theme-shift .rs-hero * { transition: none !important; }

/* ---------- 4. Layout ---------- */
.rs-container {
  width: 100%;
  max-width: var(--container-lg);
  margin-inline: auto;
  /* balanced per breakpoint: 16px on a phone (content breathes wider),
     the launch 24px gutter from ~600px, a fuller 32px on big screens */
  padding-inline: clamp(var(--space-4), 4vw, var(--gutter));
}
@media (min-width: 64em) {
  .rs-container { padding-inline: var(--space-6); }
}
.rs-container--md { max-width: var(--container-md); }

.rs-section {
  padding-block: clamp(var(--space-9), 12vh, var(--section-y));
  scroll-margin-top: var(--nav-height);
}

.rs-divider {
  border: none;
  height: 0;
  margin: 0;
  border-top: var(--border-1) solid var(--border-subtle);
}
.rs-divider--rail {
  position: relative;
  height: 7px;
  border-top: var(--border-1) solid var(--border-subtle);
  border-bottom: var(--border-1) solid var(--border-subtle);
}
.rs-divider--rail .rs-divider__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding-inline: var(--space-3);
  background: var(--color-bg);
  color: var(--accent-gold);
  font-size: 9px;
  line-height: 1;
}

.rs-skip {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 200;
  padding: var(--space-2) var(--space-4);
  background: var(--brand-primary);
  color: var(--on-primary);
  border-radius: var(--radius-xs);
  transform: translateY(-300%);
}
.rs-skip:focus-visible { transform: none; color: var(--on-primary); }

/* ---------- 5. Components ---------- */

/* -- Sticky nav -- */
.rs-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: var(--border-1) solid var(--border-subtle);
}
/* The translucent-blur ground lives on a ::before layer, NOT on the
   header itself: backdrop-filter on an element makes it the containing
   block for fixed descendants, which would trap the mobile off-canvas
   menu inside the header's box. */
.rs-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(var(--nav-blur));
  backdrop-filter: blur(var(--nav-blur));
  transition: background var(--dur-base) var(--ease-standard);
}
.rs-nav.is-scrolled::before { background: var(--nav-bg-scrolled); }
/* while the menu is out, header (burger + cart) rides above its scrim */
html.rs-menu-open .rs-nav { z-index: 215; }

.rs-nav__inner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "brand burger cart";
  align-items: center;
  column-gap: var(--space-2);
  padding-block: var(--space-3);
}

.rs-nav__brand {
  grid-area: brand;
  font-family: var(--label-family);
  font-weight: var(--label-weight);
  font-size: var(--text-sm);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-strong);
}
.rs-nav__brand:hover { color: var(--brand-primary); }

.rs-nav__menu {
  grid-area: menu;
  display: flex;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rs-nav__link {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-body);
  padding-block: var(--space-1);
  border-bottom: var(--border-1) solid transparent;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.rs-nav__link:hover,
.rs-nav__link[aria-current="page"] {
  color: var(--brand-primary);
  border-bottom-color: var(--accent-gold);
}

.rs-nav__cart {
  grid-area: cart;
  justify-self: end;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  border-radius: var(--radius-circle);
  transition: color var(--dur-fast) var(--ease-standard);
}
.rs-nav__cart:hover { color: var(--brand-primary); }
.rs-nav__cart svg { width: 22px; height: 22px; }
.rs-nav__cart-count {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 1.05rem;
  height: 1.05rem;
  padding-inline: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-gold);
  color: var(--forest-900);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: var(--weight-bold);
  line-height: 1;
  border-radius: var(--radius-pill);
}

/* Mobile: the menu is an off-canvas panel from the left; only brand,
   burger and cart live in the header bar. The cart never hides. */
/* the <nav> wrapper must not occupy a grid cell of its own */
.rs-nav__inner > nav { display: contents; }

.rs-nav__burger {
  grid-area: burger;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  background: transparent;
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.rs-nav__burger span {
  width: 20px;
  height: 2px;
  background: var(--text-strong);
  transition: transform var(--dur-base) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard);
}
.rs-nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rs-nav__burger.is-open span:nth-child(2) { opacity: 0; }
.rs-nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.rs-nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(34, 31, 26, 0.45);
  z-index: 205;
}
.rs-nav-scrim[hidden] { display: none; }
html.rs-menu-open { overflow: hidden; }

@media (max-width: 47.99em) {
  .rs-nav__menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(19rem, 84vw);
    flex-direction: column;
    gap: 0;
    padding: var(--space-10) var(--space-6) var(--space-6);
    background: var(--color-bg-alt);
    border-right: var(--border-1) solid var(--border-subtle);
    transform: translateX(-105%);
    transition: transform var(--dur-slow) var(--ease-out);
    z-index: 210;
    overflow-y: auto;
  }
  .rs-nav__menu.is-open { transform: none; }
  .rs-nav__menu .rs-nav__link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.75rem;
    font-size: var(--text-base);
    border-bottom: var(--border-1) solid var(--border-subtle);
  }
}

@media (min-width: 48em) {
  .rs-nav__inner {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "brand menu cart";
    padding-block: 0;
    min-height: var(--nav-height);
  }
  .rs-nav__menu { justify-content: center; gap: var(--space-6); }
  .rs-nav__burger { display: none; }
}

/* -- CTA component -- */
.rs-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--label-family);
  font-weight: var(--label-weight);
  font-size: var(--text-sm);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              transform var(--depth-in) var(--ease-standard);
}

.rs-cta--quiet { color: var(--brand-primary); }
.rs-cta--quiet::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  transition: width var(--dur-base) var(--ease-out);
}
.rs-cta--quiet .rs-cta__arrow { transition: transform var(--dur-base) var(--ease-out); }
.rs-cta--quiet:hover { color: var(--link-hover); }
.rs-cta--quiet:hover::before { width: 44px; }
.rs-cta--quiet:hover .rs-cta__arrow { transform: translateY(3px); }

.rs-cta--solid {
  padding: var(--space-3) var(--space-6);
  background: var(--brand-primary);
  color: var(--on-primary);
  border: var(--border-1) solid var(--brand-primary);
  border-radius: var(--radius-pill);
}
.rs-cta--solid:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: var(--on-primary);
}
.rs-cta--solid:active { background: var(--brand-primary-active); }

/* -- Hero: the launch page treatment, verbatim --
   Full viewport, forest ground, photo with slow 30s zoom under a
   per-scheme tint (duotones via mix-blend-mode) and scrim gradient.
   Type colours come from the active scheme (--cur-*). */
.rs-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background-color: var(--forest-700);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: var(--hero-pad);
  scroll-margin-top: var(--nav-height);
}
.rs-hero__bg {
  position: absolute;
  inset: var(--bg-overscan);
  background-image: url("../assets/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: rs-zoom var(--bg-zoom-dur) ease-in-out infinite alternate;
  will-change: transform;
}
.rs-hero__tint {
  position: absolute;
  inset: 0;
  background: var(--cur-tint);
  mix-blend-mode: var(--cur-blend);
}
.rs-hero__scrim {
  position: absolute;
  inset: 0;
  background: var(--cur-scrim);
}
.rs-hero__content {
  position: relative;
  z-index: 2;
}
.rs-hero__kicker {
  margin: 0 0 var(--hero-gap-kicker);
  color: var(--cur-accent);
}
.rs-hero__title {
  margin: 0;
  font-family: var(--font-display-hero);
  font-weight: var(--hero-title-weight);
  font-size: var(--hero-title-size);
  line-height: var(--hero-title-leading);
  letter-spacing: var(--hero-title-tracking);
  max-width: var(--hero-title-measure);
  text-wrap: balance;
  color: var(--cur-heading);
}
.rs-hero__lede {
  margin: var(--hero-gap-sub) 0 0;
  font-family: var(--font-sans);
  font-size: var(--hero-sub-size);
  line-height: var(--hero-sub-leading);
  max-width: var(--hero-sub-measure);
  text-wrap: pretty;
  color: var(--cur-sub);
}
.rs-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--chip-gap);
  margin-top: var(--hero-gap-chips);
}
.rs-chip {
  font-family: var(--font-mono);
  font-size: var(--chip-size);
  letter-spacing: var(--chip-tracking);
  text-transform: uppercase;
  padding: var(--chip-pad);
  border-radius: var(--radius-pill);
}
.rs-chip--solid {
  background: var(--cur-chip-bg);
  color: var(--cur-chip-text);
}
.rs-chip--outline {
  border: var(--border-1) solid var(--cur-chip-border);
  color: var(--cur-accent);
}
.rs-hero__cta {
  margin-top: var(--hero-gap-chips);
}
.rs-hero .rs-cta--quiet { color: var(--cur-accent); }
.rs-hero .rs-cta--quiet:hover { color: var(--cur-heading); }

/* -- Story panel -- */
.rs-story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
/* two columns only when the text column gets a real reading measure —
   tablets read the story stacked (full-width ticket, then the copy) */
@media (min-width: 60em) {
  .rs-story__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-10);
    align-items: center;
  }
}
/* stacked ticket shouldn't span the full tablet width */
@media (min-width: 48em) and (max-width: 59.99em) {
  .rs-story__grid .rs-ticket { max-width: 26rem; }
}

.rs-story__eyebrow { margin: 0 0 var(--space-4); }
.rs-story__title { margin-bottom: var(--space-5); }
.rs-story__timetable { margin: 0 0 var(--space-6); }
.rs-story__copy p { max-width: 58ch; }
.rs-story__copy p:last-child { margin-bottom: 0; }
.rs-story__signoff {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--text-strong);
}

/* -- Ticket-stub image frame -- */
.rs-ticket {
  position: relative;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3rem;
  background: var(--color-surface);
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-xs);
}
.rs-ticket__media {
  aspect-ratio: 4 / 5;
  background: var(--color-surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.rs-ticket__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* story slideshow: stack the photos and cross-fade between them
   (js/story.js flips is-active; under reduced motion only the first shows) */
.rs-ticket__slideshow { position: relative; }
.rs-ticket__slideshow img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1200ms var(--ease-standard);
}
.rs-ticket__slideshow img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rs-ticket__slideshow img { transition: none; }
}
.rs-ticket__stub {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: var(--border-1) dashed var(--border-subtle);
}
.rs-ticket__stub .rs-eyebrow {
  writing-mode: vertical-rl;
  white-space: nowrap;
  color: var(--text-faint);
}
.rs-ticket__meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-1) solid var(--border-subtle);
}

/* -- Passport stamp (EST. 2026) -- */
.rs-stamp {
  position: absolute;
  top: calc(-1 * var(--space-5));
  right: calc(-1 * var(--space-2));
  width: 6rem;
  height: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  border: var(--border-frame) solid var(--accent-oxblood);
  border-radius: var(--radius-circle);
  color: var(--accent-oxblood);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.3;
  transform: rotate(-8deg);
  opacity: 0.85;
}
.rs-stamp::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: var(--border-1) solid currentColor;
  border-radius: var(--radius-circle);
}
.rs-stamp strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

/* -- Catalog: filter pills + product grid --
   All values are existing tokens; the pill band is framed by the same
   timetable hairlines as the story meta row (platform-board reading). */
.rs-catalog__eyebrow { margin: 0 0 var(--space-4); }
.rs-catalog__title { margin-bottom: var(--space-5); }

/* "Boarding now" as an Indian Railways station name board: a bright yellow
   panel in plain signage type, flanked by hazard-striped poles. Fixed
   real-world colours, so it reads the same across the time-of-day themes. */
.rs-nameboard {
  --board-yellow: #F7BE1E;
  --board-ink: #1B1712;
  display: inline-flex;
  align-items: center;
  margin: var(--space-3) 0 var(--space-4);
  filter: drop-shadow(0 3px 5px rgba(27, 23, 18, 0.22));
}
.rs-nameboard__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  background: var(--board-yellow);
  color: var(--board-ink);
  font-family: Arial, "Helvetica Neue", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1;
  padding: 0.6em 1.1em;
  border-radius: 1px;
}
/* Devanagari headline (no letter-spacing — keeps the matras intact) over
   the English romanisation, the way a real bilingual board reads. */
.rs-nameboard__hi { font-size: var(--text-sm); }
.rs-nameboard__en {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* shallow gabled roof on top of the panel */
.rs-nameboard__panel::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: 100%;
  height: 9px;
  background: var(--board-yellow);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
/* hazard-striped posts, taller than the panel so they read as supports */
.rs-nameboard__pole {
  width: 10px;
  height: 3.6em;
  flex: 0 0 auto;
  border-radius: 6px 6px 2px 2px;
  background: repeating-linear-gradient(
    180deg,
    var(--board-ink) 0 7px,
    var(--board-yellow) 7px 14px
  );
}
.rs-catalog__lede {
  max-width: 52ch;
  color: var(--text-muted);
  margin-bottom: var(--space-7);
}

.rs-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--chip-gap);
  padding-block: var(--space-4);
  border-top: var(--border-1) solid var(--border-subtle);
  border-bottom: var(--border-1) solid var(--border-subtle);
  margin-bottom: var(--space-8);
}
.rs-pill {
  font-family: var(--font-mono);
  font-size: var(--chip-size);
  letter-spacing: var(--chip-tracking);
  text-transform: uppercase;
  padding: var(--chip-pad);
  border-radius: var(--radius-pill);
  border: var(--border-1) solid var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--depth-in) var(--ease-standard);
}
.rs-pill:hover {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.rs-pill[aria-pressed="true"] {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--on-primary);
}

.rs-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-6);
}

.rs-product {
  position: relative;   /* containing block for the stretched card link */
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-xs);
  overflow: hidden;
  box-shadow: var(--depth-shadow-rest);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--depth-out) var(--ease-out),
              box-shadow var(--depth-out) var(--ease-out);
}
.rs-product.is-hidden { display: none; }
.rs-product.is-entering {
  opacity: 0;
  transform: translateY(8px);
}

/* Product photo slot — final 4:5 ratio; while there is no photography,
   the launch imagery treatment (forest ground + baseline scrim) holds
   the space. An <img> from products.js replaces the placeholder. */
.rs-product__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: var(--forest-700);
  background-image: var(--scrim-forest);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.rs-product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rs-product__placeholder { color: var(--text-on-dark-muted); }

.rs-product__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2);
  padding: var(--space-4);
  border-top: var(--border-1) solid var(--border-subtle);
}
.rs-product__cat { margin: 0; }
.rs-product__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
}
/* The title link carries the card's accessible name; its ::after stretches
   over the whole card so a click anywhere (bar the add-to-cart controls)
   opens the product page. A real <a>, so middle-click / open-in-new-tab
   and screen-reader link semantics all work. */
.rs-product__link { color: inherit; text-decoration: none; }
.rs-product__link:hover { color: inherit; }
.rs-product__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Add-to-cart controls float above the stretched link so they receive
   their own clicks and never navigate the card. */
.rs-product__foot .rs-add,
.rs-product__foot .rs-add-toggle,
.rs-product__foot .rs-size-picker {
  position: relative;
  z-index: 2;
}
/* optional descriptor under the title — a quiet serif italic gloss that
   explains an unfamiliar name (e.g. "Indian shortbread") */
.rs-product__sub,
.rs-pdp__sub {
  margin: 3px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-muted);
  line-height: var(--leading-snug);
}
.rs-product__sub { font-size: var(--text-sm); }
.rs-pdp__sub { font-size: var(--text-lg); margin-top: var(--space-1); }
.rs-product--coming .rs-product__sub { color: var(--text-faint); }
.rs-product__price {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-strong);
}
.rs-product__price-tbc { color: var(--text-faint); }
.rs-product__lead {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.rs-product__foot { margin-top: auto; padding-top: var(--space-4); }
.rs-product__soon {
  font-family: var(--font-mono);
  font-size: var(--chip-size);
  letter-spacing: var(--chip-tracking);
  text-transform: uppercase;
  line-height: var(--leading-snug);
  color: var(--text-faint);
}

/* Coming soon: same card, muted — still present, still filterable */
.rs-product--coming { opacity: 0.62; }
.rs-product--coming .rs-product__title { color: var(--text-muted); }

/* ============================================================
   Interactive depth — restrained lift on cards, press on controls.
   One token set (--depth-* in tokens.css). Cards RISE on hover /
   keyboard focus; buttons, pills, sizes and the nutrition toggle
   PRESS in on click. Hover lift is gated on a genuine hover-capable
   fine pointer (never fires from a tap); everything is skipped on
   admin (body.rs-admin-body) and cut to a static change under
   prefers-reduced-motion (see the motion block near the foot).
   ============================================================ */

/* Available product card — rises toward the viewer. Quick in; the base
   .rs-product transition eases it a touch slower back out. */
@media (hover: hover) and (pointer: fine) {
  body:not(.rs-admin-body) .rs-product:not(.rs-product--coming):hover {
    transform: translateY(var(--depth-lift)) scale(var(--depth-scale));
    box-shadow: var(--depth-shadow);
    transition-duration: var(--depth-in);
  }
}
body:not(.rs-admin-body) .rs-product:not(.rs-product--coming):focus-within {
  transform: translateY(var(--depth-lift)) scale(var(--depth-scale));
  box-shadow: var(--depth-shadow);
  transition-duration: var(--depth-in);
}
/* Click / tap: the lifted card dips quickly toward the surface (a press),
   then navigates. Not gated to fine pointers, so a touch tap gets the same
   brief press. Skipped when the press is actually on an in-card control
   (add-to-cart / size), which does its own button press instead. */
body:not(.rs-admin-body) .rs-product:not(.rs-product--coming):active:not(:has(.rs-add:active, .rs-add-toggle:active, .rs-size:active)) {
  transform: translateY(var(--depth-lift-press)) scale(var(--depth-scale-press));
  box-shadow: var(--depth-shadow-press);
  transition-duration: var(--depth-in);
}

/* Coming-soon card — still a link, but calm: no lift, just a quiet
   brightening so it reads as reachable without competing with the
   available cards. */
@media (hover: hover) and (pointer: fine) {
  body:not(.rs-admin-body) .rs-product--coming:hover { opacity: 0.8; }
}
body:not(.rs-admin-body) .rs-product--coming:focus-within { opacity: 0.8; }

/* Controls press IN (they don't lift like cards): a small sink + squeeze
   on the active press. Their hover colour changes already live above. */
body:not(.rs-admin-body) .rs-cta--solid:active,
body:not(.rs-admin-body) .rs-pill:active,
body:not(.rs-admin-body) .rs-size:active {
  transform: translateY(var(--depth-press-y)) scale(var(--depth-press-scale));
}
/* Full-width bar: sink only, no width-squeeze. */
body:not(.rs-admin-body) .rs-nutrition__toggle:active {
  transform: translateY(var(--depth-press-y));
}

/* Form controls — a gentle hover border shift (no press; you don't push a
   text field). Focus keeps its existing ring. */
body:not(.rs-admin-body) .rs-field input,
body:not(.rs-admin-body) .rs-field textarea {
  transition: border-color var(--dur-fast) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  body:not(.rs-admin-body) .rs-field input:hover,
  body:not(.rs-admin-body) .rs-field textarea:hover { border-color: var(--clay-500); }
}

/* Cursor "view details" hint — a small caption that rides beside the
   spinning wheel cursor while it's over an available product card, so the
   card announces itself without printing "View details" on its face.
   Created + positioned by js/launch-fx.js; it only exists when the wheel
   is active (a real mouse), so touch never sees it. The OUTER element is
   positioned by JS (transform) and fades; the INNER label carries the
   little pop — it grows in when the caption appears and a touch more on a
   press, without fighting the JS-driven position transform. */
.rs-cursor-hint {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483646;   /* just beneath the wheel */
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-200px, -200px, 0);   /* positioned by js/launch-fx.js */
  transition: opacity var(--dur-fast) var(--ease-standard);
  will-change: transform, opacity;
}
.rs-cursor-hint.is-on { opacity: 1; }
.rs-cursor-hint__label {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: rgba(34, 31, 26, 0.88);
  color: var(--cream-50);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: scale(0.6);        /* pops up as the caption appears */
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.rs-cursor-hint.is-on .rs-cursor-hint__label { transform: scale(1); }
.rs-cursor-hint.is-on.is-press .rs-cursor-hint__label { transform: scale(1.18); }  /* a bit more on click */

/* -- Cart: counter bump, size picker, drawer, checkout --
   Everything from existing tokens; motion reuses the site's eases. */

html.rs-lock, .rs-lock body { overflow: hidden; }

@keyframes rs-bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
.rs-nav__cart-count.is-bump { animation: rs-bump var(--dur-slow) var(--ease-out); }

/* Add-to-cart on cards */
.rs-cta--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.rs-product__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}
.rs-add.is-added, .rs-add-toggle.is-added {
  background: var(--brand-primary-active);
  border-color: var(--brand-primary-active);
}
.rs-size-picker {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-2);
}
.rs-size {
  font-family: var(--font-mono);
  font-size: var(--chip-size);
  letter-spacing: var(--chip-tracking);
  text-transform: uppercase;
  line-height: var(--leading-snug);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  border: var(--border-1) solid var(--border-subtle);
  background: var(--color-surface);
  color: var(--text-body);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              transform var(--depth-in) var(--ease-standard);
}
.rs-size:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.rs-size.is-added { border-color: var(--brand-primary); color: var(--brand-primary); }

/* detailed size option: the SERVES is the headline under the weight —
   as readable as the weight itself, not small greyer print the eye
   skips. One option per row (a stacked, comfortably tappable list).
   Shared by the product-page selector and the catalog card picker. */
.rs-size--detail {
  flex: 1 1 100%;
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-sans);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  min-height: 3.25rem;
}
.rs-size--detail .rs-size__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.rs-size__label {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.rs-size__price { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.rs-size__serves {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--text-body);
}

/* plain one-line serve hint above the size options */
.rs-pdp__servenote {
  flex-basis: 100%;
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* display rules on these components must not defeat the hidden attr —
   EVERY element that both sets `display:` and is toggled via .hidden
   belongs in this list */
.rs-drawer[hidden], .rs-scrim[hidden], .rs-checkout[hidden],
.rs-co-delivery[hidden], .rs-co-collection[hidden],
.rs-size-picker[hidden],
.rs-promo__form[hidden], .rs-promo__applied[hidden],
.rs-drawer__total[hidden] { display: none; }

/* visually hidden, still announced (live regions, SR-only text) */
.rs-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Backdrop */
.rs-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(34, 31, 26, 0.45);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-standard);
}
.rs-scrim.is-open { opacity: 1; }

/* Slide-out drawer */
.rs-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 210;
  width: min(26rem, calc(100vw - 2.25rem));
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-left: var(--border-1) solid var(--border-subtle);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.rs-drawer.is-open { transform: none; }

.rs-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: var(--border-1) solid var(--border-subtle);
}
.rs-drawer__title { margin: 0; font-size: var(--text-2xl); }
.rs-drawer__close, .rs-checkout__close {
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: transparent;
  color: var(--text-strong);
  font-size: var(--text-2xl);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-circle);
  transition: color var(--dur-fast) var(--ease-standard);
}
.rs-drawer__close:hover, .rs-checkout__close:hover { color: var(--link-hover); }

.rs-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-5);
}
.rs-drawer__lines { list-style: none; margin: 0; padding: 0; }
.rs-line {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-4);
  border-bottom: var(--border-1) solid var(--border-subtle);
}
.rs-line__thumb {
  width: 3.5rem;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background-color: var(--forest-700);
  background-image: var(--scrim-forest);
}
.rs-line__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rs-line__title { margin: 0; font-weight: var(--weight-medium); color: var(--text-strong); }
.rs-line__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--charcoal-700);
}
.rs-line__serves {
  margin: 2px 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text-body);
}
.rs-line__controls { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); }
.rs-qty {
  display: inline-flex;
  align-items: center;
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-pill);
}
.rs-qty button {
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  background: transparent;
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}
.rs-qty button:hover { color: var(--brand-primary); }
.rs-qty__n {
  min-width: 1.5rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.rs-line__remove {
  border: none;
  background: transparent;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--charcoal-700);
  cursor: pointer;
  border-bottom: var(--border-1) solid transparent;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.rs-line__remove:hover { color: var(--link-hover); border-bottom-color: currentColor; }
.rs-line__total {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-strong);
}

.rs-drawer__empty { padding-block: var(--space-8); }
.rs-drawer__empty p { color: var(--text-muted); max-width: 24ch; }

.rs-drawer__foot {
  padding: var(--space-5);
  border-top: var(--border-1) solid var(--border-subtle);
}
.rs-drawer__lead {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--charcoal-700);
}
.rs-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-4);
}
.rs-drawer__subtotal-val {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}
.rs-drawer__checkout { width: 100%; justify-content: center; }

/* -- Checkout overlay -- */
.rs-checkout {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(34, 31, 26, 0.45);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-standard);
}
.rs-checkout.is-open { opacity: 1; }
.rs-checkout__panel {
  width: 100%;
  max-width: var(--container-sm);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--color-bg-alt);
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  transform: translateY(var(--reveal-shift));
  transition: transform var(--dur-slow) var(--ease-out);
}
.rs-checkout.is-open .rs-checkout__panel { transform: none; }
.rs-checkout__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.rs-checkout__title { margin: 0; font-size: var(--text-2xl); }

/* Progress: two platforms joined by a length of track */
.rs-progress {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0 0 var(--space-7);
  padding: var(--space-3) 0;
  border-top: var(--border-1) solid var(--border-subtle);
  border-bottom: var(--border-1) solid var(--border-subtle);
}
.rs-progress__stop { display: flex; flex-direction: column; gap: 2px; }
.rs-progress__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--clay-600);
}
.rs-progress__name {
  font-family: var(--label-family);
  font-weight: var(--label-weight);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--charcoal-700);
}
.rs-progress__stop.is-active .rs-progress__num { color: var(--accent-gold); }
.rs-progress__stop.is-active .rs-progress__name { color: var(--brand-primary); }
.rs-progress__stop.is-done .rs-progress__name { color: var(--text-strong); }
.rs-progress__rail {
  flex: 1;
  position: relative;
  height: 7px;
  border-top: var(--border-1) solid var(--border-subtle);
  border-bottom: var(--border-1) solid var(--border-subtle);
}
.rs-progress__rail span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding-inline: var(--space-2);
  background: var(--color-bg-alt);
  color: var(--accent-gold);
  font-size: 9px;
  line-height: 1;
}

/* Fulfilment choice: ticket-style radios */
.rs-co-method { border: none; margin: 0 0 var(--space-5); padding: 0; }
.rs-co-method legend { margin-bottom: var(--space-3); }
.rs-co-method__row { display: flex; gap: var(--chip-gap); flex-wrap: wrap; }
.rs-ticket-radio { position: relative; }
.rs-ticket-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.rs-ticket-radio span {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--chip-size);
  letter-spacing: var(--chip-tracking);
  text-transform: uppercase;
  padding: var(--chip-pad);
  border-radius: var(--radius-pill);
  border: var(--border-1) solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.rs-ticket-radio input:checked + span {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--on-primary);
}
.rs-ticket-radio input:focus-visible + span {
  outline: var(--border-2) solid var(--focus-ring);
  outline-offset: 3px;
}

/* Form fields */
.rs-field { margin-bottom: var(--space-4); }
.rs-field label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--label-family);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-body);
}
.rs-field__opt { color: var(--text-faint); text-transform: none; letter-spacing: normal; }
.rs-field input, .rs-field textarea {
  width: 100%;
  padding: var(--space-3);
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  font: inherit;
  color: var(--text-body);
}
.rs-field input:focus-visible, .rs-field textarea:focus-visible {
  outline: var(--border-2) solid var(--focus-ring);
  outline-offset: 1px;
}
.rs-field.is-invalid input, .rs-field.is-invalid textarea { border-color: var(--danger); }
.rs-field__err {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--danger);
}
.rs-co-delivery { display: grid; grid-template-columns: 1fr; column-gap: var(--space-4); }
@media (min-width: 30em) {
  .rs-co-delivery { grid-template-columns: 1fr 1fr; }
  .rs-co-delivery > * { grid-column: 1 / -1; }
  .rs-co-delivery > .rs-field--half { grid-column: auto; }
}
.rs-co-note {
  font-size: var(--text-sm);
  color: var(--charcoal-700);
}

.rs-co-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.rs-co-actions > .rs-cta--solid:only-child { margin-left: auto; }

/* Review */
.rs-review__lines { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.rs-review__lines li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: var(--border-1) solid var(--border-subtle);
}
.rs-review__lines em { font-style: normal; color: var(--text-muted); }
.rs-review__lines li > span:last-child { font-family: var(--font-mono); font-size: var(--text-sm); }
/* piece count under a checkout/confirmation line — keeps the customer
   oriented ("500g, about 33 pieces") through the order summary */
.rs-review__serves {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.rs-review__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-5);
}
.rs-review__subtotal-val {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}
.rs-review__meta { margin: 0 0 var(--space-4); }
.rs-review__meta div { display: flex; gap: var(--space-4); padding-block: var(--space-1); }
.rs-review__meta dt {
  flex: 0 0 8rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--charcoal-700);
  padding-top: 2px;
}
.rs-review__meta dd { margin: 0; }

/* Review totals (subtotal / delivery / total) */
.rs-review__totals { margin-bottom: var(--space-5); }
.rs-review__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: var(--space-2);
}
.rs-review__row > span:last-child {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.rs-review__row--total {
  border-top: var(--border-1) solid var(--border-subtle);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
}
.rs-review__row--total > span:last-child {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}

/* Payment (Stripe Element lives inside; appearance is themed with the
   same token values in js/checkout.js) */
.rs-payment {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-xs);
}
.rs-payment__label { margin: 0 0 var(--space-3); }
.rs-payment__loading {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--charcoal-700);
}
.rs-payment__error {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--danger-surface);
  border: var(--border-1) solid var(--danger);
  border-radius: var(--radius-xs);
  color: var(--danger);
  font-size: var(--text-sm);
}

/* Larger-orders invitations — quiet, no thresholds */
.rs-catalog__larger {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-4);
  border-top: var(--border-1) solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--charcoal-700);
  max-width: 52ch;
}
.rs-drawer__larger {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--charcoal-700);
}

/* -- Confirmation: dedicated full-page view (the terminus) -- */
.rs-confirm {
  position: fixed;
  inset: 0;
  z-index: 240;
  overflow-y: auto;
  background: var(--color-bg);
}
.rs-confirm__inner { padding-block: clamp(var(--space-9), 14vh, var(--space-12)); }
.rs-confirm .rs-station { margin-bottom: var(--space-4); }
.rs-confirm__title { font-size: var(--text-3xl); margin-bottom: var(--space-6); }
.rs-confirm__refrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}
.rs-confirm__ref {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-wide);
  color: var(--brand-primary);
}
.rs-confirm__ticket {
  background: var(--color-surface);
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.rs-confirm__ticket .rs-timetable { margin-bottom: var(--space-4); border-top: none; padding-top: 0; }
.rs-confirm__lines { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.rs-confirm__lines li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: var(--border-1) solid var(--border-subtle);
}
.rs-confirm__lines em { font-style: normal; color: var(--charcoal-700); }
.rs-confirm__lines li > span:last-child { font-family: var(--font-mono); font-size: var(--text-sm); }
.rs-confirm__totals div {
  display: flex;
  justify-content: space-between;
  padding-block: var(--space-1);
  font-size: var(--text-sm);
}
.rs-confirm__totals div > span:last-child { font-family: var(--font-mono); }
.rs-confirm__total {
  border-top: var(--border-1) solid var(--border-subtle);
  margin-top: var(--space-2);
  padding-top: var(--space-3) !important;
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}
.rs-confirm__addr { margin: var(--space-4) 0 0; }
.rs-confirm__next { max-width: 58ch; }
.rs-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
}
.rs-confirm__back a { font-size: var(--text-sm); color: var(--charcoal-700); }
.rs-confirm__back a:hover { color: var(--link-hover); }

/* Mobile: checkout fills the screen; primary actions full-width */
@media (max-width: 40em) {
  .rs-checkout { padding: 0; }
  .rs-checkout__panel {
    max-width: none;
    height: 100%;
    max-height: none;
    border: none;
    border-radius: 0;
    padding: var(--space-5) var(--space-4) var(--space-8);
  }
  .rs-co-actions .rs-cta--solid { flex: 1; justify-content: center; }
}

/* -- Product detail page -- */
.rs-pdp__back { display: inline-block; margin-bottom: var(--space-6); }
.rs-pdp__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 48em) {
  .rs-pdp__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10); }
}

/* gallery: swipeable snap strip at the final 4:5 ratio; thumbs below.
   Translucent prev/next arrows overlay the photo edges and the native
   scrollbar is hidden — the strip stays swipeable, and the arrows and
   thumbnails drive it. */
.rs-gallery__stage { position: relative; }
.rs-gallery__main {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: var(--space-2);
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--forest-700);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* legacy Edge */
}
.rs-gallery__main::-webkit-scrollbar { display: none; } /* WebKit */

.rs-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: var(--border-1) solid rgba(251, 247, 236, 0.30); /* faint cream ring */
  border-radius: 50%;
  background: rgba(34, 31, 26, 0.42); /* translucent warm-dark scrim (charcoal-900) */
  color: var(--cream-50);
  cursor: pointer;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.rs-gallery__arrow--prev { left: var(--space-2); }
.rs-gallery__arrow--next { right: var(--space-2); }
.rs-gallery__arrow:hover,
.rs-gallery__arrow:focus-visible { background: rgba(34, 31, 26, 0.66); }
.rs-gallery__arrow:focus-visible {
  outline: var(--border-2) solid var(--cream-50);
  outline-offset: 2px;
}
.rs-gallery__chev { width: 1.25rem; height: 1.25rem; display: block; }
@media (prefers-reduced-motion: reduce) {
  .rs-gallery__arrow { transition: none; }
}
.rs-gallery__slide {
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--forest-700);
  background-image: var(--scrim-forest);
  overflow: hidden;
}
.rs-gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.rs-gallery__thumbs {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  overflow-x: auto;
}
.rs-gallery__thumb {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--color-surface-sunken);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.rs-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rs-gallery__thumb.is-active { border: var(--border-2) solid var(--brand-primary); }

.rs-pdp__title { margin-bottom: var(--space-2); }
.rs-pdp__price {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--text-strong);
}
.rs-pdp__desc { max-width: 48ch; }
.rs-pdp__buy { margin-block: var(--space-5); }
.rs-pdp__buy .rs-size-picker { position: static; margin-top: var(--space-3); box-shadow: none; }
.rs-pdp__soon {
  margin-block: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--chip-tracking);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}
.rs-pdp__lead { font-size: var(--text-sm); color: var(--charcoal-700); }
.rs-pdp__divider { margin-block: var(--space-9); }

.rs-pdp__story p { max-width: 58ch; }
.rs-pdp__story .rs-station { margin-bottom: var(--space-4); }

.rs-pdp__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  margin-top: var(--space-9);
}
@media (min-width: 48em) {
  .rs-pdp__facts { grid-template-columns: repeat(3, 1fr); }
}
.rs-pdp__h2 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.rs-pdp__ingredients ul { margin: 0; padding-left: 1.2em; }
.rs-pdp__ingredients li { padding-block: 2px; }
.rs-pdp__labelnote { display: block; margin-top: var(--space-3); }
.rs-pdp__todo { color: var(--text-muted); }

/* allergens: unmissable at a glance — someone scanning for "nuts"
   must find this in two seconds */
.rs-allergens {
  border: var(--border-2) solid var(--accent-oxblood);
  border-radius: var(--radius-xs);
  background: var(--danger-surface);
  padding: var(--space-4) var(--space-5);
  align-self: start;
}
.rs-allergens__title { color: var(--accent-oxblood); }
.rs-allergens ul { margin: 0; padding-left: 1.2em; font-weight: var(--weight-semibold); }
.rs-allergens li { padding-block: 2px; }
.rs-allergens p { margin: 0; }

.rs-specs dl { margin: 0; }
.rs-specs__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: var(--border-1) solid var(--border-subtle);
}
.rs-specs__row:first-child { border-top: var(--border-1) solid var(--border-subtle); }
.rs-specs__row dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--charcoal-700);
  flex: 0 0 auto;
}
.rs-specs__row dd { margin: 0; text-align: right; font-size: var(--text-sm); }

/* cross-contact / shared-kitchen note — sits with the allergens, inside
   the same red block, separated by a hairline */
.rs-allergens .rs-allergens__kitchen {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-1) solid var(--accent-oxblood);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--text-body);
}

/* ---- nutrition: a real disclosure (button + aria-expanded), the panel
   height-animated with the site easing; the table scrolls horizontally
   inside its own box on narrow screens instead of breaking the layout ---- */
.rs-nutrition { margin-top: var(--space-8); }
.rs-nutrition__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) 0;
  background: none;
  border: 0;
  border-top: var(--border-1) solid var(--border-subtle);
  border-bottom: var(--border-1) solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-strong);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard),
              transform var(--depth-in) var(--ease-standard);
}
.rs-nutrition__toggle:hover { color: var(--brand-primary); }
.rs-nutrition__icon {
  flex: 0 0 auto;
  width: 0.6em;
  height: 0.6em;
  margin-inline-end: 2px;
  border-right: var(--border-2) solid currentColor;
  border-bottom: var(--border-2) solid currentColor;
  transform: rotate(45deg);            /* chevron pointing down when closed */
  transition: transform var(--dur-base) var(--ease-standard);
}
.rs-nutrition.is-open .rs-nutrition__icon { transform: rotate(-135deg); } /* up when open */
.rs-nutrition__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.rs-nutrition.is-open .rs-nutrition__panel { grid-template-rows: 1fr; }
.rs-nutrition__inner {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;                  /* off the tab order + AT while collapsed */
  transition: visibility var(--dur-slow) linear;
}
.rs-nutrition.is-open .rs-nutrition__inner { visibility: visible; }
.rs-nutrition__serving {
  display: block;
  margin: var(--space-4) 0 var(--space-3);
  color: var(--text-muted);
}
.rs-nutrition__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rs-nutrition__table {
  width: 100%;
  min-width: 20rem;                    /* forces horizontal scroll rather than squashing */
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.rs-nutrition__table th,
.rs-nutrition__table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-1) solid var(--border-subtle);
  text-align: right;
  white-space: nowrap;
}
.rs-nutrition__table thead th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--charcoal-700);
  border-bottom: var(--border-2) solid var(--border-strong);
  vertical-align: bottom;
}
.rs-nutrition__table tbody th {
  text-align: left;
  font-weight: var(--weight-semibold);
}
.rs-nutrition__table thead th:first-child { text-align: left; }
.rs-nutrition__subrow th {
  padding-left: var(--space-5);        /* indent sub-nutrients: saturated, sugars */
  font-weight: var(--weight-regular);
  color: var(--text-muted);
}
.rs-nutrition__subrow td { color: var(--text-muted); }
.rs-nutrition__foot {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.rs-also { margin-top: var(--space-10); }
.rs-also .rs-station { margin-bottom: var(--space-5); }
.rs-also__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: 32rem;
}
.rs-also__card {
  display: block;
  background: var(--color-surface);
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-xs);
  overflow: hidden;
  color: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.rs-also__card:hover { color: var(--text-body); border-color: var(--brand-primary); }
.rs-also__card--coming { opacity: 0.65; }
.rs-also__media {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 4 / 5;
  background-color: var(--forest-700);
  background-image: var(--scrim-forest);
  overflow: hidden;
}
.rs-also__media img { width: 100%; height: 100%; object-fit: cover; }
.rs-also__body { display: block; padding: var(--space-3) var(--space-4); }
.rs-also__title { display: block; font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-strong); }
.rs-also__price { display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--charcoal-700); margin-top: 2px; }

/* -- Order lookup (Your order page) -- */
.rs-lookup__intro { max-width: 52ch; color: var(--charcoal-700); margin-bottom: var(--space-7); }
.rs-lookup__form { max-width: 28rem; }
.rs-lookup__form input { font-family: var(--font-mono); }
.rs-lookup__form #lu-email { font-family: var(--font-sans); }
.rs-lookup__error {
  max-width: 28rem;
  margin: var(--space-5) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--danger-surface);
  border: var(--border-1) solid var(--danger);
  border-radius: var(--radius-xs);
  color: var(--danger);
  font-size: var(--text-sm);
}
.rs-lookup__result {
  max-width: 28rem;
  margin-top: var(--space-7);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-xs);
}
.rs-lookup__status { margin: 0 0 var(--space-4); font-size: var(--text-lg); color: var(--text-strong); }
.rs-lookup__status .rs-label { display: block; font-size: var(--text-xs); color: var(--charcoal-700); margin-bottom: var(--space-1); }
.rs-lookup__result .rs-timetable { margin-bottom: var(--space-4); }
.rs-lookup__items { list-style: none; margin: 0; padding: 0; }
.rs-lookup__items li { padding-block: var(--space-2); border-bottom: var(--border-1) solid var(--border-subtle); }
.rs-lookup__items li:last-child { border-bottom: none; }
.rs-lookup__items em { font-style: normal; color: var(--charcoal-700); }

/* -- Stub pages -- */
.rs-stub {
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.rs-stub .rs-station { margin-bottom: var(--space-4); }
.rs-stub p { max-width: 46ch; }

/* -- Footer -- */
.rs-footer {
  border-top: var(--border-1) solid var(--border-subtle);
  padding-block: var(--space-8);
}
.rs-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.rs-footer__brand {
  font-family: var(--label-family);
  font-weight: var(--label-weight);
  font-size: var(--text-sm);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-strong);
}
.rs-footer__meta { color: var(--text-muted); }
.rs-footer__contact {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}
.rs-footer__contact a { color: inherit; }
.rs-footer__contact a:hover { color: var(--link-hover); }
.rs-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rs-footer__nav a { font-size: var(--text-sm); color: var(--text-muted); }
.rs-footer__nav a:hover { color: var(--link-hover); }

/* Privacy / Terms — long-form reading, on the story page's type treatment */
.rs-legal { max-width: 68ch; }
/* cap the measure so a long title wraps (like mobile) and never runs
   under the fixed corner seal at in-between widths */
.rs-legal__title { max-width: 18ch; margin-bottom: var(--space-5); }
.rs-legal__intro {
  font-size: var(--text-lg);
  color: var(--text-body);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}
.rs-legal h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  font-size: var(--text-xl);
}
.rs-legal p { line-height: var(--leading-relaxed); }
.rs-legal a { color: var(--brand-primary); }
.rs-legal__foot {
  margin-top: var(--space-7);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* checkout: agreement + refund-policy link, above the Pay button */
.rs-co-agree {
  margin: var(--space-4) 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}
.rs-co-agree a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rs-co-agree a:hover { color: var(--link-hover); }
@media (min-width: 48em) {
  .rs-footer__inner {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }
}

/* -- Admin (the office): working tool — tokens and hairlines, motif
   restrained, native cursor (admin pages don't load launch-fx). -- */
.rs-admin-body { background: var(--color-bg); }

.rs-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.rs-login__card {
  width: 100%;
  max-width: 22rem;
  background: var(--color-surface);
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: var(--space-6);
}
.rs-login__title { margin-bottom: var(--space-5); font-size: var(--text-2xl); }
.rs-login__error {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--danger-surface);
  border: var(--border-1) solid var(--danger);
  border-radius: var(--radius-xs);
  color: var(--danger);
  font-size: var(--text-sm);
}
.rs-login__back { margin: var(--space-5) 0 0; font-size: var(--text-sm); }

.rs-admin-head {
  border-bottom: var(--border-1) solid var(--border-subtle);
  padding-block: var(--space-5);
  background: var(--color-bg-alt);
}
.rs-admin-head__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.rs-admin-head__title { margin: 0; font-size: clamp(var(--text-2xl), 2vw + 1rem, var(--text-3xl)); }
.rs-admin-head__actions { display: flex; align-items: center; gap: var(--space-5); }
.rs-admin-head__actions button.rs-cta--quiet {
  border: none;
  background: transparent;
  padding: 0;
}
.rs-admin-head__shop { font-size: var(--text-sm); color: var(--text-muted); }

.rs-admin { padding-block: var(--space-6) var(--space-10); }
.rs-admin__state { color: var(--charcoal-700); padding-block: var(--space-6); }
.rs-admin__empty { color: var(--charcoal-700); padding-block: var(--space-5); max-width: 52ch; }

/* metrics: one column on the phone, three on wider screens */
.rs-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
@media (min-width: 40em) {
  .rs-metrics { grid-template-columns: repeat(3, 1fr); }
}
.rs-metric {
  background: var(--color-surface);
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: var(--space-4) var(--space-5);
}
.rs-metric__label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--charcoal-700);
}
.rs-metric__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}
.rs-metric__value--small { font-size: var(--text-2xl); }
.rs-metric__hint { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.rs-metrics__lifetime {
  margin: 0 0 var(--space-7);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}

/* One filter band: the scope pills and the SHOWING select live inside
   the same hairline rails, so everything in it reads as "filtering".
   The select is styled as a pill to match its neighbours — deliberately
   NOT like the forest status changer inside the cards. */
.rs-admin-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
  padding-block: var(--space-4);
  border-top: var(--border-1) solid var(--border-subtle);
  border-bottom: var(--border-1) solid var(--border-subtle);
}
.rs-admin-filters__pills { margin-bottom: 0; border: none; padding-block: 0; }
.rs-admin-filters__status { display: inline-flex; align-items: center; gap: var(--space-3); }
.rs-admin-filters__status select {
  font-family: var(--font-mono);
  font-size: var(--chip-size);
  letter-spacing: var(--chip-tracking);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  min-height: 2.75rem; /* kitchen thumbs */
  background: transparent;
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
}

/* The card's STATUS changer is the control that DOES something —
   forest frame, strong text, square corners; unmistakably not a
   filter pill. */
.rs-order__status select {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  padding: var(--space-2) var(--space-3);
  min-height: 2.75rem; /* kitchen thumbs */
  background: var(--color-surface);
  border: var(--border-2) solid var(--brand-primary);
  border-radius: var(--radius-xs);
  color: var(--brand-primary);
}

/* orders: stacked cards; desktop tightens into row-like density */
.rs-orders { display: grid; gap: var(--space-4); }
.rs-order {
  background: var(--color-surface);
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: var(--space-4) var(--space-5);
}
.rs-order--done { opacity: 0.6; }
.rs-order__top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.rs-order__ref { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--charcoal-700); }
.rs-order__date { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-strong); }
.rs-order__date.is-overdue { color: var(--danger); }
.rs-order__who { margin: 0 0 var(--space-2); font-weight: var(--weight-semibold); color: var(--text-strong); }
.rs-order__items { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.rs-order__items li { padding-block: 2px; }
.rs-order__items em { font-style: normal; color: var(--charcoal-700); }
.rs-order__meta { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--charcoal-700); }
.rs-order__pay--paid { color: var(--success); }
.rs-order__pay--refunded { color: var(--accent-oxblood); }
.rs-order__pay--failed { color: var(--danger); }
.rs-order__addr { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--charcoal-700); }
.rs-order__notes {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--charcoal-700);
}
.rs-order__status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-top: var(--border-1) solid var(--border-subtle);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
}
.rs-order__status select { flex: 1; max-width: 14rem; }
.rs-order__saved { font-size: var(--text-sm); color: var(--success); }

@media (min-width: 64em) {
  .rs-order {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.4fr);
    gap: var(--space-2) var(--space-6);
    align-items: start;
  }
  .rs-order__top { grid-column: 1; margin: 0; flex-direction: column; gap: var(--space-1); }
  .rs-order__who { grid-column: 1; margin: 0; }
  .rs-order__items { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .rs-order__meta, .rs-order__addr, .rs-order__notes { grid-column: 1 / span 2; margin: 0; }
  .rs-order__status {
    grid-column: 3;
    grid-row: 1 / span 5;
    border-top: none;
    border-left: var(--border-1) solid var(--border-subtle);
    padding: 0 0 0 var(--space-5);
    margin: 0;
    align-self: stretch;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
}

/* -- Promo code (drawer + checkout step 2): deliberately quiet -- */
.rs-promo { margin-block: var(--space-3); font-size: var(--text-sm); }
.rs-promo__reveal {
  border: none;
  background: transparent;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}
.rs-promo__reveal:hover { color: var(--brand-primary); }
.rs-promo__form { display: flex; gap: var(--space-2); }
.rs-promo__input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-2) var(--space-3);
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--text-body);
}
.rs-promo__apply {
  border: var(--border-1) solid var(--border-subtle);
  background: transparent;
  border-radius: var(--radius-xs);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--chip-tracking);
  text-transform: uppercase;
  color: var(--charcoal-700);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.rs-promo__apply:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.rs-promo__msg { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--danger); }
.rs-promo__applied {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.rs-promo__code { font-family: var(--font-mono); font-weight: var(--weight-bold); color: var(--text-strong); }
.rs-promo__saving { color: var(--success); font-family: var(--font-mono); font-size: var(--text-sm); }
.rs-promo__remove {
  margin-left: auto;
  border: none;
  background: transparent;
  padding: 0;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--charcoal-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}
.rs-promo__remove:hover { color: var(--link-hover); }
.rs-drawer__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--space-2);
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}
.rs-promo--checkout { border-top: var(--border-1) solid var(--border-subtle); padding-top: var(--space-3); }

/* -- Admin: promo codes section -- */
.rs-admin-promos { margin-top: var(--space-10); }
.rs-admin-promos__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.rs-promo-form {
  max-width: 28rem;
  padding: var(--space-5);
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  margin-bottom: var(--space-6);
}
.rs-promo-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 26em) {
  .rs-promo-form__row { grid-template-columns: 1fr; }
}
.rs-promo-form select {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--text-body);
}
.rs-promo-form__msg { margin: var(--space-3) 0 0; color: var(--danger); font-size: var(--text-sm); }
.rs-promos { display: grid; gap: var(--space-3); }
.rs-promo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--color-surface);
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: var(--space-3) var(--space-4);
}
.rs-promo-card--off { opacity: 0.55; }
.rs-promo-card__code {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}
.rs-promo-card__state {
  margin-left: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--success);
}
.rs-promo-card--off .rs-promo-card__state { color: var(--text-muted); }
.rs-promo-card__desc { margin: 2px 0 0; font-size: var(--text-sm); color: var(--charcoal-700); }
.rs-promo-card__meta { margin: 2px 0 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--charcoal-700); }
.rs-promo-card__toggle {
  flex: 0 0 auto;
  min-height: 2.75rem; /* kitchen thumbs */
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--chip-tracking);
  text-transform: uppercase;
  background: transparent;
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--charcoal-700);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.rs-promo-card__toggle:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.rs-promo-card--used .rs-promo-card__code { text-decoration: line-through; text-decoration-color: var(--clay-500); }
.rs-promo-card__state--used { color: var(--accent-oxblood); }
.rs-admin-promos__actions { display: inline-flex; gap: var(--space-3); }
.rs-promo-form__note { font-size: var(--text-sm); color: var(--charcoal-700); }
.rs-batch-result {
  max-width: 28rem;
  margin-bottom: var(--space-6);
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
}
.rs-batch-result[hidden] { display: none; }
.rs-batch-result__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-1) solid var(--border-subtle);
}
.rs-batch-result__codes {
  margin: 0;
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.8;
  max-height: 20rem;
  overflow: auto;
  color: var(--text-strong);
}

/* ---------- Touch ergonomics ----------
   On coarse pointers every interactive control clears 44px (2.75rem)
   without changing the desktop look. Capability query, not width. */
@media (pointer: coarse) {
  .rs-pill,
  .rs-size,
  .rs-add, .rs-add-toggle, .rs-cta--sm,
  .rs-promo__apply, .rs-promo__reveal, .rs-promo__remove,
  .rs-line__remove,
  .rs-pdp__back,
  .rs-footer__nav a,
  .rs-nav__link {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }
  .rs-qty button { width: 2.75rem; height: 2.75rem; }
  .rs-qty__n { min-width: 2rem; }
  .rs-drawer__close { width: 2.75rem; height: 2.75rem; }
  .rs-nav__cart { width: 2.75rem; height: 2.75rem; }
  .rs-gallery__thumb { width: 3.5rem; height: 3.5rem; }
  .rs-checkout__close { width: 2.75rem; height: 2.75rem; }
  .rs-promo__input, .rs-lookup__form input,
  .rs-field input, .rs-field textarea, .rs-field select { min-height: 2.75rem; }
}

/* Corner seal on small screens: present, smaller, out of the way of
   anything tappable. */
@media (max-width: 40em) {
  :root {
    --seal-size: 72px;
    --seal-top: 10px;
    --seal-right: 12px;
  }
}

/* ---------- 6. Motion (reveals; launch-page effects live above) ---------- */
.js .rs-reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
.js .rs-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rs-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .rs-nutrition__panel,
  .rs-nutrition__inner,
  .rs-nutrition__icon { transition: none; }
  /* no animated theme fade, and no seal press motion, under reduced motion
     (js/theme.js also disables the auto-cycle entirely) */
  html.rs-theme-shift, html.rs-theme-shift * { transition: none !important; }
  .rs-seal.is-tapped { animation: none; }
  /* interactive depth: no positional movement or scaling — keep only the
     static cues (the lifted card's soft shadow, controls' colour changes) */
  .rs-product:hover, .rs-product:focus-within, .rs-product:active { transform: none !important; }
  .rs-cta--solid:active, .rs-pill:active, .rs-size:active,
  .rs-nutrition__toggle:active { transform: none !important; }
  .rs-cursor-hint { transition: none; }
  .rs-cursor-hint__label { transition: none !important; transform: none !important; }
}