/* The same self-hosted fonts as the marketing site (served from
   site/dist/fonts by the same server), in place of a render-blocking
   Google Fonts request. Weight 600 falls back to 700 for Inter. */
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/inter-400.woff2?v=2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/inter-500.woff2?v=2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600 700; font-display:swap; src:url("/fonts/inter-700.woff2?v=2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:600 700; font-display:swap; src:url("/fonts/barlow-condensed-700.woff2?v=1") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:900; font-display:swap; src:url("/fonts/barlow-condensed-900.woff2?v=1") format("woff2"); }

/* Tyre Emergency booking portal.
   Tokens mirror the marketing site (site/src/styles) so the two read as one
   business: Barlow Condensed display, Inter body, #db1f24 accent, 4px radius.

   Order matters: base, then components, then ALL media queries at the end.
   Media queries carry no extra specificity, so a base rule appearing after one
   silently wins — that bug bit twice while this was being built. */

/* ========================================================================
   1. Tokens
   ======================================================================== */
:root {
  --accent:#db1f24; --accent-dark:#b3171c; --accent-tint:#fffafa; --accent-wash:#fdf0f0;
  --ink:#1a1a1d; --ink-soft:#3d3d42; --muted:#6b6b73;
  --paper:#fff; --page:#f2f2f4; --line:#e3e3e6; --line-soft:#ededf0;
  --ok:#16a34a; --ok-wash:#eaf7ee; --star:#ffb400;
  /* The marketing site's dark ground. The portal used to float a small white
     card on flat grey, which read as an unfinished page rather than a product;
     on the brand's own dark it reads as deliberate, and the card lifts off it. */
  --ground:#1a1a1d; --ground-deep:#131316; --on-ground:#b3b3b8;

  --radius:4px;
  --shadow:0 1px 2px rgba(20,20,25,.05), 0 4px 16px rgba(20,20,25,.06);
  --shadow-lift:0 3px 12px rgba(20,20,25,.09);

  /* One spacing scale, so gaps are chosen rather than guessed. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px;

  --font-display:"Barlow Condensed", Impact, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t:150ms ease-out;

  --control-h:55px;   /* every text-sized control matches the number plate */
}

/* ========================================================================
   2. Base
   ======================================================================== */
* { box-sizing:border-box; }
/* Dark, so overscroll and any gap below a long list stay on the brand rather
   than flashing the old light grey. The card supplies its own white. */
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--font-body);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }

h1, h2 { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.01em; margin:0; }
h1 { font-size:2.1rem; line-height:1.05; }
h2 { font-size:1.35rem; margin-bottom:var(--s1); }
h2.price { font-size:3rem; line-height:1; color:var(--accent); margin-bottom:var(--s1); }

.muted { color:var(--muted); }
.small { font-size:.8125rem; }
.crumb { font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; font-weight:600;
  color:var(--muted); margin:0 0 var(--s3); }

/* ========================================================================
   3. Shell
   ======================================================================== */

/* Full height, so a short step (the reg field is barely 200px of content)
   still fills the screen instead of leaving a band of empty grey below it.
   The red glow sits behind the card and falls away — brand presence without
   anything for the customer to read past. */
.shell { min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
  background:
    radial-gradient(90% 55% at 50% 38%, rgba(219,31,36,.22) 0%, rgba(219,31,36,0) 65%),
    linear-gradient(180deg, var(--ground) 0%, var(--ground-deep) 100%);
  background-attachment:fixed; }

/* The chevron off the logo, blown up and barely there. It gives the dark
   something to be — a short step on a tall screen was reading as a page that
   had failed to load the rest of itself. Nothing to read, nothing to click. */
.shell::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M8 12 L44 50 L8 88 L26 88 L62 50 L26 12 Z' fill='%23ffffff'/><path d='M46 12 L82 50 L46 88 L64 88 L100 50 L64 12 Z' fill='%23ffffff'/></svg>");
  background-repeat:no-repeat;
  background-position:calc(50% + 430px) 50%;
  background-size:620px;
  opacity:.028;
}
.shell > * { position:relative; z-index:1; }

/* A long tyre list has plenty of its own height; centring then pushes the
   logo off the top of the screen. */
.shell:has(.tyres) { justify-content:flex-start; }

/* Logo, one line of what we do, then straight into the job. Not the nav bar
   that was taken out — there is nothing here to click and nowhere else to go. */
.brand { text-align:center; padding:var(--s6) 18px var(--s5); position:relative; }
.site-logo { width:200px; height:auto; display:block; margin:0 auto; }
.brand-strap { margin:var(--s3) 0 0; color:var(--on-ground); font-size:.8125rem;
  font-weight:500; letter-spacing:.02em; }

.wrap { width:100%; max-width:620px; margin:0 auto; padding:0 18px var(--s6); }

.card { background:var(--paper); border:1px solid var(--line); border-radius:8px;
  padding:var(--s5) var(--s5);
  /* Deeper than the old shadow: on a dark ground a light one is invisible. */
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 18px 40px -12px rgba(0,0,0,.5); }

/* The phone number, kept below the card rather than in a header. Most people
   will never need it; the ones who do are usually stuck, and that is when they
   scroll to the bottom looking for a way out. */
/* The matched vehicle, shown as a plate plus a name. This is the customer's
   chance to say "that isn't my car" — so it has to be the first thing read on
   the screen, not a line of small print under the sizes. */
.vcard { display:flex; align-items:center; gap:var(--s3); margin:0 0 var(--s4);
  padding:var(--s3) var(--s4); background:#fafafb; border:1px solid var(--line);
  border-radius:var(--radius); }
.vcard-plate { flex:0 0 auto; padding:6px 10px; background:#f5d426; border:1px solid #d9ba1f;
  border-radius:3px; font-family:var(--font-display); font-size:1.05rem; font-weight:700;
  letter-spacing:.06em; color:#1a1a1d; white-space:nowrap; }
.vcard-name { display:flex; flex-direction:column; gap:1px; min-width:0; }
.vcard-name strong { font-size:1rem; line-height:1.2; }

.btn-link { display:block; margin-top:18px; padding:15px; background:var(--accent);
  color:#fff; border-radius:var(--radius); text-align:center; text-decoration:none;
  font-family:var(--font-display); font-size:1.05rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; transition:background var(--t); }
.btn-link:hover { background:var(--accent-dark); color:#fff; }

.portal-foot { text-align:center; padding:var(--s5) 0 0; }
.foot-call { margin:0 0 10px; color:#fff; font-size:1.05rem; font-weight:600; }
.foot-call-btn { display:inline-block; padding:13px 26px; border-radius:var(--radius); background:#fff; color:#111;
  font-family:var(--font-display); font-size:1.25rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  text-decoration:none; white-space:nowrap; }
.foot-call-btn:hover { background:var(--accent); color:#fff; }

/* ========================================================================
   4. Progress
   ======================================================================== */

/* ========================================================================
   5. Feedback
   ======================================================================== */
.busy { color:var(--muted); margin:0; }
.busy::after { content:""; display:inline-block; width:12px; height:12px; margin-left:var(--s2);
  vertical-align:-1px; border:2px solid var(--line); border-top-color:var(--accent);
  border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.error { color:var(--accent); font-weight:600; font-size:.9375rem; margin:var(--s3) 0 0;
  padding:10px var(--s3); background:var(--accent-wash); border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0; }
.pill { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px;
  background:var(--ok-wash); color:var(--ok); font-size:.625rem; font-weight:700; letter-spacing:.04em; }

/* ========================================================================
   6. Forms
   ======================================================================== */
label { display:block; font-weight:600; font-size:.75rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-soft); margin:var(--s4) 0 5px; }
input { width:100%; height:var(--control-h); padding:0 14px; border:1px solid var(--line);
  border-radius:var(--radius); font-size:1rem; font-family:inherit; background:#fff;
  transition:border-color var(--t), box-shadow var(--t); }
input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(219,31,36,.12); }

.plate { background:#ffd200; border-color:#e0b800; font-family:var(--font-display); font-weight:700;
  font-size:1.6rem; letter-spacing:.08em; text-transform:uppercase; text-align:center; }
.plate::placeholder { color:#00000055; }
.plate:focus { border-color:var(--ink); box-shadow:0 0 0 3px rgba(26,26,29,.12); }

/* Tyre size: three selects laid out as the size is written on the sidewall. */
.size-row { display:flex; align-items:flex-end; gap:var(--s2); }
.size-row > span { flex:1; min-width:0; }
.size-row .sep { flex:0 0 auto; padding-bottom:14px; font-family:var(--font-display);
  font-size:1.5rem; font-weight:700; color:var(--ink); }
.size-row select { width:100%; height:var(--control-h); padding:0 24px 0 12px;
  border:1px solid var(--line); border-radius:var(--radius);
  background-color:#fff; color:var(--ink); appearance:none; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:1.6rem; letter-spacing:.04em;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236b6b73' stroke-width='2.5'/></svg>");
  background-repeat:no-repeat; background-position:right 9px center; background-size:10px;
  text-align-last:center; transition:border-color var(--t), box-shadow var(--t); }
.size-row select:hover { border-color:var(--ink); }
.size-row select:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(26,26,29,.12); }
.size-row select option { font-family:var(--font-body); font-size:1rem; font-weight:500; }

/* ========================================================================
   7. Buttons — one primary per screen, everything else quieter
   ======================================================================== */
button { width:100%; margin-top:18px; padding:15px; background:var(--btn, var(--accent)); color:#fff;
  border:0; border-radius:var(--radius); font-family:var(--font-display); font-size:1.15rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.03em; cursor:pointer;
  transition:background var(--t), transform var(--t); }
button:hover:not(:disabled) { background:var(--btn-dark, var(--accent-dark)); color:#fff; }
/* The booking wizard's primary buttons go in "go" green; red stays for the
   brand and the price. */
body.wizard { --btn:#1a9e4b; --btn-dark:#15803c; }
/* Share my location: the one thing a stranded caller should spot. */
.share-btn { margin-top:0; background:#111 !important; color:#fff !important; border:2px solid #111; }
.share-btn:hover:not(:disabled) { background:#000 !important; color:#fff !important; }
/* The "enter a custom size" card sits with the sizes, quieter. */
.size-option--manual { border-style:dashed; }
.size-option--manual .rim { background:#f4f4f6; color:var(--muted); }

button:active:not(:disabled) { transform:translateY(1px); }
button:disabled { opacity:.4; cursor:not-allowed; }

button.secondary { margin-top:0; padding:14px; background:#fff; color:var(--ink);
  border:1px solid var(--line); font-family:var(--font-body); font-size:.9375rem;
  font-weight:600; letter-spacing:0; text-transform:none; }
button.secondary:hover { background:#fff; border-color:var(--ink); color:var(--ink); }

button.outline { margin-top:18px; padding:13px; background:#fff; color:var(--accent);
  border:2px solid var(--accent); font-family:var(--font-display); font-size:1.15rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
button.outline:hover { background:var(--accent); color:#fff; }

button.link { width:auto; margin:0; padding:8px 14px 8px 11px; background:#f4f4f6; color:var(--ink);
  border:1px solid var(--line); border-radius:999px; font-family:var(--font-body);
  font-size:.8125rem; font-weight:700; text-transform:none; letter-spacing:0; }
button.link:hover { background:var(--ink); border-color:var(--ink); color:#fff; }

.inline-link { width:auto; margin:0; padding:0; background:none; border:0; color:var(--accent);
  font:inherit; font-weight:700; text-decoration:underline; cursor:pointer;
  text-transform:none; letter-spacing:0; }
.inline-link:hover { background:none; }

/* Step 1 is the way in rather than a commitment, so both routes use a neutral
   black button; red is kept for the steps that actually commit to something. */
#f-reg button, #f-size button { background:var(--ink); color:#fff; border:0;
  margin-top:18px; padding:15px; font-family:var(--font-display); font-size:1.15rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
#f-reg button:hover:not(:disabled), #f-size button:hover:not(:disabled) { background:#000; }

.nav-top { margin:0 0 var(--s4); }
.or { text-align:center; color:var(--muted); font-size:.6875rem; text-transform:uppercase;
  letter-spacing:.1em; font-weight:600; margin:var(--s4) 0 var(--s3); position:relative; }
.or::before, .or::after { content:""; position:absolute; top:50%; width:calc(50% - 22px); height:1px; background:var(--line); }
.or::before { left:0; } .or::after { right:0; }

/* ========================================================================
   8. Choice cards — urgency options and tyre rows share one treatment
   ======================================================================== */
.options, .tyres { display:grid; grid-template-columns:minmax(0,1fr); gap:10px;
  list-style:none; margin:0; padding:0; }
.tyres li { min-width:0; display:flex; }

.option, .tyre { display:block; position:relative; overflow:hidden; width:100%; margin:0;
  padding:15px 16px; background:#fff; color:var(--ink); border:1px solid var(--line);
  border-radius:var(--radius); text-align:left; font-family:var(--font-body); font-size:1rem;
  font-weight:400; text-transform:none; letter-spacing:0;
  transition:border-color var(--t), box-shadow var(--t), transform var(--t), background var(--t); }

/* These are <button>s, so they inherit the generic red button:hover. Win it
   explicitly and stay subtle: a tint, a red edge, a small lift. */
button.option:hover, button.tyre:hover,
button.option:focus-visible, button.tyre:focus-visible {
  background:#fff; border-color:var(--ink); color:var(--ink);
  box-shadow:var(--shadow-lift); transform:translateY(-1px); }
button.option:focus-visible, button.tyre:focus-visible {
  outline:none; box-shadow:0 0 0 3px rgba(219,31,36,.18); }
.option::before, .tyre::before { content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform var(--t); }
button.option:hover::before, button.tyre:hover::before,
button.option:focus-visible::before, button.tyre:focus-visible::before { transform:scaleX(1); }

.option.is-on { border-color:var(--ink); background:#fafafb; box-shadow:inset 0 0 0 1px var(--ink); }

.option-label { display:block; font-family:var(--font-display); font-size:1.25rem;
  font-weight:700; text-transform:uppercase; }
.option-blurb { display:block; font-size:.8125rem; color:var(--muted); }
.option-extra { display:inline-block; margin-top:5px; padding:2px 8px; background:var(--accent-wash);
  color:var(--accent); border-radius:999px; font-size:.75rem; font-weight:700; }

/* ========================================================================
   9. Tyre row internals
   ======================================================================== */
/* One row, two shapes. `.is-feat` is the tall card at the top of the page,
   `.is-row` the compact line in the list beneath it. Everything inside them is
   the same markup, so the two can never drift apart. */
.tyre { display:flex; padding:14px 15px; gap:11px; }

.tyre-id { display:flex; flex-direction:column; gap:1px; min-width:0; }
.tyre-id strong { font-size:.9375rem; line-height:1.25; overflow-wrap:anywhere; }
.tyre-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.tyre-buy { display:flex; flex-direction:column; gap:4px; }
.tyre-price { display:flex; flex-direction:column;
  font-family:var(--font-display); font-weight:700; font-size:2rem; line-height:1.05; white-space:nowrap; }
.tyre-price small { font-family:var(--font-body); font-size:.6875rem; font-weight:500;
  color:var(--muted); margin-top:3px; }
.fitted-note { font-size:.6875rem; font-weight:600; color:var(--muted); }
.tyre-total { font-size:.9375rem; font-weight:700; color:var(--ink); margin-top:2px; }

/* How many, and the button that takes it forward — on every row, so the
   next step is never a guess. */
.tyre-go { display:flex; align-items:center; gap:8px; }
.qty-step { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:#fff; }
.qty-step button { width:34px; height:34px; margin:0; padding:0; border:0; border-radius:0; background:#fff; color:var(--ink); font-size:1.1rem; line-height:1; font-family:var(--font-body); }
.qty-step button:hover:not(:disabled) { background:#f1f1f4; color:var(--ink); }
.qty-step button:disabled { color:#c4c4cc; }
.qty-step .qty-n { min-width:24px; text-align:center; font-family:var(--font-body); font-weight:700; font-size:.9375rem; font-variant-numeric:tabular-nums; }
.tyre-choose { width:auto; margin:0; height:36px; padding:0 16px; font-size:.8125rem; white-space:nowrap; }
.tyre .tyre-info { margin-top:4px; }

/* The distance screen: one fact, one number, one button. The mileage charge
   gets a page to itself because it is the only part of the bill that follows
   from the postcode, and agreeing to it here means it is never a surprise on
   the quote. */
.distance { padding:var(--s4) 0 var(--s5); }
.distance-amount { font-family:var(--font-display); font-size:2.6rem; font-weight:700;
  line-height:1; color:var(--accent); }
.distance-what { font-size:.8125rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); }
.distance .small { margin:var(--s2) 0 0; }

/* Says what the price on screen does and doesn't cover. Deliberately plain —
   it is a statement of fact, not a warning, and styling it like an alert would
   make an ordinary call-out charge look like a problem. */

/* Compact list row: thumb, identity, ratings, price — one line on desktop,
   wrapping to two on a phone. */
/* A row is a small grid: picture, the tyre, the money — and one strip
   underneath for how many and Choose, so nothing crowds the corner. */
.tyre.is-row { display:grid; grid-template-columns:56px minmax(0,1fr) auto; grid-template-areas:"thumb id buy" "thumb meta buy" "go go go";
  column-gap:14px; row-gap:8px; align-items:start; padding:14px 16px 12px; }
.tyre.is-row .tyre-thumb { grid-area:thumb; width:56px; height:56px; }
.tyre.is-row .tyre-id { grid-area:id; }
.tyre.is-row .tyre-meta { grid-area:meta; }
.tyre.is-row .tyre-buy { grid-area:buy; align-items:flex-end; text-align:right; }
.tyre.is-row .tyre-go { grid-area:go; justify-content:flex-end; margin-top:4px; padding-top:10px; border-top:1px solid var(--line-soft); }
@media (max-width:560px) {
  .tyre.is-row { grid-template-columns:48px minmax(0,1fr); grid-template-areas:"thumb id" "meta meta" "buy buy" "go go"; }
  .tyre.is-row .tyre-thumb { width:48px; height:48px; }
  .tyre.is-row .tyre-buy { align-items:flex-start; text-align:left; flex-direction:row; flex-wrap:wrap; align-items:baseline; column-gap:10px; }
  .tyre.is-row .tyre-go { justify-content:space-between; }
}

/* Featured card: everything centred in a column, price pinned to the bottom so
   the three cards line their prices up however tall the names run. */
.tyre.is-feat { flex-direction:column; align-items:center; text-align:center; gap:var(--s2);
  flex:1; border-radius:0 0 var(--radius) var(--radius); border-top:0; }
.tyre.is-feat .tyre-thumb { flex:0 0 78px; width:78px; height:78px; }
.tyre.is-feat .tyre-id { align-items:center; text-align:center; }
.tyre.is-feat .brand-logo { height:16px; max-width:110px; object-position:center; }
.tyre.is-feat .tyre-meta { justify-content:center; }
.tyre.is-feat .tyre-buy { align-items:center; width:100%; margin-top:auto;
  padding-top:var(--s3); border-top:1px solid var(--line-soft); }
.tyre.is-feat .tyre-price { align-items:center; font-size:1.75rem; }

.avail { display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
  font-size:.8125rem; font-weight:700; color:var(--ink); background:#f1f1f4;
  border-radius:999px; padding:4px 11px; }
.avail::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--muted); }
.avail.is-stock { color:#0f6d31; background:var(--ok-wash); }
.avail.is-stock::before { background:var(--ok); }
.tyre.is-row .avail, .tyre.is-feat .avail { align-self:auto; margin-top:2px; }
/* In the list the pill sits in a narrow right-hand column, so a long lead-time
   wraps to two lines. Drop the grey dot there — it carries no meaning on a
   wrapped label, and without it the text sits square in the pill. */
.tyre.is-row .avail { text-align:right; }
.tyre.is-row .avail:not(.is-stock)::before { display:none; }

.tyre-thumb { flex:0 0 50px; width:50px; height:50px; display:flex; align-items:center;
  justify-content:center; background:#fafafb; border:1px solid var(--line-soft);
  border-radius:var(--radius); overflow:hidden; }
.tyre-thumb img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.tyre-thumb.is-logo { padding:8px; background:#fff; }
.tyre-thumb.placeholder { background:repeating-linear-gradient(45deg,#f4f4f6,#f4f4f6 5px,#ececef 5px,#ececef 10px); }
.tyre-thumb.placeholder img { display:none; }
.brand-logo { height:13px; width:auto; max-width:84px; object-fit:contain;
  object-position:left center; margin-bottom:3px; }
.brand-name { font-size:.625rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); }
.chosen { display:flex; align-items:center; gap:var(--s3); margin:10px 0 6px; }

/* EU label grades: A best (green) through E (red). */
.ratings { display:flex; gap:5px; }
.rating { display:flex; align-items:center; gap:5px; padding:2px 7px 2px 6px;
  border-radius:var(--radius); background:#f4f4f6; border:1px solid var(--line-soft); line-height:1.3; }
.r-k { font-size:.5625rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.r-v { font-family:var(--font-display); font-size:.9375rem; font-weight:700; color:var(--ink); }
.r-v small { font-size:.5625rem; font-family:var(--font-body); font-weight:600; margin-left:1px; color:var(--muted); }
.rating[data-g="A"] .r-v { color:#0a7d38; }
.rating[data-g="B"] .r-v { color:#3f9c25; }
.rating[data-g="C"] .r-v { color:#b58900; }
.rating[data-g="D"] .r-v { color:#d1691a; }
.rating[data-g="E"] .r-v, .rating[data-g="F"] .r-v { color:var(--accent); }

.badges { display:flex; flex-wrap:wrap; gap:5px; }
.badge { padding:3px 7px; border-radius:999px; font-size:.625rem; font-weight:700;
  letter-spacing:.03em; background:#eef1f6; color:#33415c; border:1px solid #dfe4ec; }
.badge-runflat { background:#eef6ff; color:#1b4f8a; border-color:#d5e6f7; }
.badge-xl { background:#fdf3e6; color:#8a5a12; border-color:#f3e2c8; }
.badge-ev { background:var(--ok-wash); color:#0f6d31; border-color:#cfe9d8; }
.badge-snow { background:#eef4fb; color:#2c5d8f; border-color:#d8e6f4; }
.badge-season { background:transparent; color:var(--muted); border-color:var(--line); font-weight:600; }

/* ========================================================================
   10. Filter bar
   ======================================================================== */

/* Always on screen rather than hidden behind a "filter and sort" link: on a
   list this long, sorting by price is the first thing most people reach for,
   and a hidden control may as well not exist. */
/* Filters on a grid so every row is the same width: two across on a phone,
   three on a desk. Nothing stretches to fill a lonely last row. */
.tyrebar { display:flex; flex-direction:column; gap:var(--s2);
  margin:0 0 var(--s4); padding:12px 14px 14px; background:#f7f7f9;
  border:1px solid var(--line); border-radius:16px; }
.tyrebar-filters { display:none; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 12px; padding-top:12px; border-top:1px solid var(--line); }
.tyrebar.is-open .tyrebar-filters { display:grid; }
.tyrebar-sort { order:-1; display:flex; align-items:flex-end; gap:10px; }
.tyrebar-sort .fbox { flex:1; }
.filt-toggle { width:auto; flex:0 0 auto; margin:0; height:40px; padding:0 14px 0 12px; border:1px solid var(--line); border-radius:10px;
  background:#fff; color:var(--ink); font-family:inherit; font-size:.875rem; font-weight:600; text-transform:none; letter-spacing:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; }
.filt-toggle::before { content:""; width:14px; height:12px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'><path d='M0 1h14M2 6h10M4 11h6' stroke='black' stroke-width='2'/></svg>") no-repeat center / contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'><path d='M0 1h14M2 6h10M4 11h6' stroke='black' stroke-width='2'/></svg>") no-repeat center / contain; }
.filt-toggle b { min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--accent); color:#fff; font-size:.75rem; line-height:20px; text-align:center; }
.tyrebar.is-open .filt-toggle { background:var(--ink); border-color:var(--ink); color:#fff; }
.fbox { display:flex; flex-direction:column; gap:4px; min-width:0; }
.fbox > span { font-size:.625rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.fbox select { width:100%; min-width:0; height:40px; padding:0 30px 0 12px;
  border:1px solid var(--line); border-radius:10px; font-family:inherit; font-size:.875rem;
  font-weight:600; color:var(--ink); background-color:#fff; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236b6b73' stroke-width='2'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:10px; }
.fbox select:hover { border-color:var(--ink); }
.fbox select:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(26,26,29,.12); }
.pill-clear { width:auto; align-self:flex-start; margin:0; padding:0; border:0; background:none; color:var(--accent);
  font-family:inherit; font-size:.8125rem; font-weight:700; text-transform:none; letter-spacing:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.pill-clear:hover { color:var(--ink); }

.empty { padding:18px 0; }

/* ========================================================================
   11. Quantity
   ======================================================================== */
.qty-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:6px; }
.qty-btn { display:flex; flex-direction:column; align-items:center; gap:2px; margin:0; padding:18px 0;
  background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--font-display); font-weight:700; }
.qty-btn:hover { background:#1a9e4b; border-color:#1a9e4b; color:#fff; }
.qty-btn:hover .qty-w { color:rgba(255,255,255,.75); }
.qty-btn.is-on { background:#1a9e4b; border-color:#1a9e4b; color:#fff; }
.qty-n { font-family:var(--font-display); font-size:1.9rem; font-weight:700; line-height:1; }
.qty-w { font-family:var(--font-body); font-size:.6875rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); }
.qty-btn.is-on .qty-w { color:rgba(255,255,255,.75); }

/* ========================================================================
   12. Step 1 entry, price table, trust strip
   ======================================================================== */
/* Step 1 is a single centred column: one field, one button, with the manual
   size route demoted to a link beneath it. */
.entry { max-width:420px; margin:0 auto; text-align:center; }
.entry h2 { margin-bottom:var(--s2); }
.entry form { margin:0; text-align:left; }
.entry #vrm { margin-top:var(--s3); }
.entry .size-row { margin-top:var(--s2); }
.alt { margin:var(--s4) 0 0; }
.alt .inline-link { font-size:.875rem; font-weight:600; color:var(--muted); }
.alt .inline-link:hover { color:var(--accent); }

table { width:100%; border-collapse:collapse; margin-top:var(--s4); }
td { padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:.9375rem; }
td:last-child { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.total td { font-weight:700; font-size:1.0625rem; border-bottom:0; border-top:2px solid var(--ink); padding-top:var(--s3); }

/* ========================================================================
   14. Booking: slots, details, confirmation
   ======================================================================== */
.day { margin-bottom:var(--s4); }
.day h3 { font-family:var(--font-display); font-size:1.05rem; text-transform:uppercase;
  letter-spacing:.02em; margin:0 0 var(--s2); }
.slots { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:var(--s2); }
.slot { margin:0; padding:13px 0; background:#fff; color:var(--ink); border:1px solid var(--line);
  border-radius:var(--radius); font-family:var(--font-display); font-size:1.2rem; font-weight:700; }
.slot:hover { background:#fff; border-color:var(--ink); box-shadow:var(--shadow-lift); }

.two-up { display:grid; grid-template-columns:1fr; gap:0 var(--s3); }
.two-up > span { min-width:0; }
.opt { font-weight:500; text-transform:none; letter-spacing:0; color:var(--muted); }
select#addr, select#rv-slot { width:100%; height:var(--control-h); padding:0 34px 0 13px; border:1px solid var(--line);
  border-radius:var(--radius); background:#fff; color:var(--ink); font-family:inherit; font-size:1rem;
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236b6b73' stroke-width='2'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center; background-size:11px; }
select#addr:focus, select#rv-slot:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(26,26,29,.12); }

.summary { display:grid; grid-template-columns:auto 1fr; gap:6px var(--s4); margin:var(--s4) 0 0; }
.summary dt { font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding-top:2px; }
.summary dd { margin:0; font-size:.9375rem; }

.notice { margin:var(--s4) 0 0; padding:11px var(--s3); background:#fff8e6; border-left:3px solid var(--star);
  border-radius:0 var(--radius) var(--radius) 0; font-size:.875rem; color:#7a5600; }

.done { text-align:center; padding:var(--s3) 0; }
.done-tick { width:52px; height:52px; margin:0 auto var(--s3); border-radius:50%; background:var(--ok-wash);
  color:var(--ok); font-size:1.6rem; font-weight:700; line-height:52px; }
.done .ref { font-family:var(--font-display); font-size:2rem; font-weight:700; letter-spacing:.08em;
  margin:var(--s1) 0 var(--s2); }
.done .summary { text-align:left; max-width:380px; margin-left:auto; margin-right:auto; }

/* ========================================================================
   15. Call us — shown wherever the portal can't finish the job online
   ======================================================================== */
.callout { text-align:center; padding:var(--s4) 0 var(--s2); }
.callout h2 { margin-bottom:var(--s2); }
.callout p { margin:0 auto var(--s4); max-width:44ch; }
.call-btn { display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  padding:14px 34px; background:var(--ok); color:#fff; border-radius:var(--radius);
  text-decoration:none; transition:background var(--t), transform var(--t); }
.call-btn:hover { background:#0f7a33; }
.call-btn:active { transform:translateY(1px); }
.call-label { font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.85); }
.call-number { font-family:var(--font-display); font-size:1.9rem; font-weight:700; letter-spacing:.02em; }
.callout .small { margin-top:var(--s4); }

/* ========================================================================
   16. The offer — how soon and how much, side by side
   ======================================================================== */
.offer { display:grid; grid-template-columns:1fr; gap:var(--s4); margin:var(--s2) 0 var(--s4);
  text-align:center; }
.offer-half { display:flex; flex-direction:column; gap:2px; }
.offer-label { margin:0; font-size:.6875rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); }
.offer-hero { margin:2px 0; font-family:var(--font-display); font-size:2.8rem; font-weight:700;
  line-height:1; text-transform:uppercase; }
.offer-hero.price { color:var(--accent); text-transform:none; }
.offer-sub { margin:0; font-size:.875rem; color:var(--muted); }

.offer-tyre { margin:0 0 var(--s4); padding-top:var(--s3); border-top:1px solid var(--line-soft);
  text-align:center; font-size:.875rem; color:var(--muted); }

/* The breakdown is there for anyone who wants it, and out of the way for
   everyone else. */
.breakdown { margin:0; }
.breakdown summary { cursor:pointer; font-size:.8125rem; font-weight:700; color:var(--muted);
  text-align:center; list-style:none; }
.breakdown summary::-webkit-details-marker { display:none; }
.breakdown summary::after { content:" ▾"; }
.breakdown[open] summary::after { content:" ▴"; }
.breakdown summary:hover { color:var(--accent); }
.breakdown table { margin-top:var(--s2); }

/* Run-flat: a suitability question, not a filter, so it sits above the list
   rather than inside the optional filter panel. */
.runflat { display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s3) var(--s4);
  margin:0 0 var(--s4); background:#fafafb; border:1px solid var(--line); border-radius:var(--radius);
  cursor:pointer; }
.runflat input { width:18px; height:18px; margin:2px 0 0; accent-color:var(--accent); flex:0 0 auto; }
.runflat > span { display:flex; flex-direction:column; gap:2px; }
.runflat strong { font-size:.9375rem; }
.runflat:hover { border-color:var(--ink); }

/* ========================================================================
   17. Featured shortlist — great value / recommended / premium
   ======================================================================== */

/* Three picks, each the same row as the list beneath, with a slim banner on
   top saying where it sits in the range. The banner sells the position;
   the row keeps it as scannable as everything else. */
.tyres.featured { gap:var(--s3); margin-bottom:var(--s5); }
.feat-col { display:flex; flex-direction:column; position:relative; }
.feat-banner { display:flex; align-items:baseline; gap:10px; padding:6px 14px;
  background:var(--ink); color:#fff; border-radius:var(--radius) var(--radius) 0 0; }
.feat-name { font-family:var(--font-display); font-size:.95rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; }
.feat-blurb { font-size:.6875rem; color:rgba(255,255,255,.65); }
.tyre.is-featured { border-radius:0 0 var(--radius) var(--radius); border-top:0; }
/* One quiet treatment for the three; the recommended one is simply darker. */
.feat-banner { background:#f1f1f4; color:var(--ink); }
.feat-col .feat-blurb { color:var(--muted); }
.feat-col.is-pick .feat-banner { background:var(--ink); color:#fff; }
.feat-col.is-pick .feat-blurb { color:rgba(255,255,255,.7); }
.feat-col.is-pick .tyre { border-color:var(--ink); }


/* Divider above the long list, so the two groups read as separate things. */
.list-head { font-family:var(--font-display); text-transform:uppercase; font-size:1.05rem;
  letter-spacing:.02em; margin:0 0 var(--s3); padding-top:var(--s3);
  border-top:1px solid var(--line); display:flex; gap:var(--s2); align-items:baseline; }
.list-head .muted { font-family:var(--font-body); font-size:.8125rem; font-weight:600; }
.tyres.rows { gap:var(--s2); }

/* ========================================================================
   18. Size confirmation — rim-led options
   ======================================================================== */
.lede { margin:0 0 var(--s4); color:var(--muted); font-size:.9375rem; }
/* A staggered fitment: front over rear on one card. */
.option-label.stacked { display:flex; flex-direction:column; gap:2px; }
.option-label.stacked small { display:inline-block; width:44px; font-family:var(--font-body); font-size:.625rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
/* The run-flat question on the size step: three buttons, one answer. */
#size-hint { margin:10px 0 0; text-align:center; color:var(--accent); font-weight:600; font-size:.9375rem; }
@keyframes nudge { 0%,100% { box-shadow:none; } 50% { box-shadow:0 0 0 3px rgba(219,31,36,.35); } }
.nudge { animation:nudge .9s ease; border-radius:12px; }
.axle-tag { display:inline-block; padding:1px 7px; border-radius:999px; background:var(--ink); color:#fff; font-size:.625rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; vertical-align:middle; }
/* A short checklist before booking: headed lists, nothing else. */
/* The repair checklist: two short lists, headed, nothing else. */
.rules { display:grid; gap:var(--s3); margin:0 0 var(--s3); padding:var(--s3); background:#f7f7f9; border:1px solid var(--line); border-radius:12px; }
.rules-h { margin:0 0 6px; font-size:.6875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.rules ul { margin:0; padding-left:18px; font-size:.9375rem; line-height:1.45; }
.rules li + li { margin-top:4px; }
@media (min-width:560px) { .rules { grid-template-columns:1fr 1fr; } }
.rf-ask { margin:var(--s3) 0; padding:var(--s3); background:#f7f7f9; border:1px solid var(--line); border-radius:12px; }
.rf-q { margin:0 0 10px; font-weight:600; }
.rf-q .muted { display:block; font-weight:400; margin-top:2px; }
.rf-opts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.rf-opt { margin:0; padding:10px 0; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); font-family:inherit; font-size:.9375rem; font-weight:600; text-transform:none; letter-spacing:0; }
.rf-opt:hover { border-color:var(--ink); background:#fff; color:var(--ink); }
.rf-opt.is-on { background:var(--ink); border-color:var(--ink); color:#fff; }
.lede strong { color:var(--ink); }

.options.sizes { gap:var(--s2); }
.size-option { display:flex; align-items:center; gap:var(--s3); }
.rim { flex:0 0 auto; min-width:46px; padding:6px 0; text-align:center; border-radius:var(--radius);
  background:var(--ink); color:#fff; font-family:var(--font-display); font-size:1.1rem; font-weight:700; }
.size-detail { display:flex; flex-direction:column; min-width:0; }
.size-option .option-label { font-size:1.1rem; }
button.size-option:hover .rim, button.size-option:focus-visible .rim { background:#1a9e4b; color:#fff; }

/* ========================================================================
   Breakpoints — genuinely last.
   Media queries carry no extra specificity, so any base rule appearing after
   one silently beats it. Keep every @media below this line; adding a new
   section underneath is how the offer panel lost its two-column layout.
   ======================================================================== */

@media (max-width:359px) {
  h1 { font-size:1.8rem; }
  h2.price { font-size:2.5rem; }
}

@media (min-width:560px) {
  .offer { grid-template-columns:1fr 1fr; align-items:start; }
  .offer-half + .offer-half { border-left:1px solid var(--line); }
}

@media (min-width:860px) {
  .wrap { max-width:1040px; }
  h1 { font-size:2.5rem; }
  .card { padding:var(--s6) var(--s6); }

  /* Only the featured trio goes multi-column. The list below stays one row
     per tyre at every width — that is what makes it scannable.
     Straight from one column to three: there are exactly three cards, and at
     two they read as a pair plus an orphan rather than a range. */
  /* Three picks side by side, each a tidy column: picture and name, the
     grades, the money, then how many and Choose at the foot. */
  .tyres.featured { grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s3); align-items:stretch; }
  .feat-col .tyre.is-row { display:flex; flex-direction:column; align-items:stretch; flex:1; gap:10px; padding:16px 16px 14px; }
  .feat-col .tyre.is-row .tyre-thumb { flex:0 0 150px; width:150px; height:150px; margin:4px auto 0; padding:10px; }
  .feat-col .tyre-id { align-items:center; text-align:center; }
  .feat-col .brand-logo { object-position:center; }
  .feat-col .tyre-meta { justify-content:center; }
  /* Specificity: the row rule above right-aligns the money block; the
     three cards centre everything, money included. */
  .feat-col .tyre.is-row .tyre-buy { align-items:center; text-align:center; margin-top:auto; padding-top:12px; border-top:1px solid var(--line-soft); }
  .feat-col .tyre.is-row .tyre-price { align-items:center; font-size:2.5rem; }
  .feat-col .tyre.is-row .tyre-total { font-size:1.0625rem; }
  .feat-col .tyre-go { flex-direction:row; justify-content:center; border-top:0; padding-top:0; margin-top:0; }
  .feat-col .tyre-choose { flex:1; }
  /* auto-fit so one fitment fills the row rather than leaving two empty
     columns beside it. */
  .options { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
  .options.sizes { grid-template-columns:minmax(0,1fr); }
  /* The generic .option goes column on desktop; size rows stay horizontal. */
  .option.size-option { flex-direction:row; align-items:center; min-height:0; }
  .option { display:flex; flex-direction:column; justify-content:center; min-height:96px; }

  /* Wide enough for one row, so the bar reads as a true pill — but still
     allowed to wrap, or the Clear button squeezes the selects down to their
     chevrons and then overflows the bar itself. */
  /* Filters on the left, sort on the right, one line. */
  .tyrebar { flex-direction:row; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; }
  .tyrebar .pill-clear { flex-basis:100%; text-align:left; }
  .tyrebar-filters, .tyrebar.is-open .tyrebar-filters { display:flex; flex:1; padding-top:0; border-top:0; }
  .filt-toggle { display:none; }
  .tyrebar-filters .fbox { flex:1 1 0; min-width:120px; }
  .tyrebar-sort { order:0; flex:0 0 auto; padding-top:0; border-top:0; }
  .tyrebar-sort .fbox { flex:0 0 190px; }
  .tyre.is-row .tyre-meta { order:0; width:auto; flex:0 0 auto; margin-left:auto; }
  .tyre.is-row .tyre-buy { flex:0 0 178px; }

}

@media (min-width:1180px) {
  .wrap { max-width:1180px; }
}

@media (min-width:560px) { .two-up { grid-template-columns:1fr 1fr; } }

/* Embedded: the host page provides the background and the spacing around us,
   so the portal drops its own. */
.is-embedded body { background:transparent; }
/* Inside someone else's page our shell would be a second, competing header —
   the host already says who they are. Strip back to just the card. */
.is-embedded .shell { min-height:0; background:none; }
.is-embedded .brand, .is-embedded .portal-foot { display:none; }
.is-embedded .wrap { padding:0 0 2px; max-width:none; }
.is-embedded .card { border-radius:0; border-left:0; border-right:0; box-shadow:none; }
@media (min-width:560px) {
  .is-embedded .card { border-radius:var(--radius); border-left:1px solid var(--line);
    border-right:1px solid var(--line); }
}

/* Shared-location confirmation and the pinned address line. */
.map-embed { margin:0 0 14px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); line-height:0; }
.map-embed iframe { width:100%; height:260px; border:0; }
.pinned { background:#f4f4f6; border-radius:var(--radius); padding:12px 14px; margin:0 0 14px; }
.pinned-label { display:block; font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:3px; }

/* Stacked choices: breathing room between them. */
.stack { display:flex; flex-direction:column; gap:12px; }
.stack button { margin-top:0; }
.stack button:first-child { margin-top:18px; }

/* Quote-request form on the dead ends. */
.qr { margin-top:var(--s2); }
.qr-lede { margin:0 0 var(--s4); color:var(--muted); font-size:.9375rem; }
.qr-or { text-align:center; margin-top:var(--s4); }
.qr-or a { color:var(--ink); font-weight:600; }

/* Tyre sizes: the one thing on this screen that must be read right. */
.size-option .option-label { font-family:"Barlow Condensed",sans-serif; font-size:1.9rem; font-weight:700; letter-spacing:.02em; line-height:1.05; }
.size-option .rim { min-width:56px; font-size:1.05rem; }
.check { display:flex; gap:10px; align-items:flex-start; margin:var(--s4) 0; padding:12px 14px; background:#f4f4f6; border-radius:var(--radius); font-size:.9375rem; line-height:1.4; cursor:pointer; text-transform:none; letter-spacing:0; font-weight:500; color:var(--ink); }
.check input { width:20px; height:20px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--accent); }
body.wizard .check input { accent-color:#1a9e4b; }
.check .muted { display:block; margin-top:2px; }

/* Quote link page. */
.breakdown { margin:var(--s4) 0 var(--s2); }
.breakdown summary { cursor:pointer; }
.breakdown .price-table { width:100%; margin-top:8px; border-collapse:collapse; font-size:.9375rem; }
.breakdown .price-table td { padding:6px 0; border-bottom:1px solid var(--line); }
.breakdown .price-table td:last-child { text-align:right; white-space:nowrap; }
.breakdown .price-table .total td { font-weight:700; border-bottom:0; }
.countdown { text-align:center; margin:10px 0 0; }
.size-option.is-selected { border-color:#1a9e4b; box-shadow:0 0 0 2px #1a9e4b; }
.size-option.is-selected .rim { background:#1a9e4b; color:#fff; }
#size-go { margin-top:0; }
textarea { width:100%; font:inherit; font-size:1rem; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius); resize:vertical; margin-bottom:var(--s3); }
textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(219,31,36,.12); }

/* Office mode: a thin bar so it's obvious this isn't the customer's screen. */
/* Office mode looks different from the customer's page so nobody mistakes
   one for the other: a slate-blue ground instead of the red glow, "Office
   quote" under the logo, and a quiet way back to the admin top-left. */
body[data-office="1"] .shell {
  background:
    radial-gradient(90% 55% at 50% 38%, rgba(70, 110, 170, .32) 0%, rgba(70, 110, 170, 0) 65%),
    linear-gradient(180deg, #171a22 0%, #0e1016 100%); }
body[data-office="1"] .brand-strap { color:#9fb4d4; font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:.75rem; }
.office-back { position:absolute; left:18px; top:18px; z-index:2; padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.08); color:#dfe6f2; text-decoration:none; font-size:.8125rem; font-weight:600; }
.office-back:hover { background:rgba(255,255,255,.16); color:#fff; }
@media (max-width:560px) { .office-back { position:static; display:inline-block; margin:12px 0 0 12px; } }

/* --- office review: price + ETA before anything is saved ------------------ */
.rv { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:0 0 var(--s4); }
.rv-row { display:grid; grid-template-columns:82px 1fr auto; gap:10px; align-items:center; width:100%; margin:0; padding:11px 14px;
  background:#fff; color:var(--ink); border:0; border-top:1px solid var(--line-soft); border-radius:0; text-align:left; font:inherit; cursor:pointer; }
.rv-row:first-child { border-top:0; }
button.rv-row:hover, button.rv-row:focus-visible { background:#fafafb; color:var(--ink); border-color:var(--line-soft); }
.rv-k { font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.rv-row, .rv-v { text-transform:none; letter-spacing:0; }
.rv-v { font-size:.9375rem; }
.rv-change { font-size:.75rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.04em; }
.rv-h { margin:var(--s4) 0 var(--s2); font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.rv-line { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--line-soft); }
.rv-line:first-child { border-top:0; }
.rv-desc { display:flex; flex-direction:column; gap:2px; font-size:.9375rem; min-width:0; }
.rv-amt { font-weight:700; white-space:nowrap; }
.rv-x { width:32px; height:32px; margin:0; padding:0; background:#f4f4f6; color:var(--muted); border:0; border-radius:var(--radius); font-size:1.1rem; line-height:1; cursor:pointer; }
.rv-x:hover { background:var(--accent); color:#fff; }
.rv-lines .muted { margin:6px 0; }
.rv-pick { display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; }
.rv-pick .option-blurb { grid-column:1; }
.rv-pick-price { grid-column:2; grid-row:1 / span 2; font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:var(--accent); }
#rv-save { margin-top:var(--s4); }
#rv-add-service { margin-top:var(--s2); }
@media (min-width:520px) {
}
.offer-hero--slot { font-size:1.9rem; line-height:1.1; }
.rv-wait { margin:var(--s2) 0 var(--s4); padding:14px; background:#f4f4f6; border-radius:var(--radius); font-size:.9375rem; color:var(--ink-soft); }
.rv-v { display:flex; flex-direction:column; gap:2px; min-width:0; }
.rv-warn { color:var(--accent); font-weight:600; }
.rv-map { margin:0 0 var(--s4); }
.rv-map iframe { display:block; width:100%; height:220px; border:1px solid var(--line); border-radius:var(--radius); }
.rv-map p { margin:6px 0 0; }
#rv-done { margin-top:var(--s3); }
/* tyre lines on the review, and the picker's search controls */
.rv-row--static { cursor:default; }
.rv-row--static:hover { background:#fff; }
button.rv-act { width:auto; margin:0; padding:4px 8px; background:none; border:0; border-radius:var(--radius); font:inherit; font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); cursor:pointer; }
button.rv-act:hover { background:var(--accent-wash); color:var(--accent-dark); }
.rv-row--static .rv-change { align-self:start; }
.rv-tline { display:flex; flex-direction:column; gap:8px; padding:8px 0; border-top:1px solid var(--line-soft); }
.rv-tline:first-child { border-top:0; padding-top:0; }
.rv-tacts { display:flex; gap:8px; }
button.rv-tbtn { width:auto; margin:0; padding:8px 14px; min-height:36px; background:#f4f4f6; color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); font:inherit; font-size:.8125rem; font-weight:600; text-transform:none; letter-spacing:0; cursor:pointer; }
button.rv-tbtn:hover { background:var(--ink); border-color:var(--ink); color:#fff; }
button.rv-tbtn--del:hover { background:var(--accent); border-color:var(--accent); }
@media (min-width:560px) {
  .rv-tline { flex-direction:row; justify-content:space-between; align-items:flex-start; }
}
.pk-search { display:flex; gap:8px; margin:0 0 var(--s3); }
.pk-search input { height:48px; }
.pk-search button { width:auto; margin:0; padding:0 18px; height:48px; flex:0 0 auto; }
.pk-filters { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin:0 0 var(--s3); }
.pk-note { display:flex; align-items:center; height:40px; }
#pk-list .rv-pick { margin-bottom:8px; }
.pk-filter { display:flex; flex-direction:column; gap:3px; }
.pk-filter span { font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.pk-filter select { width:100%; height:40px; padding:0 30px 0 10px; font:inherit; font-size:.875rem; border:1px solid var(--line); border-radius:var(--radius); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6b73' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center; appearance:none; }
.pk-filter[hidden] { display:none; }
#pk-status { margin:0 0 var(--s2); }
@media (max-width:480px) {
  .rv-row { grid-template-columns:1fr auto; gap:2px 10px; padding:10px 12px; }
  .rv-k { grid-column:1 / -1; padding-top:0; }
  .rv-row .rv-change { grid-column:2; grid-row:2; align-self:start; }
  .rv-row--static .rv-change { grid-row:2; }
}

/* The total is a button in office mode: tap it to set the whole price. */
button.offer-hero--edit { width:100%; margin:2px 0; padding:0; background:none; border:0; text-align:center; cursor:pointer; line-height:1; font-size:2.8rem; color:var(--ink); text-transform:uppercase; }
button.offer-hero--edit.price { color:var(--accent); text-transform:none; }
button.offer-hero--edit:hover { background:none; color:var(--accent-dark); }
.offer-edit { display:block; margin-top:2px; font-family:var(--font-body); font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

/* Tyre cards on the customer's quote: what it is and how it's rated. */
.tyre-cards { display:grid; gap:10px; margin:var(--s4) 0 0; }
.tyre-card { border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; background:#fff; }
.tyre-card-head { display:flex; gap:12px; align-items:center; }
.tyre-card-text { flex:1 1 0; min-width:0; }
.tyre-card-img { width:72px; height:72px; object-fit:contain; flex:0 0 72px; }
.tyre-card-logo { max-width:110px; max-height:40px; object-fit:contain; flex:0 0 auto; }
.tyre-card-name { margin:0; font-size:1rem; }
.tyre-card-sub { margin:2px 0 0; font-size:.8125rem; color:var(--muted); }
.eu-label { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft); }
.eu-item { display:flex; align-items:center; gap:8px; min-width:0; }
.eu-grade { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; flex:0 0 36px; border-radius:6px;
  font-family:var(--font-display); font-size:1.25rem; font-weight:700; color:#fff; background:#6b6b73; }
.eu-grade-A { background:#1a9641; } .eu-grade-B { background:#66bd3f; } .eu-grade-C { background:#e6c012; color:#1a1a1d; }
.eu-grade-D { background:#f28b1c; } .eu-grade-E { background:#d7191c; }
.eu-noise { background:#1a1a1d; font-size:.95rem; flex-direction:column; line-height:1; }
.eu-noise small { font-size:.55rem; font-weight:600; letter-spacing:.04em; }
.eu-what { font-size:.75rem; font-weight:700; line-height:1.15; }
.eu-help { display:block; font-weight:400; color:var(--muted); font-size:.6875rem; }
.eu-note { margin:8px 0 0; font-size:.6875rem; color:var(--muted); }
@media (max-width:420px) { .eu-label { grid-template-columns:1fr; gap:6px; } }

/* The quote page: one column at every width — price, when, tyre, what's
   included, then the buttons — and never wider than a phone-and-a-half, so
   on a desk it reads as a receipt rather than a spread. */
body.quote-page .wrap { max-width:620px; }
.quote-grid { display:flex; flex-direction:column; }
.quote-grid .q-side, .quote-grid .q-side-box { display:contents; }
.quote-grid .q-lede { order:0; }
.quote-grid .bal-big { order:1; } .quote-grid .bal-sub { order:2; } .quote-grid .q-when { order:3; } .quote-grid .summary { order:4; } .quote-grid .q-note { order:4; }
.quote-grid .q-main { order:5; }
.quote-grid .q-actions { order:6; }
/* The ETA is the second thing they want after the price: its own band. */
.q-when { display:flex; flex-direction:column; align-items:center; gap:2px; margin:var(--s3) 0 0; text-align:center; }
.q-when-label { font-size:.6875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.q-when-text { font-size:1.375rem; line-height:1.25; color:var(--ink); text-wrap:balance; }
.q-when-sub { margin-top:2px; max-width:34ch; text-wrap:balance; }
/* Anything the office wrote for them: a pale blue slip so it isn't missed. */
.q-note { margin:var(--s4) 0 0; padding:12px 14px; border-radius:var(--radius); background:#e8f2fc; border:1px solid #c5ddf3; color:#123a5e; font-size:.9375rem; line-height:1.45; }
.q-note-label { display:block; font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#2a6cb0; margin-bottom:3px; }
/* Book it in "go" green; the price stays in the brand red above it. */
.q-book { background:#1a9e4b; }
.q-book:hover:not(:disabled) { background:#15803c; }
.q-actions { margin-top:var(--s4); }
.q-actions .countdown { text-align:center; margin:8px 0; }
/* Narrow: the logo drops to its own line rather than squeezing the name. */
.tyre-card-head { flex-wrap:wrap; }
.tyre-card-logo { flex-basis:100%; max-width:100%; width:100%; height:26px; max-height:26px; object-fit:contain; object-position:left; margin-top:6px; }
.tyre-card-img { width:64px; height:64px; flex:0 0 64px; }
@media (min-width:560px) {
  .tyre-card-head { flex-wrap:nowrap; }
  .tyre-card-logo { flex-basis:auto; width:auto; max-width:110px; height:auto; max-height:40px; object-position:center; margin-top:0; align-self:center; }
  .tyre-card-img { width:80px; height:80px; flex:0 0 80px; }
}

/* "I have a question" on the quote page, and the thread that follows. */
.ask { margin:10px 0 12px; border:1px solid var(--line); border-radius:var(--radius); padding:0 14px; }
.ask-summary { list-style:none; cursor:pointer; padding:13px 0; text-align:center; font-weight:700; color:var(--ink); }
.ask-summary::-webkit-details-marker { display:none; }
.ask-summary::after { content:" ▾"; color:var(--muted); }
.ask[open] .ask-summary::after { content:" ▴"; }
.ask-form { padding:0 0 14px; }
.ask-form label { margin-top:4px; }
.ask-form textarea { width:100%; font:inherit; font-size:1rem; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius); resize:vertical; }
.ask-form textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(219,31,36,.12); }
.ask-form button { margin-top:10px; }
.ask-ok { margin:0 0 10px; padding:10px 12px; background:var(--ok-wash, #e6f6ec); color:#0f6d31; border-radius:var(--radius); font-size:.9rem; }
.ask-err { margin:0 0 10px; color:var(--accent); font-size:.9rem; }
.thread { display:flex; flex-direction:column; gap:8px; padding:0 0 12px; }
.msg { max-width:88%; padding:10px 12px; border-radius:12px; font-size:.9375rem; }
.msg p { margin:0; white-space:pre-wrap; }
.msg-when { display:block; margin-top:4px; font-size:.6875rem; color:var(--muted); }
.msg-customer { align-self:flex-end; background:#f1f1f4; border-bottom-right-radius:4px; }
.msg-office { align-self:flex-start; background:#fde8e9; border-bottom-left-radius:4px; }

/* Half-day slots: a morning and an afternoon per day, no times. */
.slots-half { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.slot-half { display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 10px; margin:0; min-height:0; text-align:center; }
.slot-half strong { font-family:var(--font-display); font-size:1.15rem; text-transform:uppercase; letter-spacing:.02em; }
.slot-half span { font-size:.75rem; color:var(--muted); font-weight:500; }
.slot-half.is-off { border:1px dashed var(--line); color:var(--muted); background:transparent; cursor:default; }
.slot-half.is-off strong { color:var(--muted); }

/* "More info" on a tyre, and the sheet it opens. */
.tyre-info { font-size:.75rem; font-weight:700; color:var(--accent); text-decoration:underline; text-underline-offset:2px; cursor:pointer; margin-top:4px; }
.tyre-info:hover { color:var(--accent-dark); }
.info-sheet { width:min(820px, 100% - 1.5rem); max-height:92vh; padding:0; border:0; border-radius:var(--radius); box-shadow:0 24px 56px -16px rgba(0,0,0,.5); }
.info-sheet::backdrop { background:rgba(10,10,12,.6); }
.info-box { position:relative; display:flex; flex-direction:column; gap:18px; padding:20px; }
.info-close { position:absolute; top:10px; right:10px; z-index:1; width:38px; height:38px; margin:0; padding:0; border-radius:50%; background:#f1f1f4; color:var(--ink); border:0; font-size:1.4rem; line-height:1; }
.info-close:hover { background:var(--ink); color:#fff; }
/* Picture and the money on one side, the reading on the other. On a phone
   the picture sits on top and the price drops to the foot. */
.info-side { display:contents; }
.info-pic { order:-1; width:180px; height:180px; margin:0 auto; padding:12px; background:#fff; border:1px solid var(--line-soft); border-radius:12px; display:flex; align-items:center; justify-content:center; }
.info-pic.placeholder { background:repeating-linear-gradient(45deg,#f4f4f6,#f4f4f6 5px,#ececef 5px,#ececef 10px); }
.info-img { max-width:100%; max-height:100%; object-fit:contain; }
.info-main { min-width:0; }
.info-title { padding-right:40px; }
.info-logo { height:20px; max-width:130px; object-fit:contain; object-position:left; display:block; margin-bottom:6px; }
.info-title h3 { margin:0; font-family:var(--font-display); font-size:1.4rem; text-transform:uppercase; line-height:1.1; }
.info-title p { margin:4px 0 0; }
.info-facts { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line-soft); font-size:.9rem; }
.info-facts dt { font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); align-self:center; }
.info-facts dd { margin:0; }
.info-sheet .eu-label { margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft); grid-template-columns:1fr; gap:10px; }
.info-badges { list-style:none; margin:12px 0 0; padding:12px 0 0; border-top:1px solid var(--line-soft); font-size:.875rem; display:flex; flex-direction:column; gap:6px; }
.info-badges .badge { margin-right:6px; }
.info-buy { order:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding-top:14px; border-top:1px solid var(--line); text-align:center; }
.info-buy .tyre-price { font-size:2.25rem; }
.info-buy .tyre-total { font-size:1rem; }
.info-choose { width:100%; margin-top:12px; }
@media (min-width:700px) {
  .info-box { flex-direction:row; align-items:flex-start; gap:28px; padding:24px; }
  .info-side { display:flex; flex-direction:column; gap:16px; flex:0 0 280px; position:sticky; top:0; }
  .info-pic { order:0; width:280px; height:280px; padding:18px; }
  .info-main { flex:1; }
  .info-buy { order:0; border-top:0; padding-top:0; }
}

/* The "enter a custom size" card: with the sizes, but reads as a link, not a size. */
.size-option.size-option--manual .option-label { font-family:var(--font-body); font-size:1.05rem; font-weight:700; letter-spacing:0; text-transform:none; }

/* Urgency cards: hover fills green like the quantity cards, no side bar. */
button.option[data-urgency]:hover, button.option[data-urgency]:focus-visible { background:#1a9e4b; border-color:#1a9e4b; color:#fff; }
button.option[data-urgency]:hover::before, button.option[data-urgency]:focus-visible::before { transform:scaleX(0); }
button.option[data-urgency]:hover .option-blurb, button.option[data-urgency]:hover .muted, button.option[data-urgency]:hover .pill,
button.option[data-urgency]:focus-visible .option-blurb, button.option[data-urgency]:focus-visible .muted { color:rgba(255,255,255,.8); }