/* Turners. Every value here is sampled from turnersautogroup.co.nz: brand
   blue #0860AE (buttons, headings, the dot in the logo), body grey #56585A,
   the green #20B720 the site uses for a positive change, and pale surfaces
   #F7F7F7 / #F2F7FB. Headings are Montserrat light, emphasis semibold, and
   nothing is set in caps — the site doesn't. Corners are small: the site's
   buttons are square, so the app keeps its radii modest rather than pill. */
:root {
  --font: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-head: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --page: #06355f;
  --brand: #0860ae;
  --brand-deep: #064f90;
  --brand-soft: #e9f1f9;
  --brand-line: rgba(8, 96, 174, 0.18);
  --bubble: #ffffff;
  --ink: #56585a;
  --ink-strong: #303133;
  --white-soft: rgba(255, 255, 255, 0.8);
  --live: #20b720;
  --green: #20b720;
  --amber: #e8a200;
  --red: #d64541;
  /* Back arrow, saved, send and call all render at this size. */
  --icon: 22px;

  /* App surfaces */
  --shop-bg: #f2f6fa;
  --card: #ffffff;
  --muted: #7a7c7e;
  --accent: #0860ae;
  --heart: #0860ae;
  --hairline: #e1e6eb;
  --radius: 10px;
}

* { 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: radial-gradient(120% 90% at 20% 0%, #0d5da6 0%, var(--page) 55%, #032443 100%);
  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;
  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: 300;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.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: 15.5px;
}

.intro li { margin-bottom: 9px; }
.intro li:last-child { margin-bottom: 0; }
.intro strong { color: #fff; font-weight: 600; }

.intro-logo-link {
  display: block;
  padding-top: 36px;
  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 vehicle 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; }

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

.statusbar {
  height: 50px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 26px;
  background: var(--brand);
  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 --- */

/* Top and bottom bars are Turners blue with white icons and labels. */
header {
  display: grid;
  /* Equal side columns keep the logo centred; the Ask pill sets the width. */
  grid-template-columns: 72px 1fr 72px;
  align-items: center;
  gap: 8px;
  padding: 4px 18px 10px;
  background: var(--brand);
  color: #fff;
}

.brand {
  display: grid;
  place-items: center;
  cursor: pointer;
}
/* The whole mark, letterboxed: the SVG is 193.7 x 55.6, so 38px tall keeps it
   inside the icon-button row. */
.brand-logo {
  height: 38px;
  width: auto;
  display: block;
  /* The mark is grey on white; on the blue bar it goes white. */
  filter: brightness(0) invert(1);
}

.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; }

/* Ask Turners, top right on every screen: the one filled control in the
   chrome, the way the site's primary CTA is. */
.ask-btn {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: var(--brand);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.ask-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------- 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%;
  line-height: 1.3;
  padding: 12px 15px;
  border-radius: 16px;
  background: var(--bubble);
  color: var(--ink-strong);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.bubble p { margin: 0; }

/* The customer's own turns are the blue 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 --- */

/* The cards the tools draw. Blue on the transcript's pale ground, white type,
   with the shop strip inside them reverting to white product cards. Same card
   on the tool screens, where it sits in the result panel instead of a row. */
.card {
  width: 92%;
  max-width: 92%;
  padding: 16px;
  border-radius: 16px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 2px 10px rgba(8, 96, 174, 0.22);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tool-result .card { width: 100%; max-width: 100%; margin-top: 18px; }
.card[data-tone="alert"] { background: #b8322e; box-shadow: 0 2px 10px rgba(184, 50, 46, 0.25); }
.card[data-tone="warn"] { background: #0b5a9c; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.card-badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #fff;
  white-space: nowrap;
}
.card-badge.good { background: var(--green); }
.card-badge.warn { background: var(--amber); color: #2b2100; }
.card-badge.alert { background: #fff; color: #b8322e; }

.card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-radius: 12px;
  border: 3px solid #fff;
}

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

.card-name { margin: 0; font-family: var(--font-head); font-size: 20px; font-weight: 600; line-height: 1.2; }
.card-desc { margin: 0; font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, 0.92); }
.card-error { color: #ffd8d6; }

.card-title {
  margin: 10px 0 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.card-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 4px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}
.spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.ingredients,
.method {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.94);
}
.ingredients { padding: 0; list-style: none; }
.ingredients li { padding-left: 14px; position: relative; }
.ingredients li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.7); }
.method { padding-left: 18px; }
.method li { padding-left: 2px; }
.method li + li { margin-top: 3px; }

/* Key/value pairs: the brief on a roadside card, the spec on a photo card. */
.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 2px 0 0;
  font-size: 13.5px;
}
.kv dt { color: rgba(255, 255, 255, 0.7); }
.kv dd { margin: 0; color: #fff; }

/* Priced lines. Three columns so the amounts form a straight right edge
   however long the labels 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: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.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: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.costs li.highlight { margin: 0 -10px; padding: 9px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.14); border-bottom-color: transparent; }
.costs li.highlight .cost-amount { font-size: 19px; }
.costs li.highlight .cost-label { font-weight: 600; }
.costs .cost-total {
  border-bottom: 0;
  border-top: 2px solid rgba(255, 255, 255, 0.6);
  margin-top: 2px;
  padding-top: 9px;
}
.cost-total .cost-label { font-weight: 600; }
.cost-total .cost-amount { font-size: 16px; }

/* Sensor readings: a dot for the status, the value right-aligned, the note
   under. Amber and red dots against blue need to be bright. */
.readings { list-style: none; margin: 0; padding: 0; }
.reading {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  grid-template-areas: "dot label value" "dot note value";
  column-gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.reading:last-child { border-bottom: 0; }
.reading-dot { grid-area: dot; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12); }
.reading.warn .reading-dot { background: #ffc233; }
.reading.alert .reading-dot { background: #ff6b66; }
.reading-label { grid-area: label; font-size: 14px; }
.reading-note { grid-area: note; font-size: 12px; color: rgba(255, 255, 255, 0.72); }
.reading-value { grid-area: value; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* No number to show: the label and note take the full width. */
.reading.no-value { grid-template-columns: 10px minmax(0, 1fr); grid-template-areas: "dot label" "dot note"; }
.reading-value small { font-size: 11px; font-weight: 500; margin-left: 2px; color: rgba(255, 255, 255, 0.75); }
.reading.warn .reading-value { color: #ffe08a; }
.reading.alert .reading-value { color: #ffb3b0; }

/* The buttons at the foot of a card. */
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.card-btn {
  flex: 1 1 auto;
  padding: 11px 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.card-btn.primary { background: #fff; color: var(--brand); border-color: #fff; }
.card[data-tone="alert"] .card-btn.primary { color: #b8322e; }
.card-btn.booked { background: var(--green); border-color: var(--green); color: #fff; }
.card-btn:disabled { cursor: default; }

/* Product 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: 168px;
  scroll-snap-align: start;
  color: var(--ink);
}
.card-shop .card-body { padding: 10px; }
.card-shop .card-body strong { font-size: 13.5px; }
.card-shop .sub, .card-shop .meta { font-size: 12px; }
.card-shop .price { font-size: 16px; }
.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;
  background: #fff;
  border-top: 1px solid var(--hairline);
}

.pill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 14px;
  border-radius: 25px;
  background: var(--shop-bg);
  border: 1px solid var(--hairline);
}
.pill svg { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.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-strong);
  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: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(8, 96, 174, 0.3);
  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(--red); box-shadow: 0 2px 6px rgba(214, 69, 65, 0.3); }
.call[data-on="true"] svg { transform: rotate(135deg); }

/* ============================================================== app screens === */

.section-title {
  margin: 18px 0 12px;
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--brand);
}
.section-title.small { font-size: 15px; margin: 18px 0 8px; color: var(--ink-strong); }

.lede { margin: -4px 0 14px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.lede strong { color: var(--red); font-weight: 600; }

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

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

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

/* A blue card, not a photo: the site's own hero is a blue-washed yard and
   the app should read as the same brand at a glance. */
.hero {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 22px 20px 20px;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(120deg, #0860ae 0%, #2a7ec4 60%, #5a9fd8 100%);
  box-shadow: 0 6px 18px rgba(8, 96, 174, 0.28);
}
.hero::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.hero-mark { width: 34px; height: 34px; fill: #fff; margin-bottom: 10px; }
.hero-copy { position: relative; z-index: 1; }
.hero-copy h2 { margin: 0 0 4px; font-family: var(--font-head); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.hero-copy p { margin: 0; font-size: 14.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.9); }

/* The customer's own car, with the three things they do with it. */
.garage-card + .garage-card { margin-top: 10px; }
.garage-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "plate body" "actions actions";
  align-items: center;
  gap: 10px 12px;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
}
.garage-plate {
  grid-area: plate;
  padding: 6px 9px;
  border-radius: 4px;
  border: 1.5px solid var(--ink-strong);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink-strong);
}
.garage-body { grid-area: body; display: flex; flex-direction: column; min-width: 0; }
.garage-body strong { font-size: 15px; font-weight: 600; color: var(--ink-strong); }
.garage-body span { font-size: 12.5px; color: var(--muted); }
.garage-actions { grid-area: actions; display: flex; gap: 8px; }
.garage-actions button {
  flex: 1;
  padding: 8px 0;
  border: 1px solid var(--brand);
  border-radius: 6px;
  background: transparent;
  color: var(--brand);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.garage-actions button:hover { background: var(--brand-soft); }

.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.quick-tile {
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-areas: "icon strong" "icon span";
  column-gap: 10px;
  align-items: center;
  padding: 12px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--card);
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.quick-tile svg { grid-area: icon; width: 26px; height: 26px; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quick-tile strong { grid-area: strong; font-size: 14px; font-weight: 600; color: var(--ink-strong); }
.quick-tile span { grid-area: span; font-size: 12px; color: var(--muted); }

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

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

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

.card-media { position: relative; }
.card-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.card-body strong { font-size: 14.5px; font-weight: 600; color: var(--ink-strong); letter-spacing: -0.01em; }
.sub { color: var(--ink); font-size: 13px; line-height: 1.25; }
.meta { color: var(--muted); font-size: 12px; line-height: 1.3; }

.thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 10px;
}
.thumb img { max-width: 100%; max-height: 100%; object-fit: cover; }
.thumb.has-photo { padding: 0; background: #fff !important; }
.thumb.has-photo img { width: 100%; height: 100%; }
/* The silhouette is a placeholder; a real photo loading next to it wins. */
.thumb img + .pack { display: none; }
.pack { width: 78%; height: auto; }
.thumb.big { aspect-ratio: 4 / 3; border-radius: 0; padding: 24px; }
.thumb.big .pack { width: 70%; }

.flags { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; }
.flag {
  padding: 3px 7px;
  border-radius: 4px;
  background: #fff;
  color: var(--brand);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.flag.drop { background: var(--green); color: #fff; }

.price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin-top: 5px; }
.price { font-family: var(--font-head); font-size: 18px; font-weight: 600; color: var(--ink-strong); letter-spacing: -0.01em; }
.branch { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

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

.heart {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  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 saved — same glyph as the header. */
.heart svg {
  width: 18px;
  height: 18px;
  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: 30px; height: 30px; flex: none; align-self: flex-start; }
.heart.inline svg { width: 22px; height: 22px; }
.heart.floating { top: 16px; right: 16px; width: 38px; height: 38px; }
.heart.floating svg { width: 22px; height: 22px; }

/* Home rails: horizontal scrollers that bleed to the screen edges, so a
   partially visible card signals there is more to swipe. */
.rail {
  display: flex;
  gap: 12px;
  margin: 0 -16px;
  padding: 0 16px 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Snap positions honour this, not the padding: without it the first card
     snaps flush to the edge on load, ahead of everything else on the screen. */
  scroll-padding: 0 16px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail .card-product { flex: none; width: 176px; scroll-snap-align: start; }

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

.search-form { display: flex; gap: 8px; margin-top: 2px; }
.search-field {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  font: inherit;
  font-size: 15px;
  color: var(--ink-strong);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  outline: none;
}
.search-field:focus { border-color: var(--brand); }
.search-field::placeholder { color: #9a9b9b; }
.search-go {
  flex: none;
  width: 50px;
  border: 0;
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.search-go svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.search-note { margin: 10px 2px 0; font-size: 12.5px; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-strong);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
}
.chip small { font-size: 11px; font-weight: 500; color: var(--muted); }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip.on small { color: rgba(255, 255, 255, 0.8); }

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

.row-product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 10px;
  background: var(--card);
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.row-product .thumb { width: 92px; aspect-ratio: 4 / 3; padding: 6px; border-radius: 6px; flex: none; }
.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.row-body strong { font-size: 15px; font-weight: 600; color: var(--ink-strong); letter-spacing: -0.01em; }
.row-body .price { font-size: 16px; margin-top: 3px; }

/* ------------------------------------------------------------- tool forms --- */

.tool-form { display: flex; flex-direction: column; gap: 10px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tool-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.tool-form input,
.tool-form select {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--ink-strong);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  outline: none;
}
.tool-form input:focus,
.tool-form select:focus { border-color: var(--brand); }
.tool-form input::placeholder { color: #a5a7a9; font-weight: 400; }
.tool-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }

.cta {
  margin-top: 4px;
  height: 52px;
  border: 0;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.cta:disabled { opacity: 0.6; cursor: default; }
/* Kilometres and the button share a row, the button sitting on the field's baseline. */
.km-row { grid-template-columns: 1fr 1.4fr; align-items: end; }
.km-row .cta { margin-top: 0; height: 46px; }
.cta-alert { background: var(--red); }
.call-link { text-align: center; font-size: 13.5px; color: var(--brand); text-decoration: none; font-weight: 600; }

.issue-chips { margin: 0 0 2px; }

/* The roadside map, and the locate button beside the address field. */
.map-panel {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  background: var(--brand-soft);
  border: 1px solid var(--hairline);
}
.map-panel .map,
.card .map {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.card .map { aspect-ratio: 16 / 10; border-radius: 10px; border: 3px solid #fff; }
.map-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.locate-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.locate {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--brand);
  border-radius: 8px;
  background: #fff;
  color: var(--brand);
  cursor: pointer;
}
.locate svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.locate.busy svg { animation: spin 1s linear infinite; }
.issue-chips.shake { animation: shake 0.4s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* The service history under the plan: when, where, what, how much. */
.history { display: flex; flex-direction: column; gap: 8px; }
.history-row {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card);
  border-radius: 8px;
  border: 1px solid var(--hairline);
}
.history-when strong, .history-body strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink-strong); }
.history-when span, .history-body span { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; }
.history-body span { color: var(--ink); }
.history-cost { font-size: 14px; font-weight: 600; color: var(--ink-strong); white-space: nowrap; }
.history-row.upcoming { border-color: var(--brand); background: var(--brand-soft); }
.history-row.upcoming .history-when strong { color: var(--brand); }

/* ------------------------------------------------------------------- saved --- */

.badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.badge.pop { animation: badge-pop 0.32s ease; }
@keyframes badge-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

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

/* --------------------------------------------------------- vehicle detail --- */

.screen-product { padding: 0 0 20px; }
.product-hero { position: relative; }
.product-info { padding: 16px 16px 0; }
.flags-row { display: flex; gap: 6px; }
.tag {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 4px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.tag.drop { background: var(--green); color: #fff; }
.product-info h2 { margin: 12px 0 0; font-family: var(--font-head); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-strong); }
.product-info .sub { font-size: 15px; }
.product-info .meta { margin: 8px 0 0; font-size: 13px; }
.big-price { margin-top: 12px; font-family: var(--font-head); font-size: 32px; font-weight: 600; color: var(--brand); letter-spacing: -0.02em; }
.big-price s { font-size: 0.5em; margin-left: 10px; }

.specs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 14px 0 0; padding: 0; }
.specs div { padding: 8px 10px; background: var(--card); border-radius: 8px; border: 1px solid var(--hairline); }
.specs dt { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.specs dd { margin: 1px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ink-strong); }

.features { display: flex; flex-wrap: wrap; gap: 6px; }
.features span { padding: 6px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--hairline); font-size: 12.5px; color: var(--ink-strong); }
.blurb { margin: 0; font-size: 14px; line-height: 1.5; }

.product-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 20px;
  background: #fff;
  border-top: 1px solid var(--hairline);
}
.save-btn {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--brand);
  border-radius: 6px;
  background: #fff;
  color: var(--brand);
  cursor: pointer;
}
.save-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.save-btn.on svg { fill: currentColor; }
.add-to-cart {
  flex: 1;
  height: 52px;
  border: 0;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

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

/* Five items with labels, one per service. Home is the logo in the header,
   Ask Turners the pill beside it. */
#tabbar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 8px 6px 18px;
  background: var(--brand);
}
#tabbar button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
}
#tabbar svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#tabbar button.active { color: #fff; }
#tabbar button.active::after { content: ""; position: absolute; top: 0; width: 22px; height: 3px; border-radius: 2px; background: #fff; }

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

.drawer-scrim { position: absolute; inset: 0; background: rgba(3, 36, 67, 0.5); 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 { overflow-y: auto; }

.drawer-head { padding: 40px 22px 14px; background: var(--brand); color: #fff; }
.drawer-head strong { display: block; font-family: var(--font-head); font-size: 18px; font-weight: 600; }
.drawer-head span { font-size: 13.5px; color: rgba(255, 255, 255, 0.78); }
/* The logo is grey on white; on the blue head it goes white. */
.drawer-logo { height: 34px; width: auto; margin-bottom: 14px; filter: brightness(0) invert(1); }

.drawer-links { display: flex; flex-direction: column; padding: 8px 0; }

/* The household's cars, under the links. Each opens that car's readings. */
.drawer-cars { flex: 1; padding: 10px 22px 14px; border-top: 1px solid var(--hairline); overflow-y: auto; }
.drawer-cars h4 { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.drawer-car {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;
  width: 100%;
  padding: 6px 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--ink-strong);
  cursor: pointer;
}
.drawer-plate {
  padding: 4px 7px;
  border-radius: 4px;
  border: 1.5px solid var(--ink-strong);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.08em;
}
.drawer-car strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.drawer-car span { font-size: 12px; color: var(--muted); }
.drawer-links button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 22px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--ink-strong);
  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: 12px 22px 20px; border-top: 1px solid var(--hairline); }
.drawer-foot strong { display: block; color: var(--brand); font-size: 16px; font-weight: 600; }
.drawer-foot span { font-size: 13.5px; color: var(--muted); }