/* The advisor tire picker (Tirelibrary T2): one look in the Booth and in Add part › Tires. Three across when there's room,
   stacked on a phone; nothing scrolls sideways except the compare table inside its own box. */
.tpk { display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--ink); }
.tpk-strip { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 8px 10px; border-radius: 10px;
  background: var(--panel-2, rgba(127,127,127,.08)); font-size: 14px; }
.tpk-ctx { font-weight: 600; }
.tpk-srcl { font-size: 12px; color: var(--ink-2); }
.tpk-q { margin: 0; font-weight: 600; }
.tpk-fine { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.tpk-chips, .tpk-tabs, .tpk-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tpk-chip, .tpk-tab { min-height: 36px; }
.tpk-tab[aria-pressed="true"] { background: var(--ink); color: var(--bg, #fff); border-color: var(--ink); }
.tpk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 10px; align-items: start; }
/* T6: four tiers in one view: four across when there's room, two by two on a phone (never a long single column) */
.tpk-cards.is-four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
@media (max-width: 560px) { .tpk-cards.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tpk-cards.is-four .tpk-box { max-width: 120px; }
  .tpk-cards.is-four .tpk-name { font-size: 14px; } .tpk-cards.is-four .tpk-card { padding: 8px; } }
.tpk .tpk-card button.tpk-more-btn { align-self: flex-start; max-width: 100%; box-sizing: border-box; white-space: normal; height: auto; min-height: 32px; text-align: left; font-size: 13px; overflow-wrap: anywhere; }
.tpk-more-tier { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.tpk-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px; border: 1px solid var(--hair, rgba(127,127,127,.25)); border-radius: 14px; background: var(--panel, transparent); }
.tpk-card.is-empty { border-style: dashed; color: var(--ink-2); }
/* T6: ONE tire card layout (the tier cards, the lists, Compare and the Recommended card): the rows in one order, each only when
   the tire data gives it. The tier is a small colored label; price leads the money rows. */
.tpk-facts { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; min-width: 0; }
.tpk-facts > li { overflow-wrap: anywhere; }
.tpk-f-tier { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.tpk-f-tier.is-best { color: var(--purple, #6a1b9a); }
.tpk-f-tier.is-better { color: var(--blue, #1565c0); }
.tpk-f-tier.is-good { color: var(--green, #2e7d32); }
.tpk-f-tier.is-economy { color: var(--ink-2); }
.tpk-f-stock, .tpk-f-season, .tpk-f-category, .tpk-f-utqg, .tpk-f-loadRange { color: var(--ink-2); }
.tpk-f-pmsf { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--blue, #1565c0); color: var(--blue, #1565c0); }
.tpk-f-benefits .tpk-ul { margin: 0; }
.tpk-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tpk-img { width: 100%; max-width: 180px; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 10px; background: #fff; }
.tpk-img.is-none { display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; box-sizing: border-box; font-size: 12px; color: var(--ink-2);
  background: var(--panel-2, rgba(127,127,127,.08)); }
.tpk-fig.is-small .tpk-img { width: 56px; max-width: 56px; font-size: 9px; padding: 2px; }
.tpk-cap { font-size: 11px; color: var(--ink-2); }
.tpk-name { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.tpk-size { font-size: 14px; font-variant-numeric: tabular-nums; }
.tpk-why { font-size: 13px; color: var(--ink-2); }
.tpk-ul { margin: 0; }
.tpk-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tpk-img { width: 100%; max-width: 180px; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 10px; background: #fff; }
.tpk-img.is-none { display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; box-sizing: border-box; font-size: 12px; color: var(--ink-2);
  background: var(--panel-2, rgba(127,127,127,.08)); }
.tpk-fig.is-small .tpk-img { width: 56px; max-width: 56px; font-size: 9px; padding: 2px; }
.tpk-cap { font-size: 11px; color: var(--ink-2); }
.tpk-name { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.tpk-size { font-size: 14px; font-variant-numeric: tabular-nums; }
.tpk-why { font-size: 13px; color: var(--ink-2); }
/* R2: a shop program is a commercial preference, shown apart from suitability (its own outlined label, never the fit line) */
.tpk-prog { align-self: flex-start; width: fit-content; max-width: 100%; box-sizing: border-box; font-size: 12px; line-height: 1.3; padding: 1px 7px; border-radius: 6px;
  border: 1px solid var(--line, rgba(127,127,127,.35)); color: var(--ink-2); overflow-wrap: anywhere; }
.tpk-ul { margin: 2px 0 0; padding-left: 18px; font-size: 13px; }
.tpk-war { font-size: 13px; }
.tpk-price { font-size: 15px; font-variant-numeric: tabular-nums; }
.tpk-price.is-none { font-size: 13px; color: var(--ink-2); }
.tpk-src { font-size: 12px; color: var(--ink-2); }
.tpk-rebate { font-size: 13px; padding: 6px 8px; border-radius: 8px; background: var(--panel-2, rgba(127,127,127,.08)); }
.tpk-rebate.is-available, .tpk-rebate.is-upcoming_only { background: rgba(255, 193, 7, .16); }
.tpk-rebate-k { font-weight: 600; }
.tpk-use { margin-left: auto; }
.tpk-on { margin-left: auto; font-weight: 600; color: var(--green, #2e7d32); }
.tpk-off { margin-left: auto; font-size: 12px; color: var(--ink-2); max-width: 16em; text-align: right; }
.tpk-confirm { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; border: 2px solid var(--blue, #1565c0); }
.tpk-details { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid var(--hair, rgba(127,127,127,.25)); font-size: 13px; }
.tpk-details h4 { margin: 8px 0 2px; font-size: 13px; }
.tpk-dl { display: grid; grid-template-columns: minmax(7em, auto) 1fr; gap: 2px 10px; margin: 0; font-size: 13px; }
.tpk-dl dt { color: var(--ink-2); }
.tpk-dl dd { margin: 0; overflow-wrap: anywhere; }
.tpk-k { font-weight: 600; }
.tpk-mf, .tpk-terms { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tpk-offer { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px solid var(--hair, rgba(127,127,127,.2)); }
.tpk-item { padding-left: 8px; }
.tpk-link { font-size: 13px; }
.tpk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tpk-li { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--hair, rgba(127,127,127,.25)); border-radius: 10px; }
.tpk-li-main { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.tpk-cmp-wrap { overflow-x: auto; }
.tpk-cmp { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.tpk-cmp th, .tpk-cmp td { padding: 4px 8px; border-bottom: 1px solid var(--hair, rgba(127,127,127,.2)); text-align: left; vertical-align: top; }
.tpk :focus-visible { outline: 3px solid var(--blue, #1565c0); outline-offset: 2px; }
@media (max-width: 480px) { .tpk-strip { font-size: 13px; } .tpk-use, .tpk-on, .tpk-off { margin-left: 0; } .tpk-row > button { flex: 1 1 auto; } }
/* In the Booth: the steps column is narrower and read from a metre away. */
.tpk-booth .tpk-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
/* T6: the Booth's four tiers in one row when its column is wide enough, else two by two; never 3 + 1 */
.tpk-booth { container-type: inline-size; }
.tpk-booth .tpk-cards.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 600px) { .tpk-booth .tpk-cards.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tpk-booth .tpk-name { font-size: 17px; }
.tpk-booth .tpk-img { max-width: 120px; }
.tpk-confirm .tpk-dl { grid-template-columns: auto 1fr; }
.tpk-booth .tpk-confirm .tpk-dl { grid-template-columns: 1fr; }
.tpk-booth .tpk-confirm .tpk-dl dd { margin-bottom: 4px; }
/* In the shop: the Add part sheet widens while the tire choices are in it, so the three cards fit across on a desktop. */
.je-sheet:has(.je-tpk .tpk-cards) { width: min(1040px, 100%); max-height: min(920px, calc(100vh - 32px)); }
/* The season row in the strip. */
.tpk-season { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tpk-chip.is-small { min-height: 30px; padding: 2px 10px; font-size: 13px; }
/* The one-line summary (collapsible mount): one row, ~44 px, the whole picker behind it. */
.tpk-sum { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; text-align: left; }
.tpk-sum-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tpk-sum-k { flex: none; font-size: 13px; color: var(--ink-2); }
.tpk-sum.is-saving, .tpk-sum.is-held { border-color: var(--amber, #b26a00); }
.tpk-sum.is-failed { border-color: var(--red, #c62828); }
.tpk-on.is-proposed { color: var(--blue, #1565c0); }
/* T3: the image sits in a box of fixed size from the first paint (no layout jump while it loads), with a quiet placeholder until
   the photo arrives; the photo fades in. Lazy loading and the error fallback are unchanged. */
.tpk-box { position: relative; width: 100%; max-width: 180px; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--panel-2, rgba(127,127,127,.08)); }
.tpk-box .tpk-img { display: block; width: 100%; height: 100%; max-width: none; transition: opacity .2s ease; }
.tpk-box.is-loading .tpk-img { opacity: 0; }
.tpk-box.is-loading::after { content: 'Loading photo…'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) { .tpk-box.is-loading { animation: tpk-pulse 1.4s ease-in-out infinite; } }
@keyframes tpk-pulse { 50% { opacity: .6; } }
.tpk-fig.is-small .tpk-box { width: 56px; max-width: 56px; }
.tpk-fig.is-small .tpk-box.is-loading::after { content: ''; }
.tpk-booth .tpk-box { max-width: 120px; }
/* A tire the data lists twice (Details). */
.tpk-dup { font-style: italic; }
/* Browse all / Needs review: facet filters and "Show more". */
.tpk-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.tpk-filter { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 10em; }
.tpk-filter select { min-height: 36px; max-width: 100%; }
.tpk-more-page { align-self: center; min-height: 40px; }
/* The Recommended tire card (Oct 20, Clayton's real call): the estimate's tire, visible without a tap. Photo in a fixed box at
   the left (no layout jump), the card's rows beside it (the one tire card layout), then one clear button to the options. */
.tpk-rec { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 12px 12px; border-radius: 14px; background: var(--surface, #fff);
  box-shadow: inset 0 0 0 2px var(--blue, #1565c0); }
.tpk-rec-k { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--blue, #1565c0); }
.tpk-rec-st { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 2px 8px; border-radius: 999px; background: rgba(21, 101, 192, .12); }
.tpk-rec-st.is-saved { color: var(--green, #2e7d32); background: rgba(46, 125, 50, .12); }
.tpk-rec-main { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; }
.tpk-fig.is-rec .tpk-box { width: 112px; max-width: 112px; aspect-ratio: 4 / 3; background: #fff; }
.tpk-fig.is-rec .tpk-img { aspect-ratio: auto; }
.tpk-fig.is-rec .tpk-img.is-none { font-size: 11px; }
.tpk-rec-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tpk-rec .tpk-name { font-size: 17px; line-height: 1.2; }
.tpk-rec-opts { align-self: stretch; min-height: 44px; font-weight: 650; }
/* T6: the four tier names after "See all 4 options" wrap inside the button on a phone (the app's buttons don't wrap by default). */
section.tpk-rec > button.tpk-rec-opts { display: block; width: 100%; text-align: center; white-space: normal; height: auto; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; line-height: 1.3; padding-top: 8px; padding-bottom: 8px; }
.tpk-rec-gbb { font-weight: 500; color: var(--ink-2); }
@media (max-width: 420px) { .tpk-rec-main { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; } .tpk-fig.is-rec .tpk-box { width: 96px; max-width: 96px; }
  .tpk-rec .tpk-name { font-size: 16px; } }