/* Inventory list and unit cards (inventory.html, favorites.html). Loaded after site.css. */
/* favorites page */
.favs { min-height: 70vh; } /* room for the cards, which arrive after load, so the footer doesn't jump */
.favs__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid #222; padding-bottom: 12px; }
.favs__head .page-title { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.favs__note { margin: 0; color: var(--muted); font-size: 15px; }
.favs__gone { margin: 12px 0 0; padding: 8px 12px; background: #1f1a0b; border-left: 3px solid #e0a800; font: 400 14px var(--cond); }
.favs__error { padding: 30px 0; color: #ccc; }
/* Viewed Powersports (/viewed): when each unit was viewed, and a way to drop it */
.hist__tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hist__pause { display: inline-flex; align-items: center; gap: 8px; color: #ccc; font: 400 15px var(--cond); cursor: pointer; }
.hist__pause input { width: 18px; height: 18px; accent-color: var(--red); }
.hist__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; background: #1b1b1b; color: #aaa; font: 400 13px var(--cond); }
.hist__meta button { padding: 2px 0; border: 0; background: none; color: #ddd; font: 700 13px var(--cond); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
.hist__meta button:hover { color: var(--red); }
.favs__empty { text-align: center; padding: 50px 20px 30px; }
.favs__empty-icon { display: inline-grid; place-items: center; width: 84px; height: 84px; margin-bottom: 14px; border-radius: 50%; background: #1b1b1b; border: 2px solid #2e2e2e; color: var(--red); font-size: 40px; }
.favs__empty h2 { font: 400 28px var(--display); text-transform: uppercase; color: #fff; }
.favs__empty p { color: #ccc; font-size: 16px; max-width: 46ch; margin: 0 auto 20px; }

/* ---------------------------------------------------------------- inventory list */
/* desktop only: under 992px the page shell's .panel padding (site.css) applies */
@media (min-width: 992px) { .inv { padding-top: 12px; } }
.inv-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 14px; }
.inv-top .page-title { margin: 4px 0; }
.inv-search { position: relative; flex: 0 1 460px; }
.inv-search form { display: flex; }
.inv-search input { flex: 1; min-width: 0; height: 40px; border: 1px solid #ccc; border-right: 0; background: #f2f2f2; color: #000; padding: 0 12px; font: 400 16px var(--cond); }
.inv-search input:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--red); }
.inv-search button { width: 44px; border: 0; background: var(--red); color: #fff; font-size: 16px; cursor: pointer; }
.inv-search .voice { width: 40px; border: 1px solid #ccc; border-width: 1px 0; background: #f2f2f2; color: var(--red); }
.inv-search input:focus + .voice { background: #fff; }
/* scrolled away and brought back (inventory.js): fixed under the pinned header */
.inv-search.is-pinned { position: fixed; z-index: 40; top: var(--sticky-top, 0px); left: var(--pin-left); width: var(--pin-w); padding: 8px; margin-left: -8px; box-sizing: content-box; background: #111; border-radius: 0 0 6px 6px; box-shadow: 0 12px 26px rgba(0,0,0,.55);
  transform: translate3d(0, calc(-100% - 30px), 0); opacity: 0; visibility: hidden; will-change: transform, opacity;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .16s linear .12s, visibility 0s .28s; }
.inv-search.is-pinned.is-shown { transform: none; opacity: 1; visibility: visible; transition: transform .38s cubic-bezier(.16,1,.3,1), opacity .18s linear; }
@media (prefers-reduced-motion: reduce) { .inv-search.is-pinned, .inv-search.is-pinned.is-shown { transition: none; } }

.inv-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; }

/* facet sidebar */
.facets { position: sticky; top: calc(var(--sticky-top, 0px) + 12px); max-height: calc(100vh - var(--sticky-top, 0px) - 30px); overflow-y: auto; background: #161616; border: 1px solid #2a2a2a; border-top: 3px solid var(--red); padding: 4px 16px 16px; box-shadow: 0 14px 30px rgba(0,0,0,.4); font-family: var(--cond); scrollbar-width: thin; scrollbar-color: #444 #111; }
.facets__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 10px; border-bottom: 1px solid #2e2e2e; margin-bottom: 4px; }
.facets__head h2 { display: flex; align-items: center; gap: 8px; font: 400 23px/1 var(--display); text-transform: uppercase; margin: 0; }
.facets__clear { font: 700 13px var(--cond); text-transform: uppercase; letter-spacing: .04em; }
/* number of active filters */
.filter-count { display: inline-block; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font: 700 13px/22px var(--cond); text-align: center; letter-spacing: 0; }
.filter-count[hidden] { display: none; }
.facets__close, .facets__apply { display: none; }
.facet { border: 0; margin: 0; padding: 12px 0 12px; border-bottom: 1px solid #262626; min-width: 0; }
.facet.is-empty { display: none; }
.facet legend { float: left; width: 100%; margin-bottom: 8px; padding: 1px 0 1px 9px; border-left: 3px solid var(--red); color: #fff; font: 700 14px/1.1 var(--cond); text-transform: uppercase; letter-spacing: .05em; }
.facet__list { clear: both; list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.facet__list li.is-extra { display: none; }
.facet__list.is-open li.is-extra { display: block; }
.facet__list label { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 4px; cursor: pointer; font-size: 15px; color: #e6e6e6; transition: background .15s; }
.facet__list label:hover { background: #222; color: #fff; }
.facet__list label:has(input:checked) { background: rgba(247,21,43,.14); color: #fff; font-weight: 700; }
.facet__list input[type=checkbox] { appearance: none; width: 18px; height: 18px; border: 1px solid #888; border-radius: 3px; background: #000; display: grid; place-items: center; flex: none; margin: 0; cursor: pointer; transition: background .15s, border-color .15s; }
.facet__list input[type=checkbox]::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) scale(0); transition: transform .15s; margin-top: -2px; }
.facet__list input[type=checkbox]:checked { background: var(--red); border-color: var(--red); }
.facet__list input[type=checkbox]:checked::after { transform: rotate(-45deg) scale(1); }
.facet__list input[type=checkbox]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.facet__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet__count { min-width: 2.6em; padding: 2px 7px; border-radius: 999px; background: #262626; color: #bbb; font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; text-align: center; }
.facet__list label:has(input:checked) .facet__count { background: var(--red); color: #fff; }
.facet__list li.is-zero label { opacity: .4; }
.facet__more { background: none; border: 0; color: var(--red); padding: 8px 6px 0; cursor: pointer; font: 700 13px var(--cond); text-transform: uppercase; letter-spacing: .03em; }
.facet__more:hover { color: #fff; }
.facet select { width: 100%; height: 32px; background: #f2f2f2; color: #000; border: 1px solid #ccc; padding: 0 6px; font: 400 14px var(--cond); }

/* dual range slider */
.facet--range { --lo: 0%; --hi: 100%; }
.range { position: relative; height: 26px; clear: both; }
.range::before, .range::after { content: ""; position: absolute; top: 11px; height: 4px; border-radius: 2px; }
.range::before { left: 0; right: 0; background: #333; }
.range::after { left: var(--lo); right: calc(100% - var(--hi)); background: var(--red); }
.range input[type=range] { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; appearance: none; -webkit-appearance: none; z-index: 1; }
.range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--red); cursor: grab; box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.range input[type=range]::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--red); cursor: grab; }
.range input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid #fff; outline-offset: 2px; }
.range input[type=range]::-webkit-slider-runnable-track { background: none; }
.range__inputs { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #888; font-size: 13px; }
.range__inputs label { flex: 1; position: relative; }
.range__inputs .pre { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); color: #666; font-size: 13px; }
.range__inputs input { width: 100%; height: 30px; background: #f2f2f2; color: #000; border: 1px solid #ccc; padding: 0 6px; font: 400 14px var(--cond); -moz-appearance: textfield; }
.range__inputs .pre + input { padding-left: 18px; }
.range__inputs input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* results toolbar */
.inv-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 0 10px; border-bottom: 1px solid #222; font-family: var(--cond); }
.inv-bar__filters { display: none; }
.inv-bar__count { margin: 0; font-size: 15px; color: #ccc; }
.inv-bar__count strong { color: #fff; font-size: 18px; font-variant-numeric: tabular-nums; }
.inv-bar__sort { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #aaa; text-transform: uppercase; }
.inv-bar__sort select { height: 32px; background: #f2f2f2; color: #000; border: 1px solid #ccc; padding: 0 6px; font: 400 14px var(--cond); }
.inv-bar__view { display: flex; }
.inv-bar__view button { width: 34px; height: 32px; border: 1px solid #333; background: #1b1b1b; color: #888; cursor: pointer; display: grid; place-items: center; }
.inv-bar__view button[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.vico { width: 14px; height: 12px; display: block; background: currentColor; }
.vico--list { -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 3px no-repeat, linear-gradient(#000 0 0) 0 50% / 100% 3px no-repeat, linear-gradient(#000 0 0) 0 100% / 100% 3px no-repeat; mask: linear-gradient(#000 0 0) 0 0 / 100% 3px no-repeat, linear-gradient(#000 0 0) 0 50% / 100% 3px no-repeat, linear-gradient(#000 0 0) 0 100% / 100% 3px no-repeat; }
.vico--grid { -webkit-mask: conic-gradient(#000 0 0) 0 0 / 6px 5px no-repeat, conic-gradient(#000 0 0) 100% 0 / 6px 5px no-repeat, conic-gradient(#000 0 0) 0 100% / 6px 5px no-repeat, conic-gradient(#000 0 0) 100% 100% / 6px 5px no-repeat; mask: conic-gradient(#000 0 0) 0 0 / 6px 5px no-repeat, conic-gradient(#000 0 0) 100% 0 / 6px 5px no-repeat, conic-gradient(#000 0 0) 0 100% / 6px 5px no-repeat, conic-gradient(#000 0 0) 100% 100% / 6px 5px no-repeat; }
.inv-bar__live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #8a8; text-transform: uppercase; letter-spacing: .05em; }
.inv-bar__live .dot { width: 8px; height: 8px; border-radius: 50%; background: #3c3; box-shadow: 0 0 0 0 rgba(51,204,51,.6); }
.inv-bar__live.is-pulse .dot { animation: pulse 1.2s ease-out; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 0; min-height: 0; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(247,21,43,.65); background: #2a0d10; color: #fff; border-radius: 999px; padding: 6px 12px; font: 700 14px var(--cond); cursor: pointer; text-decoration: none; transition: background .15s; }
.chip:hover { background: #3d1015; border-color: var(--red); text-decoration: none; color: #fff; }
.chip span[aria-hidden] { color: var(--red); font-size: 18px; line-height: 1; }
.chip:hover span[aria-hidden] { color: #fff; }
.chip--clear { border-color: transparent; background: none; color: var(--red); text-transform: uppercase; font-size: 13px; letter-spacing: .04em; }
.chip--clear:hover { background: none; border-color: transparent; color: #fff; }
.inv-fuzzy { margin: 12px 0 0; padding: 8px 12px; background: #1f1a0b; border-left: 3px solid #e0a800; font: 400 14px var(--cond); }
/* Heading before the units that only resemble the search text; spans the
   whole row in the grid. */
.inv-similar { grid-column: 1 / -1; margin: 28px 0 4px; padding: 10px 0 0 12px; border-left: 3px solid #e0a800; }
.inv-similar[hidden] { display: none; }
.inv-similar h2 { margin: 0; font: 400 22px var(--display); text-transform: uppercase; color: #fff; }
.inv-similar p { margin: 2px 0 0; color: #aaa; font: 400 14px var(--cond); }
.facet--includes .facet__label { overflow-wrap: anywhere; }

.inv-list { position: relative; transition: opacity .2s; }
.inv.is-loading .inv-list { opacity: .55; }
.inv-empty { text-align: center; padding: 50px 20px; }
.inv-empty h2 { font: 400 26px var(--display); text-transform: uppercase; color: #fff; }
.inv-more { display: flex; justify-content: center; padding: 24px; }
.inv-more[hidden] { display: none; }
.spinner { width: 26px; height: 26px; border: 3px solid #333; border-top-color: var(--red); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Card surface (grid view, and list view on phones/tablets): a shade lighter
   than the page, with a visible edge and a faint top highlight, so stacked
   cards read as separate. */
.inv-list { --card-bg: #181818; --card-line: #2c2c2c; --card-hi: rgba(255,255,255,.06); }

/* Divider under each card (grid view, and list view on phones/tablets): the
   section-title rule (red lead-in, grey line) slanted like the masthead,
   with a short checkered-flag strip. It sits in the middle of the gap below
   the card; --rule-out stretches it over half the gap on each side, so in
   the grid a row's dividers join into one line, a red mark under each card.
   Under the last card it reads as the finish line. */
.inv-list .unit::after, .inv-list .unit::before { content: none; position: absolute; height: 8px; bottom: calc(var(--rule-gap) / -2 - 4px); transform: skewX(-24deg); pointer-events: none; }
.inv-list .unit::after {
  left: calc(var(--rule-out) * -1); right: calc(var(--rule-out) * -1);
  background:
    linear-gradient(var(--red), var(--red)) var(--rule-out) 50% / 42px 4px no-repeat,
    linear-gradient(90deg, #3a3a3a 0 var(--rule-fade), transparent) 0 50% / 100% 1px no-repeat;
}
.inv-list .unit::before { left: 48px; width: 24px; background: conic-gradient(#d6d6d6 25%, transparent 0 50%, #d6d6d6 0 75%, transparent 0) 0 0 / 8px 8px; }

/* grid view: same card markup, stacked */
.inv-list.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--rule-gap) 18px; padding-top: 16px; --rule-gap: 32px; --rule-out: 9px; --rule-fade: 100%; }
.inv-list.is-grid .unit { position: relative; }
.inv-list.is-grid .unit::after, .inv-list.is-grid .unit::before { content: ""; }
.inv-list.is-grid .unit { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--card-line); background: var(--card-bg); box-shadow: inset 0 1px 0 var(--card-hi); gap: 0; }
.inv-list.is-grid .unit__more, .inv-list.is-grid .unit__comment, .inv-list.is-grid .unit__specs dl:nth-child(2), .inv-list.is-grid .pricebox__alert, .inv-list.is-grid .unit__aside { display: none; }
.inv-list.is-grid .unit__head { grid-template-columns: 1fr; gap: 8px; padding: 10px 12px; border: 0; }
.inv-list.is-grid .unit__head h2 { font-size: 17px; min-height: 2.4em; }
.inv-list.is-grid .pricebox { grid-row: auto; align-self: stretch; padding: 8px 10px; }
.inv-list.is-grid .pricebox__ours span:last-child { font-size: 30px; }
.inv-list.is-grid .unit__specs { padding: 0 12px 10px; grid-template-columns: 1fr; }
.inv-list.is-grid .unit__aside:has(.unit__logo) { display: flex; align-items: flex-start; }
.inv-list.is-grid .unit__body { flex: 1; } /* fill the card so the buttons sit on its bottom edge */
.inv-list.is-grid .unit__buttons { grid-template-columns: 1fr 1fr; margin-top: auto; }
.inv-list.is-grid .unit__buttons li:nth-child(2), .inv-list.is-grid .unit__buttons li:nth-child(3) { display: none; }

.unit { display: grid; grid-template-columns: 240px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid #1f1f1f; background: var(--panel); }
.unit__media { position: relative; display: flex; flex-direction: column; gap: 6px; }
.unit__img { position: relative; display: block; aspect-ratio: 4 / 3; background: #222; overflow: hidden; }
/* the whole photo, centred; a blurred, zoomed copy of it fills the rest of the frame */
.unit__img img { width: 100%; height: 100%; }
.unit__photo { position: relative; object-fit: contain; }
.unit__fill { position: absolute; inset: 0; object-fit: cover; filter: blur(18px) brightness(.72) saturate(1.15); transform: scale(1.25); }
.unit__more { display: flex; align-items: center; gap: 10px; background: #222; color: #aaa; padding: 8px 12px; font: 700 13px var(--cond); text-transform: uppercase; }
.unit__more .ico { font-size: 20px; }
.unit__more:hover { color: #fff; text-decoration: none; }
.unit__body { display: flex; flex-direction: column; min-width: 0; }
.unit__head { display: grid; grid-template-columns: 1fr 200px; gap: 6px 14px; border-bottom: 1px solid #222; padding-bottom: 10px; }
.unit__head h2 { font: 700 21px/1.2 var(--cond); margin: 0; }
.unit__comment { grid-column: 1; margin: 0; font: 400 14px/1.35 var(--cond); color: #ccc; align-self: end; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Price card: big price first, then MSRP / savings / payment, then the alert. */
.pricebox { grid-row: span 2; align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; padding: 10px 12px; background: #161616 radial-gradient(ellipse at 100% 0, rgba(247,21,43,.14), transparent 65%); border: 1px solid #262626; border-top: 3px solid var(--red); font: 400 14px/1.1 var(--cond); }
.pricebox__ours { flex: 1 0 100%; display: flex; flex-direction: column; gap: 3px; }
a.pricebox__ours { color: inherit; }
a.pricebox__ours:hover { text-decoration: none; }
a.pricebox__ours:hover .ast { color: #ffd6da; }
.pricebox__ours span:first-child { color: var(--muted); font: 700 11px/1 var(--cond); text-transform: uppercase; letter-spacing: .12em; }
.pricebox__ours span:last-child { color: #fff; font: 400 34px/1 var(--display); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.pricebox__ours a { color: var(--red); font: 400 22px/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.pricebox__msrp { order: 1; display: flex; gap: 5px; color: #ddd; }
.pricebox__msrp span:first-child { color: var(--muted); font-weight: 700; }
.pricebox--sale .pricebox__msrp span:last-child { color: #aaa; text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.pricebox > .pricebox__save { order: 2; padding: 3px 7px; border-radius: 4px; background: #ffd400; color: #111; font: 700 12px/1.1 var(--cond); text-transform: uppercase; letter-spacing: .03em; }
.pricebox__pay { order: 3; flex: 1 0 100%; color: #ddd; }
.pricebox__pay strong { color: var(--red); font-size: 17px; }
.pricebox__alert { order: 4; flex: 1 0 100%; display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 3px; padding: 6px 8px; border: 1px solid #3a3a3a; border-radius: 4px; background: #0b0b0b; color: #eee; font: 700 12px/1 var(--cond); text-transform: uppercase; letter-spacing: .03em; }
.pricebox__alert .ico { color: var(--red); font-size: 15px; }
.pricebox__alert:hover { border-color: var(--red); color: #fff; text-decoration: none; }
/* description on one line (phones' list and every grid card): its first
   words, then a slow scroll of the rest while the card stays on screen (site.js) */
.unit__blurb { display: none; }
.inv-list.is-grid .unit__blurb { display: block; margin: -2px 0 0; font: 400 14px/1.4 var(--cond); color: #bbb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unit__blurb.is-running { text-overflow: clip; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
.unit__blurb.is-running span { display: inline-block; will-change: transform; }
.unit__specs { display: grid; grid-template-columns: 1fr 1fr 120px; gap: 10px; padding: 12px 0; flex: 1; font: 400 13px var(--cond); }
.unit__specs dl { display: grid; grid-template-columns: 82px 1fr; align-content: start; margin: 0; gap: 4px 0; }
.unit__specs dt { font-weight: 700; }
.unit__specs dd { margin: 0; }
.unit__aside { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; text-align: right; }
.unit__make { font: 400 16px var(--display); color: #888; text-transform: uppercase; }
/* Maker logo in place of the name (crate::make_logos): white logos sit on
   the card as they are, dark ones on a light plate. */
.unit__logo { display: inline-grid; place-items: center; max-width: 100%; }
.unit__logo img { display: block; width: auto; height: auto; max-width: 120px; max-height: 40px; object-fit: contain; }
.unit__logo--light { padding: 6px 10px; border-radius: 4px; background: var(--chip-bg); }
.unit__logo--light img { max-width: 100px; max-height: 30px; }
.unit.is-leaving { z-index: 0; }
/* Desktop filter changes: new units flip in as frosted glass (live.js). */
.unit.is-glass { position: relative; }
.unit__glass {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.03) 35%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.03) 65%) 0 0 / 250% 100% no-repeat, rgba(20,20,20,.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.unit__buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; list-style: none; margin: 0; padding: 0; }
.unit__buttons a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #1b1b1b; color: #fff; font: 700 12px/1 var(--cond); text-transform: uppercase; border-right: 1px solid #000; height: 100%; }
.unit__buttons a .ico { color: var(--red); font-size: 18px; }
.unit__buttons a:hover { background: #262626; text-decoration: none; }
.unit__buttons .is-primary a { background: var(--red); }
.unit__buttons .is-primary a .ico { color: #fff; }
.unit__buttons .is-primary a > span { font-weight: 900; }
/* trim the label to its capital letters so it centres exactly against the glyph */
.unit__buttons a > span { text-box: trim-both cap alphabetic; }

/* desktop list view: the photo fills the card's height and its photo-count
   bar shares the button row's line, so both columns start and end together */
@media (min-width: 992px) {
  .inv-list:not(.is-grid) { --unit-btn-h: 48px; }
  .inv-list:not(.is-grid) .unit__media { gap: 0; }
  .inv-list:not(.is-grid) .unit__img { flex: 1 1 auto; aspect-ratio: auto; min-height: 170px; }
  .inv-list:not(.is-grid) .unit__more { min-height: var(--unit-btn-h); gap: 10px; padding: 0 14px; border-top: 1px solid #000; background: #1b1b1b; color: #ddd; font-size: 15px; letter-spacing: .03em; }
  .inv-list:not(.is-grid) .unit__more .ico { font-size: 22px; color: var(--red); }
  .inv-list:not(.is-grid) .unit__buttons a { justify-content: center; gap: 10px; min-height: var(--unit-btn-h); padding: 0 12px; font-size: 15px; letter-spacing: .03em; }
  .inv-list:not(.is-grid) .unit__buttons a .ico { font-size: 24px; }
}
@media (min-width: 1280px) { .inv-list:not(.is-grid) .unit__buttons a { font-size: 14px; white-space: nowrap; } }
@media (min-width: 992px) and (max-width: 1279px) {
  .inv-list:not(.is-grid) .unit__buttons a { gap: 7px; padding: 0 6px; font-size: 13px; line-height: 1.1; }
  .inv-list:not(.is-grid) .unit__buttons a .ico { font-size: 20px; }
}

/* back-to-top square: desktop only, above the brand bar */
.totop { display: none; }
@media (min-width: 992px) {
  .totop { position: fixed; right: 24px; bottom: 84px; z-index: 35; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 12px; background: var(--red); color: #fff; cursor: pointer;
    box-shadow: 0 12px 28px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.45); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .2s, transform .2s, filter .15s; }
  .totop.is-shown { opacity: 1; transform: none; pointer-events: auto; }
  .totop.is-shown:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,.65), 0 6px 14px rgba(0,0,0,.5); }
  .totop.is-shown:active { transform: translateY(1px); box-shadow: 0 6px 16px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.45); }
  .totop__arrow { width: 14px; height: 14px; margin-top: 6px; border-top: 4px solid #fff; border-left: 4px solid #fff; transform: rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) { .totop { transition: none; } }

@media (max-width: 991px) {
  .inv-layout { grid-template-columns: 1fr; }
  .inv-search { flex-basis: 100%; }
  /* Closed, the drawer is also hidden (after sliding out), so it can't be tabbed to or count as a layout shift. */
  .facets { position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: min(340px, 88vw); max-height: none; transform: translateX(-102%); visibility: hidden; transition: transform .28s cubic-bezier(.2,.7,.2,1), visibility 0s .28s; padding-bottom: 80px; }
  .inv.filters-open .facets { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2,.7,.2,1); box-shadow: 10px 0 40px rgba(0,0,0,.6); }
  .facets__close { display: block; background: none; border: 0; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
  .facets__apply { display: flex; position: fixed; bottom: 0; left: 0; width: min(340px, 88vw); padding: 14px; z-index: 61; }
  .inv.filters-open .facets__apply { display: flex; }
  .inv:not(.filters-open) .facets__apply { display: none; }
  .facets-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.55); }
  .inv-bar__filters { display: inline-flex; }
  .inv-bar__sort span { display: none; }
  .burger--sm, .burger--sm::before, .burger--sm::after { width: 14px; }
  .burger--sm::before { top: -5px; } .burger--sm::after { top: 5px; }
  .unit { grid-template-columns: 1fr; }
  .inv-list.is-grid { grid-template-columns: 1fr 1fr; gap: var(--rule-gap) 10px; --rule-out: 5px; }
  .unit__head { grid-template-columns: 1fr; }
  .pricebox { grid-row: auto; }
  .unit__specs { grid-template-columns: 1fr 1fr; }
  .unit__aside { display: none; }
  /* the logo still shows, on its own row under the specs */
  .inv-list:not(.is-grid) .unit__aside:has(.unit__logo) { display: flex; grid-column: 1 / -1; align-items: flex-start; }
  .unit__buttons { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------- phones & tablets */
/* Touch layout: sticky nav bar with search, accordion menu, swipeable rows,
   compact inventory cards and a thumb-reach action bar. */
@media (max-width: 991px) {
  .facet select, .inv-bar__sort select, .range__inputs input { font-size: 16px; }
  .unit__buttons a:active { filter: brightness(1.25); }
  .inv-top { gap: 10px; margin-bottom: 6px; }
  .inv-search input { height: 46px; border-radius: 6px 0 0 6px; }
  .inv-search button { width: 50px; border-radius: 0 6px 6px 0; }
  .inv-search .voice { width: 44px; border-radius: 0; font-size: 20px; }
  .inv-search.is-pinned { left: 0; width: auto; right: 0; margin: 0; padding: 8px 12px; border-radius: 0; background: rgba(0,0,0,.96); box-shadow: 0 8px 18px rgba(0,0,0,.5); }
  /* the filter bar steps down below the search box while it's shown, in step with it */
  .inv-peek .inv-bar { transition: transform .38s cubic-bezier(.16,1,.3,1); }
  .inv-bar { position: sticky; top: var(--navh); transform: translate3d(0, var(--inv-peek, 0px), 0); transition: transform .28s cubic-bezier(.4,0,.2,1); z-index: 15; flex-wrap: nowrap; gap: 8px; margin: 0 -12px; padding: 8px 12px; background: rgba(0,0,0,.94); backdrop-filter: blur(6px); }
  .inv-bar__filters { height: 38px; padding: 0 12px; border-radius: 4px; flex: none; }
  .inv-bar__count { font-size: 13px; white-space: nowrap; }
  .inv-bar__count strong { font-size: 16px; }
  .inv-bar__sort { min-width: 0; }
  .inv-bar__sort select { height: 38px; max-width: 118px; border-radius: 4px; }
  .inv-bar__view { flex: none; }
  .inv-bar__view button { width: 36px; height: 38px; }
  .inv-bar__live { display: none !important; }
  .facets { padding-bottom: 96px; }
  .facets__close { width: 44px; height: 44px; margin-right: -10px; }
  .facet__list label { padding: 8px 4px; font-size: 15px; }
  .facet__list input[type=checkbox] { width: 20px; height: 20px; }
  .facet select, .range__inputs input { height: 40px; }
  .range { height: 32px; }
  .range::before, .range::after { top: 14px; }
  .range input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; }
  .range input[type=range]::-moz-range-thumb { width: 20px; height: 20px; }
  .facets__apply { padding: 18px 14px calc(18px + env(safe-area-inset-bottom)); font-size: 15px; }
  .chip { padding: 7px 12px; font-size: 14px; }

  /* list view: one compact card per unit */
  .inv-list:not(.is-grid) { --rule-gap: 32px; --rule-out: 0px; --rule-fade: 70%; }
  .inv-list:not(.is-grid) .unit { position: relative; gap: 0; margin-top: var(--rule-gap); padding: 0; background: var(--card-bg); border: 1px solid var(--card-line); box-shadow: inset 0 1px 0 var(--card-hi); border-radius: 6px; }
  .inv-list:not(.is-grid) .unit:first-child { margin-top: 14px; }
  .inv-list:not(.is-grid) .unit::after, .inv-list:not(.is-grid) .unit::before { content: ""; }
  /* rounded corners without clipping the card (the divider sits outside it) */
  .inv-list:not(.is-grid) .unit__media { border-radius: 5px 5px 0 0; overflow: hidden; }
  .inv-list:not(.is-grid) .unit__buttons { border-radius: 0 0 5px 5px; overflow: hidden; }
  .inv-list:not(.is-grid) .unit__media { position: relative; }
  .inv-list:not(.is-grid) .unit__more { position: absolute; left: 8px; bottom: 8px; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; font-size: 11px; }
  .inv-list:not(.is-grid) .unit__more .ico { font-size: 14px; }
  .inv-list:not(.is-grid) .unit__media:has(.hist__meta) .unit__more { bottom: 48px; }
  .inv-list:not(.is-grid) .hist__meta { min-height: 40px; padding: 0 12px; border-top: 1px solid #000; font-size: 14px; }
  .inv-list:not(.is-grid) .hist__meta button { min-height: 40px; font-size: 14px; }
  .inv-list:not(.is-grid) .unit__body { padding: 12px 12px 0; }
  .inv-list:not(.is-grid) .unit__head { padding-bottom: 10px; }
  .unit__head h2 { font-size: 21px; line-height: 1.15; }

  /* description: first line, then a slow scroll of the rest while the card stays on screen (site.js) */
  .inv-list:not(.is-grid) .unit__comment { display: none; }
  .inv-list:not(.is-grid) .unit__blurb { display: block; margin: 2px 0 4px; font: 400 15px/1.4 var(--cond); color: #bbb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* price panel: big price, MSRP and savings under it, alert button at the side */
  .inv-list:not(.is-grid) .pricebox { display: grid; grid-template-columns: minmax(0, 1fr) 142px; grid-template-areas: "ours alert" "msrp alert" "save alert"; align-items: center; gap: 4px 10px; margin-top: 4px; padding: 10px 12px; background: #161616; border: 1px solid #262626; border-left: 4px solid var(--red); border-radius: 6px; font: 400 15px/1.1 var(--cond); }
  .inv-list:not(.is-grid) .pricebox > div { padding: 0; background: none; color: inherit; }
  .inv-list:not(.is-grid) .pricebox__ours { grid-area: ours; display: flex; flex-direction: column; gap: 3px; }
  .inv-list:not(.is-grid) .pricebox__ours span:first-child { font: 700 12px/1 var(--cond); text-transform: uppercase; letter-spacing: .08em; color: #999; }
  .inv-list:not(.is-grid) .pricebox__ours span:last-child { font: 400 34px/1 var(--display); letter-spacing: .01em; color: #fff; }
  .inv-list:not(.is-grid) .pricebox__ours a { font: 400 clamp(20px, 6vw, 26px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--red); }
  .inv-list:not(.is-grid) .pricebox__msrp { grid-area: msrp; display: flex; justify-content: flex-start; gap: 6px; font-size: 16px; color: #ddd; }
  .inv-list:not(.is-grid) .pricebox__msrp span:first-child { font-weight: 700; color: #999; }
  .inv-list:not(.is-grid) .pricebox--sale .pricebox__msrp span:last-child { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; color: #aaa; }
  .inv-list:not(.is-grid) .pricebox > .pricebox__save { grid-area: save; justify-self: start; display: block; padding: 3px 8px; border-radius: 4px; background: #ffd400; color: #111; font: 700 13px/1.1 var(--cond); text-transform: uppercase; letter-spacing: .03em; }
  .inv-list:not(.is-grid) .pricebox__alert { grid-area: alert; align-self: stretch; flex-direction: row; justify-content: center; gap: 6px; width: auto; padding: 8px 10px 8px 8px; border: 1px solid #3a3a3a; border-radius: 6px; background: #0b0b0b; color: #eee; font: 700 13px/1.1 var(--cond); text-transform: uppercase; text-align: left; letter-spacing: .03em; }
  .inv-list:not(.is-grid) .pricebox__alert .ico { flex: none; font-size: 40px; color: var(--red); }
  .inv-list:not(.is-grid) .pricebox__pay { grid-column: 1 / -1; font-size: 15px; }
  .pricebox__alert .nowrap { white-space: nowrap; }

  .inv-list:not(.is-grid) .unit__specs { gap: 4px 12px; padding: 12px 0 14px; font-size: 15px; }
  .unit__specs dl { grid-template-columns: auto 1fr; gap: 4px 8px; }
  .inv-list:not(.is-grid) .unit__buttons { margin: 0 -12px; border-top: 1px solid #000; }
  .unit__buttons li:nth-child(2), .unit__buttons li:nth-child(3) { display: none; }
  .unit__buttons a { justify-content: center; gap: 10px; min-height: 60px; padding: 9px 8px; font-size: clamp(16px, 4.9vw, 20px); letter-spacing: .04em; border-right: 1px solid #000; }
  .unit__buttons a .ico { font-size: clamp(24px, 7.4vw, 30px); }
}

/* phones */
@media (max-width: 767px) {
  /* no grid view on phones: two columns are too cramped (live.js shows the list) */
  .inv-bar__view { display: none; }
}