/* =================================================================
   WRAP STUDIO styles (studio.html only; css/styles.css loads first)
   Mobile-first like styles.css. On phones the 3D view sticks to the
   top of the screen while the controls scroll underneath it, so you
   always see the car change. From 960px wide the view and the
   controls sit side by side.
   ================================================================= */
[hidden]{display:none!important}   /* some studio parts set display, so make hidden always win */

/* ---------- Intro + car picker ---------- */
.ws-head{padding-top:96px}
.ws-head h1{margin:0 0 14px}   /* uses the shared .display headline style */
.ws-head p{max-width:560px}
/* car buttons scroll sideways on phones (they're easy to swipe), and wrap on bigger screens */
.car-row{display:flex;gap:10px;overflow-x:auto;margin:20px -16px 16px;padding:2px 16px 8px;scrollbar-width:none;scroll-snap-type:x mandatory}
.car-row::-webkit-scrollbar{display:none}
.car-btn{flex:none;width:136px;scroll-snap-align:start;padding:6px 6px 10px;border-radius:20px;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;text-align:left;font:inherit;transition:border-color .2s}
.car-btn img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:#141416}
.car-btn b{display:block;font-size:.88rem;font-weight:600;line-height:1.2;margin:8px 4px 0}
.car-btn small{display:block;color:var(--muted);font-size:.74rem;margin:0 4px}
.car-btn:hover{border-color:var(--line-2)}
.car-btn[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
@media (min-width:760px){.car-row{overflow:visible;flex-wrap:wrap;margin:24px 0}.car-btn{width:160px}}

/* ---------- Workspace: 3D view + controls ---------- */
.ws{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding-bottom:40px}   /* minmax(0,…) lets the column shrink to the screen */
.vp{position:sticky;top:68px;z-index:5;height:44svh;min-height:260px;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--stage-bg)}
.stage{position:absolute;inset:0}
.stage canvas{display:block;width:100%;height:100%;touch-action:none}   /* touch-action:none = dragging spins the car instead of scrolling */
/* camera angle buttons (top left) */
.vp-views{position:absolute;left:10px;top:10px;display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--glass);backdrop-filter:blur(8px);border:1px solid var(--line)}
.vp-views button{min-width:40px;height:34px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:500 .8rem var(--sans);cursor:pointer}
.vp-views button:hover{color:var(--text);background:var(--line)}
.vp-note{position:absolute;left:12px;right:12px;bottom:10px;margin:0;text-align:center;font-size:.72rem;color:var(--dim);pointer-events:none}
/* loading overlay with a spinning ring */
.vp-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:color-mix(in srgb,var(--stage-bg) 85%,transparent);color:var(--muted);font-size:.9rem;text-align:center;padding:20px}
.spin{width:38px;height:38px;border-radius:50%;border:3px solid var(--line-2);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.vp-error{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted)}
.vp-error strong{color:var(--text)}

/* ---------- Control panel ---------- */
.panel{display:flex;flex-direction:column;border-radius:20px;border:1px solid var(--line);background:var(--card)}
/* four tabs in a row; the active one is orange */
.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:6px;border-bottom:1px solid var(--line)}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border:0;border-radius:12px;background:transparent;color:var(--muted);font:600 .76rem var(--sans);cursor:pointer;transition:background-color .2s,color .2s}
.tab svg{width:22px;height:22px}
.tab:hover{color:var(--text);background:var(--line)}
.tab[aria-selected="true"]{background:var(--accent);color:var(--on-accent)}
.tab-body{padding:16px}
.tab{letter-spacing:.06em;text-transform:uppercase;font-size:.64rem;border-radius:100px}
.tab-body:focus-visible{outline-offset:-3px}
.ctl{margin-top:18px}
.ctl:first-child{margin-top:0}
.ctl-label{display:flex;justify-content:space-between;align-items:baseline;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ctl-label span{letter-spacing:0;text-transform:none;font-weight:500;color:var(--dim)}
.help{color:var(--muted);font-size:.9rem;margin:0 0 14px}

/* the film that's on the car now */
.film-now{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line)}
.film-now i{flex:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line-2)}
.film-now b{display:block;font-size:.98rem}
.film-now small{color:var(--muted);font-size:.8rem}
/* colour family dots: 6 per row, so all 12 show without scrolling */
.fam-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.fam{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--muted);font:500 .66rem var(--sans);cursor:pointer}
.fam i{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2)}
.fam .all{background:conic-gradient(#c8102e,#f5c400,#2e8b3e,#1e3aa8,#5b2a86,#c8102e)}
.fam[aria-pressed="true"]{border-color:var(--accent);color:var(--text)}
/* finish chips */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:7px 12px;border-radius:100px;border:1px solid var(--line-2);background:transparent;color:var(--muted);font:500 .8rem var(--sans);cursor:pointer}
.chip:hover{color:var(--text)}
.chip[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.chip:disabled{opacity:.4;cursor:not-allowed}
/* film swatches */
.film-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.film-tile{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;border:0;background:none;color:var(--muted);font:500 .66rem/1.2 var(--sans);text-align:center;cursor:pointer}
.film-tile i{width:100%;aspect-ratio:1;border-radius:12px;border:2px solid var(--line);transition:transform .2s var(--out),border-color .2s}
.film-tile:hover i{transform:translateY(-2px);border-color:var(--line-2)}
.film-tile[aria-pressed="true"] i{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.film-tile[aria-pressed="true"]{color:var(--text)}
.empty-note{color:var(--muted);font-size:.9rem}
@media (min-width:420px){.film-grid{grid-template-columns:repeat(5,1fr)}}

/* parts rows */
.part-row{padding:12px 0;border-top:1px solid var(--line)}
.part-row:first-of-type{border-top:0}
.part-name{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:10px;padding:0;border:0;background:none;color:var(--text);font:600 .98rem var(--sans);cursor:pointer;text-align:left}
.part-name small{color:var(--accent-ink);font-size:.78rem;font-weight:500}
.part-sws{display:flex;flex-wrap:wrap;gap:8px}
.part-sw{width:34px;height:34px;padding:0;border-radius:50%;border:2px solid var(--line-2);cursor:pointer}
.part-sw[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.part-sw.same{background:repeating-linear-gradient(45deg,var(--card-2) 0 4px,var(--bg-2) 4px 8px)}

/* stripe presets */
.stripe-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stripe-btn{padding:12px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);text-align:left;font:inherit;cursor:pointer}
.stripe-btn b{display:block;font-size:.92rem}
.stripe-btn small{display:block;color:var(--muted);font-size:.76rem;line-height:1.35;margin-top:2px}
.stripe-btn[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.stripe-btn:disabled{opacity:.4}

/* window tint slider */
.range{width:100%;accent-color:var(--accent);height:32px}
.range-ends{display:flex;justify-content:space-between;font-size:.76rem;color:var(--dim)}

/* ---------- Panel footer: send buttons ---------- */
.panel-foot{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:16px;border-top:1px solid var(--line)}
.sum-line{margin:0;font-size:.86rem;color:var(--muted)}
.sum-line b{color:var(--text);font-weight:600}
.foot-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.panel-foot .btn{white-space:normal;text-align:center;line-height:1.2}   /* long labels may wrap on small phones */
.foot-row .btn{padding:0 12px;font-size:.9rem}
.panel-foot .link-btn{justify-self:center;font-size:.85rem}
.send-note{margin:0;font-size:.84rem;color:var(--ok);text-align:center}
.send-note:empty{display:none}

@media (min-width:960px){
  .ws{grid-template-columns:minmax(0,1fr) 400px;align-items:start}
  .vp{top:92px;height:calc(100svh - 120px);max-height:760px}
  .panel{position:sticky;top:92px;max-height:calc(100svh - 120px)}
  .tab-body{overflow-y:auto;flex:1}   /* on desktop only the controls scroll, not the whole page */
}

/* ---------- 3D model credits dialog ---------- */
.credits{max-width:520px;width:calc(100% - 32px);border:1px solid var(--line-2);border-radius:20px;background:var(--card);color:var(--text);padding:24px}
.credits::backdrop{background:rgba(0,0,0,.7)}
.credits p{font-size:.88rem;color:var(--muted);margin:0 0 12px}
.credits a{color:var(--text)}