*{box-sizing:border-box}
:root{ --bg:#f6f7f9; --text:#0e0f12; --muted:#6b7280; --line:#e7e9ee; --panel:#fff; --shadow:0 6px 16px rgba(15,17,21,.08);
  --font-ui:'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-display:'Space Grotesk','Inter',ui-sans-serif,system-ui;
  --track-tight:-0.01em; --track-wide:0.04em;
  --thumb:85px; --tile:51px; --viewW:88px;
  --accent:#0ea5e9; --accent-soft: rgba(14,165,233,.12);
}
html,body{height:100%} body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 var(--font-ui);letter-spacing:.005em}
.brandbar{display:grid;place-items:center;padding:20px;border-bottom:1px solid var(--line);background:#fff}
.logo{height:56px;max-width:92vw;object-fit:contain}
.vehbar{border-bottom:1px solid var(--line);background:#fff}
.vehbar-inner{max-width:1600px;margin:0 auto;padding:12px 18px;display:flex;gap:12px;align-items:center}
.veh-label{color:var(--muted);font-weight:700;font-family:var(--font-display);letter-spacing:var(--track-tight)}
select{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.shell{max-width:1600px;margin:18px auto;display:grid;grid-template-columns:1fr 440px;gap:18px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:12px}
.stage .stage-inner{position:relative;aspect-ratio:16/9;background:linear-gradient(180deg,#f8fafc,#f1f5f9);border-radius:12px;overflow:hidden}
.stage img{width:100%;height:100%;object-fit:contain;display:block}
.stage img.overlay{position:absolute;inset:0;pointer-events:none}
.stage canvas.overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#frameSlider{width:100%;margin-top:10px}
.right{display:flex;flex-direction:column;gap:18px}
.panel-title{font-weight:700;color:#333;margin-bottom:8px;font-family:var(--font-display);letter-spacing:var(--track-tight)}
.seg{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* View buttons 16:9 transparent, max fit */
.view-btn{display:inline-flex;align-items:center;justify-content:center;gap:0;border:1px solid var(--line);background:#fff;padding:0;border-radius:14px;cursor:pointer;box-shadow:var(--shadow);width:var(--viewW);aspect-ratio:16/9;overflow:hidden}
.view-btn img{width:100%;height:100%;aspect-ratio:16/9;object-fit:contain;object-position:center;background:transparent;padding:0;display:block}
.view-btn.active{outline:2px solid #111;outline-offset:2px}

/* Wheels list */
.wheel-list{display:grid;gap:12px}
.wheel-card{display:grid;grid-template-columns:var(--thumb) 1fr;gap:12px;align-items:start;padding:10px;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.wheel-card.selected{ box-shadow:0 0 0 2px var(--accent), var(--shadow); border-color: transparent; }
.wheel-title{grid-column:1/-1;font-size:12px;font-weight:800;letter-spacing:.02em;font-family:var(--font-display);margin-bottom:4px}
.wheel-thumb{width:var(--thumb);height:var(--thumb);border:0;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:transparent;box-shadow:none}
.wheel-thumb img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:transparent}

/* Color grid + tiles (with labels) */
.finish-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--tile), 1fr));gap:8px}
.finish-square{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;cursor:pointer;background:transparent;border:0;padding:0}
.finish-img{width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:transparent}
.finish-img img{width:100%;height:100%;object-fit:contain}
.finish-label{font-family:var(--font-ui);font-weight:500;font-size:10px;line-height:1.2;color:var(--muted);letter-spacing:.02em;text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.finish-square:hover .finish-img{ background:rgba(17,17,17,.035) }
.finish-square.active .finish-img{ box-shadow:0 0 0 3px var(--accent); background:var(--accent-soft) }

@media (max-width:900px){
  :root{ --thumb:70px; --tile:42px; --viewW:76px; }
  .shell{grid-template-columns:1fr;gap:12px}
}
@media (max-width:600px){
  :root{ --thumb:64px; --tile:40px }
  .finish-grid{ grid-template-columns: repeat(auto-fit, minmax(40px, 56px)); justify-content:flex-start; }
}

/* --- Colorizer add-on (keep white UI) --- */
.panel.colorizer .slider-col{display:flex;flex-direction:column;gap:10px}
.panel.colorizer .row{display:grid;grid-template-columns:80px 1fr 60px;gap:10px;align-items:center}
.panel.colorizer label{color:#444;font-weight:600}
.panel.colorizer span{font-variant-numeric:tabular-nums;text-align:right;color:#666}
.finish-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.segbtn{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.segbtn.active{background:#e9f1ff;border-color:#cddafe}
/* white pill sliders */
input[type=range]{-webkit-appearance:none;width:100%;height:22px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:8px;background:#fff;border-radius:999px;border:1px solid var(--line)}
input[type=range]::-moz-range-track{height:8px;background:#fff;border-radius:999px;border:1px solid var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #d0d5dd;margin-top:-8px}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #d0d5dd}


/* === Colorizer UI polish === */
/* Hide numeric readouts on the right, keep DOM for logic */
.panel.colorizer .row span { display:none; }

/* Hue: rainbow track + prominent thumb */
#hue::-webkit-slider-runnable-track {
  background: linear-gradient(90deg,
    hsl(0deg,100%,50%),
    hsl(60deg,100%,50%),
    hsl(120deg,100%,50%),
    hsl(180deg,100%,50%),
    hsl(240deg,100%,50%),
    hsl(300deg,100%,50%),
    hsl(360deg,100%,50%)
  );
  height: 14px;
  border: 0;
  border-radius: 999px;
}
#hue::-moz-range-track {
  background: linear-gradient(90deg,
    hsl(0deg,100%,50%),
    hsl(60deg,100%,50%),
    hsl(120deg,100%,50%),
    hsl(180deg,100%,50%),
    hsl(240deg,100%,50%),
    hsl(300deg,100%,50%),
    hsl(360deg,100%,50%)
  );
  height: 14px;
  border: 0;
  border-radius: 999px;
}
#hue::-webkit-slider-thumb {
  width: 22px; height: 22px; margin-top: -7px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid rgba(255, 0, 200, 0.9); /* subtle magenta ring */
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85) inset, 0 1px 2px rgba(0,0,0,0.15);
}
#hue::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid rgba(255, 0, 200, 0.9);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85) inset, 0 1px 2px rgba(0,0,0,0.15);
}

/* Slightly taller tracks for the other sliders to match hue height */
.panel.colorizer input[type=range]::-webkit-slider-runnable-track { height: 12px; }
.panel.colorizer input[type=range]::-moz-range-track { height: 12px; }


/* Make sliders fill the panel width by spanning the hidden value column */
.panel.colorizer .row input[type=range]{
  grid-column: 2 / 4; /* span columns 2 and (hidden) 3 */
  width: 100%;
}

.veh-group{display:flex;align-items:center;gap:8px}


/* Center wheel thumbnail when there is only one finish */
.wheel-card.single-finish{ grid-template-columns: 1fr; }
.wheel-card.single-finish .wheel-thumb{ margin: 8px auto 12px; }

.vehbar.hidden{display:none}

#viewSeg{ --viewW:132px; }


/* ===== Mobile sticky header + preview (CSS-only) ===== */
:root { --headerH: 64px; }

.brandbar{
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

@supports (padding-top: env(safe-area-inset-top)){
  .brandbar{ padding-top: env(safe-area-inset-top); }
}

@media (max-width: 768px){
  .shell{ overflow: visible; }

  /* Keep the preview window anchored under the header while scrolling */
  .stage{
    position: sticky;
    top: var(--headerH);
    z-index: 200;
    background: #fff;
    isolation: isolate;
  }
  .stage .stage-inner{ background: #fff; }

  /* Ensure the controls scroll nicely under the sticky preview */
  .panel, .right, .view-select{ position: relative; z-index: 1; }
}



/* Brand tabs */
.brand-tabs{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.brand-tab{padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:700;letter-spacing:.02em;cursor:pointer}
.brand-tab.active{background:var(--accent-soft);border-color:transparent;box-shadow:0 0 0 2px var(--accent) inset}


.wheel-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px}
.brand-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.brand-label{font-weight:800;font-family:var(--font-display);letter-spacing:.02em;color:var(--muted)}
.brand-select{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff}
@media (max-width:720px){
  .wheel-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}


/* --- Wheel thumbnail sizing: 250x250 square --- */
.wheel-grid{ 
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap:12px;
  align-items:start;
  justify-items:center;
}
.wheel-card{ 
  width:250px;
}
.wheel-thumb{
  width:250px;
  height:250px;
  margin:6px auto 8px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wheel-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
@media (max-width:720px){
  .wheel-grid{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .wheel-card{ width:200px; }
  .wheel-thumb{ width:200px; height:200px; }
}


/* --- Wheel thumbnail sizing update: 96x96, 3-up grid --- */
.wheel-grid{ 
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  align-items:start;
  justify-items:stretch;
}
.wheel-card{ 
  width:auto; /* fill grid cell */
}
.wheel-thumb{
  width:96px;
  height:96px;
  margin:6px auto 8px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wheel-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
@media (max-width:720px){
  .wheel-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* --- Wheel thumbnail fit tweaks (96x96 inside card) --- */
.wheel-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:10px 12px;
  box-sizing:border-box;
}
.wheel-thumb{
  width:96px;
  height:96px;
  margin:6px auto 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;           /* prevent any bleed */
  border-radius:8px;         /* soft corner to match UI */
}
.wheel-thumb img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.wheel-title{
  text-align:center;
  margin-top:2px;
}


/* --- Overflow fix for 96x96 thumbs ------------------------------------ */
.wheel-grid{
  grid-template-columns: repeat(3, minmax(120px, 1fr)); /* never shrink below thumb+padding */
}
.wheel-card{
  min-width:120px;
  overflow:hidden;              /* clip to rounded card */
  box-sizing:border-box;
}
.wheel-thumb{
  max-width:100%;               /* if card gets tighter, thumb scales down */
  width:96px;
  height:96px;
}


/* --- Keep wheel grid inside panel bounding box --- */
.panel.thumbs{ 
  overflow: hidden;           /* clip selection ring & cards within rounded panel */
}
.panel.thumbs .wheel-list{
  padding: 4px 8px 10px;      /* breathing room so blue focus ring doesn't touch edge */
  box-sizing: border-box;
}


/* --- OEM badge (visual only, neutral tone) --- */
.badge-oem{
  position:absolute;
  top:6px;
  right:8px;
  font-size:11px;
  line-height:1;
  padding:4px 6px;
  border-radius:999px;
  background:#f3f4f6; /* light neutral */
  color:#6b7280;      /* gray-500 */
  pointer-events:none;
  user-select:none;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

/* Import button (minimal, blends with UI) */
.hidden{ display:none !important; }


/* --- Mobile overflow fixes (lock layout to viewport width) --- */
html, body{
  max-width:100%;
  overflow-x:hidden;
}
.shell > *, .panel{ min-width:0; }
@media (max-width:980px){
  .shell{ grid-template-columns: 1fr; gap:16px; }
  .panel{ width:100%; }
}


/* Subtle action buttons (Share/Save) */
.btn-link{
  display:inline-block;
  font-size:12px;
  margin-left:8px;
  color:#6b7280;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  padding:4px 6px;
  border-radius:8px;
}
.btn-link:hover{ background:#f9fafb; border-color:#e5e7eb; }


/* === Mobile sticky + frame slider visibility hardening === */
@media (max-width: 768px){
  /* make sure grid doesn’t interfere with sticky */
  .shell{ display:block; overflow: visible; }

  /* sticky preview under header */
  .stage{
    position: sticky;
    top: var(--headerH, 64px);
    z-index: 200;
    background: #fff;
    isolation: isolate;
  }

  .stage .stage-inner{ margin-bottom: 8px; }
}

/* Make the wheel angle slider always visible and styled */
#frameSlider{
  display:block;
  width:100%;
  margin-top:12px;
}
#frameSlider::-webkit-slider-runnable-track{
  height:10px;
  background:#e5e7eb;
  border-radius:999px;
  border:0;
}
#frameSlider::-moz-range-track{
  height:10px;
  background:#e5e7eb;
  border-radius:999px;
  border:0;
}
#frameSlider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px;height:22px;border-radius:50%;
  background:#111;border:2px solid #fff;
  margin-top:-6px;
}
#frameSlider::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:#111;border:2px solid #fff;
}

/* High-contrast panel titles (brand accent) */
.panel-title{ color: var(--accent) !important; }


/* ===== Top nav (tabs) ===== */
.topnav{background:var(--bg);border-bottom:1px solid var(--line)}
.topnav-inner{max-width:1600px;margin:0 auto;padding:10px 18px;display:flex;gap:24px;align-items:center;justify-content:center}
.navlink{font-family:var(--font-display);font-weight:700;letter-spacing:var(--track-tight);text-decoration:none;padding:6px 10px;border-radius:10px;color:#cbd5e1;border-bottom:2px solid transparent}
.navlink:hover{color:#64748b}
.navlink.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ===== Contact page ===== */
.contact-shell{max-width:1000px;margin:24px auto;padding:0 18px}
.contact-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:24px}
.contact-card h1{margin:0 0 8px 0;font-family:var(--font-display);letter-spacing:var(--track-tight)}
.contact-card p{margin-top:0;color:#3f3f46}
.contact-card form{display:grid;gap:14px}
.contact-card label{display:grid;gap:6px;font-weight:600;color:#334155}
.contact-card input,.contact-card textarea{padding:12px 12px;border:1px solid var(--line);border-radius:12px;background:#0f172a;color:#e5e7eb;font:14px var(--font-ui)}
.contact-card input:focus,.contact-card textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.contact-card .grid.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-card .actions{display:flex;gap:12px;align-items:center;margin-top:4px}
.contact-card .cta{background:var(--accent);color:#fff;border:0;border-radius:12px;padding:10px 16px;font-weight:700;cursor:pointer}
.contact-card .cta:hover{filter:brightness(0.95)}
.contact-card .hint{font-size:12px;color:#6b7280}
@media (max-width:900px){ .contact-card .grid.two{grid-template-columns:1fr} }