/* =========================================================
   Pedal Peak · inner-2026.css  (all inner pages)
   No transitions, animations or smooth scroll.
   ========================================================= */

/* ---------- shared bits ---------- */
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.stack { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.measure { max-width: 62ch; color: var(--ink-soft); margin-top: var(--s-3); }
.band { background: var(--surface); border-block: 1px solid var(--line); }
.plain-list { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.plain-list a { font-weight: 600; }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.card-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.card-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-media); padding: var(--s-6); display: grid; gap: var(--s-4); align-content: start; }
.panel h2 { font-size: var(--t-h3); }
.empty { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-7) var(--s-5); border: 1px dashed var(--line-strong); border-radius: var(--r-media); grid-column: 1 / -1; }
.empty-title { font: 700 1.75rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.empty--page { border: 0; padding-inline: 0; padding-block: var(--s-8); }
.empty--page h1 { font-size: clamp(3.5rem, 2rem + 6vw, 7rem); }
.form-banner { margin-bottom: var(--s-5); padding: var(--s-4) var(--s-5); border: 1px solid var(--red-ink); border-radius: var(--r-control); background: var(--red-tint); color: var(--red-ink); font-weight: 600; }
.summary-panel { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-7); background: var(--surface); border: 1px solid var(--line); border-left: 8px solid var(--accent); border-radius: var(--r-media); max-width: 760px; }
.summary-panel h1, .summary-panel h2 { font-size: var(--t-h3); }
.summary-panel dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-5); }
.summary-panel dt { color: var(--muted); }
.summary-panel dd { margin: 0; }
.field-pair { align-items: end; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.field-pair > * { min-width: 0; }
@media (max-width: 560px) { .field-pair { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--control-line); border-radius: var(--r-control); background: var(--surface); font-size: var(--t-small); font-weight: 600; }
.chip:hover { background: var(--surface-2); border-color: var(--ink); }

/* ---------- page head ---------- */
.page-head { padding-block: var(--s-8) var(--s-6); border-bottom: 1px solid var(--line); }
.page-head-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-5) var(--s-8); align-items: end; }
.page-head h1 { font-size: clamp(3.5rem, 2rem + 6vw, 7rem); margin-top: var(--s-2); }
.page-head .lede { max-width: 48ch; }
.page-head--compact { padding-block: var(--s-6); }
.page-head--compact h1 { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); margin-top: 0; }
@media (max-width: 860px) { .page-head-inner { grid-template-columns: 1fr; } .page-head { padding-block: var(--s-7) var(--s-5); } }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); font-size: var(--t-small); color: var(--muted); margin-bottom: var(--s-4); }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--line-strong); }
.crumbs a { display: inline-flex; min-inline-size: 44px; justify-content: center; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink-soft); font-weight: 500; }
.crumbs a:hover { color: var(--accent-text); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; text-transform: capitalize; }

/* ---------- type rows (bikes / gear / accessories) ---------- */
.type-list, .brand-rows { border-top: 1px solid var(--line-strong); }
.type-row, .brand-row { display: grid; align-items: center; gap: var(--s-5); padding: var(--s-4) var(--s-2); border-bottom: 1px solid var(--line); text-decoration: none; }
.type-row { grid-template-columns: 200px minmax(0, 1fr) minmax(0, auto) 44px; }
.type-row:hover, .brand-row:hover { background: var(--surface); color: var(--ink); }
.type-row:hover .type-go, .brand-row:hover .type-go { background: var(--accent-btn); color: var(--on-accent); border-color: var(--accent-btn); }
.type-art { display: block; aspect-ratio: 5 / 3; width: 200px; }
.type-art .art, .type-art svg { width: 100%; height: 100%; }
.type-art--glyph { display: grid; place-items: center; color: var(--ink-soft); border: 1px dashed var(--line-strong); border-radius: var(--r-media); }
.type-art--glyph svg { width: 56px; height: 56px; }
.type-text { display: grid; gap: var(--s-1); }
.type-name { font: 700 clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.type-meta { display: grid; gap: var(--s-1); justify-items: end; text-align: right; color: var(--muted); font-size: var(--t-small); }
.type-meta .num:last-child { color: var(--ink); font-weight: 600; font-size: var(--t-body); }
.type-go { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--control-line); border-radius: var(--r-control); font-size: 1.25rem; }
@media (max-width: 720px) {
  .type-row { grid-template-columns: 112px minmax(0, 1fr) 44px; gap: var(--s-4); }
  .type-art { width: 112px; }
  .type-meta { grid-column: 2 / 3; justify-items: start; text-align: left; grid-row: 2; }
  .type-go { grid-row: 1 / 3; grid-column: 3; }
  .type-row .type-art { grid-row: 1 / 3; }
}
.bands { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-6); }
.bands .kicker { margin-right: var(--s-2); }
.notes-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 720px) { .notes-2 { grid-template-columns: 1fr; } }
.note-card { padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-media); background: var(--surface); display: grid; gap: var(--s-2); align-content: start; }
.note-card h3 { font-size: var(--t-h3); }

/* trade-in (dark band) */
.trade { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-6) var(--s-9); align-items: start; }
.trade h2 { max-width: 11ch; }
.trade .eyebrow { color: var(--muted); }
.trade-copy { display: grid; gap: var(--s-4); justify-items: start; }
.trade-copy p { color: var(--ink-soft); }
@media (max-width: 960px) { .trade { grid-template-columns: 1fr; } }

/* ---------- brands ---------- */
.brand-row { grid-template-columns: 220px minmax(0, 1fr) minmax(0, 14rem) 44px; padding-block: var(--s-5); }
.brand-row-mark { color: var(--ink); }
.brand-row-mark svg { width: 180px; height: auto; }
.brand-row-text { display: grid; gap: var(--s-1); color: var(--ink-soft); max-width: 58ch; }
.brand-row-name { font: 700 clamp(2rem, 1.5rem + 2vw, 3rem)/1 var(--font-display); text-transform: uppercase; color: var(--ink); }
.brand-row-meta { display: grid; gap: var(--s-1); color: var(--muted); font-size: var(--t-small); text-align: right; justify-items: end; }
.brand-row-meta .num { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) {
  .brand-row { grid-template-columns: minmax(0, 1fr) 44px; }
  .brand-row-mark { grid-column: 1; }
  .brand-row-text { grid-column: 1; }
  .brand-row-meta { grid-column: 1; text-align: left; justify-items: start; }
  .brand-row .type-go { grid-column: 2; grid-row: 1; }
}

/* ---------- listing ---------- */
.listing-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.filter-col { align-self: start; }
@media (min-height: 1100px) and (min-width: 961px) { .filter-col { position: sticky; top: 96px; } }
.filters { display: grid; gap: var(--s-5); }
.filter-block { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--s-1); }
.filter-block legend { padding: 0; margin-bottom: var(--s-2); font: 600 var(--t-small)/1.3 var(--font-text); }
.price-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.filter-toggle { display: none; }
.listing-bar { display: flex; align-items: end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); flex-wrap: wrap; }
#result-count { font: 700 1.75rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.sort-field { min-width: min(100%, 240px); }
.results .chips { margin-bottom: var(--s-4); }
@media (max-width: 960px) {
  .listing-layout { grid-template-columns: 1fr; gap: var(--s-5); }
  .filter-toggle { display: inline-flex; width: 100%; }
  .js .filters:not(.is-open) { display: none; }
  .filters.is-open { margin-top: var(--s-4); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-media); background: var(--surface); }
}

/* ---------- modal (quick view, sign-up) ---------- */
.modal-dialog { position: fixed; inset: 0; margin: auto; width: min(960px, calc(100vw - 2 * var(--s-4))); max-width: none; max-height: calc(100dvh - 2 * var(--s-4)); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-media); box-shadow: var(--shadow-overlay); }
.modal-dialog:not([open]) { display: none; }
#signup-dialog { width: min(520px, calc(100vw - 2 * var(--s-4))); height: fit-content; }
.modal { padding: var(--s-6); display: grid; gap: var(--s-5); }
.modal-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.modal-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.modal h2 { font-size: var(--t-h3); }
.modal-grid .art-media { border-radius: var(--r-media); }
@media (max-width: 720px) { .modal-grid { grid-template-columns: 1fr; } .modal { padding: var(--s-5); } }
.spec-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.spec-list > div { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.spec-list dt { color: var(--muted); font-size: var(--t-small); }
.spec-list dd { margin: 0; font-weight: 500; }

/* ---------- product ---------- */
#product-root { min-height: 80svh; }
.product-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; }
.product-art { position: sticky; top: 96px; }
.product-art .art-media { border-radius: var(--r-media); background: var(--surface); border: 1px solid var(--line); }
.product-buy { display: grid; gap: var(--s-4); align-content: start; }
.product-buy h1 { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); line-height: .95; }
.product-buy .kicker a { text-decoration: none; }
.product-buy .kicker a:hover { text-decoration: underline; color: var(--accent-text); }
.product-price { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
.price-lg { font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem); }
.size-list { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.size-chip { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-control); font: 500 var(--t-small)/1 var(--font-mono); background: var(--surface); }
.buy-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: end; padding-top: var(--s-3); }
.qty-field { width: 96px; }
.assure { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--ink-soft); font-size: var(--t-small); }
.assure li::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--accent); margin-right: var(--s-3); }
.product-specs, .related { margin-top: var(--s-9); }
.product-specs h2, .related h2 { font-size: var(--t-h3); margin-bottom: var(--s-5); }
.related .section-head { margin-bottom: var(--s-5); }
.spec-list--wide { max-width: 860px; }
@media (max-width: 900px) { .product-layout { grid-template-columns: 1fr; gap: var(--s-6); } .product-art { position: static; } }

/* ---------- repairs ---------- */
.book-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-8); align-items: start; }
.book-steps { display: grid; gap: var(--s-8); }
.step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--s-4); }
.step > legend { display: flex; align-items: center; gap: var(--s-3); padding: 0; margin-bottom: var(--s-4); font: 700 clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; float: left; width: 100%; }
.step > legend + * { clear: both; }
.step-n { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--ink); font: 500 var(--t-small)/1 var(--font-mono); }
.packages { display: grid; border-top: 1px solid var(--line-strong); }
.package { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: var(--s-4) var(--s-5); align-items: start; text-align: left; width: 100%; min-height: 44px; padding: var(--s-4) var(--s-3); background: none; border: 0; border-bottom: 1px solid var(--line); color: inherit; }
.package:hover { background: var(--surface); }
.package.is-selected { background: var(--surface); box-shadow: inset 4px 0 0 var(--accent); }
.package-mark { width: 24px; height: 24px; margin-top: var(--s-1); border: 1.5px solid var(--control-line); border-radius: 50%; background: var(--bg); }
.package.is-selected .package-mark { border-color: var(--ink); background: radial-gradient(circle, var(--accent) 0 38%, var(--bg) 42%); }
.package-main { display: grid; gap: var(--s-1); color: var(--ink-soft); }
.package-name { font: 700 1.625rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.package-inc { font-size: var(--t-small); color: var(--muted); }
.package-days { color: var(--muted); font-size: var(--t-small); padding-top: 4px; white-space: nowrap; }
.package-price { font-size: 2rem; white-space: nowrap; }
@media (max-width: 640px) {
  .package { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .package-days { grid-column: 2; grid-row: 2; padding: 0; }
  .package-price { grid-column: 3; grid-row: 1; }
}
.when { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-6); align-items: start; }
@media (max-width: 800px) { .when { grid-template-columns: 1fr; } }
.cal-head, .month-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.cal-head .cal-title, .month-nav h2 { font: 700 1.5rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; text-align: center; }
@media (max-width: 359px) { .calendar { margin-inline: calc(-1 * var(--s-4)); } }
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendar .dow { text-align: center; padding-block: var(--s-2); font: 500 var(--t-meta)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.calendar button { min-height: 48px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); font-variant-numeric: tabular-nums; font-weight: 600; position: relative; }
.calendar button:hover:not(:disabled):not([aria-pressed="true"]) { border-color: var(--ink); background: var(--surface-2); }
.calendar button:disabled { background: transparent; color: var(--muted); border-color: transparent; cursor: not-allowed; }
.calendar button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-2); }
.slot { min-height: 48px; padding: 0 var(--s-2); border: 1px solid var(--control-line); border-radius: var(--r-control); background: var(--surface); font: 500 var(--t-small)/1 var(--font-mono); }
.slot:hover:not(:disabled):not([aria-pressed="true"]) { border-color: var(--ink); background: var(--surface-2); }
.slot:disabled { color: var(--muted); border-color: var(--line); background: transparent; cursor: not-allowed; }
.slot[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.book-summary { position: sticky; top: 96px; display: grid; gap: var(--s-4); padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-media); background: var(--surface); }
.book-summary dl { display: grid; gap: var(--s-3); }
.book-summary dl > div { display: grid; gap: var(--s-1); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.book-summary dt { font: 500 var(--t-meta)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.book-summary dd { margin: 0; font-weight: 600; }
.past { margin-top: var(--s-7); }
.past h2 { font-size: 2rem; margin-bottom: var(--s-3); }
.past ul { display: grid; gap: var(--s-2); }
@media (max-width: 980px) { .book-layout { grid-template-columns: 1fr; gap: var(--s-6); } .book-summary { position: static; } }

/* ---------- rides ---------- */
.rides-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-block: var(--s-5); }
.rides-bar .seg { width: 220px; }
.month-nav { margin: 0; gap: var(--s-4); }
.ride-month-title { font-size: var(--t-h3); margin-block: var(--s-6) var(--s-3); }
.ride-list { display: grid; border-top: 1px solid var(--line-strong); }
.ride-month .ride:first-of-type { border-top: 1px solid var(--line-strong); }
.ride { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: var(--s-6); padding-block: var(--s-6); border-bottom: 1px solid var(--line); align-items: start; scroll-margin-top: 112px; }
.ride[data-selected] { background: var(--surface); box-shadow: inset 4px 0 0 var(--accent); padding-inline: var(--s-4); }
.ride-date { display: grid; gap: var(--s-1); justify-items: start; }
.ride-day { font: 700 5rem/.85 var(--font-display); }
.ride-mon { font: 500 var(--t-meta)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ride-main { display: grid; gap: var(--s-3); justify-items: start; }
.ride-main h3 { font-size: var(--t-h3); }
.ride-main > p:not(.kicker) { color: var(--ink-soft); max-width: 60ch; }
.ride-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-5); width: 100%; margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.ride-facts dt { font: 500 var(--t-meta)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ride-facts dd { margin: 0; font-size: var(--t-small); font-weight: 500; }
@media (max-width: 800px) {
  .ride-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ride { grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-4); }
  .ride-day { font-size: 3.5rem; }
  .ride-act { grid-column: 1 / -1; }
}
.calendar--rides { margin-bottom: var(--s-5); }
.calendar--rides .day-btn { min-height: 56px; background: transparent; border-color: var(--line); color: var(--muted); }
.calendar--rides .day-btn.has-ride { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.calendar--rides .day-btn.has-ride::after { content: ""; position: absolute; left: 50%; bottom: var(--s-2); width: 8px; height: 8px; margin-left: -4px; background: var(--accent); }
.calendar--rides .day-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.signups-title { font-size: 2rem; margin-top: var(--s-7); }

/* ---------- finder ---------- */
.finder-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); align-items: start; }
.finder-form { display: grid; gap: var(--s-5); }
.finder-result { position: sticky; top: 96px; display: grid; gap: var(--s-4); justify-items: start; padding: var(--s-7); border: 1px solid var(--line); border-radius: var(--r-media); background: var(--surface); min-height: 320px; align-content: start; }
.finder-result.has-result { border-left: 8px solid var(--accent); }
.size-out { font: 700 clamp(4rem, 2.5rem + 6vw, 8rem)/.9 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.size-out--empty { color: var(--line-strong); }
@media (max-width: 900px) { .finder-layout { grid-template-columns: 1fr; gap: var(--s-6); } .finder-result { position: static; padding: var(--s-5); min-height: 0; } }

/* ---------- visit ---------- */
.visit-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: stretch; }
.hours-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours-table th, .hours-table td { padding: var(--s-3) var(--s-2); text-align: left; border-bottom: 1px solid var(--line); }
.hours-table thead th { font: 500 var(--t-meta)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border-bottom-color: var(--line-strong); }
.hours-table tbody th { font-weight: 500; }
.hours-table tr[aria-current="date"] { background: var(--surface-2); box-shadow: inset 4px 0 0 var(--accent); font-weight: 700; }
.map-frame { border-radius: var(--r-media); overflow: hidden; border: 1px solid var(--line); }
.map-frame svg { width: 100%; height: auto; }
.map-note { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); color: var(--muted); font-size: var(--t-small); }
.map-note .tag::before { background: var(--accent); }
#connect h2 { font-size: var(--t-h3); }
@media (max-width: 900px) { .visit-grid { grid-template-columns: minmax(0, 1fr); } .panel { padding: var(--s-5); } }

/* ---------- basket + compare ---------- */
.compare-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3) var(--s-6); margin-bottom: var(--s-6); }
.compare-head h1 { font-size: clamp(3.5rem, 2rem + 6vw, 7rem); }
.basket-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--s-8); align-items: start; }
.basket-lines { border-top: 1px solid var(--line-strong); }
.basket-line { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: var(--s-5); padding-block: var(--s-5); border-bottom: 1px solid var(--line); align-items: center; }
.basket-art { display: block; aspect-ratio: 5 / 4; }
.basket-info { display: grid; gap: var(--s-2); justify-items: start; }
.basket-name { font: 700 1.75rem/1.05 var(--font-display); text-transform: uppercase; }
.basket-name a { text-decoration: none; }
.basket-name a:hover { color: var(--accent-text); }
.basket-end { display: grid; gap: var(--s-2); justify-items: end; align-self: stretch; align-content: space-between; }
.basket-summary { position: sticky; top: 96px; display: grid; gap: var(--s-4); padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-media); background: var(--surface); }
.choice-row { display: grid; gap: var(--s-2); }
.choice { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-3) var(--s-4); border: 1px solid var(--control-line); border-radius: var(--r-control); background: var(--bg); min-height: 44px; }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 4px 0 0 var(--accent); }
.choice input { margin: 2px 0 0; width: 20px; height: 20px; accent-color: var(--ink); }
.choice span { display: grid; gap: var(--s-1); }
.choice span span { color: var(--muted); font-size: var(--t-small); }
.totals { display: grid; gap: var(--s-2); }
.totals > div { display: flex; justify-content: space-between; gap: var(--s-4); }
.totals dt { color: var(--ink-soft); }
.totals dd { margin: 0; }
.totals .total { padding-top: var(--s-3); border-top: 1px solid var(--line-strong); font: 700 2rem/1 var(--font-display); }
.totals .total dt { color: var(--ink); }
@media (max-width: 980px) { .basket-layout { grid-template-columns: 1fr; gap: var(--s-6); } .basket-summary { position: static; } }
@media (max-width: 560px) { .basket-line { grid-template-columns: 88px minmax(0, 1fr); } .basket-end { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; align-items: center; } }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-media); background: var(--surface); }
.cmp-table { border-collapse: collapse; width: 100%; min-width: 640px; table-layout: fixed; }
.cmp-table th, .cmp-table td { padding: var(--s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.cmp-table th:first-child, .cmp-table td:first-child { border-left: 0; width: 160px; }
.cmp-table tbody th { font: 500 var(--t-meta)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cmp-table thead th { display: table-cell; }
.cmp-table thead th > * { display: block; }
.cmp-name { margin-block: var(--s-3) var(--s-1); font: 700 1.75rem/1.05 var(--font-display); text-transform: uppercase; text-decoration: none; }
.cmp-price { font: 700 1.75rem/1 var(--font-display); }
.cmp-art { border-radius: 0; max-width: 240px; }
.cmp-table th:first-child { width: 140px; }
.table-wrap:focus-visible { outline-offset: 2px; }

/* ---------- forms demo ---------- */
.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--s-6) var(--s-7); }
.demo-block { display: grid; gap: var(--s-4); align-content: start; }
.demo-block h2 { font-size: 2rem; padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }

.card-body h3 a { display: inline-flex; align-items: center; min-height: 44px; }
#product-root, #basket-page, #compare-root { min-height: 70vh; }
.fallback-note { max-inline-size: 60ch; }
@media (max-width: 360px) { .calendar { gap: 0; } }
@media (min-width: 361px) { .hours-table td { white-space: nowrap; } }
@media (max-width: 900px) { .panel { padding: var(--s-4); } }
#product-root { min-height: 100svh; }
@media (max-width: 1100px) { .book-layout { grid-template-columns: 1fr; gap: var(--s-6); } .book-summary { position: static; } }