@charset "UTF-8";
/* ==========================================================================
   KamalaTreats — design system

   Direction: "biscuit tin". Warm cream paper, real gold foil, and one
   saturated colour per collection — the palette the shop has always used
   (#D4AF37 gold, #FFEA70 honey, #F7E7CE biscuit) rather than a generic dark
   luxury scheme. Food photography is shot on light backgrounds, so a cream
   ground lets it sit in the page instead of being cut out of it.

   Four accents, each with one job: gold carries structure and calls to
   action, honey highlights, lacquer red carries emphasis and sale, and deep
   green means "in stock". Nothing is coloured for decoration alone.

   Two golds, and the distinction matters. Brand gold (--gild, #D4AF37) is a
   FILL: buttons, rules, borders, ribbons. It is 2.06:1 against cream, so it
   can never carry text. Text gold (--foil, #8A6608) is the readable one at
   5.17:1. Using the wrong one is the single easiest way to fail contrast
   here, so they are named for what they do rather than how bright they are.

   The organising device is the compartment grid: cells that share hairline
   edges rather than floating as separate cards, taken from the divided gift
   platters in the catalogue. The other device is the numeral — this catalogue
   speaks in counts (18 PCS, 4 in a pack, 2 in a set, 250g), so counts are set
   large in the serif and used as the variant interface.

   Dark mode is a genuine alternative rather than an inversion: the paper
   becomes lacquer, and the two golds swap roles because on a dark ground the
   bright gold is the readable one.

   No webfonts, no frameworks, no external requests of any kind.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  color-scheme: light dark;

  /* Paper — the tin, from the outside. */
  --ground:        #FFFDF5;
  --surface:       #FFFFFF;
  --surface-lift:  #FDF6E6;
  --panel:         #F7E7CE;   /* biscuit — filled compartments, quiet bands */
  --hairline:      #E4D2AE;
  --hairline-soft: #F1E6D2;

  /* Two golds. --gild fills, --foil is legible as text. See the note above. */
  --gild:      #D4AF37;
  --gild-ink:  #1A1008;   /* type that sits on --gild or --honey */
  --honey:     #FFEA70;
  --foil:      #8A6608;   /* 5.17:1 on cream */
  --foil-lit:  #6F5416;   /* hover / links, 6.4:1 */
  --foil-dim:  #C9A227;

  /* Ink on paper */
  --paper:      #1A1210;
  --paper-dim:  #55483C;
  --paper-mute: #7D7062;   /* 4.72:1 — the floor, do not lighten */

  /* Lacquer red — emphasis, sale, ribbons. 6.81:1 as text on cream. */
  --red:     #A8283A;
  --red-lit: #8E1F2F;

  /* Green does one job, "in stock", which is where it earns its keep. Alert
     red is hotter than the brand red so a genuine error is never mistaken for
     decoration (and never relies on colour alone). */
  --leaf:      #1A5D3A;
  --cranberry: #B03144;

  --ff-display: "Iowan Old Style", "Palatino Linotype", Palatino, Cambria, Georgia, "Times New Roman", serif;
  --ff-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: 0.8125rem;
  --step-0:  1.0625rem;
  --step-1:  1.1875rem;
  --step-2:  clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --step-4:  clamp(2.25rem, 1.5rem + 3.4vw, 3.5rem);
  --step-5:  clamp(2.75rem, 1.2rem + 6.4vw, 5.75rem);

  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  --measure: 34rem;
  --shell: 78rem;
  --radius: 2px;
  --radius-img: 3px;

  /* Warm-brown shadows, not black: on cream a neutral shadow reads as grime.
     Dark mode overrides these back to true black, where depth needs it. */
  --shadow:    rgb(90 62 20 / .22);
  --shadow-lg: rgb(90 62 20 / .30);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Dark mode. The ground becomes lacquer — red-black rather than neutral,
   because lacquerware is red under the gold — and the two golds swap roles:
   on a dark ground the bright brand gold is the one that reads as text. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:        #100A0A;
    --surface:       #191110;
    --surface-lift:  #241917;
    --panel:         #2A1D19;
    --hairline:      #3A2A22;
    --hairline-soft: #261B17;
    --gild:          #D4AF37;
    --gild-ink:      #1A1008;
    --honey:         #FFEA70;
    --foil:          #D4AF37;
    --foil-lit:      #F2DFA4;
    --foil-dim:      #8E7430;
    --paper:         #F7F1E6;
    --paper-dim:     #BEB4A6;
    --paper-mute:    #8E8478;
    --red:           #D34457;
    --red-lit:       #E4586B;
    --leaf:          #4E9E6A;
    --cranberry:     #E4586B;
    --shadow:        rgb(0 0 0 / .55);
    --shadow-lg:     rgb(0 0 0 / .70);
  }
}

:root[data-theme="light"] {
  --ground:        #FFFDF5;
  --surface:       #FFFFFF;
  --surface-lift:  #FDF6E6;
  --panel:         #F7E7CE;
  --hairline:      #E4D2AE;
  --hairline-soft: #F1E6D2;
  --gild:          #D4AF37;
  --gild-ink:      #1A1008;
  --honey:         #FFEA70;
  --foil:          #8A6608;
  --foil-lit:      #6F5416;
  --foil-dim:      #C9A227;
  --paper:         #1A1210;
  --paper-dim:     #55483C;
  --paper-mute:    #7D7062;
  --red:           #A8283A;
  --red-lit:       #8E1F2F;
  --leaf:          #1A5D3A;
  --cranberry:     #B03144;
}

:root[data-theme="dark"] {
  --ground:        #100A0A;
  --surface:       #191110;
  --surface-lift:  #241917;
  --panel:         #2A1D19;
  --hairline:      #3A2A22;
  --hairline-soft: #261B17;
  --gild:          #D4AF37;
  --gild-ink:      #1A1008;
  --honey:         #FFEA70;
  --foil:          #D4AF37;
  --foil-lit:      #F2DFA4;
  --foil-dim:      #8E7430;
  --paper:         #F7F1E6;
  --paper-dim:     #BEB4A6;
  --paper-mute:    #8E8478;
  --red:           #D34457;
  --red-lit:       #E4586B;
  --leaf:          #4E9E6A;
  --cranberry:     #E4586B;
  --shadow:        rgb(0 0 0 / .55);
  --shadow-lg:     rgb(0 0 0 / .70);
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ground);
  color: var(--paper);
  font-family: var(--ff-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--foil-lit);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--honey); color: var(--gild-ink); }

/* ----------------------------------------------------------- typography */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); letter-spacing: -0.01em; }
h4 { font-size: var(--step-1); }

p { text-wrap: pretty; }

.display {
  font-family: var(--ff-display);
  font-size: var(--step-5);
  line-height: 0.98;
  letter-spacing: -0.028em;
  font-weight: 600;
}

/* The eyebrow is a locator, not decoration: it always names the section or
   the collection the reader is currently inside. */
.eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--foil);
  font-weight: 600;
  display: block;
}

.lede { font-size: var(--step-1); color: var(--paper-dim); max-width: var(--measure); }
.muted { color: var(--paper-dim); }
.small { font-size: var(--step--1); }

/* Counts and prices. Old-style figures in the serif are the one piece of
   typographic personality available without loading a webfont, and this
   catalogue is full of counts worth setting properly. */
.numeral {
  font-family: var(--ff-display);
  font-variant-numeric: oldstyle-nums tabular-nums;
  letter-spacing: -0.01em;
}

.price { font-family: var(--ff-display); font-variant-numeric: tabular-nums; font-weight: 600; }
.price--was { color: var(--paper-mute); text-decoration: line-through; font-weight: 400; }

/* -------------------------------------------------------------- layout */
.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
@media (max-width: 40rem) { .shell { width: min(100% - 1.75rem, var(--shell)); } }

.section { padding-block: var(--sp-9); }
.section--tight { padding-block: var(--sp-7); }
.section + .section { padding-top: 0; }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.rule { height: 1px; background: var(--hairline); border: 0; }

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--hairline);
}
.section-head p { max-width: 46ch; color: var(--paper-dim); margin-top: var(--sp-2); }

/* --------------------------------------------------------------- links */
.link {
  color: var(--foil);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border-bottom: 1px solid color-mix(in srgb, var(--foil) 40%, transparent);
  padding-bottom: 2px;
  transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.link:hover { border-color: var(--foil); gap: 0.8em; }
.link::after { content: "\2192"; }

.prose a { color: var(--foil-lit); text-decoration-color: color-mix(in srgb, var(--foil) 50%, transparent); }
.prose a:hover { text-decoration-color: currentColor; }

/* -------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--foil);
  --btn-fg: var(--gild-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--btn-bg);
  transition: transform .18s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
  text-align: center;
}
.btn:hover { background: var(--foil-lit); border-color: var(--foil-lit); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--paper); border-color: var(--hairline); }
.btn--ghost:hover { background: var(--surface-lift); border-color: var(--foil); color: var(--paper); }

.btn--block { width: 100%; }
.btn--lg { padding: 1.15rem 2rem; font-size: 0.9375rem; }

/* --------------------------------------------------- the compartment grid
   Cells share hairline edges instead of floating apart, the way the dividers
   in a gift platter do. Negative margins on the container hide the outer
   rules so the block reads as one tray. */
.tray {
  display: grid;
  gap: 0;
  grid-auto-flow: dense;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.tray > * {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  min-width: 0;
}
.tray--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tray--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tray--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 62rem) { .tray--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 48rem) {
  .tray--4, .tray--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 30rem) {
  /* Product grids stay two-up on phones — cards are mostly image, and one-up
     turns a 50-product listing into an unscannable column. Text-led
     compartments do collapse to one, because their copy needs the width. */
  .tray--3, .tray--2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------- product card */
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  text-decoration: none;
  position: relative;
  transition: background-color .3s var(--ease);
  isolation: isolate;
}
.card:hover { background: var(--surface-lift); }

.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-lift);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.card:hover .card__media img { transform: scale(1.045); }

.card__empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--paper-mute);
  font-family: var(--ff-display);
  font-size: var(--step-2);
  padding: var(--sp-4);
  text-align: center;
}

.card__body { padding: var(--sp-4) var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.card__cat { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--foil-dim); }
.card__name { font-family: var(--ff-display); font-size: var(--step-1); line-height: 1.2; font-weight: 600; }
.card__foot { margin-top: auto; padding-top: var(--sp-3); display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.card__price { font-size: var(--step-1); }
.card__opts { font-size: var(--step--1); color: var(--paper-mute); }

/* A ribbon states a fact from the data — stocked out, or how many options
   exist — and never carries marketing language. */
.ribbon {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  z-index: 1;
  background: var(--red);
  color: var(--surface);
  border: 1px solid var(--red-lit);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius);
}
.price--was { color: var(--paper-mute); text-decoration: line-through; font-size: 0.8em; font-weight: 400; margin-inline-start: 0.45rem; }
.salepill[hidden] { display: none; }
.salepill { display: inline-block; margin-inline-start: 0.6rem; background: var(--red); color: #fff; font-size: 0.6875rem; font-weight: 700;
            letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 999px; vertical-align: middle; }
.promo-note { margin: var(--sp-3) 0 0; padding: 0.6rem 0.8rem; border: 1px dashed var(--gild); border-radius: var(--radius);
              background: var(--surface-lift); font-size: var(--step--1); color: var(--paper); }
.promo-note b { color: var(--foil); letter-spacing: 0.06em; }
.ribbon--out { background: var(--surface); color: var(--paper-dim); border-color: var(--hairline); }

/* -------------------------------------------------------------- header */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hairline-soft);
}
.masthead__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 4.5rem;
}
.wordmark {
  font-family: var(--ff-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  /* No gap: "Kamala" and <b>Treats</b> are separate flex items, so a gap here
     would split the name. KamalaTreats is one word. The logo gets a margin. */
  gap: 0;
  white-space: nowrap;
  color: var(--leaf);   /* "Kamala" in the brand emerald (#1A5D3A, as on the live site); "Treats" stays gold */
}
.wordmark:hover { color: var(--leaf); }
.wordmark img { width: 30px; height: 30px; object-fit: contain; margin-inline-end: 0.6rem; }
.wordmark b { color: var(--foil); font-weight: inherit; }

.mainnav { display: flex; align-items: center; gap: var(--sp-5); margin-inline-start: auto; }
.mainnav a, .mainnav .navtop {
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--paper-dim);
  padding: 0.4rem 0;
  transition: color .2s var(--ease);
  white-space: nowrap;
}
.mainnav a:hover, .mainnav a[aria-current="page"] { color: var(--foil); }

.navgroup { position: relative; }
.navtop { display: inline-flex; align-items: center; gap: 0.4rem; }
.navtop::after {
  content: ""; width: 5px; height: 5px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s var(--ease);
}
.navgroup[data-open="true"] .navtop::after { transform: rotate(225deg) translateY(-2px); }
.navgroup[data-open="true"] .navtop { color: var(--foil); }

.navmenu {
  position: absolute;
  top: calc(100% + 0.65rem);
  inset-inline-start: -1rem;
  min-width: 15rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: var(--sp-2);
  display: none;
  box-shadow: 0 18px 40px -22px var(--shadow);
}
.navgroup[data-open="true"] .navmenu { display: block; }
/* Invisible bridge over the gap between the label and the menu, so moving the
   mouse down to the menu never counts as leaving it. */
.navmenu::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: 0.9rem; }
.navmenu a { display: block; padding: 0.55rem 0.75rem; letter-spacing: 0.06em; }
.navmenu a:hover { background: var(--surface-lift); }

.masthead__tools { display: flex; align-items: center; gap: var(--sp-2); }

.tool {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--paper-dim);
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.tool:hover { color: var(--foil); border-color: var(--hairline); }
button.tool { background: none; cursor: pointer; font: inherit; }
.tool__count {
  font-variant-numeric: tabular-nums;
  background: var(--gild);
  color: var(--gild-ink);
  border-radius: 999px;
  min-width: 1.35rem;
  padding: 0 0.35rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.35rem;
}
.tool__count[data-count="0"] { background: var(--hairline); color: var(--paper-dim); }

.burger { display: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; color: var(--paper); }
.burger span, .burger span::before, .burger span::after {
  content: ""; display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), opacity .2s;
}
.burger span::before { transform: translateY(-6px); }
.burger span::after  { transform: translateY(4.5px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1.5px); }

@media (max-width: 60rem) {
  .burger { display: inline-flex; order: -1; margin-inline-start: -0.6rem; }
  .mainnav {
    /* Hangs off the sticky header, so the promo bar above it cannot misplace it. */
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ground);
    border-bottom: 1px solid var(--hairline);
    padding: var(--sp-4) 1.25rem var(--sp-6);
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    display: none;
  }
  .mainnav[data-open="true"] { display: flex; }
  .mainnav > * { border-bottom: 1px solid var(--hairline-soft); }
  .mainnav a, .mainnav .navtop { padding: 0.9rem 0; font-size: 0.9375rem; width: 100%; }
  .navmenu { position: static; border: 0; box-shadow: none; padding: 0 0 var(--sp-3) var(--sp-4); min-width: 0; }
  .navmenu::before { content: none; }   /* no hover bridge inside the phone menu */
  .wordmark { margin-inline: auto; }
  .masthead__tools { margin-inline-start: 0; }
}
/* Phones: four header controls plus the wordmark need the room. */
@media (max-width: 30rem) {
  .masthead__tools { gap: 0; margin-inline-start: var(--sp-3); }
  .tool { padding-inline: 0.5rem; }
  .masthead__tools, .tool svg { flex-shrink: 0; }
}
@media (max-width: 24rem) {
  .masthead .wordmark { font-size: 1.1rem; }
}

/* ---------------------------------------------------------------- hero
   The lid: one photograph, the wordmark, one sentence. Everything else waits
   below the fold. */
.hero {
  position: relative;
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--sp-8);
  padding-block: clamp(3rem, 7vw, 6.5rem);
}
.hero__copy { max-width: 32rem; }
.hero__copy .display { margin-block: var(--sp-4) var(--sp-5); }
.hero__copy .display em { font-style: normal; color: var(--red-lit); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
}
.hero__fact { min-width: 7rem; }
.hero__fact dt { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-mute); }
.hero__fact dd { font-family: var(--ff-display); font-size: var(--step-2); font-variant-numeric: oldstyle-nums; margin-top: 0.2rem; }

/* The single 3D moment on the site: the hero image sits on a perspective
   plane and lifts on load, like a lid coming off. Nothing else tilts. */
.hero__stage { perspective: 1400px; }
.hero__plate {
  position: relative;
  border: 1px solid var(--hairline);
  background: var(--surface);
  padding: var(--sp-3);
  transform: rotateY(-7deg) rotateX(3deg) translateZ(0);
  transform-style: preserve-3d;
  box-shadow: -24px 34px 68px -38px var(--shadow-lg);
  transition: transform .9s var(--ease);
  will-change: transform;
}
.hero__plate img { aspect-ratio: 5 / 6; object-fit: cover; width: 100%; border-radius: var(--radius-img); }
.hero__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--foil) 22%, transparent);
  transform: translateZ(26px);
  pointer-events: none;
}
.hero__stage:hover .hero__plate { transform: rotateY(-3deg) rotateX(1.5deg); }

@media (max-width: 62rem) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-7); }
  .hero__stage { order: -1; max-width: 26rem; }
  .hero__plate { transform: none; box-shadow: 0 24px 52px -36px var(--shadow-lg); }
}

/* ------------------------------------------------------- collection tray */
.compartment {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-6);
  background: var(--surface);
  text-decoration: none;
  min-height: 13.5rem;
  transition: background-color .3s var(--ease);
}
.compartment:hover { background: var(--surface-lift); }
.compartment h3 { font-size: var(--step-2); }
.compartment p { color: var(--paper-dim); font-size: var(--step--1); margin-top: var(--sp-2); }
.compartment__count { font-family: var(--ff-display); font-variant-numeric: oldstyle-nums; color: var(--foil); font-size: var(--step-1); }
.compartment--wide { grid-column: span 2; }
@media (max-width: 30rem) { .compartment--wide { grid-column: span 1; } }

/* -------------------------------------------------------- product detail */
/* minmax(0,…) rather than 1fr: a bare 1fr track has an auto minimum, so one
   long word or a wide table pushes the column past the viewport instead of
   shrinking. That is what made the cart scroll sideways on a phone. */
.pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; padding-block: var(--sp-7); }
.pdp--cart     { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.pdp--checkout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

/* Single column on tablets and phones. These modifiers used to be inline
   style attributes, which outrank a media query — so the cart and checkout
   stayed two-up on mobile and overflowed. */
@media (max-width: 62rem) {
  .pdp, .pdp--cart, .pdp--checkout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}

.gallery { position: sticky; top: 6rem; }
@media (max-width: 62rem) { .gallery { position: static; } }

.gallery__main {
  border: 1px solid var(--hairline);
  background: var(--surface);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__empty { display: grid; place-items: center; height: 100%; color: var(--paper-mute); text-align: center; padding: var(--sp-6); font-family: var(--ff-display); }

.gallery__thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.gallery__thumb {
  width: 4.5rem; aspect-ratio: 1; padding: 0;
  border: 1px solid var(--hairline);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .2s var(--ease);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-current="true"] { border-color: var(--foil); }
.gallery__thumb:hover { border-color: var(--foil-dim); }

.pdp__head { border-bottom: 1px solid var(--hairline); padding-bottom: var(--sp-5); }
.pdp__head h1 { margin-block: var(--sp-3) var(--sp-4); }
.pdp__price { font-size: var(--step-3); }
.pdp__priceline { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }

.stockline { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); color: var(--leaf); }
.stockline::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stockline--out { color: var(--cranberry); }

/* The signature: variants as a row of counts. The number is the thing being
   chosen, so it is set large in the serif and the label sits underneath. */
.counts { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--hairline); }
.count {
  flex: 1 1 auto;
  min-width: 7.5rem;
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  text-decoration: none;
  background: var(--surface);
  border-inline-end: 1px solid var(--hairline);
  transition: background-color .25s var(--ease), color .25s var(--ease);
  display: block;
}
.count:last-child { border-inline-end: 0; }
.count:hover { background: var(--surface-lift); }
.count[aria-current="true"] { background: var(--gild); color: var(--gild-ink); }
.count[aria-current="true"] .count__price { color: var(--gild-ink); opacity: .78; }
.count__n {
  display: block;
  font-family: var(--ff-display);
  font-variant-numeric: oldstyle-nums tabular-nums;
  font-size: var(--step-3);
  line-height: 1;
  font-weight: 600;
}
.count__unit { display: block; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 0.45rem; opacity: .85; }
.count__price { display: block; font-size: var(--step--1); margin-top: 0.35rem; color: var(--paper-mute); font-variant-numeric: tabular-nums; }

.buybox { border: 1px solid var(--hairline); background: var(--surface); padding: var(--sp-5); }
.buybox__row { display: flex; gap: var(--sp-3); align-items: stretch; }

.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--hairline); border-radius: var(--radius); }
.qty button { width: 2.75rem; color: var(--paper-dim); font-size: 1.1rem; transition: color .2s; }
.qty button:hover { color: var(--foil); }
.qty input {
  width: 3rem; text-align: center; background: none; border: 0;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.trust { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--hairline-soft); }
.trust li { display: flex; gap: 0.65rem; font-size: var(--step--1); color: var(--paper-dim); list-style: none; }
.trust li::before { content: "\2014"; color: var(--foil); flex: none; }

.spec { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.spec th, .spec td { text-align: start; padding: 0.7rem 0; border-bottom: 1px solid var(--hairline-soft); vertical-align: top; }
.spec th { color: var(--paper-mute); font-weight: 500; width: 40%; }

/* ------------------------------------------------------------- editorial */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { font-size: var(--step-2); margin-top: var(--sp-7); }
.prose h3 { font-size: var(--step-1); margin-top: var(--sp-5); }
.prose ul, .prose ol { padding-inline-start: 1.25rem; }
.prose li + li { margin-top: var(--sp-2); }
.prose strong { color: var(--paper); font-weight: 650; }
.prose p { color: var(--paper-dim); }

.article-head { padding-block: var(--sp-8) var(--sp-6); border-bottom: 1px solid var(--hairline); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--step--1); color: var(--paper-mute); margin-top: var(--sp-4); }

.entry { display: block; padding: var(--sp-6); background: var(--surface); text-decoration: none; transition: background-color .3s var(--ease); height: 100%; }
.entry:hover { background: var(--surface-lift); }
.entry h3 { margin-block: var(--sp-3) var(--sp-3); font-size: var(--step-2); }
.entry p { color: var(--paper-dim); font-size: var(--step--1); }
.entry__meta { margin-top: var(--sp-4); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-mute); }

/* --------------------------------------------------------------- accordion */
.qa { border-bottom: 1px solid var(--hairline); }
.qa summary {
  cursor: pointer;
  padding: var(--sp-4) 0;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  align-items: baseline;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--foil); font-size: 1.25rem; line-height: 1; flex: none; }
.qa[open] summary::after { content: "\2013"; }
.qa__body { padding-bottom: var(--sp-5); color: var(--paper-dim); max-width: 60ch; }

/* ------------------------------------------------------------ cart/forms */
.field { display: grid; gap: 0.45rem; }
.field > span { font-size: var(--step--1); color: var(--paper-dim); }
.field .req { color: var(--foil); }
.input {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease);
}
.input:focus { border-color: var(--foil); outline-offset: 1px; }
.input::placeholder { color: var(--paper-mute); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 40rem) { .grid-2 { grid-template-columns: 1fr; } }

.lineitem { display: grid; grid-template-columns: 6rem 1fr auto; gap: var(--sp-4); padding: var(--sp-5) 0; border-bottom: 1px solid var(--hairline); align-items: start; }
.lineitem__media { aspect-ratio: 1; background: var(--surface); border: 1px solid var(--hairline); overflow: hidden; }
.lineitem__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 40rem) { .lineitem { grid-template-columns: 4.5rem 1fr; } .lineitem__total { grid-column: 2; text-align: end; } }

.summary { border: 1px solid var(--hairline); background: var(--surface); padding: var(--sp-5); position: sticky; top: 6rem; }
@media (max-width: 62rem) { .summary { position: static; } }
.summary__row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; font-size: var(--step--1); color: var(--paper-dim); }
.summary__row--total { border-top: 1px solid var(--hairline); margin-top: var(--sp-3); padding-top: var(--sp-4); font-size: var(--step-1); color: var(--paper); }
.summary__row--total b { font-family: var(--ff-display); font-variant-numeric: tabular-nums; }

.progress { height: 3px; background: var(--hairline); overflow: hidden; margin-block: var(--sp-3) var(--sp-2); }
.progress i { display: block; height: 100%; background: var(--gild); transition: width .5s var(--ease); }

.notice { border: 1px solid var(--hairline); border-inline-start: 2px solid var(--foil); background: var(--surface); padding: var(--sp-4) var(--sp-5); font-size: var(--step--1); color: var(--paper-dim); }
.notice--bad { border-inline-start-color: var(--cranberry); }
.notice--good { border-inline-start-color: var(--leaf); }

/* ------------------------------------------------------------ empty state */
.empty { text-align: center; padding-block: var(--sp-9); max-width: 34rem; margin-inline: auto; }
.empty h1, .empty h2 { margin-bottom: var(--sp-4); }
.empty p { color: var(--paper-dim); margin-bottom: var(--sp-6); }

/* ------------------------------------------------------------ breadcrumbs */
.crumbs { padding-block: var(--sp-4); font-size: var(--step--1); color: var(--paper-mute); border-bottom: 1px solid var(--hairline-soft); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; }
.crumbs li:not(:last-child)::after { content: "/"; margin-inline-start: 0.5rem; color: var(--hairline); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--foil); }
.crumbs [aria-current="page"] { color: var(--paper-dim); }

/* ---------------------------------------------------------------- toolbar */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding-block: var(--sp-4); border-bottom: 1px solid var(--hairline); margin-bottom: var(--sp-6); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--paper-dim);
  transition: border-color .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.chip:hover { border-color: var(--foil); color: var(--foil); }
.chip[aria-current="true"] { background: var(--gild); border-color: var(--gild); color: var(--gild-ink); font-weight: 600; }

.pager { display: flex; gap: var(--sp-2); justify-content: center; align-items: center; margin-top: var(--sp-7); flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 2.75rem; padding: 0.6rem 0.75rem; text-align: center;
  border: 1px solid var(--hairline); text-decoration: none; font-variant-numeric: tabular-nums;
  font-size: var(--step--1); border-radius: var(--radius);
}
.pager a:hover { border-color: var(--foil); color: var(--foil); }
.pager [aria-current="page"] { background: var(--gild); border-color: var(--gild); color: var(--gild-ink); font-weight: 700; }
.pager .is-gap { border: 0; }

/* --------------------------------------------------------------- footer */
.sitefoot { margin-top: auto; border-top: 1px solid var(--hairline); background: var(--surface); }
.sitefoot__news { padding-block: var(--sp-7) var(--sp-6); border-bottom: 1px solid var(--hairline); }
.sitefoot__news h2 { margin: 0 0 var(--sp-2); }
.sitefoot__news > p { margin: 0 0 var(--sp-4); max-width: 60ch; }
.sitefoot__newsrow { display: flex; flex-wrap: wrap; gap: var(--sp-3); max-width: 34rem; }
.sitefoot__newsrow .input { flex: 1 1 14rem; min-width: 0; }
@media (max-width: 34rem) { .sitefoot__newsrow .btn { flex: 1 1 100%; justify-content: center; } }
.sitefoot__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--sp-7); padding-block: var(--sp-8) var(--sp-7); }
@media (max-width: 62rem) { .sitefoot__top { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
@media (max-width: 34rem) { .sitefoot__top { grid-template-columns: 1fr; } }

.sitefoot h2 { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--foil); font-family: var(--ff-body); font-weight: 700; margin-bottom: var(--sp-4); }
.sitefoot ul { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.sitefoot a { text-decoration: none; color: var(--paper-dim); font-size: var(--step--1); transition: color .2s var(--ease); }
.sitefoot a:hover { color: var(--foil); }
.sitefoot__legal { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding-block: var(--sp-5); border-top: 1px solid var(--hairline); font-size: var(--step--1); color: var(--paper-mute); }
.sitefoot__legal ul { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* --------------------------------------------------------------- utility */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; inset-block-start: -100%; inset-inline-start: var(--sp-4); z-index: 100;
  background: var(--gild); color: var(--gild-ink); padding: 0.75rem 1.25rem; font-weight: 700; text-decoration: none;
}
.skip:focus { inset-block-start: var(--sp-3); }

.flow-2 { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }

/* Toast for cart feedback. Announced politely rather than stealing focus. */
.toast {
  position: fixed;
  inset-block-end: var(--sp-5);
  inset-inline-end: var(--sp-5);
  z-index: 80;
  background: var(--surface-lift);
  border: 1px solid var(--foil-dim);
  border-inline-start: 2px solid var(--foil);
  padding: var(--sp-4) var(--sp-5);
  max-width: 22rem;
  box-shadow: 0 20px 44px -24px var(--shadow-lg);
  transform: translateY(1rem);
  opacity: 0;
  pointer-events: none;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.toast[data-show="true"] { transform: translateY(0); opacity: 1; pointer-events: auto; }
.toast strong { display: block; font-family: var(--ff-display); font-size: var(--step-1); }
.toast a { color: var(--foil); font-size: var(--step--1); }
@media (max-width: 34rem) { .toast { inset-inline: var(--sp-4); max-width: none; } }

/* Reveal on scroll now lives in the Motion block at the end of this file and
   is driven by assets/js/motion-kit.js. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero__plate, .hero__stage:hover .hero__plate { transform: none; }
  .card:hover .card__media img { transform: none; }
}

/* ------------------------------------------------------ mobile buy bar
   On phones the add-to-cart control scrolls away long before the shopper has
   finished reading, so it comes back as a fixed bar once the real buybox
   leaves the viewport. The bar has no logic of its own — its button submits
   the same form, so the selected variant and quantity are always in step. */
.buybar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 60;
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--ground) 94%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  border-top: 1px solid var(--hairline);
  transform: translateY(110%);
  transition: transform .3s var(--ease);
}
.buybar__info { flex: 1; min-width: 0; }
.buybar__name {
  display: block;
  font-family: var(--ff-display);
  font-size: 1rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.buybar__price { display: block; font-size: var(--step--1); color: var(--foil); font-variant-numeric: tabular-nums; }
.buybar .btn { flex: none; padding-inline: 1.25rem; }

@media (max-width: 62rem) {
  .page-product .buybar { display: flex; }
  .page-product .buybar[data-show="true"] { transform: none; }
  /* Keep the bar from covering the last of the footer links. */
  .page-product .sitefoot__legal { padding-bottom: 5.5rem; }
  .page-product .toast { inset-block-end: 5.5rem; }
}

/* ---------------------------------------------------------- phone tuning */
@media (max-width: 30rem) {
  .card__body { padding: var(--sp-3) var(--sp-3) var(--sp-4); }
  .card__name { font-size: 1rem; }
  .card__price { font-size: 1rem; }
  .card__opts { display: none; }
  .card__foot { flex-direction: column; align-items: start; gap: 0.15rem; }

  .compartment { padding: var(--sp-5); min-height: auto; gap: var(--sp-4); }
  .section { padding-block: var(--sp-7); }
  .hero__facts { gap: var(--sp-5); }

  /* Options wrap to a grid rather than shrinking below a readable width. */
  .counts { display: grid; grid-template-columns: 1fr 1fr; }
  .count { min-width: 0; border-block-end: 1px solid var(--hairline); }
  .count:nth-child(2n) { border-inline-end: 0; }

  .buybox { padding: var(--sp-4); }
  .buybox__row { flex-wrap: wrap; }
  .buybox__row .btn { flex: 1 1 100%; }

  .gallery__thumb { width: 3.75rem; }
  .toolbar { gap: var(--sp-3); }
  .pager a, .pager span { min-width: 2.5rem; padding: 0.55rem 0.5rem; }
}

/* Comfortable tap targets on anything touch-driven. */
@media (pointer: coarse) {
  .tool { min-height: 44px; min-width: 44px; justify-content: center; }
  .mainnav a, .mainnav .navtop { min-height: 44px; align-items: center; display: flex; }
  .qty button { min-width: 44px; }
  .gallery__thumb { min-width: 44px; min-height: 44px; }
  .chip { padding: 0.6rem 1rem; }
  .qa summary { padding-block: var(--sp-4); min-height: 44px; }
}

@media print {
  .masthead, .sitefoot, .toast, .crumbs, .buybar { display: none; }
  body { background: #fff; color: #000; }
}

/* ====================================================== collection accents
   Each collection carries a colour from the original site's palette (see
   COLLECTIONS in app/lib/brand.php), passed in as --accent. It is used only
   where it identifies something — the category label on a card, the count on
   a tile, the edge that lights up on hover — never as background decoration,
   so the page gains colour without losing the lacquer ground. */

.compartment { position: relative; }
.compartment::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--accent, var(--gild));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.compartment:hover::before,
.compartment:focus-visible::before { transform: scaleX(1); }
.compartment__count { color: var(--accent, var(--foil)); }

.card__cat { color: var(--accent, var(--foil-dim)); }
.card::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--accent, var(--gild));
  opacity: 0;
  transition: opacity .3s var(--ease);
  z-index: 2;
}
.card:hover::after { opacity: 1; }

/* Collection pages take their accent from the collection being viewed. */
.page-listing .eyebrow { color: var(--accent, var(--foil)); }

/* ============================================================ louder colour
   The accents now carry weight rather than hinting. Collection tiles are
   filled with their own colour, every card wears its collection's stripe,
   and the gold CTA gets the gradient the original site used.

   Tints are mixed *into the surface* rather than laid over it, so the fill
   stays light enough for --paper ink to keep its contrast — the colour gets
   loud without the type getting hard to read. The percentages are high
   because a tint on white reads far weaker than the same tint in near-black:
   26% looked bold on the old lacquer ground and washed out on cream. */

.compartment {
  background:
    linear-gradient(155deg,
      color-mix(in srgb, var(--accent, var(--gild)) 42%, var(--surface)) 0%,
      color-mix(in srgb, var(--accent, var(--gild)) 15%, var(--surface)) 62%,
      var(--surface) 100%);
  border-color: color-mix(in srgb, var(--accent, var(--gild)) 35%, var(--hairline));
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.compartment:hover {
  background:
    linear-gradient(155deg,
      color-mix(in srgb, var(--accent, var(--gild)) 62%, var(--surface)) 0%,
      color-mix(in srgb, var(--accent, var(--gild)) 26%, var(--surface)) 70%,
      var(--surface) 100%);
}
/* The top edge is always lit now, so a tile reads as "its colour" at a glance. */
.compartment::before { transform: scaleX(1); height: 4px; }
.compartment h3 { color: var(--paper); }
.compartment__count {
  color: color-mix(in srgb, var(--accent, var(--foil)) 45%, var(--paper));
  font-weight: 600;
}

/* Every product card wears its collection's colour, not only on hover. */
.card::after { opacity: 1; height: 4px; }
.card__cat {
  color: color-mix(in srgb, var(--accent, var(--foil)) 45%, var(--paper));
  font-weight: 700;
}
.card:hover { background: color-mix(in srgb, var(--accent, var(--gild)) 12%, var(--surface-lift)); }

/* The gold gradient from the original site. */
.btn {
  background: linear-gradient(135deg, var(--gild) 0%, var(--honey) 100%);
  border-color: var(--gild);
}
.btn:hover { background: linear-gradient(135deg, var(--honey) 0%, var(--gild) 100%); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--surface-lift); }

/* Section heads get a coloured rule instead of a grey hairline. */
.section-head {
  border-bottom: 0;
  position: relative;
  padding-bottom: var(--sp-4);
}
.section-head::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent, var(--gild)), transparent 55%);
}

/* A warm wash behind the hero so the fold is not flat black. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(75% 95% at 10% 0%, color-mix(in srgb, var(--honey) 55%, transparent), transparent 62%),
    radial-gradient(65% 85% at 96% 100%, color-mix(in srgb, var(--red) 14%, transparent), transparent 68%);
}
.hero__inner { position: relative; z-index: 1; }

.eyebrow { color: color-mix(in srgb, var(--accent, var(--foil)) 45%, var(--foil-lit)); }

/* Three houses: give each its own colour too, so that row is not the one
   grey block on an otherwise colourful page. */
.tray--3 > .compartment:nth-child(3n+1) { --accent: #E08A3C; }
.tray--3 > .compartment:nth-child(3n+2) { --accent: #E4739B; }
.tray--3 > .compartment:nth-child(3n+3) { --accent: #4E93B8; }

.entry { border-block-start: 3px solid var(--accent, var(--foil)); }
.tray--3 > .entry:nth-child(3n+1) { --accent: #D4AF37; }
.tray--3 > .entry:nth-child(3n+2) { --accent: #9A6FB0; }
.tray--3 > .entry:nth-child(3n+3) { --accent: #4E9E6A; }

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

/* Checkout's delivery-method tiles are compartments too, and they hold form
   controls — keep those plain rather than tinted. */
.page-utility .compartment { background: var(--surface); border-color: var(--hairline); }
.page-utility .compartment::before { display: none; }

/* -------------------------------------------------------------- typeahead */
.typeahead-wrap { position: relative; flex: 1 1 22rem; max-width: 26rem; }
.typeahead-wrap .input { width: 100%; max-width: none !important; }

.typeahead {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 0.4rem);
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 22px 48px -26px var(--shadow-lg);
  max-height: 26rem;
  overflow-y: auto;
}

.typeahead__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-soft);
  border-inline-start: 3px solid transparent;
}
.typeahead__item:last-of-type { border-bottom: 0; }
.typeahead__item:hover,
.typeahead__item[aria-selected="true"] {
  background: var(--surface-lift);
  border-inline-start-color: var(--accent, var(--foil));
}

.typeahead__item img,
.typeahead__noimg {
  width: 2.75rem; height: 2.75rem; flex: none;
  object-fit: cover; border-radius: 2px;
  background: var(--surface-lift); border: 1px solid var(--hairline);
}

.typeahead__text { flex: 1; min-width: 0; }
.typeahead__name {
  display: block; font-family: var(--ff-display); font-size: 1rem; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.typeahead__meta { display: block; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent, var(--paper-mute)); }
.typeahead__price { font-family: var(--ff-display); font-variant-numeric: tabular-nums; font-size: 0.875rem; flex: none; }

.typeahead__all, .typeahead__empty {
  display: block; padding: 0.7rem 0.75rem; text-align: center;
  font-size: var(--step--1); color: var(--foil); text-decoration: none;
  border-top: 1px solid var(--hairline);
}
.typeahead__empty { color: var(--paper-mute); border-top: 0; }

/* ==========================================================================
   Motion
   --------------------------------------------------------------------------
   The only job of this block is to hold revealable elements back until the
   motion kit brings them in. It is scoped to html.anim, which the inline head
   script sets ONLY when the browser can run the kit and the visitor has not
   asked for reduced motion — and which it removes again if the module never
   loads. So the failure mode is always "visible", never "blank".

   :not([data-revealed]) matters: the kit clears its inline styles when an
   animation finishes, and without this the rule would snap the element back
   to invisible.
   ========================================================================== */

.anim [data-reveal]:not([data-revealed]),
.anim [data-reveal-group] > *:not([data-revealed]) {
  opacity: 0;
}

/* Hint the compositor on the few things that animate on scroll, and take the
   hint back once they have arrived. */
.anim [data-parallax],
.anim [data-reveal]:not([data-revealed]) {
  will-change: transform, opacity;
}
.anim [data-revealed] {
  will-change: auto;
}

[data-lift],
[data-press] {
  /* Motion writes transform inline; keep the browser from fighting it with a
     CSS transition on the same property. */
  transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

[data-scroll-progress] {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--gild), var(--honey), var(--red));
  z-index: 60;
}

/* Belt and braces. If anything above ever escapes its scope, this wins. */
@media (prefers-reduced-motion: reduce) {
  .anim [data-reveal],
  .anim [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-scroll-progress] { display: none; }
}


/* ---------------------------------------------------------------------------
 * v4 — gift bundles and the free-delivery nudge
 *
 * Only tokens are used below, so both the light and dark palettes follow
 * automatically. The one rule worth stating: --gild (#D4AF37) is 2.06:1 on
 * cream and may only ever be a fill; --foil (#8A6608) is 5.17:1 and is the
 * only gold allowed to carry text.
 * ------------------------------------------------------------------------- */

/* A bundle card has to hold two prices, so its foot stacks instead of
   spreading — the struck-through value belongs under the price it argues
   against, not across the card from it. */
.card--bundle .card__foot { flex-direction: column; align-items: flex-start; gap: 0.2rem; }

.card__was { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--step--1); }
.card__was s { color: var(--paper-mute); text-decoration-thickness: 1px; }

.save {
  color: var(--foil);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ribbon--bundle { background: var(--gild); color: var(--gild-ink); border-color: var(--gild); }

.price--lg { font-size: var(--step-3); display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }

/* ------------------------------------------------------------- box contents */
.bundle-contents {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--sp-4);
}
.bundle-contents__link {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3);
  border: 1px solid var(--hairline);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, background .2s ease;
}
.bundle-contents__link:hover { border-color: var(--gild); background: var(--surface-lift); }
.bundle-contents__link img { width: 3.5rem; height: 4.375rem; object-fit: cover; flex: none; }
.bundle-contents__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.bundle-contents__name { font-weight: 600; line-height: 1.25; }
.bundle-contents__price { font-size: var(--step--1); color: var(--paper-dim); }
.bundle-contents__total { margin-top: var(--sp-5); }

/* --------------------------------------------------------- delivery nudge */
/* Sits in the cart's main column, not the summary aside: three suggestions
   need width, and the aside is a sticky 1-column panel. */
.gapnudge {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--surface-lift);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--gild);
}
.gapnudge__head { margin-bottom: var(--sp-4); }
.gapnudge__title {
  font-family: var(--ff-display);
  font-size: var(--step-1);
  line-height: 1.25;
  margin: 0 0 0.25rem;
}
.gapnudge__title .numeral { color: var(--foil); }

.gapnudge__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-3);
}
.gapitem {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, transform .2s ease;
}
.gapitem:hover { border-color: var(--gild); transform: translateY(-2px); }
.gapitem img { width: 3rem; height: 3.75rem; object-fit: cover; flex: none; }
.gapitem__text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.gapitem__name {
  font-size: var(--step--1);
  line-height: 1.25;
  /* Two lines maximum: a long product name must not make one suggestion
     taller than the two beside it. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gapitem__price { font-size: var(--step--1); color: var(--foil); }

@media (max-width: 40rem) {
  .gapnudge { padding: var(--sp-4); }
  .bundle-contents { grid-template-columns: 1fr; }
}


/* A callout block for the occasion pages' enquiry / next-step CTA. Uses the
   page's own --accent on the left edge so a Deepavali page and a Lunar New
   Year page are visibly different pages, not one template twice. */
.panel {
  padding: var(--sp-6);
  background: var(--surface-lift);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--accent, var(--gild));
}
.panel h2 { margin: 0 0 var(--sp-3); }
.panel p { margin: 0; max-width: 46rem; color: var(--paper-dim); }

@media (max-width: 40rem) {
  .panel { padding: var(--sp-5); }
}

/* ------------------------------------------------------------ promo bar */
.promobar { background: var(--red); color: #fff; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; overflow: hidden; }
.promobar__track { list-style: none; margin: 0; padding: 0.55rem 1rem; display: flex; justify-content: center; gap: 3rem; white-space: nowrap; }
.promobar a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.promobar--scroll .promobar__track { justify-content: flex-start; width: max-content; padding-inline: 0;
  animation: promobar-scroll var(--dur, 30s) linear infinite; }
.promobar--scroll .promobar__track { gap: 0; }
.promobar--scroll .promobar__track li { padding-inline-end: 3rem; } /* spacing inside each item keeps both halves exactly equal */
.promobar--scroll .promobar__track li::after { content: "✦"; margin-inline-start: 3rem; opacity: 0.6; }
.promobar--scroll:hover .promobar__track, .promobar--scroll:focus-within .promobar__track { animation-play-state: paused; }
@keyframes promobar-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .promobar--scroll .promobar__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; white-space: normal; gap: 0.4rem 2rem; padding: 0.55rem 1rem; }
  .promobar--scroll .promobar__track li[aria-hidden] { display: none; }
  .promobar--scroll .promobar__track li::after { content: none; }
}

/* -------------------------------------------------------------- reviews */
.stars { color: var(--gild); letter-spacing: 0.08em; }
.ratingline { display: inline-flex; gap: 0.5rem; align-items: center; margin: 0.25rem 0 0.5rem; font-size: var(--step--1); color: var(--paper-dim); text-decoration: none; }
.card__rating { display: block; font-size: 0.75rem; color: var(--paper-mute); margin-top: 0.15rem; }
.reviews { display: grid; gap: var(--sp-6); max-width: 52rem; }
.reviews__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.review { padding: var(--sp-4) 0; border-bottom: 1px solid var(--hairline-soft); }
.review__head { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; align-items: center; }
.review__tag { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leaf); }
.review__via, .review__date { font-size: var(--step--1); color: var(--paper-mute); }
.review__body { margin: 0.5rem 0 0.25rem; }
.review-form summary { list-style: none; cursor: pointer; display: inline-flex; }
.review-form summary::-webkit-details-marker { display: none; }
.starpick { border: 0; padding: 0; margin: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.15rem; }
.starpick legend { margin-bottom: 0.35rem; }
.starpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.starpick label { font-size: 2rem; line-height: 1; color: var(--hairline); cursor: pointer; padding: 0 0.1rem; }
.starpick input:checked ~ label, .starpick label:hover, .starpick label:hover ~ label { color: var(--gild); }
.starpick input:focus-visible + label { outline: 2px solid var(--foil); outline-offset: 2px; }
.quote { margin: 0; padding: var(--sp-5); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); display: grid; gap: var(--sp-3); }
.quote blockquote { margin: 0; font-family: var(--ff-display); font-size: var(--step-1); line-height: 1.35; }
.reviews-page { display: grid; gap: var(--sp-7); }
@media (min-width: 60rem) { .reviews-page { grid-template-columns: 20rem minmax(0, 1fr); align-items: start; } .reviews-page__side { position: sticky; top: 6rem; } }
.reviews-page__side { display: grid; gap: var(--sp-5); }
.starbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: var(--step--1); }
.starbars li { display: grid; grid-template-columns: 2.5rem 1fr 2rem; gap: 0.6rem; align-items: center; }
.starbars__bar { height: 0.5rem; background: var(--hairline-soft); border-radius: 999px; overflow: hidden; }
.starbars__bar i { display: block; height: 100%; background: var(--gild); }

/* ---------------------------------------------------------------- about */
.about-split { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 52rem) { .about-split { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } .about-split--flip img { order: -1; } }
.about-split img { width: 100%; height: auto; border-radius: var(--radius-img, 12px); border: 1px solid var(--hairline); }
.about-promise { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-5); }
.about-sign { font-style: italic; font-family: var(--ff-display); font-size: var(--step-1); color: var(--foil); }
.about-sign strong { font-style: normal; color: var(--paper); }

/* Emoji buttons under the review boxes (assets/js/app.js) */
.emoji-bar { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.emoji-bar__btn {
  font-size: 1.2rem; line-height: 1; min-width: 2.4rem; min-height: 2.4rem; padding: .3rem;
  border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface, transparent); cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.emoji-bar__btn:hover { border-color: var(--gild); transform: translateY(-1px); }
.emoji-bar__btn:focus-visible { outline: 2px solid var(--foil); outline-offset: 2px; }