/* Preserve the Astra composition, with a vertical tire picker left of the wheel. */
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.hero-runway { position:relative; }
.hero-runway .hero { height:max(760px,100svh); min-height:0; }
.wheel-loading .hero-runway, .wheel-ready .hero-runway { height:calc(max(760px,100svh) + 198svh); }
.wheel-loading .hero-runway .hero, .wheel-ready .hero-runway .hero { position:sticky; top:0; }
.hero-word { top:138px; left:0; right:0; font-size:13.3vw; text-align:center; z-index:0; pointer-events:none; }
.wheel-stage { position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; }
#wheel-canvas { position:absolute; inset:0; visibility:hidden; }
.wheel-ready #wheel-canvas { visibility:visible; }
.wheel-fallback { display:none; position:absolute; top:calc(44% + 132px); left:50%; width:min(900px,68svh); height:min(900px,68svh); object-fit:contain; transform:translate(-50%,-50%) rotate(-8deg); }
.wheel-failed .wheel-fallback { display:block; }
.hero-bottom { bottom:26px; z-index:3; }
.hero-cta { display:flex; flex-direction:column; align-items:stretch; }
.hero-bottom .hero-cta p { margin:0 0 14px; }
.hero h1 { font-size:clamp(32px,2.6vw,46px); max-width:600px; }
.hero-bottom>div:first-child { max-width:47%; }
.hero-aside { top:45%; }
.guarantee { top:calc(43% + 48px); z-index:5; }
.tire-picker { position:absolute; z-index:5; left:var(--pad); top:calc(clamp(312px,38svh,470px) + 48px); width:clamp(232px,19vw,280px); display:grid; gap:16px; }
.tire-picker-fields { display:grid; gap:12px; min-width:0; }
.tire-field { position:relative; min-width:0; display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; align-items:center; }
.tire-field::after { content:""; position:absolute; bottom:19px; right:12px; width:7px; height:7px; border:solid var(--paper); border-width:0 1.5px 1.5px 0; transform:rotate(45deg); pointer-events:none; }
.tire-picker label { display:block; color:#d3d4cd; font-size:12px; line-height:16px; margin:0; }
.tire-picker select { appearance:none; width:100%; height:44px; padding:8px 32px 8px 8px; color:var(--paper); background:#202222; border:0; border-bottom:1px solid #e9e8e359; border-radius:0; font:400 16px/1.25 var(--body); cursor:pointer; color-scheme:dark; }
.tire-picker select:hover { border-color:var(--paper); }
.tire-picker select:open { border-color:var(--red); }
.tire-picker select:focus-visible { outline:2px solid var(--paper); outline-offset:3px; }
.tire-quantity { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.tire-quantity button { min-height:34px; padding:6px 8px; background:transparent; color:var(--paper); border:1px solid #e9e8e359; font-size:12px; transition:background .15s var(--reveal),color .15s var(--reveal); }
.tire-quantity button[aria-pressed=true] { color:var(--ink); background:var(--paper); border-color:var(--paper); }
.tire-quantity button:hover { border-color:var(--paper); }
.tire-price-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#tire-unit-price { display:block; font-size:12px; line-height:1.2; color:var(--muted); }
#tire-price { font:700 34px/1.12 var(--body); letter-spacing:-.04em; font-variant-numeric:tabular-nums; margin:0 0 2px; }
#tire-book { min-width:0; min-height:48px; padding:12px 14px; gap:12px; color:#fff; background:#c52a23; font-size:12px; white-space:nowrap; }
#tire-book:hover { color:var(--ink); }
#tire-book svg { width:16px; height:16px; }
@supports (appearance:base-select) {
  .tire-picker select, .tire-picker select::picker(select) { appearance:base-select; }
  .tire-picker select::picker-icon { display:none; }
  .tire-picker select::picker(select) { margin:6px 0; padding:6px; background:var(--paper); color:var(--ink); border:0; border-radius:0; box-shadow:0 12px 26px #0003; font:400 14px/1.3 var(--body); color-scheme:light; }
  .tire-picker option { padding:12px; min-height:44px; gap:12px; }
  .tire-picker option:hover, .tire-picker option:focus { background:#d4d5ce; color:var(--ink); outline:none; }
  .tire-picker option:checked { color:#fff; background:#c52a23; font-weight:700; }
  .tire-picker option::checkmark { order:1; margin-left:auto; }
}
@media (max-height:820px) {
  .hero-word { top:132px; }
  .hero h1 { font-size:32px; }
  .hero-bottom p { font-size:14px; }
  .guarantee { padding:20px; width:190px; }
  .hero-bottom { bottom:20px; }
  .tire-picker { gap:12px; }
  .tire-picker-fields { gap:10px; }
  .tire-picker label { line-height:15px; }
  .tire-picker select { height:40px; padding-top:6px; padding-bottom:6px; font-size:14px; }
  .tire-field::after { bottom:17px; }
  .tire-quantity button { min-height:32px; font-size:12px; }
  #tire-price { font-size:30px; }
  #tire-book { min-height:44px; padding:10px 12px; font-size:12px; gap:8px; }
}
@media (prefers-reduced-motion:reduce) {
  .wheel-loading .hero-runway, .wheel-ready .hero-runway { height:auto; }
  .wheel-loading .hero-runway .hero, .wheel-ready .hero-runway .hero { position:relative; }
}