/*
 * bw-web.css — the `W` discovery surface component layer (the result + listing UI).
 *
 * Source of truth: ../../designsystem/components.md § "Web (discovery surface)"
 * (components W-1…W-9 + page shell) and the signed-off reference render
 * designsystem/web/discovery-preview.html. This sheet is the production
 * transcription of the CSS inlined in that preview.
 *
 * INVARIANT: every value is a var(--bw-*) token from tokens.css (linked first at
 * :root) — never an inlined hex / dp. The only raw px allowed are (a) the single
 * 720px responsive breakpoint (@media can't read a custom property) and (b) a
 * couple of small component dimensions the design deliberately left un-tokenised
 * (the gallery-strip thumb), each commented where it appears.
 *
 * NO JavaScript: the gallery thumbnail swap is the CSS radio `:checked ~`
 * technique; sort / filter / pager are server-rendered <a> links. Dark mode is
 * automatic via tokens.css's @media (prefers-color-scheme: dark) — this sheet
 * carries no theme overrides.
 */

/* ---- reset + base -------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body {
  background: var(--bw-color-surface);
  color: var(--bw-color-ink);
  font-family: var(--bw-font-family-body);
  font-size: var(--bw-font-body-md-size);
  line-height: var(--bw-font-body-md-lh);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ---- page shell ---------------------------------------------------- */
.bw-page { max-width: var(--bw-layout-container-max); margin: 0 auto; padding: 0 var(--bw-spacing-md); }
.bw-header {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--bw-spacing-sm) var(--bw-spacing-lg);
  padding: var(--bw-spacing-md) 0;
  border-bottom: 1px solid var(--bw-color-outline);
}
.bw-wordmark {
  font-family: var(--bw-font-family-display); font-weight: 600;
  font-size: var(--bw-font-headline-md-size); line-height: var(--bw-font-headline-md-lh);
  color: var(--bw-color-ink);
}
/* W-10 quiet secondary nav: Блог / Приложение / geo, right-grouped; wraps below the
   wordmark as a unit on narrow screens (fluid, like the auto-fill grid — no media query) */
.bw-nav { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--bw-spacing-md); }
.bw-nav a { font-size: var(--bw-font-body-sm-size); color: var(--bw-color-ink-muted); }
.bw-nav a:hover { color: var(--bw-color-ink); }
.bw-header .bw-geo { font-size: var(--bw-font-body-sm-size); color: var(--bw-color-ink-muted); }
.bw-footer {
  margin-top: var(--bw-spacing-xxl); padding: var(--bw-spacing-lg) 0;
  border-top: 1px solid var(--bw-color-outline);
  color: var(--bw-color-ink-muted); font-size: var(--bw-font-body-sm-size);
  display: flex; gap: var(--bw-spacing-lg); flex-wrap: wrap;
}

/* ---- W-5 hero (prompt + centered search) --------------------------- */
.bw-hero {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--bw-spacing-md);
  padding: var(--bw-spacing-xxl) 0 var(--bw-spacing-lg);
}
.bw-prompt {
  font-family: var(--bw-font-family-display); font-weight: 600;
  font-size: var(--bw-font-display-md-size); line-height: var(--bw-font-display-md-lh);
  text-align: center; color: var(--bw-color-ink);
}
.bw-search-form { display: flex; gap: var(--bw-spacing-sm); justify-content: center; width: 100%; }
.bw-search-input {
  flex: 0 1 32rem;
  background: var(--bw-color-surface); color: var(--bw-color-ink);
  border: 1px solid var(--bw-color-outline); border-radius: var(--bw-radius-sm);
  padding: var(--bw-spacing-smd) var(--bw-spacing-md);
  font-family: var(--bw-font-family-body); font-size: var(--bw-font-body-lg-size);
}
.bw-search-input:focus { outline: 2px solid var(--bw-color-primary); outline-offset: -1px; }

/* ---- W-6 / shared button language ---------------------------------- */
.bw-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--bw-spacing-smd) var(--bw-spacing-lg);
  font-family: var(--bw-font-family-body);
  font-size: var(--bw-font-label-lg-size); font-weight: 500;
  border-radius: var(--bw-radius-md); border: 1px solid transparent;
}
.bw-btn.primary { background: var(--bw-color-primary); color: var(--bw-color-on-primary); }
.bw-btn.secondary { background: transparent; border-color: var(--bw-color-primary); color: var(--bw-color-primary); }

/* ---- W-14 unified filter bar + W-15 category scope picker ----------- */
/* Layout B: one wrapping row, a thin divider setting the category scope apart from the refinements.
   Shadow-free (no elevation tokens in v1) — dropdown panels are outline + surface. No-JS: the pickers
   are native <details>; the W-15 JS dropdown overlay is a later enhancement. */
.bw-filterbar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--bw-spacing-sm); padding-bottom: var(--bw-spacing-md);
}
.bw-fb-group { display: flex; align-items: center; flex-wrap: wrap; gap: var(--bw-spacing-sm); }
.bw-fb-divider { align-self: stretch; width: 1px; min-height: 24px; background: var(--bw-color-outline); margin: 0 var(--bw-spacing-xs); }
.bw-fb-clear {
  font-size: var(--bw-font-label-lg-size); font-weight: 500; color: var(--bw-color-ink-muted);
  padding: var(--bw-spacing-xs) var(--bw-spacing-sm); margin-left: var(--bw-spacing-xs);
}
.bw-fb-clear:hover { color: var(--bw-color-ink); text-decoration: underline; text-underline-offset: 3px; }

/* chips (reused across scope + refinements) */
.bw-chip {
  display: inline-flex; align-items: center; gap: var(--bw-spacing-xs);
  padding: var(--bw-spacing-xs) var(--bw-spacing-smd);
  border: 1px solid var(--bw-color-outline); border-radius: var(--bw-radius-lg);
  background: var(--bw-color-surface);
  font-size: var(--bw-font-label-lg-size); color: var(--bw-color-ink); white-space: nowrap;
}
.bw-chip.is-add { border-style: dashed; color: var(--bw-color-ink-muted); }
.bw-chip.is-add:hover { color: var(--bw-color-ink); border-color: var(--bw-color-ink-muted); }
.bw-chip.is-selected { background: var(--bw-color-surface-variant); border-color: var(--bw-color-ink-muted); }
.bw-chip.is-scope.is-selected { border-color: var(--bw-color-ink); font-weight: 500; }
.bw-caret { font-size: 0.85em; color: var(--bw-color-ink-muted); }
.bw-x {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  margin-left: var(--bw-spacing-xxs); margin-right: -4px; border-radius: 50%;
  color: var(--bw-color-ink-muted); font-size: 15px;
}
.bw-x:hover { color: var(--bw-color-ink); background: var(--bw-color-outline); }

/* <details> pickers (verdict popover + scope tree) */
.bw-filter { position: relative; display: inline-block; }
.bw-filter > summary { list-style: none; display: inline-flex; cursor: pointer; }
.bw-filter > summary::-webkit-details-marker { display: none; }
.bw-filter[open] > summary .bw-chip { border-style: solid; color: var(--bw-color-ink); border-color: var(--bw-color-ink-muted); }
.bw-pop {
  position: absolute; z-index: 40; top: calc(100% + var(--bw-spacing-xs)); left: 0;
  min-width: 232px; max-width: min(88vw, 340px);
  background: var(--bw-color-surface); border: 1px solid var(--bw-color-outline);
  border-radius: var(--bw-radius-md); padding: var(--bw-spacing-sm);
}
.bw-pop-head { padding: var(--bw-spacing-xs) var(--bw-spacing-sm) var(--bw-spacing-sm); }
.bw-pop-title {
  font-family: var(--bw-font-family-mono); font-size: var(--bw-font-label-md-size);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--bw-color-ink-muted);
}
.bw-opt {
  display: flex; align-items: center; gap: var(--bw-spacing-sm); width: 100%; text-align: left;
  padding: var(--bw-spacing-sm); border-radius: var(--bw-radius-sm);
  font-size: var(--bw-font-body-md-size); color: var(--bw-color-ink);
}
.bw-opt:hover { background: var(--bw-color-surface-variant); }
.bw-opt.is-active { background: var(--bw-color-surface-variant); font-weight: 500; }
.bw-check {
  width: 18px; height: 18px; flex: 0 0 18px; border-radius: var(--bw-radius-sm);
  border: 1px solid var(--bw-color-outline); display: inline-flex; align-items: center;
  justify-content: center; font-size: 13px; color: var(--bw-color-on-primary);
}
.bw-opt[aria-checked="true"] .bw-check { background: var(--bw-color-primary); border-color: var(--bw-color-primary); }

/* W-15 scope tree (recursive nested <details>) */
.bw-treepop { width: 320px; max-width: 92vw; }
.bw-treebody { max-height: 320px; overflow-y: auto; }
.bw-treefoot {
  padding-top: var(--bw-spacing-sm); margin-top: var(--bw-spacing-xs);
  border-top: 1px solid var(--bw-color-outline);
  font-size: var(--bw-font-label-sm-size); color: var(--bw-color-ink-muted);
}
.bw-group > summary.bw-ghead {
  list-style: none; display: flex; align-items: center; gap: var(--bw-spacing-xs); width: 100%;
  padding: var(--bw-spacing-sm); border-radius: var(--bw-radius-sm);
  font-size: var(--bw-font-body-md-size); color: var(--bw-color-ink); cursor: pointer;
}
.bw-group > summary.bw-ghead::-webkit-details-marker { display: none; }
.bw-group > summary.bw-ghead::before {
  content: "\203A"; display: inline-block; width: 1em; text-align: center;
  color: var(--bw-color-ink-muted); transition: transform var(--bw-motion-fast) var(--bw-motion-easing-standard);
}
.bw-group[open] > summary.bw-ghead::before { transform: rotate(90deg); }
.bw-group > summary.bw-ghead:hover { background: var(--bw-color-surface-variant); }
.bw-glabel { overflow: hidden; text-overflow: ellipsis; }
.bw-count {
  margin-left: auto; padding-left: var(--bw-spacing-sm); flex: 0 0 auto;
  font-family: var(--bw-font-family-mono); font-size: var(--bw-font-label-sm-size); color: var(--bw-color-ink-muted);
}
.bw-tick { color: var(--bw-color-primary); font-weight: 700; margin-left: var(--bw-spacing-sm); flex: 0 0 auto; }
.bw-children { margin-left: var(--bw-spacing-sm); padding-left: var(--bw-spacing-sm); border-left: 1px solid var(--bw-color-outline); }
.bw-selectall .bw-glabel { color: var(--bw-color-primary); font-weight: 500; }

/* W-15 JS enhancement (bw-category-picker.js) — mobile bottom-sheet + scrim. The desktop dropdown keeps
   its outside-click close and needs no scrim. --bw-color-scrim is a backdrop DIM, not an elevation shadow. */
.bw-scrim { position: fixed; inset: 0; z-index: 45; background: var(--bw-color-scrim); }
@media (min-width: 561px) { .bw-scrim { display: none; } } /* desktop: no scrim, outside-click closes */
@media (max-width: 560px) {
  details.bw-scope.bw-js[open] > .bw-treepop {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none;
    z-index: 50; max-height: 80vh; border-radius: var(--bw-radius-lg) var(--bw-radius-lg) 0 0;
  }
  details.bw-scope.bw-js[open] > .bw-treepop .bw-treebody { max-height: 66vh; }
}

/* ---- W-8 results bar + sort text-links ----------------------------- */
.bw-resultsbar {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--bw-spacing-md);
  flex-wrap: wrap;
  padding: var(--bw-spacing-md) 0;
  border-top: 1px solid var(--bw-color-outline);
}
.bw-framing { font-size: var(--bw-font-body-sm-size); color: var(--bw-color-ink-muted); }
.bw-sort { display: flex; gap: var(--bw-spacing-md); flex-wrap: wrap; }
.bw-sort a { font-size: var(--bw-font-label-lg-size); font-weight: 500; color: var(--bw-color-ink-muted); }
.bw-sort a[aria-current="true"] { color: var(--bw-color-ink); text-decoration: underline; text-underline-offset: 4px; }

/* ---- W-1 result card grid ------------------------------------------ */
.bw-grid {
  display: grid; gap: var(--bw-spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(var(--bw-layout-grid-min), 1fr));
  padding-bottom: var(--bw-spacing-xl);
}
.bw-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--bw-color-outline); border-radius: var(--bw-radius-md);
  padding: var(--bw-spacing-md); gap: var(--bw-spacing-sm);
  background: var(--bw-color-surface);
  transition: border-color var(--bw-motion-fast) var(--bw-motion-easing-standard);
}
.bw-card:hover { border-color: var(--bw-color-ink-muted); }
.bw-thumb {
  aspect-ratio: 1 / 1; width: 100%;
  background: var(--bw-color-surface-variant); border-radius: var(--bw-radius-sm);
  overflow: hidden;
}
.bw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bw-card-title {
  font-size: var(--bw-font-title-md-size); line-height: var(--bw-font-title-md-lh); font-weight: 600;
  color: var(--bw-color-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bw-priceline { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bw-spacing-sm); }
.bw-shop { font-size: var(--bw-font-body-sm-size); color: var(--bw-color-ink-muted); }
.bw-price { font-size: var(--bw-font-title-md-size); font-weight: 600; font-variant-numeric: tabular-nums; }
.bw-card-meta {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--bw-spacing-sm);
  flex-wrap: wrap;
}
.bw-stale { font-size: var(--bw-font-label-sm-size); color: var(--bw-color-ink-muted); }

/* ---- W-2 honesty badge --------------------------------------------- */
.bw-badge {
  display: inline-flex; align-items: center; gap: var(--bw-spacing-xs);
  padding: var(--bw-spacing-xs) var(--bw-spacing-sm);
  background: var(--bw-color-surface-variant); border-radius: var(--bw-radius-sm);
  font-size: var(--bw-font-label-md-size); font-weight: 500;
}
/* 8px status dot = spacing-sm (the design's "leading 8px dot", W-2). */
.bw-badge .bw-dot { width: var(--bw-spacing-sm); height: var(--bw-spacing-sm); border-radius: 50%; flex: 0 0 var(--bw-spacing-sm); }
.bw-badge.positive { color: var(--bw-color-honesty-positive); }
.bw-badge.positive .bw-dot { background: var(--bw-color-honesty-positive); }
.bw-badge.neutral { color: var(--bw-color-honesty-neutral); }
.bw-badge.neutral .bw-dot { background: var(--bw-color-honesty-neutral); }

/* ---- empty search state -------------------------------------------- */
.bw-empty {
  padding: var(--bw-spacing-xxl) 0; text-align: center;
  color: var(--bw-color-ink-muted); font-size: var(--bw-font-body-lg-size);
  border-top: 1px solid var(--bw-color-outline);
}

/* ---- W-9 pager (Prev/Next text-links, no numbered crawl-space) ----- */
.bw-pager {
  display: flex; align-items: center; justify-content: center; gap: var(--bw-spacing-md);
  flex-wrap: wrap;
  padding: var(--bw-spacing-md) 0 var(--bw-spacing-xl);
  border-top: 1px solid var(--bw-color-outline);
}
.bw-pager a { font-size: var(--bw-font-label-lg-size); font-weight: 500; color: var(--bw-color-ink-muted); }
.bw-pager a:hover { color: var(--bw-color-ink); text-decoration: underline; text-underline-offset: 4px; }
.bw-pager .bw-pager-pos { font-size: var(--bw-font-body-sm-size); color: var(--bw-color-ink-muted); }

/* ---- W-4 / product page two-column --------------------------------- */
.bw-product {
  display: grid; grid-template-columns: 5fr 6fr; gap: var(--bw-spacing-xl);
  padding: var(--bw-spacing-xl) 0;
}
.bw-gallery { position: sticky; top: var(--bw-spacing-xl); align-self: start; }
.bw-gallery-main {
  aspect-ratio: 1 / 1; width: 100%;
  background: var(--bw-color-surface-variant); border-radius: var(--bw-radius-md);
  overflow: hidden; position: relative;
}
.bw-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bw-gallery-strip { display: flex; gap: var(--bw-spacing-sm); margin-top: var(--bw-spacing-sm); flex-wrap: wrap; }
.bw-gallery-strip label {
  /* 64px thumb: a component dimension the design left un-tokenised (no spacing
     token at 64px); kept raw + commented, like the 720px breakpoint. */
  width: 64px; height: 64px; flex: 0 0 64px;
  background: var(--bw-color-surface-variant); border-radius: var(--bw-radius-sm);
  border: 1px solid var(--bw-color-outline);
  overflow: hidden; cursor: pointer;
}
.bw-gallery-strip label img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* CSS-only gallery swap (radio `:checked ~`, no JS). The hidden radios precede
   the main + strip; the Nth checked radio shows the Nth main image and tints the
   Nth thumb. Bounded to 12 images (the largest curated gallery is ~11). Without
   CSS the images stack — a graceful fallback. */
.bw-gallery input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bw-gallery-main img { display: none; }
.bw-gallery-main img:first-of-type { display: block; } /* fallback when no radio engine */
.bw-gallery input:nth-of-type(1):checked ~ .bw-gallery-main img:nth-of-type(1),
.bw-gallery input:nth-of-type(2):checked ~ .bw-gallery-main img:nth-of-type(2),
.bw-gallery input:nth-of-type(3):checked ~ .bw-gallery-main img:nth-of-type(3),
.bw-gallery input:nth-of-type(4):checked ~ .bw-gallery-main img:nth-of-type(4),
.bw-gallery input:nth-of-type(5):checked ~ .bw-gallery-main img:nth-of-type(5),
.bw-gallery input:nth-of-type(6):checked ~ .bw-gallery-main img:nth-of-type(6),
.bw-gallery input:nth-of-type(7):checked ~ .bw-gallery-main img:nth-of-type(7),
.bw-gallery input:nth-of-type(8):checked ~ .bw-gallery-main img:nth-of-type(8),
.bw-gallery input:nth-of-type(9):checked ~ .bw-gallery-main img:nth-of-type(9),
.bw-gallery input:nth-of-type(10):checked ~ .bw-gallery-main img:nth-of-type(10),
.bw-gallery input:nth-of-type(11):checked ~ .bw-gallery-main img:nth-of-type(11),
.bw-gallery input:nth-of-type(12):checked ~ .bw-gallery-main img:nth-of-type(12) { display: block; }
/* once any radio is checked, suppress the first-of-type fallback so the chosen
   image is the only one shown */
.bw-gallery input:checked ~ .bw-gallery-main img:first-of-type { display: none; }
.bw-gallery input:nth-of-type(1):checked ~ .bw-gallery-main img:nth-of-type(1) { display: block; }
.bw-gallery input:nth-of-type(1):checked ~ .bw-gallery-strip label:nth-of-type(1),
.bw-gallery input:nth-of-type(2):checked ~ .bw-gallery-strip label:nth-of-type(2),
.bw-gallery input:nth-of-type(3):checked ~ .bw-gallery-strip label:nth-of-type(3),
.bw-gallery input:nth-of-type(4):checked ~ .bw-gallery-strip label:nth-of-type(4),
.bw-gallery input:nth-of-type(5):checked ~ .bw-gallery-strip label:nth-of-type(5),
.bw-gallery input:nth-of-type(6):checked ~ .bw-gallery-strip label:nth-of-type(6),
.bw-gallery input:nth-of-type(7):checked ~ .bw-gallery-strip label:nth-of-type(7),
.bw-gallery input:nth-of-type(8):checked ~ .bw-gallery-strip label:nth-of-type(8),
.bw-gallery input:nth-of-type(9):checked ~ .bw-gallery-strip label:nth-of-type(9),
.bw-gallery input:nth-of-type(10):checked ~ .bw-gallery-strip label:nth-of-type(10),
.bw-gallery input:nth-of-type(11):checked ~ .bw-gallery-strip label:nth-of-type(11),
.bw-gallery input:nth-of-type(12):checked ~ .bw-gallery-strip label:nth-of-type(12) { border-color: var(--bw-color-primary); border-width: 2px; }

.bw-detail { display: flex; flex-direction: column; gap: var(--bw-spacing-md); }
.bw-detail-title {
  font-family: var(--bw-font-family-display); font-weight: 600;
  font-size: var(--bw-font-headline-md-size); line-height: var(--bw-font-headline-md-lh);
}
.bw-detail-shop { font-size: var(--bw-font-body-md-size); color: var(--bw-color-ink-muted); }
.bw-detail-price {
  font-family: var(--bw-font-family-display); font-weight: 600;
  font-size: var(--bw-font-display-md-size); line-height: var(--bw-font-display-md-lh);
  font-variant-numeric: tabular-nums;
}
.bw-verdict-row { display: flex; align-items: center; gap: var(--bw-spacing-sm); flex-wrap: wrap; }
.bw-verdict-explain { font-size: var(--bw-font-body-sm-size); color: var(--bw-color-ink-muted); }
.bw-detail-meta { font-size: var(--bw-font-body-sm-size); color: var(--bw-color-ink-muted); }
.bw-actions { display: flex; flex-direction: column; gap: var(--bw-spacing-sm); margin-top: var(--bw-spacing-sm); }
.bw-actions .bw-btn { width: 100%; }

/* ---- W-3 price chart (static SVG) ---------------------------------- */
.bw-chart-block { display: flex; flex-direction: column; gap: var(--bw-spacing-xs); margin-top: var(--bw-spacing-sm); }
.bw-chart-axis { display: flex; justify-content: space-between; font-size: var(--bw-font-label-sm-size); color: var(--bw-color-ink-muted); }
.bw-chart svg { width: 100%; height: auto; display: block; }
/* cold-start: fewer than 2 observations → an honest note, not a blank slot or lone dot */
.bw-chart-empty {
  margin-top: var(--bw-spacing-sm); padding: var(--bw-spacing-lg) 0;
  font-size: var(--bw-font-body-sm-size); color: var(--bw-color-ink-muted);
  border-top: 1px solid var(--bw-color-outline);
}

/* ---- price-distribution histogram (components.md #34; category market-price page) -----
   SVG geometry (like .bw-chart) — no inline styles, so it clears the strict style-src CSP. */
.bw-histo-block { margin-top: var(--bw-spacing-md); padding-top: var(--bw-spacing-sm); border-top: 1px solid var(--bw-color-outline); }
.bw-histo-label {
  font-size: var(--bw-font-label-sm-size); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--bw-color-ink-muted); margin-bottom: var(--bw-spacing-sm);
}
.bw-histo svg { width: 100%; height: auto; display: block; }
.bw-histo-axis { display: flex; justify-content: space-between; font-size: var(--bw-font-label-sm-size); color: var(--bw-color-ink-muted); margin-top: var(--bw-spacing-xs); font-variant-numeric: tabular-nums; }

/* ---- W-12 category price row (home entry point to the market-price pages) ----- */
.bw-catrow { margin: var(--bw-spacing-md) 0 var(--bw-spacing-lg); }
.bw-catrow-title {
  display: block; font-size: var(--bw-font-label-sm-size); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--bw-color-ink-muted); font-weight: 600;
  margin-bottom: var(--bw-spacing-sm);
}
.bw-catrail { display: flex; gap: var(--bw-spacing-md); overflow-x: auto; padding-bottom: var(--bw-spacing-sm); scrollbar-width: thin; }
.bw-catcard {
  flex: 0 0 auto; width: 150px; display: flex; flex-direction: column; gap: var(--bw-spacing-xxs);
  border: 1px solid var(--bw-color-outline); border-radius: var(--bw-radius-lg);
  padding: var(--bw-spacing-smd); background: var(--bw-color-surface);
}
.bw-catcard:hover { border-color: var(--bw-color-primary); }
.bw-catcard-cat { font-size: var(--bw-font-label-md-size); color: var(--bw-color-ink-muted); }
.bw-catcard-median { font-family: var(--bw-font-family-display); font-weight: 600; font-size: var(--bw-font-title-md-size); font-variant-numeric: tabular-nums; }
.bw-catspark { margin: var(--bw-spacing-xxs) 0; }
.bw-catspark svg { width: 100%; height: auto; display: block; }
.bw-catcard-range { font-size: var(--bw-font-label-sm-size); color: var(--bw-color-ink-muted); font-variant-numeric: tabular-nums; }

/* ---- the single responsive breakpoint (the one allowed raw px) ----- */
@media (max-width: 720px) {
  .bw-product { grid-template-columns: 1fr; }
  .bw-gallery { position: static; }
  /* the result grid reflows to one column automatically via auto-fill */
}