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

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

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

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

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

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

/* Showroom hero: the car fills the width; controls float over it */
.hero { display: flex; flex-direction: column; gap: 12px; }
.stage-wrap .photo-empty .btn { position: relative; z-index: 1; }
/* --dock-h: room kept under the 3D car for the quick wheel picker (set by app.js) */
.stage-wrap { position: relative; height: calc(clamp(340px, 56vh, 700px) + var(--dock-h, 0px) + 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; }
.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); }
.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-pick-lbl { grid-column: 2; grid-row: 1; align-self: start; margin: 20px 18px 0 0; z-index: 1; }
  .shop > .car-pick > .car-btn { grid-column: 2; grid-row: 1; align-self: start; justify-self: start; width: calc(100% - 18px); margin: 48px 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); } }
.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; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; 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); overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.dialog.wide { width: min(900px, calc(100vw - 24px)); }
.dialog::backdrop { background: rgba(10, 12, 16, .55); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.dialog-actions .btn { flex: 1 1 120px; }
.quote-summary { display: flex; gap: 12px; align-items: center; background: var(--surface-2); border-radius: 12px; padding: 10px; }
.quote-summary img { width: 120px; border-radius: 8px; flex: none; }
.quote-summary div { min-width: 0; font-size: .95rem; }
#copy-text { font: 13px ui-monospace, Menlo, Consolas, monospace; }

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

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(200%); background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 12px; font-weight: 600; box-shadow: var(--shadow); transition: transform .25s; z-index: 50; 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; }
.car-pick-lbl { margin: 0 0 6px; font-weight: 700; }
.hero .car-select { padding: 0; background: none; border: 0; }
.photo-car.ask .car-btn { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(251, 127, 60, .3); }

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

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

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

/* AI at work: a calm, technical "rebuild" over the photo */
.ai-magic { position: absolute; z-index: 5; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, rgba(8, 12, 20, .35), rgba(8, 12, 20, .55)); }
.ai-magic[hidden] { display: none; }
/* 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; }
.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; }
.quote-summary .q-total { font-size: 1.1rem; }
.sample-btn { font-size: .9rem; margin-top: 2px; }

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

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

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

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

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

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

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

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

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

/* ---------- 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; }
#photo-tools > #save-btn, #photo-tools > #full-btn { flex: 0 0 44px; height: auto; min-height: 52px; padding: 0; border: 0; border-radius: 14px; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#photo-tools > #save-btn:hover, #photo-tools > #full-btn:hover { background: rgba(0, 0, 0, .05); }
.controls:has(> #photo-tools:not([hidden])) { padding-top: 8px; }
/* The car button on a photo: glows until they say which car it is */
.car-pill.ask { box-shadow: 0 0 0 2px rgba(194, 65, 12, .55), 0 0 16px rgba(251, 127, 60, .45); animation: pill-ask 2.4s ease-in-out infinite; }
@keyframes pill-ask { 50% { box-shadow: 0 0 0 2px rgba(194, 65, 12, .25), 0 0 4px rgba(251, 127, 60, .2); } }
@media (prefers-reduced-motion: reduce) { .car-pill.ask { animation: none; } }

/* ---------- Phone turned sideways (round 6) ----------
   The car (or photo) fills the left, the controls sit in a frosted panel on the right: the wheel, car
   and price, the menus, the wheels, and on a photo its tools. Adjusting wheels uses the same panel. */
@media (orientation: landscape) and (max-height: 520px) {
  .stage-wrap.sideways { --side: min(360px, 44vw); }
  .top-inner { padding-block: 5px; }
  .hero { padding-bottom: 0; gap: 0; }
  .stage-wrap.sideways:not(.full), .stage-wrap.sideways.photo-fit:not(.full), .stage-wrap.sideways:not(.full):not(.photo-fit) { height: calc(100svh - 50px) !important; min-height: 280px; aspect-ratio: auto; max-height: none; }
  .stage-wrap.sideways > .stage3d { inset: 0 var(--side) 0 0 !important; top: 0 !important; }
  .stage-wrap.sideways > .stage3d canvas { -webkit-mask-image: none !important; mask-image: none !important; }
  .stage-wrap.sideways > .stage { right: var(--side); }
  .stage-wrap.sideways > .dock { top: 0; bottom: 0; left: auto; right: 0; width: var(--side); padding: 10px 12px max(10px, env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; justify-content: center; gap: 2px; overflow: visible;
    background: linear-gradient(160deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .6)); border-left: 1px solid rgba(255, 255, 255, .8);
    backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); box-shadow: -10px 0 30px rgba(15, 18, 24, .08); }
  .stage-wrap.sideways > .dock :is(.dock-head, .dock-bar, .dock-row, .ba, .dock-note) { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .stage-wrap.sideways .dock-head { flex-wrap: wrap; row-gap: 4px; margin-bottom: 6px; }
  .stage-wrap.sideways .dock-head .dock-name { flex: 1 1 100%; }
  /* (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 { 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: 38px; padding: 0 13px; }
.menu-btn.on:not([aria-expanded="true"]) { border-color: #14171c; box-shadow: inset 0 0 0 1px #14171c, 0 2px 8px rgba(15, 18, 24, .07); }

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

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

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

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

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

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

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

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


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

/* Staff: trial stats table */
.stats-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 8px 0 14px; }
.stats-table th, .stats-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: right; font-size: .9rem; }
.stats-table th:first-child, .stats-table td:first-child { text-align: left; }
@media (max-width: 520px) { .stats-table th:nth-child(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; }
@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 (icon-only Save and Full screen take less room) */
@media (max-width: 520px) {
  #photo-tools { gap: 3px; }
  #photo-tools > #save-btn, #photo-tools > #full-btn { flex: 0 0 40px; }
  #photo-tools > .ptool .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: -4px; z-index: 2; width: 36px; height: 36px; 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: -8px; } .joy-rot.r { right: -8px; }
.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; } .looks-btn { width: 36px; height: 36px; border-radius: 12px; } .looks-btn svg { width: 20px; height: 20px; } }

/* 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 */
.look-view { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: 10px; padding: 14px; overflow: auto; background: var(--surface); }
.look-view[hidden] { display: none; }
.looks-dialog.viewing { overflow: hidden; min-height: min(620px, calc(100dvh - 24px)); }
.lv-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 38px; padding: 0 12px 0 6px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink); font: 700 .86rem var(--body); cursor: pointer; }
.lv-back svg { width: 18px; height: 18px; }
.lv-fig { position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: #0d0f12; touch-action: pan-y; }
.lv-fig img { display: block; width: 100%; max-height: 62vh; object-fit: contain; }
.lv-ai { left: 10px; top: 10px; }
.lv-nav { position: absolute; top: 50%; margin-top: -21px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(20, 22, 26, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lv-nav[hidden] { display: none; }
.lv-nav svg { width: 20px; height: 20px; }
.lv-nav.prev { left: 8px; } .lv-nav.next { right: 8px; }
.lv-info { display: grid; gap: 2px; }
.lv-info b { font-size: 1.05rem; }
.lv-info span { color: var(--muted); font-size: .84rem; }
.lv-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lv-actions .btn[hidden] { display: none; }
.lv-del { color: #be123c; }
@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: 38px; }
.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; }
.handles.quiet svg.lock { opacity: .4; }
.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); }