/* ============================================================
   KWT catalog layer — styles for /inventory, /visualizer and the home-page
   teaser. Loads after kwt.css. Everything here is new to the site: the base
   stylesheet had no range sliders, radios, swatches or steppers, so those
   are built from scratch on the same tokens (--brand, --surface-*, --border,
   --font-display / --font-ui / --font-body).
   ============================================================ */

/* ── Secondary page header ───────────────────────────────────
   styles.css paints .page-hero's glow in ACE red; repoint it. */
.page-hero::before{background:radial-gradient(ellipse at 70% 30%,rgba(16,198,3,.14) 0%,transparent 60%);}
.page-hero h1 .accent{color:var(--brand);}
.page-hero--tight{padding:96px 40px 44px;}
.page-hero--tight .section-eyebrow{margin-bottom:14px;}
.page-hero--tight p{margin-top:16px;}
@media (max-width:720px){ .page-hero--tight{padding:72px 24px 36px;} }

/* Several panels here are display:flex/grid, which would silently beat the
   UA stylesheet's [hidden]{display:none}. Make the attribute always win. */
[hidden]{display:none!important;}

/* Visually hidden but focusable / announced. NOT display:none — that would
   pull swatch radios out of the tab order and the accessibility tree. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── Home teaser ─────────────────────────────────────────── */
.teaser-grid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px;
  margin-top:40px;padding:36px 40px;background:var(--surface-1);border:1px solid var(--border);
  border-left:3px solid var(--brand);}
.teaser-wheels{display:flex;gap:28px;align-items:center;}
.teaser-wheel{width:130px;height:130px;flex:none;filter:drop-shadow(0 14px 24px rgba(0,0,0,.55));
  transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.teaser-grid:hover .teaser-wheel{transform:rotate(30deg);}
.teaser-cta{display:flex;flex-direction:column;gap:12px;}
@media (max-width:820px){
  .teaser-grid{grid-template-columns:1fr;padding:28px 22px;}
  .teaser-wheels{justify-content:center;gap:18px;}
  .teaser-wheel{width:92px;height:92px;}
  .teaser-cta{flex-direction:row;flex-wrap:wrap;justify-content:center;}
}

/* ── Shared form bits ────────────────────────────────────── */
.form-row select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310C603' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;}
.form-row select:disabled{opacity:.45;cursor:not-allowed;}
.form-row input[type="number"]{width:100%;}
.form-row.is-inline{flex-direction:row;align-items:center;gap:12px;}
.form-row.is-inline label{margin:0;}
.check{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-ui);font-weight:500;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);cursor:pointer;}
.check input{accent-color:var(--brand);width:18px;height:18px;margin:0;}

/* Range sliders — none existed in the base stylesheet. */
input[type="range"].kwt-range{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;
  accent-color:var(--brand);cursor:pointer;margin:0;}
input[type="range"].kwt-range::-webkit-slider-runnable-track{height:4px;background:var(--surface-3);border-radius:2px;}
input[type="range"].kwt-range::-moz-range-track{height:4px;background:var(--surface-3);border-radius:2px;}
input[type="range"].kwt-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;
  margin-top:-9px;border-radius:50%;background:var(--brand);border:3px solid #04140A;box-shadow:0 0 0 2px var(--brand),0 0 18px var(--brand-glow);}
input[type="range"].kwt-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--brand);
  border:3px solid #04140A;box-shadow:0 0 0 2px var(--brand),0 0 18px var(--brand-glow);}
input[type="range"].kwt-range:focus-visible{outline:none;}
input[type="range"].kwt-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(16,198,3,.45);}

/* Stepper: ◀ 20" ▶ */
.stepper{display:grid;grid-template-columns:44px 1fr 44px;align-items:stretch;border:1px solid var(--border-strong);background:var(--bg);}
.stepper button{background:var(--surface-2);border:0;color:var(--text);font-size:18px;cursor:pointer;min-height:48px;
  transition:background .15s,color .15s;}
.stepper button:hover:not(:disabled){background:var(--brand);color:#04140A;}
.stepper button:disabled{opacity:.3;cursor:not-allowed;}
.stepper output{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-size:30px;letter-spacing:.04em;color:var(--text);}
.stepper output small{font-family:var(--font-ui);font-size:12px;letter-spacing:.2em;color:var(--text-secondary);margin-left:8px;}

/* Color swatches: real radios, visually a grid of paint chips. */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px;}
.swatch{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;text-align:center;}
.swatch i{display:block;width:34px;height:34px;background:var(--sw,#888);border:2px solid rgba(255,255,255,.14);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  transition:transform .15s,border-color .15s;}
.swatch span{font-family:var(--font-ui);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);line-height:1.2;}
.swatch:hover i{transform:scale(1.08);}
.sr-only:checked + .swatch i{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand),0 0 16px var(--brand-glow);}
.sr-only:checked + .swatch span{color:var(--text);}
.sr-only:focus-visible + .swatch i{outline:2px solid var(--brand);outline-offset:3px;}
.swatch-custom{display:flex;align-items:center;gap:12px;margin-top:12px;}
.swatch-custom input[type="color"]{width:44px;height:34px;padding:0;border:1px solid var(--border-strong);background:var(--bg);cursor:pointer;}

/* Segmented radio tabs (mode switch, category tabs, level/lift). */
.seg{display:inline-flex;border:1px solid var(--border-strong);background:var(--bg);}
/* An explicit `display` beats the HTML hidden attribute, so hiding the
   segmented control from JS needs this or it stays on screen. */
.seg[hidden]{display:none !important;}
.seg label{padding:12px 18px;font-family:var(--font-ui);font-weight:600;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-secondary);cursor:pointer;transition:background .15s,color .15s;user-select:none;}
.seg label:hover{color:var(--text);}
.seg .sr-only:checked + label{background:var(--brand);color:#04140A;}
.seg .sr-only:focus-visible + label{outline:2px solid var(--brand);outline-offset:-2px;}

/* Stock + fit pills. */
.pill{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;font-family:var(--font-ui);font-weight:600;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--border-strong);color:var(--text-secondary);}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.pill.is-in{color:var(--brand);border-color:rgba(16,198,3,.45);}
.pill.is-out{color:var(--text-muted);}
.pill.is-order{color:#F5B400;border-color:rgba(245,180,0,.4);}
.pill.is-warn{color:#F5B400;border-color:rgba(245,180,0,.4);}
.pill.is-info{color:var(--text-secondary);}

/* ── Inventory page ──────────────────────────────────────── */
.inv{padding-top:0;}
.inv-filters{position:sticky;top:64px;z-index:5;display:grid;grid-template-columns:auto repeat(5,minmax(140px,1fr)) auto;
  gap:14px;align-items:end;padding:18px 0 16px;margin-bottom:28px;background:var(--bg);border-bottom:1px solid var(--border);}
.inv-filters .form-row{margin:0;gap:6px;}
.inv-filters .form-row select,.inv-filters .form-row input{padding:11px 36px 11px 12px;font-size:14px;}
.inv-filters .seg{align-self:end;}
.inv-filters .seg label{padding:11px 14px;}
.inv-count{font-family:var(--font-ui);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-secondary);
  align-self:center;white-space:nowrap;}
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;}
.inv-card{display:flex;flex-direction:column;background:var(--surface-1);border:1px solid var(--border);padding:22px;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  transition:border-color .2s,transform .2s;}
.inv-card:hover{border-color:var(--border-strong);transform:translateY(-3px);}
.inv-thumb{aspect-ratio:1/1;background:radial-gradient(circle at 50% 40%,var(--surface-3),var(--surface-1) 70%);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;overflow:hidden;}
.inv-thumb svg,.inv-thumb img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.55));}
.inv-thumb.is-tire svg,.inv-thumb.is-lift svg{width:70%;height:70%;}
.inv-brand{font-family:var(--font-ui);font-weight:600;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--brand);}
.inv-name{font-family:var(--font-display);font-size:30px;letter-spacing:.02em;line-height:1;margin:6px 0 8px;}
.inv-spec{font-size:14px;color:var(--text-secondary);line-height:1.5;}
.inv-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 18px;flex-wrap:wrap;}
.inv-price{font-family:var(--font-display);font-size:32px;letter-spacing:.02em;line-height:1;}
.inv-price small{font-family:var(--font-ui);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary);margin-left:6px;}
.inv-price.is-call{color:var(--brand);font-size:22px;}
.inv-actions{display:flex;gap:10px;margin-top:auto;flex-wrap:wrap;}
.inv-actions .btn{padding:12px 16px;font-size:15px;flex:1 1 auto;text-align:center;justify-content:center;}
.inv-empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--text-secondary);border:1px dashed var(--border-strong);}
.inv-empty .btn{margin-top:18px;}
.inv-note{font-size:13px;color:var(--text-muted);margin-top:26px;}
@media (max-width:1100px){ .inv-filters{grid-template-columns:repeat(3,1fr);} .inv-filters .seg{grid-column:1/-1;justify-self:start;} }
@media (max-width:720px){
  .inv-filters{position:static;grid-template-columns:1fr 1fr;gap:10px;}
  .inv-filters .seg{width:100%;}
  .inv-filters .seg label{flex:1;text-align:center;padding:11px 6px;font-size:11px;}
  .inv-count{grid-column:1/-1;}
}

/* ── Visualizer page ─────────────────────────────────────── */
.viz{padding-top:36px;}
.viz-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:32px;align-items:start;}
.viz-stage{position:sticky;top:84px;display:flex;flex-direction:column;gap:14px;}
.viz-frame{position:relative;background:linear-gradient(180deg,var(--surface-1) 0%,var(--surface-2) 100%);
  border:1px solid var(--border);overflow:hidden;}
.viz-frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.35));pointer-events:none;}
#vizSvg svg{display:block;width:100%;height:auto;}
#vizSvg:empty{aspect-ratio:1000/400;}
.viz-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:24px;color:var(--text-secondary);z-index:1;}
.viz-placeholder strong{font-family:var(--font-display);font-size:34px;letter-spacing:.03em;color:var(--text);}
.viz-summary{font-family:var(--font-ui);font-size:15px;letter-spacing:.06em;color:var(--text-secondary);min-height:1.4em;}
.viz-summary strong{color:var(--text);}
.viz-warnings{display:flex;flex-wrap:wrap;gap:8px;}
.viz-warnings:empty{display:none;}
.viz-actions{display:flex;gap:10px;flex-wrap:wrap;}
.viz-actions .btn{padding:14px 22px;font-size:16px;}
.viz-notice{font-size:13px;color:#F5B400;}
.viz-notice:empty{display:none;}
.viz-controls{display:flex;flex-direction:column;gap:14px;}
.viz-controls fieldset{border:1px solid var(--border);background:var(--surface-1);padding:20px 22px 22px;margin:0;min-width:0;}
.viz-controls legend{font-family:var(--font-ui);font-weight:600;font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--brand);padding:0 10px;}
.viz-controls .form-row{margin-bottom:12px;}
.viz-controls .form-row:last-child{margin-bottom:0;}
.viz-controls .form-row label{color:var(--text-secondary);}
.viz-hint{font-size:13px;color:var(--text-muted);line-height:1.45;}
.viz-hint button{background:none;border:0;color:var(--brand);font:inherit;cursor:pointer;padding:0;text-decoration:underline;}
.viz-lift-head{display:flex;justify-content:space-between;align-items:baseline;}
.viz-lift-head output{font-family:var(--font-display);font-size:28px;letter-spacing:.03em;}
.viz-share{display:flex;gap:8px;align-items:center;}
.viz-share input{flex:1;background:var(--bg);border:1px solid var(--border-strong);color:var(--text-secondary);padding:10px 12px;font-size:13px;}
.viz-share:empty{display:none;}
@media (max-width:980px){
  .viz-layout{grid-template-columns:1fr;}
  .viz-stage{position:static;}
}
@media (max-width:720px){
  .viz-controls fieldset{padding:16px;}
  .stepper button{min-height:44px;}
}

/* ── Real photos (RideStyler Showcase) ───────────────────────
   The widget fills its container absolutely (that is how RideStyler's own
   demo hosts it), so the frame supplies the size. */
.seg label[hidden]{display:none!important;}
#vizReal .rs-frame{position:relative;height:min(76vh,700px);overflow:hidden;
  background:var(--surface-1);border:1px solid var(--border);}
#vizReal .ridestyler-showcase{position:absolute;inset:0;width:100%;height:100%;}
#vizReal .viz-hint{margin-top:10px;}
.viz-legacy a{color:var(--brand);text-decoration:underline;}
@media (max-width:720px){ #vizReal .rs-frame{height:min(70vh,560px);} }

/* ── Photo mode ──────────────────────────────────────────── */
.photo{display:flex;flex-direction:column;gap:14px;}
.photo-steps{list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0;padding:0;}
.photo-steps li{counter-increment:step;font-family:var(--font-ui);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);padding:10px 8px;border-top:2px solid var(--surface-3);line-height:1.3;}
.photo-steps li::before{content:counter(step,decimal-leading-zero) " ";color:inherit;font-weight:700;}
.photo-steps li.is-done{color:var(--text-secondary);border-top-color:var(--brand-dark);}
.photo-steps li.is-current{color:var(--text);border-top-color:var(--brand);}
.photo-frame{position:relative;background:var(--surface-2);border:1px solid var(--border);min-height:220px;
  touch-action:none;overflow:hidden;}
.photo-frame canvas{display:block;width:100%;height:auto;}
.photo-frame svg{position:absolute;inset:0;width:100%;height:100%;}
.photo-frame.is-picking{cursor:crosshair;}
.photo-frame .hub{fill:none;stroke:var(--brand);stroke-width:2;vector-effect:non-scaling-stroke;}
.photo-frame .ring{fill:none;stroke:var(--brand);stroke-width:3;stroke-dasharray:6 5;vector-effect:non-scaling-stroke;}
.photo-frame .handle{fill:var(--brand);stroke:#04140A;stroke-width:2;vector-effect:non-scaling-stroke;cursor:ew-resize;}
.photo-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:44px 20px;
  border:1px dashed var(--border-strong);text-align:center;color:var(--text-secondary);}
.photo-drop strong{font-family:var(--font-display);font-size:30px;letter-spacing:.03em;color:var(--text);}
.photo-drop input[type="file"]{display:none;}
.photo-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:end;}
.photo-tools .form-row{margin:0;flex:1 1 160px;}
.photo-fine{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.photo-fine .form-row{margin:0;}
.photo-fine input{padding:8px 10px!important;font-size:13px!important;}
.photo-badge{position:absolute;left:12px;top:12px;z-index:2;}
/* Sits opposite the lift warning so the two never collide. Green, because it
   is telling the customer something WORKED - and it doubles as the prompt to
   correct it, since the detector is a first guess and says so. */
.photo-found{position:absolute;right:12px;top:12px;z-index:2;
  background:color-mix(in srgb, var(--brand) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 55%, transparent);
  color:var(--brand-bright);}
@media (max-width:560px){
  .photo-found{left:12px;right:12px;top:auto;bottom:12px;text-align:center;}
}
/* ── AI render layer ──
   Sits ON TOP of the drawn preview rather than replacing it: the BEFORE/AFTER
   toggle just flips which one is visible, so the free preview is never thrown
   away and a failed render leaves the customer exactly where they were. */
.photo-ai-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  background:var(--surface-2);z-index:3;}
.photo-ai-busy{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;gap:12px;
  background:rgba(8,10,9,.72);backdrop-filter:blur(2px);
  font-family:var(--font-ui);font-weight:600;font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text);}
.photo-ai-busy span{width:15px;height:15px;border-radius:50%;background:var(--brand);
  animation:pulse 1.1s ease-in-out infinite;}

.photo-ai-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px;}
.photo-ai-seg label{padding:9px 14px;font-size:12px;}
.photo-ai-note{font-size:12px;color:var(--text-muted);}

/* The button that spends money reads as the primary action once the fit is
   confirmed, but it is never the ONLY way forward. */
.btn-ai{background:var(--brand);color:#04140A;border-color:var(--brand);}
.btn-ai:disabled{opacity:.55;cursor:progress;}

.photo-ai-lead{margin-top:14px;padding:16px;border:1px solid var(--border-strong);background:var(--surface-1);}
.photo-ai-lead p{margin:0 0 12px;font-size:14px;color:var(--text-secondary);}
.photo-ai-lead .btn{margin-top:10px;margin-right:8px;}

.photo-ai-msg{margin-top:10px;font-size:13px;color:var(--text-secondary);}
.photo-ai-msg[data-tone="warn"]{color:#F5B400;}

@media (max-width:560px){
  .photo-ai-bar{gap:8px;}
  .photo-ai-note{width:100%;}
}

.photo-privacy{font-size:13px;color:var(--text-muted);}
@media (max-width:720px){
  .photo-steps{grid-template-columns:1fr 1fr;}
  .photo-fine{grid-template-columns:repeat(3,1fr);}
}

/* ── Quote form additions (both pages) ───────────────────── */
.quote-card .qf-build{font-family:var(--font-ui);font-size:13px;letter-spacing:.06em;color:var(--text-secondary);
  background:var(--bg);border-left:3px solid var(--brand);padding:12px 14px;white-space:pre-line;}
.quote-card .qf-build:empty{display:none;}

/* ── Missing product photo ────────────────────────────────────
   Replaces the drawn wheel/tire stand-ins. A tile that admits it has no
   picture is honest; a drawing pretending to be one made the real product
   photos next to it look suspect too. */
.inv-nophoto{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;width:100%;height:100%;min-height:160px;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 10px,transparent 10px 20px),
    var(--surface-1);
  border:1px dashed var(--border-strong);border-radius:6px;}
.inv-nophoto-brand{font-family:var(--font-display);font-weight:800;
  font-size:clamp(18px,2vw,24px);letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-muted);}
.inv-nophoto small{font-family:var(--font-ui);font-weight:700;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--brand-dim);}