/* T110-specific overrides on top of the RRC reference stylesheets.
   The studio backdrop is baked into every frame (#ccc2b8, sampled from the
   masters), so the stage and fullscreen paint the same colour: the frame's
   edges then vanish into the page instead of sitting as a lighter rectangle. */
:root { --stage-bg: #ccc2b8; --rule: #b3a99e; }
/* Every white SURFACE takes the backdrop colour: page, stage, panel footer,
   the round stage buttons, fullscreen and its controls, the mobile sticky
   stage. Text whites (menu hover, burger, active region) stay white. The
   hairline --rule is re-derived as a darker tan: at #e5e5e5 it would sit
   LIGHTER than the ground and read as a highlight, not a rule. */
body, .stage-imgs, .panel-foot, .vc-360, .vc-fs, .fs-overlay, .fs-close, .fs-nav { background: var(--stage-bg); }
.fs-close, .fs-nav { border-color: var(--rule); }
@media (max-width: 900px) { .stage { background: var(--stage-bg); border-bottom-color: var(--rule); } }
/* overlay pairs never take the pointer; z-index is set per layer by the Fader */
.ovl-layer { pointer-events: none; }
.fs-overlay #fsRoof, .fs-overlay #fsWhl, .fs-overlay #fsLth, .fs-overlay #fsGrille, .fs-overlay #fsHandles, .fs-overlay #fsMirror { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 2% 3%; z-index: 1; pointer-events: none; }
/* "not generated yet" notice: small, bottom-left of the stage, in the UI's
   own type. It names the missing option; it never swaps in another car. */
.stage-note { position: absolute; left: 24px; bottom: 16px; z-index: 4; font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #111; background: rgba(204,194,184,.85); padding: 8px 12px; }
/* Tiles never grow past a third of the row. RRC lets tiles fill the row so
   three wheels share the paint bars' right edge; with one or two options that
   rule made a single tile the width of the panel. */
.tile-row .wheel-tile { max-width: calc((100% - 2 * var(--tile-gap)) / 3); }
/* a selectable option with no tile image yet: a plain square, same ring */
.wheel-tile.blank .tile-img { background: #bfb5aa; }
/* a tile whose imagery does not exist yet: shown, named, not selectable */
.wheel-tile.pending { opacity: .3; cursor: default; }
.wheel-tile.pending .tile-img { background: #bfb5aa; }
.wheel-tile.pending .tile-img::before { content: attr(data-note); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: #666; }
/* Wheel tiles are square product shots: fit them whole. Roof and trim tiles are
   photo crops of the selected paint: fill the square. */
#wheelRows img { width: 100%; height: 100%; object-fit: contain; }
#roofStrip img, #trimRows img { width: 100%; height: 100%; object-fit: cover; }
/* Roof and trim tiles get the hides' treatment: never dimmed, since a dimmed tile
   misdescribes the colour, so the 2px ring carries the selection; a faint resting
   ring keeps the edge visible against the panel. */
#roofStrip .wheel-tile, #trimRows .wheel-tile { opacity: 1; }
#roofStrip .tile-img::after, #trimRows .tile-img::after { border-width: 2px; border-color: rgba(0, 0, 0, .08); }
#roofStrip .wheel-tile:hover .tile-img::after, #trimRows .wheel-tile:hover .tile-img::after { border-color: var(--rule); }
#roofStrip .wheel-tile.active .tile-img::after, #trimRows .wheel-tile.active .tile-img::after { border-color: #0a0a0a; }
/* Roof, wheel and trim tiles share one size (Luca, 2026-10-05): a four-column grid,
   so every row lines up at any panel width; grid cells lift the one-third cap. */
#roofStrip .tile-row, #wheelRows .tile-row, #trimRows .tile-row { display: grid; grid-template-columns: repeat(3, 1fr); }
/* three a row: the Alloy's fourth wraps under the first (Luca, 2026-10-14); the chosen
   name sits beside the tiles, centred on their height (.opt-strip centres its items) */
#roofStrip .wheel-tile, #wheelRows .wheel-tile, #trimRows .wheel-tile { max-width: none; }
/* Sub-sections (Luca, 2026-10-13): a small heading over each row; the grille,
   handles and mirror rows indented under their section. */
.sub-row + .sub-row, #trimRows .sub-row { margin-top: 22px; }   /* roof row, then the trim rows */
.sub-row.indent { padding-left: 18px; border-left: 1px solid var(--rule); }
.sub-label { font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: #555; margin-bottom: 10px; }
/* Summary line (Luca, 2026-10-14): each choice whole on its line, never split, and the
   dividers in the text's own dark grey, so it reads as one even block */
.sel-line .sel-wheel, .sel-line .sel-color { white-space: nowrap; }
.sel-line .sel-sep { color: #555; }
/* The hides too: panel.css lays them out two-up as on the RRC, and the one-third
   cap, resolved against a half-width cell, left them a third of the RRC's size
   (Luca, 2026-10-04: as big as on the RRC). */
#leatherStrip .wheel-tile { max-width: none; }
/* Angle thumbnails stack the stage's layers (base, roof, wheel, hide): every
   img fills the button with the same cover/scale, so the layers register. */
.athumb { position: relative; }
.athumb img { position: absolute; inset: 0; }
/* Option names wrap instead of truncating (Luca, 2026-10-04: 'Twisted 18" Alloy'
   read "TWISTED 18" AL..."): two lines when the name needs them, no ellipsis. */
.swatch .swatch-name, .opt-strip .strip-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; line-height: 1.4; }