/* ONE WAY TO PICK OPTIONS (templates/_op.html, static/option_picker.js).
   Only the product pages draw it, so it is its own sheet rather than part of
   theme.css, which every page fetches before it is useful and which sits at
   its budget (test_what_a_page_costs). Tap buttons, not dropdowns: every
   choice is on screen at once, and one that cannot work stays visible,
   greyed, with its reason under it. Greyed text stays at --text-2 (6.7:1 on
   the page) so a reason is always readable. */
/* THE SPACING, in one place (owner, 2026-09-25: "even, consistent spacing
   against the divider line ... same gaps everywhere"). Each step sits
   --op-gap from the line above it and --op-gap from the line below it; the
   layout sweep measures both on every kind of product. */
:root { --op-gap: 16px; --op-chip-gap: 8px; --op-why-gap: 10px; }
.op { display: flex; flex-direction: column; }
.op-step { padding: var(--op-gap) 0; border-top: 1px solid var(--line); transition: background .3s; }
.op-step:first-child { border-top: 0; padding-top: 0; }
.op-step.is-flag { background: var(--volt-glow); border-radius: var(--radius); }
.op-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.op-name { font-family: var(--font-display); font-size: var(--text-name); color: var(--text-0);
  letter-spacing: .02em; display: inline-flex; align-items: center; gap: 8px; }
.op-name i { font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--ink-3); color: var(--gold-300);
  font-family: var(--font-body); font-size: var(--text-label); font-weight: 700; }
.op-picked { color: var(--gold-300); font-weight: 700; font-size: var(--text-small); text-align: right; }
.op-why { margin: 2px 0 var(--op-why-gap); color: var(--text-2); font-size: var(--text-small); }
.op-chips { display: flex; flex-wrap: wrap; gap: var(--op-chip-gap); }
.op-wait { margin: 0 0 var(--op-why-gap); color: var(--text-2); font-size: var(--text-small); font-style: italic; }
.op-wait:empty { display: none; }
/* A step waiting on the one above draws its note and no buttons: the note
   is then its last line, so it sits --op-gap from the divider like chips do. */
.op-step.is-waiting .op-wait { margin-bottom: 0; }
.op-chip {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 44px; padding: 9px 13px; border-radius: var(--radius);
  border: 1.5px solid var(--line-bright); background: var(--ink-2); color: var(--text-0);
  font: 600 var(--text-small)/1.2 var(--font-body); text-align: left; cursor: pointer;
}
.op-chip small { font-weight: 500; font-size: var(--text-label); color: var(--text-2); }
.op-chip small:empty { display: none; }
.op-chip:hover { border-color: var(--text-2); }
.op-chip:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.op-chip.is-on { border-color: var(--volt); background: rgba(232, 153, 33, .12); }
.op-chip.is-on small { color: var(--text-1); }
.op-chip.is-off { border-style: dashed; border-color: var(--line); background: transparent;
  color: var(--text-2); cursor: not-allowed; }
.op-chip.is-off[data-href] { cursor: pointer; }
.op-chip.is-off[data-href] small { color: var(--gold-300); }
.op-fit { margin-top: 0; }
.op-fit.is-ask { color: var(--gold-300); }
.op-versions { margin-top: var(--op-why-gap); }
/* Quiet until every step is answered, still pressable: it says which step
   is open and goes there. Full contrast: a faded gold measured 3.65:1. */
.op-add.is-waiting { background: var(--ink-3); color: var(--text-1);
  border: 1px dashed var(--volt-dim); box-shadow: none; }
.op-table-wrap > summary { cursor: pointer; color: var(--text-0); font-weight: 600;
  padding: 12px 0; list-style-position: inside; }
.op-table-wrap > summary:hover { color: var(--gold-300); }
.op-table-wrap tr[data-sku] { cursor: pointer; }
.op-table-wrap tbody tr[data-sku]:hover td { background: var(--ink-3); }

/* THE PHOTO FILLS ITS CARD (owner, 2026-09-25: a big gap between the rounded
   card and the square photo inside it). Every photo here is on white --
   supplier shots and media kits flattened onto it -- so the card is white,
   the photo runs edge to edge, and the card's own rounded corners clip it.
   With no photo the dark card stays, so "Photo coming soon" stays readable. */
.product-stage:has(img) { padding: 0; background: #fff; overflow: hidden; }
.product-stage:has(img) img { display: block; width: 100%; height: 100%;
  max-width: none; max-height: none; object-fit: contain; filter: none; }

/* ---------- what the product is, in words (_product_about.html) ---------- */
/* A long lift-kit or wheel name must wrap, not push the page sideways. */
.crumbs { flex-wrap: wrap; row-gap: 4px; }
.product-about { padding-top: 8px; max-width: 72ch; }
.product-about h2 { margin: 0 0 10px; }
.about-specs { margin: 0 0 18px; color: var(--text-1); line-height: 1.6; }
.fits-title { margin: 0 0 6px; font-size: var(--text-body); }
.fits-note { margin: 0 0 10px; }
.fits-list { columns: 2 15rem; column-gap: 24px; margin: 0 0 10px; padding-left: 1.1em;
  color: var(--text-1); line-height: 1.7; }
.fits-list li { break-inside: avoid; }
.fits-more summary { cursor: pointer; color: var(--text-2); padding: 10px 0; }
.fits-more summary:hover { color: var(--volt); }