/* ==========================================================================
   GIFTY by The Order Shop — Ivory & Black theme

   Palette: warm ivory page, jet black as brand, champagne gold as the
   single accent. The combination reads as premium without being cold.
   Black buttons on ivory ground never look like a sale — they look like
   a decision.

   All CSS. No framework — the audience is on Zimbabwean mobile data.
   ========================================================================== */

:root {
  --brand: #111111;
  --brand-dark: #000000;
  --brand-darker: #222222;

  --ink: #111111;
  --slate: #55524a;
  --muted: #99958a;

  --bg: #faf8f4;
  --bg-tint: #f4f0e8;
  --card: #ffffff;
  --card-img: #f7f5f1;

  /* Champagne gold — the only colour on the page. A muted, warm gold reads
     as luxury; the bright orange-gold reads as a clearance sticker. */
  --gold: #c9a84c;
  --gold-soft: #faf6ee;
  --gold-line: #e4d49a;
  --gold-ink: #7a5c10;

  --green: #059669;
  --green-soft: #ecfdf5;
  --amber-soft: #fff7ed;
  --amber-ink: #9a5b12;
  --red-soft: #fdeceb;

  /* Warm ivory tints for soft backgrounds and borders */
  --brand-soft: #f0eeeb;
  --line: #e8e0d4;
  --line-strong: #cdc4b4;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(26, 10, 12, .04), 0 1px 3px rgba(26, 10, 12, .04);
  --shadow-md: 0 4px 6px -1px rgba(26, 10, 12, .06), 0 2px 4px -1px rgba(26, 10, 12, .04);
  --shadow-lg: 0 10px 30px -8px rgba(26, 10, 12, .18), 0 4px 10px -4px rgba(26, 10, 12, .08);

  /* Fraunces is a soft serif with a wonk axis. Set at SOFT 45 / WONK 1 the
     letterforms lean and swell slightly, so headings read like something a
     person drew rather than something a system rendered -- which is the whole
     point for a gift shop. Plus Jakarta Sans underneath is warmer than Inter at
     the small sizes most of this site is actually read at. */
  --font-d: "Fraunces", Georgia, "Times New Roman", serif;
  --font-b: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

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

@supports (color: color-mix(in srgb, red 10%, transparent)) {
  :root {
    --brand-soft: color-mix(in srgb, var(--gold) 10%, #faf8f4);
    --line: color-mix(in srgb, var(--gold) 14%, #ede8df);
    --line-strong: color-mix(in srgb, var(--gold) 24%, #d8d0c4);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-d); font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; margin: 0;
  /* SOFT rounds the terminals, WONK lets the italic-ish forms lean. Both are
     what stop this reading as another serif-on-a-shop. */
  font-variation-settings: "SOFT" 45, "WONK" 1;
}

/* Anything set in the display face gets the same treatment, or prices and
   headings would be drawn from two different-looking fonts. */
.price, .stat strong, .section-title, .logo-mark, .pay-amount, .lf-value,
.hero h1, .occasion-tile h3 {
  font-variation-settings: "SOFT" 45, "WONK" 1;
}

a { color: var(--brand-dark); text-underline-offset: 3px; }
img { max-width: 100%; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* --------------------------------------------------------------------------
   Announcement bar + header
   -------------------------------------------------------------------------- */

/* A thin ribbon of brand colour instead of a heavy dark announcement bar —
   the gift shop should open lighter than the appliance business does. */
.ribbon-top {
  height: 4px;
  background: linear-gradient(90deg, #111 0%, var(--gold) 50%, #111 100%);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 248, 244, .95);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease);
}
.site-header.scrolled { box-shadow: var(--shadow-md); }

.head-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 13px;
  padding-bottom: 11px;
}

/* Logo lockup: mark + stacked wordmark and endorsement line */
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.logo-mark { display: block; width: 40px; height: 40px; flex: none; }

.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-text strong {
  font-family: var(--font-d);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
.logo-text small {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}
.logo:hover .logo-text strong { color: var(--gold-ink); }

.head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.ship-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  color: var(--gold-ink);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.ship-chip svg { width: 15px; height: 15px; stroke: currentColor; fill: none; flex: none; }

.head-link {
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--slate);
  font-size: .91rem;
  font-weight: 500;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.head-link:hover { color: var(--brand-dark); background: var(--brand-soft); }

.nav-cta {
  padding: 9px 20px;
  border-radius: 999px;
  text-decoration: none;
  background: var(--brand);
  color: #fff;
  font-size: .91rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(17, 17, 17, .18);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.nav-cta:hover { background: var(--gold-ink); color: #fff; transform: translateY(-1px); }

/* Category bar — its own row, so the top line stays about the brand */
.cat-bar {
  border-top: 1px solid var(--line); background: rgba(244, 240, 232, .5);
  position: relative;
}
.cat-bar .wrap {
  display: flex;
  gap: 2px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  padding-top: 0;
  padding-bottom: 0;
}
.cat-bar .wrap::-webkit-scrollbar { display: none; }

/* Arrow controls. Hidden until the script decides the bar actually overflows,
   so a shop with six categories never shows a control that does nothing. */
.cat-nav {
  position: absolute; top: 0; bottom: 0; width: 46px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; padding: 0;
  color: var(--slate);
  transition: color .15s var(--ease), opacity .15s var(--ease);
}
.cat-nav[hidden] { display: none; }
.cat-nav svg { width: 19px; height: 19px; stroke: currentColor; fill: none; }
.cat-nav:hover { color: var(--ink); }
.cat-nav:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
/* The fade tells you there is more, the arrow tells you how to get it. */
.cat-nav-prev {
  left: 0;
  background: linear-gradient(90deg, var(--bg-tint) 55%, rgba(244, 240, 232, 0));
}
.cat-nav-next {
  right: 0;
  background: linear-gradient(270deg, var(--bg-tint) 55%, rgba(244, 240, 232, 0));
}

/* A pointer can drag the strip directly, the way a thumb does on a phone. */
.cat-bar .wrap.dragging { cursor: grabbing; }
.cat-bar .wrap.dragging a { pointer-events: none; }

.cat-bar a {
  position: relative;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--slate);
  font-size: .89rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.cat-bar a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 0;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s var(--ease);
}
.cat-bar a:hover { color: var(--brand-dark); }
.cat-bar a:hover::after, .cat-bar a.on::after { transform: scaleX(1); }
.cat-bar a.on { color: var(--brand-dark); font-weight: 600; }

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

.hero { position: relative; padding: 64px 0 0; overflow: hidden; text-align: center; }

/* Two soft washes rather than one, so the centred composition sits in light
   instead of against a flat panel. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hero::before {
  width: 560px; height: 560px;
  top: -300px; left: 50%;
  translate: -50% 0;
  background: radial-gradient(circle, rgba(201, 168, 76, .10), transparent 68%);
}
.hero::after {
  width: 460px; height: 460px;
  bottom: 40px; right: -160px;
  background: radial-gradient(circle, rgba(201, 168, 76, .12), transparent 70%);
}

.hero-copy { position: relative; z-index: 1; max-width: 760px; }

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--slate);
  border-radius: 999px;
  padding: 7px 15px 7px 8px;
  font-size: .82rem;
  font-weight: 500;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.eyebrow-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .16);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(5, 150, 105, .16); }
  50%      { box-shadow: 0 0 0 7px rgba(5, 150, 105, .04); }
}

.eyebrow-pill { margin-left: auto; margin-right: auto; }

.hero h1 { font-size: clamp(2.3rem, 5.6vw, 4.05rem); margin-bottom: 20px; }
.hero h1 em {
  font-style: italic;
  color: var(--gold-ink);
  position: relative;
  white-space: nowrap;
}
/* A hand-drawn-feeling underline under the emphasised word */
.hero h1 em::after {
  content: "";
  position: absolute;
  left: 2%; right: 2%; bottom: .04em;
  height: .09em;
  border-radius: 999px;
  background: var(--gold);
  opacity: .55;
}

.hero-lede {
  font-size: 1.12rem;
  color: var(--slate);
  margin: 0 auto 30px;
  max-width: 540px;
}

.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero-note { margin: 20px 0 0; font-size: .86rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   Gift rail — a fanned hand of real products under the headline
   -------------------------------------------------------------------------- */

.gift-rail {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 18px;
  margin-top: 52px;
  padding: 0 22px 64px;
}

.rail-card {
  position: relative;
  display: block;
  width: 186px;
  flex: none;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.rail-card img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; background: var(--card-img); }

.rail-price {
  position: absolute;
  left: 10px; bottom: 10px;
  background: rgba(255, 255, 255, .95);
  border-radius: 999px;
  padding: 4px 11px;
  font-family: var(--font-d);
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* The fan: outer cards drop and tilt away, the centre one lifts forward. */
.rail-card:nth-child(1) { transform: translateY(26px) rotate(-7deg) scale(.86); z-index: 1; }
.rail-card:nth-child(2) { transform: translateY(10px) rotate(-3.5deg) scale(.94); z-index: 2; }
.rail-card:nth-child(3) { transform: translateY(-8px) scale(1.04); z-index: 3; }
.rail-card:nth-child(4) { transform: translateY(10px) rotate(3.5deg) scale(.94); z-index: 2; }
.rail-card:nth-child(5) { transform: translateY(26px) rotate(7deg) scale(.86); z-index: 1; }

.rail-card:hover { box-shadow: var(--shadow-lg); }
.rail-card:nth-child(1):hover { transform: translateY(16px) rotate(-7deg) scale(.9); }
.rail-card:nth-child(2):hover { transform: translateY(0) rotate(-3.5deg) scale(.98); }
.rail-card:nth-child(3):hover { transform: translateY(-18px) scale(1.08); }
.rail-card:nth-child(4):hover { transform: translateY(0) rotate(3.5deg) scale(.98); }
.rail-card:nth-child(5):hover { transform: translateY(16px) rotate(7deg) scale(.9); }

/* --------------------------------------------------------------------------
   Stat band — factual numbers only, never invented social proof
   -------------------------------------------------------------------------- */

.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 6px 0 60px;
  box-shadow: var(--shadow-sm);
}
.stat {
  background: var(--card);
  padding: 20px 18px;
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--font-d);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--brand-dark);
  line-height: 1.1;
}
.stat span { font-size: .84rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 24px;
  flex-wrap: wrap;
}

.eyebrow {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 9px;
}

.section-title { font-size: clamp(1.55rem, 3vw, 2.1rem); }
.section-sub { color: var(--muted); margin: 8px 0 0; font-size: .97rem; max-width: 560px; }

.link-more { font-weight: 600; font-size: .92rem; text-decoration: none; color: var(--brand-dark); white-space: nowrap; }
.link-more:hover { text-decoration: underline; }
.link-more .arr { display: inline-block; transition: translate .2s var(--ease); }
.link-more:hover .arr { translate: 4px 0; }

/* --------------------------------------------------------------------------
   Category chips
   -------------------------------------------------------------------------- */

.chip-row {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0 0 34px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: .89rem;
  font-weight: 500;
  color: var(--slate);
  text-decoration: none;
  transition: all .2s var(--ease);
}
.chip:hover, .chip.on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 2px 10px rgba(17, 17, 17, .18);
}
.chip .n { opacity: .65; font-size: .82rem; }

/* --------------------------------------------------------------------------
   Occasion tiles
   -------------------------------------------------------------------------- */

.occasion-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 18px;
  margin: 0 0 64px;
}

.occasion-tile {
  position: relative;
  display: block;
  min-height: 224px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: var(--ink);
  box-shadow: var(--shadow-md);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  isolation: isolate;
}
.occasion-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.occasion-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .7s var(--ease);
}
.occasion-tile:hover img { transform: scale(1.07); }

.occasion-tile::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(26, 10, 12, .9) 6%, rgba(26, 10, 12, .35) 55%, rgba(26, 10, 12, .1) 100%);
}

.occasion-tile .tile-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px; }
.occasion-tile h3 { font-size: 1.35rem; color: #fff; margin-bottom: 4px; }
.occasion-tile .tile-meta { font-size: .85rem; color: rgba(255, 255, 255, .82); }
.occasion-tile .tile-go {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 11px; font-size: .87rem; font-weight: 600; color: #fff;
  opacity: 0; translate: 0 8px;
  transition: opacity .3s var(--ease), translate .3s var(--ease);
}
.occasion-tile:hover .tile-go { opacity: 1; translate: 0 0; }

/* --------------------------------------------------------------------------
   Product cards — modelled on the Appliance & Home card
   -------------------------------------------------------------------------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 18px;
  margin-bottom: 64px;
}

.product-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-strong);
}

.card-media { position: relative; overflow: hidden; background: var(--card-img); }
.card-media img {
  display: block; width: 100%;
  aspect-ratio: 1/1; object-fit: cover;
  transition: transform .6s var(--ease);
}
.product-card:hover .card-media img { transform: scale(1.05); }

.promo-pill {
  position: absolute;
  top: 10px; left: 10px; z-index: 2;
  background: var(--brand);
  color: #fff;
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(17, 17, 17, .22);
}

.card-peek {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  background: rgba(255, 255, 255, .96);
  border-radius: 999px;
  padding: 8px 14px;
  text-align: center;
  font-size: .84rem;
  font-weight: 600;
  color: var(--brand-dark);
  opacity: 0; translate: 0 10px;
  transition: opacity .28s var(--ease), translate .28s var(--ease);
  box-shadow: var(--shadow-sm);
}
.product-card:hover .card-peek { opacity: 1; translate: 0 0; }

.product-card .info { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.product-card .kicker {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}
.product-card .name { font-size: .95rem; font-weight: 500; margin: 0; line-height: 1.4; color: var(--ink); }
.product-card .price {
  margin: auto 0 0; padding-top: 6px;
  font-family: var(--font-d); font-size: 1.2rem; font-weight: 700;
  color: var(--ink);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.was { color: var(--muted); font-family: var(--font-b); font-weight: 400; font-size: .84rem; text-decoration: line-through; }

.sale-flag { /* legacy alias kept so older markup still styles correctly */
  display: inline-block; background: var(--brand); color: #fff;
  font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 16px;
  margin: 0 0 64px;
  counter-reset: step;
}

.step {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.step .n {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 14px;
}
.step h3 { font-family: var(--font-b); font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.step p { margin: 0; font-size: .91rem; color: var(--slate); }

/* --------------------------------------------------------------------------
   Trust / benefit grid
   -------------------------------------------------------------------------- */

.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin: 0 0 64px;
}
.benefit {
  display: flex;
  gap: 13px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.benefit:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.benefit .ico {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--brand-soft);
  display: grid; place-items: center;
}
.benefit .ico svg { width: 19px; height: 19px; stroke: var(--brand); fill: none; stroke-width: 1.7; }
.benefit strong { display: block; font-size: .96rem; font-weight: 600; margin-bottom: 3px; }
.benefit span { font-size: .88rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { max-width: 780px; margin: 0 0 64px; }

.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .25s var(--ease);
}
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 17px 52px 17px 20px;
  font-weight: 600;
  font-size: .98rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 20px; top: 50%;
  translate: 0 -50%;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 1.15rem;
  line-height: 1;
  transition: rotate .25s var(--ease);
}
.faq details[open] summary::after { content: "\2212"; rotate: 180deg; }
.faq summary:hover { color: var(--brand-dark); }
.faq .answer { padding: 0 20px 18px; color: var(--slate); font-size: .94rem; }
.faq .answer p { margin: 0; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  border-radius: 999px;
  padding: 12px 24px;
  font-family: var(--font-b);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(17, 17, 17, .16);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease);
}
.btn:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(17, 17, 17, .22);
}
.btn:active { transform: translateY(0); }

.btn-lg { padding: 15px 30px; font-size: 1.01rem; }

.btn-secondary {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: var(--card); color: var(--gold-ink); border-color: var(--gold); box-shadow: var(--shadow-md); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--slate); box-shadow: none; }
.btn-ghost:hover { background: var(--brand-soft); color: var(--brand); border-color: transparent; box-shadow: none; }

/* --------------------------------------------------------------------------
   Product detail
   -------------------------------------------------------------------------- */

.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin: 40px 0 64px;
  align-items: start;
}

.detail-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-img);
  box-shadow: var(--shadow-md);
}
.detail-media img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; }

.crumb { font-size: .85rem; color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.crumb:hover { color: var(--brand-dark); }

.detail-body h1 { font-size: clamp(1.75rem, 3.4vw, 2.4rem); margin: 10px 0 14px; }

.detail-price {
  font-family: var(--font-d);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 18px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}

.detail-desc { font-size: 1.02rem; color: var(--slate); margin: 0 0 24px; }
.detail-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.spec-list { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid var(--line); }
.spec-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: .92rem; color: var(--slate);
}
.spec-list svg { flex: none; width: 18px; height: 18px; stroke: var(--brand); fill: none; stroke-width: 1.7; margin-top: 3px; }

.delivery-note {
  display: flex; align-items: center; gap: 10px;
  background: var(--green-soft);
  border: 1px solid #c9ede0;
  color: #04684a;
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  font-size: .91rem;
  margin: 0 0 20px;
}
.delivery-note svg { flex: none; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

form.checkout-form { max-width: 520px; margin: 26px 0 36px; }
form.checkout-form.narrow { max-width: 400px; }

form.checkout-form label { display: block; margin: 17px 0 6px; font-size: .87rem; font-weight: 500; color: var(--slate); }

form.checkout-form input,
form.checkout-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  background: var(--card);
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
form.checkout-form input:focus,
form.checkout-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
form.checkout-form textarea { resize: vertical; }

.promo-row { display: flex; gap: 9px; align-items: stretch; }
.promo-row input { flex: 1; }
.promo-row .btn { white-space: nowrap; padding: 11px 18px; font-size: .9rem; }

.order-summary {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  max-width: 520px;
  margin: 24px 0;
  box-shadow: var(--shadow-sm);
}
.summary-head { display: flex; gap: 15px; align-items: center; margin-bottom: 15px; }
.summary-head img {
  width: 64px; height: 64px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--card-img);
}
.summary-head strong { font-family: var(--font-d); font-size: 1.06rem; font-weight: 700; }

table.totals { width: 100%; border-collapse: collapse; margin: 4px 0 13px; }
table.totals td { padding: 7px 0; font-size: .95rem; }
table.totals td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
table.totals tr.discount td { color: var(--green); }
table.totals tr.grand td {
  border-top: 1px solid var(--line);
  padding-top: 13px;
  font-weight: 700;
  font-size: 1.2rem;
  font-family: var(--font-d);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Messages, statuses, tables
   -------------------------------------------------------------------------- */

.flash {
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 16px 0;
  font-size: .94rem;
  animation: slide-in .35s var(--ease) both;
}
.flash-ok { background: var(--green-soft); color: #04684a; }
.flash-error { background: var(--red-soft); color: var(--brand-darker); }
@keyframes slide-in { from{opacity:0;translate:0 -8px} to{opacity:1;translate:0 0} }

.order-status { border-radius: var(--radius); padding: 24px 26px; margin: 26px 0; border: 1px solid transparent; }
.order-status.paid { background: var(--green-soft); color: #04684a; border-color: #c9ede0; }
.order-status.pending { background: var(--amber-soft); color: var(--amber-ink); border-color: #f3ddc0; }
.order-status.other { background: var(--red-soft); color: var(--brand-darker); border-color: var(--line-strong); }
.order-status p { margin: 6px 0; }

table.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 20px 0 36px;
  font-size: .93rem;
  box-shadow: var(--shadow-sm);
}
table.data-table th, table.data-table td { padding: 13px 15px; text-align: left; border-bottom: 1px solid var(--line); }
table.data-table thead th {
  background: var(--bg-tint);
  font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 700;
}
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tbody tr { transition: background .2s var(--ease); }
table.data-table tbody tr:hover { background: var(--bg); }

.pill { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: .73rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.pill-paid { background: var(--green-soft); color: var(--green); }
.pill-pending { background: var(--amber-soft); color: var(--amber-ink); }
.pill-failed, .pill-cancelled, .pill-paynow_error { background: var(--red-soft); color: var(--brand-darker); }
.pill-refunded, .pill-off { background: #f0eae9; color: var(--muted); }

ul.timeline { list-style: none; padding: 0; margin: 16px 0 32px; }
ul.timeline li {
  position: relative; padding: 12px 0 12px 24px;
  border-bottom: 1px solid var(--line);
  display: flex; gap: 16px; flex-wrap: wrap;
}
ul.timeline li::before {
  content: ""; position: absolute; left: 2px; top: 20px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
ul.timeline .when { color: var(--muted); font-size: .86rem; min-width: 130px; }

.account-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 6px; }

.muted { color: var(--muted); font-size: .92rem; }
.small { font-size: .85rem; }

.empty-state {
  text-align: center; padding: 56px 24px;
  background: var(--card);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-radius: var(--radius-lg);
  padding: 50px 40px;
  margin: 0 0 64px;
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.cta-band::before {
  content: "";
  position: absolute;
  width: 460px; height: 460px;
  border-radius: 50%;
  top: -200px; right: -110px;
  background: radial-gradient(circle, rgba(201, 168, 76, .35), transparent 68%);
  filter: blur(30px);
}
.cta-band h2 { position: relative; font-size: clamp(1.6rem, 3.2vw, 2.25rem); color: #fff; margin-bottom: 12px; }
.cta-band p { position: relative; color: rgba(255, 255, 255, .76); margin: 0 auto 24px; max-width: 470px; }
.cta-band .btn { position: relative; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--line); background: var(--bg-tint); padding: 48px 0 28px; margin-top: 32px; }

.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 32px; }

.footer-grid h4 {
  font-family: var(--font-b);
  font-size: .77rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); margin: 0 0 13px; font-weight: 700;
}
.footer-brand .logo-mark { font-family: var(--font-d); font-size: 1.2rem; font-weight: 700; color: var(--ink); display: block; margin-bottom: 9px; }
.footer-brand p { color: var(--slate); font-size: .91rem; margin: 0 0 14px; max-width: 300px; }

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: var(--slate); text-decoration: none; font-size: .91rem; transition: color .2s var(--ease); }
.footer-links a:hover { color: var(--brand-dark); }

.footer-base {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--muted); font-size: .84rem;
}

/* --------------------------------------------------------------------------
   Scroll reveal — hidden ONLY while scripting is confirmed alive
   -------------------------------------------------------------------------- */

.reveal { transition: opacity .65s var(--ease), translate .65s var(--ease); }
.js .reveal { opacity: 0; translate: 0 20px; }
.js .reveal.in { opacity: 1; translate: 0 0; }

.reveal.in .product-card,
.reveal.in .occasion-tile,
.reveal.in .step,
.reveal.in .benefit { animation: rise .55s var(--ease) both; }
.reveal.in > *:nth-child(1) { animation-delay: .03s; }
.reveal.in > *:nth-child(2) { animation-delay: .09s; }
.reveal.in > *:nth-child(3) { animation-delay: .15s; }
.reveal.in > *:nth-child(4) { animation-delay: .21s; }
.reveal.in > *:nth-child(5) { animation-delay: .27s; }
.reveal.in > *:nth-child(6) { animation-delay: .33s; }
.reveal.in > *:nth-child(7) { animation-delay: .39s; }
.reveal.in > *:nth-child(8) { animation-delay: .45s; }

@keyframes rise { from{opacity:0;translate:0 14px} to{opacity:1;translate:0 0} }

.hero-copy > * { animation: rise .65s var(--ease) both; }
.hero-copy > *:nth-child(1) { animation-delay: .04s; }
.hero-copy > *:nth-child(2) { animation-delay: .11s; }
.hero-copy > *:nth-child(3) { animation-delay: .18s; }
.hero-copy > *:nth-child(4) { animation-delay: .25s; }
.hero-copy > *:nth-child(5) { animation-delay: .32s; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .hero { padding: 44px 0 0; }
  .gift-rail { gap: 12px; margin-top: 40px; padding-bottom: 52px; }
  .rail-card { width: 150px; }
  .product-detail { grid-template-columns: 1fr; gap: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer-brand { grid-column: 1 / -1; }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .wrap { padding: 0 16px; }

  .head-main { padding-top: 10px; padding-bottom: 9px; gap: 10px; }
  .logo-mark { width: 34px; height: 34px; }
  .logo-text strong { font-size: 1.3rem; }
  .logo-text small { font-size: .6rem; letter-spacing: .1em; }
  .cat-bar a { padding: 10px 12px; font-size: .85rem; }

  /* On a phone the fan becomes a swipeable strip — a rotated fan at this width
     just clips its own edges. */
  .gift-rail {
    justify-content: flex-start;
    gap: 10px;
    margin-top: 32px;
    padding: 4px 16px 44px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .gift-rail::-webkit-scrollbar { display: none; }
  .rail-card { width: 142px; scroll-snap-align: center; }
  .rail-card:nth-child(n) { transform: none; }

  .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .product-card .info { padding: 12px 13px 14px; }
  .product-card .name { font-size: .88rem; }
  .product-card .price { font-size: 1.05rem; }
  .card-peek { display: none; }          /* no hover on touch — keep the photo clear */

  .occasion-tiles { gap: 12px; margin-bottom: 48px; }
  .occasion-tile { min-height: 180px; }
  .occasion-tile .tile-go { opacity: 1; translate: 0 0; }

  .stat b { font-size: 1.4rem; }
  .cta-band { padding: 36px 22px; }
  .footer-grid { grid-template-columns: 1fr; }
  .promo-row { flex-direction: column; }
  .promo-row .btn { width: 100%; }

  table.data-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .js .reveal { opacity: 1; translate: none; }
  .hero-tile { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Size selection (clothing, shoes)
   -------------------------------------------------------------------------- */

.size-picker { margin: 0 0 4px; }

.size-label {
  display: block;
  font-size: .87rem;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: 9px;
}

.size-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.size-options.inline { margin-bottom: 6px; }

.size-option { cursor: pointer; }
.size-option input { position: absolute; opacity: 0; width: 0; height: 0; }

.size-option span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink);
  transition: all .18s var(--ease);
}
.size-option:hover span { border-color: var(--brand); color: var(--brand-dark); }

.size-option input:checked + span {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 2px 8px rgba(17, 17, 17, .18);
}
/* Keyboard users must still see where they are */
.size-option input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
/* The supplier can't send this size right now: shown, so the run doesn't look
   gappy, but crossed out and unpickable. */
.size-option.sold-out { cursor: not-allowed; }
.size-option.sold-out span,
.size-option.sold-out:hover span {
  text-decoration: line-through;
  opacity: .4;
  border-color: var(--line, #ddd);
  color: inherit;
}

.size-hint { margin: 14px 0 0; }

/* The size is the single most important thing on a fulfillment screen — if it
   is wrong the parcel cannot be put right from South Africa. */
.size-callout {
  display: inline-block;
  background: var(--brand-soft);
  color: var(--brand-dark);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 1px 8px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Footer brand lockup */
.foot-lockup { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.foot-lockup img { display: block; }
.foot-lockup .logo-mark { margin: 0; }

/* The fan tilts are decorative; flatten them when motion is unwelcome. */
@media (prefers-reduced-motion: reduce) {
  .rail-card, .rail-card:hover { transform: none !important; }
}

/* ==========================================================================
   Branded fashion: brand strip, For Her / For Him, filter rail, scroll rail
   ========================================================================== */

/* ---- Brand strip -------------------------------------------------------- */

.brand-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 0 0 60px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.brand-strip-label {
  flex: none;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  padding-right: 18px;
  border-right: 1px solid var(--line);
}

.brand-track {
  display: flex;
  align-items: center;
  gap: 34px;
  min-width: 0;
  animation: brand-marquee 26s linear infinite;
}
.brand-strip:hover .brand-track { animation-play-state: paused; }

.brand-word {
  font-family: var(--font-d);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink);
  opacity: .72;
  white-space: nowrap;
  flex: none;
}

/* The list is rendered twice, so shifting by half its width loops seamlessly. */
@keyframes brand-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- For Her / For Him -------------------------------------------------- */

.audience-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0 0 64px;
}

.aud-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.aud-panel:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.aud-ladies    { background: linear-gradient(160deg, #fff1f3 0%, #ffe4e8 100%); }
.aud-gentlemen { background: linear-gradient(160deg, #fff6e6 0%, #ffeccd 100%); }
/* Mum and Dad get their own tints rather than reusing the two above: four
   panels in two colours reads as a mistake, not a pairing. */
.aud-mum       { background: linear-gradient(160deg, #f5f0fb 0%, #ebe2f7 100%); }
.aud-dad       { background: linear-gradient(160deg, #eef4f6 0%, #dfeaef 100%); }

/* Four product shots, overlapped like a spread hand */
.aud-stack {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 20px 4px;
  flex: 1;
}
.aud-stack img {
  width: 108px;
  height: 108px;
  object-fit: cover;
  border-radius: 12px;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: var(--shadow-md);
  transition: transform .4s var(--ease);
}
.aud-stack img:not(:first-child) { margin-left: -26px; }
.aud-stack img:nth-child(1) { transform: rotate(-8deg); z-index: 1; }
.aud-stack img:nth-child(2) { transform: rotate(-3deg); z-index: 2; }
.aud-stack img:nth-child(3) { transform: rotate(3deg);  z-index: 3; }
.aud-stack img:nth-child(4) { transform: rotate(8deg);  z-index: 4; }

.aud-panel:hover .aud-stack img:nth-child(1) { transform: rotate(-12deg) translateY(-5px); }
.aud-panel:hover .aud-stack img:nth-child(2) { transform: rotate(-5deg) translateY(-9px); }
.aud-panel:hover .aud-stack img:nth-child(3) { transform: rotate(5deg) translateY(-9px); }
.aud-panel:hover .aud-stack img:nth-child(4) { transform: rotate(12deg) translateY(-5px); }

.aud-body { padding: 18px 24px 24px; text-align: center; }
.aud-body h3 { font-size: 1.6rem; margin-bottom: 4px; }
.aud-body p { margin: 0 0 10px; font-size: .9rem; color: var(--slate); }
.aud-go { font-size: .9rem; font-weight: 600; color: var(--brand-dark); }

/* ---- Filter rail (category pages) --------------------------------------- */

.filter-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 30px;
}
.filter-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-group.brands { padding-top: 12px; border-top: 1px solid var(--line); }

.fchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--slate);
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .18s var(--ease);
}
.fchip:hover { border-color: var(--brand); color: var(--brand-dark); }
.fchip.on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(17, 17, 17, .16);
}
.fchip .n { opacity: .6; font-size: .8rem; }
.fchip.on .n { opacity: .8; }

/* ---- Horizontal product rail -------------------------------------------- */

.scroll-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 234px;
  gap: 18px;
  overflow-x: auto;
  padding: 4px 4px 18px;
  margin: 0 0 60px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.scroll-rail > * { scroll-snap-align: start; }
.scroll-rail::-webkit-scrollbar { height: 8px; }
.scroll-rail::-webkit-scrollbar-track { background: var(--bg-tint); border-radius: 99px; }
.scroll-rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.scroll-rail::-webkit-scrollbar-thumb:hover { background: var(--brand); }

@media (max-width: 720px) {
  .audience-split { grid-template-columns: 1fr; gap: 14px; margin-bottom: 48px; }
  .aud-panel { min-height: 260px; }
  .aud-stack img { width: 88px; height: 88px; }
  .brand-strip { margin-bottom: 44px; padding: 12px 14px; gap: 14px; }
  .brand-strip-label { padding-right: 14px; font-size: .64rem; }
  .brand-word { font-size: 1.05rem; }
  .scroll-rail { grid-auto-columns: 158px; gap: 12px; margin-bottom: 44px; }
  .filter-rail { margin-bottom: 24px; }
  .fchip { padding: 7px 13px; font-size: .84rem; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-track { animation: none; }
  .aud-stack img, .aud-panel:hover .aud-stack img { transform: none !important; }
}

/* ==========================================================================
   Bundles
   ========================================================================== */

.bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin: 0 0 64px;
}

.bundle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.bundle-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-strong);
}

.bundle-flag {
  position: absolute;
  top: 12px; right: 12px; z-index: 3;
  background: var(--gold);
  color: #3d2900;
  font-size: .74rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(240, 165, 0, .35);
}

/* Three product shots side by side — reads instantly as "more than one thing" */
.bundle-mosaic {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--line);
}
.bundle-mosaic img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  background: var(--card-img);
  display: block;
  transition: transform .5s var(--ease);
}
.bundle-card:hover .bundle-mosaic img { transform: scale(1.05); }
.bundle-more {
  position: absolute;
  right: 8px; bottom: 8px;
  background: rgba(26, 10, 12, .82);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}

.bundle-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.bundle-body h3 { font-size: 1.22rem; margin: 4px 0 10px; }

.bundle-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  font-size: .87rem;
  color: var(--slate);
}
.bundle-list li { padding-left: 16px; position: relative; margin-bottom: 3px; }
.bundle-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.bundle-price {
  margin: auto 0 0;
  font-family: var(--font-d);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}
.bundle-pct {
  font-family: var(--font-b);
  font-size: .74rem;
  font-weight: 700;
  color: var(--brand-dark);
  background: var(--brand-soft);
  padding: 3px 9px;
  border-radius: 999px;
}

/* ---- Bundle detail ------------------------------------------------------ */

.bundle-detail {
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 32px;
  align-items: start;
  margin: 0 0 64px;
}

.bundle-items { display: flex; flex-direction: column; gap: 12px; }

.bundle-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.bundle-item img {
  width: 84px; height: 84px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--card-img);
  flex: none;
}
.bi-name { margin: 2px 0 4px; font-weight: 500; }
.bi-price { margin: 0; font-family: var(--font-d); font-weight: 700; color: var(--ink); }
.bi-size {
  font-family: var(--font-b);
  font-size: .76rem;
  font-weight: 500;
  color: var(--gold-ink);
  background: var(--gold-soft);
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 8px;
}

.bundle-summary {
  position: sticky;
  top: 130px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-md);
}

.bundle-size-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.bundle-size-row img {
  width: 58px; height: 58px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--card-img);
  flex: none;
}

@media (max-width: 860px) {
  .bundle-detail { grid-template-columns: 1fr; gap: 22px; }
  .bundle-summary { position: static; }
}
@media (max-width: 720px) {
  .bundle-grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 48px; }
  .bundle-item img { width: 64px; height: 64px; }
}

/* ==========================================================================
   Shipping-time notice
   ========================================================================== */

/* Deliberately calm rather than alarming: setting the expectation early costs
   far less than a customer discovering it while waiting. */
.ship-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: .87rem;
  line-height: 1.5;
  color: var(--slate);
  margin: 0 0 18px;
}
.ship-note svg { flex: none; width: 17px; height: 17px; stroke: var(--muted); margin-top: 2px; }
.ship-note.strong {
  background: var(--gold-soft);
  border-color: var(--gold-line);
  color: var(--gold-ink);
}
.ship-note.strong svg { stroke: currentColor; }

/* ==========================================================================
   WhatsApp chat widget
   ========================================================================== */

.wa-widget { position: fixed; right: 20px; bottom: 20px; z-index: 80; }

.wa-fab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25d366;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 13px 20px 13px 16px;
  font-family: var(--font-b);
  font-size: .94rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .4);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease);
}
.wa-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(37, 211, 102, .48); }
.wa-icon { width: 24px; height: 24px; fill: currentColor; flex: none; }
.wa-icon-sm { width: 17px; height: 17px; fill: currentColor; flex: none; }
.wa-widget.open .wa-fab-label { display: none; }
.wa-widget.open .wa-fab { padding: 14px; }

.wa-panel {
  position: absolute;
  right: 0;
  bottom: 62px;
  width: 330px;
  max-width: calc(100vw - 40px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: wa-in .25s var(--ease) both;
}
@keyframes wa-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }

.wa-head {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #075e54;
  color: #fff;
  padding: 14px 16px;
}
.wa-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  flex: none;
}
.wa-head strong { display: block; font-size: .95rem; }
.wa-head span { font-size: .74rem; opacity: .82; }
.wa-close {
  margin-left: auto;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: .8;
  padding: 0 2px;
}
.wa-close:hover { opacity: 1; }

.wa-body { padding: 16px; background: #ece5dd; }

.wa-bubble {
  background: #fff;
  border-radius: 4px 14px 14px 14px;
  padding: 11px 14px;
  margin: 0 0 14px;
  font-size: .89rem;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.wa-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #5c6b66;
  margin: 0 0 8px;
}

.wa-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.wa-chip {
  background: #fff;
  border: 1px solid #d4cec6;
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--font-b);
  font-size: .8rem;
  color: #075e54;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.wa-chip:hover { border-color: #25d366; background: #f0fff5; }
.wa-chip.on { background: #25d366; border-color: #25d366; color: #fff; font-weight: 600; }

.wa-body textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d4cec6;
  border-radius: 10px;
  font-family: inherit;
  font-size: .89rem;
  resize: vertical;
  background: #fff;
  color: var(--ink);
}
.wa-body textarea:focus { outline: none; border-color: #25d366; box-shadow: 0 0 0 3px rgba(37, 211, 102, .18); }

.wa-send {
  width: 100%;
  margin-top: 12px;
  background: #25d366;
  border-color: #25d366;
  box-shadow: 0 3px 12px rgba(37, 211, 102, .3);
}
.wa-send:hover { background: #1eb355; border-color: #1eb355; box-shadow: 0 6px 18px rgba(37, 211, 102, .38); }

.wa-foot { text-align: center; font-size: .78rem; color: #5c6b66; margin: 10px 0 0; }

@media (max-width: 720px) {
  .wa-widget { right: 14px; bottom: 14px; }
  .wa-fab-label { display: none; }          /* icon only, so it never covers content */
  .wa-fab { padding: 14px; }
  .wa-panel { width: calc(100vw - 28px); bottom: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-panel { animation: none; }
}

/* ==========================================================================
   Bundle builder — the page that has to feel like a reward, not a form
   ========================================================================== */

.builder-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 54px 0 40px;
  background:
    radial-gradient(circle at 20% 0%, rgba(240,165,0,.16), transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(237,28,36,.12), transparent 55%);
}
.builder-hero h1 { font-size: clamp(2.1rem, 4.8vw, 3.4rem); margin-bottom: 16px; }
.builder-hero .hero-lede { margin-left: auto; margin-right: auto; }
.builder-hero .eyebrow-pill { margin-left: auto; margin-right: auto; }

/* Reward ladder */
.tier-track {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 22px;
  box-shadow: var(--shadow-sm);
}
.tier-pct { font-family: var(--font-d); font-size: 1.5rem; font-weight: 700; color: var(--brand-dark); }
.tier-label { font-size: .78rem; color: var(--muted); }

.builder {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 26px;
  align-items: start;
  margin: 26px 0 64px;
}

.builder-toolbar { margin-bottom: 18px; }
.builder-toolbar input[type="search"] {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  background: var(--card);
  margin-bottom: 12px;
}
.builder-toolbar input[type="search"]:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft);
}
.builder-toolbar .chip { border: 1px solid var(--line); cursor: pointer; font-family: inherit; }

.builder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
}

.pick-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.pick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }

.pick-media { position: relative; display: block; background: var(--card-img); }
.pick-media img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; }

.pick-tick {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--line-strong);
  color: transparent;
  display: grid; place-items: center;
  font-size: .82rem;
  font-weight: 700;
  transition: all .2s var(--ease);
}
.pick-card.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft), var(--shadow-md); }
.pick-card.on .pick-tick { background: var(--brand); border-color: var(--brand); color: #fff; }
.pick-card.on .pick-media::after {
  content: ""; position: absolute; inset: 0; background: rgba(237,28,36,.08);
}

.pick-info { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.pick-name { font-size: .84rem; line-height: 1.35; }
.pick-price { font-family: var(--font-d); font-weight: 700; font-size: 1rem; margin-top: 2px; }

/* ---- The tray ----------------------------------------------------------- */

.builder-tray { position: sticky; top: 128px; }
.tray-inner {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-md);
}
.tray-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tray-inner h2 { font-size: 1.25rem; margin-bottom: 14px; }

/* The collapse control only exists where the tray covers the grid. */
.tray-toggle { display: none; }

.builder-tray.bump .tray-inner { animation: tray-bump .4s var(--ease); }
@keyframes tray-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.022); box-shadow: var(--shadow-lg); }
  100% { transform: scale(1); }
}

.tray-progress { margin-bottom: 16px; }
.tray-bar {
  height: 7px;
  background: var(--bg-tint);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 8px;
}
.tray-bar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--brand));
  border-radius: 99px;
  transition: width .35s var(--ease);
}
.tray-next { margin: 0; font-size: .86rem; color: var(--slate); }
.tray-next strong { color: var(--brand-dark); }

.tray-list { list-style: none; padding: 0; margin: 0 0 14px; max-height: 290px; overflow-y: auto; }
.tray-empty { color: var(--muted); font-size: .88rem; padding: 14px 0; }

.tray-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  animation: tray-in .25s var(--ease) both;
}
@keyframes tray-in { from { opacity: 0; translate: 8px 0; } to { opacity: 1; translate: 0 0; } }
.tray-item img {
  width: 40px; height: 40px; object-fit: cover;
  border-radius: 8px; background: var(--card-img); flex: none;
}
.ti-name { flex: 1; font-size: .84rem; line-height: 1.3; min-width: 0; }
.ti-price { font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ti-remove {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 1.25rem; line-height: 1; padding: 0 2px;
}
.ti-remove:hover { color: var(--brand); }

.tray-cta { width: 100%; margin-top: 6px; }
.tray-cta:disabled { background: var(--line-strong); border-color: var(--line-strong); box-shadow: none; cursor: not-allowed; transform: none; }
.tray-foot { margin-top: 10px; }

/* A floating summary on small screens, so the reward is always in view.
   It has to be collapsible: pinned open it covers most of the screen, which
   hides the very grid you are being asked to pick from. */
@media (max-width: 900px) {
  .builder { grid-template-columns: 1fr; }
  .builder-tray {
    position: sticky;
    bottom: 0;
    top: auto;
    z-index: 40;
    margin: 0 -16px;
  }
  .tray-inner {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -8px 30px rgba(26,10,12,.16);
    max-height: 62vh;
    overflow-y: auto;
    padding: 14px 18px 18px;
  }
  .tray-inner h2 { margin-bottom: 0; font-size: 1.1rem; }
  .tray-head { margin-bottom: 12px; }

  .tray-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-tint);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 12px;
    font: inherit;
    font-size: .82rem;
    color: var(--slate);
    cursor: pointer;
    flex: none;
    -webkit-tap-highlight-color: transparent;
  }
  .tray-chevron {
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform .2s var(--ease);
  }

  /* Collapsed: header and the CTA only, so the grid is reachable again. */
  .builder-tray.collapsed .tray-body,
  .builder-tray.collapsed .tray-foot { display: none; }
  .builder-tray.collapsed .tray-head { margin-bottom: 10px; }
  .builder-tray.collapsed .tray-chevron { transform: rotate(180deg); }
  .builder-tray.collapsed .tray-inner { max-height: none; overflow: visible; }

  .tray-list { max-height: 180px; }
  .builder-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .tier { padding: 10px 16px; }
  .tier-pct { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .builder-tray.bump .tray-inner, .tray-item { animation: none; }
}

/* Build-your-own banner */
.build-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(120deg, var(--ink) 0%, #3a2420 100%);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  margin: 0 0 26px;
  text-decoration: none;
  color: #fff;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--ease);
}
.build-banner::before {
  content: ""; position: absolute;
  width: 340px; height: 340px; border-radius: 50%;
  top: -150px; right: -60px;
  background: radial-gradient(circle, rgba(240,165,0,.45), transparent 68%);
  filter: blur(24px);
}
.build-banner:hover { transform: translateY(-3px); }
.build-banner > div { position: relative; }
.build-banner .eyebrow { color: var(--gold); }
.build-banner h3 { font-size: 1.55rem; color: #fff; margin-bottom: 6px; }
.build-banner p { margin: 0; color: rgba(255,255,255,.78); font-size: .95rem; }
.build-go {
  position: relative;
  background: var(--gold);
  color: #3d2900;
  font-weight: 700;
  font-size: .95rem;
  padding: 12px 24px;
  border-radius: 999px;
  white-space: nowrap;
}
.tweak-line { margin: 14px 0 0; text-align: center; font-size: .88rem; color: var(--muted); }
.tweak-line a { font-weight: 600; }

/* ==========================================================================
   Cart, VIP, positioning, business, policies
   ========================================================================== */

.cart-link { position: relative; font-weight: 600; }
.cart-count {
  display: inline-grid; place-items: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--brand); color: #fff;
  font-size: .7rem; font-weight: 700; margin-left: 3px;
}
.vip-link { color: var(--gold-ink); font-weight: 600; }
.vip-link:hover { background: var(--gold-soft); color: var(--gold-ink); }

.cart-layout { display: grid; grid-template-columns: 1fr 330px; gap: 24px; align-items: start; margin-bottom: 64px; }
.cart-line {
  display: grid;
  grid-template-columns: 78px 1fr auto auto;
  gap: 14px; align-items: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 10px;
}
.cart-line img { width: 78px; height: 78px; object-fit: cover; border-radius: var(--radius-sm); background: var(--card-img); }
.cl-name { font-weight: 500; text-decoration: none; color: var(--ink); }
.cl-size, .cl-unit { margin: 3px 0 0; font-size: .84rem; color: var(--muted); }
.cl-qty input {
  width: 62px; padding: 8px 10px; text-align: center;
  border: 1px solid var(--line-strong); border-radius: 8px; font-family: inherit;
}
.cl-total { font-family: var(--font-d); font-weight: 700; font-size: 1.05rem; min-width: 74px; text-align: right; }
.cart-line-actions { margin-top: 14px; }

.cart-summary {
  position: sticky; top: 130px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow-md);
}
.cart-summary h3 { font-size: 1.15rem; margin-bottom: 12px; }
.cart-perk { font-size: .86rem; color: var(--green); font-weight: 600; margin: 0 0 12px; }
.cart-perk.muted { color: var(--muted); font-weight: 400; }
.cart-nudge {
  background: var(--gold-soft); border: 1px solid var(--gold-line);
  color: var(--gold-ink); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: .86rem; margin: 0 0 12px;
}
.vip-nudge {
  display: block; text-decoration: none;
  background: var(--ink); color: #fff;
  border-radius: var(--radius-sm); padding: 13px 15px; margin-bottom: 14px;
  transition: transform .2s var(--ease);
}
.vip-nudge:hover { transform: translateY(-2px); }
.vip-nudge strong { display: block; font-size: .92rem; }
.vip-nudge span { font-size: .82rem; color: rgba(255,255,255,.72); }

.qty-field { display: flex; align-items: center; gap: 8px; }
.qty-field label { font-size: .85rem; color: var(--muted); }
.qty-field input {
  width: 66px; padding: 12px 10px; text-align: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 1rem;
}

.locked-note {
  background: var(--gold-soft); border: 1px solid var(--gold-line);
  border-radius: var(--radius); padding: 18px 20px; margin: 0 0 20px;
}
.locked-note strong { display: block; color: var(--gold-ink); margin-bottom: 5px; }
.locked-note p { margin: 0 0 14px; font-size: .92rem; color: var(--slate); }

.vip-inline { margin: 14px 0 0; font-size: .88rem; color: var(--muted); }
.vip-inline strong { color: var(--brand-dark); }

/* VIP page */
.vip-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: 60px 0 46px; color: #fff;
  background: linear-gradient(140deg, #1a0a0c 0%, #3a2016 60%, #1a0a0c 100%);
}
.vip-hero::before {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  top: -240px; left: 50%; translate: -50% 0;
  background: radial-gradient(circle, rgba(240,165,0,.4), transparent 68%); filter: blur(30px);
}
.vip-hero .wrap { position: relative; }
.vip-hero h1 { color: #fff; font-size: clamp(2.1rem,4.8vw,3.5rem); margin-bottom: 16px; }
.vip-hero .hero-lede { color: rgba(255,255,255,.82); margin-left: auto; margin-right: auto; }
.vip-hero .hero-note { color: rgba(255,255,255,.6); }
.vip-badge {
  display: inline-block; background: var(--gold); color: #3d2900;
  font-weight: 700; letter-spacing: .16em; font-size: .72rem;
  padding: 6px 16px; border-radius: 999px; margin-bottom: 20px;
}
.vip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 16px; margin-bottom: 64px; }
.vip-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.vip-card.big { grid-column: span 2; background: linear-gradient(135deg, var(--gold-soft), var(--card)); border-color: var(--gold-line); }
.vip-num { font-family: var(--font-d); font-size: 2.6rem; font-weight: 700; color: var(--brand); line-height: 1; }
.vip-card h3 { font-family: var(--font-b); font-size: 1rem; font-weight: 700; margin: 8px 0 6px; }
.vip-card p { margin: 0; font-size: .9rem; color: var(--slate); }

/* Positioning band */
.position-band {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 34px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 34px 38px; margin: 0 0 64px;
  box-shadow: var(--shadow-sm);
}
.pos-answer { font-family: var(--font-d); font-size: 1.5rem; font-weight: 700; margin: 0 0 12px; }
.pos-answer em { font-style: italic; color: var(--brand); }
.pos-body { margin: 0; color: var(--slate); }
.pos-list { list-style: none; padding: 0; margin: 0; }
.pos-list li { padding: 11px 0 11px 26px; border-bottom: 1px solid var(--line); position: relative; }
.pos-list li:last-child { border-bottom: none; }
.pos-list li::before {
  content: "✓"; position: absolute; left: 0; top: 11px;
  color: var(--brand); font-weight: 700;
}
.pos-list strong { display: block; font-size: .96rem; }
.pos-list span { font-size: .87rem; color: var(--muted); }

.card-panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 32px 36px; margin: 0 0 64px;
  box-shadow: var(--shadow-sm);
}

.policy-body { max-width: 760px; margin: 0 0 64px; }
.policy-body h3 {
  font-size: 1.15rem; margin: 30px 0 8px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.policy-body h3:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.policy-body p { color: var(--slate); margin: 0 0 10px; }

.footer-address {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 16px 0; border-top: 1px solid var(--line); font-size: .9rem;
}
.footer-address strong { color: var(--ink); }
.footer-address span { color: var(--slate); }

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

@media (max-width: 860px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .position-band { grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; }
  .vip-card.big { grid-column: span 1; }
}
@media (max-width: 720px) {
  .cart-line { grid-template-columns: 62px 1fr auto; row-gap: 8px; }
  .cart-line img { width: 62px; height: 62px; }
  .cl-total { grid-column: 2 / -1; text-align: left; }
}
.join-list { list-style: none; padding: 0; margin: 16px 0 0; }
.join-list li { padding: 8px 0 8px 24px; position: relative; font-size: .92rem; color: var(--slate); border-bottom: 1px solid var(--line); }
.join-list li:last-child { border-bottom: none; }
.join-list li::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }

/* ---- Payment plan choice & layby ---------------------------------------- */

.plan-choice { border: none; padding: 0; margin: 22px 0 0; }
.plan-choice legend { font-size: .88rem; font-weight: 600; color: var(--slate); padding: 0 0 10px; }

.plan-option { display: block; cursor: pointer; margin-bottom: 10px; }
.plan-option input { position: absolute; opacity: 0; }
.plan-body {
  display: block;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 14px 16px; background: var(--card);
  transition: all .18s var(--ease);
}
.plan-option:hover .plan-body { border-color: var(--brand); }
.plan-option input:checked + .plan-body {
  border-color: var(--brand); background: var(--brand-soft);
  box-shadow: 0 0 0 2px var(--brand-soft);
}
.plan-body strong { display: block; margin-bottom: 3px; }
.plan-body span { font-size: .87rem; color: var(--slate); }

.plan-detail {
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: 14px 16px; margin-top: 4px; background: var(--bg-tint);
}

/* Under the price: what just happened to it (models.price_change_note). */
.price-note {
  display: inline-flex; align-items: center; gap: 6px;
  margin: -4px 0 14px; padding: 5px 11px; border-radius: 999px;
  font-size: .86rem; font-weight: 600;
}
.price-note.price-down { background: #e8f5ec; color: #1d6b3a; }
.price-note.price-up { background: #fdf1e3; color: #8a4b0b; }
.watch-wants { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: .9rem; }
.watch-wants label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* "How would you like to pay?" -- one question, answers grouped by kind. */
.pay-choice .pay-group {
  margin: 18px 0 8px; font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--slate);
}
.pay-choice legend + .pay-group { margin-top: 2px; }
.pay-choice .layby-detail { margin: -2px 0 12px; }
/* The deposit box belongs to Layby, so it only shows while Layby is picked.
   Browsers without :has() simply keep showing it, as the page always did. */
.pay-choice:has(input[value="layby"]:not(:checked)) .layby-detail { display: none; }

.layby-bar {
  height: 9px; background: var(--bg-tint); border-radius: 99px;
  overflow: hidden; margin: 10px 0;
}
.layby-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--green));
  border-radius: 99px; transition: width .4s var(--ease);
}
.layby-line { margin: 0 0 12px; font-size: .92rem; color: var(--slate); }

.pay-history { list-style: none; padding: 0; margin: 0; }
.pay-history li {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .88rem;
}
.pay-history li:last-child { border-bottom: none; }
.pay-history li span:first-child { color: var(--muted); min-width: 88px; }
.pay-history strong { margin-left: auto; }

.watch-box {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 16px; margin: 20px 0 0; background: var(--card);
}
.watch-box summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--brand-dark); }

/* ---- Endorsement / borrowed trust --------------------------------------- */

.logo-text .endorse {
  font-style: normal;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand);
  margin-top: 1px;
}

.endorse-block {
  margin: 14px 0 0 !important;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .86rem;
}
.endorse-block strong { color: var(--brand-dark); }
.endorse-block span { color: var(--muted); }

.trust-strip-inline {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 520px; margin: 24px 0 64px;
  padding: 12px 15px;
  background: var(--green-soft); border: 1px solid #c9ede0;
  border-radius: var(--radius-sm);
  font-size: .85rem; color: #04684a;
}
.trust-strip-inline svg { flex: none; width: 17px; height: 17px; stroke: currentColor; margin-top: 2px; }

/* Business portal */
.approve-card {
  display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center;
  background: var(--card); border: 1px solid var(--gold-line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 10px;
}
.approve-amount { font-family: var(--font-d); font-size: 1.3rem; font-weight: 700; }
.approve-card form { display: flex; gap: 8px; }
.team-form { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-right: 8px; }
.team-form select, .team-form input {
  padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px;
  font-family: inherit; font-size: .88rem;
}
.filter-inline { display: flex; gap: 8px; align-items: center; }
.filter-inline input { padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 8px; font-family: inherit; }

@media (max-width: 720px) {
  .approve-card { grid-template-columns: 1fr; }
  .logo-text .endorse { display: none; }   /* keeps the mobile lockup tight */
}

@media print {
  .site-header, .site-footer, .wa-widget, .ribbon-top, .btn { display: none !important; }
  body { background: #fff; }
}

.biz-link { font-weight: 600; }
.separate-note {
  max-width: 720px;
  margin: 0 0 48px;
  padding: 16px 20px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  font-size: .92rem;
  color: var(--slate);
}
.separate-note strong { color: var(--ink); }

/* ---- Direct payment instructions ---------------------------------------- */

.pay-steps { max-width: 620px; margin: 0 0 28px; }
.pay-step {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 12px;
}
.pay-step .n {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--brand); color: #fff; font-weight: 700;
}
.pay-step h3 { font-family: var(--font-b); font-size: 1rem; font-weight: 600; margin-bottom: 10px; }
.pay-amount { font-family: var(--font-d); font-size: 1.25rem; color: var(--brand-dark); }

.pay-target {
  background: var(--gold-soft); border: 1px solid var(--gold-line);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 8px;
}
.pay-label { display: block; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--gold-ink); font-weight: 700; }
.pay-number {
  display: block; font-family: var(--font-d); font-size: 1.6rem;
  letter-spacing: .02em; color: var(--ink); margin: 4px 0 2px;
}
.pay-name { font-size: .88rem; color: var(--slate); }

/* The dial string is the single thing the customer must act on, so it is the
   biggest thing in the block and it is tappable. It has to wrap rather than
   overflow -- on a 320px phone the string plus amount does not fit one line. */
.pay-dial {
  display: block; font-family: var(--font-d); font-size: 1.55rem;
  letter-spacing: .02em; color: var(--brand-dark); margin: 6px 0 4px;
  text-decoration: none; font-weight: 700;
  word-break: break-all; line-height: 1.25;
}
.pay-dial:hover, .pay-dial:focus-visible { text-decoration: underline; }
/* The prefix may break anywhere; the amount and closing # may not. Before this
   the string wrapped mid-number and $259.49 read as $59.49. */
.pay-dial .dial-tail { white-space: nowrap; word-break: normal; }

/* Paying in parts. Normal ink and normal size on purpose: this is the one
   thing a customer whose payment was just refused is looking for, and it used
   to be the fourth grey footnote. */
.pay-split {
  margin: 12px 0 10px;
  background: var(--gold-soft); border: 1px solid var(--gold-line);
  border-radius: var(--radius-sm);
}
.pay-split > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 14px;
  font-weight: 600; color: var(--ink);
}
.pay-split > summary::-webkit-details-marker { display: none; }
.pay-split > summary::after {
  content: "+"; margin-left: auto; font-size: 1.3rem; line-height: 1; color: var(--gold-ink);
}
.pay-split[open] > summary::after { content: "\2212"; }
.pay-split-body { padding: 0 14px 14px; font-size: .93rem; color: var(--ink); }
.pay-split-body p { margin: 0 0 8px; }
.pay-split-steps { margin: 0 0 12px; padding-left: 20px; }
.pay-split-steps li { margin-bottom: 4px; line-height: 1.5; }
.pay-split-row, .pay-amount-field {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* The label takes its own line so the $ and the box wrap together. Left to
   flow, "Send now $" filled the first line and the box dropped below it,
   leaving the dollar sign attached to the wrong thing. */
.pay-split-label { font-weight: 600; margin: 0; flex-basis: 100%; }
.pay-split-dollar { font-weight: 700; color: var(--slate); }
.pay-split-row input, .pay-amount-field input { max-width: 150px; margin: 0; }
.pay-split-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pay-split-btn {
  min-height: 44px; padding: 8px 14px; cursor: pointer;
  background: var(--card); color: var(--ink); font: inherit; font-size: .88rem; font-weight: 600;
  border: 1px solid var(--line-strong); border-radius: 999px;
}
.pay-split-btn:hover, .pay-split-btn:focus-visible { border-color: var(--gold-ink); }
.pay-split-row[hidden], .pay-split-quick[hidden] { display: none; }

.gateway-soon { margin: 0 0 18px; }

/* The payment form now takes the site's form styling, which carries a page
   margin meant for a standalone checkout. Inside a step card it only adds a
   gap above the first field. */
.pay-step form.checkout-form { margin: 0; max-width: none; }

/* "Send now" sits in step 1, outside the form, so it would not inherit the
   form styling. 16px text on purpose: anything smaller and an iPhone zooms the
   whole page the moment a customer taps in, mid-payment. */
.pay-split-row input {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 1rem; background: var(--card); color: var(--ink);
}
.pay-split-row input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft);
}

/* Upload controls. The browser's own "Choose file" is a small grey default:
   easy to miss and hard to hit with a thumb. On the two pages where a customer
   proves they have paid, it is the control that matters most, so it gets a
   tinted drop-zone and a real button. */
form.checkout-form input[type="file"] {
  padding: 10px;
  border-style: dashed;
  background: var(--bg-tint);
  font-size: .9rem;
  color: var(--slate);
  cursor: pointer;
}
form.checkout-form input[type="file"]::file-selector-button {
  margin-right: 12px; min-height: 44px; padding: 10px 18px;
  border: 0; border-radius: 999px;
  background: var(--ink); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer;
}
/* Kept as its own rule: a selector list containing a pseudo-element the
   browser does not know is thrown away whole. */
form.checkout-form input[type="file"]::-webkit-file-upload-button {
  margin-right: 12px; min-height: 44px; padding: 10px 18px;
  border: 0; border-radius: 999px;
  background: var(--ink); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer;
}

@media (max-width: 380px) { .pay-dial { font-size: 1.3rem; } }

/* The "or send a screenshot" alternative. Deliberately reads as an equal
   option rather than a footnote -- for a lot of people it is the easier one,
   and burying it just means they abandon the page instead. */
.pay-alt {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-strong);
}
.pay-alt-or {
  flex: none; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--slate); background: var(--gold-soft);
  border: 1px solid var(--gold-line); border-radius: 999px; padding: 3px 10px;
  margin-top: 2px;
}
.pay-alt-link { font-weight: 700; color: var(--brand-dark); text-decoration: none; }
.pay-alt-link:hover, .pay-alt-link:focus-visible { text-decoration: underline; }
.pay-alt p { margin: 4px 0 0; }

/* An example of the confirmation code, so people know what they are hunting
   for in the SMS. Muted -- it must not read as something to be copied. */
.code-eg {
  background: var(--gold-soft); border: 1px solid var(--gold-line);
  border-radius: 6px; padding: 1px 6px; font-size: .92em;
  color: var(--gold-ink); white-space: nowrap;
}

.pay-ref-box { margin: 0 0 8px; }
.pay-ref-box code {
  display: inline-block; background: var(--brand-soft); color: var(--brand-dark);
  border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 8px 14px; font-size: 1.05rem; font-weight: 700; letter-spacing: .04em;
}

/* ---------- Delivery journey ---------- */

.journey {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--card); padding: 22px 22px 18px; margin: 28px 0;
  max-width: 720px;
}
.journey-head h2 { font-family: var(--font-b); font-size: 1.1rem; margin: 0 0 8px; }

.journey-eta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 4px;
}
.journey-eta .eta-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--gold-ink); font-weight: 700;
}
.journey-eta strong { font-family: var(--font-d); font-size: 1.35rem; color: var(--brand-dark); }
.journey-eta .eta-note { font-size: .86rem; color: var(--slate); }
.journey-eta.done strong { color: var(--good, #1b7f4d); }

/* The map. Scales with the box, so it never needs a horizontal scroll. */
.journey-map { margin: 6px 0 4px; }
.journey-map svg { width: 100%; height: auto; display: block; overflow: visible; }
.journey-map .road {
  fill: none; stroke: var(--line-strong); stroke-width: 3;
  stroke-dasharray: 7 7; stroke-linecap: round;
}
.journey-map .road-done {
  fill: none; stroke: var(--brand); stroke-width: 4; stroke-linecap: round;
}
.journey-map .pin circle { fill: var(--card); stroke: var(--line-strong); stroke-width: 3; }
.journey-map .pin.reached circle { fill: var(--brand); stroke: var(--brand); }
.journey-map .pin text {
  text-anchor: middle; font-size: 15px; fill: var(--slate); font-weight: 600;
}
.journey-map .parcel .halo { fill: var(--brand); opacity: .15; }
.journey-map .parcel rect { fill: var(--brand); stroke: none; }
.journey-map .parcel path { stroke: #fff; stroke-width: 1.6; fill: none; }

/* The stages, as a list. On a phone this is the part that gets read. */
.journey-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.journey-steps li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; font-size: .93rem; color: var(--slate);
}
.journey-steps .dot {
  flex: none; width: 11px; height: 11px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--line-strong);
}
.journey-steps li.done { color: var(--ink); }
.journey-steps li.done .dot { background: var(--brand); border-color: var(--brand); }
.journey-steps li.now { color: var(--ink); font-weight: 700; }
.journey-steps li.now .dot {
  background: var(--brand); border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(201, 168, 76, .25);
}
.journey-steps .when { margin-left: auto; font-size: .82rem; color: var(--slate); font-weight: 400; }

@media (max-width: 520px) {
  .journey { padding: 18px 16px 14px; }
  .journey-map .pin text { font-size: 19px; }
}

/* ---------- Laybys in the customer's portal ---------- */

.layby-standing {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--card); padding: 20px 22px; margin: 22px 0; max-width: 640px;
}
.layby-figures { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-bottom: 14px; }
.lf-label {
  display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--slate); font-weight: 700;
}
.lf-value { font-family: var(--font-d); font-size: 1.4rem; color: var(--ink); }
.lf-value.owing { color: var(--brand-dark); }

.layby-bar.mini { height: 6px; margin: 4px 0; }

.layby-block {
  border-top: 1px solid var(--line); padding-top: 20px; margin-top: 26px; max-width: 640px;
}
.layby-block h3 { font-family: var(--font-b); font-size: 1.05rem; margin-bottom: 10px; }
.layby-block h4 { font-size: .98rem; font-weight: 700; }

.layby-payments td { padding: 9px 0; }
.pill-ok, .pill-wait {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.pill-ok { background: #e7f5ed; color: #177d4f; }
.pill-wait { background: var(--gold-soft); color: var(--gold-ink); }

/* Adding a gift to an open layby. Small tiles -- this is a top-up, not a
   second shopping trip, so it must not outweigh the balance above it. */
.layby-add-grid {
  display: grid; gap: 12px; margin: 14px 0;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.layby-add {
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 10px; display: flex; flex-direction: column; gap: 6px; background: var(--card);
}
.layby-add img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.la-name { font-size: .84rem; line-height: 1.3; }
.la-price { font-weight: 700; color: var(--brand-dark); font-size: .9rem; }
.layby-add select { width: 100%; font-size: .84rem; }
.layby-add .btn { width: 100%; padding: 6px 10px; font-size: .84rem; }

.layby-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.layby-card {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--card); padding: 16px 18px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 6px;
}
.layby-card:hover { border-color: var(--brand); }
.lc-ref { font-size: .74rem; letter-spacing: .06em; color: var(--slate); font-weight: 700; }
.lc-name { font-weight: 600; line-height: 1.35; }
.lc-figures { font-size: .9rem; color: var(--slate); }
.lc-figures strong { color: var(--ink); }
.lc-figures strong.done { color: #177d4f; }
.lc-flag { font-size: .8rem; color: var(--gold-ink); }

/* ---------- Receipt ---------- */
.receipt {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--card); padding: 28px 30px; max-width: 560px; margin-top: 34px;
}
.receipt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.r-brand { display: block; font-family: var(--font-b); font-size: 1.05rem; }
.receipt-head .muted { display: block; }
.r-stamp {
  border: 2px solid #177d4f; color: #177d4f; border-radius: 8px;
  padding: 4px 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; font-size: .78rem; transform: rotate(-4deg);
  text-align: center; line-height: 1.25; flex: none;
}
.r-stamp-verified { border-color: #177d4f; color: #177d4f; }
/* Amber, not red: nothing is wrong, it is simply not checked yet. */
.r-stamp-pending { border-color: #9a6b0f; color: #9a6b0f; font-size: .68rem; }

.r-provisional {
  background: var(--gold-soft); border: 1px solid var(--gold-line);
  border-radius: var(--radius); padding: 16px 18px; margin: 18px 0 22px;
}
.r-provisional p { font-size: .89rem; line-height: 1.65; color: var(--slate); }
.r-provisional p + p { margin-top: 9px; }
.r-provisional strong { color: var(--ink); }

.r-ok { color: #177d4f; }
.r-wait { color: #9a6b0f; }

.r-nomail {
  margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--bg-tint); max-width: 560px;
}
.r-nomail p { font-size: .89rem; line-height: 1.6; color: var(--slate); }
.r-nomail p + p { margin-top: 10px; }
.r-title { font-family: var(--font-d); font-size: 1.5rem; margin: 22px 0 16px; }
.r-meta { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.r-meta td { padding: 5px 0; font-size: .9rem; }
.r-meta td:first-child { color: var(--slate); width: 45%; }
.r-amounts { margin-top: 6px; }
.r-note { margin-top: 16px; font-size: .92rem; }
.r-foot { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }

/* --------------------------------------------------------------------------
   Order pick list — logged-in track page
   -------------------------------------------------------------------------- */

.order-pick-list { display: flex; flex-direction: column; gap: 0; max-width: 720px; margin-bottom: 48px; }

/* Batch group — orders placed on the same date */
.pick-batch { margin-bottom: 28px; }
.pick-batch-date {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}

.order-pick-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: none;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--ink);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.pick-batch .order-pick-card:first-of-type { border-top: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.pick-batch .order-pick-card:last-of-type  { border-radius: 0 0 var(--radius) var(--radius); }
.pick-batch .order-pick-card:only-of-type  { border-radius: var(--radius); border-top: 1px solid var(--line); }
.order-pick-card:hover { background: var(--brand-soft); color: var(--ink); }

/* Thumbnail */
.pick-thumb {
  width: 64px; height: 64px; flex: none;
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden; background: var(--card-img);
}
.pick-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick-thumb-placeholder { display: block; width: 100%; height: 100%; background: var(--bg-tint); }

.pick-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pick-name { font-size: .95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-meta-line { font-size: .78rem; }
.pick-stage { font-size: .8rem; color: var(--gold-ink); font-weight: 500; }

.pick-btn { font-size: .82rem; padding: 7px 14px; white-space: nowrap; flex: none; }

@media (max-width: 540px) {
  .order-pick-card { gap: 12px; }
  .pick-thumb { width: 52px; height: 52px; }
  .pick-btn { display: none; }
  .order-pick-card::after { content: "→"; color: var(--muted); flex: none; font-size: 1rem; }
}

.req { font-weight: 400; font-size: .82rem; color: var(--gold-ink); }

/* ---------- Delivery choice at checkout ---------- */
.delivery-choice .plan-option strong { display: flex; justify-content: space-between; gap: 14px; }
.delivery-fee { font-weight: 700; color: var(--gold-ink); white-space: nowrap; }
.delivery-free, .delivery-nudge {
  font-size: .88rem; line-height: 1.55; padding: 10px 14px;
  border-radius: var(--radius); margin-bottom: 12px;
}
.delivery-free { background: #eaf6ef; border: 1px solid #b9e0c9; color: #0f5c39; }
.delivery-free strong { color: #0d4e30; }
.delivery-nudge { background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--gold-ink); }
.delivery-row td { color: var(--slate); }
.address-block { margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   Enlarging a picture
   -------------------------------------------------------------------------- */

.zoom-trigger {
  display: block; width: 100%; padding: 0; border: none; background: none;
  cursor: zoom-in; position: relative; border-radius: inherit; overflow: hidden;
}
.zoom-trigger img { display: block; width: 100%; }
.zoom-hint {
  position: absolute; right: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(17, 17, 17, .72); color: #fff;
  border-radius: 999px; padding: 7px 13px;
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  opacity: 0; transition: opacity .18s var(--ease);
  pointer-events: none;
}
.zoom-hint svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }
.zoom-trigger:hover .zoom-hint,
.zoom-trigger:focus-visible .zoom-hint { opacity: 1; }
/* A touch screen has no hover, so the hint would never appear otherwise. */
@media (hover: none) { .zoom-hint { opacity: 1; } }

.lightbox {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(12, 8, 4, .93);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 20px; gap: 16px;
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: min(100%, 1100px); max-height: 82vh;
  object-fit: contain; border-radius: var(--radius);
  background: var(--card-img); cursor: default;
}
.lightbox-caption {
  color: #e6e0d4; font-size: .92rem; text-align: center;
  max-width: 60ch; line-height: 1.5;
}
.lightbox-close {
  position: absolute; top: 16px; right: 20px;
  background: rgba(255, 255, 255, .12); border: none; color: #fff;
  width: 42px; height: 42px; border-radius: 50%;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .22); }

/* --------------------------------------------------------------------------
   "Did you know" tips
   -------------------------------------------------------------------------- */

.tip-card {
  /* Above .wa-widget (80). The close button must stay pressable even when the
     two overlap -- a dismissable thing you cannot dismiss is worse than the
     overlap itself. */
  position: fixed; left: 20px; bottom: 20px; z-index: 85;
  width: min(340px, calc(100vw - 40px));
  background: var(--card); border: 1px solid var(--line-strong);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 16px 40px 16px 18px;
  box-shadow: 0 10px 34px rgba(26, 12, 6, .16);
  animation: tip-in .32s var(--ease);
}
.tip-card[hidden] { display: none; }

@keyframes tip-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.tip-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--gold-ink); font-weight: 700; margin-bottom: 6px;
}
.tip-text { font-size: .89rem; line-height: 1.6; color: var(--ink); }
.tip-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.tip-cta {
  font-size: .84rem; font-weight: 600; color: var(--gold-ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.tip-cta[hidden] { display: none; }
.tip-next {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: .82rem; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; margin-left: auto;
}
.tip-next:hover { color: var(--ink); }
.tip-close {
  /* A 44px target, per the usual minimum for a thumb. It was 4px of padding
     around a glyph, which is hard to hit even when nothing is covering it. */
  position: absolute; top: 4px; right: 4px;
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 1.3rem; line-height: 1; color: var(--muted);
}
.tip-close:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .tip-card { animation: none; } }

/* On a phone there is not room for a card and a chat button at once, so the
   tip takes the full width along the bottom and the chat button steps up. */
@media (max-width: 620px) {
  .tip-card {
    left: 10px; right: 10px; bottom: 10px; width: auto;
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--gold);
  }
  /* --tip-h is measured and set by site.js when the card is shown. The
     fallback only applies for the instant before that runs. */
  .tip-card:not([hidden]) ~ .wa-widget {
    bottom: calc(var(--tip-h, 158px) + 24px);
  }
}

/* --------------------------------------------------------------------------
   Cookie choice
   -------------------------------------------------------------------------- */

.cookie-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
  background: var(--ink); color: #f4f0e8;
  border-radius: var(--radius-lg); padding: 18px 22px;
  box-shadow: 0 10px 40px rgba(20, 12, 6, .3);
  max-width: 940px; margin: 0 auto;
}
.cb-copy { flex: 1 1 380px; min-width: 0; }
.cb-copy strong { display: block; font-size: .97rem; margin-bottom: 4px; color: #fff; }
.cb-copy span { font-size: .86rem; color: #c9c2b4; line-height: 1.6; }
.cb-copy a { color: var(--gold); text-decoration: underline; }
.cb-actions { display: flex; gap: 10px; flex: none; }
.cb-actions form { margin: 0; }
.cb-actions .btn { padding: 10px 22px; font-size: .88rem; }
.cb-actions .btn-secondary {
  background: transparent; color: #f4f0e8; border-color: rgba(244, 240, 232, .35);
}
.cb-actions .btn-secondary:hover { background: rgba(244, 240, 232, .1); color: #fff; }

/* Below ~1000px the banner spans the width the chat button sits in. Rather
   than guess an offset -- the banner's height changes with the text and the
   viewport, so any fixed number is wrong somewhere -- the chat button simply
   waits. It comes back the moment they answer, which is one tap away. */
@media (max-width: 1000px) {
  .cookie-bar ~ .wa-widget { display: none; }
}
@media (max-width: 720px) {
  .cookie-bar { left: 10px; right: 10px; bottom: 10px; padding: 16px 18px; gap: 14px; }
  .cb-actions { width: 100%; }
  .cb-actions form { flex: 1; }
  .cb-actions .btn { width: 100%; }
}

.cookie-reset { margin: 0; }
.cookie-reset button {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: .8rem; color: var(--muted);
  text-decoration: underline; text-underline-offset: 2px;
}
.cookie-reset button:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */

.head-search {
  display: flex; align-items: center; gap: 8px; flex: 1 1 260px;
  max-width: 380px; margin: 0 18px;
  background: var(--bg-tint); border: 1px solid var(--line);
  border-radius: 999px; padding: 0 16px; height: 42px;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.head-search:focus-within { border-color: var(--gold); background: var(--card); }
.head-search svg { width: 17px; height: 17px; flex: none; stroke: var(--muted); fill: none; }
.head-search input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font: inherit; font-size: .89rem; color: var(--ink); padding: 0;
}
.head-search input::placeholder { color: var(--muted); }
.head-search input::-webkit-search-cancel-button { cursor: pointer; }

/* The icon-only fallback, for widths where the box itself will not fit. */
.search-link { display: none; }
.search-link svg { width: 19px; height: 19px; stroke: currentColor; fill: none; vertical-align: -3px; }

.search-page-form {
  display: flex; gap: 10px; max-width: 620px; margin-bottom: 30px;
}
.search-page-form input {
  flex: 1; min-width: 0; padding: 13px 18px; font: inherit; font-size: 1rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--card); color: var(--ink);
}
.search-page-form input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

.search-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.chip-page { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-ink); }
.chip-person { background: var(--ink); border-color: var(--ink); color: #f4f0e8; }
.chip-person:hover { background: var(--brand-darker); color: #fff; }
.chip-person .n { background: rgba(255,255,255,.18); color: #fff; }
.search-foot { margin: 34px 0 52px; }

@media (max-width: 1080px) {
  .head-search { max-width: 260px; margin: 0 12px; }
}
/* The search box is on the bar at every width now, so nothing hides it. */

/* --------------------------------------------------------------------------
   Send home — diaspora gifting
   -------------------------------------------------------------------------- */

.home-hero { padding: 64px 0 52px; background: var(--bg-tint); border-bottom: 1px solid var(--line); }
.home-hero .hero-copy { max-width: 720px; }
.home-hero h1 { font-family: var(--font-d); font-size: clamp(2.1rem, 5.4vw, 3.5rem); line-height: 1.06; margin: 18px 0 20px; }
.home-hero h1 em { font-style: italic; color: var(--gold-ink); }

/* The pain, stated plainly */
.truth-band {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: start;
  background: var(--ink); color: #f4f0e8;
  border-radius: var(--radius-lg); padding: 44px 46px; margin: 56px 0;
}
.truth-band .eyebrow { color: var(--gold); }
.truth-band .section-title { color: #fff; margin-bottom: 18px; }
.truth-body { color: #d8d2c6; line-height: 1.72; margin-bottom: 14px; max-width: 52ch; }
.truth-body em { color: var(--gold); font-style: italic; }
.truth-list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.truth-list li { border-left: 2px solid var(--gold); padding-left: 16px; }
.truth-list strong { display: block; font-size: .98rem; color: #fff; margin-bottom: 3px; }
.truth-list span { font-size: .9rem; color: #b8b1a4; line-height: 1.6; }

/* Recipient cards */
.recipient-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px; margin-bottom: 52px;
}
.recipient-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.recipient-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md);
  border-color: var(--gold); color: var(--ink);
}
.recipient-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--card-img); }
.rc-body { padding: 16px 18px 18px; }
.rc-body h3 { font-family: var(--font-d); font-size: 1.16rem; margin-bottom: 4px; }
.rc-blurb { font-size: .87rem; color: var(--slate); line-height: 1.5; margin-bottom: 10px; }
.rc-go { font-size: .84rem; font-weight: 600; color: var(--gold-ink); }

/* Remittance */
.remit-band {
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center;
  background: var(--gold-soft); border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg); padding: 40px 44px; margin: 56px 0;
}
.remit-band p { color: var(--slate); line-height: 1.7; max-width: 54ch; }
.remit-services { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.remit-services li {
  background: var(--card); border: 1px solid var(--gold-line); border-radius: 999px;
  padding: 6px 14px; font-size: .84rem; font-weight: 600; color: var(--gold-ink);
}
.remit-card {
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow-sm);
}
.rm-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.rm-name { font-family: var(--font-d); font-size: 1.25rem; margin: 6px 0 8px; }
.rm-line { font-size: .92rem; color: var(--slate); line-height: 1.6; }
.rm-num {
  font-family: var(--font-d); font-size: 1.35rem; font-weight: 700;
  letter-spacing: .02em; color: var(--ink); user-select: all;
}
.rm-foot { font-size: .82rem; color: var(--muted); margin-top: 14px; line-height: 1.55; }

.remit-steps { display: flex; flex-direction: column; gap: 34px; max-width: 720px; margin-top: 28px; }
.rs-step { display: flex; gap: 20px; align-items: flex-start; }
.rs-step .n {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: var(--gold);
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
}
.rs-step h2 { font-family: var(--font-d); font-size: 1.3rem; margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */

.review-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px; margin-bottom: 52px;
}
.review-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.rv-stars { font-size: 1rem; letter-spacing: 2px; color: var(--line-strong); margin-bottom: 10px; }
.rv-stars .on { color: var(--gold); }
.rv-body { font-size: .93rem; line-height: 1.66; color: var(--ink); margin-bottom: 14px; }
.rv-who { font-size: .88rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rv-verified { font-size: .76rem; color: #177d4f; font-weight: 600; }
.rv-item { margin-top: 4px; }
.rv-reply {
  margin-top: 14px; padding: 12px 14px; background: var(--bg-tint);
  border-radius: 10px; border-left: 2px solid var(--gold);
}
.rv-reply strong { font-size: .8rem; color: var(--gold-ink); display: block; margin-bottom: 4px; }
.rv-reply p { font-size: .88rem; color: var(--slate); line-height: 1.6; }

.write-review {
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
  background: var(--gold-soft); border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg); padding: 28px 32px; margin: 44px 0;
}
.write-review .section-title { margin-bottom: 6px; }
.write-review p { max-width: 52ch; line-height: 1.6; }

/* Star picker on the review form */
.star-pick { display: inline-flex; flex-direction: row-reverse; gap: 4px; margin-bottom: 8px; }
.star-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-pick label {
  font-size: 2rem; line-height: 1; color: var(--line-strong);
  cursor: pointer; transition: color .12s var(--ease);
}
.star-pick input:checked ~ label,
.star-pick label:hover, .star-pick label:hover ~ label { color: var(--gold); }
.star-pick input:focus-visible + label { outline: 2px solid var(--gold-ink); outline-offset: 2px; }

/* The honest stand-in while there are no reviews yet */
.new-shop {
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg); padding: 42px 46px; margin: 56px 0;
}
.ns-lead { max-width: 62ch; margin-bottom: 30px; }
.ns-body { color: var(--slate); line-height: 1.74; margin-top: 12px; }
.ns-list {
  list-style: none; counter-reset: ns;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px;
}
.ns-list li { counter-increment: ns; padding-left: 42px; position: relative; }
.ns-list li::before {
  content: counter(ns); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--gold-ink);
  display: grid; place-items: center; font-size: .82rem; font-weight: 700;
}
.ns-list strong { display: block; margin-bottom: 4px; font-size: .97rem; }
.ns-list span { font-size: .89rem; color: var(--slate); line-height: 1.62; }
.ns-foot {
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
}
.ns-count { font-size: .92rem; color: var(--slate); max-width: 56ch; line-height: 1.6; }
.ns-count strong { color: var(--ink); font-size: 1.05rem; }

@media (max-width: 860px) {
  .truth-band, .remit-band { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; }
  .new-shop { padding: 30px 24px; }
  .home-hero { padding: 44px 0 36px; }
}

@media print {
  .no-print, header, footer, .wa-panel, .wa-button { display: none !important; }
  .receipt { border: none; padding: 0; max-width: none; }
}

/* ---- The gifting calendar ------------------------------------------------
   The order-by date is the only thing on these pages a shopper cannot work
   out for themselves, so it is styled to be the thing the eye lands on. */

.cal-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 56px; }

.cal-row {
  display: grid;
  grid-template-columns: 84px 1fr 120px;
  gap: 22px;
  align-items: center;
  padding: 20px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--ink);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}
.cal-row:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
/* Past the cut-off the row is still useful — it just must not look like an
   invitation to order something that cannot arrive. */
.cal-row.is-late { opacity: .72; }

.cal-when {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 6px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  min-height: 84px;
}
.cal-month {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-ink);
}
.cal-day { font-size: 1.9rem; font-weight: 700; line-height: 1.05; }
.cal-day-window { font-size: .95rem; font-weight: 700; line-height: 1.3; text-align: center; }
.cal-year { font-size: .72rem; color: var(--muted); }

.cal-body h2 { font-size: 1.22rem; margin: 0 0 4px; }
.cal-blurb { margin: 0 0 4px; font-size: .93rem; color: var(--slate); }
.cal-note { margin: 0 0 10px; }
.cal-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.cal-tag {
  font-size: .8rem; font-weight: 600;
  padding: 5px 11px; border-radius: 999px;
  background: var(--brand-soft); color: var(--slate);
}
.cal-tag-urgent { background: var(--amber-soft); color: var(--amber-ink); }
.cal-tag-late   { background: var(--red-soft);  color: #96382f; }
.cal-count { font-size: .84rem; color: var(--muted); }
.cal-rescue { margin: 10px 0 0; color: var(--green); font-weight: 600; }

.cal-shot img {
  width: 120px; height: 96px; object-fit: cover;
  border-radius: var(--radius); background: var(--card-img);
}

.cal-foot {
  padding: 30px 28px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: 56px;
}
.cal-foot h2 { font-size: 1.15rem; margin: 0 0 10px; }
.cal-foot p { margin: 0 0 10px; font-size: .93rem; color: var(--slate); line-height: 1.7; }
.cal-foot p:last-child { margin-bottom: 0; }

/* ---- One gift day -------------------------------------------------------- */

.day-head { margin: 40px 0 8px; }
.day-head .eyebrow { display: block; margin: 12px 0 6px; }

.day-clock {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 20px; padding: 18px 22px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  max-width: 60ch;
}
.day-clock b { font-size: 1.08rem; }
.day-clock span { font-size: .92rem; color: var(--slate); line-height: 1.65; }
.day-clock-urgent { background: var(--amber-soft); border-color: #f0d9b8; }
.day-clock-late   { background: var(--red-soft);  border-color: #f0c9c4; }

/* ---- Home page: the next three dates ------------------------------------- */

.day-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 60px;
}
.day-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 22px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none; color: var(--ink);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.day-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.day-card.is-late { opacity: .72; }
.day-date {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-ink);
}
.day-card h3 { font-size: 1.14rem; margin: 0; }
.day-card p { margin: 0; font-size: .89rem; color: var(--slate); line-height: 1.6; flex: 1; }
.day-cut {
  margin-top: 10px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: .84rem; font-weight: 600; color: var(--amber-ink);
}

/* ---- In Harare now ------------------------------------------------------- */

.local-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 26px 28px;
  background: var(--green-soft);
  border: 1px solid #bfe7d4;
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
}
.local-fact { display: flex; flex-direction: column; gap: 3px; }
.local-fact b { font-size: 1.24rem; color: #05714f; }
.local-fact span { font-size: .87rem; color: var(--slate); }

/* The badge that earns the page: on a card, in a grid of imports, it is the
   one word that explains why this item costs the same but arrives sooner. */
.local-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  background: var(--green-soft); color: #05714f;
  border: 1px solid #bfe7d4;
}

@media (max-width: 900px) {
  .day-strip { grid-template-columns: 1fr; }
  .local-band { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 720px) {
  .cal-row { grid-template-columns: 64px 1fr; padding: 16px 18px; gap: 16px; }
  .cal-shot { display: none; }
  .cal-day { font-size: 1.5rem; }
  .audience-split { grid-template-columns: 1fr; }
}

/* Local stock states a shorter wait, so it must not look like the same note
   in the same grey as everything else. */
.delivery-note-fast {
  background: var(--green-soft);
  border: 1px solid #bfe7d4;
  border-radius: var(--radius);
  padding: 10px 14px;
  color: #05714f;
  font-weight: 600;
}
.delivery-note-fast svg { stroke: #05714f; }

/* "In Harare" sits at the head of the category bar, ahead of the categories,
   because it is a promise rather than a department. */
.cat-local { color: #05714f !important; font-weight: 700 !important; }

/* ---- Blog & Laughs -------------------------------------------------------
   A feed, not a grid. One column keeps each post the size of a thing worth
   reading, and leaves room for a product rail every few posts without the
   rail looking like an advert wedged into a wall of tiles. */

.laugh-rule {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 18px; margin-bottom: 28px;
  background: var(--green-soft); border: 1px solid #bfe7d4;
  border-radius: var(--radius);
  font-size: .89rem; color: #05714f; line-height: 1.6;
  max-width: 68ch;
}
.laugh-rule svg { width: 20px; height: 20px; flex: none; stroke: #05714f; margin-top: 1px; }

.laugh-feed {
  display: flex; flex-direction: column; gap: 18px;
  max-width: 640px; margin: 0 0 40px;
}

.laugh-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px 14px;
}

.laugh-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.laugh-head > div { display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
.laugh-head b { font-size: .98rem; }

.laugh-avatar {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gold-soft); color: var(--gold-ink);
  border: 1px solid var(--gold-line);
  font-weight: 700; font-size: 1rem;
}

/* The badge is the page's whole claim, so it is stated on every post rather
   than once at the top where it can be scrolled past. */
.laugh-verified { font-size: .76rem; color: var(--green); font-weight: 600; }

.laugh-mood {
  font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--brand-soft); color: var(--slate);
}
.laugh-mood-funny     { background: var(--amber-soft); color: var(--amber-ink); }
.laugh-mood-proud     { background: var(--gold-soft);  color: var(--gold-ink); }
.laugh-mood-surprised { background: #eef4f6;           color: #3a5a68; }

.laugh-body { margin: 0 0 12px; font-size: .97rem; line-height: 1.7; color: var(--ink); }

.laugh-shot { display: block; border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.laugh-shot img {
  width: 100%; max-height: 460px; object-fit: cover;
  background: var(--card-img); display: block;
}

.laugh-item { margin: 0 0 10px; font-size: .87rem; color: var(--slate); }
.laugh-item a { color: var(--brand-dark); font-weight: 600; }

.laugh-reply {
  margin: 0 0 12px; padding: 11px 14px;
  background: var(--bg-tint); border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .89rem; color: var(--slate); line-height: 1.62;
}
.laugh-reply b { color: var(--ink); margin-right: 5px; }

.laugh-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid var(--line);
}
.laugh-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px;
  font-size: .9rem; cursor: pointer; color: var(--slate);
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.laugh-btn:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.laugh-btn.is-done { border-color: var(--gold-line); background: var(--gold-soft); cursor: default; }
.laugh-when { font-size: .8rem; color: var(--muted); }

/* The rail between posts. Set apart so it reads as the shop talking, not as
   another customer's post. */
.laugh-shelf {
  padding: 18px 20px 6px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.laugh-shelf-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 12px;
}

/* Posting form */
.mood-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 8px; }
.mood-chip { cursor: pointer; }
.mood-chip input { position: absolute; opacity: 0; pointer-events: none; }
.mood-chip span {
  display: inline-block; padding: 8px 16px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: .9rem; color: var(--slate);
  transition: all .18s var(--ease);
}
.mood-chip input:checked + span {
  background: var(--ink); color: #fff; border-color: var(--ink);
}

.post-rules {
  display: flex; flex-direction: column; gap: 5px;
  margin-top: 22px; padding: 14px 16px;
  background: var(--bg-tint); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.post-rules strong { font-size: .93rem; }
.post-rules span { line-height: 1.62; }

/* ---- Condition badges (phones) ------------------------------------------
   A used-phone buyer decides on this line before anything else, so it is not
   allowed to be small print. */
.cond-badge {
  display: inline-flex; align-items: center;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  background: var(--brand-soft); color: var(--slate);
}
.cond-new  { background: var(--green-soft); color: #05714f; border: 1px solid #bfe7d4; }
.cond-used { background: var(--amber-soft); color: var(--amber-ink); border: 1px solid #f0d9b8; }

.cond-line {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 0 0 14px;
}
.cond-facts {
  margin: 0 0 16px; padding: 14px 16px;
  background: var(--bg-tint); border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .9rem; color: var(--slate); line-height: 1.7;
}
.cond-facts b { color: var(--ink); }

@media (max-width: 720px) {
  .laugh-feed { max-width: none; }
  .laugh-card { padding: 16px 16px 12px; }
}

/* ---- Blog & Laughs: open posting ----------------------------------------
   Three kinds of author now share the feed, and they must not look alike.
   A shop post reading as a customer post is the fastest way to lose a feed. */

.laugh-shop {
  font-size: .76rem; font-weight: 700; color: var(--gold-ink);
  letter-spacing: .02em;
}
/* "Member" is deliberately quiet next to "Verified buyer". The badge that
   means something has to look like it means more than the one that doesn't. */
.laugh-member { font-size: .76rem; color: var(--muted); }

.laugh-avatar.is-shop {
  background: var(--ink); color: #fff; border-color: var(--ink);
}

/* The product card inside a shop post: the reason the feed lives here. */
.laugh-featured {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 12px; padding: 10px 14px 10px 10px;
  background: var(--bg-tint); border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.laugh-featured:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.laugh-featured img {
  width: 62px; height: 62px; flex: none; object-fit: cover;
  border-radius: 10px; background: var(--card-img);
}
.laugh-featured span { display: flex; flex-direction: column; gap: 3px; }
.laugh-featured b { font-size: .95rem; line-height: 1.35; }
.laugh-featured em { font-style: normal; font-size: .84rem; color: var(--gold-ink); font-weight: 600; }

/* Topic filter above the feed. */
.topic-row { margin-bottom: 22px; }
.topic-row .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.topic-row .chip.on .n { color: #fff; opacity: .75; }

/* ---- The feed's own skin -------------------------------------------------
   A different room in the same building. The shop is warm ivory and champagne
   gold, which is right for buying and wrong for reading: it makes a wall of
   posts look like a catalogue. So the feed cools the ground, drops the serif
   headings for the interface face, and swaps gold for ink-blue as the accent.

   Only tokens are redefined. Every component keeps its own rules, so nothing
   here can leak into the shop and nothing in the shop needs to know about it. */

.feed-skin {
  --bg: #f2f4f7;
  --bg-tint: #e9edf2;
  --card: #ffffff;
  --card-img: #eef1f5;
  --line: #dde3ea;
  --line-strong: #c2ccd8;
  --brand-soft: #eaeff5;
  --slate: #4a5567;
  --muted: #8a95a5;

  /* Ink-blue instead of champagne. Reads as conversation, not as luxury. */
  --gold: #2f5fd0;
  --gold-soft: #eaf0fd;
  --gold-line: #c4d5f7;
  --gold-ink: #1f41a8;

  background: var(--bg);
}

/* The shop's display serif is doing a job on a product page that it is not
   doing above a paragraph somebody typed on their phone. */
.feed-skin .section-title,
.feed-skin .laugh-card h2,
.feed-skin h1 {
  font-family: var(--font-b);
  font-weight: 700;
  letter-spacing: -.02em;
}

.feed-skin .laugh-card {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(20, 30, 50, .05);
}
.feed-skin .laugh-avatar {
  background: #e2e9f6; color: #1f41a8; border-color: #c9d8f2;
}
.feed-skin .laugh-avatar.is-shop { background: #1f2a3d; color: #fff; border-color: #1f2a3d; }
.feed-skin .laugh-verified { color: #12805c; }
.feed-skin .laugh-shop { color: #1f41a8; }
.feed-skin .laugh-reply { border-left-color: #2f5fd0; }
.feed-skin .topic-row .chip.on { background: #1f41a8; border-color: #1f41a8; }
.feed-skin .laugh-rule {
  background: #eaf0fd; border-color: #c4d5f7; color: #1f41a8;
}
.feed-skin .laugh-rule svg { stroke: #1f41a8; }

/* ---- The header button ---------------------------------------------------
   It goes somewhere that is not the shop, so it should not look like the links
   that do. A live dot rather than a colour swap: it says "something is
   happening in here" without shouting over the Cart and VIP links. */

.laughs-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: #1f41a8;
  font-weight: 600;
  background: #eaf0fd;
  border: 1px solid #c4d5f7;
  border-radius: 999px;
}
.laughs-link:hover { background: #dce7fb; color: #16307c; }

.laughs-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2f5fd0;
  box-shadow: 0 0 0 0 rgba(47, 95, 208, .55);
  animation: laughs-pulse 2.4s ease-out infinite;
}
@keyframes laughs-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47, 95, 208, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(47, 95, 208, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 95, 208, 0); }
}
/* Anyone who has asked not to see motion gets a plain dot. */
@media (prefers-reduced-motion: reduce) {
  .laughs-dot { animation: none; }
}

/* ---- Reactions -----------------------------------------------------------
   A row of what people have already left, plus a "+" that opens six common
   ones and a box for any emoji at all. Chips rather than a single button:
   seeing that four people left a heart is the part that makes somebody leave
   the fifth. */

.laugh-foot { flex-wrap: wrap; gap: 10px; }
.laugh-foot-right { display: flex; align-items: center; gap: 12px; }

.react-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.react-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  font-size: .92rem; line-height: 1; cursor: pointer; color: var(--slate);
  transition: border-color .18s var(--ease), background .18s var(--ease),
              transform .18s var(--ease);
}
.react-chip:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.react-face { font-size: 1.02rem; }
.react-n { font-size: .82rem; font-variant-numeric: tabular-nums; }

/* The chip's own acknowledgement: a quick squash-and-stretch so the tap has
   somewhere to land even before the server answers. */
.react-chip.is-hit { animation: react-pop .42s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes react-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); }
  60%  { transform: scale(.94); }
  100% { transform: scale(1); }
}

/* The picker */
.react-add { position: relative; }
.react-add > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: 1px dashed var(--line-strong); border-radius: 50%;
  color: var(--muted); font-size: 1.05rem; line-height: 1;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.react-add > summary::-webkit-details-marker { display: none; }
.react-add > summary:hover { border-color: var(--gold); color: var(--gold-ink); }

.react-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 30;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  width: max-content; max-width: 240px;
  padding: 8px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.react-opt {
  background: none; border: 0; cursor: pointer;
  font-size: 1.2rem; line-height: 1; padding: 5px 6px; border-radius: 8px;
  transition: transform .15s var(--ease), background .15s var(--ease);
}
.react-opt:hover { background: var(--bg-tint); transform: scale(1.22); }
.react-any {
  width: 100%; margin-top: 4px; padding: 6px 9px;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: .86rem;
}

/* The emoji that flies off the button. Fixed-position so it can leave the
   card without the card needing overflow visible. */
.react-fly {
  position: fixed; z-index: 60; pointer-events: none;
  font-size: 1.5rem; transform: translate(-50%, 0);
  animation: react-fly 1.1s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes react-fly {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.5) rotate(-8deg); }
  18%  { opacity: 1; transform: translate(-50%, -14px) scale(1.35) rotate(4deg); }
  100% { opacity: 0; transform: translate(-50%, -86px) scale(.95) rotate(-6deg); }
}

/* ---- Comments ------------------------------------------------------------ */

.comment-toggle {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: .84rem; color: var(--slate); font-weight: 600;
}
.comment-toggle:hover { color: var(--ink); text-decoration: underline; }

.comment-box {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.comment { display: flex; flex-direction: column; gap: 2px; }
.comment p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ink); }
.comment-who { font-size: .84rem; font-weight: 700; color: var(--slate); }
.comment-tag {
  font-style: normal; font-weight: 600; font-size: .74rem;
  margin-left: 6px; color: var(--gold-ink);
}
.comment-tag.is-buyer { color: var(--green); }
.comment.is-shop {
  padding: 9px 12px; background: var(--bg-tint);
  border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0;
}
.comment-none { margin: 0; }

.comment-form { display: flex; gap: 8px; }
.comment-form input {
  flex: 1; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: .9rem; background: var(--card);
}
.comment-form input:focus { outline: none; border-color: var(--line-strong); }
.comment-signin { margin: 0; }

/* ---- The mute switch -----------------------------------------------------
   A shop that beeps at people with no way to stop it is a shop they leave. */
.feed-tools { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.mute-btn {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; font-size: .78rem; color: var(--muted); cursor: pointer;
}
.mute-btn:hover { border-color: var(--line-strong); color: var(--slate); }
.mute-btn[aria-pressed="true"] { color: var(--muted); opacity: .7; }

.feed-skin .react-chip.is-hit { animation-name: react-pop; }
.feed-skin .react-add > summary:hover { border-color: #2f5fd0; color: #1f41a8; }

@media (prefers-reduced-motion: reduce) {
  .react-chip.is-hit { animation: none; }
  .react-fly { display: none; }
}

/* ---- The shop's own identity on the feed ---------------------------------
   A tick and the mark, so the house is never mistaken for a customer. Both
   only ever appear on author_kind='shop', which nothing but the admin can
   set -- the badge is worthless the moment anyone else can wear it. */

.verified-tick {
  width: 15px; height: 15px; flex: none;
  vertical-align: -3px; margin-right: 3px;
  fill: var(--gold);
}
.verified-tick .tick { stroke: #fff; }
.verified-tick.sm { width: 13px; height: 13px; vertical-align: -2px; }
.feed-skin .verified-tick { fill: #1f41a8; }

.laugh-shop { display: inline-flex; align-items: center; }

/* The avatar carries the logo rather than an initial. */
.laugh-avatar.is-shop { padding: 0; overflow: hidden; background: #fff; }
.laugh-avatar.is-shop img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.feed-skin .laugh-avatar.is-shop { background: #fff; border-color: #c9d8f2; }

.comment-tag { display: inline-flex; align-items: center; }

/* ---- Confetti ------------------------------------------------------------
   Once a day, on the home page. Fixed and click-through, so it never lands on
   top of a button somebody is trying to press. */
#confetti {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 90;
  overflow: hidden;
  display: none;
}
#confetti.is-falling { display: block; }

.confetti-bit {
  position: absolute; top: -24px;
  display: block;
  opacity: 0;
  animation-name: confetti-fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
  8%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(105vh) rotate(620deg); }
}

@media (prefers-reduced-motion: reduce) {
  #confetti { display: none !important; }
}

/* The name and its tick sit on one line, the way a verified account reads
   everywhere else. */
.laugh-name { display: inline-flex; align-items: center; gap: 4px; }
.laugh-name .verified-tick { margin-right: 0; }

/* ==========================================================================
   The header
   ==========================================================================
   Logo, search, cart, menu. Everything else is behind the button, at every
   width.

   The eleven links never fitted: two wrapped rows on a desktop, four on a
   phone -- 240px of an 812px screen, thirty per cent of the viewport, before a
   single gift was visible. A wrapping nav is a nav with too much in it, and
   shrinking the type only buys one more link before it wraps again.
   ========================================================================== */

.head-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo search actions";
  align-items: center;
  gap: 8px 16px;
  padding-top: 12px;
  padding-bottom: 10px;
}
.logo { grid-area: logo; }
.head-search { grid-area: search; display: flex; width: 100%; max-width: 520px; margin: 0 auto; }
.head-mobile { grid-area: actions; display: flex; align-items: center; gap: 9px; }

/* The drawer sits outside <header> on purpose: the header carries a
   backdrop-filter, which would make it the containing block for anything
   fixed inside it and pin the panel to the header's own 120px box. */

.head-icon {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink);
  cursor: pointer; padding: 0;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.head-icon:hover { border-color: var(--line-strong); background: var(--bg-tint); }
.head-icon svg { width: 21px; height: 21px; stroke: currentColor; }
.head-icon:active { transform: scale(.94); }

.head-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--ink); color: #fff;
  font-size: .68rem; font-weight: 700;
}

/* A label beside the button on wider screens: an unlabelled hamburger is the
   most-argued-about control in interface design, and the argument goes away
   the moment it says what it is. */
.menu-btn { width: auto; padding: 0 14px; gap: 9px; }
.menu-word { font-size: .88rem; font-weight: 600; }
@media (max-width: 620px) {
  .menu-word { display: none; }
  .menu-btn { width: 40px; padding: 0; }
}

/* Three lines that become a cross. Drawn rather than swapped between two
   icons, so the change is a movement rather than a jump. */
.burger, .burger::before, .burger::after {
  display: block; width: 17px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .24s var(--ease), opacity .18s var(--ease);
}
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { transform: translateY(-6px); }
.burger::after  { transform: translateY(6px); }
.menu-btn[aria-expanded="true"] .burger { background: transparent; }
.menu-btn[aria-expanded="true"] .burger::before { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .burger::after  { transform: rotate(-45deg); }

/* ---- the menu panel -----------------------------------------------------
   A small card under the button, not a full-height slab. A drawer down the
   whole side of the screen is the right shape for an app with twenty sections;
   this is nine links, and a panel the size of its own contents reads as a menu
   rather than as the page being taken over.

   It lives outside <header> because the header carries a backdrop-filter,
   which would make it the containing block for anything fixed inside it and
   pin the panel to the header's own box. */
.head-actions {
  position: fixed;
  top: calc(var(--header-h, 120px) + 8px); right: 16px;
  width: 248px;
  z-index: 200;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 1px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(20, 20, 20, .16), 0 2px 6px rgba(20, 20, 20, .06);
  /* Grows out of the button rather than appearing whole. */
  transform-origin: top right;
  transform: scale(.94) translateY(-6px);
  opacity: 0;
  visibility: hidden;
  transition: transform .18s var(--ease), opacity .16s var(--ease),
              visibility 0s linear .18s;
  max-height: calc(100vh - var(--header-h, 120px) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.menu-open .head-actions {
  transform: scale(1) translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform .2s var(--ease), opacity .16s var(--ease),
              visibility 0s;
}

.head-actions .head-link,
.head-actions .nav-cta {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  font-size: .95rem;
  border-radius: 10px;
}
.head-actions .head-link:hover { background: var(--bg-tint); }
.head-actions .nav-cta { margin-top: 7px; text-align: center; padding: 11px 12px; }
.head-actions .search-link { display: none; }   /* the box is already on screen */
.head-actions .laughs-link { justify-content: flex-start; }

/* The delivery promise is a fact, not a link, so it sits apart from them. */
.head-actions .ship-chip {
  display: flex; align-items: center; gap: 7px;
  margin: 2px 4px 8px; padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
  font-size: .82rem; color: var(--muted);
}
.head-actions .ship-chip svg { width: 15px; height: 15px; }

/* No close button: the panel is small enough that tapping anywhere off it is
   the obvious way out, and a X inside a nine-item menu is clutter. */
.menu-close { display: none; }

/* An invisible catcher rather than a dim overlay. Dimming the page behind a
   menu this small looks like an error state; it still has to swallow the
   click that closes it. */
.menu-scrim {
  position: fixed; inset: 0; z-index: 190;
  background: transparent;
  opacity: 0; pointer-events: none;
}
body.menu-open .menu-scrim { opacity: 1; pointer-events: auto; }

@media (max-width: 720px) {
  /* Under the two-row header the panel starts lower, and widens to sit
     comfortably against both edges on a narrow screen. */
  .head-actions {
    right: 12px; left: 12px;
    width: auto;
  }
}

/* ---- condense on scroll -------------------------------------------------
   Past the first screenful the header stops introducing the shop and starts
   getting out of the way. */
.site-header { transition: box-shadow .2s var(--ease); }
.site-header.is-condensed .head-main { padding-top: 6px; padding-bottom: 5px; }
.site-header.is-condensed .logo-mark { width: 30px; height: 30px; }
.site-header.is-condensed .logo-text small,
.site-header.is-condensed .logo-text .endorse { display: none; }
.site-header.is-condensed .logo-text strong { font-size: 1.1rem; }
.site-header.is-condensed .cat-bar a { padding: 7px 11px; font-size: .82rem; }
.site-header.is-condensed { box-shadow: 0 2px 14px rgba(20, 20, 20, .07); }

@media (max-width: 720px) {
  /* The search box takes a row of its own rather than squeezing between the
     logo and the buttons. */
  .head-main {
    grid-template-columns: auto 1fr;
    grid-template-areas: "logo actions" "search search";
  }
  .head-search { max-width: none; margin: 0; }
  .site-header.is-condensed .head-search { display: none; }
}

/* Anyone who asked for less motion gets the same layout without the slide. */
@media (prefers-reduced-motion: reduce) {
  .head-actions, .menu-scrim, .head-search, .burger,
  .burger::before, .burger::after { transition: none; }
}

/* ---- Write a post --------------------------------------------------------
   The one action the feed exists to get. It was a text link in the corner
   styled like a "see more", which is how you build a feed nobody posts to. */
.btn-post {
  display: inline-flex; align-items: center; gap: 8px;
  flex: none; white-space: nowrap;
}
.btn-post svg { width: 17px; height: 17px; stroke: currentColor; }
.feed-skin .btn-post { background: #1f41a8; border-color: #1f41a8; }
.feed-skin .btn-post:hover { background: #16307c; border-color: #16307c; }

/* The second invitation, at the end of the feed. Somebody who has just read
   the lot is the likeliest person on the site to write one. */
.post-invite {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
  margin: 8px 0 32px;
  padding: 26px 22px;
  background: var(--card);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  max-width: 640px;
}
.post-invite p { margin: 0; }
.post-invite .btn-post { margin-top: 12px; }

@media (max-width: 720px) {
  .post-invite { max-width: none; }
  /* On a phone the header button would push the title into two lines, so it
     drops under it instead of sitting beside it. */
  .section-head .btn-post { margin-top: 12px; }
}

/* ---- The emoji picker ----------------------------------------------------
   On a phone the keyboard has one and people keep their favourites there. On
   a desktop there is nothing within reach, so the panel has to carry its own. */
.react-menu { width: 268px; max-width: 84vw; padding: 8px; }
.react-quick {
  display: flex; gap: 3px; flex-wrap: wrap;
  padding-bottom: 7px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.emoji-panel { display: flex; flex-direction: column; gap: 7px; }
.emoji-find input {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: .85rem; background: var(--bg-tint);
}
.emoji-find input:focus { outline: none; border-color: var(--gold); background: var(--card); }

.emoji-body { max-height: 214px; overflow-y: auto; overscroll-behavior: contain; }
.emoji-head {
  margin: 6px 0 4px; font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.emoji-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.emoji-cell {
  background: none; border: 0; cursor: pointer;
  font-size: 1.18rem; line-height: 1; padding: 5px 0; border-radius: 7px;
  transition: transform .12s var(--ease), background .12s var(--ease);
}
.emoji-cell:hover { background: var(--bg-tint); transform: scale(1.25); }
.emoji-cell:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.emoji-none { margin: 10px 2px; font-size: .82rem; color: var(--muted); }

/* ---- Share --------------------------------------------------------------- */
.share-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: .84rem; font-weight: 600; color: var(--slate);
}
.share-btn svg { width: 15px; height: 15px; stroke: currentColor; }
.share-btn:hover { color: var(--ink); }
.share-btn.is-done { color: var(--green); }

a.laugh-when { text-decoration: none; }
a.laugh-when:hover { color: var(--slate); text-decoration: underline; }

/* ---- Sort tabs ----------------------------------------------------------- */
.feed-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sort-tabs { display: inline-flex; gap: 2px; padding: 3px;
  background: var(--bg-tint); border-radius: 999px; }
.sort-tab {
  padding: 6px 14px; border-radius: 999px;
  font-size: .84rem; font-weight: 600; color: var(--slate); text-decoration: none;
}
.sort-tab.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.feed-skin .sort-tab.on { color: #1f41a8; }

/* ---- The milestone burst -------------------------------------------------
   Fires only for the person who pushed a post past ten, twenty-five, fifty. */
.react-spark {
  position: fixed; z-index: 60; pointer-events: none;
  width: 6px; height: 6px; border-radius: 2px;
  animation: react-spark 1.1s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes react-spark {
  0%   { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0deg); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-30px + 60px * var(--x, .5)), -70px)
                                scale(1) rotate(300deg); }
}

@media (prefers-reduced-motion: reduce) {
  .react-spark { display: none; }
  .emoji-cell:hover { transform: none; }
}

/* The picker opens upward by default; near the top of the page there is no
   room above it, so it flips. */
.react-add.opens-down .react-menu { bottom: auto; top: calc(100% + 8px); }

/* ---- The buyer tick ------------------------------------------------------
   Green rather than the shop's gold: gold is the house's own mark (see
   .verified-tick on shop posts) and the two must not be mistaken for each
   other. A customer badge that looks like the shop's badge proves nothing. */
.laugh-verified, .comment-tag.is-buyer {
  display: inline-flex; align-items: center; gap: 3px;
}
.laugh-verified svg, .comment-tag.is-buyer svg {
  width: 13px; height: 13px; flex: none;
  fill: var(--green);
}
.laugh-verified svg .tick, .comment-tag.is-buyer svg .tick { stroke: #fff; }
.feed-skin .laugh-verified svg, .feed-skin .comment-tag.is-buyer svg { fill: #12805c; }

/* ---- Ranks ---------------------------------------------------------------
   Three ticks, three colours, and they must never be confusable: gold is the
   shop's own, blue is a paying member, green is anyone who has bought. A
   badge scheme where two of them look alike proves nothing about either.
   The key on the feed (_rank_key.html) has to stay in step with this. */

.rank { display: inline-flex; align-items: center; gap: 3px; line-height: 1.2; }
.rank-tick { width: 13px; height: 13px; flex: none; }
.rank-tick .tick { stroke: #fff; }
.rank-word { font-size: .76rem; font-weight: 600; }

.rank-shop  .rank-tick { fill: #2f5fd0; }
.rank-shop  .rank-word { color: #1f41a8; }

.rank-vip   .rank-tick { fill: #c9a84c; }
.rank-vip   .rank-word { color: #7a5c10; }

.rank-buyer .rank-tick { fill: var(--green); }
.rank-buyer .rank-word { color: var(--green); }

/* Quiet on purpose. The badge that means something has to look like it means
   more than the one that doesn't. */
.rank-member .rank-word { color: var(--muted); font-weight: 500; }

/* The feed skin redefines --gold as its blue accent, so every rank colour here
   is literal. A badge that changes colour with the page furniture is not a
   badge -- this is exactly what turned the shop's tick the wrong colour. */
.feed-skin .rank-shop .rank-tick { fill: #2f5fd0; }
.feed-skin .rank-shop .rank-word { color: #1f41a8; }
.feed-skin .rank-vip .rank-tick { fill: #c9a84c; }
.feed-skin .rank-vip .rank-word { color: #8a6a15; }
.feed-skin .rank-buyer .rank-tick { fill: #12805c; }
.feed-skin .rank-buyer .rank-word { color: #12805c; }

/* Inside a comment everything is a size smaller. */
.comment-who .rank-tick { width: 11px; height: 11px; }
.comment-who .rank-word { font-size: .73rem; }

/* ---- The key -------------------------------------------------------------
   Closed by default: it is an answer to a question, not something to read
   before you have asked it. */
.rank-key {
  max-width: 640px;
  margin: 0 0 20px;
  font-size: .88rem;
}
.rank-key > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--slate); font-weight: 600; font-size: .82rem;
}
.rank-key > summary::-webkit-details-marker { display: none; }
.rank-key > summary::after { content: "\2304"; font-size: .9rem; line-height: 1; }
.rank-key[open] > summary::after { content: "\2303"; }
.rank-key > summary:hover { border-color: var(--line-strong); color: var(--ink); }

.rank-key ul {
  list-style: none; margin: 10px 0 0; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 11px;
}
.rank-key li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.rank-key em {
  font-style: normal; font-size: .85rem; color: var(--slate);
  line-height: 1.55; flex: 1; min-width: 200px;
}

/* Two fields to a row on the request form: where and when belong side by side,
   and stacking them made an already long form look longer. */
.req-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.req-pair > div { min-width: 0; }
@media (max-width: 620px) { .req-pair { grid-template-columns: 1fr; } }

/* ---- Call and WhatsApp ---------------------------------------------------
   Two lines, side by side, each saying which is which. Somebody who rings the
   WhatsApp number and gets no answer concludes the shop is not real, which is
   the opposite of what a contact block is for. */
.contact-pair { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; }

.contact-line {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); text-decoration: none;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.contact-line:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.contact-line svg { width: 19px; height: 19px; flex: none; stroke: var(--slate); }
.contact-line .ico-wa { fill: #25d366; stroke: none; }
.contact-line span { display: flex; flex-direction: column; line-height: 1.25; }
.contact-line b {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.contact-line span { font-size: .93rem; font-variant-numeric: tabular-nums; }

.footer-contact { margin-top: 14px; }
.footer-contact > strong { display: block; font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Social links. Same pill as the contact pair but tighter -- these are a
   footnote to "talk to us", not a second way of doing it. Brand colours are
   literal hex on purpose: the feed skin redefines the palette variables, and a
   Facebook mark in the shop's green reads as a fake. */
.social-pair { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }

.social-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); text-decoration: none;
  font-size: .88rem; font-weight: 600;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.social-link:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.social-link svg { width: 17px; height: 17px; flex: none; }
.social-link .ico-fb { fill: #1877f2; }
.social-link .ico-ig { fill: #e1306c; }

.footer-social { margin-top: 14px; }
.footer-social > strong { display: block; font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* On the feed it sits inline with a line of copy rather than under a heading. */
.feed-social {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 18px 0 6px; font-size: .93rem; color: var(--muted);
}
.feed-social .social-pair { margin: 0; }

/* Split payments. EcoCash caps a single transaction, so a large order arrives
   in parts and the customer needs to see what has landed before they can know
   what is left to send. */
.pay-tally {
  margin: 24px 0 8px; padding: 16px 18px;
  background: var(--bg-tint); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.pay-tally h3 { margin: 0 0 10px; font-size: 1rem; }
.pay-tally-list { list-style: none; margin: 0; padding: 0; }
.pay-tally-list li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.pay-tally-list li:last-child { border-bottom: 0; }
.pt-amt { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 72px; }
.pt-ref { color: var(--muted); font-size: .86rem; word-break: break-all; }
.pt-state {
  margin-left: auto; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.pt-state.ok { color: var(--green); }
.pt-state.no { color: #96382f; }   /* matches the late-tag red already used */
.pay-tally-sum { margin: 12px 0 0; font-size: .94rem; }

.r-owing {
  margin: 20px 0 8px; padding: 16px 18px;
  background: var(--bg-tint); border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
}
.r-owing p { margin: 0 0 10px; }
.r-owing p:last-child { margin-bottom: 0; }

.policy-contact {
  margin: 26px 0 8px; padding: 18px 20px;
  background: var(--bg-tint); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.policy-contact > strong { display: block; margin-bottom: 4px; }

.wa-call { margin: 8px 0 0; font-size: .88rem; color: var(--slate); }
.wa-call a { font-weight: 600; color: var(--ink); }

@media (max-width: 480px) { .contact-pair { flex-direction: column; } }


/* Colour variants */
.colour-picker { margin: 4px 0 18px; }
.colour-label { margin: 0 0 8px; font-size: .92rem; color: var(--muted, #6b6559); }
.colour-label strong { color: var(--ink, #1c1a17); font-weight: 600; }
.colour-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.colour-swatch {
  display: block; width: 58px; height: 58px; border-radius: 10px; overflow: hidden;
  border: 1.5px solid #e2dccd; background: #fff; transition: border-color .15s, transform .15s;
}
.colour-swatch img { width: 100%; height: 100%; object-fit: contain; display: block; }
.colour-swatch:hover { border-color: #b08d3c; transform: translateY(-1px); }
.colour-swatch.is-current { border-color: #1c1a17; box-shadow: 0 0 0 2px #fff inset; }
.card-colours { margin: 2px 0 0; font-size: .8rem; color: var(--muted, #6b6559); }


/* ==========================================================================
   Why it's the right gift -- the selling section on every product page.
   Default (no JS, or reduced motion) is the finished scene: product showing,
   no box. JS adds .is-armed (box closed) then .is-playing when it scrolls in.
   Everything animates transform/opacity only, so it stays smooth on a
   budget Android phone.
   ========================================================================== */
.why-link {
  display: inline-block; margin: -4px 0 18px; font-size: .9rem; font-weight: 600;
  color: var(--gold-ink); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--gold-line);
}
.why-link:hover { text-decoration-color: var(--gold); }

.gift-pitch {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center;
  margin: 56px 0 28px; padding: 28px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
@media (min-width: 860px) {
  .gift-pitch { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 52px; padding: 40px; }
}

.pitch-kicker {
  margin: 0 0 10px; font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-ink);
}
.pitch-copy h2 {
  margin: 0 0 14px; font-family: var(--font-d); font-variation-settings: "SOFT" 45, "WONK" 1;
  font-size: clamp(1.6rem, 3.2vw, 2.35rem); line-height: 1.12; color: var(--ink);
}
.pitch-moment {
  margin: 0 0 24px; padding-left: 14px; border-left: 3px solid var(--gold);
  font-family: var(--font-d); font-style: italic; font-size: 1.08rem; line-height: 1.5; color: var(--slate);
}
.pitch-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pitch-reasons li { display: flex; gap: 14px; align-items: flex-start; }
.pitch-reasons strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 1rem; }
.pitch-reasons span { color: var(--slate); font-size: .93rem; line-height: 1.5; }
.reason-mark {
  flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-soft); border: 1px solid var(--gold-line);
}
.reason-mark svg { width: 16px; height: 16px; stroke: var(--gold-ink); }

/* ---- the stage ---------------------------------------------------------- */
.pitch-stage {
  position: relative; width: 100%; max-width: 480px; margin: 0 auto; aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg); isolation: isolate;
  /* clip, not hidden: a hidden box is still a scroll container, and focusing
     Replay (or a shimmer band sweeping past the edge) scrolled everything in
     the scene sideways. clip cannot be scrolled. hidden stays as the fallback
     for browsers without clip, and the script resets the scroll for them. */
  overflow: hidden; overflow: clip;
  background: radial-gradient(circle at 50% 58%, #fff 0%, var(--gold-soft) 55%, #f3ead3 100%);
}
.stage-glow {
  position: absolute; inset: 18%; border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, .28), transparent 70%);
  animation: glow-breathe 4.5s ease-in-out infinite;
}
/* Supplier photos sit on white. Multiply melts the white into the stage --
   and it has to be on the wrapper, not the img: the wrapper is animated, and a
   transform makes it its own group, so a blend on the img would only ever
   blend against the wrapper's empty background. */
.stage-product { position: absolute; inset: 15%; z-index: 3; mix-blend-mode: multiply; }
.stage-product img { width: 100%; height: 100%; object-fit: contain; display: block; }
.stage-sheen { position: absolute; inset: 15%; z-index: 4; }
.stage-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.stage-box { position: absolute; left: 50%; bottom: 20%; width: 46%; height: 42%;
  transform: translateX(-50%); z-index: 4; opacity: 0; pointer-events: none; }
.box-base {
  position: absolute; left: 0; right: 0; bottom: 0; height: 76%; border-radius: 6px;
  background: linear-gradient(90deg, transparent 44%, var(--wr, var(--gold)) 44% 56%, transparent 56%),
    var(--wb, var(--ink));
  box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.box-lid {
  position: absolute; left: 50%; top: 0; width: 110%; height: 22%; border-radius: 5px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent 44%, var(--wr, var(--gold)) 44% 56%, transparent 56%),
    var(--wl, #1d1d1d);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.box-bow { position: absolute; left: 50%; top: -58%; width: 0; height: 0; }
.box-bow::before, .box-bow::after {
  content: ""; position: absolute; top: 0; width: 34px; height: 22px; border-radius: 50%;
  border: 5px solid var(--wr, var(--gold));
}
.box-bow::before { right: 0; transform: rotate(-24deg); }
.box-bow::after { left: 0; transform: rotate(24deg); }
.stage-hearts { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.heart {
  position: absolute; left: 50%; bottom: 30%; font-size: 20px; color: #d9687a; opacity: 0;
}
.stage-replay {
  position: absolute; right: 12px; bottom: 12px; z-index: 6; display: inline-flex; align-items: center;
  gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .85); color: var(--ink); font: 600 .78rem var(--font-b);
  cursor: pointer; opacity: 0; transition: opacity .3s;
}
.stage-replay svg { width: 14px; height: 14px; stroke: currentColor; }
.pitch-stage.is-done .stage-replay, .pitch-stage:hover .stage-replay { opacity: 1; }
.pitch-stage:not(.is-armed) .stage-replay { display: none; }

/* ---- the unwrap --------------------------------------------------------- */
.pitch-stage.is-armed .stage-box { opacity: 1; }
.pitch-stage.is-armed .stage-product,
.pitch-stage.is-armed .stage-fx { opacity: 0; }
.pitch-stage.is-playing .stage-box {
  animation: box-shake .9s ease-in-out both, box-away .45s 1.35s ease-in both;
}
.pitch-stage.is-playing .box-lid { animation: lid-pop .65s .85s cubic-bezier(.3, .6, .4, 1) both; }
.pitch-stage.is-playing .stage-product {
  animation: var(--enter, product-rise) .95s 1.15s cubic-bezier(.2, .8, .2, 1) both;
}
.pitch-stage.is-playing .stage-fx { animation: fade-in .7s 1.9s ease both; }
.pitch-stage.is-playing .heart { animation: heart-up 1.9s ease-out both; }
.pitch-stage.is-playing .heart.h0 { --dx: -70px; animation-delay: 1.75s; }
.pitch-stage.is-playing .heart.h1 { --dx: 60px; animation-delay: 1.85s; font-size: 26px; }
.pitch-stage.is-playing .heart.h2 { --dx: -20px; animation-delay: 1.95s; font-size: 16px; }
.pitch-stage.is-playing .heart.h3 { --dx: 95px; animation-delay: 2.05s; }
.pitch-stage.is-playing .heart.h4 { --dx: -105px; animation-delay: 2.15s; font-size: 15px; }
.pitch-stage.is-playing .heart.h5 { --dx: 25px; animation-delay: 2.3s; font-size: 24px; }
.pitch-stage.is-playing .heart.h6 { --dx: -45px; animation-delay: 2.45s; font-size: 17px; }

@keyframes box-shake {
  0%, 100% { rotate: 0deg; }
  12%, 36%, 60% { rotate: -5deg; }
  24%, 48%, 72% { rotate: 5deg; }
  84% { rotate: 0deg; }
}
@keyframes lid-pop {
  0% { transform: translateX(-50%); }
  55% { transform: translate(-50%, -150%) rotate(-16deg); opacity: 1; }
  100% { transform: translate(-50%, -280%) rotate(-32deg); opacity: 0; }
}
@keyframes box-away { to { opacity: 0; transform: translate(-50%, 24px) scale(.88); } }
@keyframes product-rise {
  0% { opacity: 0; transform: translateY(22%) scale(.5); }
  70% { opacity: 1; transform: translateY(-3%) scale(1.03); }
  100% { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes heart-up {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -190px) scale(1.15); }
}
@keyframes glow-breathe { 0%, 100% { transform: scale(.94); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes sheen-sweep {
  0%, 55% { transform: translateX(-140%) skewX(-18deg); }
  85%, 100% { transform: translateX(240%) skewX(-18deg); }
}
.sheen {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: soft-light;
}
.sheen::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
  animation: sheen-sweep 4.2s ease-in-out infinite;
}

/* ---- the moment in use, one per kind of gift ---------------------------- */
/* watch: a second hand sweeping round the gift */
.fx-dial { position: absolute; inset: 5%; width: 90%; height: 90%; }
.dial-ring { fill: none; stroke: var(--gold-line); stroke-width: 1.4; }
.dial-tick { stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.dial-hand { stroke: var(--gold-ink); stroke-width: 1.6; stroke-linecap: round;
  transform-box: view-box; transform-origin: 100px 100px; animation: spin 8s linear infinite; }
.dial-pin { fill: var(--gold-ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* perfume: mist from the nozzle and petals on the air */
.mist { position: absolute; left: 30%; top: 26%; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(228, 212, 154, .35) 60%, transparent 72%);
  animation: mist-out 3.2s ease-out infinite; }
.mist.m1 { animation-delay: .35s; width: 34px; height: 34px; }
.mist.m2 { animation-delay: .7s; }
.mist.m3 { animation-delay: 1.05s; width: 40px; height: 40px; }
.mist.m4 { animation-delay: 1.4s; }
.mist.m5 { animation-delay: 1.75s; width: 30px; height: 30px; }
.mist.m6 { animation-delay: 2.1s; }
.mist.m7 { animation-delay: 2.45s; width: 36px; height: 36px; }
.mist.m8 { animation-delay: 2.8s; }
@keyframes mist-out {
  0% { opacity: 0; transform: translate(0, 0) scale(.3); }
  20% { opacity: .95; }
  100% { opacity: 0; transform: translate(-90px, -70px) scale(2.6); }
}
.petal { position: absolute; width: 12px; height: 12px; border-radius: 0 60% 0 60%;
  background: #e8b4bc; opacity: 0; animation: petal-drift 6s ease-in-out infinite; }
.petal.p0 { left: 12%; top: 18%; }
.petal.p1 { left: 70%; top: 12%; animation-delay: 1.5s; background: var(--gold-line); }
.petal.p2 { left: 20%; top: 60%; animation-delay: 3s; }
.petal.p3 { left: 78%; top: 55%; animation-delay: 4.5s; background: var(--gold-line); }
@keyframes petal-drift {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  20%, 70% { opacity: .9; }
  100% { opacity: 0; transform: translate(26px, 60px) rotate(200deg); }
}

/* sunglasses: the sun, and light glancing off the lenses */
.sunburst { position: absolute; right: -45%; top: -45%; width: 110%; height: 110%; border-radius: 50%;
  background: repeating-conic-gradient(rgba(201, 168, 76, .22) 0 7deg, transparent 7deg 22deg);
  animation: spin 50s linear infinite; }
.sun-disc { position: absolute; right: 6%; top: 6%; width: 22%; height: 22%; border-radius: 50%;
  background: radial-gradient(circle, #fff6d8 0%, #f4d27a 55%, rgba(244, 210, 122, 0) 72%);
  animation: glow-breathe 3.5s ease-in-out infinite; }

/* jewellery, glassware, tools: stars that catch the light */
.star { position: absolute; width: 18px; height: 18px; background: var(--gold); opacity: 0;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: twinkle 2.6s ease-in-out infinite; }
.star.s0 { left: 18%; top: 20%; }
.star.s1 { left: 76%; top: 16%; animation-delay: .5s; width: 12px; height: 12px; }
.star.s2 { left: 82%; top: 62%; animation-delay: 1s; }
.star.s3 { left: 14%; top: 70%; animation-delay: 1.5s; width: 13px; height: 13px; }
.star.s4 { left: 52%; top: 9%; animation-delay: 2s; width: 10px; height: 10px; }
.star.s5 { left: 40%; top: 84%; animation-delay: .8s; width: 11px; height: 11px; }
.star.s6 { left: 66%; top: 80%; animation-delay: 1.8s; width: 15px; height: 15px; }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.2) rotate(0); }
  45% { opacity: 1; transform: scale(1) rotate(45deg); }
}

/* shoes: out for a walk, prints left behind */
.fx-steps .stage-product { animation: step-bob 1.1s ease-in-out infinite; }
.pitch-stage.fx-steps.is-playing .stage-product {
  animation: var(--enter, product-rise) .95s 1.15s cubic-bezier(.2, .8, .2, 1) both, step-bob 1.1s 2.1s ease-in-out infinite;
}
@keyframes step-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-2.5deg); } }
.print { position: absolute; bottom: 7%; width: 12px; height: 20px; border-radius: 50%;
  background: rgba(122, 92, 16, .28); opacity: 0; animation: print-in 3.6s linear infinite; }
.print.f0 { left: 18%; bottom: 9%; } .print.f1 { left: 29%; bottom: 5%; animation-delay: .5s; }
.print.f2 { left: 40%; bottom: 9%; animation-delay: 1s; } .print.f3 { left: 51%; bottom: 5%; animation-delay: 1.5s; }
.print.f4 { left: 62%; bottom: 9%; animation-delay: 2s; } .print.f5 { left: 73%; bottom: 5%; animation-delay: 2.5s; }
@keyframes print-in { 0% { opacity: 0; } 8% { opacity: 1; } 60% { opacity: .7; } 100% { opacity: 0; } }

/* clothing and bags: a gentle sway, as if on a hanger or a shoulder */
.fx-sway .stage-product { transform-origin: 50% 0; animation: sway 3.6s ease-in-out infinite; }
.pitch-stage.fx-sway.is-playing .stage-product {
  animation: var(--enter, product-rise) .95s 1.15s cubic-bezier(.2, .8, .2, 1) both, sway 3.6s 2.1s ease-in-out infinite;
}
@keyframes sway { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }

/* headphones and speakers: sound going out, notes on the air */
.wave { position: absolute; left: 50%; top: 50%; width: 70%; height: 70%; margin: -35% 0 0 -35%;
  border-radius: 50%; border: 2px solid var(--gold); opacity: 0; animation: wave-out 2.7s ease-out infinite; }
.wave.w1 { animation-delay: .9s; } .wave.w2 { animation-delay: 1.8s; }
@keyframes wave-out { 0% { opacity: .75; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.45); } }
.note { position: absolute; font-size: 24px; color: var(--gold-ink); opacity: 0; animation: note-up 3.4s ease-in-out infinite; }
.note.n0 { left: 14%; top: 60%; } .note.n1 { left: 80%; top: 52%; animation-delay: .85s; font-size: 18px; }
.note.n2 { left: 24%; top: 30%; animation-delay: 1.7s; font-size: 20px; } .note.n3 { left: 72%; top: 24%; animation-delay: 2.55s; }
@keyframes note-up { 0% { opacity: 0; transform: translateY(10px) rotate(-10deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50px) rotate(12deg); } }

/* power banks: the battery that never runs out */
.battery { position: absolute; right: 7%; top: 8%; width: 58px; height: 28px; border: 3px solid var(--ink);
  border-radius: 7px; padding: 2px; background: #fff; }
.battery::after { content: ""; position: absolute; right: -8px; top: 7px; width: 5px; height: 9px;
  border-radius: 0 2px 2px 0; background: var(--ink); }
.battery-fill { display: block; height: 100%; border-radius: 3px; background: var(--green);
  transform-origin: left; animation: charge-up 3.2s ease-in-out infinite; }
.bolt { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; line-height: 1; }
@keyframes charge-up { 0% { transform: scaleX(.05); background: #e25555; } 30% { background: #e0a43a; }
  80%, 100% { transform: scaleX(1); background: var(--green); } }

/* kettles, coffee, cooking: steam off the top */
.wisp { position: absolute; top: 8%; width: 16px; height: 64px; border-radius: 50%;
  border-left: 3px solid rgba(85, 82, 74, .28); opacity: 0; animation: steam-up 3s ease-out infinite; }
.wisp.w0 { left: 40%; } .wisp.w1 { left: 49%; animation-delay: 1s; } .wisp.w2 { left: 58%; animation-delay: 2s; }
@keyframes steam-up {
  0% { opacity: 0; transform: translateY(24px) scaleY(.6) skewX(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-34px) scaleY(1.2) skewX(14deg); }
}

/* candles: warm light and rising embers */
.fx-flame .stage-glow { background: radial-gradient(circle, rgba(242, 167, 64, .38), transparent 70%);
  animation: flicker 2.2s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { opacity: .75; transform: scale(.96); } 30% { opacity: 1; transform: scale(1.04); }
  55% { opacity: .82; } 75% { opacity: .98; transform: scale(1.01); } }
.ember { position: absolute; bottom: 18%; width: 6px; height: 6px; border-radius: 50%;
  background: #f2a740; box-shadow: 0 0 8px #f2a740; opacity: 0; animation: ember-up 4s ease-out infinite; }
.ember.e0 { left: 30%; } .ember.e1 { left: 44%; animation-delay: .5s; } .ember.e2 { left: 58%; animation-delay: 1s; }
.ember.e3 { left: 70%; animation-delay: 1.5s; } .ember.e4 { left: 36%; animation-delay: 2s; }
.ember.e5 { left: 52%; animation-delay: 2.5s; } .ember.e6 { left: 64%; animation-delay: 3s; } .ember.e7 { left: 24%; animation-delay: 3.5s; }
@keyframes ember-up { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; }
  100% { opacity: 0; transform: translate(10px, -170px); } }

/* frames and albums: memories dropping in */
.polaroid { position: absolute; width: 24%; aspect-ratio: .86; background: #fff; border: 1px solid var(--line);
  border-bottom-width: 12px; box-shadow: var(--shadow-md); opacity: 0; animation: photo-drop 7.5s ease-out infinite; }
.polaroid::before { content: ""; position: absolute; inset: 6px;
  background: linear-gradient(160deg, #f4d9c6, #c9a84c 60%, #7a5c10); opacity: .55; }
.polaroid.ph0 { left: 4%; top: 6%; --r: -12deg; }
.polaroid.ph1 { right: 4%; top: 10%; --r: 10deg; animation-delay: 1.2s; }
.polaroid.ph2 { left: 8%; bottom: 8%; --r: 7deg; animation-delay: 2.4s; }
@keyframes photo-drop {
  0% { opacity: 0; transform: translateY(-40px) rotate(0) scale(1.1); }
  12%, 70% { opacity: 1; transform: translateY(0) rotate(var(--r)) scale(1); }
  85%, 100% { opacity: 0; transform: translateY(8px) rotate(var(--r)) scale(.96); }
}

/* books: pages turning behind the gift */
.page { position: absolute; left: 50%; top: 18%; width: 30%; height: 60%; background: #fff;
  border: 1px solid var(--line); border-radius: 2px 8px 8px 2px; transform-origin: left center;
  opacity: 0; animation: page-turn 4.5s ease-in-out infinite;
  background-image: repeating-linear-gradient(transparent 0 11px, rgba(153, 149, 138, .25) 11px 12px); }
.page.pg1 { animation-delay: 1.5s; } .page.pg2 { animation-delay: 3s; }
@keyframes page-turn { 0% { opacity: 0; transform: perspective(600px) rotateY(0); }
  15% { opacity: .9; } 70% { opacity: .9; transform: perspective(600px) rotateY(-170deg); }
  100% { opacity: 0; transform: perspective(600px) rotateY(-180deg); } }

/* cameras: the flash going off */
.flash-burst { position: absolute; inset: 0; background: #fff; opacity: 0; animation: flash 4s ease-out infinite; }
@keyframes flash { 0%, 62%, 100% { opacity: 0; } 64% { opacity: .9; } 72% { opacity: 0; } }

/* toys and general gifts: confetti */
.confetti { position: absolute; top: -6%; width: 9px; height: 14px; border-radius: 2px; opacity: 0;
  animation: confetti-fall 4.2s linear infinite; }
.confetti:nth-child(3n) { background: var(--gold); } .confetti:nth-child(3n+1) { background: #d9687a; }
.confetti:nth-child(3n+2) { background: var(--ink); }
.confetti.c0 { left: 6%; } .confetti.c1 { left: 14%; animation-delay: .7s; } .confetti.c2 { left: 23%; animation-delay: 1.9s; }
.confetti.c3 { left: 31%; animation-delay: .3s; } .confetti.c4 { left: 40%; animation-delay: 2.6s; } .confetti.c5 { left: 48%; animation-delay: 1.2s; }
.confetti.c6 { left: 57%; animation-delay: 3.1s; } .confetti.c7 { left: 65%; animation-delay: .9s; } .confetti.c8 { left: 73%; animation-delay: 2.2s; }
.confetti.c9 { left: 81%; animation-delay: 1.6s; } .confetti.c10 { left: 89%; animation-delay: 3.5s; } .confetti.c11 { left: 95%; animation-delay: .5s; }
@keyframes confetti-fall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 8% { opacity: 1; }
  100% { opacity: 0; transform: translateY(520px) rotate(540deg); } }
.fx-bounce .stage-product { animation: bounce 1.6s ease-in-out infinite; }
.pitch-stage.fx-bounce.is-playing .stage-product {
  animation: var(--enter, product-rise) .95s 1.15s cubic-bezier(.2, .8, .2, 1) both, bounce 1.6s 2.1s ease-in-out infinite;
}
@keyframes bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } 60% { transform: translateY(-10px); } }

/* bedding and spa: soft, slow, floating */
.bubble { position: absolute; bottom: -8%; border-radius: 50%; border: 1.5px solid var(--gold-line);
  background: rgba(255, 255, 255, .4); opacity: 0; animation: bubble-up 7s ease-in infinite; }
.bubble.b0 { left: 12%; width: 22px; height: 22px; } .bubble.b1 { left: 30%; width: 14px; height: 14px; animation-delay: 1.2s; }
.bubble.b2 { left: 50%; width: 28px; height: 28px; animation-delay: 2.4s; } .bubble.b3 { left: 68%; width: 16px; height: 16px; animation-delay: 3.6s; }
.bubble.b4 { left: 84%; width: 24px; height: 24px; animation-delay: 4.8s; } .bubble.b5 { left: 40%; width: 12px; height: 12px; animation-delay: 6s; }
@keyframes bubble-up { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-480px) translateX(18px); } }
.fx-float .stage-product { animation: float-y 5s ease-in-out infinite; }
.pitch-stage.fx-float.is-playing .stage-product {
  animation: var(--enter, product-rise) .95s 1.15s cubic-bezier(.2, .8, .2, 1) both, float-y 5s 2.1s ease-in-out infinite;
}
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* phones, tablets, consoles: a screen coming to life */
.aura { position: absolute; inset: 12%; border-radius: 28%;
  box-shadow: 0 0 60px 12px rgba(201, 168, 76, .35); animation: glow-breathe 3s ease-in-out infinite; }

/* Paused while scrolled away, so a long page is not animating off-screen. */
.pitch-stage.is-offscreen *, .pitch-stage.is-offscreen *::before, .pitch-stage.is-offscreen *::after {
  animation-play-state: paused !important;
}

/* ---- yes, you can do this ---------------------------------------------- */
.assure {
  margin: 0 0 56px; padding: 36px 28px; border-radius: var(--radius-lg);
  background: var(--ink); color: #f4f0e8;
}
@media (min-width: 860px) { .assure { padding: 48px; } }
.assure .pitch-kicker { color: var(--gold); }
.assure-head { max-width: 640px; margin-bottom: 28px; }
.assure-head h2 { margin: 0 0 10px; font-family: var(--font-d); font-variation-settings: "SOFT" 45, "WONK" 1;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.1; color: #fff; }
.assure-sub { margin: 0; color: #cfc8b8; line-height: 1.6; }
.assure-steps { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.assure-steps li { position: relative; padding: 20px 18px 18px; border-radius: var(--radius);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(228, 212, 154, .18); }
.assure-steps strong { display: block; margin: 12px 0 6px; color: #fff; font-size: 1rem; }
.assure-steps span:not(.step-num) { color: #cfc8b8; font-size: .9rem; line-height: 1.55; }
.step-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold); color: var(--ink); font: 700 .9rem var(--font-b); }
.assure-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.assure-cta .btn { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.assure-cta .btn:hover { background: #d8b95e; border-color: #d8b95e; }
.assure-cta .muted { color: #a9a293; }

@media (prefers-reduced-motion: reduce) {
  .pitch-stage *, .pitch-stage *::before, .pitch-stage *::after { animation: none !important; }
  .pitch-stage .stage-box { display: none; }
  .pitch-stage .stage-product, .pitch-stage .stage-fx { opacity: 1 !important; }
  .star, .print, .polaroid, .page, .note { opacity: .8; }
  .mist, .petal, .wave, .wisp, .ember, .confetti, .bubble, .flash-burst, .heart, .stage-replay { display: none; }
}


/* ==========================================================================
   A different gift moment for every product. Each class below is one choice
   in the scene; pitch.stage_style gives every product its own combination.
   ========================================================================== */

/* ---- backdrop ---------------------------------------------------------- */
.pitch-stage.pal-blush { background: radial-gradient(circle at 50% 58%, #fff 0%, #fbeef0 55%, #f1d6dc 100%); }
.pitch-stage.pal-sage { background: radial-gradient(circle at 50% 58%, #fff 0%, #eef4ee 55%, #d6e4d7 100%); }
.pitch-stage.pal-sky { background: radial-gradient(circle at 50% 58%, #fff 0%, #edf3f9 55%, #d3e2f1 100%); }
.pitch-stage.pal-lavender { background: radial-gradient(circle at 50% 58%, #fff 0%, #f3f0fa 55%, #ddd6f0 100%); }
.pitch-stage.pal-sand { background: radial-gradient(circle at 50% 58%, #fff 0%, #f8f3ec 55%, #e8dcc8 100%); }

/* ---- the wrapping ------------------------------------------------------ */
.wrap-ink { --wb: #111; --wl: #1d1d1d; --wr: #c9a84c; }
.wrap-gold { --wb: #c9a84c; --wl: #d4b563; --wr: #111; }
.wrap-ivory { --wb: #fbf7ee; --wl: #fffdf8; --wr: #c9a84c; }
.wrap-blush { --wb: #e7b3bd; --wl: #eec3cb; --wr: #fffaf3; }
.wrap-green { --wb: #1f4d3a; --wl: #275c46; --wr: #c9a84c; }

/* ---- how the box opens ------------------------------------------------- */
/* lid: the default in the base rules -- the lid pops and the box sinks away. */
.pitch-stage.open-burst.is-playing .stage-box {
  animation: box-shake .9s ease-in-out both, box-burst .55s 1.02s ease-out both;
}
.pitch-stage.open-burst.is-playing .box-lid { animation: none; }
@keyframes box-burst {
  0% { opacity: 1; transform: translateX(-50%) scale(1); filter: brightness(1); }
  60% { opacity: .9; filter: brightness(2.4); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.55); filter: brightness(3); }
}
.pitch-stage.open-drop.is-playing .stage-box {
  animation: box-shake .9s ease-in-out both, box-drop .6s 1.05s cubic-bezier(.55, 0, .9, .45) both;
}
@keyframes box-drop { to { opacity: 0; transform: translate(-50%, 150%) rotate(8deg); } }
.pitch-stage.open-spin.is-playing .stage-box {
  animation: box-shake .9s ease-in-out both, box-spin .6s 1s ease-in both;
}
.pitch-stage.open-spin.is-playing .box-lid { animation: none; }
@keyframes box-spin { to { opacity: 0; transform: translateX(-50%) rotate(420deg) scale(.08); } }

/* ---- how the gift appears (read by the product rules as --enter) --------- */
.enter-zoom { --enter: product-zoom; }
.enter-fall { --enter: product-fall; }
.enter-turn { --enter: product-turn; }
@keyframes product-zoom {
  0% { opacity: 0; transform: scale(.12); }
  70% { opacity: 1; transform: scale(1.07); }
  100% { opacity: 1; transform: none; }
}
@keyframes product-fall {
  0% { opacity: 0; transform: translateY(-75%); }
  55% { opacity: 1; transform: translateY(5%); }
  75% { transform: translateY(-3%); }
  100% { opacity: 1; transform: none; }
}
@keyframes product-turn {
  0% { opacity: 0; transform: perspective(700px) rotateY(95deg) scale(.8); }
  100% { opacity: 1; transform: none; }
}

/* ---- the celebration --------------------------------------------------- */
.cel-stars .heart { color: var(--gold); }
.cel-confetti .heart, .cel-petals .heart { font-size: 0 !important; }
.cel-confetti .heart { width: 9px; height: 14px; border-radius: 2px; background: var(--gold); }
.cel-confetti .heart:nth-child(3n+1) { background: #d9687a; }
.cel-confetti .heart:nth-child(3n+2) { background: var(--ink); }
.cel-petals .heart { width: 15px; height: 15px; border-radius: 0 70% 0 70%; background: #e8b4bc; }
.cel-petals .heart:nth-child(2n) { background: var(--gold-line); }
.pitch-stage.cel-confetti.is-playing .heart,
.pitch-stage.cel-petals.is-playing .heart { animation-name: bit-up; }
@keyframes bit-up {
  0% { opacity: 0; transform: translate(-50%, 0) rotate(0) scale(.5); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -200px) rotate(320deg) scale(1); }
}

/* ---- the light behind it ----------------------------------------------- */
.stage-amb { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.stage-amb span { display: none; position: absolute; }
.pitch-stage.is-armed:not(.is-playing) .stage-amb { opacity: 0; }
.pitch-stage.is-playing .stage-amb { animation: fade-in .8s 1.6s ease both; }

.amb-motes .stage-amb span { display: block; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(201, 168, 76, .55); animation: mote 9s ease-in-out infinite; }
.amb-motes .a0 { left: 12%; top: 30%; } .amb-motes .a1 { left: 82%; top: 22%; animation-delay: -2s; }
.amb-motes .a2 { left: 24%; top: 78%; animation-delay: -4s; } .amb-motes .a3 { left: 70%; top: 72%; animation-delay: -6s; }
.amb-motes .a4 { left: 50%; top: 12%; animation-delay: -1s; width: 4px; height: 4px; }
.amb-motes .a5 { left: 88%; top: 50%; animation-delay: -7s; width: 6px; height: 6px; }
@keyframes mote { 0%, 100% { transform: translate(0, 0); opacity: .2; } 50% { transform: translate(14px, -22px); opacity: 1; } }

.amb-rays .a0 { display: block; left: 50%; top: 50%; width: 150%; height: 150%; margin: -75% 0 0 -75%;
  border-radius: 50%; animation: spin 70s linear infinite;
  background: repeating-conic-gradient(rgba(255, 255, 255, .55) 0 6deg, transparent 6deg 24deg); }

.amb-rings .a0, .amb-rings .a1, .amb-rings .a2 { display: block; left: 50%; top: 50%; border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, .35); animation: ring-breathe 5s ease-in-out infinite; }
.amb-rings .a0 { width: 56%; height: 56%; margin: -28% 0 0 -28%; }
.amb-rings .a1 { width: 76%; height: 76%; margin: -38% 0 0 -38%; animation-delay: -1.6s; }
.amb-rings .a2 { width: 96%; height: 96%; margin: -48% 0 0 -48%; animation-delay: -3.2s; }
@keyframes ring-breathe { 0%, 100% { transform: scale(.96); opacity: .45; } 50% { transform: scale(1.03); opacity: 1; } }

.amb-orbit .a0, .amb-orbit .a1, .amb-orbit .a2 { display: block; inset: 7%; border-radius: 50%;
  animation: spin 12s linear infinite; }
.amb-orbit .a1 { animation-delay: -4s; } .amb-orbit .a2 { animation-delay: -8s; }
.amb-orbit span::before { content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px;
  margin-left: -4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(201, 168, 76, .8); }

.amb-shimmer .a0, .amb-shimmer .a1 { display: block; top: -20%; bottom: -20%; width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  animation: shimmer-pass 7s ease-in-out infinite; }
.amb-shimmer .a1 { animation-delay: -3.5s; width: 12%; }
@keyframes shimmer-pass { 0% { transform: translateX(-160%) skewX(-16deg); } 100% { transform: translateX(620%) skewX(-16deg); } }

/* ---- the same effect, laid out differently per product ------------------
   Mirrored and turned, so two perfumes' mist does not leave the same way.
   Not for a clock face or a battery, which only read one way round. */
.stage-fx { transform: scaleX(var(--flip, 1)) rotate(var(--tilt, 0deg)); }
.fx-watch .stage-fx, .fx-charge .stage-fx { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .stage-amb span { animation: none !important; }
  .amb-motes .stage-amb span, .amb-shimmer .stage-amb span { display: none; }
}


/* ---- Gift finder ---------------------------------------------------- */
.finder-form { background: var(--card); border: 1px solid var(--gold-line); border-radius: 16px; padding: 22px; margin: 0 0 36px; max-width: 860px; }
.finder-form > label, .finder-row label, .finder-likes legend { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.finder-form textarea, .finder-row select { width: 100%; padding: 12px 14px; border: 1px solid var(--gold-line); border-radius: 10px; font: inherit; background: var(--bg); color: var(--ink); }
.finder-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 16px 0; }
.finder-row select { margin-top: 6px; font-weight: 400; }
.finder-likes { border: 0; padding: 0; margin: 0 0 18px; }
.finder-likes legend span { font-weight: 400; color: var(--muted); margin-left: 6px; }
.finder-chip { display: inline-block; margin: 0 6px 8px 0; cursor: pointer; position: relative; }
.finder-chip input { position: absolute; opacity: 0; }
.finder-chip span { display: inline-block; padding: 8px 14px; border: 1px solid var(--gold-line); border-radius: 999px; font-size: .9rem; background: var(--bg); }
.finder-chip input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.finder-chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.finder-results { margin-bottom: 56px; }
.finder-understood { margin: 10px 0 6px; font-size: .9rem; color: var(--slate); }
.finder-understood span { margin-right: 6px; }
.finder-understood em { display: inline-block; font-style: normal; background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--gold-ink); border-radius: 999px; padding: 3px 10px; margin: 0 4px 6px 0; }
.finder-note { background: var(--gold-soft); border-left: 3px solid var(--gold); padding: 10px 14px; margin: 10px 0; font-size: .93rem; }
.finder-grid { margin-top: 20px; align-items: start; }
.finder-pick { display: flex; flex-direction: column; }
.finder-why { list-style: none; margin: 8px 2px 0; padding: 0; font-size: .82rem; color: var(--slate); }
.finder-why li { padding-left: 16px; position: relative; margin-bottom: 3px; }
.finder-why li::before { content: "\2713"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.finder-ask { margin: 22px 0 0; color: var(--slate); }
.finder-human { margin-top: 30px; padding: 20px 22px; border: 1px solid var(--gold-line); border-radius: 16px; background: var(--card); max-width: 620px; }
.finder-human p { margin: 4px 0 14px; color: var(--slate); }
.finder-human-actions { display: flex; flex-wrap: wrap; gap: 10px; }


/* ---- New arrivals ---------------------------------------------------- */
.new-pill {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: var(--gold); color: #111;
  font-size: .71rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(17, 17, 17, .18);
}
.new-tag {
  display: inline-block; margin-bottom: 8px;
  background: var(--gold); color: #111;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.new-group { margin: 0 0 40px; }
.new-group h2 { font-size: 1.25rem; margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; }
.new-group h2 a { font-size: .85rem; font-weight: 500; color: var(--gold-ink); }


/* ---- The full cost, before checkout ---------------------------------- */
.delivered-line { margin: 6px 0 14px; padding: 10px 14px; background: var(--gold-soft);
  border: 1px solid var(--gold-line); border-radius: 12px; font-size: .92rem; color: var(--slate); }
.delivered-line strong { display: block; color: var(--ink); font-size: 1rem; }
.promo-details { margin: 18px 0 6px; }
.promo-details summary { cursor: pointer; color: var(--gold-ink); font-weight: 600; font-size: .93rem; }
.promo-details .promo-row { margin-top: 10px; }
.checkout-reassure { color: var(--slate); font-size: .9rem; margin: 10px 0 0; }
.checkout-alt { color: var(--slate); font-size: .9rem; margin: 14px 0 0; }
.checkout-alt a { color: var(--green); font-weight: 600; }
.cart-summary .wa-order { margin-top: 10px; text-align: center; }

.tracked-items { list-style: none; padding: 0; margin: 10px 0; }
.tracked-items li { display: flex; gap: 12px; align-items: center; padding: 6px 0; }
.tracked-items img { width: 54px; height: 54px; object-fit: contain; background: var(--card-img); border-radius: 8px; }
.tracked-items span { display: flex; flex-direction: column; }
.tracked-items em { font-style: normal; color: var(--muted); font-size: .88rem; }
.tracked-pay { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }