/* Trilogy Care. Every value here is sampled from trilogycare.com.au and the
   logo file: navy #29507c for chrome and headings, deep navy #1f3b63 behind
   it, teal #007f7e / #3dbfbb as the accent, and the logo's yellow #fcb647 and
   coral #f05057 for the small marks — the saved heart, the badge, the value
   rail. Surfaces are the site's pale blue #e1eefa and pale teal #dff4f4.
   Type is Roboto Flex over Roboto Serif for display, both loaded in
   index.html, which is what the site sets. Swap these and the app follows. */
:root {
  --font: "Roboto Flex", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-head: "Roboto Serif", Georgia, "Times New Roman", serif;

  --page: #1f3b63;
  --brand: #29507c;
  --brand-deep: #1f3b63;
  --brand-line: rgba(41, 80, 124, 0.14);
  --bubble: #ffffff;
  --ink: #1f2d3d;
  --white-soft: rgba(255, 255, 255, 0.8);
  --live: #007f7e;
  --error: #f05057;
  --amber: #fcb647;
  /* Back arrow, bookings, send and call all render at this size. */
  --icon: 22px;

  /* App surfaces */
  --shop-bg: #f2f6fb;
  --card: #ffffff;
  --muted: #5f6b7a;
  --accent: #007f7e;
  --accent-bright: #3dbfbb;
  --accent-soft: #dff4f4;
  --red: #f05057;
  --heart: #f05057;
  --star: #fcb647;
  --hairline: #dbe4ef;
}

* { 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 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* 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-family: var(--font-head);
  font-weight: 700;
  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: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 40px 80px rgba(0, 0, 0, 0.6);
}

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

/* 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(--shop-bg); }

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

.statusbar {
  height: 50px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 26px;
  color: var(--ink);
}
.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: public/logo.svg (or .png) replaces the wordmark when present. */
.brand {
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  /* 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 {
  /* The logo file carries its own margin, so it needs more height than the
     36px icon-button row to read at the same size; the header grows a
     little to fit it. */
  --logo-h: 44px;
  --logo-ratio: 3.106;
  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: var(--ink);
  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: outlined black
   phone when idle, filled black 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(0, 0, 0, 0.2) transparent;
}
#transcript::-webkit-scrollbar { width: 6px; }
#transcript::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); 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);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.bubble p { margin: 0; }

/* On a light transcript the two speakers separate by inversion rather than by
   colour: the shopper's own turns are the black ones. */
.row.user .bubble {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

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

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

.card {
  /* Fixed width, not max-width: until the costing lands the card has little
     content and would otherwise shrink to a narrow column, then jump wider
     when the lines and the provider 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-family: var(--font-head); font-size: 19px; font-weight: 700; letter-spacing: 0; color: var(--accent-bright); }

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

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

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

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

/* Provider strip inside a 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; }

/* ----------------------------------------------------------------- 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;
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.pill svg { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Sits inside the pill, left of the field, the way the send button sits right
   of it — an upload is an input to the conversation, not a separate action. */
.attach {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--icon);
  height: var(--icon);
  color: var(--ink);
  cursor: pointer;
}
.attach svg {
  width: var(--icon);
  height: var(--icon);
  stroke: currentColor;
  stroke-width: 1.9;
}

#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: #9a9b9b; }

.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;
  /* Outlined rather than filled, so the live state below can invert it. */
  box-shadow: inset 0 0 0 1.5px var(--brand), 0 1px 3px rgba(0, 0, 0, 0.06);
  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 inverts the button into a filled hang-up. */
.call[data-on="true"] { background: var(--brand); color: #fff; }
.call[data-on="true"] svg { transform: rotate(135deg); }

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

.section-title {
  margin: 18px 0 12px;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  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;
  background: linear-gradient(135deg, #29507c 0%, #1f3b63 60%, #16304f 100%);
}
/* The logo's three-arrow mark, drawn large and soft in the top right so the
   card reads as Trilogy's without a photo. */
.hero-art { position: absolute; inset: 0; z-index: 0; }
.hero-arrow {
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 28% 28% 28% 6%;
  opacity: 0.9;
}
.hero-arrow.a1 { top: -14%; right: 6%; background: #3dbfbb; transform: rotate(45deg); }
.hero-arrow.a2 { top: 22%; right: -12%; background: #f05057; transform: rotate(135deg); }
.hero-arrow.a3 { top: 12%; right: 30%; width: 24%; background: #fcb647; transform: rotate(-45deg); }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(31, 59, 99, 0) 30%, rgba(31, 59, 99, 0.92) 100%);
}
.hero-copy { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; }
.hero-copy h2 { margin: 0 0 4px; font-family: var(--font-head); font-size: 25px; font-weight: 700; letter-spacing: 0.01em; }
.hero-copy p { margin: 0; font-size: 14.5px; line-height: 1.3; color: rgba(255, 255, 255, 0.92); }

/* ---------------------------------------------------------------- costs --- */

/* Three columns so the amounts form a straight right edge however long the
   material names are. The note column absorbs the slack. */
.costs { list-style: none; margin: 0 0 4px; padding: 0; }
.costs li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label amount" "note amount";
  align-items: baseline;
  column-gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--hairline);
}
.cost-label  { grid-area: label; font-size: 14px; }
.cost-note   { grid-area: note; font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.cost-amount {
  grid-area: amount;
  align-self: center;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.costs .cost-total {
  border-bottom: 0;
  border-top: 2px solid var(--ink);
  margin-top: 2px;
  padding-top: 8px;
}
.cost-total .cost-label { font-weight: 700; }
.cost-total .cost-amount { font-size: 16px; }

/* -------------------------------------------------------------- summary --- */

/* Label / value rows: the budget headline. Same three-column grid as the
   costs, with the note under the label. */
.summary { list-style: none; margin: 0 0 4px; padding: 0; }
.summary li {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label value" "note value";
  column-gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.summary li:last-child { border-bottom: 0; }
.summary-label { grid-area: label; font-size: 14px; }
.summary-note { grid-area: note; font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.summary-value { grid-area: value; align-self: center; font-weight: 700; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.summary li.strong .summary-value { font-size: 18px; }
.summary li.accent { color: var(--accent-bright); }
.summary li.accent .summary-note { color: rgba(61, 191, 187, 0.85); }
.summary li.accent .summary-value { font-size: 19px; }

/* Plan against budget. Teal while it fits, coral once it doesn't. */
.meter { display: flex; flex-direction: column; gap: 5px; margin: 2px 0 4px; }
.meter-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.meter-bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent-bright); transition: width 0.6s ease; }
.meter.over .meter-bar span { background: var(--red); }
.meter-text { display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(255, 255, 255, 0.8); }
.meter-text strong { color: #fff; }

/* Assumptions and caveats, in the card's own voice but quieter. */
.fine-print { margin: 2px 0 0; padding: 0; list-style: none; font-size: 11.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.62); }
.fine-print li + li { margin-top: 3px; }

/* Area and qualification under a service name. */
.meta { color: var(--muted); font-size: 12.5px; line-height: 1.3; }

/* --------------------------------------------------------------- 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;
}
.glyph { width: 48%; height: 48%; fill: currentColor; }
.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-family: var(--font-head); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }

.plus-btn {
  flex: none;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  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: #9a9b9b; }

.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-family: var(--font-head); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }

.checkout,
.continue {
  width: 100%;
  height: 56px;
  margin-top: 16px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font: inherit;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  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-family: var(--font-head); font-size: 28px; font-weight: 700; letter-spacing: 0; }
.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; }

.account-facts {
  margin-top: 12px;
  padding: 4px 16px;
  background: var(--card);
  border-radius: 16px;
}
.account-facts div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
}
.account-facts div:last-child { border-bottom: 0; }
.account-facts span { color: var(--muted); }

/* --------------------------------------------------------- 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;
  /* Outlined, not filled: the detail screen sits on the same grey the pill
     used, so a filled chip would disappear against it. */
  background: #fff;
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.product-info h2 { margin: 14px 0 2px; font-family: var(--font-head); font-size: 28px; font-weight: 700; letter-spacing: 0; }
.product-info .sub { font-size: 16px; }
.product-info .meta { margin: 6px 0 0; font-size: 14px; }
.big-price { margin-top: 16px; font-family: var(--font-head); font-size: 38px; font-weight: 700; letter-spacing: -0.02em; }
.big-price s { font-size: 18px; font-weight: 600; color: var(--muted); }

.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; white-space: nowrap; }
/* "5 hrs / week" — the unit sits small beside the number. */
.stepper small { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.add-to-cart {
  flex: 1;
  height: 54px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}

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

#tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 14px 20px;
  background: #fff;
  border-top: 1px solid var(--hairline);
}
#tabbar button {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--shop-bg);
  color: var(--ink);
  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: var(--brand); color: #fff; }

.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-family: var(--font-head); font-size: 20px; font-weight: 700; letter-spacing: 0; }
.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); }

/* Typical rate on a well-priced service: stacked under the rate 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. Saved 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;
}