/* ---- right options panel ---- */
/* Fixed title, scrolling options, pinned footer. The car stage never moves;
   only .panel-scroll does. */
.panel { display: flex; flex-direction: column; padding: 72px 46px 46px; overflow: hidden; min-height: 0; }

.panel-model { font-family: 'Jost', sans-serif; font-size: 19px; letter-spacing: 3px; text-transform: uppercase; color: #111; font-weight: 400; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
/* Same three-column shape as a paint row: tiles occupy the bar's share of the
   width, then the gap, then the name of whatever is selected - so the wheel and
   pillar labels land in the SAME column as the paint labels.
   Only the selection is named. Labelling every tile (a previous pass) put five
   names on screen competing with the fourteen paint names. */
.opt-strip { display: flex; gap: var(--bar-gap); width: 100%; align-items: center; }
/* 74%, matching the ACTIVE paint bar - the selected paint is the only one
   showing a name, so that is the column every label has to land in. */
/* container-type so the tiles can size off the ROW rather than a fixed px.
   A fixed --tile was wrong twice: it was set on .panel, which is itself the
   container, so the narrow-panel override never matched (an element cannot
   match its own container query); and fixed tiles could exceed the row's 76%
   basis, which a flex item will not shrink below its content - so the row grew
   past the panel and squeezed the label to ZERO width, showing "LIME...". */
/* The row keeps the SELECTED bar's width so the label column beside it does not
   move, but pads in by --bar-inset so the tiles themselves end on the
   UNSELECTED bar's edge. Shrinking the row instead would drag the wheel and
   pillar labels 34px left of the paint label, breaking the column. */
.tile-row { flex: 0 0 max(140px, calc(100% - var(--label-col) - var(--bar-gap))); min-width: 0; padding-right: var(--bar-inset); display: flex; gap: var(--tile-gap); }
/* The four hides sit two-up instead of four-across, which doubles each tile
   for one extra row of height. A wheel stays readable small because you know
   it by its shape; a leather swatch is a flat material sample, and at a
   quarter of the strip width there was not enough of it to read the grain.
   Same flex basis and --bar-inset as the other rows, so the left and right
   edges still line up with the wheels and C-pillar above it. `flex` on
   .wheel-tile is simply ignored once this is a grid. */
#leatherStrip .tile-row { display: grid; grid-template-columns: 1fr 1fr; }

/* Paint swatches. Phil's pattern: one flat colour per bar, name shown only on
   the selected one. (The diagonal two-tone bar that used to live here paired
   14 paints into 7 rows - kept in git at 67c7570 if we go back to it.) */
.colors { display: flex; flex-direction: column; gap: 9px; }
/* Families: the first bar of each group sits one bar-gap further down. */
.swatch.group-start { margin-top: 9px; }
.swatch { display: flex; align-items: center; gap: var(--bar-gap); width: 100%; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
/* FIXED basis, not `flex: 1 1 auto`. Sizing the bar off the leftover space made
   its length depend on the NAME beside it - and names occupy their width even at
   opacity 0 - so every row came out a different length. Invisible at desktop
   widths where the old max-width clamped them all equal, obvious on iPad, where
   bars measured 191-210px down the column. Length now means one thing only:
   which paint is selected. */
.swatch .bar { flex: 0 0 max(120px, calc(100% - var(--label-col) - var(--bar-gap) - var(--bar-inset))); height: 26px; border-radius: 7px;
               transition: flex-basis .22s ease; }
.swatch.active .bar { flex-basis: max(140px, calc(100% - var(--label-col) - var(--bar-gap))); }
/* light paints (Fuji White, Sahara Dust) would otherwise vanish into the white
   panel - the hairline gives every bar an edge, in the same weight as the rules */
.swatch .bar { box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); }
/* Only the SELECTED option is named - paint, wheel and pillar alike. Naming all
   fourteen paints put a wall of text beside the bars and left nothing to mark
   the selection except length. min-width:0 + ellipsis so a long name can never
   push a row wider than the panel. */
.swatch .swatch-name { opacity: 0; transition: opacity .2s; }
.swatch.active .swatch-name { opacity: 1; }
/* Right-aligned so every label finishes flush with the accordion's +/- glyph
   at 1954 - the panel's content edge - instead of trailing off mid-panel and
   leaving dead space. Bars widened to 62%/74% to close the gap from the other
   side; 74% is the most they can take while still leaving room for the widest
   label ("Mariana Black", measured at 112px). */
.swatch .swatch-name, .opt-strip .strip-name { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #111; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swatch:focus-visible { outline: 2px solid #111; outline-offset: 3px; }

/* Wheel + C-pillar tiles. Phil's mockup has both sections collapsed, so there's
   no reference for these - matched to the angle-thumbnail treatment (opacity
   step + 1px hairline ring) so the whole UI speaks one language. Open item. */
/* Fixed square tiles, identical across both strips, rather than each tile
   stretching to fill its row. Stretching made the wheels 131x131 and the
   pillars 202x104 - the same control at two different sizes. The wheel row
   still very nearly fills the width (3 x 130 + gaps ~= the 76% row), the
   pillar row simply runs shorter, which is what having two options looks
   like. */
/* Tiles FILL their row, so the last tile in each strip lands on the same right
   edge as the active paint bar - the row is already sized to that edge. Three
   wheels and two pillars therefore share both edges, which is the rule Luca
   asked for; the pillar tiles coming out larger than the wheels is the price of
   it, and he released the equal-size rule to buy this. */
.wheel-tile { flex: 1 1 0; min-width: 0; padding: 0; background: none; cursor: pointer; border: none; opacity: .55; transition: opacity .2s; }
/* Size derived from the row: --fill is exactly what a wheel would be if three
   filled the row, so tiles can never overflow it at any panel width, and the
   pillar strip gets the identical number from the identical formula. TILE_SCALE
   is the only knob - 0.8 lands on the 104px Luca approved at desktop. */
/* Selection ring drawn INSIDE the tile, via a pseudo-element rather than an
   outer box-shadow. The first tile in each row sits exactly on .panel-scroll's
   content edge, and that element computes overflow-x: auto (setting overflow-y
   forces it), so it clips there - an outer ring's outermost pixel fell one
   pixel past the boundary and got shaved off the left of the selected tile.
   A pseudo-element also sits ABOVE the image, which an inset box-shadow would
   not: inset shadows paint under content and the <img> fills the tile. */
.wheel-tile .tile-img { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; }
.wheel-tile .tile-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid transparent; pointer-events: none; transition: border-color .2s; }
.wheel-tile.active .tile-img::after { border-color: var(--rule); }
/* NOTHING is cropped. Both were: the wheels carried transform:scale(1.12)
   inside an overflow:hidden tile, which shaved the outer 12% off a round
   object, and the pillars used object-fit:cover, which crops by definition.
   Both sources are square, so contain at a square tile shows all of both. */
#wheelStrip img, #pillarStrip img, #leatherStrip img { width: 100%; height: 100%; object-fit: contain; }
/* radius on the image too, not just the tile: the C-pillar swatches are
   edge-to-edge photo crops (no white margin like the wheels have), so square
   image corners inside a rounded tile read as the outline breaking at the
   corners. Inner radius = tile radius minus the 4px padding. */
.wheel-tile img { display: block; }
.wheel-tile:hover { opacity: .85; }
.wheel-tile.active { opacity: 1; }
/* The hides are never dimmed. Fading the unselected tiles to 55% over a white
   panel washed the material out - black read as mid grey and chocolate as
   taupe - so the swatch stopped describing the leather, which is the only job
   it has. The wheels and C-pillar keep the dimming: those are product shots on
   white, where 55% costs some contrast but never changes what you think the
   part is.
   Selection therefore has to be carried entirely by the ring, so it is 2px and
   near-black rather than the 1px #e5e5e5 the other strips use - that grey is
   invisible against the bone hide. Hover gets the grey ring, which is now the
   only affordance left once opacity is off the table. */
#leatherStrip .wheel-tile { opacity: 1; }
#leatherStrip .tile-img::after { border-width: 2px; }
#leatherStrip .wheel-tile:hover .tile-img::after { border-color: var(--rule); }
#leatherStrip .wheel-tile.active .tile-img::after { border-color: #0a0a0a; }
.wheel-tile:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

/* Fold sections. No cards: a rule under every section, plus one under the open
   section's own header, reproduces Phil's separation exactly with no doubling. */
.acc { border-bottom: 1px solid var(--rule); }
.acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: none; cursor: pointer; padding: 18px 0; font-family: inherit; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #111; }
.acc.open .acc-head { border-bottom: 1px solid var(--rule); }
/* Jost carries no Japanese glyphs, so a JP heading falls back per glyph to
   whatever the OS happens to pick - and the kana end up in a different face
   from the latin. Name the stack instead. Tracking comes down from 2px: that
   was set for airy latin caps, and between kana it reads as broken spacing.
   text-transform: uppercase is inherited and simply does nothing here. */
.acc-head[lang="ja"] { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; letter-spacing: 1px; }
/* +/- glyph rather than a chevron */
.acc-head::after { content: "+"; font-size: 17px; font-weight: 300; line-height: 1; color: #111; }
.acc.open .acc-head::after { content: "\2212"; }
.acc-body { overflow: hidden; max-height: 0; transition: max-height .4s ease; }
.acc.open .acc-body { max-height: 900px; }
.acc-pad { padding: 24px 0 30px; }

/* pinned footer - stays put wherever the options list is scrolled to */
/* Custom scroll indicator. The native bar can't do this: macOS overlay
   scrollbars fade on idle and round their own ends, and setting the standard
   scrollbar-width/-color properties makes Chrome ignore ::-webkit-scrollbar
   rules altogether. So the native one is hidden and .scroll-ind is driven from
   scrollTop instead - always visible, exactly 1px, square. */
/* The wrap reaches 34px past the panel's right padding so the indicator sits
   near the page edge; .panel-scroll takes that 34px back as padding, so the
   options keep their original right inset. */
.scroll-wrap { position: relative; flex: 1; min-height: 0; display: flex; margin-right: -34px; }
.panel-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding-right: 34px; }
.panel-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.scroll-ind { position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: var(--rule); pointer-events: none; }
.scroll-ind span { position: absolute; left: 0; top: 0; width: 100%; background: #111; will-change: transform; }
.panel-foot { flex: none; padding-top: 26px; background: #fff; }
/* 15px, not 18: with C-pillar in, three items at 18px wrap in a 640px panel */
.sel-line { font-family: 'Jost', sans-serif; font-size: 15px; letter-spacing: 1.6px; text-transform: uppercase; color: #111; }
/* nowrap per item: if the line wraps on a narrow panel it must break BETWEEN
   names, never mid-name ("BAHAMA / GOLD"). The spans sit adjacent in the markup
   with no whitespace between them, so nowrap on each left the whole line with
   no break opportunity at all - it overflowed and got clipped by the panel
   instead of wrapping ("MATCHED PI..."). A <wbr> after each separator is the
   break point, and costs no width. */
.sel-color, .sel-wheel { white-space: nowrap; }
.sel-color { font-weight: 600; }
.sel-wheel { font-weight: 300; color: #555; }
.sel-sep { color: #cfcfcf; font-weight: 300; margin: 0 12px; }

.cta { display: block; text-align: center; margin-top: 20px; background: #0a0a0a; color: #fff; text-decoration: none; padding: 21px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: background .2s; }
.cta:hover { background: #2a2a2a; }