/* Marketplace components - all visual identity comes from theme.css tokens. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: linear-gradient(180deg, #fcfdfe 0px, var(--umb-bg) 420px) fixed, var(--umb-bg);
  color: var(--umb-ink-2);
  font-family: var(--umb-font);
  font-size: 16px;
  line-height: 1.55;
}

img { max-width: 100%; }

a { color: var(--umb-accent); }
a:hover { color: var(--umb-accent-strong); }

:focus-visible {
  outline: 2px solid var(--umb-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* ---------- Site header ---------- */

.site-bar {
  background: var(--umb-surface);
  border-bottom: 1px solid var(--umb-border);
}
.site-bar-inner {
  max-width: 1200px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.site-bar-logo img { width: 220px; height: 44px; display: block; }
.site-nav { margin-left: auto; display: flex; gap: 4px; overflow-x: auto; }
.site-nav a {
  color: var(--umb-ink-3); text-decoration: none; font-size: 0.9375rem; font-weight: 500;
  padding: 8px 12px; border-radius: var(--umb-radius-sm); white-space: nowrap;
}
.site-nav a:hover { color: var(--umb-heading); background: var(--umb-accent-tint); }
.site-nav a[aria-current="page"] { color: var(--umb-accent); background: var(--umb-accent-tint); }

/* ---------- Page header ---------- */

.page-head { max-width: 1200px; margin: 0 auto; padding: 36px 20px 8px; }
/* With a stat block present, the masthead becomes two columns: copy left,
   stats right - no dead half-page of white. */
.page-head.has-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px;
  gap: 16px 48px; align-items: center;
}
.page-head.has-bar .crumbs { grid-column: 1 / -1; margin-bottom: 4px; }
.crumbs { font-size: 0.875rem; color: var(--umb-ink-4); margin: 0 0 14px; }
.crumbs a { color: var(--umb-ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--umb-accent); }
.page-head h1 {
  font-family: var(--umb-font-display);
  color: var(--umb-heading);
  font-size: clamp(1.65rem, 4vw, 2.25rem);
  font-weight: 700; line-height: 1.2; margin: 0 0 10px;
}
.page-lede { max-width: 62ch; margin: 0; color: var(--umb-ink-2); }
.page-lede a { font-weight: 500; }

/* Market summary: discrete stat tiles, not a run-on sentence */
.market-bar {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--umb-surface); border: 1px solid var(--umb-border);
  border-radius: var(--umb-radius); box-shadow: var(--umb-shadow);
  overflow: hidden; /* clip tile fills (e.g. the green deals tile) to the rounded corners */
}
.market-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 20px; min-width: 0;
}
.market-stat:nth-child(odd) { border-right: 1px solid var(--umb-border); }
.market-stat:nth-child(n+3) { border-top: 1px solid var(--umb-border); }
/* Round the top corner tiles to the bar's inner radius so an active tile's
   blue ring follows the curve instead of being clipped to nothing there. */
.market-stat:first-child { border-top-left-radius: calc(var(--umb-radius) - 1px); }
.market-stat:nth-child(2) { border-top-right-radius: calc(var(--umb-radius) - 1px); }
.market-stat b {
  color: var(--umb-ink-1); font-size: var(--umb-fs-stat); font-weight: 700;
  line-height: 1.15; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.market-stat span {
  color: var(--umb-ink-3); font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.market-stat .trend-down { color: var(--umb-good); }
.market-stat .trend-up { color: var(--umb-hot); }
.market-note {
  grid-column: 1 / -1; border-top: 1px solid var(--umb-border);
  color: var(--umb-ink-3); font-size: 0.8125rem; padding: 8px 20px;
}

/* "live" heartbeat: pulsing green dot sits next to the big number, and the
   label sits below in a soft-outlined green pill */
.live-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--umb-good-mid); flex: none; margin-right: 9px;
  vertical-align: 0.15em;
  animation: live-pulse 2.4s ease-in-out infinite;
}
.live-label {
  display: inline-block; align-self: flex-start;
  background: var(--umb-good-bg); border: 1px solid var(--umb-good-mid);
  border-radius: var(--umb-radius-pill); padding: 3px 11px; margin-top: 3px;
  color: var(--umb-good) !important; font-size: 0.78rem !important;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(134 203 146 / 0.55); }
  50% { box-shadow: 0 0 0 5px rgb(134 203 146 / 0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* deals tile gets a soft green wash */
.market-stat-good { background: var(--umb-good-bg); }
.market-stat-good b, .market-stat-good .good-value { color: var(--umb-good); }
.market-stat-good span { color: var(--umb-good); opacity: 0.75; }

/* clickable stat tiles read as buttons: pointer, funnel hint, blue ring on
   hover/focus, persistent blue ring + tint when active */
.market-stat-btn { position: relative; cursor: pointer; transition: box-shadow var(--umb-ease), background-color var(--umb-ease); }
.market-stat-btn .tile-funnel {
  position: absolute; top: 10px; right: 12px; width: 15px; height: 15px;
  color: var(--umb-ink-4); transition: color var(--umb-ease);
}
.market-stat-btn:hover, .market-stat-btn:focus-visible {
  box-shadow: inset 0 0 0 2px var(--umb-accent); outline: none;
}
.market-stat-btn:hover .tile-funnel, .market-stat-btn:focus-visible .tile-funnel { color: var(--umb-accent); }
.market-stat-btn.is-active { box-shadow: inset 0 0 0 2px var(--umb-accent); }
.market-stat-btn.is-active .tile-funnel { color: var(--umb-accent); }
.market-stat-btn:not(.market-stat-good).is-active { background: var(--umb-accent-tint); }

/* ---------- quick-filter bar (single scrolling row, full container width) ---------- */

.qbar-wrap { max-width: 1200px; margin: 0 auto; padding: 10px 20px 0; }
.qbar-lead {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  color: var(--umb-ink-4); padding: 0 2px;
}
.qbar-lead svg { width: 17px; height: 17px; }
.quickbar {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0 0 6px;
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 2px 1px;
  scroll-snap-type: x proximity;
}
.quickbar::-webkit-scrollbar { display: none; }
.quickbar-hint {
  display: none; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 12px; font-size: 0.8125rem; font-weight: 600; color: var(--umb-ink-3);
}
.quickbar-hint.show { display: flex; }
.qh-arrow {
  background: var(--umb-surface); border: 1px solid var(--umb-border); cursor: pointer;
  color: var(--umb-accent); width: 26px; height: 26px; border-radius: 50%;
  font-size: 1.05rem; line-height: 1; font-weight: 700; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.qh-arrow:hover { border-color: var(--umb-accent); background: var(--umb-accent-tint); }
.qbtn {
  flex: 0 0 auto; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--umb-surface); color: var(--umb-ink-1);
  border: 1px solid var(--umb-border); border-radius: var(--umb-radius-pill);
  font: inherit; font-size: 0.875rem; font-weight: 600; padding: 7px 12px; cursor: pointer;
  box-shadow: var(--umb-shadow); transition: border-color var(--umb-ease), background-color var(--umb-ease), color var(--umb-ease);
  white-space: nowrap;
}
.qbtn svg { width: 15px; height: 15px; color: var(--umb-ink-3); flex: none; }
.qbtn svg.flag { width: 16px; height: 11px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08); }
.qbtn:hover { border-color: var(--umb-accent); color: var(--umb-accent-strong); }
.qbtn:hover svg { color: var(--umb-accent); }
.qbtn.zero { color: var(--umb-ink-4); }
.qbtn.zero svg { color: var(--umb-ink-4); }
.qbtn .qbtn-count {
  font-size: 0.78rem; font-weight: 700; color: var(--umb-ink-4);
  background: var(--umb-bg); border-radius: var(--umb-radius-pill); padding: 1px 7px; font-variant-numeric: tabular-nums;
}
.qbtn.is-on {
  background: var(--umb-accent); color: var(--umb-accent-ink); border-color: var(--umb-accent);
}
.qbtn.is-on svg { color: var(--umb-accent-ink); }
.qbtn.is-on .qbtn-count { background: rgb(255 255 255 / 0.22); color: var(--umb-accent-ink); }

/* ---------- price slider ---------- */

.price-slider { position: relative; height: 34px; margin-top: 4px; }
.price-slider .track {
  position: absolute; left: 0; right: 0; top: 15px; height: 4px;
  background: var(--umb-border); border-radius: 999px;
}
.price-slider .track-fill {
  position: absolute; top: 15px; height: 4px; background: var(--umb-accent); border-radius: 999px;
}
.price-slider input[type="range"] {
  position: absolute; top: 0; left: 0; width: 100%; height: 34px; margin: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.price-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 22px; height: 22px; border-radius: 50%; margin-top: 6px;
  background: var(--umb-surface); border: 2px solid var(--umb-accent); cursor: grab;
  box-shadow: 0 1px 4px rgb(23 34 44 / 0.22);
}
.price-slider input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
.price-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--umb-surface); border: 2px solid var(--umb-accent); cursor: grab;
  box-shadow: 0 1px 4px rgb(23 34 44 / 0.22);
}
.price-slider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--umb-accent); outline-offset: 2px; }
.price-vals { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.9375rem; font-weight: 600; color: var(--umb-ink-1); font-variant-numeric: tabular-nums; }

/* long money ranges stack instead of truncating on narrow tiles */
.market-stat-range b { white-space: normal; overflow: visible; text-overflow: clip; }
@media (max-width: 900px) {
  .market-stat-range b { font-size: 1.125rem; line-height: 1.25; }
}

/* ---------- Layout ---------- */

.mkt-layout {
  max-width: 1200px; margin: 0 auto; padding: 16px 20px 40px;
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px;
  align-items: start;
}
/* let the listings column shrink so the quick-bar scrolls INSIDE itself
   instead of widening the whole page */
.mkt-layout > section { min-width: 0; }

/* ---------- Filters ---------- */

.filters {
  position: sticky; top: 16px;
  background: var(--umb-surface); border: 1px solid var(--umb-border);
  border-radius: var(--umb-radius); box-shadow: var(--umb-shadow);
  padding: 4px 18px 18px;
  max-height: calc(100vh - 32px); overflow-y: auto;
}
.filters-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 2px; }
.filters-head h2 { font-size: 1.05rem; color: var(--umb-ink-1); margin: 0; }
.filters-reset {
  background: none; border: none; padding: 4px 6px; cursor: pointer;
  color: var(--umb-accent); font: inherit; font-size: 0.875rem; font-weight: 500; border-radius: 4px;
}
.filters-reset:hover { text-decoration: underline; }
.fgroup { border-top: 1px solid var(--umb-border); padding: 14px 0 2px; margin-top: 12px; }
.fgroup:first-of-type { border-top: none; margin-top: 4px; }
.fgroup h3 {
  font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--umb-ink-3); margin: 0 0 10px; font-weight: 600;
}
.fopt { display: flex; align-items: center; gap: 9px; padding: 6px 0; cursor: pointer; font-size: 0.9375rem; color: var(--umb-ink-2); }
.fopt input { accent-color: var(--umb-accent); width: 16px; height: 16px; margin: 0; flex: none; cursor: pointer; }
.fopt .cnt { margin-left: auto; color: var(--umb-ink-4); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.fopt.zero { color: var(--umb-ink-4); }

.price-inputs { display: flex; align-items: center; gap: 8px; }
.price-inputs input {
  width: 100%; min-width: 0; padding: 8px 10px; font: inherit; font-size: 0.9375rem;
  border: 1px solid var(--umb-border); border-radius: var(--umb-radius-sm);
  color: var(--umb-ink-1); background: var(--umb-surface);
}
.price-inputs input:focus { border-color: var(--umb-accent); outline: none; }
.price-inputs span { color: var(--umb-ink-4); }

.fswitch { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; font-size: 0.9375rem; }

/* ---------- Toolbar ---------- */

.toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 6px;
}
.result-count { color: var(--umb-ink-1); font-weight: 600; font-size: 1.05rem; }
.updated-at { color: var(--umb-ink-4); font-size: 0.875rem; }
.updated-at.stale { color: var(--umb-warn); }
.toolbar-spacer { flex: 1; }
.sort-wrap { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--umb-ink-3); }
.sort-wrap select {
  font: inherit; font-size: 0.9375rem; color: var(--umb-ink-1);
  padding: 8px 10px; border: 1px solid var(--umb-border); border-radius: var(--umb-radius-sm);
  background: var(--umb-surface); cursor: pointer;
}
.filters-open {
  display: none; align-items: center; gap: 8px;
  font: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--umb-ink-1);
  padding: 8px 14px; border: 1px solid var(--umb-border); border-radius: var(--umb-radius-sm);
  background: var(--umb-surface); cursor: pointer; box-shadow: var(--umb-shadow);
}
.filters-open .fcount {
  background: var(--umb-accent); color: var(--umb-accent-ink);
  border-radius: var(--umb-radius-pill); font-size: 0.6875rem; font-weight: 700;
  min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}

/* Active filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.chips:empty { margin: 0 0 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--umb-accent-tint); color: var(--umb-accent-strong);
  border: 1px solid transparent; border-radius: var(--umb-radius-pill);
  font: inherit; font-size: 0.875rem; font-weight: 500; padding: 5px 12px; cursor: pointer;
}
.chip:hover { border-color: var(--umb-accent); }
.chip .x { font-weight: 700; }

/* ---------- Grid & cards ---------- */

.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--umb-gap);
}

.card {
  background: var(--umb-surface); border: 1px solid var(--umb-border);
  border-radius: var(--umb-radius); box-shadow: var(--umb-shadow);
  display: flex; flex-direction: column; overflow: hidden;
  transition: box-shadow var(--umb-ease), transform var(--umb-ease);
}
.card:hover { box-shadow: var(--umb-shadow-hover); transform: translateY(-2px); }

/* Hard 4:3 lock via padding-box: aspect-ratio alone is only a PREFERRED
   size — a portrait photo's intrinsic height stretches it, so gallery
   flips made the whole card jump. padding-top + absolute img cannot grow. */
.card-media { position: relative; padding-top: 75%; background: #eceff3; overflow: hidden; }
/* contain (owner choice): the full photo always shows, neutral bars fill
   the box — no cropping. Swap to cover for edge-to-edge with center-crop. */
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.card-media .noimg {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center; color: var(--umb-ink-4); font-size: 0.875rem;
}
.card-media .noimg svg { width: 36px; height: 36px; opacity: 0.55; }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: var(--umb-radius-pill); padding: 4px 11px;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em;
  white-space: nowrap;
}
.pill-model {
  position: absolute; top: 10px; left: 10px;
  background: rgb(23 34 44 / 0.82); color: #fff;
  font-size: 0.9375rem; padding: 5px 13px; /* larger than the base pill so the model reads at a scroll-by glance */
}
/* Price-rank pill lives inside the "Our analysis" block (never over the eBay
   photo) with a status dot in the label color. */
.pill-rank {
  padding: 4px 10px 4px 8px;
  white-space: normal; text-align: left;
}
.pill-rank::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.pill-good { background: var(--umb-good-bg); color: var(--umb-good); }
.pill-neutral { background: var(--umb-fair-bg); color: var(--umb-fair); }
.pill-warn { background: var(--umb-warn-bg); color: var(--umb-warn); }
.pill-hot { background: var(--umb-hot-bg); color: var(--umb-hot); }
.pill-cond { background: var(--umb-fair-bg); color: var(--umb-fair); }
/* new / excellent / good all read as green; excellent also carries a check */
.pill-cond.c-new, .pill-cond.c-excellent, .pill-cond.c-good { background: var(--umb-good-bg); color: var(--umb-good); }
.pill-cond.c-fair { background: var(--umb-warn-bg); color: var(--umb-warn); }
.pill-cond.c-parts-only { background: var(--umb-hot-bg); color: var(--umb-hot); }
.pill-cond svg { width: 13px; height: 13px; margin: 0 -1px; }

.card-body { padding: var(--umb-pad); display: flex; flex-direction: column; gap: 10px; flex: 1; }

.card-title {
  margin: 0; color: var(--umb-ink-1);
  font-size: var(--umb-fs-title); font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(2 * 1.35em);
}
/* A dotted underline marks titles we standardized — click/Enter reveals the
   seller's original line (hover tooltips don't exist on touch). */
.card-title.has-orig {
  cursor: pointer;
  text-decoration: underline dotted var(--umb-ink-4);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.card-title.has-orig:hover { text-decoration-color: var(--umb-accent); }
.card-title.has-orig:focus-visible { outline: 2px solid var(--umb-accent); outline-offset: 2px; border-radius: 4px; }
.orig-title {
  margin: -4px 0 0; font-size: 0.8125rem; color: var(--umb-ink-3);
  overflow-wrap: anywhere;
}
.orig-title b { font-weight: 600; color: var(--umb-ink-2); }

/* Must wrap: price + pills can't shrink, so nowrap clips them on narrow cards.
   (The auction/best-offer qualifier lives on its own line below, so wrapping
   is a belt-and-braces fallback, not the normal render.) */
.price-row { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; min-width: 0; }
.price {
  color: var(--umb-ink-1); font-size: var(--umb-fs-price); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.obo { color: var(--umb-ink-3); font-size: 0.8125rem; border: 1px solid var(--umb-border); border-radius: var(--umb-radius-pill); padding: 2px 8px; white-space: nowrap; }
.price-qual {
  margin: -6px 0 0; color: var(--umb-ink-3); font-size: 0.8438rem; font-weight: 600;
}
.price-row .pill-cond { margin-left: auto; }

.meta { display: flex; flex-direction: column; gap: 5px; font-size: var(--umb-fs-meta); color: var(--umb-ink-3); }
.meta-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.meta-row svg { width: 14px; height: 14px; flex: none; opacity: 0.75; }
.meta-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-row .ok { color: var(--umb-good); font-weight: 500; }
.meta-row .flag {
  width: 19px; height: 13px; flex: none; border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(23 34 44 / 0.12); margin-left: 1px;
}
/* seller feedback: shield, pill, and count all centered on one line */
.rating {
  flex: none; font-weight: 600; border-radius: var(--umb-radius-pill);
  padding: 2px 9px; line-height: 1.3;
}
.rating-pos { color: var(--umb-good); background: var(--umb-good-bg); }
.rating-neu { color: var(--umb-warn); background: var(--umb-warn-bg); }
.rating-neg { color: var(--umb-danger); background: var(--umb-danger-bg); }
.rating-count { color: var(--umb-ink-3); }

/* collapsible seller-listed contents */
.included summary { cursor: pointer; list-style: none; }
.included summary::-webkit-details-marker { display: none; }
/* chunky chevron - must be obvious at a glance */
.included summary::after {
  content: ""; display: inline-block; width: 9px; height: 9px;
  border-right: 2.5px solid var(--umb-accent); border-bottom: 2.5px solid var(--umb-accent);
  transform: rotate(45deg) translateY(-2px); transform-origin: center;
  margin-left: 6px; transition: transform var(--umb-ease); flex: none;
}
.included[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.included summary:hover span { color: var(--umb-ink-1); }
.included-list {
  margin: 6px 0 2px; padding: 8px 12px 8px 30px;
  background: var(--umb-bg); border-radius: var(--umb-radius-sm);
  font-size: 0.875rem; color: var(--umb-ink-3);
}
.included-list li { margin: 3px 0; }

.card-summary { margin: 0; font-size: 0.9rem; color: var(--umb-ink-3); line-height: 1.5; }
/* Our generated content (rank label, AI summary, red flags) sits in one
   visually distinct block so eBay's listing data stays clearly separated
   from what this site adds. */
.card-analysis {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  border: 1px dashed var(--umb-border); border-radius: 8px;
  background: var(--umb-accent-tint); padding: 10px 12px; margin-top: 2px;
}
.analysis-tag {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--umb-ink-3);
}
/* Sample-data banner (mock mode only) */
.mock-banner {
  max-width: 1200px; margin: 0 auto 8px; padding: 10px 16px;
  background: var(--umb-warn-bg); color: var(--umb-warn);
  border: 1px solid currentColor; border-radius: 8px;
  font-size: 0.9rem;
}
/* One-line affiliate disclosure above the grid / in the drawer */
.mini-disclosure {
  font-size: 0.8125rem; color: var(--umb-ink-3); margin: 0 0 10px;
}
.card-flag {
  margin: 0; font-size: 0.9rem; line-height: 1.45;
  color: var(--umb-warn); background: var(--umb-warn-bg);
  border-radius: var(--umb-radius-sm); padding: 8px 10px;
}
.card-flag b { font-weight: 600; }

.card-cta { margin-top: auto; display: flex; gap: 10px; padding-top: 2px; }
/* Quiet at rest, loud on intent - a grid of 20 solid-accent CTAs stops
   meaning anything and steals the hero role from prices. */
.btn-view {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--umb-accent-tint); color: var(--umb-accent-strong);
  font: inherit; font-size: 0.9375rem; font-weight: 600; text-decoration: none;
  padding: 10px 14px; border-radius: var(--umb-radius-sm);
  transition: background var(--umb-ease), color var(--umb-ease); white-space: nowrap;
}
.btn-view svg { width: 14px; height: 14px; flex: none; }
.card:hover .btn-view, .btn-view:hover, .btn-view:focus-visible {
  background: var(--umb-accent); color: var(--umb-accent-ink);
}
.btn-view:hover, .card:hover .btn-view:hover { background: var(--umb-accent-strong); }
.btn-save {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; border: 1px solid var(--umb-border); border-radius: var(--umb-radius-sm);
  background: var(--umb-surface); cursor: pointer; color: var(--umb-ink-3);
  transition: color var(--umb-ease), border-color var(--umb-ease);
}
.btn-save svg { width: 18px; height: 18px; }
.btn-save:hover { color: var(--umb-heart); border-color: var(--umb-heart); }
.btn-save[aria-pressed="true"] { color: var(--umb-heart); border-color: var(--umb-heart); background: var(--umb-heart-bg); }

/* ---------- Skeletons ---------- */

.sk { pointer-events: none; }
.sk .sk-box { background: #e8edf2; border-radius: 6px; position: relative; overflow: hidden; }
.sk .sk-box::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.65), transparent);
  animation: sk-shimmer 1.4s infinite;
}
@keyframes sk-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.sk-media { aspect-ratio: 4 / 3; border-radius: 0; }
.sk-line { height: 13px; margin: 0; }

/* ---------- Empty / error ---------- */

.state-panel {
  grid-column: 1 / -1; text-align: center;
  background: var(--umb-surface); border: 1px dashed var(--umb-border);
  border-radius: var(--umb-radius); padding: 48px 24px;
}
.state-panel h3 { color: var(--umb-ink-1); margin: 0 0 6px; font-size: 1.05rem; }
.state-panel p { margin: 0 0 16px; color: var(--umb-ink-3); font-size: 0.9375rem; }
.state-panel .card { text-align: left; }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--umb-surface); color: var(--umb-accent);
  border: 1px solid var(--umb-accent); border-radius: var(--umb-radius-sm);
  font: inherit; font-size: 0.9375rem; font-weight: 600; padding: 9px 16px; cursor: pointer;
  text-decoration: none;
}
.btn-secondary:hover { background: var(--umb-accent-tint); }
.closest { margin-top: 22px; }
.closest h4 { font-size: 0.875rem; color: var(--umb-ink-3); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 12px; }

/* ---------- Trust / FAQ / footer ---------- */

.trust-section { max-width: 1200px; margin: 8px auto 0; padding: 24px 20px 8px; }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--umb-gap); }
.trust-card {
  background: var(--umb-surface); border: 1px solid var(--umb-border);
  border-radius: var(--umb-radius); padding: 20px; box-shadow: var(--umb-shadow);
}
.trust-card h2, .trust-card h3 { font-family: var(--umb-font-display); color: var(--umb-heading); font-size: 1.15rem; margin: 0 0 8px; }
.trust-card p { margin: 0 0 8px; font-size: 0.9375rem; color: var(--umb-ink-2); }
.trust-card p:last-child { margin-bottom: 0; }

.faq-section { max-width: 1200px; margin: 0 auto; padding: 16px 20px 8px; }
.faq-section > h2 { font-family: var(--umb-font-display); color: var(--umb-heading); font-size: 1.35rem; margin: 8px 0 16px; }
.faq {
  background: var(--umb-surface); border: 1px solid var(--umb-border);
  border-radius: var(--umb-radius); box-shadow: var(--umb-shadow); margin: 0 0 10px;
}
.faq summary {
  cursor: pointer; padding: 15px 18px; font-weight: 600; color: var(--umb-ink-1);
  font-size: 1.05rem; list-style: none; display: flex; align-items: center; gap: 10px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--umb-ink-4); font-size: 1.15rem; font-weight: 400; }
.faq[open] summary::after { content: "\2212"; }
.faq .faq-a { padding: 0 18px 16px; font-size: 0.9375rem; color: var(--umb-ink-2); }
.faq .faq-a p { margin: 0 0 8px; }

.mkt-footer {
  max-width: 1200px; margin: 0 auto; padding: 24px 20px 48px;
  color: var(--umb-ink-4); font-size: 0.875rem; line-height: 1.6;
}
.mkt-footer .disclosure {
  border-top: 1px solid var(--umb-border); padding-top: 16px;
}
.mkt-footer a { color: var(--umb-ink-3); }

/* ---------- Saved drawer ---------- */

.saved-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  display: none; align-items: center; gap: 8px;
  background: var(--umb-ink-1); color: #fff; border: none; cursor: pointer;
  border-radius: var(--umb-radius-pill); padding: 11px 18px;
  font: inherit; font-size: 0.9375rem; font-weight: 600;
  box-shadow: 0 6px 20px rgb(23 34 44 / 0.28);
}
.saved-fab.show { display: inline-flex; }
.saved-fab svg { width: 16px; height: 16px; }

.drawer {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  background: var(--umb-surface); border-radius: 16px 16px 0 0;
  box-shadow: var(--umb-shadow-sheet);
  transform: translateY(105%); visibility: hidden;
  transition: transform 220ms ease, visibility 0s linear 220ms;
  max-height: 72vh; display: flex; flex-direction: column;
}
.drawer.open { transform: translateY(0); visibility: visible; transition: transform 220ms ease; }
/* Desktop: a compact panel anchored to the FAB, not a full-width sheet. */
@media (min-width: 901px) {
  .drawer {
    left: auto; right: 24px; bottom: 24px; width: 460px;
    border-radius: 16px; max-height: 60vh;
    border: 1px solid var(--umb-border);
  }
}
.drawer-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 10px; }
.drawer-head h2 { margin: 0; font-size: 1.05rem; color: var(--umb-ink-1); }
.drawer-close {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--umb-ink-3); font-size: 1.3rem; line-height: 1; padding: 6px 10px; border-radius: 6px;
}
.drawer-close:hover { color: var(--umb-ink-1); }
.drawer-body { overflow-y: auto; padding: 4px 20px 24px; }
.saved-row {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--umb-border); border-radius: var(--umb-radius-sm);
  padding: 10px 12px; margin-bottom: 10px; background: var(--umb-surface);
}
.saved-row img, .saved-row .noimg-sm {
  width: 64px; height: 48px; object-fit: cover; border-radius: 6px; background: #eceff3; flex: none;
  display: flex; align-items: center; justify-content: center; color: var(--umb-ink-4);
}
.saved-row .s-info { min-width: 0; flex: 1; }
.saved-row .s-title {
  font-size: 0.9375rem; font-weight: 600; color: var(--umb-ink-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0;
}
.saved-row .s-meta { font-size: 0.875rem; color: var(--umb-ink-3); margin: 2px 0 0; }
.saved-row .s-price { font-weight: 700; color: var(--umb-ink-1); font-variant-numeric: tabular-nums; margin: 2px 0 0; font-size: 1rem; }
.chip-badge { font-weight: 600; }
.chip-badge.pill-good { color: var(--umb-good); background: none; }
.chip-badge.pill-neutral { color: var(--umb-fair); background: none; }
.chip-badge.pill-warn { color: var(--umb-warn); background: none; }
.chip-badge.pill-hot { color: var(--umb-hot); background: none; }
.saved-row .btn-view { flex: none; padding: 8px 12px; font-size: 0.8125rem; }
.saved-row .s-remove {
  background: var(--umb-surface); border: 1.5px solid var(--umb-border); cursor: pointer;
  color: var(--umb-ink-2); width: 34px; height: 34px; border-radius: 50%;
  font-size: 1.25rem; line-height: 1; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.saved-row .s-remove:hover { color: var(--umb-hot); border-color: var(--umb-hot); background: var(--umb-hot-bg); }
.drawer-empty { color: var(--umb-ink-3); font-size: 0.9375rem; padding: 12px 0 20px; }

.scrim {
  position: fixed; inset: 0; z-index: 50; background: rgb(23 34 44 / 0.42);
  opacity: 0; pointer-events: none; transition: opacity 200ms ease;
}
.scrim.show { opacity: 1; pointer-events: auto; }

/* ---------- Price guide page ---------- */

.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--umb-gap); max-width: 1200px; margin: 0 auto; padding: 8px 20px 24px; }
.guide-card {
  background: var(--umb-surface); border: 1px solid var(--umb-border);
  border-radius: var(--umb-radius); box-shadow: var(--umb-shadow); padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.guide-card h2 { font-family: var(--umb-font-display); color: var(--umb-heading); font-size: 1.2rem; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.guide-card h2 .pill { font-size: 0.875rem; font-weight: 700; padding: 5px 13px; }
.guide-subhead {
  margin: -10px 0 0; font-size: 0.8125rem; font-weight: 600;
  color: var(--umb-ink-3); text-transform: uppercase; letter-spacing: 0.04em;
}
.guide-typical { display: flex; align-items: baseline; gap: 8px; }
.guide-typical b { font-size: 1.7rem; font-weight: 700; color: var(--umb-ink-1); font-variant-numeric: tabular-nums; }
.guide-typical span { color: var(--umb-ink-3); font-size: 0.875rem; }
/* Neutral track, accent data - judgment lives in the trend pill, not a
   rainbow gradient. */
.range-bar { position: relative; height: 8px; border-radius: 999px; background: var(--umb-border); }
.range-bar .range-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--umb-accent-tint); border: 1px solid var(--umb-accent); }
.range-bar .range-med { position: absolute; top: -4px; width: 3px; height: 16px; background: var(--umb-accent-strong); border-radius: 2px; }
.range-labels { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--umb-ink-3); font-variant-numeric: tabular-nums; }
.guide-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.875rem; color: var(--umb-ink-3); }
.guide-meta b { color: var(--umb-ink-1); font-variant-numeric: tabular-nums; }
/* Monthly price-history chart: crosshair + tooltip, keyboard navigable. */
.spark-wrap { margin-top: 2px; position: relative; }
.spark-wrap svg { width: 100%; height: auto; display: block; }
.spark-wrap:focus-visible { outline: 2px solid var(--umb-accent); outline-offset: 2px; border-radius: 6px; }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 3;
  background: var(--umb-surface); border: 1px solid var(--umb-border);
  border-radius: 8px; box-shadow: 0 2px 10px rgb(23 34 44 / 0.14);
  padding: 7px 10px; font-size: 0.8125rem; line-height: 1.45;
  transform: translate(-50%, 0); white-space: nowrap;
}
.chart-tip b { display: block; font-size: 0.9375rem; color: var(--umb-ink-1); font-variant-numeric: tabular-nums; }
.chart-tip .tip-month { color: var(--umb-ink-3); }
.chart-tip .tip-range { color: var(--umb-ink-3); font-variant-numeric: tabular-nums; }
.chart-data { margin-top: 6px; }
.chart-data summary { font-size: 0.8125rem; color: var(--umb-ink-3); cursor: pointer; }
.chart-data table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 0.8125rem; }
.chart-data th, .chart-data td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--umb-border); font-variant-numeric: tabular-nums; }
.chart-data th { color: var(--umb-ink-3); font-weight: 600; }
.chart-source { font-size: 0.75rem; color: var(--umb-ink-3); margin: 4px 0 0; }
.spark-title { font-size: 0.75rem; color: var(--umb-ink-4); margin: 0 0 4px; }
.guide-cta { margin-top: auto; }
.guide-note { max-width: 1200px; margin: 0 auto; padding: 0 20px 8px; color: var(--umb-ink-3); font-size: 0.875rem; }

/* ---------- Mobile ---------- */

.filters-done {
  display: none; position: sticky; bottom: 0;
  padding: 12px 0 4px; margin-top: 10px;
  background: var(--umb-surface); border-top: 1px solid var(--umb-border);
}
.filters-done .btn-view { width: 100%; background: var(--umb-accent); color: var(--umb-accent-ink); border: none; cursor: pointer; }

@media (max-width: 900px) {
  .mkt-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 8px; }
  .page-head.has-bar { display: block; }
  .page-head.has-bar .page-lede { margin-bottom: 20px; }
  .filters {
    position: fixed; inset: auto 0 0 0; z-index: 60; top: auto;
    border-radius: 16px 16px 0 0; box-shadow: var(--umb-shadow-sheet);
    max-height: 78vh;
    transform: translateY(105%); visibility: hidden;
    transition: transform 220ms ease, visibility 0s linear 220ms;
  }
  .filters.open { transform: translateY(0); visibility: visible; transition: transform 220ms ease; }
  /* bottom-sheet furniture: drag handle + sticky results button */
  .filters::before {
    content: ""; display: block; width: 36px; height: 4px;
    border-radius: 999px; background: var(--umb-border); margin: 10px auto 0;
  }
  .filters-done { display: block; }
  .filters-close { display: inline-flex; }
  .filters-open { display: inline-flex; }
  .site-bar-inner { padding: 12px 16px; gap: 12px; }
  .site-bar-logo img { width: 180px; height: 36px; }
}
@media (min-width: 901px) {
  .filters-close { display: none; }
}
.filters-close {
  align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--umb-ink-3);
  font-size: 1.3rem; line-height: 1; padding: 6px 10px; border-radius: 6px;
}

/* ---------- comparison overlay (opened from the saved drawer) ---------- */

.cmp-overlay {
  position: fixed; inset: 0; z-index: 90; background: rgb(15 27 40 / 0.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
body.cmp-lock { overflow: hidden; }
.cmp-panel {
  position: relative; /* anchors the swipe hint */
  background: var(--umb-surface); border-radius: var(--umb-radius);
  max-width: min(1080px, 100%); width: auto; min-width: min(620px, 100%); max-height: 92vh;
  display: flex; flex-direction: column; box-shadow: 0 24px 64px rgb(0 0 0 / 0.28);
}
/* One-time swipe affordance over the scrollable table: dark pill in the
   media-nav family, gentle nudge, fades on timeout or first real swipe. */
.cmp-swipe-hint {
  position: absolute; left: 50%; bottom: 88px;
  display: flex; align-items: center; gap: 6px;
  background: rgb(23 34 44 / 0.85); color: #fff;
  border-radius: var(--umb-radius-pill); padding: 8px 16px;
  font-size: 0.875rem; font-weight: 600; white-space: nowrap;
  pointer-events: none; z-index: 4;
  transform: translateX(-50%); /* centering — keyframes must end on this value */
  animation: cmpSwipeNudge 1.4s ease-in-out 3;
  transition: opacity 0.45s;
}
.cmp-swipe-hint svg { width: 16px; height: 16px; }
.cmp-swipe-hint.hide { opacity: 0; }
@keyframes cmpSwipeNudge {
  0%, 100% { transform: translateX(-50%); }
  50% { transform: translateX(calc(-50% + 12px)); }
}
@media (prefers-reduced-motion: reduce) { .cmp-swipe-hint { animation: none; transform: translateX(-50%); } }
/* Mobile: cap column widths so the next column always peeks — the visible
   sliver is itself the "this scrolls" signal. */
@media (max-width: 480px) {
  .cmp-table td { min-width: 150px; max-width: 200px; }
  .cmp-table tr > td:first-child { min-width: 92px; max-width: 106px; }
}
.cmp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px; flex: none;
  background: var(--umb-heading);
  border-radius: calc(var(--umb-radius) - 1px) calc(var(--umb-radius) - 1px) 0 0;
}
.cmp-head h2 {
  margin: 0; font-size: 1.25rem; font-weight: 700;
  font-family: var(--umb-font-display); color: #fff;
}
.cmp-sub { margin: 2px 0 0; font-size: 0.8438rem; color: rgb(255 255 255 / 0.78); }
.cmp-mixed {
  margin: 0; padding: 9px 18px; font-size: 0.8438rem; font-weight: 500;
  color: var(--umb-warn); background: var(--umb-warn-bg);
  border-bottom: 1px solid var(--umb-border);
}
.cmp-close {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  border: 1px solid rgb(255 255 255 / 0.5); background: transparent;
  color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.cmp-close:hover, .cmp-close:focus-visible { border-color: #fff; background: rgb(255 255 255 / 0.14); outline-color: #fff; }
/* NO horizontal padding here: sticky cells pin to the scrollport edge, and
   any side padding becomes a see-through strip where scrolled columns peek
   out from under the pinned label column. Cell padding provides the air. */
.cmp-scroll { overflow: auto; padding: 2px 0 12px; }
/* separate (not collapse): collapsed borders belong to the table layer and
   stay behind when a sticky cell pins, drawing seams that expose the
   scrolled content between label cells. */
.cmp-table { border-collapse: separate; border-spacing: 0; width: auto; min-width: 100%; margin: 0 auto; }
.cmp-table td {
  padding: 12px 16px; border-bottom: 1px solid var(--umb-border);
  vertical-align: top; text-align: left; font-size: 0.9rem; color: var(--umb-ink-2);
  min-width: 180px; max-width: 300px;
}
/* Sticky attribute-label column: mobile scrolls columns, labels stay pinned.
   The right border + soft shadow make the pinned column read as a layer
   above the columns sliding beneath it. */
.cmp-table tr > td:first-child {
  position: sticky; left: 0; background: var(--umb-surface); z-index: 2;
  min-width: 108px; max-width: 132px; font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--umb-ink-3);
  border-right: 1px solid var(--umb-border);
  box-shadow: 6px 0 8px -6px rgb(0 0 0 / 0.14);
}
.cmp-photo { padding-bottom: 4px !important; }
/* Same hard 4:3 lock as .card-media (aspect-ratio alone stretches under a
   portrait photo) so cycling never reflows the table; full photo shown,
   neutral bars fill. Hosts the shared .media-nav/.media-dots controls. */
.cmp-media {
  position: relative; max-width: 268px; margin: 0 auto;
  padding-top: min(75%, 201px); background: #eceff3; overflow: hidden;
  border-radius: var(--umb-radius-sm);
}
.cmp-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.cmp-media .cmp-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.cmp-listing { padding-top: 4px !important; }
.cmp-table .flag {
  width: 19px; height: 13px; display: inline-block; margin-left: 6px;
  vertical-align: -1px; border-radius: 2px; flex: none;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08);
}
.cmp-flag {
  font-size: 0.8438rem; line-height: 1.45;
  color: var(--umb-warn); background: var(--umb-warn-bg) !important;
}
.cmp-noimg { color: var(--umb-ink-4); } /* sizing comes from .cmp-media */
.cmp-noimg svg { width: 26px; height: 26px; }
.cmp-title { margin: 0; font-weight: 700; color: var(--umb-ink-1); font-size: 1.02rem; line-height: 1.35; }
.cmp-title.has-orig {
  cursor: pointer; text-decoration: underline dotted var(--umb-ink-4);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.cmp-price { font-size: 1.15rem; font-weight: 700; color: var(--umb-ink-1); font-variant-numeric: tabular-nums; }
.cmp-table .price-qual { margin: 2px 0 0; }
.cmp-yes svg { width: 16px; height: 16px; color: var(--umb-good); }
.cmp-no { color: var(--umb-ink-4); }
.cmp-band-td {
  position: static !important; max-width: none !important;
  background: var(--umb-accent-tint); border-top: 2px dashed var(--umb-border);
  text-transform: none !important;
  box-shadow: none !important; border-right: none !important;
}
/* Full-width band cell scrolls, but its label pins to the viewport edge so
   "Our analysis" never rides off-screen on mobile. */
.cmp-band-td .analysis-tag { position: sticky; left: 16px; display: inline-block; }
.cmp-ana { background: none; padding: 6px 8px !important; }
.cmp-ana-box {
  background: var(--umb-accent-tint); border-radius: var(--umb-radius-sm);
  padding: 10px 12px; height: 100%;
}
.cmp-ana-box.cmp-flag { display: block; }
.cmp-info { display: inline-block; margin-left: 5px; vertical-align: -2px; color: var(--umb-ink-4); }
.cmp-info svg { width: 13px; height: 13px; }
td[title]:hover .cmp-info { color: var(--umb-accent); }
.cmp-model {
  display: inline-block; background: var(--umb-heading); color: #fff;
  border-radius: var(--umb-radius-pill); padding: 5px 14px;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
}
.cmp-inc-td {
  position: static !important; max-width: none !important; padding: 0 !important;
  background: var(--umb-bg); /* band background lives on the td so the full row stays tinted */
  box-shadow: none !important; border-right: none !important;
}
/* The toggle shrinks to its content and pins, so "Compare what's included"
   stays on-screen while the full-width band scrolls beneath. */
.cmp-inc-btn {
  display: flex; align-items: center; gap: 8px;
  position: sticky; left: 0; width: max-content;
  background: none; border: 0; cursor: pointer; font: inherit;
  padding: 9px 16px; color: var(--umb-ink-2); font-size: 0.8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.cmp-inc-btn:hover { color: var(--umb-accent); }
.cmp-chev {
  width: 9px; height: 9px; flex: none; margin-top: -4px;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--umb-ease);
}
.cmp-inc-btn[aria-expanded="false"] .cmp-chev { transform: rotate(-45deg); margin-top: 2px; }
/* CTA row pinned to the bottom of the scroll area so the affiliate buttons
   are always in view; filled accent = presence without borrowing the
   warning orange. */
/* Affiliate footer OUTSIDE the scroll area: rows can never slide under it,
   so nothing is ever occluded. The button track translates with the
   table's scrollLeft and clips at the label divider, so each button still
   slides behind the label column together with its column. */
.cmp-footer {
  display: flex; flex: none; align-items: stretch;
  background: var(--umb-surface); border-top: 1px solid var(--umb-border);
  box-shadow: 0 -8px 14px -10px rgb(0 0 0 / 0.3);
  border-radius: 0 0 var(--umb-radius) var(--umb-radius);
  position: relative; z-index: 5; /* above the table's sticky label cells */
}
.cmp-footer-spacer { flex: none; border-right: 1px solid var(--umb-border); }
.cmp-footer-clip { flex: 1; overflow: hidden; position: relative; padding: 10px 0; }
.cmp-footer-track { position: relative; height: 44px; will-change: transform; }
.cmp-footer-track .btn-view {
  position: absolute; top: 0;
  background: var(--umb-accent); border-color: var(--umb-accent); color: var(--umb-accent-ink);
  justify-content: center;
}
.cmp-footer-track .btn-view:hover { background: var(--umb-accent-strong); border-color: var(--umb-accent-strong); color: var(--umb-accent-ink); }
.cmp-bar {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 0 2px; border-top: 1px solid var(--umb-border); margin-top: 10px;
}
.cmp-bar .btn-view { justify-content: center; }
.cmp-note { margin: 0; font-size: 0.8125rem; color: var(--umb-ink-3); }
.saved-row .cmp-check { width: 17px; height: 17px; flex: none; accent-color: var(--umb-accent); align-self: center; }

/* ---------- card photo mini-gallery ---------- */

/* Dark translucent like .pill-model so the arrows read on any photo; SVG
   chevrons (not text glyphs) so the mark is geometrically centered. */
.media-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: rgb(23 34 44 / 0.62); border: none;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.media-nav svg { width: 18px; height: 18px; display: block; }
.media-nav.prev { left: 8px; }
.media-nav.next { right: 8px; }
.media-nav:hover { background: rgb(23 34 44 / 0.88); }
.media-nav:focus-visible { background: rgb(23 34 44 / 0.88); outline: 2px solid #fff; outline-offset: 1px; }
.media-dots {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px;
}
.media-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgb(255 255 255 / 0.75); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.35);
}
.media-dots i.on { background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5); }