/* 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 */
/* (the notch space is inside the header, in the page flow: a sticky offset pushed it 47 px down over the showroom's
   Save and Full on an iPhone opened from the Home Screen; screen tester, 3 Nov 2026) */
.top { position: sticky; top: 0; padding-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; min-height: 40px; 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 6px; min-height: 40px; 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; min-height: 44px; 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) + var(--band, 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; }
/* (a short wide screen, a PC at 1280x720 or a tablet sideways: the photo leaves room for the header, the Before / After
   slider and the tools row under it, which sat across the bottom edge; screen tester, 3 Nov 2026) */
@media (min-width: 900px) { .stage-wrap.photo-fit:not(.full) { max-height: min(72vh, calc(100svh - 225px)); } }
/* Computers, 1100 px and wider, a photo on screen: two columns, the photo on the left and the slider, the tools and the wheel
   picker beside it on the right (app.js placeDock puts them after the photo in the page), so the wheels are in view at any
   height; the photo may then be as tall as the screen allows */
@media (min-width: 1100px) {
  .hero:has(> .stage-wrap.photo-fit:not(.full)) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 36%); grid-template-rows: auto auto auto 1fr; column-gap: 24px; row-gap: 12px; align-items: start; }
  .hero:has(> .stage-wrap.photo-fit:not(.full)) > .stage-wrap { grid-column: 1; grid-row: 1 / span 4; max-height: calc(100svh - 130px) !important; }
  .hero:has(> .stage-wrap.photo-fit:not(.full)) > :is(#ba-row, .controls, #dock, #ai-btn) { grid-column: 2; }
  .hero:has(> .stage-wrap.photo-fit:not(.full)) > .controls { margin: 0; }
}
/* (tall computer screens, 850 px and up: the photo leaves room for the slider, the tools, the menus and the wheel row,
   so the wheels are in view without scrolling; at 1440x900 and 1920x1080 they sat below the bottom edge; screen tester) */
@media (min-width: 900px) and (min-height: 850px) { .stage-wrap.photo-fit:not(.full) { max-height: min(72vh, calc(100svh - 440px)); } }
.stage3d { position: absolute; inset: 0 0 calc(var(--dock-h, 0px) + var(--band, 0px)); touch-action: none; }
/* 3D showroom, upright: the camera bar has its own strip between the car and the wheel picker (--band),
   and Burnout and Rev have the place on the right where the camera bar used to be */
.stage-wrap:not(.photo-mode):not(.full):not(.sideways) { --band: 50px; }
.stage-wrap:not(.photo-mode):not(.full):not(.sideways) > #views { bottom: calc(var(--dock-h, 0px) + 3px); }
.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); }
/* (sideways and full screen the price pill has the top left corner: the building label goes to the top middle instead of under it) */
.stage-wrap:is(.sideways, .full):has(> .full-price:not([hidden])) > .build-tag { left: 50%; transform: translateX(-50%); max-width: calc(100% - 320px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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; }
/* Pictures in the app can't be dragged off (a dragged rim picture was taken as a car photo) */
img { -webkit-user-drag: none; user-drag: 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.hot { background: var(--accent-soft); color: var(--accent); }   /* (a price request for this week: call first) */
.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; } }
/* PC: the chosen rim, big, between the wheel's name and sizes and the price (owner: use the empty space) */
.pk-hero { display: none; }
@media (min-width: 1100px) {
  .picked { grid-template-columns: minmax(0, 1fr) minmax(240px, .9fr) minmax(300px, 1fr); }
  .picked > :not(.pk-hero):not(.buy) { grid-column: 1; }
  .picked .pk-hero { display: grid; place-items: center; grid-column: 2; grid-row: 1 / span 4; align-self: stretch; min-height: 260px;
    border-radius: calc(var(--radius) - 2px); background: radial-gradient(60% 60% at 50% 45%, var(--surface-2, #f1f3f6), transparent 75%); }
  .picked .pk-hero img { width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .18)); }
  .picked .buy { grid-column: 3; grid-row: 1 / span 4; }
}
/* Big screens: the wheel picker and the card spread wider (they stopped at 1100 and 1200 px) */
@media (min-width: 1300px) {
  .wrap, .top-inner { max-width: 1360px; }
}
/* Tablet: "Check fitment for your car" sits in the card's empty top-right; a chosen car's details still
   show under the card (owner: use the empty space) */
@media (min-width: 600px) and (max-width: 859px) {
  .shop { display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: 0; }
  .shop > * { grid-column: 1 / -1; }
  .shop > .picked { grid-row: 1; }
  .shop > .car-pick { display: contents; }
  .shop > .car-pick > * { grid-column: 1 / -1; }
  .shop > .car-pick > .car-line { grid-column: 2; grid-row: 1; align-self: start; justify-self: start; width: calc(100% - 18px); margin: 20px 0 0; z-index: 1; }
  .picked > .pk-head, .picked > .sizes-pick { padding-right: 290px; }
}
.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; }
/* Phones and tablets: the chosen rim's picture fills the empty right side of the price box; the price
   lines sit to its left and the two buttons span the full width under it (PC shows the big picture instead) */
.buy-rim { display: none; }
@media (max-width: 1099px) {
  .buy { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; }
  .buy > * { grid-column: 1; }
  .buy > .buy-rim { display: block; grid-column: 2; grid-row: 1 / span 5; align-self: center; width: clamp(104px, 34vw, 176px); height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .18)); }
  .buy > .btn { grid-column: 1 / -1; }
}
@media (min-width: 600px) and (max-width: 1099px) { .buy > .buy-rim { width: clamp(150px, 26vw, 220px); } }
/* Shop app: the rim sits beside the big price only, as wide as the room the price leaves (smaller
   beside a long price or on a small phone); the payment, stock and fit lines and the buttons get the full width. Before, they were squeezed
   into a column beside the rim (the fit line ran over three lines, a long price ran under the rim).
   Phones only: tablets have room for the old layout. (The public site's box keeps its own layout.) */
@media (max-width: 599px) {
  .buy:not(.public-buy) { --rim-w: clamp(104px, 34vw, 176px); grid-template-columns: minmax(min-content, 1fr) minmax(0, var(--rim-w)); }
  .buy:not(.public-buy) > * { grid-column: 1 / -1; }
  .buy:not(.public-buy) > .price { grid-column: 1; grid-row: 1; align-self: center; }
  .buy:not(.public-buy) > .buy-rim { grid-column: 2; grid-row: 1; width: 100%; max-width: var(--rim-w); justify-self: end; }
}
.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; padding-block: 11px; }   /* (a full finger-sized row to tap: it was 22 px tall) */
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); }
.demo-cta { margin: 18px 0 8px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); font-size: .95rem; }   /* (demo for a prospect shop only) */
.demo-cta a { color: var(--accent); font-weight: 700; text-underline-offset: 3px; }
.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; }
.search { flex: 1 1 240px; max-width: 420px; }
/* ---- The shop's TV screen (?tv=1; owner, 4 Nov 2026): the 3D car full screen under the TV's own layer ----
   (sizes in --u, a hundredth of a 16:9 screen's width, so it reads the same on any TV) */
body.tv { overflow: hidden; cursor: none; background: #0b0c0f; }
body.tv .stage-wrap { position: fixed; inset: 0; height: 100%; z-index: 100; background: radial-gradient(120% 90% at 50% 35%, #2a2e36, #0b0c0f); }
body.tv .stage-wrap > :not(#stage3d) { display: none !important; }
body.tv .stage3d { inset: 0; }
body.tv .stage3d canvas { -webkit-mask-image: none; mask-image: none; }
body.tv .toast, body.tv .coach, body.tv .tour, body.tv #intro { display: none !important; }
/* Every screen shape (an upright tablet or phone showed the price card and buttons under the studio; the phone's own
   height rule outranked the TV's): the studio fills the whole screen and nothing of the customer app shows */
body.tv .stage-wrap { height: 100% !important; aspect-ratio: auto !important; max-height: none !important; }
body.tv .top, body.tv main > :not(#view-customer), body.tv #view-customer > :not(.hero), body.tv .hero > :not(.stage-wrap) { display: none !important; }
body.tv main { padding: 0; }
/* Upright screens: bigger type, the wheel card across the bottom middle */
@media (max-aspect-ratio: 1/1) {
  .tv-layer { --u: min(1.6vw, 1.78vh); }
  body.tv:not(.tv-flat) .tv-card { left: 50%; right: auto; bottom: calc(var(--u) * 4); transform: translateX(-50%); width: max-content; max-width: calc(100% - var(--u) * 6); }
  body.tv:not(.tv-flat) .tv-card.swap { transform: translate(-50%, 14px); }
}
/* Wide screens (a TV): the car fills the middle (the showroom's camera), so the card keeps the bottom left corner and the QR
   the top right, a little smaller: the car's nose ran under the QR at 1280x720 (main session, 4 Nov 2026) */
@media (min-aspect-ratio: 3/2) {
  body.tv .tv-qr { width: calc(var(--u) * 13); }
}
.tv-layer [hidden] { display: none !important; }
.tv-layer { position: fixed; inset: 0; z-index: 101; pointer-events: none; color: #fff; font-family: var(--body); --u: min(1vw, 1.78vh); }
.tv-top { z-index: 2; position: absolute; left: calc(var(--u) * 3); right: calc(var(--u) * 3); top: calc(var(--u) * 2.5); display: flex; align-items: center; gap: calc(var(--u) * 1.5); }
.tv-logo { height: calc(var(--u) * 5); width: auto; border-radius: 8px; }
.tv-top b { font: 800 calc(var(--u) * 2.6)/1.1 var(--head); text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.tv-promo { margin-right: calc(var(--u) * 17); background: var(--accent); color: #fff; padding: .45em 1.1em; border-radius: 999px; font: 700 calc(var(--u) * 1.7)/1.2 var(--body); max-width: 55%; }
.tv-card { position: absolute; left: calc(var(--u) * 3); bottom: calc(var(--u) * 3); max-width: calc(var(--u) * 46); display: flex; gap: calc(var(--u) * 1.6); align-items: center; padding: calc(var(--u) * 1.6) calc(var(--u) * 2.2) calc(var(--u) * 1.6) calc(var(--u) * 1.6); background: rgba(12, 13, 17, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .12); border-radius: calc(var(--u) * 1.6); transition: opacity .5s, transform .5s; }
.tv-card.swap { opacity: 0; transform: translateY(14px); }
.tv-card img { width: calc(var(--u) * 10); height: calc(var(--u) * 10); flex: none; }
.tv-card h2 { margin: 0; font: 800 calc(var(--u) * 2.4)/1.1 var(--head); }
.tv-card p { margin: calc(var(--u) * .4) 0 0; font-size: calc(var(--u) * 1.35); color: #c9ced6; }
.tv-badge { display: inline-block; background: var(--accent); color: #fff; font: 800 calc(var(--u) * 1.15)/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; padding: .3em .8em; border-radius: 6px; margin-bottom: calc(var(--u) * .6); }
.tv-layer .tv-price { font: 800 calc(var(--u) * 2.6)/1.15 var(--head); color: #fff; }
.tv-price s { color: #9aa1ab; font-weight: 600; font-size: .62em; margin-right: .2em; }
.tv-price small { font: 600 calc(var(--u) * 1.25) var(--body); color: #c9ced6; }
.tv-layer .tv-note { color: #fff; font-weight: 700; }
.tv-qr { position: absolute; right: calc(var(--u) * 3); top: calc(var(--u) * 2.5); width: calc(var(--u) * 15); background: #fff; color: #16181d; border-radius: calc(var(--u) * 1.6); padding: calc(var(--u) * 1.1); text-align: center; z-index: 2; }
.tv-qr svg { display: block; width: 100%; height: auto; }
.tv-qr p { margin: calc(var(--u) * .5) 0 0; font-size: calc(var(--u) * 1.25); line-height: 1.25; }
.tv-specials { position: absolute; inset: 0; background: rgba(8, 9, 12, .94); padding: calc(var(--u) * 4) calc(var(--u) * 22) calc(var(--u) * 4) calc(var(--u) * 4); display: flex; flex-direction: column; justify-content: center; }
.tv-specials h2 { margin: 0 0 calc(var(--u) * 2); font: 800 calc(var(--u) * 4)/1 var(--head); }
.tv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2); }
.tv-sp { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * .5); background: rgba(255, 255, 255, .06); border-radius: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.4); }
.tv-sp img { width: calc(var(--u) * 11); height: calc(var(--u) * 11); align-self: center; }
.tv-sp b { font: 800 calc(var(--u) * 1.8)/1.15 var(--head); }
.tv-sp .tv-price { font-size: calc(var(--u) * 2.1); }
.tv-sp .tv-note { font-size: calc(var(--u) * 1.25); }
body.tv-flat .tv-card { left: 50%; bottom: 50%; transform: translate(-50%, 50%); }
body.tv-flat .tv-card.swap { transform: translate(-50%, 50%); }
body.tv-flat .tv-card img { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.tv-box { margin: 14px 0 0; }
.watch-btn { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0; padding: 6px 0; min-height: 44px; background: none; border: 0; color: var(--accent); font: 700 .9rem var(--body); cursor: pointer; text-align: left; }
.watch-btn svg { width: 18px; height: 18px; flex: none; }
.watch-btn[aria-pressed="true"] { color: var(--good); }
.sp-waiting { margin: 0 0 8px; font-weight: 700; color: var(--accent); }
.pub-price { margin: 0 0 8px; font: 800 1.35rem var(--head); color: var(--accent); }
.pub-points { margin: 0 0 12px; padding-left: 20px; } .pub-points li { margin: 4px 0; }
.snaps-today { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-list { display: grid; gap: 8px; margin-top: 8px; }
.st-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .st-item img { width: 96px; height: 60px; object-fit: cover; border-radius: 8px; }
.st-item span { flex: 1 1 140px; } .st-item small { display: block; color: var(--muted); }
.hoist-bar { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; width: min(560px, calc(100vw - 24px)); padding: 12px 14px; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow), 0 10px 30px rgba(0, 0, 0, .25); border: 2px solid var(--accent); }
.hb-say { margin: 0 0 8px; font-weight: 700; } .hb-row { display: flex; gap: 8px; flex-wrap: wrap; } .hb-row input { flex: 1 1 180px; min-width: 0; }
.hb-note { margin: 8px 0 0; font-size: .8rem; color: var(--muted); }
.tv-snapx { display: grid; grid-template-columns: 1.5fr 1fr; gap: calc(var(--u) * 2.5); align-items: center; }
.tv-snapx img { width: 100%; border-radius: calc(var(--u) * 1.2); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.tv-snapx .tv-snap-say { font: 800 calc(var(--u) * 3)/1.15 var(--head); margin: 0 0 calc(var(--u) * 1); }
.tv-snapx .tv-snap-qr { width: calc(var(--u) * 13); background: #fff; padding: calc(var(--u) * .8); border-radius: calc(var(--u) * 1); margin-top: calc(var(--u) * 1.5); }
.tv-snapx .tv-snap-qr svg { display: block; width: 100%; height: auto; }
.tv-specials .tv-ready { color: #4ade80; }
.post-preview { display: block; width: 100%; max-width: 420px; aspect-ratio: 1; margin: 0 auto 10px; border-radius: 12px; background: #14161a; object-fit: cover; }
.post-week { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 12px 44px 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); }
.post-week p { margin: 0; flex: 1 1 200px; }
/* (the "not this week" cross in the top right corner, where a card's close lives; it sat under the button on phones) */
.post-week .x { position: absolute; top: 4px; right: 4px; background: none; border: 0; border-radius: 10px; font: 700 1.2rem var(--body); color: var(--muted); cursor: pointer; min-width: 40px; min-height: 40px; }
.post-week .x:hover { color: var(--ink); background: rgba(0, 0, 0, .06); }
.special-set { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 12px; margin: 12px 0 0; }
.special-set legend { font-weight: 700; padding: 0 6px; }
.sp-row { display: flex; gap: 8px; } .sp-row input { flex: 1; min-width: 0; } .sp-row select { width: auto; }
.wheel .pr.sale { color: var(--accent); font-weight: 800; }
.special-line { margin: 0 0 6px; }
.price s.was { color: var(--muted); font-weight: 600; margin-left: 6px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.month-line { margin: 8px 0 0; font-size: .92rem; font-variant-numeric: tabular-nums; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0; container-type: inline-size; }
/* (big money values shrink to fit a narrow tile on phones: "CA$914,084.00" ran out of its box) */
.stat b { display: block; font: 800 1.5rem var(--head); font-variant-numeric: tabular-nums; }
.stat b.long { font-size: clamp(1rem, 11cqi, 1.5rem); overflow-wrap: anywhere; }
.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-ph { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font: 700 1rem var(--head); }   /* (a shop's enquiry has no car picture) */
.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; } .quote-ph { aspect-ratio: auto; min-height: 48px; } }
.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; padding-block: 11px; }
.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 - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); 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); }
/* (a dialog opens on its heading so the keyboard doesn't pop up: the heading needs no focus ring, it isn't a control) */
.dialog h2[tabindex="-1"]:focus, .dialog h2[tabindex="-1"]:focus-visible { outline: none; }
.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; }
.size-row .sz { display: grid; gap: 2px; min-width: 0; }
.size-row .sz span { display: none; font-size: .72rem; font-weight: 600; color: var(--muted); line-height: 1.1; }
@media (max-width: 560px) {
  .two { grid-template-columns: 1fr; }
  .size-head { display: none; }
  /* (phones: the row wraps onto two lines, so each box shows its own name instead of the heading row) */
  .size-row { grid-template-columns: 1fr 1fr 1fr; align-items: end; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .size-row .sz span { display: block; }
}

.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; width: max-content; 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) + var(--band, 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; padding-block: 11px; }
.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; padding-block: 11px; }
.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) + var(--band, 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; }
/* The car line under the price card: the fit for the car on screen, or an ask; tapping it opens the car picker */
.car-line { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 460px; min-height: 48px; padding: 8px 14px 8px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); font: 600 .98rem var(--body); text-align: left; cursor: pointer; box-shadow: var(--shadow); }
.car-line svg { width: 22px; height: 22px; flex: none; opacity: .85; }
.car-line .cl-txt { flex: 1 1 auto; min-width: 0; }
.car-line .cl-tail { flex: none; color: var(--accent); font-size: .9rem; white-space: nowrap; }
.car-line.good .cl-txt { color: var(--good); } .car-line.warn .cl-txt { color: var(--warn); } .car-line.bad .cl-txt { color: var(--bad); }
.car-line:hover { border-color: var(--muted); }
.car-line:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.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: 40px; 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; }
/* Finding the wheels: the same scan, lighter, and it fades away once the wheels are locked on */
.ai-magic.finding { background: linear-gradient(180deg, rgba(8, 12, 20, .18), rgba(8, 12, 20, .4)); transition: opacity .35s; }
.ai-magic.finding .ai-bar { display: none; }
.ai-magic.finding .ai-steps { margin-bottom: 0; }
.ai-magic.fade { opacity: 0; }
.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; }
/* The public site for car owners (no shop): no prices or price requests; save or share the look instead */
.public .pr, .public .four-pr, .public #lv-price { display: none !important; }
.public-buy { display: flex; flex-direction: column; gap: 10px; }
.public-buy .shop-link { margin: 4px 0 0; }
.ad-slot { margin: 18px auto; max-width: 970px; min-height: 90px; text-align: center; }
/* Staff keys (Settings): one row per person, the new key shown big once */
.keys-card { margin-bottom: 22px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.keys-card h3 { margin: 0 0 4px; font-size: 1.05rem; }
.keys-card .muted { margin: 0 0 8px; }
.keys-me { font-weight: 600; margin: 0 0 10px; }
.keys-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.key-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.key-row.off { opacity: .7; }
.key-who { min-width: 0; overflow-wrap: anywhere; }
.key-who small { display: block; }
.key-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.keys-new { margin: 0 0 12px; padding: 12px; border-radius: 10px; background: var(--accent-soft); }
.keys-new p { margin: 0 0 8px; }
.key-big { font: 700 1.3rem/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .02em; overflow-wrap: anywhere; user-select: all; }
.keys-add { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.keys-add .field { margin: 0; }
@media (max-width: 640px) { .keys-add { grid-template-columns: 1fr; } }
.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-card .embed-box { margin: 4px 0 10px; }
.share-card .embed-box .small-note { margin: 0 0 6px; }
.share-card .demo-row { display: flex; gap: 8px; flex-wrap: wrap; }
.share-card .demo-row input { flex: 1 1 160px; min-width: 0; }
.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; }
/* The price form opens on its heading (only so the keyboard stays down); no ring on a heading nobody tabs to */
#quote-title:focus { outline: none; }
.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-dialog[open] { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
#quote-form { flex: 1 1 auto; min-height: 0; gap: 0; }
#quote-form .q-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; padding: 20px; }
#quote-form .dialog-actions { flex: none; margin: 0; padding: 12px 20px max(16px, env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
#quote-done { padding: 20px; overflow-y: auto; }
.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 { min-height: 40px; background: transparent; color: var(--ink); border-color: var(--line); }
.four-modes .four-mode[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* "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; }
/* The 3D car picker: an upright scroll wheel, five cars tall, the chosen one in the middle band */
.car-wheel-wrap { position: relative; }
.car-wheel-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; margin-top: -22px; border-radius: 12px; background: rgba(20, 23, 28, .07); pointer-events: none; }
.pop-list.car-wheel { display: block; height: 220px; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 88px 0; min-width: 250px;
  -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); }
.pop-list.car-wheel::-webkit-scrollbar { display: none; }
/* Phones: three cars tall, so it sits under the car without moving the page */
@media (max-width: 760px), (max-height: 500px) { .pop-list.car-wheel { height: 132px; padding: 44px 0; -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); } }
.pop-list.car-wheel:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.car-wheel .pop-item { width: 100%; height: 44px; min-height: 0; scroll-snap-align: center; justify-content: center; gap: 10px; transform-origin: 50% 50%; }
.car-wheel .pop-item, .car-wheel .pop-item:hover, .car-wheel .pop-item[aria-pressed="true"] { background: none; color: inherit; }
.car-wheel .pop-item[aria-pressed="true"] { font-weight: 800; }
.car-wheel .pop-item[aria-pressed="true"] small { color: var(--accent); }
.car-wheel .pop-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The fit-check wheel lives at the page level (light colours there, like the page under the car panel) */
.pop-vehicle { color: #15171a; background: rgba(255, 255, 255, .96); }   /* (over page text, not the car: nearly solid) */
.pop-vehicle .pop-list.car-wheel { min-width: 290px; }
/* Its search box */
.vw-search { position: relative; display: flex; align-items: center; margin: 0 0 6px; }
.vw-search svg { position: absolute; left: 12px; width: 18px; height: 18px; color: #6b727d; pointer-events: none; }
.vw-search input { width: 100%; min-height: 44px; padding: 0 40px 0 38px; border: 1.5px solid #d5dae1; border-radius: 12px; background: #fff; color: #15171a; font: 600 1rem var(--body); -webkit-appearance: none; appearance: none; }
.vw-search input::-webkit-search-cancel-button { display: none; }
.vw-search input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.vw-clear { position: absolute; right: 4px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: #6b727d; font-size: 1rem; cursor: pointer; }
.vw-clear[hidden] { display: none; }
.vw-count { margin: 0 2px 2px; min-height: 1em; font-size: .78rem; font-weight: 600; color: #6b727d; }
.vw-count:empty { display: none; }
.vw-none { margin: 8px 4px 2px; font-size: .9rem; color: #5f6772; text-align: center; }
.vw-none[hidden] { display: none; }
.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: .8; 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; }
/* Phones upright in the showroom (app.js placeDock sets .compact): Size and Colour first, Tyres, Brakes and Filter under More
   (design review, 4 Nov 2026: 11 controls came before the wheel row at 375 px). Open, they take a second line */
.more-btn { display: none; }
.menus.compact .more-btn { display: inline-flex; }
.menus.compact:not(.more-open) > :is(#mb-tyres-btn, #mb-brake-btn, #mb-colour-btn) { display: none; }
.menus.compact.more-open { flex-wrap: wrap; }
.menus.compact.more-open > :is(#mb-tyres-btn, #mb-brake-btn, #mb-colour-btn) { order: 2; flex: 1 1 28%; }
.menus.compact.more-open::after { content: ""; flex-basis: 100%; height: 0; order: 1; }   /* (the three always on their own line) */
/* Mesh | Paint inside the Car panel on those phones: first on the Spin and Drive in row */
.car-moves > .look-switch { order: -1; }
/* (dark mode, inside the Car panel: the white glass switch with dark words sat on the dark panel and "Mesh" was lost; main
   session, 4 Nov 2026: a dark glass with light words there, the pressed word on a light pill) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .car-moves > .look-switch { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); box-shadow: none; }
  :root:not([data-theme="light"]) .car-moves > .look-switch button { color: #e6e9ee; }
  :root:not([data-theme="light"]) .car-moves > .look-switch button[aria-pressed="true"] { background: #eef1f5; color: #15171a; }
  :root:not([data-theme="light"]) .car-moves > .look-switch #look-mesh[aria-pressed="true"] { background: var(--mesh, #4a8ff5); color: #fff; }
}
:root[data-theme="dark"] .car-moves > .look-switch { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); box-shadow: none; }
:root[data-theme="dark"] .car-moves > .look-switch button { color: #e6e9ee; }
:root[data-theme="dark"] .car-moves > .look-switch button[aria-pressed="true"] { background: #eef1f5; color: #15171a; }
:root[data-theme="dark"] .car-moves > .look-switch #look-mesh[aria-pressed="true"] { background: var(--mesh, #4a8ff5); color: #fff; }
/* (the Burnout and Rev pill is under the open Car panel: its orange glow showed through the frosted panel as a smudge) */
.stage-wrap:has(> #car-ctl:not([hidden])) > #burn-pill { visibility: hidden; }
.mb-dot { display: block; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; box-shadow: 0 0 0 1px #cfd4db; }
/* Brakes: a caliper doodle on a disc, the pad in the chosen colour; Mesh: a mesh sign in the line colour */
.mb-dot.mb-cal, .mb-dot.mb-net { width: 18px; height: 18px; margin-top: 1px; border-radius: 0; box-shadow: none; background: none; color: var(--ink); }
.mb-dot svg { display: block; width: 18px; height: 18px; }
.mb-dot[hidden] { display: none; }
.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: 40px; min-width: 40px; }
  .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 menus share the width, nothing to swipe: each starts from what its words need, so "Keep mine"
     gets room and "All" gives some up (shared evenly, "As is" and "Keep mine" were cut short at 390) */
  .menus { overflow: visible; }
  .menu-btn { flex: 1 1 auto; max-width: none; min-width: 0; padding: 3px 17px 3px 8px; }
  #mb-size-btn, #mb-paint-btn { flex: none; }
  .menu-btn::before { right: 7px; }
}
/* Small phones (iPhone SE and the like): a little tighter still, so every value stays whole */
@media (max-width: 400px) {
  .menu-btn { padding: 3px 15px 3px 7px; }
  .menu-btn::before { right: 6px; }
  .menu-btn b { font-size: .78rem; }
  /* (the Brakes button shows the coloured caliper alone, like the Mesh button its sign: "Yellow" and
     "Silver" were cut short beside it) */
  #mb-brake-name { display: none; }
  .menu-btn small { font-size: .6rem; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .menu-btn b { font-size: .82rem; }
  /* (the shop's name on one line where it can be: "Your Wheel Shop" wrapped to two at 360 px) */
  .brand { font-size: 1.05rem; }
}
/* Upright phones, 400 px and under (design review, 4 Nov 2026: measure and raise to 44 px): the camera bar's chips and the
   menu chips are 44 px tall, the Mesh | Paint switch's words 38 px */
@media (max-width: 400px) and (orientation: portrait) {
  .stage-wrap > #views .chip { min-height: 44px; }
  .menu-btn { min-height: 44px; }
  .look-switch button { min-height: 38px; }
}
/* 360 px phones: the five menus a touch tighter, so "BRAKES" and "FILTER" are not cut to "BRAK…" and "FILT…" */
@media (max-width: 370px) {
  .menus { gap: 4px; }
  .menu-btn { padding: 3px 13px 3px 6px; }
  .menu-btn::before { right: 5px; }
  .menu-btn small { font-size: .58rem; letter-spacing: .03em; }
}

/* ---------- 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 */
/* (Drive in is a word like the other camera buttons, the same size: owner, 1 Nov 2026) */
.stage-wrap > #views .drive-btn[aria-pressed="true"] { background: #15171a; color: #fff; }
@media (max-width: 520px) { .stage-wrap > #views .chip { padding: 6px 9px; } }
/* 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, #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; }
.fix-actions { align-items: center; }
.fix-actions .tune-hist { display: flex; gap: 6px; flex: none; }
.tune-pick .tune-w { flex: 1; max-width: 140px; }

/* ---------- 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; }
/* Save and Full screen join the bar as two more tools with a word each, in the bar's dark ink: in dark
   mode they had kept the corner buttons' white icons and almost vanished on this light glass */
#photo-tools > #save-btn, #photo-tools > #full-btn { flex: 1 1 0; min-width: 0; height: auto; min-height: 52px; flex-direction: column; gap: 3px; padding: 5px 2px; border: 0; border-radius: 14px;
  background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: #14171c; font: 700 .68rem var(--body); white-space: nowrap; }
#photo-tools > #save-btn svg, #photo-tools > #full-btn svg { width: 21px; height: 21px; }
#save-btn .lbl, #full-btn .lbl { display: none; }
#photo-tools > #save-btn .lbl, #photo-tools > #full-btn .lbl-open, .stage-wrap.full #photo-tools > #full-btn .lbl-close { display: block; }
.stage-wrap.full #photo-tools > #full-btn .lbl-open { display: 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%; }
  /* (two rows of two: "Keep mine" and "All-terrain" no longer cut short) */
  .stage-wrap.sideways .menus { overflow: visible; flex-wrap: wrap; row-gap: 6px; }
  .stage-wrap.sideways .menu-btn { flex: 1 1 44%; 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.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, .stage-wrap.sideways #photo-tools > :is(#save-btn, #full-btn) .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) + var(--band, 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: 40px; 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; }
/* It behaves like an app, not a web page (owner, 4 Nov 2026): no double-tap zoom anywhere, no grey flash on a tap, no
   pull-to-refresh or rubber-band pull on the whole page, no text selection or long-press menu on buttons, bars and
   pictures (words in forms and the wheel's details can still be selected), and no font blow-up when turned sideways */
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; }
body { overscroll-behavior: none; }
button, [role="button"], [role="radio"], [role="slider"], .chip, .menu-btn, .dock-w, .tyre-tile, .top, .views, .dock, .dock-bar, .car-ctl, .burn-pill,
  .corner, .look-switch, .intro, label, img, svg, canvas { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img { -webkit-user-drag: none; }
input, textarea, select, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* 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; }
html.intro-early .intro[hidden] { display: flex !important; }   /* (beats the global [hidden] rule) */
.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; }
/* The quieter second door: straight to the photo screen (design review, 4 Nov 2026) */
.intro-photo { margin-top: 22px; color: #d6dbe2; font-size: .95rem; text-decoration: underline; text-underline-offset: 4px; animation: intro-rise .9s .45s cubic-bezier(.2, .9, .3, 1.1) both; }
.intro-photo:hover { color: #fff; }
@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%); }
/* Reel Maker (owner, 4 Nov 2026): the video being made, live in a phone-shaped frame, then it to share or save */
.reel { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
  background: radial-gradient(120% 90% at 50% 30%, rgba(30, 33, 40, .97), rgba(6, 7, 10, .98)); color: #e9ecf0; text-align: center; }
.reel[hidden], .reel [hidden] { display: none !important; }
.reel-make, .reel-done { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.reel-frame { display: block; height: min(64vh, 620px); width: auto; aspect-ratio: 9 / 16; border-radius: 22px; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 20px 50px rgba(0, 0, 0, .6); object-fit: cover; }
.reel-title { margin: 4px 0 0; font: 800 1.15rem var(--head); display: inline-flex; align-items: center; gap: 8px; }
.reel-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 10px #ef4444; animation: led-breathe 1s ease-in-out infinite; }
.reel-bar { width: min(260px, 70vw); height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.reel-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #fb923c, #ef4444); transition: width .12s linear; }
.reel-cancel { color: #9aa3ae; }
.reel-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.reel-acts .btn { min-width: 96px; }
/* (sideways: a shorter frame) */
@media (max-height: 520px) { .reel-frame { height: min(70vh, 300px); } .reel-make, .reel-done { gap: 6px; } }
.stage-wrap.photo-mode #reel-btn { display: none; }
/* The rev counter round the start button (owner, 4 Nov 2026): it climbs while the 3D showroom gets ready behind this
   screen and flashes at the red line when everything is built */
.start-wrap { position: relative; display: grid; place-items: center; width: 232px; height: 232px; margin: -22px 0 -14px; }
.rev-gauge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: intro-rise .9s .3s cubic-bezier(.2, .9, .3, 1.1) both; }
.rev-gauge path { fill: none; stroke-linecap: round; stroke-width: 5; }
.rev-track { stroke: rgba(255, 255, 255, .1); }
.rev-red { stroke: rgba(239, 43, 43, .4); stroke-dasharray: 12.5 100; stroke-dashoffset: -87.5; }
.rev-fill { stroke: url(#rev-grad); stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(251, 127, 60, .85)); transition: stroke-dashoffset .25s linear; }
.rev-ticks line { stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; }
.rev-ticks line.big { stroke: rgba(255, 255, 255, .75); stroke-width: 2.5; }
.rev-ticks line.red { stroke: #ef4444; }
.rev-needle { transform-box: view-box; transform-origin: 116px 116px; transform: rotate(-135deg); transition: transform .25s linear; }
.rev-needle line { stroke: #fff; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 6px #fb923c); }
.intro.ready .rev-fill { animation: rev-flash 1s ease-out; }
.intro.ready .rev-ticks line.red { stroke: #ff6b6b; filter: drop-shadow(0 0 4px #ef2b2b); }
@keyframes rev-flash { 25% { stroke-width: 8; filter: drop-shadow(0 0 18px #ef2b2b); } }
.intro.go .rev-gauge { opacity: 0; transition: opacity .35s; }
@media (prefers-reduced-motion: reduce) { .rev-fill, .rev-needle { transition: none; } .intro.ready .rev-fill { animation: none; } }
/* (a phone on its side: a smaller button and gauge, so the name, the gauge and the words all fit) */
@media (max-height: 480px) {
  .start-wrap { width: 176px; height: 176px; margin: -14px 0 -10px; }
  .start-wrap .start-btn { width: 128px; height: 128px; }
  .start-wrap .start-txt b { font-size: 1.15rem; }
  .intro-logo { width: 56px; height: 56px; margin-bottom: 4px; }
  .intro-sub { margin-bottom: 6px; }
}
.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; } }
/* 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(7), .stats-table td:nth-child(7), .stats-table th:nth-child(8), .stats-table td:nth-child(8) { 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; }
}

/* ---------- Round 9 (owner, 2026-10-31) ----------
   The wheel's name and the car button sit under the wheel row (name left, car right), and "Try these on my
   car" runs the full width under them. */

.dock > .dock-head { flex-wrap: wrap; row-gap: 8px; margin-top: 8px; margin-bottom: 4px; }
.dock > .dock-head .dock-name { order: 0; flex: 1 1 0; min-width: 0; margin: 0; }
.dock > .dock-head .car-pill { order: 1; flex: none; max-width: 58%; margin: 0 0 0 auto; }
.dock > .dock-head .hist { order: 2; margin: 0; }
.dock > .dock-head .try-cta { order: 3; flex: 1 1 100%; justify-content: center; min-height: 50px; border-radius: 16px; padding: 0 16px; }
.dock > .dock-head .try-cta b { font-size: 1rem; }
.dock > .dock-head .try-cta svg { width: 22px; height: 22px; }
@media (min-width: 1000px) {
  .dock > .dock-head { grid-column: 1 / -1; grid-row: auto; margin: 6px 0 2px; }
  .dock > .dock-head .try-cta { flex: none; min-height: 44px; padding: 0 22px; }
}

/* ---------- Dark phones (owner, 2026-10-31): when the phone is set to dark mode, the car panel and
   everything in it go dark too (the 3D studio as well); otherwise the bright white studio as before ---------- */
@media (prefers-color-scheme: dark) {
  .hero {
    --surface: #1c1f25; --surface-2: #252930; --line: #343943; --ink: #eef1f5; --muted: #a4acb8; --bg: #121418;
    --glass: rgba(28, 31, 37, .84); --stage-top: #262a31; --stage-bottom: #121418;
    --accent: #fb7f3c; --accent-soft: rgba(251, 127, 60, .22); --accent-ink: #1a0d04;
    background: radial-gradient(120% 70% at 50% 20%, #2b3038 0%, #1b1e24 55%, #121418 100%);
    color-scheme: dark; box-shadow: 0 1px 0 #262a31, 0 12px 30px rgba(0, 0, 0, .35);
  }
  .hero .chip:hover { border-color: #4a505b; background: #2a2e36; }
  .hero .chip.strong { background: #eef1f5; color: #14171c; border-color: #eef1f5; }
  .hero .views .chip[aria-pressed="true"], .hero .views .chip.on { background: #343943; border-color: #4a505b; }
  .hero .fix { background: var(--surface); }
  .hero .stage { background: #16181d; }
  .hero .stage-wrap.full { background: #121418; }
  .hero .spinner { border-color: rgba(255, 255, 255, .15); border-top-color: var(--accent); }
  .build-tag { color: var(--ink); background: rgba(28, 31, 37, .88); border-color: var(--line); }
  .hero .swatch { box-shadow: 0 0 0 1px #4a505b; }
  .car-btn:hover { border-color: #4a505b; }
  .dock-name { color: var(--ink); }
  .dock-name span { color: var(--muted); }
  .dock-w { border-color: var(--line); background: var(--surface-2); }
  .dock-size { border-color: var(--line); background: var(--surface); color: var(--ink); }
  .dock-size[aria-pressed="true"] { background: var(--ink); color: #14171c; border-color: var(--ink); }
  .dock-price, .dock-lbl, .ba { color: var(--muted); }
  .dock-price b { color: var(--ink); }
  .stage-wrap.full .dock { background: linear-gradient(to top, rgba(18, 20, 24, .96) 35%, rgba(18, 20, 24, 0)); }
  .hist-btn { border-color: var(--line); background: var(--surface); color: var(--ink); }
  .hist-btn:not(:disabled):hover { background: var(--surface-2); }
  .stage-wrap.full > .fix { background: rgba(28, 31, 37, .95); }
  .hero .views .design-btn[aria-pressed="true"] { background: #0c3a5c; border-color: #2b7bb9; color: #bfe3ff; }
  .dock-head .try-cta { background: linear-gradient(180deg, #fb8a4c, #e0611f); color: #1a0d04; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 14px rgba(0, 0, 0, .4); }
  .dock-head .try-cta svg { color: #1a0d04; }
  .burn-btn { box-shadow: 0 8px 22px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .2); }
  .burn-btn::after { border-color: rgba(255, 255, 255, .3); }
  /* Buttons under the car: dark, with a faint top light instead of white */
  .menu-btn, .car-pill { border-color: rgba(255, 255, 255, .1); background: linear-gradient(180deg, #2b2f37, #20232a); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 8px rgba(0, 0, 0, .3); }
  .menu-btn:hover:not([aria-expanded="true"]) { border-color: #4a505b; }
  .menu-btn[aria-expanded="true"], .car-pill[aria-expanded="true"] { background: linear-gradient(180deg, #eef1f5, #d9dde3); color: #14171c; border-color: #eef1f5; }
  /* Dark glass over the car: camera bar and corner buttons */
  .stage-wrap > #views, .corner-btn { background: linear-gradient(140deg, rgba(40, 44, 52, .78), rgba(24, 27, 32, .6)); border-color: rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12), 0 6px 18px rgba(0, 0, 0, .35); }
  .stage-wrap > #views .chip, .corner-btn { color: var(--ink); }
  .stage-wrap > #views .chip:hover { background: rgba(255, 255, 255, .08); }
  .corner-btn:hover, .corner-btn[aria-expanded="true"] { background: rgba(52, 57, 67, .92); }
  /* Pop-out menus: smoked glass */
  .pop { color: var(--ink); background: linear-gradient(140deg, rgba(38, 42, 50, .9), rgba(26, 29, 35, .82) 55%, rgba(34, 38, 45, .88)); border-color: rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .14), 0 24px 60px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .3); }
  .pop::before { opacity: .25; }
  .pop-title, .pop .dock-lbl, .mesh-slide { color: var(--muted); }
  .mesh-count { color: var(--ink); }
  .mesh-slide input { accent-color: #eef1f5; }
  .pop-item:hover { background: rgba(255, 255, 255, .08); }
  .pop-item[aria-pressed="true"] { background: #eef1f5; color: #14171c; }
  .pop .swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #14171c, 0 0 0 4px #eef1f5; }
  .tyre-tile { border-color: rgba(255, 255, 255, .1); background: linear-gradient(180deg, rgba(52, 57, 67, .8), rgba(32, 35, 42, .6)); color: var(--ink); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1), 0 3px 10px rgba(0, 0, 0, .3); }
  .tyre-tile[aria-checked="true"] { background: linear-gradient(180deg, #eef1f5, #d9dde3); color: #14171c; border-color: #eef1f5; }
  /* "Add a photo" screen: dark glass buttons */
  .glass-btn:not(.primary) { color: var(--ink); border-color: rgba(255, 255, 255, .16); background: linear-gradient(140deg, rgba(52, 57, 67, .8), rgba(30, 33, 40, .55));
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .14), 0 8px 24px rgba(0, 0, 0, .35); }
  .pe-blobs i { opacity: .28; }
  .tyre-info, .pe-car-note { color: var(--muted); }
  .tyre-info b, .pe-car-note b, .pe-trying b { color: var(--ink); }
  .pe-trying { color: var(--muted); background: rgba(40, 44, 52, .72); border-color: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .3); }
  .pe-tips li { color: #c9cfd8; background: rgba(40, 44, 52, .62); border-color: rgba(255, 255, 255, .12); }
  .pop-item small, .flt-lbl { color: var(--muted); }
  .pop-item[aria-pressed="true"] small { color: #5f6772; }
  .flt-count, .wl-switch { color: var(--ink); }
}

/* ---------- "Try these on my car" (owner, 2026-10-31): the main button has life ----------
   A slow-drifting orange-to-copper gradient, a shine that sweeps across every few seconds, the camera
   "takes a picture" (lens blink, a flash), a soft breathing glow, an arrow that nudges, and a jelly
   press. Calm-motion settings get the plain button. */
/* (every moving part is a slide or a fade, which phones draw almost for free: the drifting gradient is a
   wide strip that slides, the shine is a strip that slides, the breathing is a gentle scale) */
.dock > .dock-head .try-cta { position: relative; isolation: isolate; overflow: hidden; gap: 12px; color: #fff; border: 0; background: #ef5a1a;
  box-shadow: 0 8px 26px rgba(239, 90, 26, .42), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .15);
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; }
.dock > .dock-head .try-cta:not(:hover):not(:active) { animation: tc-breathe 2.6s ease-in-out infinite; }
.dock > .dock-head .try-cta > .tc-bg { position: absolute; left: 0; top: 0; bottom: 0; width: 260%; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, #ff9a4d 0%, #ef5a1a 30%, #c2410c 55%, #ff7a2f 80%, #ffb074 100%); animation: tc-drift 7s ease-in-out infinite alternate; }
.dock > .dock-head .try-cta::before { content: ""; position: absolute; top: 0; bottom: 0; left: -140%; width: 240%; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, .15) 53%, transparent 62%);
  animation: tc-shine 4.5s cubic-bezier(.4, 0, .2, 1) 1.2s infinite; }
.dock > .dock-head .try-cta > * { position: relative; z-index: 1; }
.dock > .dock-head .try-cta svg { color: #fff; }
.dock > .dock-head .try-cta b { color: #fff; font-size: 1.02rem; letter-spacing: .01em; }
.dock > .dock-head .try-cta:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 14px 34px rgba(239, 90, 26, .5), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(0, 0, 0, .15); }
.dock > .dock-head .try-cta:active { transform: scale(.96, .92); transition-duration: .1s; }
.dock > .dock-head .try-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.tc-arrow { margin-left: auto; font: 800 1.2rem/1 var(--body); color: rgba(255, 255, 255, .85); animation: tc-nudge 1.8s ease-in-out infinite; }
@keyframes tc-drift { from { transform: translateX(0); } to { transform: translateX(-61.5%); } }
@keyframes tc-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); } }
@keyframes tc-shine { 0% { transform: translateX(0); } 45%, 100% { transform: translateX(75%); } }
@keyframes tc-nudge { 0%, 100% { transform: translateX(0); opacity: .85; } 50% { transform: translateX(5px); opacity: 1; } }
@media (prefers-color-scheme: dark) { .dock > .dock-head .try-cta { color: #fff; } .dock > .dock-head .try-cta svg { color: #fff; } }
@media (min-width: 1000px) { .tc-arrow { display: none; } .dock > .dock-head .try-cta { gap: 10px; } }
@media (prefers-reduced-motion: reduce) {
  .dock > .dock-head .try-cta, .dock > .dock-head .try-cta::before, .tc-arrow { animation: none; }
  .dock > .dock-head .try-cta:hover { transform: none; }
}

/* Sideways: the side panel stacks downwards with the wheel grid filling the rest and scrolling, so the
   name row and Try button go back above the wheels there (the grid stays last) */
@media (orientation: landscape) and (max-height: 520px) {
  .stage-wrap.sideways > .dock > .dock-head { order: -1; margin: 0 0 6px; }
  .stage-wrap.sideways > .dock > .dock-bar { order: -1; }
  .stage-wrap.sideways > .dock > .dock-head .try-cta { min-height: 42px; }
  .stage-wrap.sideways > .dock > .dock-head .try-cta small, .stage-wrap.sideways .tc-arrow { display: none; }
}

/* ---------- Round 10 (owner, 2026-10-31) ----------
   Rear camera button gone. Burnout (tap) and Rev (hold) take Drive in's place in the camera bar for a few
   seconds after the car parks: the flame is orange, the rev gauge dark, both pop in and the flame glows. */
#burn-pill .burn-btn, #burn-pill .rev-btn { position: relative; left: auto; right: auto; bottom: auto; margin: 0; width: 44px; height: 44px; flex: none; aspect-ratio: 1; min-height: 0; padding: 0; border-radius: 999px;
  display: inline-grid; place-items: center; transform: none; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
#burn-pill .rev-btn::after { content: none; }
#burn-pill .burn-btn { color: #fff; background: linear-gradient(180deg, #ff9a4d, #e0611f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 10px rgba(239, 90, 26, .35); }
#burn-pill .burn-btn::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; border: 2px solid rgba(239, 90, 26, .7); opacity: 0; pointer-events: none; animation: burn-ring 1.4s ease-out infinite; }
#burn-pill .burn-btn svg { width: 24px; height: 24px; }
#burn-pill .rev-btn { color: #fff; background: #15171a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }
#burn-pill .rev-btn svg { width: 24px; height: 24px; }
#burn-pill .rev-btn.on { color: #fb923c; background: #2a1a10; box-shadow: 0 0 0 3px rgba(251, 146, 60, .55), 0 0 18px rgba(251, 146, 60, .6); }
#burn-pill .burn-btn.in { animation: burn-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
#burn-pill .rev-btn.in { animation: burn-pop .5s .08s cubic-bezier(.3, 1.6, .5, 1) both; }
#burn-pill :is(.burn-btn, .rev-btn):hover { transform: scale(1.08); }
#burn-pill :is(.burn-btn, .rev-btn):active { transform: scale(.92); }
#burn-pill :is(.burn-btn, .rev-btn)[hidden] { display: none; }
@keyframes burn-ring { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #burn-pill .burn-btn::after, #burn-pill .burn-btn.in { animation: none; } }
@media (prefers-color-scheme: dark) {
  #burn-pill .rev-btn { background: #eef1f5; color: #14171c; }
  #burn-pill .rev-btn.on { color: #fb923c; background: #2a1a10; }
}

/* Mesh | Paint: a glass pill at the top-left of the car (the old cube icon in the camera bar said nothing).
   The chosen side is filled: Mesh in the mesh line colour, Paint dark. The build label moves right of it. */
.look-switch { position: absolute; z-index: 5; left: 14px; top: 14px; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  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); }
.look-switch[hidden] { display: none; }
.look-switch button { border: 0; background: none; color: #15171a; min-height: 32px; padding: 0 13px; border-radius: 999px; font: 700 .84rem var(--body); cursor: pointer; transition: background .25s, color .25s, transform .2s; }
.look-switch button:active { transform: scale(.95); }
.look-switch button[aria-pressed="true"] { background: #15171a; color: #fff; }
.look-switch #look-mesh[aria-pressed="true"] { background: var(--mesh, #4a8ff5); color: #fff; }
.look-switch button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.stage-wrap:has(> .look-switch:not([hidden])) .build-tag { left: 140px; top: 18px; }
.stage-wrap.sideways > .look-switch { left: 14px; top: 12px; }
@media (max-width: 520px) { .look-switch button { min-height: 30px; padding: 0 11px; font-size: .8rem; } .stage-wrap:has(> .look-switch:not([hidden])) .build-tag { left: 128px; } }
@media (prefers-color-scheme: dark) {
  .look-switch { background: linear-gradient(140deg, rgba(40, 44, 52, .78), rgba(24, 27, 32, .6)); border-color: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12), 0 6px 18px rgba(0, 0, 0, .35); }
  .look-switch button { color: var(--ink); }
  .look-switch button[aria-pressed="true"] { background: #eef1f5; color: #14171c; }
  .look-switch #look-mesh[aria-pressed="true"] { background: var(--mesh, #5fb4ff); color: #fff; }
}

/* ---------- Round 11 (owner, 2026-10-31) ----------
   "Try these on my car": a hand-drawn car whose wheels spin and swap to a new rim every two seconds,
   with a sparkle. Tyre drawer: tyres as they stand on the shop floor; they roll in when the drawer
   opens, the chosen one lifts with its rim turning and its tread rolling, a pick gives a bounce. */
.tc-doodle { display: grid; place-items: center; width: 66px; height: 40px; flex: none; }
.tc-doodle svg { width: 66px; height: 36px; overflow: visible; display: block; }
.tcd-body { animation: tcd-bob 1.6s ease-in-out infinite; }
.tcd-spin { transform-box: fill-box; transform-origin: center; animation: tcd-roll 1.6s linear infinite; }
/* The rim strip slides one rim to the left every two seconds (the fourth rim is the first again, so the
   jump back is invisible); each rim turns gently; a swipe gesture leads the change, a sparkle lands it */
.tcd-strip { animation: tcd-swipe 6s cubic-bezier(.4, 0, .2, 1) infinite; }
.tcd-spin { transform-box: fill-box; transform-origin: center; animation: tcd-roll 4s linear infinite; }
.tcd-hand { opacity: 0; animation: tcd-hand 2s ease-in-out infinite; }
.tcd-spark { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; animation: tcd-spark 2s ease-out infinite; }
.tcd-spark.s2 { animation-delay: -1s; }
@keyframes tcd-swipe { 0%, 27% { transform: translateX(0); } 33%, 60% { transform: translateX(-16px); } 66%, 93% { transform: translateX(-32px); } 99.9% { transform: translateX(-48px); } 100% { transform: translateX(0); } }
@keyframes tcd-hand { 0%, 60% { opacity: 0; transform: translateX(13px); } 66% { opacity: 1; transform: translateX(12px); } 96% { opacity: 1; transform: translateX(-11px); } 100% { opacity: 0; transform: translateX(-12px); } }
@keyframes tcd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.8px); } }
@keyframes tcd-roll { to { transform: rotate(360deg); } }
@keyframes tcd-spark { 0% { opacity: 0; transform: scale(0) rotate(0); } 6% { opacity: 1; transform: scale(1.1) rotate(20deg); } 16%, 100% { opacity: 0; transform: scale(0) rotate(60deg); } }
@media (min-width: 1000px) { .tc-doodle { width: 54px; height: 32px; } .tc-doodle svg { width: 54px; height: 30px; } }
@media (orientation: landscape) and (max-height: 520px) { .stage-wrap.sideways .tc-doodle { width: 50px; height: 30px; } .stage-wrap.sideways .tc-doodle svg { width: 50px; height: 28px; } }

.tyre-wheel { padding: 8px calc(50% - 56px) 12px; gap: 4px; }
.tyre-tile { width: 112px; padding: 8px 6px 10px; gap: 3px; }
.tyre-tile .tyre-art { width: 94px; height: 80px; overflow: visible; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .22)); transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), filter .35s; }
.tt-name { font: 700 .84rem/1.15 var(--body); }
.tt-sub { font: 600 .7rem/1.1 var(--body); opacity: .72; min-height: 1.1em; }
.tyre-tile .rim-spin { transform-box: fill-box; transform-origin: center; }
.tyre-tile[aria-checked="true"] .rim-spin { animation: rim-spin 3s linear infinite; }
.tyre-tile[aria-checked="true"] .tread-roll { animation: tread-roll 1.3s linear infinite; }
.tyre-tile[aria-checked="true"] .tyre-art { filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .35)); transform: translateY(-3px) scale(1.06); }
.tyre-tile:hover .tyre-art { transform: translateY(-4px) scale(1.05); }
.tyre-tile.just .tyre-art { animation: tyre-pick .65s cubic-bezier(.3, 1.6, .5, 1); }
.pop.open:not(.settled) .tyre-tile .tyre-art { animation: tyre-rollin .75s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(140ms + var(--i, 0) * 45ms); }
.pop.open:not(.settled) .tyre-tile .rim-spin { animation: tyre-rollspin .75s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(140ms + var(--i, 0) * 45ms); }
@keyframes rim-spin { to { transform: rotate(360deg); } }
@keyframes tread-roll { to { transform: translateY(var(--th)); } }
@keyframes tyre-pick { 0% { transform: translateY(-3px) scale(1.06); } 35% { transform: translateY(-10px) scale(1.14) rotate(-4deg); } 100% { transform: translateY(-3px) scale(1.06); } }
@keyframes tyre-rollin { from { transform: translateX(54px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes tyre-rollspin { from { transform: rotate(-260deg); } to { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) {
  .tcd-body, .tcd-spin, .tcd-spark, .tcd-strip, .tcd-hand, .tyre-tile .rim-spin, .tyre-tile .tread-roll, .tyre-tile.just .tyre-art, .pop.open:not(.settled) .tyre-tile .tyre-art, .pop.open:not(.settled) .tyre-tile .rim-spin { animation: none; }
  .tcd-strip, .tcd-hand { animation: none; } .tcd-hand { opacity: 0; }
}
/* (the button's own 22px icon rule outranked the doodle's size: make the doodle big enough to read) */
.dock > .dock-head .try-cta .tc-doodle { width: 78px; height: 44px; }
.dock > .dock-head .try-cta .tc-doodle svg { width: 78px; height: 42px; }
.dock > .dock-head .try-cta { min-height: 54px; }
@media (min-width: 1000px) { .dock > .dock-head .try-cta .tc-doodle { width: 58px; height: 34px; } .dock > .dock-head .try-cta .tc-doodle svg { width: 58px; height: 32px; } .dock > .dock-head .try-cta { min-height: 46px; } }

/* ---------- Round 12 (owner, 2026-10-31) ----------
   Mesh | Paint sits in the camera bar; Drive in, Burnout, Rev, Save and Full screen in a glass pill at the
   top-right ("things you do"); the size menu is a dial; glossy paint swatches; a proper mesh slider;
   menu values pop when they change; payment options under the price. */
.stage-wrap > #views .look-switch { position: relative; left: auto; top: auto; z-index: auto; padding: 2px; gap: 2px; border: 0; background: rgba(20, 23, 28, .07);
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
/* The filled pill slides between Mesh and Paint (place and width set by the app); the words sit on top */
.look-switch[data-slide]::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: var(--x, 2px); width: var(--w, 0px); border-radius: 999px; background: var(--bg, #15171a);
  transition: left .32s cubic-bezier(.3, 1.4, .5, 1), width .32s cubic-bezier(.3, 1.4, .5, 1), background .3s; }
.look-switch[data-slide] button { position: relative; z-index: 1; transition: color .2s; }
.look-switch[data-slide] button[aria-pressed="true"], .look-switch[data-slide] #look-mesh[aria-pressed="true"] { background: none; }
@media (prefers-reduced-motion: reduce) { .look-switch[data-slide]::before { transition: none; } }
.stage-wrap > #views .look-switch button { min-height: 30px; padding: 0 10px; font-size: .8rem; }
@media (max-width: 520px) { .stage-wrap > #views .look-switch button { padding: 0 9px; font-size: .78rem; } }
#corner-right { top: 12px; bottom: auto; right: max(12px, env(safe-area-inset-right, 0px)); display: inline-flex; flex-direction: row; gap: 2px; padding: 3px; border-radius: 999px;
  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); }
#corner-right[hidden] { display: none; }
#burn-pill { position: absolute; z-index: 4; right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(var(--dock-h, 0px) + var(--band, 0px) + 10px);
  display: inline-flex; align-items: center; gap: 8px; padding: 5px; border-radius: 999px;
  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); }
#burn-pill:not(:has(> button:not([hidden]))), #burn-pill[hidden] { display: none; }
/* (full screen and sideways: just above the camera bar there, on the right of the car) */
.stage-wrap.full > #burn-pill { bottom: calc(var(--dock-h, 0px) + 70px); }
.stage-wrap.sideways > #burn-pill { right: calc(var(--side) + 12px); bottom: 64px; }
.stage-wrap.photo-mode > #burn-pill { display: none; }
/* Car controls at the bottom left of the 3D car, opened by Car on the camera bar (owner, 4 Nov 2026): steering wheel,
   lights, ride height. The Burnout pill's glass, mirrored on the left; sideways a column, clear of the car and above
   the rim line */
#car-ctl { position: absolute; z-index: 4; left: max(12px, env(safe-area-inset-left, 0px)); bottom: calc(var(--dock-h, 0px) + var(--band, 0px) + 10px);
  display: inline-flex; align-items: center; gap: 6px; padding: 5px; border-radius: 999px;
  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); }
#car-ctl[hidden], #car-ctl [hidden], .stage-wrap.photo-mode > #car-ctl { display: none; }
.stage-wrap.full > #car-ctl { bottom: calc(var(--dock-h, 0px) + 70px); }
.stage-wrap.sideways > #car-ctl { bottom: 64px; }
/* (sideways: two rows, steering and lights over the height, so it stays under the price and clear of the car) */
.stage-wrap.side3d > #car-ctl { bottom: calc(var(--rim-h, 96px) + 10px); display: grid; grid-template-columns: auto auto; justify-items: center; gap: 4px; border-radius: 22px; }
#car-ctl .steer { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #15171a; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
#car-ctl .steer svg { width: 40px; height: 40px; transform: rotate(var(--steer, 0deg)); }
#car-ctl .steer .steer-top { fill: var(--accent); }
#car-ctl .steer:hover, #car-ctl .steer.held { background: rgba(0, 0, 0, .06); }
#car-ctl .steer.held { cursor: grabbing; }
#car-ctl .ctl-btn { width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; border-radius: 999px; background: none; color: #15171a; display: grid; place-items: center; cursor: pointer; }
#car-ctl .ctl-btn:hover { background: rgba(0, 0, 0, .06); }
#car-ctl .ctl-btn svg { width: 22px; height: 22px; }
#car-ctl #lights-btn[aria-pressed="true"] { background: #15171a; color: #ffd76a; box-shadow: 0 0 14px rgba(255, 196, 80, .6); }
#car-ctl :is(.steer, .ctl-btn):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#car-ctl .ctl-btn:disabled { opacity: .3; cursor: default; background: none; }
/* Ride height: down, the height now, up (in a column sideways) */
#car-ctl .ride { display: inline-flex; align-items: center; gap: 2px; padding-left: 4px; border-left: 1px solid rgba(20, 23, 28, .12); }
#car-ctl .ride-val { min-width: 52px; text-align: center; color: #15171a; font: 800 .8rem/1 var(--body); white-space: nowrap; }
#car-ctl .ride.on .ride-val { color: var(--accent); }
.stage-wrap.side3d > #car-ctl .ride { grid-column: 1 / -1; padding: 2px 0 0; border-left: 0; border-top: 1px solid rgba(20, 23, 28, .12); }
.stage-wrap.side3d > #car-ctl .ride .ctl-btn { width: 30px; height: 32px; }
.stage-wrap.side3d > #car-ctl .ride-val { min-width: 44px; font-size: .74rem; }
/* (phones: Spin and Drive in as a second row; sideways they are elsewhere and the row goes) */
#car-ctl:has(> #car-moves > button) { flex-wrap: wrap; justify-content: center; max-width: 312px; border-radius: 24px; }
#car-ctl > #car-moves { flex-basis: 100%; justify-content: center; gap: 6px; padding: 5px 0 1px; border: 0; border-top: 1px solid rgba(20, 23, 28, .12); border-radius: 0; background: none; box-shadow: none; }
#car-ctl > #car-moves:not(:has(> button)) { display: none; }
/* Car on the camera bar, while the car controls are open */
:is(#views, .dock-extras) button.chip.car-btn[aria-expanded="true"] { color: #fff; background: #15171a !important; border-color: #15171a !important; }
/* Lights on: the studio round the car goes dark too, so the lamps show */
.stage-wrap.lights-on:not(.photo-mode) { background: radial-gradient(120% 90% at 50% 35%, #3b4049, #121418); }
@media (prefers-color-scheme: dark) {
  #car-ctl { background: linear-gradient(140deg, rgba(40, 44, 52, .78), rgba(24, 27, 32, .6)); border-color: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12), 0 6px 18px rgba(0, 0, 0, .35); }
  #car-ctl .steer, #car-ctl .ctl-btn { color: #f1f3f6; }
  #car-ctl .steer:hover, #car-ctl .steer.held, #car-ctl .ctl-btn:hover { background: rgba(255, 255, 255, .08); }
  #car-ctl .ride { border-color: rgba(255, 255, 255, .14); }
  #car-ctl .ride-val { color: #f1f3f6; }
  #car-ctl .ride.on .ride-val { color: var(--accent); }
  :is(#views, .dock-extras) button.chip.car-btn[aria-expanded="true"] { color: #14171c; background: #eef1f5 !important; border-color: #eef1f5 !important; }
}
@media (prefers-color-scheme: dark) {
  #burn-pill { background: linear-gradient(140deg, rgba(40, 44, 52, .78), rgba(24, 27, 32, .6)); border-color: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12), 0 6px 18px rgba(0, 0, 0, .35); }
}
#corner-right .chip { border: 0; background: none; color: #15171a; width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 999px; display: inline-grid; place-items: center; }
#corner-right .chip svg { width: 22px; height: 22px; }
#corner-right .chip:hover { background: rgba(0, 0, 0, .06); }
#corner-right .drive-btn[aria-pressed="true"] { background: #15171a; color: #fff; }
#corner-right .chip[hidden] { display: none; }
.stage-wrap.sideways > #corner-right { right: calc(var(--side) + 12px); top: 12px; }
@media (max-width: 520px) { #corner-right .chip { width: 32px; height: 32px; } #corner-right .chip svg { width: 20px; height: 20px; } }
@media (prefers-color-scheme: dark) {
  .stage-wrap > #views .look-switch { background: rgba(255, 255, 255, .08); }
  #corner-right { background: linear-gradient(140deg, rgba(40, 44, 52, .78), rgba(24, 27, 32, .6)); border-color: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12), 0 6px 18px rgba(0, 0, 0, .35); }
  #corner-right .chip { color: var(--ink); }
  #corner-right .chip:hover { background: rgba(255, 255, 255, .08); }
  #corner-right .drive-btn[aria-pressed="true"] { background: #eef1f5; color: #14171c; }
}

/* Menu buttons: the value pops when it changes; the open one glows softly */
.menu-btn b.val-pop { animation: val-pop .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes val-pop { 0% { transform: translateY(7px) scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* Size dial */
.pop-size-wrap { width: min(400px, calc(100vw - 44px)); }
.size-dial-wrap { position: relative; }
.size-marker { position: absolute; left: 50%; top: 2px; width: 3px; height: 10px; margin-left: -1.5px; border-radius: 3px; background: var(--accent); z-index: 1; }
.size-dial { display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 14px calc(50% - 38px) 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.size-dial::-webkit-scrollbar { display: none; }
.size-tick { flex: none; width: 76px; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; padding: 8px 4px 6px; border: 0; background: none; color: #6b727d; cursor: pointer; border-radius: 16px;
  transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), color .25s, opacity .25s; }
.size-tick b { font: 800 1.55rem/1 var(--head); font-variant-numeric: tabular-nums; }
.size-tick small { font: 700 .6rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-top: 4px; }
.size-tick[aria-pressed="true"] { color: #14171c; transform: scale(1.3); }
.size-tick[aria-pressed="true"] b { color: var(--accent); }
.size-tick.nofit b { text-decoration: line-through; }
.size-tick.nofit { opacity: .45; }
.size-tick:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.size-info { margin: 4px 2px 2px; text-align: center; font-size: .86rem; color: #3b414a; min-height: 1.3em; }
.size-info b { color: #14171c; }
.pop.open:not(.settled) .size-tick { animation: pop-item .55s cubic-bezier(.3, 1.6, .45, 1) both; animation-delay: calc(110ms + var(--i, 0) * 30ms); }

/* Glossy paint and line-colour swatches: a drop of paint with a highlight; the chosen one swells */
.pop .paints .swatch, .pop .mesh-colours .swatch { position: relative; width: 36px; height: 36px; border: 2px solid rgba(255, 255, 255, .95);
  box-shadow: inset 0 -7px 10px rgba(0, 0, 0, .32), inset 0 3px 6px rgba(255, 255, 255, .22), 0 3px 8px rgba(0, 0, 0, .22); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; }
.pop .paints .swatch::after, .pop .mesh-colours .swatch::after { content: ""; position: absolute; left: 20%; top: 9%; width: 42%; height: 30%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 72%); pointer-events: none; }
.pop .paints .swatch:hover, .pop .mesh-colours .swatch:hover { transform: translateY(-2px) scale(1.06); }
.pop .paints .swatch[aria-pressed="true"], .pop .mesh-colours .swatch[aria-pressed="true"] { transform: scale(1.16);
  box-shadow: inset 0 -7px 10px rgba(0, 0, 0, .32), inset 0 3px 6px rgba(255, 255, 255, .22), 0 6px 14px rgba(0, 0, 0, .3), 0 0 0 3px #fff, 0 0 0 5px #14171c; }
.pop .paints { gap: 12px; }
.pop .mesh-colours { gap: 12px; }

/* Mesh slider: a track that fills with the line colour and a big glowing thumb */
.mesh-slide input[type="range"] { -webkit-appearance: none; appearance: none; height: 30px; background: transparent; margin: 0; }
.mesh-slide input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(20, 23, 28, .14), var(--mesh, #4a8ff5)); }
.mesh-slide input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: #fff; border: 3px solid var(--mesh, #4a8ff5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3), 0 0 0 6px color-mix(in srgb, var(--mesh, #4a8ff5) 22%, transparent); cursor: grab; transition: box-shadow .2s; }
.mesh-slide input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; box-shadow: 0 2px 8px rgba(0, 0, 0, .3), 0 0 0 10px color-mix(in srgb, var(--mesh, #4a8ff5) 28%, transparent); }
.mesh-slide input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(20, 23, 28, .14), var(--mesh, #4a8ff5)); }
.mesh-slide input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--mesh, #4a8ff5); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.mesh-slide input[type="range"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 999px; }

/* Payment options under the price */
.pay-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 2px 0 0; font-size: .86rem; color: var(--muted); }
.pay-row b { color: var(--ink); }
.pay-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font: 700 .74rem var(--body); color: var(--ink); white-space: nowrap; }
.pay-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.pay-pill.fin::before { background: var(--accent); }
.pay-note { margin: 4px 0 2px; font-size: .74rem; color: var(--muted); }
.pay-set .check { font-size: .95rem; }
@media (prefers-color-scheme: dark) {
  .size-tick { color: var(--muted); }
  .size-tick[aria-pressed="true"] { color: var(--ink); }
  .size-info { color: var(--muted); } .size-info b { color: var(--ink); }
  .pop .paints .swatch[aria-pressed="true"], .pop .mesh-colours .swatch[aria-pressed="true"] { box-shadow: inset 0 -7px 10px rgba(0, 0, 0, .32), inset 0 3px 6px rgba(255, 255, 255, .22), 0 6px 14px rgba(0, 0, 0, .4), 0 0 0 3px #14171c, 0 0 0 5px #eef1f5; }
  .mesh-slide input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, rgba(255, 255, 255, .14), var(--mesh, #5fb4ff)); }
}
@media (prefers-reduced-motion: reduce) { .menu-btn b.val-pop, .pop.open:not(.settled) .size-tick { animation: none; } }

/* "Try these on my car", laid out: the doodle car, two lines of text, the arrow */
.dock > .dock-head .try-cta { justify-content: flex-start; gap: 12px; padding: 0 16px 0 12px; }
.dock > .dock-head .try-cta .tc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.dock > .dock-head .try-cta .tc-txt small { display: block; font: 600 .74rem/1.15 var(--body); color: rgba(255, 255, 255, .88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dock > .dock-head .try-cta .tc-txt b { line-height: 1.1; }
@media (min-width: 1000px) { .dock > .dock-head .try-cta .tc-txt small { display: none; } .dock > .dock-head .try-cta { gap: 10px; } }
@media (orientation: landscape) and (max-height: 520px) { .stage-wrap.sideways .try-cta .tc-txt small { display: none; } }

@media (prefers-reduced-motion: reduce) { .dock > .dock-head .try-cta:not(:hover):not(:active), .dock > .dock-head .try-cta > .tc-bg { animation: none; } }

.q-pay { display: block; margin-top: 4px; color: var(--muted); font-size: .8rem; }
.pay-preview { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--line); }
.pay-preview .pay-row { margin: 0; } .pay-preview .pay-row + .pay-row { margin-top: 6px; } .pay-preview .pay-note { margin-top: 6px; }

.size-info .warn-txt { color: var(--bad); font-weight: 700; }

.rl { display: flex; align-items: center; gap: 7px; }
.rbar img.ri { width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--surface-2); }

/* Photo screen: the wheel's name has the first line to itself; the car button and undo/redo share the next */
.dock:has(> .dock-head .hist:not([hidden])) > .dock-head .dock-name { flex: 1 1 100%; }
.dock:has(> .dock-head .hist:not([hidden])) > .dock-head .car-pill { margin-left: 0; max-width: calc(100% - 118px); flex: 0 1 auto; }
.dock:has(> .dock-head .hist:not([hidden])) > .dock-head .hist { margin-left: auto; }

.intro-logo { width: 84px; height: 84px; object-fit: contain; border-radius: 20px; background: rgba(255, 255, 255, .92); padding: 10px; margin: 0 0 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); animation: intro-rise .9s cubic-bezier(.2, .9, .3, 1.1) both; }
.intro-logo[hidden] { display: none; }

/* Phones: the photo tools keep their words, wrapping instead of being cut short */
@media (max-width: 520px) {
  #photo-tools { gap: 3px; }
  #photo-tools > .ptool .lbl, #photo-tools > :is(#save-btn, #full-btn) .lbl { font-size: .64rem; letter-spacing: -.01em; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.05; text-align: center; }
}

.buy #share-look-btn { width: 100%; min-height: 48px; }

/* Staff > Requests: status chips and a search box */
.q-filter { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 12px; }
.q-filter[hidden] { display: none; }
.q-filter input { flex: 1 1 200px; min-height: 40px; }

/* ---------- Adjust mode, simpler (owner, 2026-11-01) ----------
   The circles on the photo do the work; below it one slim row (which wheel, undo / redo, Done) and a
   folded "Fine-tune" with the tools and pad. The chosen circle is solid, the other dashed; the resize dot
   shows arrows. */
.fix-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fix-main .tune-pick { flex: 1 1 auto; flex-basis: auto; justify-content: flex-start; }
.fix-main .tune-hist { margin-left: auto; }
.fix-main #fix-done { flex: 0 0 auto; min-height: 44px; padding: 0 20px; }
.fix-fine { border-top: 1px solid var(--line); padding-top: 4px; }
.fix-fine summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 40px; font: 700 .9rem var(--body); color: var(--muted); }
.fix-fine summary::-webkit-details-marker { display: none; }
.fix-fine summary::before { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); margin-left: 4px; transition: transform .2s; }
.fix-fine[open] summary::before { transform: rotate(45deg); }
.fix-fine .tune { margin-top: 8px; }
.fix-fine .fix-actions { justify-content: flex-start; margin-top: 10px; }
.fix-fine .fix-actions .btn { flex: 0 0 auto; }
.fix-fine summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.handles .handle { border-style: dashed; }
.handles .handle.on { border-style: solid; box-shadow: 0 0 0 2px rgba(255, 255, 255, .65), 0 0 0 5px rgba(194, 65, 12, .25); }
.handle .grip { width: 28px; height: 28px; margin: -14px 0 0 -14px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18L18 6M18 6h-6M18 6v6M6 18h6M6 18v-6'/%3E%3C/svg%3E") center / 16px no-repeat; }
.hero > .ba { margin: 10px 16px 2px; }
.hero > .ba[hidden] { display: none; }
@media (min-width: 761px) { .hero > .ba { max-width: 760px; margin-left: auto; margin-right: auto; padding: 0 16px; } }

/* The AI photo button inside the picker on a photo (after the menus) */
.dock > .ai-cta { display: flex; width: calc(100% - 32px); margin: 8px 16px 10px; }
.dock > .ai-cta[hidden] { display: none; }
@media (min-width: 761px) { .dock > .ai-cta { max-width: 760px; width: calc(100% - 32px); margin-left: auto; margin-right: auto; } }

/* ---------- Adjust: the wheel controller (liquid glass) ----------
   Under the photo, so the car stays in view. Top: which wheel (little tyres), Peek, Reset, Done.
   Two joysticks: Angle (the chosen rim in a tyre tilts and turns in 3D as you go) and Move (a tyre that
   rolls); the Size bar under them. Knobs spring back when let go; a glowing ring shows the one in use.
   Undo and redo sit on the photo's bottom-right corner, where a thumb reaches. */
#fix.fix {
  --joy: clamp(124px, 39vw, 156px);
  padding: 10px 12px 12px; gap: 10px; border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--surface) 94%, #fff 6%), color-mix(in srgb, var(--surface-2) 75%, var(--surface)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 14px 34px rgba(15, 18, 24, .14);
  backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7);
  animation: fx-rise .5s cubic-bezier(.2, 1.25, .4, 1) both;
}
/* (under the photo; in full screen and sideways the existing rules place it over / beside the photo) */
.hero > #fix { position: relative; overflow: hidden; }
.stage-wrap > #fix { border-radius: 22px; }
.stage-wrap > #fix::before { display: none; }   /* (the shine would make the scrolling panel scroll sideways) */
.stage-wrap.sideways > #fix { --joy: min(124px, 31vh); padding: 8px 10px; gap: 8px; border-radius: 0; }
#fix.fix::before { content: ""; position: absolute; inset: -30% -70%; pointer-events: none; z-index: 3;
  background: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, .38) 50%, transparent 58%);
  transform: translateX(-70%); animation: fx-sheen 1.3s .2s ease-out both; }
@keyframes fx-rise { from { opacity: 0; transform: translateY(22px) scale(.97); } }
@keyframes fx-sheen { to { transform: translateX(70%); } }

/* Top row */
.fx-top { display: flex; align-items: center; gap: 6px; }
.fx-tabs { display: flex; gap: 3px; flex: 1 1 auto; min-width: 0; padding: 3px; border-radius: 17px;
  background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 1px 3px rgba(15, 18, 24, .1); }
.fx-tab { flex: 1 1 0; min-width: 0; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; border-radius: 14px; background: none; color: var(--muted); font: 700 .72rem var(--body); cursor: pointer;
  transition: background .25s, color .25s, box-shadow .25s, transform .15s; }
.fx-tab:active { transform: scale(.95); }
.fx-tab[aria-checked="true"] { background: var(--surface); color: var(--ink);
  box-shadow: 0 0 0 1.5px var(--accent), 0 3px 10px rgba(15, 18, 24, .15), inset 0 1px 0 rgba(255, 255, 255, .7); }
.fx-tab:focus-visible, .fx-tool:focus-visible, .fx-done:focus-visible, .joy-arr:focus-visible, .joy-rot:focus-visible, .joy-knob:focus-visible, .sc-btn:focus-visible, .sc-thumb:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* A little tyre: tread round the edge, rim in the middle */
.mini-tyre { position: relative; width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: radial-gradient(circle closest-side, #e3e6ea 0 30%, #8d949e 31% 40%, #23272d 41% 74%, transparent 75%), repeating-conic-gradient(#23272d 0 14deg, #4b5058 14deg 28deg); }
.mini-tyre.two { transform: translateX(-5px); }
.mini-tyre.two::after { content: ""; position: absolute; inset: 0; left: 11px; width: 22px; border-radius: 50%; background: inherit; box-shadow: -2px 0 0 var(--surface); }
.fx-tab[aria-checked="true"] .mini-tyre { animation: tyre-spin .7s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes tyre-spin { from { transform: rotate(-300deg); } }
.fx-tab[aria-checked="true"] .mini-tyre.two { animation: none; }
.fx-tool { flex: none; width: 48px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; border-radius: 14px; background: none; color: var(--ink); font: 700 .66rem var(--body); cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.fx-tool svg { width: 21px; height: 21px; }
.fx-tool:active { transform: scale(.9); }
.fx-tool[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
/* Phones (upright, or sideways where the panel is narrow): four tools and the tick share the row with the wheel tabs, so they are a touch narrower */
@media (max-width: 440px), (max-height: 500px) { .fx-top { gap: 4px; } .fx-tool { width: 41px; } .fx-done { width: 48px; } }
.fx-done { flex: none; width: 54px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 16px; cursor: pointer; color: var(--accent-ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5); transition: transform .15s; }
.fx-done svg { width: 26px; height: 26px; }
.fx-done:active { transform: scale(.92); }

/* Joysticks */
.fx-pads { display: flex; justify-content: space-evenly; gap: 10px; }
.joy-box { position: relative; display: grid; justify-items: center; gap: 6px; }
.joy { position: relative; width: var(--joy); height: var(--joy); border-radius: 50%; touch-action: none;
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--surface) 75%, #fff 25%), color-mix(in srgb, var(--surface-2) 88%, var(--ink) 8%));
  box-shadow: inset 0 3px 8px rgba(15, 18, 24, .14), inset 0 -2px 0 rgba(255, 255, 255, .45), 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), 0 1px 0 rgba(255, 255, 255, .6); }
/* the glowing ring while a joystick is held */
.joy::after, .sc-track::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: conic-gradient(var(--accent), transparent 35%, transparent 65%, var(--accent));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: joy-ring 1.4s linear infinite; }
.joy.live::after { opacity: 1; }
@keyframes joy-ring { to { transform: rotate(1turn); } }
/* (the four arrows scale with the joystick: at 40 px their corners touched on a small joystick, e.g. sideways) */
.joy { --arr: clamp(32px, calc(var(--joy) * .3), 40px); }
.joy-arr { position: absolute; width: var(--arr); height: var(--arr); display: grid; place-items: center; border: 0; border-radius: 12px; background: none; cursor: pointer; touch-action: none;
  color: color-mix(in srgb, var(--ink) 42%, transparent); transition: transform .15s, color .15s; }
.joy-arr svg { width: 19px; height: 19px; }
.joy-arr.up { top: 3px; left: 50%; margin-left: calc(var(--arr) / -2); } .joy-arr.down { bottom: 3px; left: 50%; margin-left: calc(var(--arr) / -2); }
.joy-arr.left { left: 3px; top: 50%; margin-top: calc(var(--arr) / -2); } .joy-arr.right { right: 3px; top: 50%; margin-top: calc(var(--arr) / -2); }
.joy-arr:active { color: var(--accent); transform: scale(.82); }
.joy-knob { --k: calc(var(--joy) * .42); position: absolute; left: 50%; top: 50%; z-index: 1; width: var(--k); height: var(--k); margin: calc(var(--k) / -2) 0 0 calc(var(--k) / -2);
  display: grid; place-items: center; border-radius: 50%; cursor: grab; touch-action: none; transition: transform .55s cubic-bezier(.25, 1.7, .45, 1);
  background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .5), transparent 45%), radial-gradient(circle, #23262c, #0d0f12);
  box-shadow: 0 9px 20px rgba(15, 18, 24, .3), 0 2px 4px rgba(15, 18, 24, .25), inset 0 1px 1px rgba(255, 255, 255, .35), inset 0 -3px 6px rgba(0, 0, 0, .35); }
.joy.live .joy-knob { transition: none; cursor: grabbing; }
#knob-angle { --k: calc(var(--joy) * .5); }
/* The chosen rim in its tyre: turns and tilts in 3D with the wheel on the photo */
.knob-3d { width: 100%; height: 100%; display: grid; place-items: center; perspective: 240px; }
.tyre3d { width: 90%; height: 90%; display: grid; place-items: center; border-radius: 50%; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)); transition: transform .12s linear;
  background: radial-gradient(circle closest-side, #121417 0 66%, #2e3239 67% 70%, #16181c 71% 82%, transparent 83%), repeating-conic-gradient(#16181c 0 8deg, #3a3e46 8deg 16deg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.tyre3d img { width: 68%; height: 68%; border-radius: 50%; object-fit: cover; }
.tyre3d img:not([src]) { visibility: hidden; }
#fix:not([hidden]) .tyre3d img { animation: rim-spin 1.1s .1s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes rim-spin { from { transform: rotate(-320deg) scale(.6); opacity: 0; } }
/* Move: a tyre that rolls as the wheel slides */
#knob-move { overflow: hidden; }
.tyre-roll { position: absolute; inset: 3px; border-radius: 50%;
  background: radial-gradient(circle closest-side, #15171b 0 64%, transparent 65%), repeating-conic-gradient(#15171b 0 11deg, #3a3e46 11deg 22deg); }
#knob-move b { position: relative; color: #fff; font: 800 .8rem var(--body); letter-spacing: .02em; }
.joy-rot { position: absolute; top: -6px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; touch-action: none;
  color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 92%, #fff), var(--surface-2));
  box-shadow: 0 4px 10px rgba(15, 18, 24, .16), inset 0 1px 0 rgba(255, 255, 255, .6); transition: transform .15s, color .15s; }
.joy-rot.l { left: -10px; } .joy-rot.r { right: -10px; }
.joy-rot svg { width: 18px; height: 18px; }
.joy-rot:active { transform: scale(.86) rotate(-25deg); color: var(--accent); }
.joy-rot.r:active { transform: scale(.86) rotate(25deg); }
.joy-cap { min-height: 1.2em; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Size bar */
.fx-scale { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 1px 3px rgba(15, 18, 24, .1); }
.sc-btn { flex: none; width: 46px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--ink); cursor: pointer; touch-action: none; transition: transform .15s, color .15s; }
.sc-btn svg { width: 24px; height: 24px; }
.sc-btn:active { transform: scale(.86); color: var(--accent); }
.sc-track { position: relative; flex: 1; height: 40px; border-radius: 999px; touch-action: none; }
.sc-track.live::after { opacity: 1; animation: none; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.sc-ticks { position: absolute; inset: 13px 6px; pointer-events: none;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 24%, transparent) 0 2px, transparent 2px 11px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
.sc-thumb { position: absolute; left: 50%; top: 3px; width: 78px; height: 34px; margin-left: -39px; display: grid; place-items: center; border-radius: 999px; cursor: grab; touch-action: none;
  color: #fff; font: 800 .8rem var(--body); transition: transform .55s cubic-bezier(.25, 1.7, .45, 1);
  background: radial-gradient(120% 90% at 30% 10%, rgba(255, 255, 255, .35), transparent 50%), linear-gradient(180deg, #30343b, #121417);
  box-shadow: 0 6px 14px rgba(15, 18, 24, .28), inset 0 1px 1px rgba(255, 255, 255, .3); }
.sc-track.live .sc-thumb { transition: none; cursor: grabbing; }

/* Undo and redo on the photo's bottom-right corner while adjusting */
.stage-wrap > .fix-corner { z-index: 6; flex-direction: row; }
.fix-corner .corner-btn { width: 46px; height: 46px; padding: 0; }
.fix-corner .corner-btn:disabled { opacity: .45; cursor: default; }
/* Peek: the circles step aside to show the result */
.handles .handle { transition: opacity .2s; }
.handles.peek .handle { opacity: 0; pointer-events: none; }
/* While adjusting, the before / after line steps aside */
body.fixing #ba-row { display: none !important; }
/* The guidance pill over the top of the photo */
.tap-hint { width: max-content; max-width: 92%; text-align: center; line-height: 1.25; font-size: .84rem; padding: 7px 12px; }
@media (min-width: 600px) { .tap-hint { font-size: .9rem; } }
@media (prefers-reduced-motion: reduce) {
  #fix.fix, #fix.fix::before, .fx-tab .mini-tyre, #fix .tyre3d img, .joy::after { animation: none !important; }
  #fix.fix::before { display: none; }
  .joy-knob, .sc-thumb { transition: none; }
}

/* ---------- My looks: the customer's gallery on this phone ---------- */
/* Header button with the count */
.looks-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--line); border-radius: 13px; cursor: pointer;
  color: var(--ink); background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 90%, #fff), var(--surface-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.looks-btn[hidden] { display: none; }
.looks-btn svg { width: 22px; height: 22px; }
.looks-count { position: absolute; top: -6px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font: 800 .68rem/1 var(--body); box-shadow: 0 0 0 2px var(--surface); }
.looks-btn.bump { animation: looks-bump .6s cubic-bezier(.3, 1.8, .5, 1); }
.looks-btn.bump .looks-count { animation: looks-bump .6s .1s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes looks-bump { 40% { transform: scale(1.25); } }
.looks-btn:focus-visible, .keep-btn:focus-visible, .look-card:focus-visible, .looks-x:focus-visible, .lv-nav:focus-visible, .lv-back:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.look-fly { position: fixed; z-index: 400; object-fit: cover; pointer-events: none; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); border-radius: 14px; }
@media (max-width: 480px) { .top-actions:has(.looks-btn:not([hidden])) { gap: 8px; } }

/* Keep (heart) on the photo's top-right */
.stage-wrap > .keep-btn { position: absolute; top: max(10px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); z-index: 5; height: 40px; padding: 0 13px 0 11px; gap: 6px; }
.stage-wrap.sideways > .keep-btn { right: calc(var(--side) + 12px); }
.keep-btn[hidden] { display: none; }
.keep-btn svg { width: 21px; height: 21px; }
.keep-btn[aria-pressed="true"] { color: #e11d48; }
.keep-btn[aria-pressed="true"] .hrt { fill: currentColor; }
.keep-btn.pop svg { animation: heart-pop .55s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes heart-pop { 35% { transform: scale(1.45); } 60% { transform: scale(.9); } }

/* "My looks" on the photo start screen */
.pe-looks { display: inline-flex; align-items: center; gap: 8px; }
.pe-looks[hidden] { display: none; }
.pe-looks svg { width: 20px; height: 20px; }
.pe-looks b { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .74rem; }

/* Picker: wheels that already have an AI photo on this photo */
.dock-w.has-ai::before { content: "AI"; position: absolute; left: -4px; top: -4px; z-index: 1; padding: 1px 5px; border-radius: 999px; font: 800 .6rem/1.3 var(--body); color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #ec4899); box-shadow: 0 0 0 2px var(--surface); }

/* The gallery */
.looks-dialog { width: min(760px, calc(100vw - 16px)); padding: 16px; border-radius: 24px; }
.looks-dialog[open] { animation: looks-in .35s cubic-bezier(.2, 1.1, .4, 1); }
@keyframes looks-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.looks-head { display: flex; align-items: baseline; gap: 10px; }
.looks-head h2 { margin: 0; font-size: 1.35rem; }
.looks-sub { color: var(--muted); font-size: .85rem; font-weight: 600; }
.looks-x { margin-left: auto; align-self: center; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); cursor: pointer; }
.looks-x svg { width: 20px; height: 20px; }
.looks-note { margin: 6px 0 12px; color: var(--muted); font-size: .8rem; }
.looks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.look-card { position: relative; display: block; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); color: var(--ink); text-align: left; cursor: pointer;
  animation: card-in .45s var(--d, 0ms) cubic-bezier(.2, 1, .3, 1) both; transition: transform .2s; }
.look-card:active { transform: scale(.97); }
@keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.look-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lc-txt { display: grid; gap: 1px; padding: 7px 9px 9px; }
.lc-txt b { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-txt span { font-size: .72rem; color: var(--muted); }
.lc-ai, .lv-ai { position: absolute; left: 7px; top: 7px; padding: 2px 7px; border-radius: 999px; font: 800 .66rem/1.3 var(--body); color: #fff; background: linear-gradient(135deg, #8b5cf6, #ec4899); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.looks-empty { padding: 30px 10px; text-align: center; color: var(--muted); }
/* One look, big */
@media (prefers-reduced-motion: reduce) { .looks-dialog[open], .look-card, .looks-btn.bump, .looks-btn.bump .looks-count, .keep-btn.pop svg { animation: none; } }

/* Photo zoom (double-tap, pinch, drag): quick on a double-tap, none while a finger moves it */
.stage canvas.pz-quick { transition-duration: .38s; transition-timing-function: cubic-bezier(.2, .9, .3, 1); }
.stage canvas.pz-live { transition: none; }
#stage.zoomed { touch-action: none; cursor: grab; }
#stage.zoomed:active { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .stage canvas.pz-quick { transition-duration: .01s; } }

/* The joysticks: just the rim, no tyre round it (cleaner) */
.tyre3d { width: 92%; height: 92%; background: none; box-shadow: none; }
.tyre3d img { width: 100%; height: 100%; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
#knob-angle { background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .55), transparent 45%), linear-gradient(160deg, color-mix(in srgb, var(--surface) 92%, #fff), var(--surface-2)); }
.tyre-roll { display: none; }

/* ---------- Adjust, calmer: thin rings so the rim itself shows ----------
   No fill, no labels (the tabs name the wheels): the chosen wheel a thin solid ring with small grips,
   the other a faint dashed ring. While a button or joystick works, the rings fade right back. */
.handles .handle { border: 2px dashed rgba(255, 255, 255, .7); background: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); transition: opacity .25s, border-color .2s; }
.handles .handle.on { border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .3); }
.handle .num { display: none; }
.handle .dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); }
.handle:not(.on) .dot, .handle:not(.on) .grip, .handle:not(.on) .spin { display: none; }
.handle .grip { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-width: 2px; }
.handle .spin { width: 20px; height: 20px; margin: -10px 0 0 -10px; border-width: 2px; }
.handles.quiet .handle { opacity: .3; }   /* (not "busy": that name is the dark "Finding your wheels" cover) */
.handles.dragging .handle:not(.on) { opacity: .25; }
/* the tip over the photo goes after a few seconds */
.tap-hint { transition: opacity .5s; }
.tap-hint.gone { opacity: 0; }
/* While adjusting, the photo shrinks a little so it and the whole controller fit above the browser's bar */
body.fixing .hero > .stage-wrap.photo-fit:not(.full):not(.sideways) { max-height: max(180px, calc(100svh - var(--top-h, 60px) - var(--fix-h, 290px) - 26px)); }
/* a touch more compact */
#fix.fix { --joy: clamp(110px, 33vw, 148px); }
.fx-tab, .fx-tool, .fx-done { height: 44px; }
.sc-track, .sc-btn { height: 40px; }
.sc-thumb { top: 2px; }
/* (while adjusting: no empty tools row and a smaller gap between the photo and the controller) */
body.fixing .hero > .controls { display: none !important; }
body.fixing .hero { row-gap: 10px; }

/* Undo and redo on the Move joystick's top corners (like rotate on the Angle joystick) */
.joy-rot:disabled { opacity: .4; cursor: default; }
#fix-undo:active:not(:disabled) { transform: scale(.86) rotate(-25deg); }
#fix-redo:active:not(:disabled) { transform: scale(.86) rotate(25deg); }
.joy-rot svg { width: 18px; height: 18px; }

/* ---------- The lock-on marker while adjusting ---------- */
.stage .handles { transition: transform .8s cubic-bezier(.65, 0, .35, 1); will-change: transform; overflow: visible; }
.stage .handles.pz-quick { transition-duration: .38s; transition-timing-function: cubic-bezier(.2, .9, .3, 1); }
.stage .handles.pz-live { transition: none; }
.handles svg.lock { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity .25s; }
/* (the brackets stay as they are while a button or joystick works: dimming them with every press made
   them blink, owner, 2 Nov 2026) */
.handles.peek svg.lock { opacity: 0; }
.lock .lk { transform-box: view-box; animation: lk-in .55s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes lk-in { from { transform: scale(1.4); opacity: 0; } 60% { opacity: 1; } }
.lock .halo { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lock .br { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgba(251, 127, 60, .7)); }
.lock .halo, .lock .br { transform-box: fill-box; transform-origin: center; animation: lk-breathe 2.6s ease-in-out .7s infinite; }
@keyframes lk-breathe { 50% { transform: scale(1.025); } }
.lock .ring { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1.6 3.4; animation: lk-turn 2.4s linear infinite; }
@keyframes lk-turn { to { stroke-dashoffset: -10; } }
.lock .scan { stroke: #fff; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9));
  animation: lk-scan .7s .15s ease-in-out both; }
@keyframes lk-scan { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(var(--h, 100px)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lock .lk, .lock .halo, .lock .br, .lock .ring, .lock .scan { animation: none; } .lock .scan { opacity: 0; } }
/* "Rims only" in the menus row */
.rims-btn[aria-pressed="true"] b { color: var(--accent); }
.rims-btn[hidden] { display: none !important; }

/* Brake caliper colour menu */
.brakes { display: flex; gap: 14px 12px; flex-wrap: wrap; padding: 4px 2px 20px; }
.brakes .swatch { position: relative; width: 40px; height: 40px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), inset 0 2px 4px rgba(255, 255, 255, .35), inset 0 -3px 6px rgba(0, 0, 0, .35); }
.brakes .swatch[aria-checked="true"] { box-shadow: 0 0 0 3px var(--accent), inset 0 2px 4px rgba(255, 255, 255, .35), inset 0 -3px 6px rgba(0, 0, 0, .35); }
.brakes .swatch::after { content: attr(aria-label); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 5px; font: 700 .66rem var(--body); color: var(--muted); white-space: nowrap; }
.brakes .swatch.asis { background: linear-gradient(135deg, #3a3d44, #1c1d20) !important; }
.brake-note { margin: 0; font-size: .76rem; color: var(--muted); }
#mb-brake-btn b { display: inline-flex; align-items: center; gap: 6px; }

/* Big screens: the wheel picker row spreads as wide as the card under it (it stopped at 1100 px; kept at
   the end so it wins over the earlier wide-screen rule) */
@media (min-width: 1300px) {
  .stage-wrap:not(.sideways) > .dock, .hero > .dock { padding-left: max(48px, calc((100% - 1328px) / 2)); padding-right: max(48px, calc((100% - 1328px) / 2)); }
}

/* Dark phones: the scroll wheels' middle band shows on the dark menu too */
@media (prefers-color-scheme: dark) {
  .car-wheel-wrap::before { background: rgba(255, 255, 255, .09); }
}

/* Friends trial: no AI photos left, the button rests (greyed, no hover lift) */
.ai-cta:disabled { opacity: .55; cursor: default; transform: none; filter: grayscale(.6); }

/* No wheel on the photo yet (after Reset, or none found): only the controller's top row, so Find can look
   for the wheels again; Snap waits for a wheel */
.fix.nowheels .fx-pads, .fix.nowheels .fx-scale { display: none; }
.fix .fx-tool:disabled { opacity: .35; }

/* ---------- Angle: eight tilt arrows (owner, 2 Nov 2026) ----------
   The Angle pad is bigger than Move so eight arrows fit round the rim picture, each about a finger wide.
   Up / down tilt, left / right turn, the in-between ones do both at once (see tune() in js/app.js).
   Tap for one step, hold to repeat, as before. */
#fix.fix { --ajoy: clamp(132px, min(46vw, 100vw - var(--joy) - 72px), 196px); }   /* (on very narrow phones it gives way so Move still fits beside it) */
.stage-wrap.sideways > #fix { --ajoy: clamp(136px, calc(100svh - 190px), 176px); }   /* (sideways the panel is the screen's height: the pad gives way so nothing has to scroll) */
#joy-angle { --joy: var(--ajoy); --arr: clamp(36px, calc(var(--joy) * .25), 48px);
  --d: calc(var(--joy) / 2 - var(--arr) / 2 - 3px);     /* centre of the pad to the centre of a straight arrow */
  --dg: calc(var(--d) * .74); }                          /* the same for a diagonal, along each side (a touch out, clear of the knob) */
#joy-angle .joy-arr { border-radius: 50%; }
#joy-angle .joy-arr svg { width: 21px; height: 21px; }
#joy-angle .joy-arr.diag svg { width: 18px; height: 18px; }
#joy-angle .joy-arr.ul { left: calc(50% - var(--dg) - var(--arr) / 2); top: calc(50% - var(--dg) - var(--arr) / 2); }
#joy-angle .joy-arr.ur { left: calc(50% + var(--dg) - var(--arr) / 2); top: calc(50% - var(--dg) - var(--arr) / 2); }
#joy-angle .joy-arr.dl { left: calc(50% - var(--dg) - var(--arr) / 2); top: calc(50% + var(--dg) - var(--arr) / 2); }
#joy-angle .joy-arr.dr { left: calc(50% + var(--dg) - var(--arr) / 2); top: calc(50% + var(--dg) - var(--arr) / 2); }
#knob-angle { --k: calc(var(--joy) * .4); }
/* Rotate sits under the Angle pad, either side of Reset tilt (the top corners hold the diagonal arrows) */
.angle-box > .joy-rot { top: auto; bottom: 0; }   /* (on one line with Reset tilt: all three sit on the box's bottom edge) */
.angle-box > .joy-rot.l { left: 0; } .angle-box > .joy-rot.r { right: 0; }
.angle-box { grid-template-columns: var(--ajoy); }
.angle-cap { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.stage-wrap.sideways .angle-box { grid-template-columns: max(var(--ajoy), 180px); }   /* (sideways the pad is smaller but the panel has room for Reset tilt between the Rotate buttons) */
/* The glowing ring only spins while it shows: spinning unseen, its square box poked out of the sideways
   panel and gave it scroll bars that came and went. Nothing in that panel should scroll sideways. */
.joy:not(.live)::after, .sc-track::after { animation: none; }
.stage-wrap.sideways > #fix { overflow-x: hidden; }

/* Reset tilt, between the Rotate buttons under the Angle pad (owner, 2 Nov 2026). Greyed until the wheel's
   angle has been changed. */
.angle-reset { justify-self: center; align-self: end; min-width: 0; max-width: calc(100% - 86px); height: 40px; padding: 0 12px; border-radius: 999px; cursor: pointer; touch-action: none;
  color: var(--ink); font: 800 .74rem var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 92%, #fff), var(--surface-2));
  box-shadow: 0 4px 10px rgba(15, 18, 24, .16), inset 0 1px 0 rgba(255, 255, 255, .6); transition: transform .15s, color .15s, opacity .2s; }
.angle-reset:active:not(:disabled) { transform: scale(.93); color: var(--accent); }
.angle-reset:disabled { opacity: .45; cursor: default; box-shadow: none; }
.angle-reset:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* No orange corner brackets round the chosen wheel while adjusting (owner, 2 Nov 2026): the Left / Right /
   Both tabs say which wheel the controls move */
.handles svg.lock { display: none !important; }
/* Size under the Move pad, level with Reset tilt (owner, 2 Nov 2026: tidier, and the controller is a row
   shorter so the photo gets the room). The Move side takes the width the Angle pad leaves; its pad, Undo
   and Redo stay centred over the bar. */
.fx-pads { justify-content: space-between; align-items: stretch; }
.fx-pads > .move-box { flex: 1 1 0; min-width: 0; grid-template-rows: auto auto 1fr; }
.move-box > .joy-rot.l { left: calc(50% - var(--joy) / 2 - 8px); }
.move-box > .joy-rot.r { right: calc(50% - var(--joy) / 2 - 8px); }
.move-box > .fx-scale { align-self: end; justify-self: stretch; min-width: 0; gap: 0; padding: 2px; }
.move-box .sc-btn { width: 32px; height: 36px; }
.move-box .sc-btn svg { width: 21px; height: 21px; }
.move-box .sc-track { height: 36px; min-width: 0; }
/* (a slimmer handle so it still has room to slide in the shorter track) */
.move-box .sc-thumb { --tw: 44px; width: var(--tw); margin-left: calc(var(--tw) / -2); height: 32px; top: 2px; font-size: .7rem; }
.move-box .sc-ticks { inset: 12px 4px; }
@media (max-width: 359px) { .move-box .sc-btn { width: 28px; } .move-box .sc-thumb { --tw: 40px; font-size: .64rem; } }
/* Narrow phones (360 wide and the like): the top row's Done tick ran 13 px past the panel's edge (the
   narrower size set for phones lost to a later rule). Tools and the tick a few px narrower there. */
@media (max-width: 380px) { #fix .fx-top .fx-tool { width: 38px; } #fix .fx-top .fx-done { width: 46px; } }

/* ---------- My looks: one look at a time (owner, 2 Nov 2026) ----------
   A photo viewer that fills the screen: the photo as big as it fits, centred on a dark stage (the same in
   light and dark mode, like a phone's own photos), nothing over the wheels. Swipe left and right (the photo
   follows the finger); arrows only on wide screens, beside the photo. Under it: the look in one line, a strip
   of every look, and the buttons in one bar where a thumb reaches. */
.looks-dialog.viewing { inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border-radius: 0; overflow: hidden; background: #0b0c0f; }
.looks-dialog.viewing[open] { animation: none; }
.look-view { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; overflow: hidden; background: #0b0c0f; color: #f2f4f7; animation: lv-in .3s ease-out; }
@keyframes lv-in { from { opacity: 0; } }
.look-view[hidden] { display: none; }
.lv-top { display: flex; align-items: center; gap: 8px; padding: max(8px, env(safe-area-inset-top, 0px)) 10px 4px; }
.lv-back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px 0 8px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .1); color: #fff; font: 700 .88rem var(--body); }
.lv-back svg { width: 18px; height: 18px; }
.lv-count { flex: 1; text-align: center; color: rgba(255, 255, 255, .72); font: 700 .86rem var(--body); font-variant-numeric: tabular-nums; }
.lv-x { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.lv-x svg { width: 20px; height: 20px; }
/* (the stage is the photo's own shape, full width, so there are no dark bands above and below it on an
   upright phone; it gives way when the screen is short) */
.lv-stage { position: relative; flex: 0 1 auto; width: 100%; aspect-ratio: var(--lv-ar, 4 / 3); min-height: 120px; overflow: hidden; touch-action: none; outline: none; user-select: none; -webkit-user-select: none; }
/* (but never so tall that the look's line, the strip of looks and the buttons run off the bottom: on PCs and tablets
   held sideways the bar of Get a price, Try it, Share, Save and Delete was half under the edge; screen tester, 3 Nov 2026) */
.look-view:not(.full) .lv-stage { max-height: calc(100% - 290px); }
.lv-track { position: absolute; inset: 0; }
.lv-slide { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; }
.lv-slide[data-k="-1"] { transform: translateX(-100%); } .lv-slide[data-k="1"] { transform: translateX(100%); }
.lv-slide[hidden] { display: none; }
.lv-pic { position: relative; display: block; line-height: 0; }
.lv-pic img { display: block; max-width: var(--lv-w, 100vw); max-height: var(--lv-h, 60vh); width: auto; height: auto; -webkit-user-drag: none; }
.lv-pic img:not([src]) { visibility: hidden; }
.lv-pic .lv-ai { left: 10px; top: 10px; line-height: 1.3; }
/* (arrows: only on wide screens, in the space beside the photo) */
.lv-nav { position: absolute; top: 50%; z-index: 2; width: 46px; height: 46px; margin-top: -23px; display: none; place-items: center; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; }
.lv-nav svg { width: 22px; height: 22px; }
.lv-nav.prev { left: 12px; } .lv-nav.next { right: 12px; }
@media (min-width: 900px) and (hover: hover) {
  .lv-track { left: 72px; right: 72px; }
  .lv-nav:not([hidden]) { display: grid; }
  .lv-nav:hover { background: rgba(255, 255, 255, .16); }
}
/* The swipe hint: a hand slides across, twice, the first time only */
.lv-hand { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; justify-items: center; gap: 2px; margin: -34px 0 0 -26px; pointer-events: none;
  color: #fff; font: 800 .8rem var(--body); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); animation: lv-hand 1.5s ease-in-out 2 both; }
.lv-hand svg { width: 52px; height: 52px; }
.lv-hand[hidden] { display: none; }
@keyframes lv-hand { 0% { opacity: 0; transform: translateX(46px); } 15% { opacity: 1; } 70% { opacity: 1; transform: translateX(-46px); } 100% { opacity: 0; transform: translateX(-46px); } }
.lv-bottom { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px)); }
.lv-info { display: grid; gap: 2px; min-width: 0; }
.lv-info b { font: 800 1.15rem/1.2 var(--head); color: #fff; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-info span { color: rgba(255, 255, 255, .7); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Every look, under the one showing: as many rows as the screen has room for (it scrolls when there are more) */
.lv-strip { flex: 1 1 auto; min-height: 50px; display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); align-content: start; gap: 6px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 2px; margin: 0 -2px; }
.lv-strip::-webkit-scrollbar { display: none; }
.lv-strip:empty { display: none; }
.lv-th { width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 10px; background: #1d2026; opacity: .55; cursor: pointer; transition: opacity .2s, border-color .2s; }
.lv-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lv-th[aria-current="true"] { border-color: var(--accent); opacity: 1; }
.lv-bar { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.lv-act { min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 2px; border: 0; border-radius: 14px; cursor: pointer;
  background: rgba(255, 255, 255, .08); color: #fff; font: 700 .72rem var(--body); white-space: nowrap; transition: transform .15s, background .2s; }
.lv-act svg { width: 22px; height: 22px; }
.lv-act:active { transform: scale(.93); }
.lv-act[hidden] { display: none; }
.lv-act.primary { background: var(--accent); color: var(--accent-ink); }
.lv-act.lv-del { color: #fda4af; }
.lv-act:focus-visible, .lv-th:focus-visible, .lv-x:focus-visible, .lv-back:focus-visible, .lv-nav:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lv-stage:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }
/* Wide screens: the line, strip and buttons keep to a readable width under the photo */
@media (min-width: 760px) { .lv-bottom { width: min(720px, 100%); margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .look-view, .lv-hand { animation: none; } .lv-hand { display: none; } }

/* Full screen (tap the photo): the photo alone, filling the screen upright or sideways; a tap brings the
   top bar and the buttons in over it (on a soft shade) and tucks them away again. Zoomed in, it can be
   moved about. */
.lv-full-out, .lv-x .lv-out { display: none; }
.look-view.full #lv-full .lv-in { display: none; } .look-view.full #lv-full .lv-out { display: block; }
.look-view.full .lv-stage { flex: 1 1 auto; aspect-ratio: auto; }
.look-view.full .lv-top, .look-view.full .lv-bottom { position: absolute; left: 0; right: 0; z-index: 4; transition: opacity .2s, transform .2s, visibility 0s; }
.look-view.full .lv-top { top: 0; padding-bottom: 22px; background: linear-gradient(rgba(0, 0, 0, .62), transparent); }
.look-view.full .lv-bottom { bottom: 0; padding-top: 26px; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.look-view.full .lv-strip { display: none; }
.look-view.full:not(.chrome) .lv-top, .look-view.full:not(.chrome) .lv-bottom { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, transform .2s, visibility 0s .2s; }
.look-view.full:not(.chrome) .lv-top { transform: translateY(-10px); } .look-view.full:not(.chrome) .lv-bottom { transform: translateY(10px); }
@media (min-width: 760px) { .look-view.full .lv-bottom { width: auto; margin: 0; padding-left: max(12px, calc((100% - 720px) / 2)); padding-right: max(12px, calc((100% - 720px) / 2)); } }
.look-view.zoomed .lv-stage { cursor: grab; }
.look-view.zoomed .lv-nav { display: none; }
/* Messages over the gallery (Deleted, with Undo): above the look's button bar */
.looks-dialog > .toast { z-index: 10; }
.looks-dialog.viewing > .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* Before and after on a look (its car's own photo kept): the Before photo over the After one, shown to the
   right of the line as the slider moves left */
.lv-pic .lv-before { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: fill; pointer-events: none;
  clip-path: inset(0 0 0 var(--ba, 100%)); }
.lv-pic .lv-before:not([src]) { display: none; }
.lv-split { position: absolute; top: 0; bottom: 0; left: var(--ba, 100%); width: 2px; margin-left: -1px; display: none; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .55); pointer-events: none; }
.look-view.ba-on .lv-slide[data-k="0"] .lv-split { display: block; }
.lv-ba { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .72); font: 800 .72rem var(--body); text-transform: uppercase; letter-spacing: .05em; }
.lv-ba[hidden] { display: none; }
.lv-ba input { flex: 1; min-width: 0; height: 28px; accent-color: var(--accent); }
.lv-ba input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Compare two looks: the Compare button in the gallery's top line, the picked looks numbered, and the two
   looks together on the dark stage (one over the other upright, side by side sideways) */
.looks-cmp { align-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-left: auto; padding: 0 14px 0 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); color: var(--ink); font: 700 .84rem var(--body); cursor: pointer; }
.looks-cmp[hidden] { display: none; }
.looks-cmp svg { width: 18px; height: 18px; }
.looks-cmp[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.looks-cmp:not([hidden]) + .looks-x { margin-left: 0; }
.looks-cmp:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.looks-pick { margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); font-size: .84rem; font-weight: 600; }
.looks-pick[hidden] { display: none; }
.looks-dialog.picking .looks-note { display: none; }
.look-card.picked { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.look-card.picked::after { content: attr(data-pick); position: absolute; right: 7px; top: 7px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font: 800 .8rem var(--body); }
.look-cmp { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; overflow: hidden; background: #0b0c0f; color: #f2f4f7; }
.look-cmp[hidden] { display: none; }
.cmp-pair { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: 1fr 1fr; gap: 10px; padding: 6px 10px max(12px, env(safe-area-inset-bottom, 0px)); }
@media (orientation: landscape) { .cmp-pair { grid-template-rows: none; grid-template-columns: 1fr 1fr; } }
.cmp-fig { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.cmp-pic { position: relative; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; border-radius: 14px; overflow: hidden; background: #15171b; }
.cmp-pic img { width: 100%; height: 100%; object-fit: contain; }
.cmp-pic .lv-ai { left: 8px; top: 8px; }
.cmp-cap { display: grid; gap: 1px; min-width: 0; }
.cmp-cap b { font: 800 .98rem var(--head); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-cap span { color: rgba(255, 255, 255, .7); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-fig:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 14px; }

/* A look on a phone turned sideways: the photo on the left as tall as the screen, and the look's line, the
   Before slider, every look and the buttons in a column on the right (owner, 2 Nov 2026) */
@media (orientation: landscape) and (max-height: 560px) {
  .look-view:not(.full) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 34%); grid-template-rows: auto minmax(0, 1fr); }
  .look-view:not(.full) .lv-top { grid-column: 1 / -1; padding-top: max(6px, env(safe-area-inset-top, 0px)); }
  /* (width auto: with the notch's 47 px margin a 100% wide picture ran 47 px into the buttons' column and covered Get a price; screen tester) */
  .look-view:not(.full) .lv-stage { grid-column: 1; grid-row: 2; aspect-ratio: auto; width: auto; height: auto; min-height: 0; max-height: none; margin-left: env(safe-area-inset-left, 0px); }
  .look-view:not(.full) .lv-bottom { grid-column: 2; grid-row: 2; width: auto; margin: 0; overflow: hidden; gap: 8px;
    padding: 4px max(10px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) 10px; }
  .look-view:not(.full) .lv-strip { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
  .look-view:not(.full) .lv-act { min-height: 50px; font-size: .66rem; white-space: normal; line-height: 1.1; text-align: center; }   /* ("Get a price" on two lines in the narrow column) */
  .look-view:not(.full) .lv-act svg { width: 20px; height: 20px; }
}

/* ---------- Sideways in the 3D showroom: the car fills the screen (owner, 2 Nov 2026) ----------
   One line of rims along the bottom, each with its name (always there); everything else in a drawer on the
   right that the Options button opens and closes: the chosen rim and its name, Size / Tyres / Brakes /
   Filter / Paint, the car, the camera tabs, and Try these on my car. The photo screen sideways is as before. */
.drawer-btn, .side-hint, .dw-nm, .dn-pic { display: none; }
.dn-txt { display: contents; }
@media (orientation: landscape) and (max-height: 520px) {
  .stage-wrap.side3d { --side: 0px; --drawer: min(340px, 46vw); --rim-h: 96px; }
  .stage-wrap.side3d.drawer-open { --side: var(--drawer); }
  /* the drawer */
  .stage-wrap.side3d > .dock { width: var(--drawer); justify-content: flex-start; gap: 6px; z-index: 8; padding: 8px 12px max(8px, env(safe-area-inset-bottom, 0px));
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;   /* (very short screens: the drawer scrolls) */
    transform: translateX(100%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .8, .3, 1), visibility 0s .28s; }
  .stage-wrap.side3d.drawer-open > .dock { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .3, 1), visibility 0s; }
  .stage-wrap.side3d > .dock > .dock-head { display: contents; }
  .stage-wrap.side3d > .dock .dock-name { order: 1; flex: none; display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; font-size: .82rem; }
  .stage-wrap.side3d > .dock .dn-pic { display: block; flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
  .stage-wrap.side3d > .dock .dn-txt { display: grid; gap: 1px; min-width: 0; }
  .stage-wrap.side3d > .dock .dn-txt b { font: 800 1rem/1.15 var(--head); }
  .stage-wrap.side3d > .dock > .dock-bar { order: 2; flex: none; }
  /* (three menus to a row: Size, Tyres, Brakes / Filter, Paint) */
  .stage-wrap.side3d .menus { row-gap: 6px; column-gap: 6px; }
  .stage-wrap.side3d .menu-btn, .stage-wrap.side3d #mb-size-btn, .stage-wrap.side3d #mb-paint-btn { flex: 1 1 28%; min-height: 42px; padding: 3px 18px 3px 8px; }
  .stage-wrap.side3d > .dock > .dock-note { order: 3; }
  .stage-wrap.side3d > .dock .car-pill { order: 4; flex: none; align-self: stretch; width: auto; max-width: none; min-height: 40px; margin: 0; justify-content: center; }
  .stage-wrap.side3d > .dock > #views { order: 5; position: static; transform: none; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px; max-width: none; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .stage-wrap.side3d > .dock > #views { flex: none; }
  .stage-wrap.side3d > .dock > #views .chip { min-height: 30px; padding: 4px 10px; font-size: .82rem; }
  .stage-wrap.side3d > .dock > #views .look-switch button { min-height: 28px; }
  .stage-wrap.side3d > .dock > #views .look-switch { position: relative; left: auto; top: auto; z-index: auto; }
  .stage-wrap.side3d > .dock .try-cta { order: 6; flex: none; width: 100%; min-height: 40px; }
  .stage-wrap.side3d > .dock .hist { display: none; }
  /* the Options button: top right of the car (beside the drawer when it is open) */
  .stage-wrap.side3d > .drawer-btn { position: absolute; top: 12px; right: calc(var(--side) + 12px); z-index: 9; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px 0 12px;
    border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; cursor: pointer; color: #15171a; font: 800 .92rem var(--body);
    background: linear-gradient(140deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .72)); box-shadow: 0 6px 18px rgba(15, 18, 24, .16);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: right .28s cubic-bezier(.2, .8, .3, 1); }
  .stage-wrap.side3d > .drawer-btn svg { width: 20px; height: 20px; }
  .stage-wrap.side3d > .drawer-btn .db-close, .stage-wrap.side3d.drawer-open > .drawer-btn .db-open { display: none; }
  .stage-wrap.side3d.drawer-open > .drawer-btn .db-close { display: inline; }
  .stage-wrap.side3d > .drawer-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .stage-wrap.side3d > #corner-right { right: calc(var(--side) + 140px); }
  /* the rims: one line along the bottom, names under them, the chosen one marked */
  .stage-wrap.side3d > #dock-row { position: absolute; left: 0; right: var(--side); bottom: 0; z-index: 6; height: var(--rim-h); display: flex; flex-wrap: nowrap; align-items: flex-start;
    gap: 22px; max-width: none; margin: 0; padding: 10px 18px max(4px, env(safe-area-inset-bottom, 0px)); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
    background: linear-gradient(to top, rgba(255, 255, 255, .9), rgba(255, 255, 255, .55) 70%, transparent); }
  /* (each rim one button: the round picture with its name under it, both inside the button, so the name
     is part of what you tap and never spills out of it) */
  .stage-wrap.side3d > #dock-row { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .stage-wrap.side3d > #dock-row .dock-w { width: 78px; height: auto; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 2px 0 0; overflow: visible;
    border: 0; border-radius: 12px; background: none; box-shadow: none; transform: none; }
  .stage-wrap.side3d > #dock-row .dock-w img { width: 54px; height: 54px; flex: none; border: 2px solid rgba(20, 23, 28, .14); background: rgba(255, 255, 255, .5); transition: transform .2s; }
  .stage-wrap.side3d > #dock-row .dock-w[aria-pressed="true"] img { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(251, 127, 60, .35); transform: scale(1.06); }
  .stage-wrap.side3d > #dock-row .dw-nm { display: block; width: 100%; color: #15171a; font: 700 .66rem/1.15 var(--body); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
  .stage-wrap.side3d > #dock-row .dock-w[aria-pressed="true"] .dw-nm { color: var(--accent); font-weight: 800; }
  .stage-wrap.side3d > #dock-row .dw-fit { right: 10px; top: 40px; bottom: auto; }
  .stage-wrap.side3d > #dock-row .dock-w.has-ai::before { left: 8px; top: 0; }
  /* (things over the car keep clear of the rim line) */
  .stage-wrap.side3d > #burn-pill, .stage-wrap.side3d > .burn-btn { bottom: calc(var(--rim-h) + 10px); }
  /* the first-time hint */
  .stage-wrap.side3d > .side-hint:not([hidden]) { display: block; position: absolute; inset: 0; z-index: 12; background: rgba(10, 12, 16, .28); cursor: pointer; }
  .side-hint .sh-hand { position: absolute; left: 45%; top: 40%; width: 56px; height: 56px; opacity: 0; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); }
  .side-hint .sh-hand svg { width: 100%; height: 100%; }
  .side-hint.go .sh-hand { animation: sh-move 4.4s ease-in-out both; }
  .side-hint .sh-say { position: absolute; left: 50%; top: 34%; transform: translateX(-50%); margin: 0; padding: 9px 16px; border-radius: 999px; background: rgba(20, 23, 28, .88); color: #fff;
    font: 700 .92rem var(--body); white-space: nowrap; }
}
@keyframes sh-move {
  0% { left: 45%; top: 40%; opacity: 0; transform: none; }
  8% { opacity: 1; }
  30% { left: calc(100% - 96px); top: 26px; transform: none; }
  36% { left: calc(100% - 96px); top: 26px; transform: scale(.8); }
  42% { left: calc(100% - 96px); top: 26px; transform: none; }
  62% { left: 70%; top: calc(100% - 74px); }
  88% { left: 22%; top: calc(100% - 74px); opacity: 1; }
  100% { left: 22%; top: calc(100% - 74px); opacity: 0; }
}
@media (orientation: landscape) and (max-height: 520px) and (prefers-color-scheme: dark) {
  /* (the drawer dark too: on the light glass the rim's name was pale grey and hard to read) */
  .stage-wrap.side3d > .dock { background: linear-gradient(160deg, rgba(34, 37, 44, .94), rgba(22, 24, 29, .9)); border-left-color: rgba(255, 255, 255, .08); }
  .stage-wrap.side3d > #dock-row { background: linear-gradient(to top, rgba(14, 16, 20, .92), rgba(14, 16, 20, .55) 70%, transparent); }
  .stage-wrap.side3d > #dock-row .dw-nm { color: #e8ebef; }
  .stage-wrap.side3d > #dock-row .dock-w img { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); }
  .stage-wrap.side3d > .drawer-btn { color: #eef1f5; border-color: rgba(255, 255, 255, .14); background: linear-gradient(140deg, rgba(40, 44, 52, .9), rgba(24, 27, 32, .78)); }
}

/* ---------- The price box and the wheel's card on a phone turned sideways (owner, 2 Nov 2026) ----------
   (and on screens 860 to 1099 wide, where the card has two columns and the box is narrow): the price and
   the rim's picture share the first line (the picture smaller, to the right, never over the words), the
   payment, stock and fit lines take the full width under them, and Get a price and Share this look sit in
   one row. Before, a 220 px picture left the price's words a 66 px column, one word to a line. */
@media (orientation: landscape) and (max-height: 520px), (min-width: 860px) and (max-width: 1099px) {
  .buy:not(.public-buy) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 10px; }
  .buy:not(.public-buy) > * { order: 2; flex: 1 1 100%; min-width: 0; }
  .buy:not(.public-buy) > .price { order: 0; flex: 1 1 140px; width: auto; }
  .buy:not(.public-buy) > .buy-rim { order: 1; flex: none; width: clamp(96px, 14vw, 140px); max-width: none; }
  .buy:not(.public-buy) > .btn { order: 3; flex: 1 1 120px; width: auto; min-height: 52px; padding-left: 10px; padding-right: 10px; font-size: 1rem; line-height: 1.15; white-space: normal; }
}
/* (two columns: the name, sizes, info and tyres stay together at the top on the left instead of being
   spread down beside the tall price box) */
@media (min-width: 860px) and (max-width: 1099px) {
  .picked { grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr); grid-template-rows: auto auto auto 1fr; }
  .picked .buy { grid-row: 1 / span 4; }
  .picked > .tyre-pick { align-self: start; }
}

/* Easier to tap on a phone (an audit of tap sizes, 2 Nov 2026): the header's My looks and sound buttons keep
   their look but take a finger-sized touch area (44 px); the sizes table's rows (tap one to see that size)
   are taller */
.mute-btn { position: relative; }
.looks-btn::after, .mute-btn::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.upgrades tr[data-dia] td { padding-top: 11px; padding-bottom: 11px; }
@media (max-width: 420px) { .upgrades tr[data-dia] td { padding-top: 10px; padding-bottom: 10px; } }

/* The joystick arrows a touch darker (they were 42% of the text colour: hard to see outdoors, and under the
   3:1 a control should have against its pad) */
.joy-arr { color: color-mix(in srgb, var(--ink) 66%, transparent); }
/* The photo screen's buttons, stacked on a phone, are all one width (Take a photo, Choose a photo, Use my
   last photo and My looks were each as wide as their words, so the stack looked ragged) */
@media (max-width: 520px) { .pe-actions > .glass-btn, .glass-btn.pe-last, .glass-btn.pe-looks { width: min(250px, 100%); } }
/* Dark mode: the Angle pad's knob a mid grey, so a black rim shows on it as well as a silver one (on the
   near-black knob a gloss black rim almost vanished) */
@media (prefers-color-scheme: dark) {
  #knob-angle { background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .32), transparent 45%), linear-gradient(160deg, #545a64, #3a3f47); }
}
/* Move pad: the arrows' touch areas no longer reach under the knob (they overlapped it by about 4 px, so a
   tap at the knob's edge could land on either): round arrows a touch further out, the knob a touch smaller */
#joy-move .joy-arr { border-radius: 50%; }
#joy-move .joy-arr.up { top: 1px; } #joy-move .joy-arr.down { bottom: 1px; }
#joy-move .joy-arr.left { left: 1px; } #joy-move .joy-arr.right { right: 1px; }
#knob-move { --k: calc(var(--joy) * .38); }

/* The paint's finish switch (Crystal / Glossy) at the top of the Paint menu, on the cars that can go glossy */
.finish-seg { display: flex; gap: 6px; margin: 0 0 12px; }
.finish-seg[hidden] { display: none; }
.finish-seg .dock-size { flex: 1 1 0; }
/* The Try button's small line and arrow fully white and a touch bolder (they were 85-88% white on the
   orange: hard to read in sunlight; the orange itself, the owner's look, stays) */
.try-cta .tc-txt small { color: #fff; font-weight: 600; }
.try-cta .tc-arrow { color: #fff; }

/* ---------- Tablets sideways and computers (owner's drawing, 3 Nov 2026) ----------
   1. "Check fitment for your car" sits in the wheel card's empty space under Wheel details (a chosen car's
      details still show under the card); the card keeps room for it at the bottom of its left column.
   2. The menu line holds everything: Size, Tyres, Brakes, Filter, Paint, then Drive in and Mesh | Paint
      (moved from the camera bar by app.js), and at its end Try these on my car. The wheel's name
      stays under the rims.
   3. The car button sits over the car at its bottom right, above Try these on my car (Save picture and Full
      screen stay at the top right: owner's second drawing). */
@media (min-width: 860px) {
  .shop { display: grid; grid-template-columns: minmax(0, 1fr); --pk-col1: calc((100% - 68px) / 2); }
  .shop > * { grid-column: 1; min-width: 0; }
  .shop > .picked { grid-row: 1; }
  .shop > .picked::after { content: ""; grid-column: 1; height: 96px; }
  .shop > .car-pick { display: contents; }
  .shop > .car-pick > * { grid-column: 1; }
  .shop > .car-pick > .car-pick-lbl, .shop > .car-pick > .car-btn { grid-row: 1; align-self: end; justify-self: start; z-index: 1;
    width: var(--pk-col1); max-width: 460px; margin-left: 18px; }
  .shop > .car-pick > .car-pick-lbl { margin-top: 0; margin-bottom: 72px; }
  .shop > .car-pick > .car-btn { margin-top: 0; margin-bottom: 18px; }
  .shop > .car-pick > .car-btn:not([hidden]) { display: inline-flex; }
}
@media (min-width: 1100px) { .shop { --pk-col1: calc((100% - 100px) / 2.9); } }

@media (min-width: 1000px) {
  .stage-wrap:not(.sideways) > .dock, .hero > .dock { grid-template-columns: minmax(0, 1fr) auto auto; }
  .dock > .dock-bar { grid-column: 1; grid-row: 1; }
  .dock > .dock-head { display: contents; }
  .dock > .dock-head > .dock-name { grid-column: 1 / -1; order: 9; margin: 0 0 6px; max-width: none; }   /* (always last: under the rims, also after a photo) */
  /* (the car button over the car at its bottom right, just above Try these on my car: owner's drawing, iPad mini) */
  .stage-wrap:not(.sideways) > .dock > .dock-head > .car-pill { position: absolute; right: max(16px, calc((100% - 1100px) / 2)); bottom: calc(100% + 10px); max-width: 220px; margin: 0; z-index: 4; }
  .dock > .dock-head > .hist { grid-column: 2; grid-row: 1; margin: 0 0 8px; }
  .dock > .dock-head > .try-cta { grid-column: 3; grid-row: 1; align-self: center; margin: 0 0 8px; }
}
.dock-extras { display: flex; align-items: center; flex: none; gap: 2px; padding: 3px; border-radius: 14px; border: 1px solid rgba(20, 23, 28, .1);
  box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(15, 18, 24, .07); }
.dock-extras[hidden] { display: none; }
.dock-extras .chip { border: 0; background: none; color: #15171a; min-height: 34px; padding: 4px 12px; border-radius: 10px; font-weight: 600; }
.dock-extras .chip:hover { background: rgba(0, 0, 0, .06); }
.dock-extras .chip[hidden] { display: none; }
.dock-extras .drive-btn[aria-pressed="true"] { background: #15171a; color: #fff; }
.dock-extras .look-switch { position: relative; left: auto; top: auto; z-index: auto; padding: 2px; gap: 2px; border: 0; border-radius: 999px; background: rgba(20, 23, 28, .07);
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.dock-extras .look-switch button { min-height: 30px; padding: 0 10px; font-size: .8rem; }
@media (prefers-color-scheme: dark) {
  .dock-extras { border-color: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 8px rgba(0, 0, 0, .3); }
  .dock-extras .chip { color: var(--ink); }
  .dock-extras .chip:hover { background: rgba(255, 255, 255, .08); }
  .dock-extras .drive-btn[aria-pressed="true"] { background: #eef1f5; color: #14171c; }
  .dock-extras .look-switch { background: rgba(255, 255, 255, .08); }
}

/* ---------- A phone sideways: the drawer's handle (owner, 3 Nov 2026) ----------
   The Options button becomes a handle on the drawer's left edge, halfway down the car: tap it, or pull it left
   to open and push it right to close (app.js drawerHandle). The first time, a hand shows both (sideHint). */
.db-grip { display: none; }
@media (orientation: landscape) and (max-height: 520px) {
  .stage-wrap.side3d > .drawer-btn { top: calc((100% - var(--rim-h)) / 2); right: var(--side); transform: translateY(-50%); width: 30px; height: 96px; min-height: 0;
    padding: 0; flex-direction: column; justify-content: center; gap: 7px; border-right: 0; border-radius: 16px 0 0 16px; touch-action: none; cursor: grab;
    box-shadow: -4px 0 14px rgba(15, 18, 24, .14); }
  .stage-wrap.side3d > .drawer-btn::after { content: ""; position: absolute; inset: 0 0 0 -14px; }   /* (a bigger area to catch the finger) */
  .stage-wrap.side3d > .drawer-btn .db-grip { display: block; width: 4px; height: 16px; border-radius: 4px; background: currentColor; opacity: .3; }
  .stage-wrap.side3d > .drawer-btn .db-chev { width: 18px; height: 18px; transition: transform .28s cubic-bezier(.2, .8, .3, 1); }
  .stage-wrap.side3d.drawer-open > .drawer-btn .db-chev { transform: rotate(180deg); }
  .stage-wrap.side3d > .drawer-btn :is(.db-open, .db-close) { display: none; }
  .stage-wrap.side3d.drawer-dragging > :is(.dock, .drawer-btn) { transition: none !important; }
  .stage-wrap.side3d.drawer-dragging > .drawer-btn { cursor: grabbing; }
  .stage-wrap.side3d.hinting > :is(.dock, .drawer-btn) { transition-duration: 1.1s !important; }
  .stage-wrap.side3d > #corner-right { right: calc(var(--side) + 12px); }
  .stage-wrap.side3d > .side-hint .sh-say { left: calc((100% - var(--side)) / 2); transition: left 1.1s cubic-bezier(.2, .8, .3, 1); }
  .side-hint.go .sh-hand { animation: sh-pull 6.6s ease-in-out both; }
}
/* (the hand's fingertip is about 12 px in and 6 px down from its corner) */
@keyframes sh-pull {
  0% { left: 45%; top: 40%; opacity: 0; transform: none; }
  6% { opacity: 1; }
  14% { left: calc(100% - 27px); top: calc((100% - var(--rim-h)) / 2 - 6px); transform: none; }
  16% { left: calc(100% - 27px); top: calc((100% - var(--rim-h)) / 2 - 6px); transform: scale(.85); }
  32% { left: calc(100% - var(--drawer) - 27px); top: calc((100% - var(--rim-h)) / 2 - 6px); transform: scale(.85); }
  36% { left: calc(100% - var(--drawer) - 27px); top: calc((100% - var(--rim-h)) / 2 - 6px); transform: none; }
  46% { left: calc(100% - var(--drawer) - 27px); top: calc((100% - var(--rim-h)) / 2 - 6px); transform: scale(.85); }
  64% { left: calc(100% - 27px); top: calc((100% - var(--rim-h)) / 2 - 6px); transform: scale(.85); }
  67% { left: calc(100% - 27px); top: calc((100% - var(--rim-h)) / 2 - 6px); transform: none; }
  76% { left: 70%; top: calc(100% - 74px); }
  95% { left: 22%; top: calc(100% - 74px); opacity: 1; }
  100% { left: 22%; top: calc(100% - 74px); opacity: 0; }
}
@media (orientation: landscape) and (max-height: 520px) and (prefers-color-scheme: dark) {
  .stage-wrap.side3d > .drawer-btn { box-shadow: -4px 0 14px rgba(0, 0, 0, .4); }
}
/* (owner's third drawing, iPad mini: Drive in and Mesh | Paint right after the menus, and Save picture at the
   menu line's end, just before Try these on my car; Full screen stays at the top right) */
@media (min-width: 1000px) {
  .dock > .dock-bar > .menus { flex: 0 1 auto; }
  .dock > .dock-bar > #save-btn { margin-left: auto; flex: none; width: 42px; padding: 0; border: 1px solid rgba(20, 23, 28, .1);
    box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(15, 18, 24, .07); }
  .dock > .dock-bar > #save-btn .lbl { display: none; }
}
@media (min-width: 1000px) and (prefers-color-scheme: dark) {
  .dock > .dock-bar > #save-btn { border-color: rgba(255, 255, 255, .12); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
}
/* (owner's drawing, iPad mini upright: Drive in and Mesh | Paint and Save picture join the menu line on tablets
   upright too; Try these on my car stays its own wide button under the rims there) */
@media (min-width: 761px) {
  .dock > .dock-bar > .menus { flex: 0 1 auto; }
  .dock > .dock-bar > #save-btn { margin-left: auto; flex: none; width: 42px; padding: 0; border: 1px solid rgba(20, 23, 28, .1);
    box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(15, 18, 24, .07); }
  .dock > .dock-bar > #save-btn .lbl { display: none; }
}
@media (min-width: 761px) and (prefers-color-scheme: dark) {
  .dock > .dock-bar > #save-btn { border-color: rgba(255, 255, 255, .12); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
}
/* Spin pressed: dark like Drive in while it drives */
.stage-wrap > #views .spin-btn[aria-pressed="true"], .dock > #views .spin-btn[aria-pressed="true"] { background: #15171a; color: #fff; }
@media (prefers-color-scheme: dark) { .stage-wrap > #views .spin-btn[aria-pressed="true"], .dock > #views .spin-btn[aria-pressed="true"] { background: #eef1f5; color: #14171c; } }
/* (tablets upright: the car button in the menu line before Save, owner's drawing; the line's parts a little
   tighter there so the menus keep their room) */
@media (min-width: 761px) and (max-width: 999px) {
  .dock > .dock-bar { gap: 6px; }
  .dock > .dock-bar > .car-pill { flex: 0 1 auto; max-width: 120px; height: 42px; margin-left: auto; }
  .dock > .dock-bar > .car-pill ~ #save-btn { margin-left: 0; }
  .dock-extras .chip { padding: 4px 9px; }
  .dock-extras .look-switch button { padding: 0 8px; }
}
@media (min-width: 761px) and (max-width: 999px) {
  .dock > .dock-bar { max-width: none; }
  .dock > .dock-bar .menus { gap: 4px; }
  .dock > .dock-bar .menu-btn { padding: 3px 20px 3px 9px; }
  .dock > .dock-bar > .car-pill { padding: 0 24px 0 9px; }
}
/* ---------- The bars on tablets and computers, tidied (owner's drawing, 3 Nov 2026) ----------
   The menu line spreads evenly from edge to edge: the menus at the left, Save at the right, Drive in and Spin
   (and on tablets upright the car) evenly between. Mesh | Paint sits in the corner at the right on the camera
   bar's level, as a glass pill like the camera bar (wide screens: the car button beside it). Every button eases
   when pressed or pointed at, and glides to its new place when the line changes (app.js flipBar). */
.look-corner { display: none; }
@media (min-width: 761px) {
  .dock > .dock-bar { justify-content: space-between; }
  .dock > .dock-bar > #save-btn, .dock > .dock-bar > .car-pill, .dock > .dock-bar > .car-pill ~ #save-btn { margin-left: 0; }
  .stage-wrap:not(.sideways) > .look-corner:not([hidden]) { display: flex; align-items: center; gap: 8px; position: absolute; z-index: 4;
    right: 20px; bottom: calc(var(--dock-h, 0px) + 10px); }
  .look-corner > .look-switch { position: relative; left: auto; top: auto; z-index: auto; display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
    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), 0 6px 18px rgba(15, 18, 24, .12); }
  .look-corner > .look-switch button { min-height: 36px; padding: 0 14px; font-size: .88rem; }
  .look-corner > .look-switch[data-slide]::before { top: 3px; bottom: 3px; }
  .look-corner > .car-pill { position: static; height: 44px; max-width: 220px; margin: 0; }
  .dock-extras .spin-btn[aria-pressed="true"] { background: #15171a; color: #fff; }
}
@media (min-width: 1000px) { .stage-wrap:not(.sideways) > .look-corner:not([hidden]) { right: max(16px, calc((100% - 1100px) / 2)); } }
@media (min-width: 761px) and (prefers-color-scheme: dark) {
  .look-corner > .look-switch { background: linear-gradient(140deg, rgba(40, 44, 52, .78), rgba(24, 27, 32, .6)); border-color: rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12), 0 6px 18px rgba(0, 0, 0, .35); }
  .dock-extras .spin-btn[aria-pressed="true"] { background: #eef1f5; color: #14171c; }
}
/* (watery: a soft spring on press, a lift when pointed at) */
:is(.dock-bar .menu-btn, .dock-extras .chip, .dock-bar > .car-pill, .dock-bar > #save-btn, .look-corner > .car-pill, .look-corner .look-switch button, .stage-wrap > #views .chip) {
  transition: background-color .35s ease, color .3s ease, box-shadow .35s ease, transform .45s cubic-bezier(.3, 1.5, .45, 1); }
:is(.dock-bar .menu-btn, .dock-extras .chip, .dock-bar > .car-pill, .dock-bar > #save-btn, .look-corner > .car-pill, .look-corner .look-switch button, .stage-wrap > #views .chip):active {
  transform: scale(.93); transition-duration: .12s; }
@media (hover: hover) {
  :is(.dock-bar .menu-btn, .dock-extras .chip, .dock-bar > .car-pill, .dock-bar > #save-btn, .look-corner > .car-pill):hover { transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.dock-bar .menu-btn, .dock-extras .chip, .dock-bar > .car-pill, .dock-bar > #save-btn, .look-corner > .car-pill, .look-corner .look-switch button, .stage-wrap > #views .chip) { transition: none; }
}
/* (the corner on exactly the camera bar's level, as the bar moves: in its strip above the panel, or full screen) */
@media (min-width: 761px) {
  .stage-wrap:not(.photo-mode):not(.full):not(.sideways) > .look-corner { bottom: calc(var(--dock-h, 0px) + 3px); }
  .stage-wrap.full > .look-corner { bottom: calc(var(--dock-h, 0px) + 16px); }
}
/* ---------- The shop's promotion in the top bar (owner, 3 Nov 2026) ----------
   In the bar's empty middle, as wide as its words (never wider than the room): it floats in, a shine sweeps
   across every few seconds and a little spark twinkles; longer words scroll like a ticker, fading at the
   edges (app.js syncPromo / fitPromo). */
.promo { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.promo[hidden], .promo.tiny { display: none; }
.promo-pill { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: min(100%, 620px);
  padding: 6px 16px 6px 12px; border-radius: 999px; color: #b2400c; font: 700 .9rem/1.2 var(--body); letter-spacing: .01em;
  background: linear-gradient(135deg, rgba(255, 237, 213, .95), rgba(254, 215, 170, .75));
  box-shadow: inset 0 0 0 1px rgba(234, 88, 12, .22), 0 4px 14px rgba(234, 88, 12, .14); }
.promo-spark { flex: none; width: 14px; height: 14px; display: grid; place-items: center; }
.promo-spark::before { content: "\2726"; font-size: 14px; line-height: 1; color: #ea580c; animation: promo-twinkle 2.6s ease-in-out infinite; }
.promo-win { min-width: 0; overflow: hidden; white-space: nowrap; }
.promo-run { display: inline-flex; }
.promo.ticker .promo-pill { flex: 1 1 auto; }
.promo.ticker .promo-win { flex: 1 1 auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
.promo.ticker .promo-txt { padding-right: 48px; }
.promo.ticker .promo-run { animation: promo-tick var(--dur, 12s) linear infinite; }
.promo-pill:hover .promo-run { animation-play-state: paused; }
.promo-pill::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%); animation: promo-shine 5.5s ease-in-out 1.4s infinite; }
.promo.in .promo-pill { animation: promo-in .9s cubic-bezier(.2, .9, .25, 1.15) both; }
@keyframes promo-in { from { opacity: 0; transform: translateY(-10px) scale(.9); filter: blur(5px); } }
@keyframes promo-shine { 0% { transform: translateX(-130%); } 28%, 100% { transform: translateX(130%); } }
@keyframes promo-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.65) rotate(45deg); opacity: .6; } }
@keyframes promo-tick { to { transform: translateX(calc(-1 * var(--dist, 0px))); } }
@media (max-width: 520px) { .promo-pill { padding: 5px 12px 5px 9px; gap: 6px; font-size: .82rem; } }
@media (prefers-color-scheme: dark) {
  .promo-pill { color: #fdba74; background: linear-gradient(135deg, rgba(234, 88, 12, .22), rgba(251, 146, 60, .12));
    box-shadow: inset 0 0 0 1px rgba(251, 146, 60, .3), 0 4px 14px rgba(0, 0, 0, .3); }
  .promo-spark::before { color: #fb923c; }
  .promo-pill::after { background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); }
}
@media (prefers-reduced-motion: reduce) { .promo-pill, .promo-pill::after, .promo-spark::before, .promo-run { animation: none !important; } .promo-pill::after { display: none; } }
/* (the shop's name keeps its room; the promotion takes what is left, and scrolls there on phones. The name gives
   way only when the buttons would not fit: on a staff phone's photo screen the back arrow, My looks, Menu and
   "Staff 1 new" pushed the header, and the whole page with it, 60 px past the screen's edge) */
.top-inner > .brand { flex: 0 1 auto; max-width: 62%; }
/* (owner: the promotion covers all the empty space beside it: a full-width banner between the shop's name and
   the buttons; short words sit in its middle, long ones scroll across it) */
.promo-pill { flex: 1 1 auto; max-width: none; justify-content: center; }
/* (small phones: Spin made the camera bar 4 px wider than a 375 px screen; its buttons a touch narrower there) */
@media (max-width: 400px) {
  .stage-wrap > #views .chip { padding: 6px 7px; }
  .stage-wrap > #views .look-switch button { padding: 0 8px; }
}
/* (360 px phones: the photo tool labels one size smaller, so "Compare" fits its button) */
@media (max-width: 370px) { #photo-tools > .ptool .lbl, #photo-tools > :is(#save-btn, #full-btn) .lbl { font-size: .58rem; letter-spacing: -.02em; } }
/* (its room comes from the bar, never from its own words, so measuring it again can never loop) */
.promo { flex: 1 1 0; }
/* (the words keep their full length in one line, so a long promotion is seen to need the ticker) */
.promo-txt { flex: none; white-space: nowrap; }
/* (owner's drawings, iPad mini sideways: Burnout and Rev sit in the corner at the right, on the camera bar's
   level, left of the car button; Mesh | Paint sits in the menu line after the menus, with Drive in and Spin) */
.look-corner > #burn-pill { position: static; right: auto; bottom: auto; transform: none; }
.look-corner > #burn-pill[hidden], .look-corner > #burn-pill:not(:has(> :not([hidden]))) { display: none; }
.dock-extras > .look-switch { margin-right: 4px; }
/* (1000 to 1099 px, e.g. an iPad mini sideways: with Mesh | Paint in the line too, the menus a touch tighter, as on
   tablets upright, so a car with its own Paint menu still fits) */
@media (min-width: 1000px) and (max-width: 1099px) {
  .dock > .dock-bar .menus { gap: 4px; }
  .dock > .dock-bar .menu-btn { padding: 3px 20px 3px 9px; }
  .dock-extras .chip { padding: 4px 9px; }
  .dock-extras .look-switch button { padding: 0 8px; }
}
/* (owner: no gaps in the menu line on any screen: Size, Tyres, Brakes, Filter and Paint stretch to fill the room,
   then Mesh | Paint, Drive in and Spin at their own size; the car is in the corner on every tablet and computer) */
@media (min-width: 761px) {
  .dock > .dock-bar { justify-content: flex-start; gap: 8px; }
  .dock > .dock-bar > .menus { flex: 1 1 auto; }
  .dock > .dock-bar .menu-btn:not([hidden]) { flex: 1 1 auto; justify-content: space-between; }
  .dock > .dock-bar > .dock-extras { flex: none; }
}
/* (tablets upright: Burnout and Rev sit just above the car button, not beside it, so the corner never reaches the
   camera bar in the middle) */
@media (min-width: 761px) and (max-width: 999px) { .stage-wrap:not(.sideways) > .look-corner:not([hidden]) { flex-direction: column; align-items: flex-end; } }
/* ---------- The guided tour for shops (owner, 3 Nov 2026; app.js runTour) ----------
   A hand glides to each control and taps it, a dark line above says what it does, Skip at the top right. */
.tour { position: fixed; inset: 0; z-index: 400; pointer-events: none; opacity: 0; transition: opacity .4s; }
.tour.in { opacity: 1; }
.tour.out { opacity: 0; }
.tour-hand { position: fixed; left: 50%; top: 60%; width: 56px; height: 56px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
  transition: left .9s cubic-bezier(.45, .05, .25, 1), top .9s cubic-bezier(.45, .05, .25, 1), opacity .5s; }
.tour-hand svg { width: 100%; height: 100%; display: block; transform-origin: 46% 24%; }
.tour-hand::after { content: ""; position: absolute; left: 26px; top: 13px; width: 0; height: 0; border-radius: 50%; transform: translate(-50%, -50%);
  border: 3px solid rgba(251, 127, 60, .9); opacity: 0; }
.tour-hand.tap svg { animation: tour-press .5s ease; }
.tour-hand.tap::after { animation: tour-ring .7s ease-out; }
.tour-hand.gone { opacity: 0; }
@keyframes tour-press { 40% { transform: scale(.82); } }
@keyframes tour-ring { 0% { width: 0; height: 0; opacity: 1; } 100% { width: 64px; height: 64px; opacity: 0; } }
/* The tour's words: one dark panel (step count, progress, Pause, Skip, then the line), at the top or the bottom,
   whichever half the hand isn't in (owner, 3 Nov 2026: time to read each one) */
.tour-panel { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 62px); z-index: 2; transform: translateX(-50%); width: min(460px, calc(100vw - 24px));
  padding: 8px 10px 12px 16px; border-radius: 18px; background: rgba(20, 23, 28, .93); color: #fff; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); pointer-events: auto; }
.tour-panel.low { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
.tour-panel[hidden] { display: none; }
.tour-top { display: flex; align-items: center; gap: 8px; font: 700 .74rem var(--body); color: rgba(255, 255, 255, .72); white-space: nowrap; }
.tour-prog { flex: 1; height: 4px; min-width: 30px; border-radius: 4px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.tour-prog i { display: block; width: 0; height: 100%; border-radius: inherit; background: #fb7f3c; transition: width .5s ease; }
.tour-top button { min-height: 36px; padding: 0 13px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font: 700 .82rem var(--body); cursor: pointer; }
.tour-top button:hover { background: rgba(255, 255, 255, .22); }
.tour-top button:focus-visible { outline: 3px solid #fb7f3c; outline-offset: 2px; }
.tour-txt { margin: 4px 0 0; font: 700 1.02rem/1.3 var(--body); text-wrap: balance; }
.tour-panel.pop .tour-txt { animation: tour-say .45s cubic-bezier(.2, .9, .25, 1.1); }
@keyframes tour-say { from { opacity: 0; transform: translateY(6px); } }
.tour-hand { z-index: 3; }
/* What lands on the shop's phone: the alert drops in, then the request as Staff shows it */
.tour-shop { position: fixed; inset: 0; z-index: 1; display: grid; align-content: start; justify-items: center; gap: 12px; overflow: hidden;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px 0; background: rgba(10, 12, 16, .5); opacity: 0; transition: opacity .4s; }
.tour-shop.in { opacity: 1; }
.tour-alert { width: min(420px, 100%); display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px;
  background: rgba(250, 250, 252, .97); color: #15171a; box-shadow: 0 10px 28px rgba(0, 0, 0, .3); transform: translateY(-140%); animation: tour-drop .6s .2s cubic-bezier(.2, .9, .25, 1.1) forwards; }
.tour-alert img { width: 40px; height: 40px; border-radius: 10px; }
.tour-alert b { display: block; font-size: .92rem; }
.tour-alert span span { display: block; font-size: .84rem; color: #4b525c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-alert small { align-self: start; font-size: .74rem; color: #6b727c; }
@keyframes tour-drop { to { transform: none; } }
.tour-q { width: min(420px, 100%); overflow: hidden; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 14px 36px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(14px); animation: tour-up .5s 1.4s ease-out forwards; }
.tour-q img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tour-q > div { padding: 12px 14px 14px; }
.tour-q h3 { margin: 0; font-size: 1.1rem; }
.tour-q dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 10px; font-size: .88rem; }
.tour-q dt { color: var(--muted); }
.tour-q dd { margin: 0; }
/* The owner's tour: the shop's reply as text bubbles under the request */
.tour-reply { width: min(420px, 100%); display: grid; gap: 6px; opacity: 0; transition: opacity .4s; }
.tour-reply.in { opacity: 1; }
.tq-sms { margin: 0; max-width: 92%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--accent); color: #fff; font-size: .88rem; line-height: 1.35; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.tq-sms b { font-weight: 700; }
.tq-sms.in { justify-self: end; border-radius: 14px 14px 4px 14px; background: #fff; color: #15171a; }
.tq-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.tq-acts span { padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 10px; font-size: .84rem; font-weight: 600; }
.tq-acts span:first-child { background: var(--good); border-color: var(--good); color: var(--surface); }
.tq-note { margin: 8px 0 0; font-size: .76rem; color: var(--muted); }
@keyframes tour-up { to { opacity: 1; transform: none; } }
/* (sideways: the photo beside the details, so the card fits the short screen) */
@media (max-height: 520px) {
  .tour-shop { gap: 8px; padding-top: 8px; }
  .tour-q { width: min(620px, 100%); display: grid; grid-template-columns: 42% minmax(0, 1fr); }
  .tour-q img { height: 100%; aspect-ratio: auto; }
  .tour-q dl { margin: 4px 0 6px; }
}
/* The end: their turn, a demo of their own, or the tour again */
.tour-end { position: fixed; left: 50%; top: 50%; z-index: 4; width: min(380px, calc(100vw - 32px)); max-height: calc(100% - 24px); overflow: auto; transform: translate(-50%, -50%);
  padding: 22px; border-radius: 20px; background: var(--surface); color: var(--ink); text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); pointer-events: auto;
  animation: tour-in .4s cubic-bezier(.2, .9, .25, 1.1); }
.tour-end h2 { margin: 0 0 6px; font: 800 1.5rem var(--head); }
.tour-end p { margin: 0; color: var(--muted); }
.te-btns { display: grid; gap: 8px; margin-top: 16px; }
@keyframes tour-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .tour-alert, .tour-q, .tour-end, .tour-panel.pop .tour-txt { animation: none; transform: none; opacity: 1; } .tour-end { transform: translate(-50%, -50%); } }
/* ---------- The menu (owner, 3 Nov 2026; app.js openMenu) ----------
   The button at the top right, like My looks; the panel slides in from the right over a soft dark backdrop. */
/* (button.menu-open: the open menu also puts a menu-open class on the page itself, which must not take these) */
button.menu-open { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--line); border-radius: 13px; cursor: pointer;
  background: var(--surface); color: var(--ink); transition: transform .35s cubic-bezier(.3, 1.5, .45, 1), background-color .3s; }
button.menu-open svg { width: 22px; height: 22px; }
button.menu-open:active { transform: scale(.92); }
button.menu-open:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.menu-dialog { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(360px, 88vw); max-width: none; height: 100%; max-height: none; padding: 0;
  border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--ink); display: flex; flex-direction: column;
  box-shadow: -18px 0 40px rgba(15, 18, 24, .18); animation: md-in .32s cubic-bezier(.2, .9, .25, 1) both; }
.menu-dialog:not([open]) { display: none; }
/* (the menu scrolls on its own; the page behind it never moves while it is open) */
.menu-dialog { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html.menu-open, html.menu-open body { overflow: hidden; overscroll-behavior: none; }
.menu-dialog.closing { animation: md-out .22s ease-in both; }
.menu-dialog::backdrop { background: rgba(10, 12, 16, .35); backdrop-filter: blur(2px); animation: md-fade .3s both; }
.menu-dialog.closing::backdrop { animation: md-fade .22s reverse both; }
@keyframes md-in { from { transform: translateX(100%); } }
@keyframes md-out { to { transform: translateX(100%); } }
@keyframes md-fade { from { opacity: 0; } }
.md-head { display: flex; align-items: center; justify-content: space-between; padding: max(14px, env(safe-area-inset-top, 0px)) 16px 10px 20px; border-bottom: 1px solid var(--line); }
.md-title { margin: 0; font: 800 1.2rem var(--head); }
.md-close { width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--surface-2, #eceef2); color: var(--ink); font-size: 1rem; cursor: pointer; }
.md-list { display: grid; gap: 4px; padding: 12px; }
.md-item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px 12px; border: 0; border-radius: 14px; background: none; color: inherit;
  text-align: left; text-decoration: none; font: inherit; cursor: pointer; transition: background-color .25s, transform .35s cubic-bezier(.3, 1.5, .45, 1);
  animation: md-item .4s cubic-bezier(.2, .9, .25, 1.1) both; }
.md-item:nth-child(2) { animation-delay: .04s; } .md-item:nth-child(3) { animation-delay: .08s; } .md-item:nth-child(4) { animation-delay: .12s; }
.md-item:nth-child(5) { animation-delay: .16s; } .md-item:nth-child(6) { animation-delay: .2s; } .md-item:nth-child(7) { animation-delay: .24s; }
@keyframes md-item { from { opacity: 0; transform: translateX(18px); } }
.md-item:hover { background: var(--surface-2, #eceef2); }
.md-item:active { transform: scale(.98); }
.md-item:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.md-item svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--accent-soft, #fde9dd); color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.md-item span { display: grid; gap: 2px; min-width: 0; }
.md-item b { font-weight: 700; }
.md-item small { color: var(--muted); font-size: .84rem; }
.md-credits { margin: 4px 12px; padding: 0 12px; border-top: 1px solid var(--line); }
.md-credits summary { cursor: pointer; padding: 14px 0; font-weight: 700; color: var(--muted); }
.md-credits ul { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 8px; color: var(--muted); font-size: .84rem; line-height: 1.4; }
.md-foot { margin: auto 0 0; padding: 14px 20px max(14px, env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: .8rem; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .menu-dialog, .menu-dialog::backdrop, .md-item { animation: none !important; } }
/* ---------- The add-a-photo screen (owner, 3 Nov 2026: make it better) ----------
   A real example in place of the drawing: a phone photo and the same photo with new wheels, the line sweeping
   across by itself; the notes cut to a line each, a padlock on the privacy line. Computers: the example big on the
   left (photos can be dropped anywhere on the screen), the words and buttons on the right. */
.photo-empty .pe-guide { display: none; }
.pe-example { position: relative; margin: 0 0 4px; width: min(440px, 94%); aspect-ratio: 12 / 5; border-radius: 16px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(15, 18, 24, .2), 0 0 0 1px rgba(255, 255, 255, .5); background: #d9dde3; }
.pe-example img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pe-ex-before { clip-path: inset(0 35% 0 0); animation: pe-sweep 7s ease-in-out infinite; }
.pe-ex-line { position: absolute; top: 0; bottom: 0; left: 65%; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .45);
  animation: pe-line 7s ease-in-out infinite; }
.pe-ex-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.pe-ex-tag { position: absolute; top: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(15, 17, 21, .68); color: #fff; font: 700 .72rem var(--body); }
.pe-ex-tag.b { left: 8px; } .pe-ex-tag.a { right: 8px; background: rgba(194, 65, 12, .88); }
@keyframes pe-sweep { 0%, 12% { clip-path: inset(0 35% 0 0); } 45%, 62% { clip-path: inset(0 80% 0 0); } 92%, 100% { clip-path: inset(0 35% 0 0); } }
@keyframes pe-line { 0%, 12% { left: 65%; } 45%, 62% { left: 20%; } 92%, 100% { left: 65%; } }
.photo-empty .pe-privacy svg { display: inline-block; width: 14px; height: 14px; margin: 0 2px -2px 0; fill: none; stroke: currentColor; stroke-width: 2; color: var(--muted); }
.pe-privacy { max-width: 46ch; }
@media (prefers-reduced-motion: reduce) { .pe-ex-before, .pe-ex-line { animation: none; } }
@media (min-width: 1000px) {
  .photo-empty { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr); column-gap: 56px; row-gap: 10px; align-content: center; justify-items: start;
    text-align: left; padding-left: max(40px, calc((100% - 1120px) / 2)); padding-right: max(40px, calc((100% - 1120px) / 2)); }
  .photo-empty > * { grid-column: 2; }
  .photo-empty > .pe-example { grid-column: 1; grid-row: 1 / span 30; align-self: center; width: 100%; margin: 0; border-radius: 22px; }
  .photo-empty > .pe-example .pe-ex-tag { top: 14px; font-size: .85rem; padding: 4px 12px; } .photo-empty > .pe-example .pe-ex-tag.b { left: 14px; } .photo-empty > .pe-example .pe-ex-tag.a { right: 14px; }
  .photo-empty .pe-title { font-size: 1.95rem; line-height: 1.12; text-wrap: balance; }
  .photo-empty .pe-tips, .photo-empty .pe-actions { justify-content: flex-start; }
  .photo-empty .pe-car-note, .photo-empty .pe-privacy, .photo-empty .pe-drop { text-align: left; }
}
.md-credits a { color: var(--accent); font-weight: 600; }
/* (360 px phones: the camera bar a little tighter again, so Front to Paint fit the screen) */
@media (max-width: 370px) { .stage-wrap > #views .chip { padding: 6px 5px; font-size: .8rem; } .stage-wrap > #views .look-switch button { padding: 0 6px; font-size: .74rem; } .stage-wrap > #views { gap: 0; } }
/* ---------- First-time hands (owner, 3 Nov 2026: hands that show what to tap, not text tips) ----------
   A soft spotlight round the button (the rest of the screen a little darker), a white hand that taps,
   holds or swipes there, a few words beside it, and Skip. A tap anywhere goes on. */
.coach { position: fixed; inset: 0; z-index: 1000; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.coach-spot { position: fixed; border-radius: 16px; box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px rgba(10, 12, 16, .45); pointer-events: none;
  transition: left .35s cubic-bezier(.2, .8, .3, 1), top .35s cubic-bezier(.2, .8, .3, 1), width .35s, height .35s; }
.coach-hand { position: fixed; left: 0; top: 0; width: 56px; height: 56px; pointer-events: none; transform-origin: 26px 10px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45)); }
.coach-hand svg { width: 100%; height: 100%; }
.coach-hand.holding::before { content: ""; position: absolute; left: 26px; top: 10px; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  border: 3px solid #fff; opacity: 0; animation: coach-hold 1.2s ease-out .5s infinite; }
@keyframes coach-hold { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }
.coach-say { position: fixed; width: max-content; max-width: min(300px, calc(100vw - 32px)); margin: 0; padding: 10px 16px; border-radius: 14px; pointer-events: none; text-align: center;
  background: #fff; color: #14171c; font: 700 .95rem/1.3 var(--body); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.coach-skip { position: fixed; right: 14px; bottom: max(16px, env(safe-area-inset-bottom, 0px)); min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: #14171c; font: 700 .9rem var(--body); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.coach-skip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .coach-spot { transition: none; } .coach-hand.holding::before { animation: none; } }
/* The size and tyre dials in their menus only move sideways: no dragging them up and down or bouncing on
   an iPhone (the picked size, drawn bigger, made the size dial 2 px taller than its box, so it could be
   dragged up and down). The rim line can't shift up and down either; a swipe on it can still scroll the page. */
.size-dial, .tyre-wheel { overflow-y: hidden; overscroll-behavior: contain; touch-action: pan-x; }
.dock-row { overflow-y: hidden; }

/* The lock-on rings' layer covers the photo, so it can zoom with it (js: zoomMagic) */
.ai-rings { position: absolute; inset: 0; pointer-events: none; }
/* ---------- The photo screen tidied and the menu filled (owner's drawings, 3 Nov 2026) ----------
   Back to the 3D showroom is an arrow in the header (left of the logo) instead of a pill over the photo; the
   "Trying ..." line and the "Any car works / Choose my car" note are gone from the add-a-photo screen (the
   wheel card has Check fitment for your car). The menu has a Settings heading and on / off switches. */
.hdr-back { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; margin-right: -4px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--surface); color: var(--ink); cursor: pointer; transition: transform .35s cubic-bezier(.3, 1.5, .45, 1), background-color .25s; animation: hb-in .35s cubic-bezier(.2, .9, .25, 1.1); }
.hdr-back[hidden] { display: none; }
.hdr-back svg { width: 22px; height: 22px; }
.hdr-back:hover { background: var(--surface-2, #eceef2); }
.hdr-back:active { transform: scale(.92); }
.hdr-back:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@keyframes hb-in { from { opacity: 0; transform: translateX(-8px); } }
#to3d-corner { display: none !important; }
.photo-empty .pe-trying, .photo-empty #pe-car-note { display: none !important; }
.md-head2 { margin: 10px 12px 2px; color: var(--muted); font: 700 .74rem var(--body); letter-spacing: .08em; text-transform: uppercase; }
.md-toggle { position: relative; padding-right: 64px; }
.md-switch { position: absolute; right: 14px; top: 50%; width: 44px; height: 26px; margin-top: -13px; border-radius: 999px; background: var(--line); transition: background-color .25s; }
.md-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .3s cubic-bezier(.3, 1.5, .45, 1); }
.md-toggle[aria-checked="true"] .md-switch { background: #16a34a; }
.md-toggle[aria-checked="true"] .md-switch::after { transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) { .hdr-back { animation: none; } .md-switch, .md-switch::after { transition: none; } }
/* (the header keeps the logo and name at the left next to the back arrow, the buttons at the right; and the
   add-a-photo screen no longer keeps room at its top for the old pill) */
.top-inner { justify-content: flex-start; }
.top-inner > .top-actions { margin-left: auto; }
.stage-wrap.photo-mode .photo-empty { padding-top: 28px; }
/* ---------- Camera buttons like the Save / Full screen pill (owner, 3 Nov 2026; the water drops were tried and
   dropped) ----------
   The frosted glass bar holds white frosted buttons, each with a bright edge and a soft shadow, exactly like Save
   and Full screen at the top right; the one that is on is dark (Mesh in its line colour). Also in the menu line on
   tablets and computers. */
.stage-wrap > #views { gap: 3px; }
.stage-wrap > #views .look-switch, .dock-extras .look-switch { background: none !important; gap: 3px; padding: 0; }
.look-switch[data-slide]::before { display: none; }
:is(.stage-wrap > #views .chip, .stage-wrap > #views .look-switch button, .dock > #views .chip, .dock > #views .look-switch button, .dock-extras .chip, .dock-extras .look-switch button) {
  border-radius: 999px !important; color: #15171a;
  background: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .72)) !important; border: 1px solid rgba(255, 255, 255, .85) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), 0 2px 7px rgba(15, 18, 24, .13) !important; }
/* (button.chip: stronger than the white look above, which counts as id + 2 classes + 1 tag; Spin turned on and Drive in
   while driving showed white words on white, a blank button; owner's iPhone, 4 Nov 2026) */
:is(#views, .dock-extras) button.chip:is(.drive-btn, .spin-btn)[aria-pressed="true"], :is(#views, .dock-extras) #look-paint[aria-pressed="true"] {
  color: #fff; background: #15171a !important; border-color: #15171a !important; }
:is(#views, .dock-extras) #look-mesh[aria-pressed="true"] { color: #fff; background: var(--mesh, #4a8ff5) !important; border-color: var(--mesh, #4a8ff5) !important; }
@media (prefers-color-scheme: dark) {
  :is(.stage-wrap > #views .chip, .stage-wrap > #views .look-switch button, .dock > #views .chip, .dock > #views .look-switch button, .dock-extras .chip, .dock-extras .look-switch button) {
    color: var(--ink); background: linear-gradient(140deg, rgba(58, 63, 74, .92), rgba(34, 38, 45, .8)) !important; border-color: rgba(255, 255, 255, .16) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12), 0 2px 7px rgba(0, 0, 0, .35) !important; }
  :is(#views, .dock-extras) button.chip:is(.drive-btn, .spin-btn)[aria-pressed="true"], :is(#views, .dock-extras) #look-paint[aria-pressed="true"] { color: #14171c; background: #eef1f5 !important; border-color: #eef1f5 !important; }
}
/* (phones: the white buttons a little tighter so the whole bar fits the screen) */
@media (max-width: 520px) {
  .stage-wrap > #views { gap: 2px; padding: 2px; }
  .stage-wrap > #views .look-switch { gap: 2px; }
  :is(.stage-wrap > #views .chip, .stage-wrap > #views .look-switch button) { padding: 5px 9px; min-height: 34px; font-size: .86rem; }
}
@media (max-width: 400px) { :is(.stage-wrap > #views .chip, .stage-wrap > #views .look-switch button) { padding: 5px 7px; font-size: .8rem; } }
@media (max-width: 370px) { :is(.stage-wrap > #views .chip, .stage-wrap > #views .look-switch button) { padding: 5px 5px; font-size: .76rem; } }
/* ---------- The price box in the same frosted style (owner, 3 Nov 2026: one theme everywhere) ----------
   Get a price for these and Share this look are round-ended frosted buttons with a bright edge and a soft shadow
   (Get a price keeps the shop's orange under the glass), and the Afterpay / Zip / Finance and In stock tags are
   small frosted pills, like Save and Full screen and the camera buttons. */
.buy .btn { border-radius: 999px; }
.buy .btn:not(.primary) { color: #15171a; background: linear-gradient(140deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .76)); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), 0 3px 10px rgba(15, 18, 24, .12); }
.buy .btn.primary { border: 1px solid rgba(255, 255, 255, .35); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent) 45%, color-mix(in srgb, var(--accent) 85%, #000));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); }
.buy .btn { transition: transform .35s cubic-bezier(.3, 1.5, .45, 1), box-shadow .3s; }
.buy .btn:active { transform: scale(.96); }
.buy :is(.pay-pill, .badge) { border-radius: 999px; border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), 0 2px 6px rgba(15, 18, 24, .1); }
.buy .pay-pill { background: linear-gradient(140deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .74)); }
@media (prefers-color-scheme: dark) {
  .buy .btn:not(.primary) { color: var(--ink); background: linear-gradient(140deg, rgba(58, 63, 74, .95), rgba(34, 38, 45, .85)); border-color: rgba(255, 255, 255, .16);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12), 0 3px 10px rgba(0, 0, 0, .35); }
  .buy :is(.pay-pill, .badge) { border-color: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1), 0 2px 6px rgba(0, 0, 0, .3); }
  .buy .pay-pill { background: linear-gradient(140deg, rgba(58, 63, 74, .95), rgba(34, 38, 45, .85)); }
}
@media (prefers-reduced-motion: reduce) { .buy .btn { transition: none; } }
/* ---------- Mesh | Paint as one toggle (owner, 3 Nov 2026) ----------
   One frosted track like the other buttons, with a thumb that slides to the chosen side: Mesh in its line colour,
   Paint dark (app.js syncLookButtons places the thumb and gives its colour). The words sit on top. */
:is(.stage-wrap > #views, .dock > #views, .dock-extras) .look-switch { position: relative; display: inline-flex; gap: 0 !important; padding: 2px !important; border-radius: 999px;
  background: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .72)) !important; border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), 0 2px 7px rgba(15, 18, 24, .13); }
:is(.stage-wrap > #views, .dock > #views, .dock-extras) .look-switch[data-slide]::before { display: block; top: 2px; bottom: 2px; box-shadow: 0 1px 5px rgba(0, 0, 0, .28); }
:is(.stage-wrap > #views, .dock > #views, .dock-extras) .look-switch button,
:is(.stage-wrap > #views, .dock > #views, .dock-extras) .look-switch :is(#look-mesh, #look-paint)[aria-pressed] {
  position: relative; z-index: 1; background: none !important; border: 1px solid transparent !important; box-shadow: none !important; color: #15171a; transition: color .25s; }
:is(.stage-wrap > #views, .dock > #views, .dock-extras) .look-switch :is(#look-mesh, #look-paint)[aria-pressed="true"] { color: #fff; }
@media (prefers-color-scheme: dark) {
  :is(.stage-wrap > #views, .dock > #views, .dock-extras) .look-switch { background: linear-gradient(140deg, rgba(58, 63, 74, .92), rgba(34, 38, 45, .8)) !important; border-color: rgba(255, 255, 255, .16);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12), 0 2px 7px rgba(0, 0, 0, .35); }
  :is(.stage-wrap > #views, .dock > #views, .dock-extras) .look-switch button { color: var(--ink); }
  :is(.stage-wrap > #views, .dock > #views, .dock-extras) .look-switch #look-paint[aria-pressed="true"] { color: #14171c; }
}
/* (owner, 3 Nov 2026: in full screen on a photo the close button hid under Keep: Keep steps left of it, centres
   level. Sideways the ✕ covered the side panel's Colour button: there both sit at the photo's own top-right) */
/* (the Save / Full pill too: in 3D full screen it sat under the notch) */
.stage-wrap.full > #corner-right { top: calc(12px + env(safe-area-inset-top, 0px)); }
.stage-wrap.full > .keep-btn { top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(max(12px, env(safe-area-inset-right, 0px)) + 52px); }
.stage-wrap.full.sideways > .full-close { right: calc(var(--side) + 12px); }
.stage-wrap.full.sideways > .keep-btn { right: calc(var(--side) + 64px); }
/* (3 Nov 2026: in the showroom's full screen the Save/Full pill's own button is the ✕: the round one sat on top of it) */
.stage-wrap.full:has(> #corner-right:not([hidden]) #full-btn) > .full-close { display: none; }
/* (3 Nov 2026: full screen hid the price box; its price and "Get a price" now sit in the top-left corner there,
   in the same frosted style as Keep; sideways the photo's own top-left) */
.full-price { display: none; }
/* (a phone turned sideways too, in the showroom and on a photo: the car and the side panel fill the screen and the
   price box is off below them; not while adjusting the wheels. The sideways class is only ever set on a phone) */
.stage-wrap.full > .full-price:not([hidden]), body:not(.fixing) .stage-wrap.sideways > .full-price:not([hidden]) { display: inline-flex; position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); z-index: 5; height: 40px; padding: 0 14px 0 11px; gap: 8px; }
.full-price svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.full-price > span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; text-align: left; }
.full-price b { font-size: .98rem; }
.full-price small { font-size: .7rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
/* (3 Nov 2026: the ✕ faded 2.5 s after each tap, still catching taps, while Keep and the price stay: now it stays in sight too) */
.stage-wrap.full > .full-close { opacity: 1; }
/* 3D full screen on a small phone turned sideways (iPhone SE 667x375, Android 800x360): the side panel stays, so
   the camera row has under 400 px; it tightens as on a 370 px phone ("Front" ran off the left; screen tester, 3 Nov) */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 820px) {
  .stage-wrap.sideways.full > #views { gap: 0; padding: 2px; }
  .stage-wrap.sideways.full > #views .chip { padding: 6px 6px; font-size: .8rem; }
  .stage-wrap.sideways.full > #views .look-switch button { padding: 0 7px; font-size: .76rem; }
}
/* Adjusting the wheels on a small phone turned sideways (iPhone SE 667x375): the controller needs about 344 px, the
   side panel had 293, so Done and the Move pad's right arrow ran off the edge. While adjusting, the panel takes the
   room it needs and the photo beside it gets a little smaller (all of it still in view). Screen tester, 3 Nov 2026 */
@media (orientation: landscape) and (max-height: 520px) {
  body.fixing .stage-wrap.sideways { --side: max(min(360px, 44vw), calc(336px + max(12px, env(safe-area-inset-right, 0px)))); }
}
/* A phone held sideways with a notch (iPhone Home Screen app, and a Safari tab: 47 px at each side, 21 px at the
   bottom): the side panel, the drawer, the Adjust panel, the camera row, the rims line, the gallery and the tips'
   Skip keep clear of the strips (screen tester, 3 Nov 2026). With no strips these are the sizes they always had. */
@media (orientation: landscape) and (max-height: 520px) {
  .stage-wrap.sideways > .dock, .stage-wrap.sideways > .fix { padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .stage-wrap.sideways > #views { left: calc((100% - var(--side) + env(safe-area-inset-left, 0px)) / 2); bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100% - var(--side) - 20px - env(safe-area-inset-left, 0px)); }
  .stage-wrap.side3d > #dock-row { padding-left: max(18px, env(safe-area-inset-left, 0px)); }
}
.lv-top { padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
.lv-bottom { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
.coach-skip { right: max(14px, env(safe-area-inset-right, 0px)); }
/* The shop demo: Pause and Skip a finger tall (screen tester: 36 px); sideways on a short phone the words stand at the
   left, vertically centred, and the alert and request card take the rest, so the words no longer cover "A demo:
   nothing was sent." under the card (667x375) */
.tour-top button { min-height: 40px; }
@media (orientation: landscape) and (max-height: 520px) {
  .tour:has(.tour-shop) .tour-panel { left: max(12px, env(safe-area-inset-left, 0px)); top: 50%; bottom: auto; transform: translateY(-50%); width: min(300px, 38vw); }
  .tour:has(.tour-shop) .tour-shop { padding-left: min(330px, 42vw); }
}
@media (orientation: landscape) and (max-height: 420px) {
  .tour-shop { gap: 6px; padding-top: 6px; }
  .tour-alert { padding: 6px 10px; }
  .tour-q > div { padding: 8px 12px 8px; }
  .tour-q h3 { font-size: 1rem; }
  .tour-q dl { font-size: .8rem; gap: 2px 10px; margin: 4px 0 4px; }
  .tq-acts { display: none; }
  .tq-note { margin: 2px 0 0; }
}
/* The price and "Get a price" on the car on upright phones and tablets too, on a photo only (owner, 4 Nov 2026: not in
   the showroom, where the price can scare people at the start; the price box sits below the first screen). Top left of the car, level with Keep and Save / Full; compact; hidden
   while adjusting the wheels. On computers the price box is beside the car. */
@media (max-width: 899px) {
  body:not(.fixing) .stage-wrap.photo-mode:not(.full):not(.sideways) > .full-price:not([hidden]) { display: inline-flex; position: absolute; top: 10px; left: max(12px, env(safe-area-inset-left, 0px)); z-index: 5; height: 40px; padding: 0 14px 0 11px; gap: 8px; }
}
/* (not before there is a photo: on the add-a-photo screen it sat over the example picture's corner; the price box is below) */
.stage-wrap.photo-mode:not(.photo-fit) > .full-price { display: none !important; }

/* Shortlist cards (owner, 3 Nov 2026): price, fit, promotion and payments on each kept look, and one button to ask the
   shop about the lot */
.lc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.lc-chip { display: block; max-width: 100%; padding: 2px 7px; border-radius: 999px; font: 700 .66rem/1.3 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-chip.good { background: var(--good-soft); color: var(--good); }
.lc-chip.warn { background: var(--warn-soft); color: var(--warn); }
.lc-chip.bad { background: var(--bad-soft); color: var(--bad); }
.lc-chip.promo { background: var(--accent-soft); color: var(--accent); }
.lc-txt .lc-pay { margin-top: 3px; font-size: .66rem; line-height: 1.25; }
.looks-ask { position: sticky; bottom: 0; z-index: 1; margin: 12px -16px -16px; padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, var(--surface) 28%); }
.looks-ask[hidden], .looks-dialog.viewing .looks-ask, .looks-dialog.picking .looks-ask { display: none; }
.looks-ask .btn { width: 100%; min-height: 50px; }
/* (tablet and wide phone: the wheel's name and line are shorter than the Check fitment button beside them, so Wheel
   details started 10 px up inside it; screen tester, iPhone SE sideways and iPad mini upright) */
@media (min-width: 600px) and (max-width: 859px) { .picked > .pk-head { min-height: 82px; } }
/* (a short sideways phone: the Ask the shop bar sits after the cards instead of floating over them) */
@media (orientation: landscape) and (max-height: 520px) { .looks-ask { position: static; margin-top: 8px; padding-top: 4px; background: none; } .looks-ask .btn { min-height: 44px; } }
/* What happens next, on the request-sent screen */
.q-next { margin: 4px 0 10px; padding-left: 22px; display: grid; gap: 4px; font-size: .95rem; }
.q-next li::marker { color: var(--accent); font-weight: 800; }
/* Staff request cards on a phone: the car's picture a little shorter, so more requests show at once */
@media (max-width: 560px) { .quote img, .quote-ph { max-height: 190px; object-fit: cover; } .quote-ph { aspect-ratio: auto; height: 120px; } }
/* The add-a-photo screen on a phone turned sideways: two columns as on computers (the example on the left, the words and the
   buttons on the right), so Take a photo and Choose a photo are on screen (they sat 45 px below the bottom on an iPhone
   Pro Max, 932x430; screen tester, 3 Nov 2026) */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 999px) {
  .photo-empty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 24px; row-gap: 6px; align-content: center; justify-items: start;
    text-align: left; padding-top: 14px; padding-bottom: 14px; }
  .photo-empty > * { grid-column: 2; }
  .photo-empty > .pe-example { grid-column: 1; grid-row: 1 / span 30; align-self: center; width: 100%; margin: 0; }
  .photo-empty .pe-title { font-size: 1.25rem; line-height: 1.15; }
  .photo-empty .pe-tips, .photo-empty .pe-actions { justify-content: flex-start; }
  .photo-empty .pe-car-note, .photo-empty .pe-privacy { text-align: left; }
  .photo-empty .pe-drop { display: none; }
}

/* Our recent fitments: the customers' gallery and the staff card */
.fit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fit-card { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.fit-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fit-card figcaption { display: grid; gap: 1px; padding: 7px 9px 9px; }
.fit-card img { cursor: zoom-in; } .fit-card.big { grid-column: 1 / -1; } .fit-card.big img { aspect-ratio: auto; max-height: 60vh; cursor: zoom-out; }
.fit-card figcaption .btn { margin-top: 6px; justify-self: start; }
.fit-card figcaption b { font-size: .8rem; } .fit-card figcaption span { font-size: .72rem; color: var(--muted); }
.fit-list { display: grid; gap: 8px; margin-top: 12px; }
.fit-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.fit-row img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; }
.fit-row span { display: grid; min-width: 0; } .fit-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fit-row small { color: var(--muted); }
#qb-dialog .dialog-actions a.btn, #fb-dialog .dialog-actions a.btn { text-decoration: none; }
/* Upright phones, 400 px and under: the camera bar's chips 44 px tall (design review, 4 Nov 2026: measure and raise); last in
   the file, so it outranks the bar's own compact sizes */
@media (max-width: 400px) and (orientation: portrait) {
  .stage-wrap:not(.sideways):not(.side3d) > #views { height: auto; min-height: 50px; }
  .stage-wrap:not(.sideways):not(.side3d) > #views .chip { min-height: 44px; }
  .stage-wrap:not(.sideways):not(.side3d) > #views .look-switch button { min-height: 38px; }
}