/* /wrap-simulator — colour picker for vinyl wrap.
   Sibling of tint-sim.css. The stage holds one image that swaps source as the
   colour changes; everything else is the picker around it. */

.ws{max-width:var(--wrap);margin:0 auto;padding:0 18px}

/* The renders are cut out with alpha, so the room behind the car is whatever
   this paints. A real showroom, shot empty at the same eye line as the car,
   with the contact shadow baked in at the spot the car occupies in every
   render — the backdrop and the cut-outs share one 1200×675 frame, so
   cover-positioning keeps them registered. The solid colour holds the frame
   for the instant before the backdrop decodes. */
.ws-stage{position:relative;background:#0a0c0e url(/assets/images/wrap-sim/showroom-stage.webp) center/cover no-repeat;
  border-radius:var(--radius);overflow:hidden}
.ws-stage img{display:block;width:100%;height:auto}
/* Reserve the frame before the first image decodes so the controls below do not
   jump on load — the renders are all one aspect ratio. */
.ws-stage{aspect-ratio:1200/675}
/* The cut-out at full frame spanned the room wall to wall and read as pasted
   on, not parked in. Scaled to 84% and set on the floor, with the baked
   contact shadow moved to the same footprint. Percentage units throughout so
   car and shadow stay registered at any stage width. */
.ws-stage img{position:absolute;left:50%;bottom:3%;width:84%;height:auto;transform:translateX(-50%)}

.ws-read{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:baseline;
  padding:14px 16px;background:var(--ink-800);border-radius:var(--radius);margin-top:12px}
.ws-read .nm{font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff}
.ws-read .cd{font-size:12px;letter-spacing:.06em;color:var(--blue-200);
  border:1px solid var(--ink-600);padding:3px 9px;border-radius:999px}
.ws-read .fx{font-size:13px;color:var(--text-inv-2)}

.ws-group{margin-top:22px}
.ws-label{display:block;font:600 11px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-inv-2);margin:0 0 9px}

.ws-tabs{display:flex;flex-wrap:wrap;gap:8px}
.ws-tab{appearance:none;cursor:pointer;font-family:var(--font-body);font-size:13px;font-weight:600;
  color:var(--text-inv-2);background:var(--ink-800);border:1px solid var(--ink-700);
  padding:9px 16px;border-radius:999px;transition:.15s}
.ws-tab:hover{color:#fff;border-color:var(--ink-600)}
.ws-tab[aria-pressed="true"]{background:var(--blue-700);border-color:var(--blue-700);color:#fff}
.ws-tab small{display:block;font-weight:400;font-size:10px;opacity:.75}

.ws-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.ws-sw{cursor:pointer;background:none;border:0;padding:0;text-align:left;font-family:var(--font-body)}
.ws-sw i{display:block;height:50px;border-radius:11px;border:2px solid transparent;
  box-shadow:inset 0 -13px 20px rgba(0,0,0,.3), inset 0 7px 13px rgba(255,255,255,.1)}
.ws-sw[aria-pressed="true"] i{border-color:var(--blue-500);
  box-shadow:0 0 0 3px rgba(0,159,227,.25), inset 0 -13px 20px rgba(0,0,0,.3), inset 0 7px 13px rgba(255,255,255,.1)}
.ws-sw span{display:block;font-size:11px;line-height:1.3;color:var(--text-inv-2);margin-top:6px}
.ws-sw b{display:block;font-size:10px;color:#6b757d;letter-spacing:.04em;margin-top:2px;font-weight:600}
.ws-sw[aria-pressed="true"] span{color:#fff}

.ws-note{margin-top:18px;padding:11px 14px;border-left:3px solid var(--blue-700);
  background:rgba(0,119,213,.09);border-radius:0 10px 10px 0;
  color:var(--text-inv-2);font-size:13px;line-height:1.55}
.ws-note b{color:#fff}

/* On a phone the swatch grid is taller than the viewport — 17 gloss colours is
   five rows — so picking a colour meant scrolling the car completely off screen
   and choosing blind, then scrolling back up to see what happened. Same failure
   the tint simulator had with its sliders, same fix: pin the stage under the
   (sticky, 63px) site header so the car repaints in view while the swatches
   scroll beneath it. Opaque background and a hair of z-index so the picker
   slides under the stage, not through it. */
@media(max-width:680px){
  /* No background override here — the shorthand would wipe the showroom image,
     and the backdrop is already opaque, which is all the pinning needs. */
  .ws-stage{position:sticky;top:70px;z-index:6}
}

@media(max-width:640px){
  .ws-swatches{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))}
  .ws-sw i{height:42px}
  .ws-read{padding:12px 13px}
}