/* Wheel Lab v1 — Plates-aligned hero and final responsive polish. */

/* Full-width module hero, following the same product language as Plates. */
.wheel-hero-v1{position:relative;min-height:470px;overflow:hidden;background:#070a0e;color:#fff}
.wheel-hero-v1 .wheel-hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center;filter:saturate(.82) contrast(1.04) brightness(.88)}
.wheel-hero-v1 .wheel-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,9,12,.96) 0%,rgba(7,9,12,.84) 31%,rgba(7,9,12,.48) 54%,rgba(7,9,12,.10) 78%,rgba(7,9,12,.03) 100%)}
.wheel-hero-v1 .wheel-hero-inner{position:relative;z-index:2;display:flex;align-items:center;min-height:470px;padding-top:42px;padding-bottom:94px}
.wheel-hero-v1 .wheel-hero-copy{max-width:760px}
.wheel-hero-v1 .wheel-kicker{margin-bottom:17px;color:#c8cdd1;font-size:10px}
.wheel-hero-v1 h1{max-width:780px;margin:0;font-size:clamp(48px,4.9vw,68px);line-height:.96;letter-spacing:-.055em;color:#fff}
.wheel-hero-v1 h1 span{color:#b9bdc1}
.wheel-hero-v1 .wheel-hero-copy>p{max-width:630px;margin:20px 0 0;color:#e1e4e6;font-size:16px;line-height:1.58}
.wheel-hero-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:690px;margin-top:31px}
.wheel-hero-benefit{display:grid;grid-template-columns:31px 1fr;gap:11px;align-items:center;min-width:0}
.wheel-hero-benefit-icon{display:grid;place-items:center;width:29px;height:29px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.06);color:#fff}
.wheel-hero-benefit-icon svg{width:15px;height:15px;fill:currentColor}
.wheel-hero-benefit strong,.wheel-hero-benefit small{display:block}.wheel-hero-benefit strong{font-size:11px;color:#fff}.wheel-hero-benefit small{margin-top:3px;color:#b6bbc0;font-size:9px;line-height:1.4}

/* The tool overlaps the hero just like the Plates configurator. */
.wheel-lab{position:relative;z-index:3;margin-top:-62px;padding-bottom:24px}
.wheel-lab-grid{box-shadow:0 24px 70px rgba(20,20,18,.12)}

/* Model/year readability on desktop/tablet. */
.wheel-selection-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr) minmax(0,.9fr)}
.wheel-field select{text-overflow:ellipsis}

/* Waiting state explains the outcome before the owner enters anything. */
.wheel-waiting-help{display:none;margin-top:14px;padding:16px;border:1px solid #2d3034;border-radius:14px;background:#17191b}
.wheel-result-panel.is-waiting .wheel-waiting-help{display:block}
.wheel-waiting-help>span{display:block;margin-bottom:11px;color:#7f858b;font-size:8px;font-weight:820;letter-spacing:.12em;text-transform:uppercase}
.wheel-waiting-help-grid{display:grid;gap:9px}.wheel-waiting-help-grid div{display:grid;grid-template-columns:27px 1fr;gap:9px;align-items:start}
.wheel-waiting-help-grid b{display:grid;place-items:center;width:24px;height:24px;border:1px solid #363a3e;border-radius:50%;color:#cfd3d6;font-size:9px}
.wheel-waiting-help-grid strong,.wheel-waiting-help-grid small{display:block}.wheel-waiting-help-grid strong{color:#e7eaec;font-size:10.5px}.wheel-waiting-help-grid small{margin-top:2px;color:#858a8f;font-size:9px;line-height:1.4}

/* Result hierarchy: decision first, secondary metrics second. */
.wheel-result-panel:has(.wheel-fitment-card.unverified:not([hidden])) .wheel-answer-summary,
.wheel-result-panel:has(.wheel-fitment-card.tesla-incompatible:not([hidden])) .wheel-answer-summary{display:none!important}
.wheel-result-panel:has(.wheel-fitment-card.unverified:not([hidden])) .wheel-range-card,
.wheel-result-panel:has(.wheel-fitment-card.tesla-incompatible:not([hidden])) .wheel-range-card{margin-top:10px}
.wheel-result-panel:has(.wheel-fitment-card.tesla-incompatible:not([hidden])) .wheel-fitment-card.tesla-incompatible{margin-top:20px;padding:22px;border-radius:17px}

.wheel-check-button,.wheel-check-modes button,.wheel-oem-card,.wheel-field select,.wheel-quick-field input{touch-action:manipulation}
.wheel-result-panel{scroll-margin-top:84px}

@media(max-width:1100px){
  .wheel-hero-v1 .wheel-hero-art{object-position:66% center}
  .wheel-lab-grid{grid-template-columns:1fr}
  .wheel-result-panel{position:static;min-height:auto}
  .wheel-selection-grid{grid-template-columns:1fr 1fr}.wheel-selection-grid>.wheel-field:last-child{grid-column:1/-1}
  .wheel-oem-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:900px){
  .wheel-hero-v1{min-height:440px}.wheel-hero-v1 .wheel-hero-inner{min-height:440px;padding-bottom:88px}
  .wheel-hero-v1 .wheel-hero-art{object-position:68% center}
  .wheel-hero-v1 .wheel-hero-shade{background:linear-gradient(90deg,rgba(7,9,12,.96) 0%,rgba(7,9,12,.86) 38%,rgba(7,9,12,.48) 69%,rgba(7,9,12,.14) 100%)}
  .wheel-hero-v1 .wheel-hero-copy{max-width:610px}
  .wheel-hero-v1 h1{font-size:clamp(48px,7vw,62px)}
  .wheel-hero-benefits{max-width:610px;gap:16px}
  .wheel-lab{margin-top:-54px;padding-bottom:20px}
}

@media(max-width:760px){
  .wheel-hero-v1{min-height:510px}
  .wheel-hero-v1 .wheel-hero-art{object-position:69% center;filter:saturate(.78) contrast(1.03) brightness(.78)}
  .wheel-hero-v1 .wheel-hero-shade{background:linear-gradient(180deg,rgba(7,9,12,.74) 0%,rgba(7,9,12,.57) 37%,rgba(7,9,12,.75) 67%,rgba(7,9,12,.97) 100%)}
  .wheel-hero-v1 .wheel-hero-inner{align-items:flex-end;min-height:510px;padding-top:36px;padding-bottom:90px}
  .wheel-hero-v1 .wheel-kicker{margin-bottom:12px;font-size:9px}
  .wheel-hero-v1 h1{font-size:clamp(42px,11.5vw,52px);line-height:.97}
  .wheel-hero-v1 .wheel-hero-copy>p{max-width:520px;margin-top:14px;font-size:14px;line-height:1.52}
  .wheel-hero-benefits{grid-template-columns:1fr;gap:9px;margin-top:18px}
  .wheel-hero-benefit{grid-template-columns:25px 1fr;gap:9px}.wheel-hero-benefit-icon{width:24px;height:24px}.wheel-hero-benefit-icon svg{width:13px;height:13px}
  .wheel-hero-benefit strong{font-size:10px}.wheel-hero-benefit small{font-size:8.5px;margin-top:1px}
  .wheel-lab{margin-top:-48px;padding-left:12px;padding-right:12px;padding-bottom:16px}
  .wheel-selection-grid{grid-template-columns:1fr}.wheel-selection-grid>.wheel-field:last-child{grid-column:auto}
  .wheel-selection-meta{align-items:flex-start;flex-direction:column}
  .wheel-config-panel,.wheel-result-panel{padding-left:17px;padding-right:17px}
  .wheel-step-head{grid-template-columns:32px 1fr;gap:9px}.wheel-step-head h2{font-size:20px}.wheel-step-head p{font-size:12px}
  .wheel-field select,.wheel-field input,.wheel-quick-field input{font-size:16px!important}
  .wheel-oem-cards{grid-template-columns:1fr}.wheel-oem-cards.is-single{max-width:none}
  .wheel-check-modes{grid-template-columns:1fr 1fr 1fr;gap:6px}.wheel-check-modes button{min-height:46px;padding:0 7px;font-size:9px}
  .wheel-quick-box{padding:14px}.wheel-quick-field input{min-height:52px;padding-left:12px;padding-right:12px}
  .wheel-check-button{width:100%;min-height:48px;font-size:11px}
  .wheel-result-panel{padding-top:24px;padding-bottom:26px}
  .wheel-result-head h2{font-size:24px}.fitment-verdict{padding:18px}.fitment-verdict>strong{font-size:21px}
  .wheel-result-panel:has(.wheel-fitment-card.unverified:not([hidden])) .wheel-fitment-card.unverified,
  .wheel-result-panel:has(.wheel-fitment-card.tesla-incompatible:not([hidden])) .wheel-fitment-card.tesla-incompatible{padding:18px;margin-top:16px}
  .wheel-waiting-help{padding:14px}
  .wheel-method{padding-top:4px}.wheel-method-grid p{font-size:10.5px}
}

@media(max-width:430px){
  .wheel-hero-v1 h1{font-size:41px}
  .wheel-check-modes{grid-template-columns:1fr}.wheel-check-modes button{min-height:42px;font-size:10px}
  .wheel-oem-card{grid-template-columns:78px minmax(0,1fr)}.wheel-oem-image{width:78px;height:78px}
}