/* ---- stage (image area + thumbnail row) ---- */
.stage { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; }

/* fullscreen expand button (sits in the thumbnail row, mirrors .vc-360) */
.vc-fs { display: flex; flex: none; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--rule); border-radius: 50%; width: 52px; height: 52px; cursor: pointer; transition: border-color .2s; }
.vc-fs svg { width: 19px; height: 19px; stroke: #1a1a1a; fill: none; }
.vc-fs:hover { border-color: #bdbdbd; }

/* immersive fullscreen image viewer */
.fs-overlay { position: fixed; inset: 0; z-index: 9998; background: #fff; display: none; overflow: hidden; }
.fs-overlay.show { display: block; }
/* Tightened from 3%/5% padding to 2%/3%, which lands the car at ~20% larger
   than it appears on the stage - measured, not guessed. NO extra transform:
   fullscreen already gains from the larger box, so scaling on top of that took
   it to 44% over the stage rather than the 20% asked for. */
.fs-overlay #fsImg, .fs-overlay #fsLth { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 2% 3%; }
.fs-overlay #fsLth { z-index: 1; pointer-events: none; }
.fs-close, .fs-nav { position: absolute; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e2e2e2; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,.08); transition: transform .2s, box-shadow .2s, border-color .2s; z-index: 2; }
.fs-close:hover, .fs-nav:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.12); border-color: #d4d0c8; }
.fs-close { top: 20px; right: 22px; width: 50px; height: 50px; }
.fs-nav { top: 50%; transform: translateY(-50%); width: 58px; height: 58px; }
.fs-nav:hover { transform: translateY(calc(-50% - 1px)); }
.fs-prev { left: 26px; } .fs-next { right: 26px; }
.fs-close svg, .fs-nav svg { width: 22px; height: 22px; stroke: #1a1a1a; fill: none; }
.fs-count { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font-size: 13px; letter-spacing: 2px; color: #111; z-index: 2; }

.stage-imgs { position: relative; flex: 1; min-height: 0; overflow: hidden; }
/* INTERIM SCALE-UP. Phil's mockup renders the car ~1000px wide; these 1920x1080
   sources carry ~20% dead white margin each side, so `contain` alone tops out
   near 700px. Scaling the contained frame past the box gets the intended
   proportion - the overflow that gets clipped is pure white background, so
   nothing is lost. The durable fix is re-cropping the sources during the webp
   conversion, using ONE shared crop box across all 294 images (sized to the
   side view, the widest). A per-image trim would make the car change size
   between angles; the uniform 1920x1080 frame is what keeps scale consistent.
   Measured car bounds as a fraction of frame width (incl. shadow):
     side 0.119-0.875 (widest)   34f 0.200-0.861   34r 0.202-0.845
     front 0.278-0.723           rear 0.294-0.706
   1.22 is the ceiling: at 1.28 the side view clears the stage edge by only
   ~16px at 2000px wide and clips below ~1700px. Those side-view bounds are
   also the crop box to use when the sources get re-cut. */
/* No image on this page is draggable. Users reach for the car and try to spin
   it - there is no rotate gesture, so the browser's native image drag took over
   and they ended up dragging the .webp out of the page instead. draggable=false
   is what actually stops it; -webkit-user-drag covers Safari, and user-select
   stops the tile labels highlighting when the drag turns into a text selection.
   This does NOT protect the images - the frames sit on a public CDN at
   predictable URLs and anyone can fetch them directly. It only stops the
   accident. */
img { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
.car-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center 45%; transform: scale(1.22); opacity: 0; transition: opacity 1.1s ease-in-out; }
.car-layer.show { opacity: 1; }
/* z-index above both crossfade layers (1 and 2); pointer-events off so it
   never eats a drag on the stage. Fades on its own so switching hide reads
   as the interior changing, not the whole car flashing. */
.lth-layer { pointer-events: none; }   /* z-index is managed by the fader (3/4) */
/* flat outline circles - Phil drops the shadow and goes a size up */
.vc-360 { display: flex; flex: none; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--rule); border-radius: 50%; width: 52px; height: 52px; color: #1a1a1a; cursor: pointer; transition: border-color .2s; z-index: 5; }
.vc-360 svg { width: 19px; height: 19px; stroke: #1a1a1a; fill: none; }
.vc-360:hover { border-color: #bdbdbd; }

/* the stage's content block: the rule and the control row share one width and
   one centre, so the rule reads as belonging to the row beneath it */
/* sized to sit just inside the car's own width, and centred - Phil's rule is
   918px in a 1319px stage, off-centre by 11px i.e. centred within slop */
.stage-foot { width: min(80%, 960px); margin: 0 auto; padding-bottom: 64px; }
.stage-rule { height: 1px; background: var(--rule); }
/* rotate pinned left, expand pinned right, angles centred between them. The
   gap is a FLOOR, not a target: space-between alone lets the thumb set grow
   until it touches the circles once the stage narrows. */
.thumb-row { display: flex; justify-content: space-between; align-items: center; gap: clamp(20px, 3vw, 48px); padding-top: 26px; }
.thumb-set { display: flex; gap: clamp(10px, 1.4vw, 22px); align-items: center; }
/* These are the same 16:9 frames as the stage, so ~35% of each thumbnail is
   dead white margin - which is why the ring read as a big empty box around a
   small car. Cropping in to the car keeps the ring tight to the vehicle.
   Scale is capped at 1.15 by the side view (car spans 0.756 of frame width);
   anything more clips its bumpers. Re-cropping the sources removes the need. */
.athumb { width: clamp(72px, 6vw, 100px); height: clamp(44px, 3.4vw, 58px); overflow: hidden; padding: 0; border-radius: 4px; background: none; cursor: pointer; opacity: .55; display: flex; align-items: center; justify-content: center; border: 0; font: inherit; -webkit-appearance: none; appearance: none; transition: opacity .2s, box-shadow .2s; }
.athumb:hover { opacity: .85; }
/* active ring: same 1px hairline as every other line in the UI. Deliberately
   quiet - the opacity step does most of the work, the ring just confirms it. */
.athumb.active { opacity: 1; box-shadow: 0 0 0 1px var(--rule); }
.athumb:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.athumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; transform: scale(1.15); display: block; }