/* Layout: one calm column on phones; photo left and wheel picker right on wide screens. */
:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eceef2;
  --line: #d9dde3;
  --ink: #161a20;
  --muted: #5b636e;
  --accent: #c2410c;
  --accent-ink: #ffffff;
  --accent-soft: #fde9dd;
  --accent-2: #c94a12;
  --good: #13703a;
  --good-soft: #dcf3e4;
  --warn: #875a06;
  --warn-soft: #fbf0d0;
  --bad: #b91c1c;
  --bad-soft: #fbe1e1;
  --stage: #e4e7eb;
  --stage-top: #ffffff;
  --stage-bottom: #dde1e7;
  --glass: rgba(255, 255, 255, .78);
  --shadow: 0 1px 2px rgba(20, 24, 32, .06), 0 6px 20px rgba(20, 24, 32, .06);
  --head: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111317; --surface: #1a1d22; --surface-2: #23272e; --line: #323740; --ink: #f1f3f6; --muted: #a4abb6;
    --accent: #fb7f3c; --accent-2: #e0712b; --accent-ink: #1a0d04; --accent-soft: #3a2316; --good: #4ade80; --good-soft: #15301f;
    --warn: #fbbf24; --warn-soft: #36290c; --bad: #f87171; --bad-soft: #3a1717; --stage: #1f2228; --stage-top: #2f333a; --stage-bottom: #121418; --glass: rgba(26, 29, 34, .78);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111317; --surface: #1a1d22; --surface-2: #23272e; --line: #323740; --ink: #f1f3f6; --muted: #a4abb6;
  --accent: #fb7f3c; --accent-2: #e0712b; --accent-ink: #1a0d04; --accent-soft: #3a2316; --good: #4ade80; --good-soft: #15301f;
  --warn: #fbbf24; --warn-soft: #36290c; --bad: #f87171; --bad-soft: #3a1717; --stage: #1f2228; --stage-top: #2f333a; --stage-bottom: #121418; --glass: rgba(26, 29, 34, .78);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3); color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); }
h1, h2, h3 { font-family: var(--head); line-height: 1.1; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 7vw, 3.2rem); font-weight: 800; }
h2 { font-size: 1.3rem; font-weight: 700; }
p { margin: 0; }
.muted { color: var(--muted); font-weight: 400; }
.tiny { font-size: .82rem; }
.sr-only, .file-input { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

.wrap { max-width: 1200px; margin: 0 auto; padding-block: 20px 60px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* Header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); }
.top-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.brand { display: flex; align-items: center; gap: 10px; font: 800 1.15rem var(--head); min-width: 0; color: inherit; text-decoration: none; }
.brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo { width: 28px; height: 28px; color: var(--accent); flex: none; }
.link-btn { background: none; border: 0; color: var(--muted); font: 600 .9rem var(--body); padding: 8px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.link-btn:hover { color: var(--ink); }

/* Buttons and fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 1rem var(--body); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); padding: 10px 16px; border-radius: 12px; cursor: pointer; min-height: 48px; text-align: center; user-select: none; -webkit-user-select: none; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.huge { font-size: 1.2rem; padding: 18px 28px; min-height: 64px; border-radius: 16px; width: 100%; max-width: 420px; }
.btn.huge svg { width: 28px; height: 28px; }
.btn.plain { border: 0; background: none; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.btn.small { font-size: .9rem; padding: 6px 12px; min-height: 40px; }
.btn.danger { color: var(--bad); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
label.btn:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, fieldset legend, .car-pick label, .fix-row label { font-weight: 600; font-size: .95rem; }
input, select, textarea { font: 17px var(--body); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%; min-height: 48px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
input[type="range"] { padding: 0; min-height: 40px; accent-color: var(--accent); border: 0; background: none; box-shadow: none; }
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--accent); }
.check { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.error { color: var(--bad); font-weight: 600; }
.form { display: flex; flex-direction: column; gap: 14px; }
.narrow { max-width: 560px; }

/* Showroom hero: the car fills the width; controls float over it */
.hero { display: flex; flex-direction: column; gap: 12px; }
.stage-wrap .photo-empty .btn { position: relative; z-index: 1; }
/* --dock-h: room kept under the 3D car for the quick wheel picker (set by app.js) */
.stage-wrap { position: relative; height: calc(clamp(340px, 56vh, 700px) + var(--dock-h, 0px)); background: radial-gradient(120% 90% at 50% 35%, var(--stage-top), var(--stage-bottom)); overflow: hidden; }
.stage-wrap.photo-fit:not(.full) { height: auto; aspect-ratio: var(--ar, 1.6); max-height: 72vh; }
.stage3d { position: absolute; inset: 0 0 var(--dock-h, 0px); touch-action: none; }
.stage3d canvas { display: block; width: 100%; height: 100%; outline: none; -webkit-mask-image: linear-gradient(#000 84%, transparent); mask-image: linear-gradient(#000 84%, transparent); }
/* Label on the 3D car: "Building 3D design preview…" during the build animation, then a small tag */
.build-tag { position: absolute; left: 16px; top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: .01em; pointer-events: none; box-shadow: var(--shadow); }
.build-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3b9bff; box-shadow: 0 0 0 4px rgba(59, 155, 255, .2); }
.loading { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-weight: 600; padding: 0 16px; text-align: center; }
.loading .spinner { border-color: var(--line); border-top-color: var(--accent); }

.stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--stage-bottom); touch-action: manipulation; }
.stage canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.stage.tapping { cursor: crosshair; }
.stage canvas { transition: transform .8s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .stage canvas { transition: none; } }
.stage .handles { position: absolute; pointer-events: none; }
.busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; background: rgba(0,0,0,.45); color: #fff; font-weight: 600; }
.spinner { width: 24px; height: 24px; border-radius: 50%; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tap-hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: rgba(0,0,0,.72); color: #fff; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: .95rem; pointer-events: none; text-align: center; max-width: calc(100% - 24px); }

.photo-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.photo-empty svg { width: 56px; height: 56px; color: var(--accent); }
.pe-title { font: 800 clamp(1.4rem, 4vw, 2rem) var(--head); }
.pe-sub { color: var(--muted); max-width: 36ch; }
.btn.big { font-size: 1.1rem; padding: 14px 26px; min-height: 56px; }

/* Controls sit under the car so nothing covers it */
.controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; padding-block: 4px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.mode { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.mode-btn { font: 700 .92rem var(--body); color: var(--muted); background: none; border: 0; border-radius: 999px; padding: 9px 14px; cursor: pointer; min-height: 40px; white-space: nowrap; }
.mode-btn[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 .88rem var(--body); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; min-height: 40px; cursor: pointer; white-space: nowrap; user-select: none; -webkit-user-select: none; }
.chip:hover { border-color: var(--muted); }
.chip.ai { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); border-color: transparent; font-weight: 700; }
.ai-badge { position: absolute; left: 10px; bottom: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: .75rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; pointer-events: none; }
.chip.strong { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip svg { width: 16px; height: 16px; }
.views, .photo-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.paints { display: flex; gap: 8px; padding: 6px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; max-width: 100%; overflow-x: auto; }
.swatch { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.25); cursor: pointer; padding: 0; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--accent); }
.swatch.custom { background: conic-gradient(#e33, #ec3, #3c5, #3ae, #73e, #e33); position: relative; overflow: hidden; }
.swatch.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; }
/* Car picker in the showroom controls: one compact pill */
.car-select { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; min-height: 40px; max-width: 100%; }
.car-select label { font: 600 .88rem var(--body); color: var(--muted); }
/* 16px text stops phones zooming in when the list opens */
.car-select select { width: auto; min-width: 0; max-width: 60vw; min-height: 38px; border: 0; background: transparent; padding: 4px 6px; font: 600 16px var(--body); border-radius: 999px; text-overflow: ellipsis; }
.car-select .spinner { width: 16px; height: 16px; flex: none; border-width: 2px; border-color: var(--line); border-top-color: var(--accent); }
.car-note { margin: 2px 0 0; font-size: .9rem; color: var(--muted); }

/* Full screen: the car only */
.stage-wrap.full { position: fixed; inset: 0; height: 100%; z-index: 100; }
body.no-scroll { overflow: hidden; }
.full-close { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 1.1rem; cursor: pointer; opacity: 0; transition: opacity .3s; z-index: 3; }
.full-close.show, .full-close:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .full-close { transition: none; } }

.handles .handle { position: absolute; border: 3px solid var(--accent); border-radius: 50%; pointer-events: auto; cursor: move; touch-action: none; background: rgba(255,255,255,.08); }
.handle .num { position: absolute; left: 50%; top: -34px; transform: translateX(-50%) scale(var(--isx, 1), var(--isy, 1)); background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .8rem; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
/* Resize dot on the circle's lower-right edge; the bigger invisible ring makes it easy to grab on a phone */
.handle .grip { position: absolute; left: 85.36%; top: 85.36%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.45); cursor: nwse-resize; transform: scale(var(--isx, 1), var(--isy, 1)); }
.handle .grip::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.handle .dot { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent); }

.fix { margin: 0 auto; width: min(720px, calc(100% - 32px)); background: var(--surface); border: 2px solid var(--accent); border-radius: var(--radius); padding: 16px; display: grid; gap: 12px; }
.fix-title { font-size: 1.05rem; }
.fix-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; }
.fix-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.fix-actions .btn { flex: 1 1 140px; }

/* Wheel rail and the chosen wheel */
.shop { display: flex; flex-direction: column; gap: 18px; padding-block: 16px 60px; }
/* (the round quick picker under the car is the one wheel list; the big cards repeated it) */
.shop > .strip { display: none !important; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 12px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; }
.wheel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px 12px; border-radius: 18px; border: 2px solid transparent; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); font: inherit; cursor: pointer; scroll-snap-align: start; text-align: center; }
.wheel:hover { border-color: var(--line); }
.wheel[aria-pressed="true"] { border-color: var(--accent); }
.wheel img { width: 124px; height: 124px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, var(--surface), var(--surface-2)); }
.wheel .nm { font-weight: 700; font-size: .92rem; line-height: 1.2; margin-top: 4px; }
.wheel .fin { font-size: .8rem; color: var(--muted); }
.wheel .pr { font-weight: 700; font-size: .92rem; margin-top: 2px; }
.wheel .tag { position: absolute; top: 8px; left: 8px; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }

.tag.good, .badge.good { background: var(--good-soft); color: var(--good); }
.tag.pick { background: var(--accent); color: var(--accent-ink); }
.badge { display: inline-block; font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }

.picked { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; display: grid; gap: 14px; }
@media (min-width: 860px) { .picked { grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); align-items: start; column-gap: 32px; } .picked .buy { grid-column: 2; grid-row: 1 / span 3; } }
.picked h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.picked .sub { color: var(--muted); margin-top: 4px; }
.sizes-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.size-btn { font: 700 1rem var(--body); min-width: 64px; min-height: 48px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.size-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.size-btn.nofit { color: var(--muted); text-decoration: line-through; }
.buy { display: grid; gap: 10px; background: var(--surface-2); border-radius: 14px; padding: 16px; }
.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price strong { font: 800 2.2rem var(--head); font-variant-numeric: tabular-nums; }
.fitline { font-size: .95rem; }
.fitline.good { color: var(--good); }
.fitline.warn { color: var(--warn); }
.fitline.bad { color: var(--bad); }
details.info summary { cursor: pointer; color: var(--muted); font-size: .92rem; font-weight: 600; }
details.info ul { margin: 8px 0 0; padding-left: 20px; font-size: .92rem; color: var(--muted); display: grid; gap: 4px; }
.buy .btn.primary { width: 100%; font-size: 1.1rem; min-height: 56px; }
.car-pick { display: grid; gap: 6px; max-width: 460px; }
.car-pick label { font-weight: 600; font-size: .95rem; }
.credit { font-size: .78rem; color: var(--muted); }
.credit a { color: inherit; }

/* Staff */
.tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.tab { font: 600 1rem var(--body); color: var(--muted); background: none; border: 0; border-bottom: 3px solid transparent; padding: 12px 10px; cursor: pointer; white-space: nowrap; }
.tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.pill { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .78rem; font-weight: 700; text-align: center; }
.tab-panel { display: flex; flex-direction: column; gap: 16px; }
.tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.search { flex: 1 1 240px; max-width: 420px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.stat b { display: block; font: 800 1.5rem var(--head); font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: .88rem; }
.stat.wide { grid-column: 1 / -1; }
.stat ol { margin: 4px 0 0; padding-left: 20px; font-size: .92rem; }
.list { display: flex; flex-direction: column; gap: 10px; }
.row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.row img { width: 64px; height: 64px; }
.row .meta { font-size: .88rem; color: var(--muted); }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .row { grid-template-columns: 56px minmax(0, 1fr); } .row-actions { grid-column: 1 / -1; justify-content: flex-start; } }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chips .chip { font-size: .78rem; padding: 2px 8px; min-height: 0; border-radius: 999px; background: var(--surface-2); font-variant-numeric: tabular-nums; cursor: default; }
.chips .chip.out { color: var(--bad); }
.chips .chip.low { color: var(--warn); }
.quote { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.quote img { width: 100%; border-radius: 8px; display: block; }
.quote h3 { font-size: 1.1rem; }
.quote dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 6px 0; font-size: .95rem; }
.quote dt { color: var(--muted); }
.quote dd { margin: 0; overflow-wrap: anywhere; }
.q-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.q-actions select { width: auto; }
@media (max-width: 640px) { .quote { grid-template-columns: 1fr; } }
.empty-list { text-align: center; color: var(--muted); padding: 40px 16px; background: var(--surface); border: 1.5px dashed var(--line); border-radius: 12px; }
details.more { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
details.more summary { cursor: pointer; font-weight: 600; }
.more-body { display: grid; gap: 10px; margin-top: 10px; }
.note { color: var(--muted); margin-top: 20px; }

/* Dialogs */
.dialog { border: 0; border-radius: 18px; background: var(--surface); color: var(--ink); padding: 20px; width: min(500px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.dialog.wide { width: min(900px, calc(100vw - 24px)); }
.dialog::backdrop { background: rgba(10, 12, 16, .55); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.dialog-actions .btn { flex: 1 1 120px; }
.quote-summary { display: flex; gap: 12px; align-items: center; background: var(--surface-2); border-radius: 12px; padding: 10px; }
.quote-summary img { width: 120px; border-radius: 8px; flex: none; }
.quote-summary div { min-width: 0; font-size: .95rem; }
#copy-text { font: 13px ui-monospace, Menlo, Consolas, monospace; }

.editor { display: grid; gap: 16px; }
@media (min-width: 720px) { .editor { grid-template-columns: 240px minmax(0, 1fr); } }
.editor-fields { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.editor-preview { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.editor-preview canvas { width: 200px; height: 200px; background: var(--surface-2); border-radius: 50%; }
.sizes { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0; min-width: 0; }
.size-head, .size-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr 1fr 44px; gap: 6px; align-items: center; }
.size-head { font-size: .78rem; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.size-row { margin-bottom: 6px; }
.size-row input { padding: 8px; min-height: 44px; font-size: 16px; }
.size-row .rm { min-height: 44px; padding: 0; }
@media (max-width: 560px) {
  .two { grid-template-columns: 1fr; }
  .size-head { display: none; }
  .size-row { grid-template-columns: 1fr 1fr 1fr; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
}

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(200%); background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 12px; font-weight: 600; box-shadow: var(--shadow); transition: transform .25s; z-index: 50; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } .toast { transition: none; } }

/* Keyboard focus on controls whose real input is invisible */
.swatch.custom:focus-within, label.chip:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Configurator look: the car, its controls and the photo try-on sit on one dark
   studio panel; everything below stays light. Local colour tokens turn the chips into glass. ---------- */
.hero {
  --surface: rgba(255, 255, 255, .07); --surface-2: rgba(255, 255, 255, .12); --line: rgba(255, 255, 255, .16);
  --ink: #f4f5f7; --muted: #aeb5c0; --bg: #101216; --glass: rgba(20, 22, 27, .62);
  --stage-top: #3a3f48; --stage-bottom: #0f1114;
  /* Brighter accent on the dark panel so keyboard focus rings stand out (3:1 or better) */
  --accent: #fb7f3c; --accent-soft: rgba(251, 127, 60, .35);
  background: radial-gradient(140% 80% at 50% 18%, #363b44 0%, #1a1d22 52%, #0e1013 100%);
  color: var(--ink); padding-bottom: 18px; border-radius: 0 0 28px 28px; gap: 14px;
}
.hero .stage-wrap { background: transparent; }
.hero .stage { background: #0f1114; }
.hero .chip, .hero .mode, .hero .paints, .hero .car-select { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero .chip:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .12); }
.hero .chip.strong { background: #f4f5f7; color: #101216; border-color: #f4f5f7; }
.hero .car-select select { color: var(--ink); }
.hero .car-select option { color: #161a20; background: #fff; }
.hero .views .chip[aria-pressed="true"], .hero .views .chip.on { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); }
.hero .loading { color: #c7ccd4; }
.hero .fix { background: #1d2026; }
.build-tag { color: #eef0f3; background: rgba(20, 22, 27, .6); border: 1px solid rgba(255, 255, 255, .12); }

/* "Try these on my car" over the 3D car */
/* Lined up with the header's content edge (1200px wide) on big screens */
.try-cta { position: absolute; right: max(16px, env(safe-area-inset-right, 0px), calc((100% - 1200px) / 2 + 16px)); top: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border: 0; border-radius: 16px; cursor: pointer; color: #fff; text-align: left; font: inherit;
  /* Deep enough orange for white text to read easily (contrast 5:1 or better) */
  background: linear-gradient(135deg, #c2410c, #9a3412); box-shadow: 0 8px 24px rgba(194, 65, 12, .45), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .2s, box-shadow .2s; }
.try-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(194, 65, 12, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }
.try-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.try-cta svg { width: 26px; height: 26px; flex: none; }
.try-cta span { display: flex; flex-direction: column; line-height: 1.2; }
.try-cta b { font-size: .98rem; }
.try-cta small { font-size: .74rem; opacity: .9; }
.stage-wrap.full .try-cta { display: none; }
/* Phones: a slim button in its own strip above the car, so neither it nor the build label covers the car */
@media (max-width: 520px) {
  .try-cta small { display: none; }
  .try-cta { top: 10px; padding: 7px 12px 7px 10px; border-radius: 12px; }
  .try-cta svg { width: 22px; height: 22px; }
  /* A phone screen is narrow, so the car is as wide as the screen long before the box is full:
     a shorter box keeps the car and the wheel choices on screen together */
  .stage-wrap:not(.full):not(.photo-fit) { height: calc(clamp(260px, 40vh, 420px) + var(--dock-h, 0px) + 46px); }
  /* ...but the "add a photo" guide needs its full height */
  .stage-wrap:not(.full):not(.photo-fit):has(#photo-empty:not([hidden])) { height: calc(clamp(340px, 56vh, 700px) + var(--dock-h, 0px) + 46px); }
  .stage-wrap:not(.full):not(.photo-fit) .stage3d { top: 46px; }
  /* Close-ups fill the picture: fade its top edge under the strip instead of a hard cut */
  .stage-wrap:not(.full):not(.photo-fit) .stage3d canvas { -webkit-mask-image: linear-gradient(transparent, #000 36px, #000 97%, transparent); mask-image: linear-gradient(transparent, #000 36px, #000 97%, transparent); }
  .build-tag { top: 8px; left: 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .try-cta { transition: none; } }

/* Wheel cards: lift on hover, clear ring when chosen */
.wheel { transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
.wheel:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20, 24, 32, .06), 0 12px 28px rgba(20, 24, 32, .1); }
.wheel[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); }
@media (prefers-reduced-motion: reduce) { .wheel { transition: none; } .wheel:hover { transform: none; } }

/* The chosen car's wheel specs */
.car-spec { margin-top: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 16px; margin: 0; }
.spec-grid div { min-width: 0; }
.spec-grid dt { font-size: .76rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.spec-grid dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.spec-note { margin: 10px 0 0; font-size: .9rem; color: var(--warn); }
.nz-rules { margin-top: 10px; font-size: .9rem; }
.nz-rules summary { cursor: pointer; font-weight: 600; }
.nz-rules ul { margin: 6px 0 0; padding-left: 20px; color: var(--muted); }
.spec-src { margin: 8px 0 0; font-size: .78rem; color: var(--muted); }

/* Photo tips on the empty "My car photo" screen */
.pe-tips { list-style: none; margin: 2px 0 8px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; max-width: 520px; }
.pe-tips li { font-size: .82rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.pe-tips li::before { content: "✓ "; color: var(--good); font-weight: 700; }

/* "Which car is this?" beside the customer's photo; glows until a car is chosen */
.photo-tools { align-items: center; max-width: 100%; }
.photo-car { flex: 1 1 100%; width: 100%; max-width: min(420px, 100%); margin: 0 auto 2px; }
.photo-car label { white-space: nowrap; }
.photo-car select { flex: 1; min-width: 0; max-width: none; }
.photo-car.ask { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(251, 127, 60, .25); }

/* Before / after line over the customer's photo */
.compare { position: absolute; touch-action: none; }
.compare input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.compare-line { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 12px rgba(0,0,0,.35); pointer-events: none; }
.compare-line .knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #14161a; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; letter-spacing: -1px; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.compare input:focus-visible ~ .compare-line, .compare:focus-within .compare-line .knob { outline: 3px solid var(--accent); outline-offset: 2px; }
.cmp-tag { position: absolute; top: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: .78rem; font-weight: 700; pointer-events: none; }
.cmp-tag.left { left: 10px; } .cmp-tag.right { right: 10px; }
.photo-empty .pe-guide { width: min(320px, 82%); height: auto; color: var(--ink); margin-bottom: 4px; }

/* Rim sizes and matching tyres, in the car spec card */
.upgrades { margin-top: 12px; font-size: .9rem; }
.upgrades summary { cursor: pointer; font-weight: 600; }
.upgrades table { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.upgrades th { text-align: left; font-size: .74rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.upgrades td { padding: 6px; border-bottom: 1px solid var(--line); }
.upgrades tr.factory td { font-weight: 700; }
.upgrades td.ok { color: var(--good); }
.upgrades td.chk { color: var(--warn); }
.upgrades .muted { margin: 6px 0 0; font-size: .8rem; }
.upgrades tr[data-dia] { cursor: pointer; }
.upgrades tr[data-dia]:hover td { background: var(--surface-2); }
.upgrades tr.on td { background: var(--accent-soft); }
.upgrades tr.on td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.upgrades .up-hint { margin: 4px 0 0; font-size: .8rem; }
.upgrades td.cnt { color: var(--muted); white-space: nowrap; }
@media (max-width: 420px) { .upgrades th, .upgrades td { padding: 5px 3px; font-size: .82rem; } .upgrades th:nth-child(3), .upgrades td:nth-child(3) { display: none; } }

/* Shop logo: header and settings */
.brand .shop-logo { height: 32px; width: auto; max-width: 120px; object-fit: contain; }
.logo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo-row img { height: 48px; width: auto; max-width: 160px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 4px; }

/* Quick wheel picker over the car (all screens). Choosing a wheel never scrolls the
   car away. With a photo it sits just under the photo (moved there by placeDock in app.js). */
.dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: block; padding: 6px 0 max(10px, env(safe-area-inset-bottom, 0px)); }
.stage-wrap.full .dock { padding-top: 26px; background: linear-gradient(to top, rgba(10, 11, 14, .88) 30%, rgba(10, 11, 14, 0)); }
.dock[hidden] { display: none !important; }
.hero > .dock { position: static; padding: 2px 0 0; background: none; margin-top: -4px; }
.dock-name { margin: 0 16px 6px; font-size: .84rem; color: #eef0f3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.dock-name span { color: #b9c0ca; }
.dock-row { display: flex; gap: 10px; overflow-x: auto; padding: 4px 16px 4px; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
.dock-row::-webkit-scrollbar { display: none; }
.dock-w { flex: none; width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); cursor: pointer; scroll-snap-align: center; transition: transform .15s ease, border-color .15s; }
.dock-w img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.dock-w[aria-pressed="true"] { border-color: var(--accent); transform: scale(1.1); box-shadow: 0 0 0 3px rgba(251, 127, 60, .35); }
/* (the accent, not white: the quick picker sits on the light page, where a white ring was invisible) */
.dock-w:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dock-w { transition: none; } }

/* Design view switch: lights up blue like the design mesh */
.hero .views .design-btn[aria-pressed="true"] { background: rgba(59, 155, 255, .22); border-color: rgba(95, 180, 255, .75); color: #dcefff; }
.paints.dim { opacity: .4; }
.dock-bar { display: flex; align-items: center; gap: 8px; margin: 0 16px 8px; }
/* Sizes give way first on narrow phones (scrolling sideways), so the price and Get price always show */
.dock-sizes { display: flex; gap: 6px; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dock-sizes::-webkit-scrollbar { display: none; }
.dock-sizes .dock-size { flex: none; }
.dock-sizes.overflowing { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.dock-size { min-width: 44px; min-height: 34px; padding: 0 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #eef0f3; font: 700 .84rem var(--body); cursor: pointer; }
.dock-size[aria-pressed="true"] { background: #f4f5f7; color: #101216; border-color: #f4f5f7; }
.dock-size.nofit { opacity: .45; text-decoration: line-through; }
.dock-size:focus-visible, .dock-quote:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dock-price { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; font-size: .72rem; color: #b9c0ca; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dock-price b { color: #fff; font-size: .95rem; }
.dock-quote { flex: none; min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #c2410c, #9a3412); color: #fff; font: 700 .84rem var(--body); cursor: pointer; }
.dock-quote:disabled { opacity: .45; cursor: not-allowed; }
/* Wide screens: the picker's rows sit centred under the car rather than stretched edge to edge */
@media (min-width: 761px) { .dock-name, .dock-bar, .dock-row { max-width: 760px; margin-left: auto; margin-right: auto; } .dock-row { padding-left: 16px; padding-right: 16px; } .dock-name, .dock-bar { padding: 0 16px; } .dock-w { width: 62px; height: 62px; } }
/* Phones: a narrow screen fits the car's length, not its height, so a shorter stage keeps the car big */
@media (max-width: 760px) { .stage-wrap { height: calc(clamp(260px, 40vh, 440px) + var(--dock-h, 0px)); } }
/* Tyre kinds in the quick picker: one swipeable row of chips */
.dock-tyres { display: flex; align-items: center; gap: 6px; overflow-x: auto; margin: 0 0 8px; padding: 0 16px; scrollbar-width: none; }
.dock-tyres::-webkit-scrollbar { display: none; }
/* Phones: the row is wider than the screen, so its right edge fades to show there is more to swipe */
@media (max-width: 760px) { .dock-tyres { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } }
/* "White letters" is an on/off extra, not a tyre kind: outlined with a white letter "A" badge */
.white-toggle::before { content: "A"; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-right: 6px; border-radius: 4px; background: #1b1c1f; color: #fff; font-size: .78em; font-weight: 800; }
.dock-lbl { flex: none; font-size: .78rem; font-weight: 700; color: #b9c0ca; text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.dock-kind { flex: none; white-space: nowrap; font-weight: 600; }
@media (min-width: 761px) { .dock-tyres { max-width: 760px; margin-left: auto; margin-right: auto; } }
/* Tyre choice in the wheel details */
.tyre-pick { display: grid; gap: 6px; margin: 4px 0 2px; }
.tyre-pick label { font-weight: 700; }
.tyre-pick select { min-height: 44px; }
.tyre-note { margin: 0; font-size: .86rem; }

/* One car button everywhere a car is chosen (it opens the car picker) */
.car-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 .92rem var(--body); cursor: pointer; max-width: 100%; }
.car-btn svg { width: 22px; height: 22px; flex: none; opacity: .85; }
.car-btn .car-btn-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.car-btn .chev { opacity: .6; font-size: .8rem; }
.car-btn:hover { border-color: rgba(255, 255, 255, .45); }
.car-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.car-btn.light { width: 100%; justify-content: flex-start; border-radius: 12px; min-height: 48px; box-shadow: var(--shadow); }
.car-btn.light:hover { border-color: var(--accent); }
.car-btn.light .chev { margin-left: auto; }
.car-pick-lbl { margin: 0 0 6px; font-weight: 700; }
.hero .car-select { padding: 0; background: none; border: 0; }
.photo-car.ask .car-btn { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(251, 127, 60, .3); }

/* The car picker sheet */
.car-dialog { padding: 0; }
.car-dialog > * { margin-left: 20px; margin-right: 20px; }
.cd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 1; margin: 0; padding: 16px 20px 8px; background: var(--surface); }
.cd-head h2 { margin: 0; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.1rem; cursor: pointer; }
.icon-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cd-search { width: calc(100% - 40px); box-sizing: border-box; min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 500 1rem var(--body); }
.cd-search:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.cd-sub { margin-top: 16px; margin-bottom: 8px; font-weight: 700; }
.cd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.cd-card { display: flex; flex-direction: column; gap: 6px; padding: 0 0 10px; border-radius: 14px; border: 2px solid transparent; background: #1b1d22; color: #f4f5f7; font: 700 .9rem var(--body); cursor: pointer; overflow: hidden; text-align: center; }
.cd-card img { width: 100%; height: auto; display: block; aspect-ratio: 440 / 182; }
.cd-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(251, 127, 60, .3); }
.cd-card:hover { border-color: rgba(251, 127, 60, .6); }
.cd-card:focus-visible, .cd-v:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cd-card[hidden], .cd-v[hidden], .cd-make[hidden], .cd-sub[hidden] { display: none; }
.cd-list { display: grid; gap: 12px; padding-bottom: 20px; }
.cd-make h3 { margin: 0 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cd-make > div { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-v { min-height: 40px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .88rem var(--body); cursor: pointer; }
.cd-v[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cd-3d { font-size: .68rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #fff; margin-left: 2px; }
.cd-empty { padding-bottom: 20px; }
@media (max-width: 560px) { .cd-grid { grid-template-columns: 1fr 1fr; } .cd-card { font-size: .8rem; } .car-dialog { width: 100vw; max-height: 92dvh; border-radius: 18px 18px 0 0; margin-bottom: 0; } }
/* The AI photo button under the customer's photo: the main call to action. Deep charcoal with a
   slow light sweep across it, like a premium product button. */
.ai-cta { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); max-width: 760px; margin: 2px auto 0; padding: 13px 16px 13px 18px; border: 1px solid #2b3038; border-radius: 14px; cursor: pointer; color: #fff; text-align: left; font: inherit;
  background: linear-gradient(180deg, #23272e, #121418); box-shadow: 0 10px 24px rgba(16, 18, 22, .28), inset 0 1px 0 rgba(255, 255, 255, .1); transition: transform .2s, box-shadow .2s; }
.ai-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .14), transparent); transform: skewX(-18deg); animation: ai-sheen 4.5s ease-in-out infinite; }
.ai-cta[hidden] { display: none; }
.ai-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(16, 18, 22, .35), inset 0 1px 0 rgba(255, 255, 255, .12); }
.ai-cta:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.ai-cta svg { width: 26px; height: 26px; flex: none; color: #fb7f3c; }
.ai-cta span { display: flex; flex-direction: column; line-height: 1.25; }
.ai-cta b { font-size: 1rem; letter-spacing: .01em; }
.ai-cta small { font-size: .78rem; color: #aeb5c0; }
.ai-cta .ai-cta-go { margin-left: auto; width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fb7f3c; color: #1a0d04; font-weight: 800; }
@keyframes ai-sheen { 0%, 55% { left: -40%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .ai-cta { transition: none; } .ai-cta::after { animation: none; display: none; } }
/* Undo / redo beside the wheel name, and the before / after slider under the photo */
.dock-head { display: flex; align-items: center; gap: 8px; margin: 0 16px 6px; }
.dock-head .dock-name { flex: 1; min-width: 0; margin: 0; }
.hist { display: flex; gap: 6px; flex: none; }
.hist-btn { width: 40px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #eef0f3; cursor: pointer; }
.hist-btn svg { width: 18px; height: 18px; }
.hist-btn:disabled { opacity: .35; cursor: default; }
.hist-btn:not(:disabled):hover { background: rgba(255, 255, 255, .16); }
.hist-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ba { display: flex; align-items: center; gap: 10px; margin: 0 16px 8px; font-size: .78rem; font-weight: 700; color: #b9c0ca; text-transform: uppercase; letter-spacing: .04em; }
.ba[hidden] { display: none; }
.ba input { flex: 1; min-width: 0; accent-color: var(--accent); height: 28px; }
@media (min-width: 761px) { .dock-head, .ba { max-width: 760px; margin-left: auto; margin-right: auto; padding: 0 16px; } .dock-head { margin-bottom: 6px; } }

/* Magnifier while a wheel circle is dragged */
.loupe { position: absolute; z-index: 6; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; pointer-events: none; border: 3px solid #fff; box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4); }
.loupe[hidden] { display: none; }
.loupe canvas { width: 100%; height: 100%; display: block; }

/* Fine-tune buttons in the wheel-placing panel */
.tune { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.tune-pick { display: flex; gap: 6px; flex-basis: 100%; justify-content: center; }
.tune-w { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 .86rem var(--body); cursor: pointer; }
.tune-w[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.tune-pad { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 40px); gap: 4px; }
.tune-pad [data-tune="up"] { grid-column: 2; grid-row: 1; }
.tune-pad [data-tune="left"] { grid-column: 1; grid-row: 2; }
.tune-pad [data-tune="down"] { grid-column: 2; grid-row: 2; }
.tune-pad [data-tune="right"] { grid-column: 3; grid-row: 2; }
.tune-size, .tune-hist { display: flex; align-items: center; gap: 6px; }
.tune-size span { font-size: .8rem; font-weight: 700; color: var(--muted); min-width: 38px; text-align: center; }
.tune-btn { width: 44px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: 800 1.05rem var(--body); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.tune-btn svg { width: 20px; height: 20px; }
.tune-btn:active { background: var(--accent); color: #fff; }
.tune-btn:disabled { opacity: .35; }
.tune-btn:focus-visible, .tune-w:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Full screen: the panel floats over the bottom of the photo */
.stage-wrap.full > .fix { position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 7; width: min(720px, calc(100% - 20px)); max-height: 55%; overflow: auto; background: rgba(22, 24, 29, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); gap: 8px; padding: 12px; }

/* AI at work: a calm, technical "rebuild" over the photo */
.ai-magic { position: absolute; z-index: 5; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, rgba(8, 12, 20, .35), rgba(8, 12, 20, .55)); }
.ai-magic[hidden] { display: none; }
.ai-edges { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 3px rgba(125, 211, 252, .9)); animation: ai-reveal 3.2s cubic-bezier(.5, 0, .3, 1) infinite; }
.ai-beam { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #e0f2fe; box-shadow: 0 0 12px 3px rgba(125, 211, 252, .9), 0 0 60px 18px rgba(56, 189, 248, .25); animation: ai-beam 3.2s cubic-bezier(.5, 0, .3, 1) infinite; }
.ai-lock { position: absolute; transform: translate(-50%, -50%) scale(1.25); opacity: 0; animation: ai-lock .7s cubic-bezier(.2, .8, .2, 1) forwards; }
.ai-ring { position: absolute; inset: 0; border-radius: 50%; }
.ai-ring.a { border: 2px dashed rgba(186, 230, 253, .95); animation: ai-spin 6s linear infinite; }
.ai-ring.b { inset: 12%; border: 1.5px solid rgba(251, 127, 60, .9); border-left-color: transparent; border-right-color: transparent; animation: ai-spin 2.4s linear infinite reverse; }
.ai-ticks { position: absolute; inset: -8%; background:
  linear-gradient(#e0f2fe, #e0f2fe) top center / 2px 10% no-repeat, linear-gradient(#e0f2fe, #e0f2fe) bottom center / 2px 10% no-repeat,
  linear-gradient(#e0f2fe, #e0f2fe) center left / 10% 2px no-repeat, linear-gradient(#e0f2fe, #e0f2fe) center right / 10% 2px no-repeat; }
.ai-new { position: absolute; inset: 14%; width: 72%; height: 72%; border-radius: 50%; opacity: 0; mix-blend-mode: screen; animation: ai-new 2.4s ease-in-out infinite; }
.ai-tag { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font: 700 10px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .14em; color: #e0f2fe; background: rgba(8, 12, 20, .7); padding: 4px 7px; border-radius: 4px; white-space: nowrap; }
.ai-panel { position: absolute; left: 12px; bottom: 12px; width: min(260px, calc(100% - 24px)); padding: 12px 14px 12px; border-radius: 12px; background: rgba(10, 14, 22, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(186, 230, 253, .18); color: #e5edf5; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.ai-title { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font: 700 11px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: #bae6fd; }
.ai-pulse { width: 8px; height: 8px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 0 0 rgba(56, 189, 248, .7); animation: ai-pulse 1.4s ease-out infinite; }
.ai-steps { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 5px; font-size: .8rem; }
.ai-steps li { display: flex; align-items: center; gap: 8px; color: rgba(229, 237, 245, .4); transition: color .3s; }
.ai-steps li::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; }
.ai-steps li.on { color: #fff; font-weight: 700; }
.ai-steps li.on::before { border-color: #38bdf8; border-top-color: transparent; animation: ai-spin .8s linear infinite; }
.ai-steps li.done { color: rgba(229, 237, 245, .75); }
.ai-steps li.done::before { background: #38bdf8; border-color: #38bdf8; box-shadow: inset 0 0 0 2px rgba(10, 14, 22, .9); }
.ai-bar { height: 3px; border-radius: 3px; background: rgba(186, 230, 253, .15); overflow: hidden; }
.ai-bar span { display: block; width: 35%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, transparent, #38bdf8, #fb7f3c); animation: ai-bar 1.6s ease-in-out infinite; }
@keyframes ai-reveal { 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 55% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: .15; } }
@keyframes ai-beam { 0% { transform: translateX(0); opacity: 1; } 55% { transform: translateX(var(--bw, 100vw)); opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes ai-lock { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-new { 0%, 100% { opacity: .15; transform: rotate(0deg) scale(.96); } 50% { opacity: .85; transform: rotate(40deg) scale(1); } }
@keyframes ai-pulse { to { box-shadow: 0 0 0 10px rgba(56, 189, 248, 0); } }
@keyframes ai-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .ai-edges, .ai-beam, .ai-ring, .ai-new, .ai-pulse, .ai-bar span, .ai-steps li.on::before { animation: none; } .ai-lock { animation: none; opacity: 1; transform: translate(-50%, -50%); } .ai-new { opacity: .6; } }
.hero .stage-wrap.full { background: #0f1114; }

/* ---------- Phones: a calm, uncluttered layout ----------
   One full-width switch (3D / photo), the car with two small icon buttons beside it, the colours,
   then the camera angles as one slim segmented row. Duplicates of the quick picker are hidden:
   the big wheel cards, the size and tyre choosers in the details, Compare (the slider does it)
   and "See it in 3D" (the switch does it). */
@media (max-width: 760px) {
  .controls { gap: 10px 8px; }
  .controls > .mode { order: 1; width: 100%; }
  .controls > .mode .mode-btn { flex: 1; }
  .controls > #car-select { order: 2; flex: 1 1 0; min-width: 0; }
  .controls > #car-select .car-btn { width: 100%; justify-content: flex-start; }
  .controls > #car-select .chev { margin-left: auto; }
  /* Photo tools join the main row: the car on its own line, then the tools and the two icons */
  .controls > #photo-tools:not([hidden]) { display: contents; }
  #photo-tools > #photo-car-wrap { order: 2; flex: 1 1 calc(100% - 112px); min-width: 0; }
  #photo-tools > #photo-car-wrap .car-btn { width: 100%; justify-content: flex-start; }
  #photo-tools > #photo-car-wrap .chev { margin-left: auto; }
  #photo-tools > .chip, #photo-tools > label.chip { order: 5; flex: 1 1 0; min-width: 0; white-space: nowrap; justify-content: center; padding: 6px 8px; min-height: 40px; font-size: .88rem; }
  .controls > #save-btn { order: 3; }
  .controls > #full-btn { order: 4; }
  .controls > #save-btn, .controls > #full-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
  .controls > #save-btn .lbl, .controls > #full-btn .lbl, .design-btn .lbl { display: none; }
  .controls > #paints { order: 5; flex-basis: 100%; justify-content: flex-start; scrollbar-width: none; }
  .controls > #paints::-webkit-scrollbar { display: none; }
  .controls > #views { order: 6; flex-wrap: nowrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
  .controls > #views .chip { border: 0; background: none; min-height: 36px; padding: 6px 13px; }
  .controls > #views .design-btn { width: 36px; padding: 0; }
  .hero .views .chip[aria-pressed="true"], .hero .views .chip.on { background: rgba(255, 255, 255, .16); }
  #before-btn { display: none; }
  .shop > .strip { display: none; }
  .picked .sizes-pick, .picked .tyre-pick { display: none; }
}

/* ---------- White studio: the car and its controls on a bright, light-grey stage ----------
   (overrides the earlier dark panel; the page's own light/dark theme is unchanged) */
.hero {
  --surface: #ffffff; --surface-2: #eef0f3; --line: #dfe3e8; --ink: #14171c; --muted: #5f6772; --bg: #f4f5f7;
  --glass: rgba(255, 255, 255, .86); --stage-top: #ffffff; --stage-bottom: #e7eaee;
  --accent: #c2410c; --accent-soft: rgba(194, 65, 12, .2); --accent-ink: #ffffff;
  background: radial-gradient(120% 70% at 50% 20%, #ffffff 0%, #f3f5f7 55%, #e9ecf0 100%);
  color: var(--ink); color-scheme: light; box-shadow: 0 1px 0 #e2e5ea, 0 12px 30px rgba(20, 24, 32, .06);
}
.hero .chip:hover { border-color: #b9c0c9; background: #f6f7f9; }
.hero .chip.strong { background: #14171c; color: #fff; border-color: #14171c; }
.hero .views .chip[aria-pressed="true"], .hero .views .chip.on { background: #e8ebef; border-color: #c9cfd7; }
.hero .loading { color: var(--muted); }
.hero .fix { background: #fff; }
.hero .stage { background: #e9ecf0; }
.hero .stage-wrap.full { background: #f2f4f6; }
.hero .spinner { border-color: rgba(20, 23, 28, .15); border-top-color: var(--accent); }
.build-tag { color: #14171c; background: rgba(255, 255, 255, .88); border: 1px solid #dfe3e8; }
.hero .swatch { box-shadow: 0 0 0 1px #cfd4db; }
.car-btn:hover { border-color: #b9c0c9; }
.dock-name { color: #14171c; text-shadow: none; }
.dock-name span { color: #5f6772; }
.dock-w { border-color: #dfe3e8; background: #f3f4f6; }
.dock-size { border-color: #d3d8de; background: #fff; color: #14171c; }
.dock-size[aria-pressed="true"] { background: #14171c; color: #fff; border-color: #14171c; }
.dock-price { color: #5f6772; }
.dock-price b { color: #14171c; }
.dock-lbl { color: #5f6772; }
.stage-wrap.full .dock { background: linear-gradient(to top, rgba(246, 247, 249, .96) 35%, rgba(246, 247, 249, 0)); }
.hist-btn { border-color: #d3d8de; background: #fff; color: #14171c; }
.hist-btn:not(:disabled):hover { background: #f1f3f6; }
.ba { color: #5f6772; }
.stage-wrap.full > .fix { background: rgba(255, 255, 255, .95); }
.hero .views .design-btn[aria-pressed="true"] { background: #e0f2fe; border-color: #7dd3fc; color: #075985; }
@media (max-width: 760px) { .hero .views .chip[aria-pressed="true"], .hero .views .chip.on { background: #e8ebef; } }
/* Small photos (phones): the AI panel shrinks to one slim line with the current step */
@media (max-width: 760px) {
  .ai-panel { left: 8px; right: 8px; bottom: 8px; width: auto; padding: 8px 12px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; }
  .ai-title { margin: 0; font-size: 10px; }
  .ai-steps { margin: 0; }
  .ai-steps li:not(.on) { display: none; }
  .ai-bar { grid-column: 1 / -1; }
  .ai-tag { font-size: 9px; top: -18px; }
}

/* Phones: the shop name gets the room (two lines if it needs them); the staff "back" link is short */
#customer-btn .short { display: none; }
@media (max-width: 520px) {
  #customer-btn .long { display: none; }
  #customer-btn .short { display: inline; }
  .brand span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.15; }
  .link-btn { flex: none; }
}

/* Staff: tyres and prices */
.narrow-text { max-width: 60ch; margin: 0 0 12px; }
.tyre-kind { font-size: 1rem; margin: 18px 0 6px; }
.tyre-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tyre-row .check { flex: 1 1 220px; min-width: 0; }
.tyre-row.off b { color: var(--muted); text-decoration: line-through; }
.ty-price { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.ty-price input { width: 7.5em; }
.tyre-add { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 14px; align-items: end; margin: 20px 0 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tyre-add h3 { grid-column: 1 / -1; margin: 0; font-size: 1rem; }

/* Staff: share the app */
.share-card { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.share-card h3 { margin: 0 0 4px; font-size: 1.05rem; }
.share-card .muted { margin: 0 0 6px; }
.share-card .qr { width: 132px; height: 132px; flex: none; background: #fff; border-radius: 10px; padding: 4px; }
.share-card .qr svg { width: 100%; height: 100%; display: block; }
.share-url { font-weight: 600; word-break: break-all; margin: 0 0 10px; }

/* "See 4 at once" */
.four-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.four-tile { display: flex; flex-direction: column; gap: 4px; padding: 0 0 8px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.four-tile canvas { width: 100%; height: auto; display: block; }
.four-tile[aria-pressed="true"] { border-color: var(--accent); }
.four-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.four-nm, .four-pr { padding: 0 10px; font-size: .86rem; line-height: 1.3; }
.four-nm b { display: block; }
.four-pr { font-weight: 700; }
.four-pr small { font-weight: 500; color: var(--muted); }
@media (max-width: 520px) { .four-grid { grid-template-columns: 1fr; } }

/* Short button words on phones so the photo tools fit on one line */
#photo-tools .sm { display: none; }
@media (max-width: 760px) { #photo-tools .lg { display: none; } #photo-tools .sm { display: inline; } }

/* Staff: requests sent online */
.online-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.online-status { margin: 0; flex: 1 1 240px; color: var(--muted); }
.staff-key { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.staff-key input { width: 12em; }

/* Where the customer's photo goes, under the "Add a photo" button */
.pe-privacy { max-width: 40ch; margin: 2px 0 0; font-size: .8rem; color: var(--muted); }
.small-note { font-size: .8rem; margin: 0; }
.quote-summary .q-total { font-size: 1.1rem; }
.sample-btn { font-size: .9rem; margin-top: 2px; }

.white-toggle[aria-pressed="true"]::before { background: #fff; color: #111; }

/* Header: Call the shop (customers), Staff / back link */
.top-actions { display: flex; align-items: center; gap: 14px; }
.call-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px 6px 11px; border-radius: 999px; background: #c2410c; color: #fff; font: 700 .9rem var(--body); text-decoration: none; }
.call-btn svg { width: 16px; height: 16px; }
.call-btn:hover { background: #9a3412; }
.call-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Quote form: two short fields side by side; Send stays in view at the bottom while the form scrolls */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#quote-form .dialog-actions { position: sticky; bottom: -20px; margin: 0 -20px -20px; padding: 12px 20px 16px; background: var(--surface); border-top: 1px solid var(--line); }
.field-row .field { display: flex; flex-direction: column; justify-content: flex-end; }
/* Staff quote cards: call, text and email links in the app's accent colour */
.quote dd a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }

/* Staff: reminder to add the shop's own name and phone */
.setup-nudge { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); color: var(--ink); }
.setup-nudge p { margin: 0; flex: 1 1 240px; }

/* "4 at once": switch between four wheels and the chosen wheel in each size */
.four-modes { display: flex; gap: 6px; margin: 0 0 12px; }
.four-modes .four-mode { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.four-modes .four-mode[aria-pressed="true"] { background: #fff; color: #15171a; border-color: #fff; }

/* "Your own tyres stay in the picture from 20"": under the tyre chips, photo mode only */
.dock-note { margin: -2px 16px 8px; font-size: .88rem; color: var(--muted); }
.dock-note .link-btn { padding: 4px 2px; color: var(--accent); }
@media (min-width: 761px) { .dock-note { max-width: 728px; margin-left: auto; margin-right: auto; } }
/* Tablets and up: the photo tools sit in the same centred 760px column as the rows above, so they
   wrap evenly instead of running from the car picker to the screen edge */
@media (min-width: 761px) { #photo-tools:not([hidden]) { flex: 1 1 100%; max-width: 760px; } }

/* Staff tabs on phones: all four fit across (Settings was off the edge with nothing to show it) */
.tabs .sm { display: none; }
@media (max-width: 760px) { .tabs { gap: 2px; } .tabs .lg { display: none; } .tabs .sm { display: inline; } .tab { padding: 12px 8px; font-size: .95rem; } }
/* "N need your price": the starting-price wheels waiting for the owner */
.stat.warn { border-color: var(--accent); background: var(--accent-soft, var(--surface)); }
.stat.warn b { color: var(--accent); }
/* A button inside a message ("Choose my car") */
.toast-btn { margin-left: 6px; font: 700 .9rem var(--body); color: var(--ink); background: var(--bg); border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; }

/* The 3D / photo switch is gone: "Try these on my car" opens the photo try-on and "See it in 3D" or
   "Back to the 3D showroom" come back */
.mode { display: none !important; }
/* Camera angles float under the car, in the empty floor space above the quick picker */
.stage-wrap > #views { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-h, 0px) + 10px); z-index: 3;
  flex-wrap: nowrap; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .8); border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.stage-wrap > #views .chip { border: 0; background: none; color: #15171a; min-height: 36px; padding: 6px 13px; }
.stage-wrap > #views .chip:hover { background: rgba(0, 0, 0, .06); }
.stage-wrap > #views .design-btn { width: 36px; padding: 0; }
.stage-wrap > #views .design-btn[aria-pressed="true"] { background: #15171a; color: #fff; }
.stage-wrap > #views .design-btn .lbl { display: none; }
.stage-wrap.full > #views { bottom: calc(var(--dock-h, 0px) + 16px); }

/* ---------- Pop-out menus (2026-10-31) ----------
   Size, tyres, wheel colour, paint, the 3D cars and the mesh settings open from one button each.
   Liquid glass: a clear, frosted panel with a bright rim and a light sheen that sweeps across as it
   opens. It wobbles out of its button like a drop of liquid and the choices spring in one by one.
   Calm motion settings get a plain fade. */
.hero > .dock { position: relative; }
/* An open menu sits above the corner buttons too */
.dock:has(> .pop:not([hidden])) { z-index: 25; }
.pop { position: absolute; z-index: 20; width: max-content; max-width: min(380px, calc(100vw - 16px)); overflow: auto; overscroll-behavior: contain;
  padding: 14px; border-radius: 24px; color: #14171c;
  background: linear-gradient(140deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .56) 55%, rgba(255, 255, 255, .7));
  backdrop-filter: blur(22px) saturate(1.9) brightness(1.06); -webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(1.06);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(255, 255, 255, .45), inset 0 10px 22px -14px rgba(255, 255, 255, .95),
    0 24px 60px rgba(15, 18, 24, .24), 0 2px 8px rgba(15, 18, 24, .08);
  transform-origin: var(--ox, 50%) var(--oy, 100%); }
.pop[hidden] { display: none !important; }
/* The glass's light: a soft glare in the top corner and a sheen that sweeps across on opening */
.pop::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 70% at 15% 0%, rgba(255, 255, 255, .55), transparent 55%),
    linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .7) 48%, transparent 60%) no-repeat;
  background-size: 100% 100%, 260% 100%; background-position: 0 0, 130% 0; mix-blend-mode: soft-light; }
.pop.open { animation: pop-in .7s cubic-bezier(.2, .9, .3, 1) both; }
.pop.open::before { animation: pop-sheen 1.1s .15s ease-out both; }
.pop.closing { animation: pop-out .22s cubic-bezier(.5, 0, .75, 0) both; }
@keyframes pop-in {
  0% { opacity: 0; transform: scale(.2, .08); filter: blur(10px); border-radius: 999px; }
  40% { opacity: 1; transform: scale(1.05, .95); filter: blur(0); }
  60% { transform: scale(.98, 1.03); }
  78% { transform: scale(1.01, .995); }
  100% { opacity: 1; transform: none; filter: none; } }
@keyframes pop-sheen { from { background-position: 0 0, 130% 0; } to { background-position: 0 0, -40% 0; } }
@keyframes pop-out { to { opacity: 0; transform: scale(.35, .15); filter: blur(6px); } }
.pop.open:not(.settled) :is(.dock-size, .swatch, .pop-item, .dock-lbl, .tyre-tile) { animation: pop-item .55s cubic-bezier(.3, 1.6, .45, 1) both; animation-delay: calc(110ms + var(--i, 0) * 30ms); }
@keyframes pop-item { 0% { opacity: 0; transform: translateY(14px) scale(.5); filter: blur(5px); } 100% { opacity: 1; transform: none; filter: none; } }
/* The button that opened it sends out a soft ripple */
:is(.menu-btn, .corner-btn, .mesh-btn) { position: relative; }
:is(.menu-btn, .corner-btn, .mesh-btn).burst::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(20, 23, 28, .25), 0 0 18px 4px rgba(255, 255, 255, .9); animation: pop-burst .6s ease-out both; }
@keyframes pop-burst { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) {
  .pop.open { animation: pop-fade .15s both; }
  .pop.open::before, .pop.open :is(.dock-size, .swatch, .pop-item, .dock-lbl, .tyre-tile), :is(.menu-btn, .corner-btn, .mesh-btn).burst::after { animation: none; }
  .pop.closing { animation: none; }
}
@keyframes pop-fade { from { opacity: 0; } }
/* Liquid glass for the buttons that float over the car too */
.stage-wrap > #views, .corner-btn {
  background: linear-gradient(140deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .45)); border: 1px solid rgba(255, 255, 255, .75);
  backdrop-filter: blur(16px) saturate(1.8); -webkit-backdrop-filter: blur(16px) saturate(1.8);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(255, 255, 255, .4), 0 6px 18px rgba(15, 18, 24, .12); }
.pop-title, .pop .dock-lbl { display: block; margin: 0 2px 8px; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #5f6772; }
.pop .seg + .pop-title { margin-top: 14px; }
/* Choices inside a menu wrap onto lines instead of scrolling sideways */
.pop .dock-sizes, .pop .dock-tyres, .pop .paints { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; max-width: 300px; -webkit-mask-image: none; mask-image: none; background: none; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.pop .dock-tyres .dock-lbl { flex-basis: 100%; margin-bottom: 2px; }
.pop .dock-size { min-height: 40px; padding: 0 14px; }
.pop .paints { gap: 10px; }
.pop .swatch { width: 34px; height: 34px; }
.pop-list { display: flex; flex-direction: column; gap: 4px; min-width: 230px; }
.pop-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 0 14px; border: 1px solid transparent; border-radius: 12px; background: none; color: inherit; font: 600 .95rem var(--body); text-align: left; cursor: pointer; }
.pop-item small { color: #5f6772; font-weight: 600; font-size: .78rem; }
.pop-item:hover { background: rgba(255, 255, 255, .65); }
.pop-item[aria-pressed="true"] { background: #14171c; color: #fff; }
.pop-item[aria-pressed="true"] small { color: #c9ced6; }
.pop-item:focus-visible, .menu-btn:focus-visible, .corner-btn:focus-visible, .pop .swatch:focus-visible, .pop .dock-size:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Mesh lines: a slider from a few lines to every line, with the count */
.mesh-slide { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: #5f6772; font-weight: 600; min-width: 270px; margin-bottom: 14px; }
.mesh-slide input { flex: 1; accent-color: #14171c; }
.mesh-count { float: right; text-transform: none; letter-spacing: 0; font-weight: 600; color: #14171c; font-variant-numeric: tabular-nums; }
.pop-title label { cursor: inherit; }
.mesh-colours { display: flex; flex-wrap: wrap; gap: 10px; max-width: 250px; }
.pop .swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #14171c; }

/* The menu buttons: a small label over the current choice */
.menus { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 3px 2px; }
.menus::-webkit-scrollbar { display: none; }
.menu-btn { flex: none; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 42px; max-width: 170px; padding: 3px 26px 3px 12px;
  border: 1px solid rgba(20, 23, 28, .1); border-radius: 14px; background: linear-gradient(180deg, #fff, #f2f4f7); color: #14171c; font: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(15, 18, 24, .07); transition: background .2s, border-color .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.menu-btn:active { transform: scale(.96); }
.menu-btn::before { content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); opacity: .6; }
.menu-btn[aria-expanded="true"] { background: linear-gradient(180deg, #343943, #14171c); border-color: #14171c; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 12px rgba(15, 18, 24, .2); }
.menu-btn[aria-expanded="true"]::before { transform: rotate(-135deg); margin-top: -1px; }
.menu-btn small { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .65; line-height: 1; }
.menu-btn b { font-size: .88rem; line-height: 1.15; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-btn:hover:not([aria-expanded="true"]) { border-color: #b9c0c9; }
.menu-btn:disabled { opacity: .45; cursor: default; }
.menu-btn.dim { opacity: .5; }
.menu-btn[hidden] { display: none; }
.mb-dot { display: block; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; box-shadow: 0 0 0 1px #cfd4db; }
.dock-bar .hist { flex: none; }

/* Tyres: a turning wheel of tread pictures. Swipe (or tap, or use the arrow keys) and the one in the
   middle is fitted; the menu stays open so another can be tried straight away. */
.pop-tyres-wrap { width: min(440px, calc(100vw - 44px)); }
.tyre-wheel { display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px calc(50% - 46px) 10px; perspective: 700px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.tyre-wheel::-webkit-scrollbar { display: none; }
.tyre-tile { flex: none; width: 92px; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px 10px; border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .7); background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .35)); color: #14171c; font: 700 .82rem var(--body); cursor: pointer;
  box-shadow: inset 0 1px 1px #fff, 0 3px 10px rgba(15, 18, 24, .08); transform: rotateY(var(--ry, 0deg)) scale(var(--sc, 1)); opacity: var(--op, 1); will-change: transform; }
.tyre-tile svg { width: 64px; height: 76px; display: block; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
.tyre-tile[aria-checked="true"] { background: linear-gradient(180deg, #343943, #14171c); color: #fff; border-color: #14171c; box-shadow: 0 8px 20px rgba(15, 18, 24, .3), inset 0 1px 0 rgba(255, 255, 255, .18); }
.tyre-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tyre-info { margin: 4px 2px 10px; text-align: center; font-size: .86rem; min-height: 2.6em; color: #3b414a; }
.tyre-info b { color: #14171c; }
.wl-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 0 6px 0 12px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 14px;
  background: rgba(255, 255, 255, .5); color: #14171c; font: 700 .9rem var(--body); cursor: pointer; }
.wl-switch .knob { position: relative; width: 46px; height: 28px; border-radius: 999px; background: rgba(20, 23, 28, .18); transition: background .25s; flex: none; }
.wl-switch .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .25); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.wl-switch[aria-pressed="true"] .knob { background: #14171c; }
.wl-switch[aria-pressed="true"] .knob::after { transform: translateX(18px); }
.wl-switch:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .wl-switch .knob::after { transition: none; } }

/* The wheel, its price and Get price, together at the top of the picker */
.dock-head { gap: 10px; }
.dock-head .dock-price { margin-left: 0; }
.dock-quote { min-height: 40px; padding: 0 18px; font-size: .92rem; box-shadow: 0 6px 16px rgba(194, 65, 12, .35); transition: transform .15s, box-shadow .15s; }
.dock-quote:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(194, 65, 12, .45); }

/* Corner buttons over the 3D car: the cars (left), save and full screen (right) */
.corner { position: absolute; z-index: 4; bottom: calc(var(--dock-h, 0px) + 10px); display: flex; gap: 6px; }
.corner[hidden] { display: none; }
.corner-left { left: max(12px, env(safe-area-inset-left, 0px)); }
.corner-right { right: max(12px, env(safe-area-inset-right, 0px)); }
.stage-wrap.full > .corner { bottom: calc(var(--dock-h, 0px) + 16px); }
/* Photo screen: "3D showroom" sits top-left, clear of the wheels (which are near the bottom) */
.stage-wrap.photo-mode > .corner-left { top: max(10px, env(safe-area-inset-top, 0px)); bottom: auto; }
.corner-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; min-width: 42px; padding: 0 11px; border-radius: 999px;
  color: #15171a; font: 700 .88rem var(--body); cursor: pointer; }
.corner-btn[hidden] { display: none; }
.corner-btn:hover, .corner-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .92); }
.corner-btn svg { width: 20px; height: 20px; flex: none; }
.car-menu-btn { padding: 0 14px 0 12px; }
.cm-name { max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.car-menu-btn .spinner { width: 16px; height: 16px; }
#full-btn .ic-close, .stage-wrap.full #full-btn .ic-open { display: none; }
.stage-wrap.full #full-btn .ic-close { display: block; }
.stage-wrap > #views .mesh-btn { width: 36px; padding: 0; }
.stage-wrap > #views .mesh-btn[aria-expanded="true"] { background: #15171a; color: #fff; }
.stage-wrap > #views .chip[hidden] { display: none; }
@media (max-width: 520px) {
  /* Phones: the car button sits in the empty strip at the top, beside "Try these on my car" */
  .stage-wrap:not(.full):not(.photo-fit) > .corner-left { top: 10px; bottom: auto; }
  .stage-wrap > .corner-right { flex-direction: column; }
  .corner-btn { height: 38px; min-width: 38px; }
  .car-menu-btn { padding: 0 12px 0 10px; }
  .cm-name { max-width: 120px; }
  .stage-wrap > #views .chip { padding: 6px 9px; }
  .stage-wrap > #views .design-btn, .stage-wrap > #views .mesh-btn { width: 32px; }
  .dock-quote { padding: 0 14px; }
}
@media (max-width: 760px) {
  /* The wheel's name on its own line, then undo / redo, the price and Get price */
  .dock-head { flex-wrap: wrap; row-gap: 4px; }
  .dock-head .dock-name { flex: 1 1 100%; }
  .dock-head .hist { margin-right: auto; }
  /* The four menus share the width evenly, nothing to swipe */
  .menus { overflow: visible; }
  .menu-btn { flex: 1 1 0; max-width: none; min-width: 0; padding: 3px 20px 3px 9px; }
  #mb-size-btn, #mb-paint-btn { flex: none; }
  .menu-btn::before { right: 8px; }
  .menu-btn small { font-size: .6rem; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .menu-btn b { font-size: .82rem; }
}

/* ---------- Fitting the wheels on a photo (2026-10-31) ----------
   Sliders for all wheels (size, turn, tilt), then a grid of hold-to-repeat buttons for one wheel or
   both: move, size, turn (left / right), tilt (up / down), rotate, undo. On the photo each circle has
   a white dot (size and turn) and a knob on top (rotate). */
.handle .spin { position: absolute; left: 50%; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: #fff; border: 3px solid var(--accent);
  box-shadow: 0 1px 4px rgba(0,0,0,.45); cursor: grab; transform: scale(var(--isx, 1), var(--isy, 1)); }
.handle .spin::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.handle .spin::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent; }
.handle .num { top: -46px; }
.fix-row label small, .tune-lbl small { font-weight: 600; color: var(--muted); font-size: .76rem; }
.fix-row input[type="range"] { accent-color: var(--accent); }
.tune { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.tune-pick { flex-wrap: wrap; flex-basis: auto; }
.tune-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.tune-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px 10px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(241, 243, 246, .9)); border: 1px solid rgba(20, 23, 28, .08); box-shadow: inset 0 1px 0 #fff; }
.tune-move { grid-row: span 2; justify-content: center; }
.tune-lbl { font-size: .8rem; font-weight: 700; color: var(--ink); text-align: center; line-height: 1.2; }
.tune-lbl small { display: block; }
.tune-pair { display: flex; gap: 6px; }
.tune-cell .tune-btn { background: #fff; box-shadow: 0 1px 3px rgba(15, 18, 24, .1); transition: transform .15s cubic-bezier(.3, 1.6, .5, 1); }
.tune-cell .tune-btn:active { transform: scale(.92); }
@media (max-width: 520px) { .tune-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tune-move { grid-row: span 1; grid-column: 1 / -1; } .tune-cell { padding: 6px 4px 8px; } .tune-cell .tune-btn { width: 40px; } }

/* ---------- Liquid glass buttons (2026-10-31) ----------
   Frosted, see-through, with a bright rim; a soft light follows the pointer across them, they lift
   on hover and squash like jelly when pressed. The main one is tinted the shop's orange. */
.glass-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .8); color: #14171c; font: 700 1rem var(--body); cursor: pointer; text-decoration: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .42));
  backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8);
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255, 255, 255, .45), inset 0 -12px 22px -16px rgba(20, 23, 28, .3), 0 8px 24px rgba(15, 18, 24, .13);
  transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; }
.glass-btn svg { width: 22px; height: 22px; flex: none; }
.glass-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .9), transparent 60%); }
.glass-btn:hover::before { opacity: .8; }
.glass-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255, 255, 255, .45), inset 0 -12px 22px -16px rgba(20, 23, 28, .3), 0 14px 32px rgba(15, 18, 24, .18); }
.glass-btn:active { transform: scale(.94, .9); transition-duration: .12s; }
.glass-btn:focus-visible, .glass-btn:has(+ input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.glass-btn.primary { color: #fff; border-color: rgba(255, 210, 180, .65);
  background: linear-gradient(140deg, rgba(234, 88, 12, .95), rgba(194, 65, 12, .88));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .65), inset 0 -10px 20px -12px rgba(0, 0, 0, .35), 0 10px 28px rgba(194, 65, 12, .38); }
.glass-btn.primary::before { background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 220, 190, .7), transparent 60%); }
/* A slow sheen keeps passing over the main button */
.glass-btn.primary::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .45) 50%, transparent 60%) no-repeat; background-size: 250% 100%; animation: glass-sheen 4s 1.6s ease-in-out infinite; }
@keyframes glass-sheen { 0%, 55% { background-position: 140% 0; } 100% { background-position: -60% 0; } }
.corner-btn { isolation: isolate; overflow: hidden; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.corner-btn > * { position: relative; }
.corner-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .3s; pointer-events: none;
  background: radial-gradient(90px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .95), transparent 60%); }
.corner-btn:hover::before { opacity: 1; }
.corner-btn:active { transform: scale(.92); }

/* ---------- The "add a photo" screen ----------
   Grows to fit its content; colour drifts behind the glass; the guide car rolls in, its wheels spin,
   orange rings lock onto them and a scan line passes; everything rises in one after another. */
.stage-wrap:has(> #photo-empty:not([hidden])) { height: auto !important; min-height: clamp(340px, 56vh, 700px); }
.photo-empty { position: relative; inset: auto; min-height: inherit; gap: 12px; padding-top: 64px; padding-bottom: 28px; overflow: hidden; }
.photo-empty > * { position: relative; }
.photo-empty > .pe-blobs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pe-blobs i { position: absolute; width: 260px; height: 260px; border-radius: 50%; filter: blur(60px); opacity: .45; animation: pe-drift 16s ease-in-out infinite alternate; }
.pe-blobs i:nth-child(1) { background: #fb923c; left: -60px; top: 10%; }
.pe-blobs i:nth-child(2) { background: #60a5fa; right: -70px; top: 35%; animation-duration: 19s; animation-delay: -6s; }
.pe-blobs i:nth-child(3) { background: #fcd34d; left: 30%; bottom: -120px; animation-duration: 22s; animation-delay: -11s; }
@keyframes pe-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, -40px) scale(1.15); } 100% { transform: translate(-40px, 30px) scale(.9); } }
.photo-empty > :not(.pe-blobs):not(input) { animation: pe-rise .8s cubic-bezier(.2, .9, .3, 1.15) both; }
.photo-empty > :nth-child(3) { animation-delay: .25s; } .photo-empty > :nth-child(4) { animation-delay: .35s; } .photo-empty > :nth-child(5) { animation-delay: .45s; }
.photo-empty > :nth-child(6) { animation-delay: .55s; } .photo-empty > :nth-child(7) { animation-delay: .62s; } .photo-empty > :nth-child(8) { animation-delay: .7s; } .photo-empty > :nth-child(9) { animation-delay: .78s; }
@keyframes pe-rise { from { opacity: 0; transform: translateY(22px) scale(.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.pe-guide .pe-car { animation: pe-roll 1.6s cubic-bezier(.2, .8, .2, 1) both; }
.pe-guide .pe-wheel { transform-box: view-box; animation: pe-spin 1.6s cubic-bezier(.2, .8, .2, 1) both; }
.pe-guide .pe-lock { transform-box: fill-box; transform-origin: center; animation: pe-lock .7s 1.4s cubic-bezier(.3, 1.6, .5, 1) both, pe-pulse 2.6s 2.2s ease-in-out infinite; }
.pe-guide .pe-lock.b { animation-delay: 1.6s, 2.4s; }
.pe-guide .pe-scan { transform-box: view-box; animation: pe-scan 3.4s 2.2s ease-in-out infinite both; }
.pe-guide .pe-frame { animation: pe-march 1.4s linear infinite; }
@keyframes pe-roll { from { transform: translateX(-130px); opacity: 0; } 30% { opacity: 1; } }
@keyframes pe-spin { from { transform: rotate(-600deg); } }
@keyframes pe-lock { from { transform: scale(2.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pe-pulse { 0%, 100% { stroke-opacity: 1; stroke-width: 2.5; } 50% { stroke-opacity: .45; stroke-width: 4; } }
@keyframes pe-scan { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: .55; } 90% { opacity: .55; } 100% { transform: translateX(309px); opacity: 0; } }
@keyframes pe-march { to { stroke-dashoffset: -12; } }
.pe-title { margin: 0; }
.pe-trying { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 5px 16px 5px 6px; border-radius: 999px; font-size: .88rem; color: #3b414a;
  background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 1px #fff, 0 4px 14px rgba(15, 18, 24, .08); }
.pe-trying[hidden] { display: none; }
.pe-trying img { width: 34px; height: 34px; border-radius: 50%; }
.pe-trying b { color: #14171c; }
.pe-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.pe-drop { margin: -2px 0 0; font-size: .82rem; color: var(--muted); }
.pe-sample { min-height: 46px; font-weight: 500; font-size: .92rem; }
.pe-sample b { font-weight: 700; }
.pe-tips { margin-top: 4px; }
.pe-tips li { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pe-tips li::before { content: none; }
.pe-tips li span { color: var(--accent); font-weight: 700; margin-right: 2px; }
/* Phones go straight to the camera; computers can drop or paste a photo instead */
@media (pointer: fine) {
  .pe-camera { display: none; }
  /* (so "Choose a photo" is the main, orange button on a computer) */
  .pe-pick { color: #fff; border-color: rgba(255, 210, 180, .65); background: linear-gradient(140deg, rgba(234, 88, 12, .95), rgba(194, 65, 12, .88));
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .65), inset 0 -10px 20px -12px rgba(0, 0, 0, .35), 0 10px 28px rgba(194, 65, 12, .38); }
}
@media (pointer: coarse) { .pe-drop { display: none; } }
/* Dragging a photo over the car area */
.stage-wrap.dropping::after { content: "Drop your photo to try the wheels"; position: absolute; inset: 10px; z-index: 40; display: grid; place-items: center; text-align: center; padding: 20px;
  border: 2px dashed rgba(194, 65, 12, .75); border-radius: 24px; background: rgba(255, 255, 255, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font: 800 1.3rem var(--head); color: #9a3412; animation: pop-fade .2s both; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .photo-empty > *, .pe-guide *, .pe-blobs i, .glass-btn.primary::after { animation: none !important; }
  .glass-btn, .corner-btn { transition: none; }
}

/* Drive in: a camera-angle style button with a little car */
.stage-wrap > #views .drive-btn { width: 36px; padding: 0; }
.stage-wrap > #views .drive-btn[aria-pressed="true"] { background: #15171a; color: #fff; }
.drive-btn svg { width: 22px; height: 22px; }
@media (max-width: 520px) { .stage-wrap > #views .chip { padding: 6px 8px; } .stage-wrap > #views .drive-btn { width: 32px; } }
/* Photo screen: any car works (said plainly, with a way to choose theirs) */
.pe-car-note { max-width: 44ch; margin: 0; font-size: .86rem; color: #3b414a; }
.pe-car-note b { color: #14171c; }
.pe-car-note .link-btn { padding: 2px 4px; color: var(--accent); font-weight: 700; }

/* ---------- Round 5 layout (2026-10-31) ----------
   Camera bar: angles, drive in, design view, save and full screen together, centred under the car.
   Under it, by the thumb: the wheel's name, the 3D car (or undo / redo on a photo) and the price,
   which leads down to the fit check and "Get a price for these". */
.stage-wrap > #views { max-width: calc(100% - 20px); }
#views > #save-btn, #views > #full-btn { width: 36px; min-width: 0; height: 36px; padding: 0; border: 0; border-radius: 999px; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#views > #save-btn:hover, #views > #full-btn:hover { background: rgba(0, 0, 0, .06); }
#views > #save-btn svg, #views > #full-btn svg { width: 19px; height: 19px; }
.stage-wrap > .corner-right:empty { display: none; }
.car-pill { position: relative; isolation: isolate; overflow: hidden; flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 30px 0 11px;
  border-radius: 999px; border: 1px solid rgba(20, 23, 28, .1); background: linear-gradient(180deg, #fff, #f2f4f7); color: #14171c; font: 700 .86rem var(--body); cursor: pointer;
  box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(15, 18, 24, .07); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.car-pill[hidden] { display: none; }
.car-pill svg { width: 20px; height: 20px; flex: none; }
.car-pill .cm-name { max-width: none; min-width: 0; }
.car-pill::after { content: ""; position: absolute; right: 13px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: .6; transition: transform .25s; }
.car-pill[aria-expanded="true"] { background: linear-gradient(180deg, #343943, #14171c); color: #fff; border-color: #14171c; }
.car-pill[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -1px; }
.car-pill:active { transform: scale(.96); }
.car-pill:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.car-pill .spinner { width: 14px; height: 14px; }
.dock-head .hist[hidden] { display: none; }
.dock-head .dock-price { margin-left: auto; flex: none; padding: 2px 4px; border: 0; background: none; font-family: var(--body); text-align: right; cursor: pointer; border-radius: 10px; }
.dock-head .dock-price small { color: var(--accent); font-weight: 700; }
.dock-head .dock-price:hover { background: rgba(0, 0, 0, .04); }
.dock-head .dock-price:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Less empty space under the wheels */
.dock { padding-bottom: max(4px, env(safe-area-inset-bottom, 0px)); }
.hero { padding-bottom: 10px; }
.controls[hidden] { display: none !important; }
@media (max-width: 520px) {
  /* "Try these on my car" gets the whole strip at the top (the car button moved down by the wheels) */
  .stage-wrap:not(.full):not(.photo-fit) > .try-cta { left: 12px; right: 12px; justify-content: center; }
  .stage-wrap > #views .chip { padding: 6px 7px; }
  .stage-wrap > #views .design-btn, .stage-wrap > #views .mesh-btn, .stage-wrap > #views .drive-btn, #views > #save-btn, #views > #full-btn { width: 31px; }
}

/* ---------- Fitting pad (2026-10-31, round 6) ----------
   Which wheel, then the tool (Move, Size, Turn, Tilt, Rotate), then one pad: drag on it (a knob
   follows the finger and springs back) or tap - / + at its sides for fine steps. */
.fix-row { display: none; }
.tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 18px; background: rgba(20, 23, 28, .05); }
.tool { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 54px; padding: 6px 2px; border: 0; border-radius: 14px; background: none; color: #3b414a; font: 700 .76rem var(--body); cursor: pointer;
  transition: background .2s, color .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.tool svg { width: 22px; height: 22px; }
.tool[aria-checked="true"] { background: linear-gradient(180deg, #343943, #14171c); color: #fff; box-shadow: 0 4px 12px rgba(15, 18, 24, .25), inset 0 1px 0 rgba(255, 255, 255, .18); }
.tool:active { transform: scale(.94); }
.tool:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pad { display: flex; align-items: stretch; gap: 8px; }
.pad-step { width: 52px !important; height: auto !important; min-height: 120px; border-radius: 18px !important; flex: none; }
.pad-step[hidden] { display: none !important; }
.pad-surface { position: relative; flex: 1; min-height: 132px; border-radius: 20px; touch-action: none; cursor: grab; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(194, 65, 12, .08), transparent 60%), radial-gradient(rgba(20, 23, 28, .13) 1.2px, transparent 1.4px) 0 0 / 16px 16px, linear-gradient(180deg, #fff, #f1f3f6);
  border: 1px solid rgba(20, 23, 28, .1); box-shadow: inset 0 1px 0 #fff, inset 0 -8px 18px -12px rgba(20, 23, 28, .2); }
.pad-surface.dragging { cursor: grabbing; }
.pad-surface:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pad-knob { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff, #ffd9c2 45%, #fb7f3c); box-shadow: 0 6px 16px rgba(194, 65, 12, .35), inset 0 1px 1px #fff; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.pad-surface.dragging .pad-knob { transition: none; }
.pad-hint { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: .74rem; font-weight: 600; color: #5f6772; pointer-events: none; }
.pad-value { position: absolute; left: 0; right: 0; top: 8px; text-align: center; font-size: .82rem; font-weight: 800; color: #14171c; font-variant-numeric: tabular-nums; pointer-events: none; }
.pad-arrow { position: absolute; width: 40px !important; height: 34px !important; border-radius: 12px !important; z-index: 1; }
.pad-arrow[hidden] { display: none !important; }
.pad-arrow.up { left: 50%; top: 6px; margin-left: -20px; } .pad-arrow.down { left: 50%; bottom: 26px; margin-left: -20px; }
.pad-arrow.left { left: 8px; top: 50%; margin-top: -24px; } .pad-arrow.right { right: 8px; top: 50%; margin-top: -24px; }
.pad-surface[data-tool="move"] .pad-value { display: none; }
.fix-actions { align-items: center; }
.fix-actions .tune-hist { display: flex; gap: 6px; flex: none; }
.tune-pick .tune-w { flex: 1; max-width: 140px; }
@media (prefers-reduced-motion: reduce) { .pad-knob, .tool { transition: none; } }

/* ---------- Photo tools bar (round 6) ----------
   Under the photo: Compare, 4 at once, Close-up, Adjust, New photo, Save, Full screen as one glass
   bar of icons with a short word each (they were squeezed into a row beside the car button) */
.controls > #photo-tools:not([hidden]) { display: flex !important; flex: 1 1 100%; max-width: 760px; margin: 0 auto; flex-wrap: nowrap; justify-content: space-between; gap: 2px; padding: 4px;
  border-radius: 20px; background: linear-gradient(140deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .6)); border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 1px #fff, 0 4px 14px rgba(15, 18, 24, .08); }
#photo-tools > .ptool { order: 0; flex: 1 1 0; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px 2px;
  border: 0; border-radius: 14px; background: none; color: #14171c; font: 700 .68rem var(--body); white-space: nowrap; }
#photo-tools > .ptool[hidden] { display: none; }
#photo-tools > .ptool svg { width: 21px; height: 21px; flex: none; }
#photo-tools > .ptool .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
#photo-tools > .ptool:hover { background: rgba(0, 0, 0, .05); }
#photo-tools > .ptool[aria-pressed="true"] { background: #14171c; color: #fff; }
#photo-tools > #save-btn, #photo-tools > #full-btn { flex: 0 0 44px; height: auto; min-height: 52px; padding: 0; border: 0; border-radius: 14px; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#photo-tools > #save-btn:hover, #photo-tools > #full-btn:hover { background: rgba(0, 0, 0, .05); }
.controls:has(> #photo-tools:not([hidden])) { padding-top: 8px; }
/* The car button on a photo: glows until they say which car it is */
.car-pill.ask { box-shadow: 0 0 0 2px rgba(194, 65, 12, .55), 0 0 16px rgba(251, 127, 60, .45); animation: pill-ask 2.4s ease-in-out infinite; }
@keyframes pill-ask { 50% { box-shadow: 0 0 0 2px rgba(194, 65, 12, .25), 0 0 4px rgba(251, 127, 60, .2); } }
@media (prefers-reduced-motion: reduce) { .car-pill.ask { animation: none; } }

/* ---------- Phone turned sideways (round 6) ----------
   The car (or photo) fills the left, the controls sit in a frosted panel on the right: the wheel, car
   and price, the menus, the wheels, and on a photo its tools. Adjusting wheels uses the same panel. */
@media (orientation: landscape) and (max-height: 520px) {
  .stage-wrap.sideways { --side: min(360px, 44vw); }
  .top-inner { padding-block: 5px; }
  .hero { padding-bottom: 0; gap: 0; }
  .stage-wrap.sideways:not(.full), .stage-wrap.sideways.photo-fit:not(.full), .stage-wrap.sideways:not(.full):not(.photo-fit) { height: calc(100svh - 50px) !important; min-height: 280px; aspect-ratio: auto; max-height: none; }
  .stage-wrap.sideways > .stage3d { inset: 0 var(--side) 0 0 !important; top: 0 !important; }
  .stage-wrap.sideways > .stage3d canvas { -webkit-mask-image: none !important; mask-image: none !important; }
  .stage-wrap.sideways > .stage { right: var(--side); }
  .stage-wrap.sideways > .dock { top: 0; bottom: 0; left: auto; right: 0; width: var(--side); padding: 10px 12px max(10px, env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; justify-content: center; gap: 2px; overflow: visible;
    background: linear-gradient(160deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .6)); border-left: 1px solid rgba(255, 255, 255, .8);
    backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); box-shadow: -10px 0 30px rgba(15, 18, 24, .08); }
  .stage-wrap.sideways > .dock :is(.dock-head, .dock-bar, .dock-row, .ba, .dock-note) { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .stage-wrap.sideways .dock-head { flex-wrap: wrap; row-gap: 4px; margin-bottom: 6px; }
  .stage-wrap.sideways .dock-head .dock-name { flex: 1 1 100%; }
  .stage-wrap.sideways .menus { overflow: visible; }
  .stage-wrap.sideways .menu-btn { flex: 1 1 0; max-width: none; min-width: 0; padding: 3px 20px 3px 9px; }
  .stage-wrap.sideways #mb-size-btn, .stage-wrap.sideways #mb-paint-btn { flex: none; }
  .stage-wrap.sideways .dock-row { padding: 4px 0; }
  .stage-wrap.sideways .dock-w { width: 50px; height: 50px; }
  .stage-wrap.sideways > .dock > .controls { padding: 0 0 8px; }
  .stage-wrap.sideways > .dock > .ai-cta { width: 100%; margin: 0 0 8px; padding: 9px 12px; }
  .stage-wrap.sideways > .dock > .ai-cta small { display: none; }
  .stage-wrap.sideways > #views { left: calc((100% - var(--side)) / 2); bottom: 10px; max-width: calc(100% - var(--side) - 20px); }
  .stage-wrap.sideways > .try-cta { left: auto; right: calc(var(--side) + 12px); top: 10px; }
  .stage-wrap.sideways > .fix { position: absolute; top: 0; bottom: 0; left: auto; right: 0; width: var(--side); transform: none; max-height: none; overflow: auto; margin: 0; border: 0; border-left: 1px solid rgba(20, 23, 28, .08); border-radius: 0; z-index: 7; padding: 10px 12px; gap: 8px; }
  .stage-wrap.sideways > .fix .pad-step { min-height: 96px; } .stage-wrap.sideways > .fix .pad-surface { min-height: 104px; }
  .stage-wrap.sideways.dropping::after { right: calc(var(--side) + 10px); }
}
@media (orientation: landscape) and (max-height: 520px) {
  /* Sideways the panel is short: icons only in the photo tools, Compare instead of the slider, and the
     car button shares its line with the price */
  .stage-wrap.sideways #photo-tools > .ptool .lbl { display: none; }
  .stage-wrap.sideways #photo-tools > .ptool, .stage-wrap.sideways #photo-tools > #save-btn, .stage-wrap.sideways #photo-tools > #full-btn { min-height: 40px; }
  .stage-wrap.sideways #before-btn { display: flex; }
  .stage-wrap.sideways .ba { display: none !important; }
  .stage-wrap.sideways .car-pill { flex: 1 1 0; }
  .stage-wrap.sideways .dock-head .hist { margin-right: 0; }
  .stage-wrap.sideways .dock-name { font-size: .8rem; }
}

/* The black shape at the bottom of phones: the hidden message box peeked out above the iPhone's home
   bar (it was only moved 200% of its height down). Now it is also invisible until shown. */
.toast { visibility: hidden; opacity: 0; transform: translateX(-50%) translateY(calc(100% + 40px)); transition: transform .25s, opacity .25s, visibility 0s .25s; }
.toast.show { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); transition: transform .25s, opacity .25s, visibility 0s; }
/* Design view panel: the on/off switch first */
.design-switch { margin-bottom: 12px; }
/* Burnout: pops up over the car after it parks */
.burn-btn { position: absolute; z-index: 5; left: 50%; bottom: calc(var(--dock-h, 0px) + 64px); transform: translateX(-50%); min-height: 46px; }
.burn-btn[hidden] { display: none; }
.burn-btn.in { animation: burn-in .6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes burn-in { from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(.6); } }
.burn-btn:hover { transform: translateX(-50%) translateY(-2px) scale(1.03); }
.burn-btn:active { transform: translateX(-50%) scale(.94, .9); }
.stage-wrap.sideways > .burn-btn { left: calc((100% - var(--side)) / 2); bottom: 64px; }
/* Staff: showroom extras */
.fx-set { margin: 0 0 22px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: grid; gap: 10px; }
.fx-set legend { font-weight: 700; padding: 0 6px; }
@media (prefers-reduced-motion: reduce) { .burn-btn.in { animation: none; } }

/* ---------- Round 8 (2026-10-31) ----------
   Menus open below (the car stays in view); "Try these on my car" sits by the car button; the price is
   in the wheel card; the car gets the strip at the top back; Burnout is a round black icon. */
.stage-wrap:has(.pop:not([hidden])) { overflow: visible; }
.dock-head .try-cta { position: relative; inset: auto; top: auto; right: auto; left: auto; flex: none; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px 0 11px;
  border-radius: 999px; background: linear-gradient(180deg, #343943, #14171c); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 12px rgba(15, 18, 24, .22); transform: none; }
.dock-head .try-cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 18px rgba(15, 18, 24, .28); }
.dock-head .try-cta:active { transform: scale(.96); }
.dock-head .try-cta svg { width: 20px; height: 20px; color: #fb923c; }
.dock-head .try-cta small { display: none; }
.dock-head .try-cta b { font-size: .86rem; white-space: nowrap; }
.dock-head .try-cta:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dock-head .try-cta[hidden] { display: none; }
.dock-head .car-pill { margin-right: auto; }
@media (max-width: 520px) {
  /* No strip at the top any more: the car uses the whole height */
  .stage-wrap:not(.full):not(.photo-fit) { height: calc(clamp(260px, 40vh, 420px) + var(--dock-h, 0px)); }
  .stage-wrap:not(.full):not(.photo-fit) .stage3d { top: 0; }
  .stage-wrap:not(.full):not(.photo-fit) .stage3d canvas { -webkit-mask-image: linear-gradient(#000 92%, transparent); mask-image: linear-gradient(#000 92%, transparent); }
  .dock-head .try-cta { padding: 0 12px 0 10px; }
}
/* Burnout: a round black button with a flame, a soft ring pulsing round it */
.burn-btn { position: absolute; z-index: 5; left: 50%; bottom: calc(var(--dock-h, 0px) + 64px); width: 52px; height: 52px; margin-left: -26px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 30%, #4a505b, #14171c 70%); box-shadow: 0 8px 22px rgba(15, 18, 24, .35), inset 0 1px 0 rgba(255, 255, 255, .2);
  transform: none; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.burn-btn svg { width: 26px; height: 26px; }
.burn-btn::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(20, 23, 28, .35); animation: burn-ring 1.6s ease-out infinite; pointer-events: none; }
@keyframes burn-ring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.burn-btn:hover { transform: scale(1.08); }
.burn-btn:active { transform: scale(.92); }
.burn-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.burn-btn.in { animation: burn-pop .55s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes burn-pop { from { opacity: 0; transform: translateY(14px) scale(.4); } }
.stage-wrap.sideways > .burn-btn { left: calc((100% - var(--side)) / 2); }
@media (prefers-reduced-motion: reduce) { .burn-btn::after, .burn-btn.in { animation: none; } }
@media (orientation: landscape) and (max-height: 520px) {
  /* Sideways: the panel starts at the top and the wheels fill the rest of it (scroll for more) */
  .stage-wrap.sideways > .dock { justify-content: flex-start; padding-top: 12px; }
  .stage-wrap.sideways > .dock > .dock-row { flex: 1 1 auto; min-height: 0; flex-wrap: wrap; align-content: flex-start; overflow-x: hidden; overflow-y: auto; scroll-snap-type: none; gap: 8px; padding: 6px 2px; }
  .stage-wrap.sideways > .try-cta { display: none; }
}

/* Filter menu: size, finish and colour, with how many wheels match */
.pop-filter { width: min(380px, calc(100vw - 16px)); }
.flt-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.flt-head .dock-lbl { margin: 0; }
.flt-count { font-size: .8rem; font-weight: 700; color: #14171c; }
.flt-clear { margin-left: auto; color: var(--accent); font-weight: 700; padding: 2px 4px; }
.flt-lbl { margin: 10px 2px 6px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #5f6772; }
.flt-row { display: flex; flex-wrap: wrap; gap: 6px; }
.flt-row .dock-size { min-height: 38px; padding: 0 13px; }
.menu-btn.on:not([aria-expanded="true"]) { border-color: #14171c; box-shadow: inset 0 0 0 1px #14171c, 0 2px 8px rgba(15, 18, 24, .07); }

/* Full screen: the same buttons as the main screen (the picker used to cover the camera buttons) */
.stage-wrap.full .dock-head .try-cta:not([hidden]) { display: inline-flex; }
.stage-wrap.full .dock { padding-top: 8px; background: linear-gradient(to top, rgba(246, 247, 249, .96) 70%, rgba(246, 247, 249, .7)); }

/* Fitting wheels: nothing in the panel or on the photo can be selected like text or long-pressed into a
   menu (that stole the finger and left a button repeating) */
.fix, .fix *, .stage, .handles, .pad-surface, .tools, .dock, .views, #photo-tools { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tune-btn, .tool, .pad-surface { touch-action: none; }

/* "Use my last photo": a thumbnail of it in a glass button */
.pe-last { min-height: 50px; padding: 0 18px 0 6px; font-weight: 700; }
.pe-last img { width: 56px; height: 38px; object-fit: cover; border-radius: 999px; }
.pe-last[hidden] { display: none; }

/* Quick repeated taps (+ + +, wheel after wheel) must never zoom the page on a phone */
button, label, a, [role="button"], [role="radio"], .dock-w, .tyre-tile, .menu-btn, .chip { touch-action: manipulation; }

/* A small green tick on wheels that fit the customer's car */
.dock-w { position: relative; }
.dw-fit { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; background: #15803d; box-shadow: 0 0 0 2px #fff; }
.dw-fit::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Wide screens: the menus (left) and the wheel, car and "Try these on my car" (right) share one line
   above the wheels, so the car gets more height */
@media (min-width: 1000px) {
  .stage-wrap:not(.sideways) > .dock, .hero > .dock { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; align-items: center;
    padding-left: max(16px, calc((100% - 1100px) / 2)); padding-right: max(16px, calc((100% - 1100px) / 2)); }
  .dock > .dock-bar { grid-column: 1; grid-row: 1; max-width: none; margin: 0 0 8px; padding: 0; }
  .dock > .dock-head { grid-column: 2; grid-row: 1; max-width: none; margin: 0 0 8px; padding: 0; }
  .dock > .dock-head .dock-name { flex: 0 1 auto; max-width: 260px; }
  .dock > :is(.dock-row, .dock-note, .ba) { grid-column: 1 / -1; max-width: none; margin-left: 0; margin-right: 0; }
  .dock > .dock-row { padding-left: 2px; padding-right: 2px; }
}

/* ---------- Start-up intro (round 11) ---------- */
.intro { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: #e9ecf0;
  background: radial-gradient(90% 70% at 50% 45%, #2a2f38 0%, #14171c 55%, #08090b 100%); overflow: hidden; }
.intro[hidden] { display: none; }
.intro-name { margin: 0; font: 800 clamp(1.6rem, 6vw, 2.6rem) var(--head); letter-spacing: -.01em; animation: intro-rise .9s .1s cubic-bezier(.2, .9, .3, 1.1) both; }
.intro-sub { margin: 0 0 18px; color: #9aa3ae; font-size: .95rem; animation: intro-rise .9s .25s cubic-bezier(.2, .9, .3, 1.1) both; }
.intro-hint { margin: 10px 0 0; color: #9aa3ae; font-size: .9rem; letter-spacing: .04em; }
.intro.ready .intro-hint { color: #fff; }
.intro-skip { position: absolute; bottom: max(18px, env(safe-area-inset-bottom, 0px)); color: #9aa3ae; }
@keyframes intro-rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
/* The button: brushed-metal ring, glossy black face, an LED ring that breathes (brighter when ready) */
.start-btn { position: relative; width: 168px; height: 168px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; color: #fff;
  background: conic-gradient(from 210deg, #f4f6f8, #8e959f, #e3e6ea, #6f7781, #f4f6f8, #9aa1ab, #f4f6f8);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), inset 0 2px 4px rgba(255, 255, 255, .6); animation: intro-rise .9s .4s cubic-bezier(.2, .9, .3, 1.1) both; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.start-btn::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #4a505a, #15171b 55%, #050506); box-shadow: inset 0 3px 10px rgba(0, 0, 0, .8), inset 0 -2px 3px rgba(255, 255, 255, .08); }
.start-led { position: absolute; inset: 20px; border-radius: 50%; border: 2px solid rgba(251, 127, 60, .35); box-shadow: 0 0 10px rgba(251, 127, 60, .25), inset 0 0 10px rgba(251, 127, 60, .2); animation: led-breathe 2.4s ease-in-out infinite; }
.intro.ready .start-led { border-color: #fb7f3c; animation-duration: 1.4s; }
@keyframes led-breathe { 50% { box-shadow: 0 0 22px rgba(251, 127, 60, .7), inset 0 0 16px rgba(251, 127, 60, .45); } }
.start-txt { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1.05; letter-spacing: .12em; }
.start-txt b { font: 800 1.5rem var(--head); letter-spacing: .08em; }
.start-txt small { font-size: .62rem; font-weight: 700; color: #c9ced6; }
.start-btn:hover { transform: scale(1.04); }
.start-btn:active { transform: scale(.94); }
.start-btn:focus-visible { outline: 3px solid #fb7f3c; outline-offset: 6px; }
/* Pressed: the button flashes, a light sweeps across and the dark screen falls away to the showroom */
.intro-sweep { position: absolute; inset: -20%; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 40%, rgba(251, 146, 60, .35) 48%, rgba(255, 255, 255, .55) 50%, rgba(251, 146, 60, .35) 52%, transparent 60%); transform: translateX(-60%); }
.intro.go .intro-sweep { animation: intro-sweep .9s ease-in both; }
.intro.go .start-led { border-color: #fff; box-shadow: 0 0 40px #fb923c, inset 0 0 30px #fb923c; animation: none; }
.intro.go { animation: intro-out 1.1s .35s cubic-bezier(.6, 0, .4, 1) both; }
@keyframes intro-sweep { 0% { opacity: 1; transform: translateX(-60%); } 100% { opacity: 1; transform: translateX(60%); } }
@keyframes intro-out { to { opacity: 0; transform: scale(1.18); filter: blur(10px); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .intro *, .intro, .intro.go { animation: none !important; } }
/* The hidden switch that gives iPhones a tap feel */
.hap { position: fixed; left: -100px; top: -100px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
/* Staff: volume row */
.fx-vol { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-left: 32px; }
.fx-vol input[type=range] { flex: 1 1 160px; width: auto; }

/* Header: the customer's sound switch */
.mute-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.mute-btn[hidden] { display: none; }
.mute-btn svg { width: 20px; height: 20px; }
.mute-btn .snd-off, .mute-btn[aria-pressed="true"] .snd-on { display: none; }
.mute-btn[aria-pressed="true"] .snd-off { display: block; }
.mute-btn[aria-pressed="true"] { color: var(--muted); }


/* Filter: "Only wheels that fit my car" first */
.pop-filter .flt-fits { margin-bottom: 10px; }
.pop-filter .flt-fits-pick { display: block; margin: 0 0 10px; padding: 6px 2px; color: var(--accent); font-weight: 700; }

/* Staff: trial stats table */
.stats-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 8px 0 14px; }
.stats-table th, .stats-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: right; font-size: .9rem; }
.stats-table th:first-child, .stats-table td:first-child { text-align: left; }
@media (max-width: 520px) { .stats-table th:nth-child(6), .stats-table td:nth-child(6), .stats-table th:nth-child(7), .stats-table td:nth-child(7) { display: none; } }

/* Staff tabs on phones: five fit across (Stats added) */
@media (max-width: 760px) { .tab { padding: 12px 6px; font-size: .9rem; } }

/* Trial report (Staff > Stats) */
.report-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 18px 0 10px; }
.report-bar select { width: auto; }
.report { margin-top: 10px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.report h3 { margin: 22px 0 8px; font-size: 1rem; }
.r-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.r-head img { max-height: 56px; max-width: 120px; object-fit: contain; }
.r-head h2 { margin: 0; font: 800 1.3rem var(--head); }
.r-head p { margin: 2px 0 0; }
.rbars { display: grid; gap: 6px; }
.rbar { display: grid; grid-template-columns: minmax(0, 13rem) 1fr auto; gap: 10px; align-items: center; font-size: .9rem; }
.rl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt { height: 14px; display: block; }
.rt i { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }
.rv { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 2.5rem; text-align: right; }
.rv small { font-weight: 500; color: var(--muted); }
.r-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; }
.r-table td, .r-table th { white-space: nowrap; }
.r-extra { margin-top: 18px; }
.r-tools { margin-top: 16px; }
.sold-for { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.sold-for input { width: 6.5rem; }
@media (max-width: 520px) {
  /* Phones: each label on its own line above its bar, so nothing is cut short */
  .rbar { grid-template-columns: 1fr auto; gap: 2px 10px; font-size: .88rem; }
  .rl { grid-column: 1 / -1; white-space: normal; }
  .report { padding: 14px; }
  .r-table th, .r-table td { white-space: normal; font-size: .8rem; padding: 7px 4px; }
}
/* Printing the report: only the report, on white */
@media print {
  body.print-report * { visibility: hidden; }
  body.print-report #trial-report, body.print-report #trial-report * { visibility: visible; }
  body.print-report #trial-report { position: absolute; left: 0; top: 0; width: 100%; border: 0; background: #fff; color: #000; }
  body.print-report .r-tools { display: none; }
  body.print-report .rt i { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}