:root {
  /* The four PlaceMakers logo colours. Swap these and the whole app follows.
     1 navy (chrome), 2 light blue (actions), 3 yellow (stars), 4 red (add to
     cart). Blue, yellow and red are lifted straight from public/logo.svg;
     the navy is sampled from the brand artwork's ground. --accent is the logo
     cyan (--accent-bright) darkened to clear 4.5:1 both as a fill under white
     text and as text on white — the logo value itself manages only 2.3:1. */
  --page: #0a1020;
  --brand: #16386f;
  --brand-deep: #0f2851;
  --brand-line: rgba(255, 255, 255, 0.14);
  --bubble: #ffffff;
  --ink: #1b1e20;
  --white-soft: rgba(255, 255, 255, 0.75);
  --live: #4ade80;
  --error: #ff6b6b;
  --amber: #f5c451;
  /* Back arrow, cart, send and call all render at this size. */
  --icon: 22px;

  /* Shop surfaces */
  --shop-bg: #f2f2ef;
  --card: #ffffff;
  --muted: #6f7570;
  --accent: #007d96;
  --accent-bright: #00b4cd;
  --red: #d41426;
  --heart: var(--red);
  --star: #ffd911;
  --hairline: #e2e2dc;
}

* { box-sizing: border-box; }

/* Screens set display, so `hidden` needs to outrank it. */
[hidden] { display: none !important; }

html, body { height: 100%; }

/* Phone sits dead centre of the page, both axes. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* Two columns: the copy on the left, the phone on the right. Both are
   centred against each other on the cross axis, and the pair is centred in
   the page by the flex rules on body. */
.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 6vw, 96px);
  width: 100%;
  max-width: 1180px;
}

.intro {
  flex: 1 1 0;
  max-width: 560px;
  /* The logo is pushed to the bottom of the column, so the block needs a
     height to push against — matched to the phone's own height. */
  min-height: min(900px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

.intro h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.intro p {
  margin: 0 0 12px;
  color: var(--white-soft);
  font-size: 17px;
}

.intro ol,
.intro ul {
  margin: 0 0 26px;
  padding-left: 22px;
  color: var(--white-soft);
  font-size: 16px;
}

.intro li { margin-bottom: 10px; }
.intro li:last-child { margin-bottom: 0; }
.intro strong { color: #fff; }

/* Sits under the copy, and travels with it as the block centres. Opens the
   Spaceman site in a new tab. Sized 25% up from the original 300px/70%. */
.intro-logo-link {
  display: block;
  padding-top: 44px;
  width: min(375px, 87.5%);
}

.intro-logo {
  display: block;
  width: 100%;
  height: auto;
}

/* Below this the columns can't both breathe, so stack them and let the
   page scroll instead of squeezing the phone. */
@media (max-width: 900px) {
  body { align-items: flex-start; }

  .stage {
    flex-direction: column;
    gap: 40px;
  }

  .intro {
    min-height: 0;
    max-width: min(430px, 100%);
    align-items: flex-start;
  }

  .intro-logo-link { padding-top: 24px; }
}

.phone {
  flex: none;
  width: min(430px, 100%);
  height: min(900px, calc(100vh - 40px));
  padding: 12px;
  border-radius: 52px;
  background: #060c06;
  box-shadow: 0 0 0 2px #232c23, 0 40px 80px rgba(0, 0, 0, 0.55);
}

.app {
  position: relative;
  height: 100%;
  display: grid;
  /* statusbar / header / screen / footer (tabbar, composer or product bar) */
  grid-template-rows: auto auto 1fr auto;
  border-radius: 42px;
  overflow: hidden;
  background: var(--brand);
}

/* Every screen fills the middle row and scrolls independently. */
.screen {
  overflow-y: auto;
  background: var(--shop-bg);
  scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }
#screen-chat { background: var(--brand); }

/* ---------------------------------------------------------------- statusbar --- */

.statusbar {
  height: 50px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 26px;
  color: #fff;
}
.time { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }

.island {
  width: 106px;
  height: 30px;
  border-radius: 16px;
  background: #000;
}

.indicators {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}
.indicators svg { fill: currentColor; height: 12px; }
.indicators .signal { width: 18px; }
.indicators .wifi { width: 16px; }
.indicators .battery { width: 26px; }

/* ------------------------------------------------------------------ header --- */

header {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
  padding: 6px 18px 12px;
}

/* Logo slot: drop a file at public/logo.png and it replaces the wordmark. */
.brand {
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  /* Tapping the wordmark returns to home from anywhere. */
  cursor: pointer;
}
.brand .glass { font-size: 17px; }
/* Whole artwork, letterboxed rather than cropped, so dropping in a different
   logo needs no per-file offsets. --logo-ratio is width/height of the art;
   `contain` keeps it honest if the real file differs. */
.brand-logo {
  /* 34px keeps the logo inside the 36px icon-button row, so the header
     doesn't grow, while filling the middle column properly. */
  --logo-h: 34px;
  --logo-ratio: 3.662;
  height: var(--logo-h);
  width: calc(var(--logo-h) * var(--logo-ratio));
  max-width: 100%;
  background-image: var(--logo-src, url("/logo.png"));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.brand-logo[hidden] { display: none; }

.icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.icon-btn svg { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Connection state is conveyed by the call button itself: white phone when
   idle, red hang-up while live. */

/* --------------------------------------------------------------- transcript --- */

#screen-chat { display: flex; flex-direction: column; overflow: hidden; }

#transcript {
  flex: 1;
  overflow-y: auto;
  padding: 6px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
#transcript::-webkit-scrollbar { width: 6px; }
#transcript::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); border-radius: 3px; }

.row {
  display: flex;
  align-items: flex-end;
}
.row.user { justify-content: flex-end; }

.bubble {
  max-width: 88%;
  /* Half the leading of the 1.5 default — the gap between lines, not the glyphs. */
  line-height: 1.25;
  padding: 13px 16px;
  border-radius: 18px;
  background: var(--bubble);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.bubble p { margin: 0; }

.row.system {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  font-size: 12.5px;
  color: var(--white-soft);
  padding: 2px 20px;
}

/* --------------------------------------------------------------------- card --- */

.card {
  /* Fixed width, not max-width: while the image is still generating the card
     has little content and would otherwise shrink to a narrow column, then
     jump wider when the picture and product strip arrive. */
  width: 92%;
  max-width: 92%;
  padding: 16px;
  border-radius: 20px;
  background: var(--brand-deep);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-head { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }

/* Direct children only: the product cards in the shop strip live inside .card
   too, and must not inherit the cocktail photo's crop. */
.card > img,
.card > .holder {
  width: 100%;
  /* 5:3 rather than 4:3 — at the same width that is exactly 20% less height. */
  aspect-ratio: 5 / 3;
  border-radius: 14px;
  border: 3px solid #fff;
}
.card > img { display: block; object-fit: cover; }

.card-text { display: flex; flex-direction: column; gap: 3px; }

.card-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
/* Breathing room above a second title, but not above the first. */
.card-title + * { margin-bottom: 4px; }
.card-desc + .card-title,
.ingredients + .card-title { margin-top: 6px; }

.card-desc { margin: 0; font-size: 14px; line-height: 1.22; color: rgba(255, 255, 255, 0.92); }

.ingredients,
.method {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
}
.ingredients { padding: 0; list-style: none; }
.method { padding-left: 18px; }
.method li { padding-left: 2px; }
.method li + li { margin-top: 3px; }

/* Product strip inside the mixologist card. Sits within the card's own padding
   so it insets equally on both sides, matching the text above it. */
.card-shop {
  display: flex;
  gap: 10px;
  margin: 6px 0 0;
  padding: 0 0 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.card-shop::-webkit-scrollbar { display: none; }
.card-shop .card-product {
  flex: none;
  width: 152px;
  scroll-snap-align: start;
  color: var(--ink);
}
.card-shop .card-body { padding: 10px; }
.card-shop .card-body strong { font-size: 14.5px; }
.card-shop .sub { font-size: 12.5px; }
.card-shop .rating { font-size: 12px; gap: 4px; }
.card-shop .price { font-size: 17px; }
.card-shop .plus-btn { width: 32px; height: 32px; font-size: 19px; }
.card-shop .heart { width: 28px; height: 28px; top: 8px; right: 8px; }
.card-shop .heart svg { width: 16px; height: 16px; }

.holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.22);
}
.holder small { color: #ffc9c9; max-width: 85%; text-align: center; line-height: 1.4; }
.holder.error { color: #ffc9c9; }

/* While the image generates, the barman fills the same box the finished photo
   will occupy, so nothing shifts when it swaps in. */
.holder.loading {
  position: relative;
  overflow: hidden;
  justify-content: flex-end;
  padding-bottom: 12px;
}

.holder.loading video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Caption sits over the footage, with a scrim so it stays legible against
   whatever frame is showing. */
.holder.loading span {
  position: relative;
  z-index: 1;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
}

/* No holding footage for this tool: centre the caption on the panel instead of
   sitting it at the bottom of a video that isn't there. */
.holder.loading.no-clip {
  justify-content: center;
  padding-bottom: 0;
}
.holder.loading.no-clip span { background: none; backdrop-filter: none; }

/* The finished image rises over the still-playing video rather than snapping
   in. Duration is mirrored by FADE_MS in chat.js. */
.holder.swap {
  position: relative;
  overflow: hidden;
  padding: 0;
  /* Card colour, not black: if a frame ever slips through between the video
     and the image, it reads as the card rather than a flash. */
  background: var(--brand-deep);
}

.holder.swap video,
.holder.swap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1300ms ease;
}

/* The image starts hidden and is revealed once it has decoded, so the fade
   never rises to a blank frame. */
.holder.swap img { opacity: 0; }
.holder.swap img.shown { opacity: 1; }
.holder.swap video.gone { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .holder.swap video,
  .holder.swap img { transition: none; }
}

/* ----------------------------------------------------------------- composer --- */

#composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 20px;
}

.pill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 14px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.pill svg { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

#text-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: transparent;
}
#text-input::placeholder { color: #98a5a2; }

.send {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--icon);
  height: var(--icon);
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
}
.send svg { width: var(--icon); height: var(--icon); stroke: currentColor; }

.call {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.call svg { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.call:hover { transform: scale(1.04); }
/* Live call turns the button into a red hang-up. */
.call[data-on="true"] { background: var(--error); color: #fff; }
.call[data-on="true"] svg { transform: rotate(135deg); }

/* ============================================================== shop screens === */

.section-title {
  margin: 18px 0 12px;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.screen { padding: 0 16px 20px; }
.screen-product { padding: 0; }

.empty { margin: 24px 4px; color: var(--muted); font-size: 14px; text-align: center; }

/* ------------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  text-align: left;
  cursor: pointer;
  color: #fff;
  /* Sits behind /hero.mp4 and shows through until the first frame paints, so
     it stays a brand-coloured card rather than a black box on a slow load. */
  background: linear-gradient(135deg, #2f3336 0%, #1b1e20 55%, #4a1016 100%);
}
/* Looping video sits behind the scrim. Muted and playsinline, or mobile
   browsers refuse to autoplay it. */
.hero video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(226, 160, 74, 0.35), transparent 60%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0.82) 100%);
}
.hero-copy { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; }
.hero-copy h2 { margin: 0 0 4px; font-size: 27px; font-weight: 800; letter-spacing: -0.02em; }
.hero-copy p { margin: 0; font-size: 14.5px; line-height: 1.3; color: rgba(255, 255, 255, 0.92); }

/* --------------------------------------------------------------- products --- */

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.card-product {
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.card-media { position: relative; }
.card-body { padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.card-body strong { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.sub { color: var(--muted); font-size: 13.5px; line-height: 1.25; }

.thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 14px;
}
/* 88% rather than 100%: the cut-out shots sit better with breathing room. */
.thumb img { max-width: 88%; max-height: 88%; object-fit: contain; }
/* Real photography is cut out on white, so drop the category tint behind it. */
.thumb.has-photo { background: #fff !important; }
/* The glyph is a placeholder; a real photo loading next to it wins. */
.thumb img + .pack { display: none; }
.pack { height: 62%; width: auto; }
.thumb.big { aspect-ratio: 4 / 3; border-radius: 18px; }

.rating { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink); margin-top: 2px; }
.stars { color: var(--star); letter-spacing: 0.5px; }

.price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.price { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }

.plus-btn {
  flex: none;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.heart {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--heart);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
/* Outline by default, solid once favourited — same glyph as the tab bar. */
.heart svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.heart.on svg { fill: currentColor; }
.heart.inline { position: static; box-shadow: none; background: transparent; width: 26px; height: 26px; }
.heart.inline svg { width: 24px; height: 24px; }
.heart.floating { top: 16px; right: 16px; }

/* ------------------------------------------------------------ search rows --- */

.search-field {
  width: 100%;
  margin-top: 14px;
  padding: 16px 18px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  outline: none;
}
.search-field::placeholder { color: #9aa39d; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 16px; }
.chip {
  flex: 1 1 28%;
  padding: 11px 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
}
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.rows { display: flex; flex-direction: column; gap: 10px; }

.row-product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  background: var(--card);
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.row-product .thumb { width: 62px; aspect-ratio: 1; padding: 7px; border-radius: 10px; flex: none; }
.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.row-body strong { font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
.row-body .price { font-size: 18px; margin-top: 2px; }
.qty-tag { font-weight: 700; color: var(--muted); }

/* ------------------------------------------------------------------- cart --- */

.cart-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  background: var(--card);
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.cart-row .thumb { width: 62px; aspect-ratio: 1; padding: 7px; border-radius: 10px; flex: none; }
.cart-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cart-body strong { font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
.cart-row .price { flex: none; font-size: 19px; align-self: center; }

.stepper.small { margin-top: 6px; align-self: flex-start; padding: 0; gap: 4px; border: 0; background: transparent; }
.stepper.small button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--hairline);
  background: var(--card);
  font-size: 17px;
}
.stepper.small span { min-width: 20px; font-size: 15px; }

.summary-card {
  margin-top: 14px;
  padding: 16px 18px;
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.summary-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; color: var(--muted); }
.summary-line + .summary-line { margin-top: 8px; }
.summary-line.total {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  color: var(--ink);
}
.summary-line.total strong { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }

.checkout,
.continue {
  width: 100%;
  height: 56px;
  margin-top: 16px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.checkout { background: var(--accent); }

/* ------------------------------------------------- checkout confirmation --- */

.confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 70px 24px 0;
}
.tick {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--accent);
}
.tick svg { width: 46px; height: 46px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.confirm h2 { margin: 22px 0 6px; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.confirm p { margin: 0; font-size: 16px; color: var(--muted); }
.continue { width: auto; padding: 0 34px; margin-top: 22px; background: var(--brand); }

.account-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--card);
  border-radius: 16px;
}
.account-card strong { display: block; font-size: 17px; }
.account-card span { color: var(--muted); font-size: 14px; }
.avatar-lg {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--shop-bg);
}
.avatar-lg svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; }

/* --------------------------------------------------------- product detail --- */

.screen-product { padding: 14px 16px 20px; }
.product-hero { position: relative; }
.product-info { padding: 18px 2px 0; }
.tag {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: #e4f1f8;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}
.product-info h2 { margin: 14px 0 2px; font-size: 30px; font-weight: 800; letter-spacing: -0.025em; }
.product-info .sub { font-size: 16px; }
.big-price { margin-top: 16px; font-size: 40px; font-weight: 800; letter-spacing: -0.03em; }

.product-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 20px;
  background: var(--shop-bg);
  border-top: 1px solid var(--hairline);
}
.stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--card);
}
.stepper button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 20px;
  color: var(--ink);
  cursor: pointer;
}
.stepper span { min-width: 22px; text-align: center; font-weight: 700; }
.add-to-cart {
  flex: 1;
  height: 54px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

/* ----------------------------------------------------------------- tabbar --- */

#tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 14px 20px;
  background: var(--brand);
}
#tabbar button {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
}
#tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#tabbar button.active { background: #fff; color: var(--brand); }

.badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--heart);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
/* A brief pop so adding from the product page is visible without navigating. */
.badge.pop { animation: badge-pop 0.32s ease; }
@keyframes badge-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

#detail-header .badge { top: -1px; right: -3px; }

/* ----------------------------------------------------------------- drawer --- */

.drawer-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 5; }

.drawer {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 6;
  width: 78%;
  display: flex;
  flex-direction: column;
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
}
.drawer.open { transform: translateX(0); }

.drawer-head { padding: 46px 22px 18px; background: var(--brand); color: #fff; }
.drawer-head strong { display: block; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.drawer-head span { font-size: 14px; color: rgba(255, 255, 255, 0.75); }
/* Same crop window as the header logo, just smaller. */
.drawer-logo { --logo-h: 38px; margin-bottom: 6px; }

.drawer-links { flex: 1; display: flex; flex-direction: column; padding: 12px 0; }
.drawer-links button {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 22px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 18px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.drawer-links svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--brand);
}
.drawer-links button:hover { background: var(--shop-bg); }

.drawer-foot { padding: 18px 22px 26px; border-top: 1px solid var(--hairline); }
.drawer-foot strong { display: block; color: var(--heart); font-size: 17px; font-weight: 700; }
.drawer-foot span { font-size: 14px; color: var(--muted); }

/* Was-price on a marked-down product: stacked under the current price rather
   than beside it, so a long pair never squeezes the + button. */
.price {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}
.price s {
  margin-top: 2px;
  font-size: 0.62em;
  font-weight: 600;
  color: var(--muted);
  text-decoration-thickness: 1px;
}

/* Home rails: horizontal scrollers that bleed to the screen edges, so a
   partially visible card signals there is more to swipe. Favourites keeps the
   two-column .grid. */
.rail {
  display: flex;
  gap: 12px;
  margin: 0 -16px;
  padding: 0 16px 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Snap points sit at the padding edge, not the container edge — without this
     the first card snaps flush left and loses the 16px inset. */
  scroll-padding-left: 16px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail .card-product {
  flex: none;
  width: 168px;
  scroll-snap-align: start;
}

/* An unordered method list (the event planner's drink types) still wants the
   same indent as the numbered one, just with bullets. */
ul.method { list-style: disc; }