/* ============================================================
   AVTOKREDO SEARCH SYSTEM — unified components
   Used by /poisk/, /katalog/, /?s= search pages
   ============================================================ */

/* === LAYOUT === */
.srchLayout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 32px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px clamp(16px, 3vw, 32px);
}
@media (max-width: 1023px) {
  .srchLayout { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
}

/* === SIDEBAR === */
.srchSidebar {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e6e6e3);
  border-radius: 16px;
  padding: 20px 22px;
  align-self: start;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
/* R30: sidebar radius onto the --r-md token (was an off-scale 18px next to 16px cards). */
.srchSidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.srchSidebar__head h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  font-family: var(--display, Inter), system-ui;
}
.srchSidebar__reset {
  font-size: 12px;
  color: oklch(0.46 0.16 150);
  text-decoration: none;
  font-family: var(--mono, monospace);
}
.srchSidebar__reset:hover { color: var(--cta); text-decoration: underline; }

.srchSidebar__group { margin: 0 0 18px; padding: 0; border: 0; }
.srchSidebar__group legend {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink-soft, #5f636a);
  margin-bottom: 10px;
  padding: 0;
}

/* === CHIPS (unified style) === */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1.5px solid var(--line, #e6e6e3);
  border-radius: 999px;
  background: var(--surface, #fff);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #0c1f14);
  cursor: pointer;
  transition: transform var(--dur-press, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; /* R16: no transition:all (emil) */
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
}
.chip:hover { border-color: var(--ink-soft, #5f636a); background: var(--bg-2, #ebf1e8); }
.chip.is-on {
  background: var(--ink, #0c1f14);
  color: var(--bg, #f5f8f4);
  border-color: var(--ink, #0c1f14);
}
.chip.is-on:hover { background: oklch(0.36 0.16 150); }
.chip__count {
  /* R31: explicit colour instead of opacity (opacity silently shifts contrast on tinted/dark
     chip states); +0.5px for the older audience — the count is the key info-scent cue. */
  font-family: var(--mono, monospace);
  font-size: 11.5px;
  color: var(--ink-soft);
  font-weight: 600;
}
.chip.is-on .chip__count { color: rgba(245,248,244,0.82); }
.chip__remove {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px 0 4px;
  opacity: 0.7;
  margin-left: 2px;
}
.chip__remove:hover { opacity: 1; }
.chip--quick { padding: 9px 15px; font-weight: 600; }
.chip--accent.is-on { background: oklch(0.46 0.16 150); border-color: oklch(0.46 0.16 150); }

.chipGroup { display: flex; flex-wrap: wrap; gap: 6px; }

/* === RANGE INPUTS === */
.rangeRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.rangeRow input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1.5px solid var(--line, #e6e6e3);
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface, #fff);
  box-sizing: border-box;
  -moz-appearance: textfield;
}
.rangeRow input::-webkit-outer-spin-button,
.rangeRow input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rangeRow input:focus { outline: none; border-color: var(--cta); box-shadow: 0 0 0 3px oklch(0.66 0.20 148 / 0.15); }

/* === SUBMIT BUTTON === */
.srchSidebar__submit {
  width: 100%;
  padding: 14px;
  background: var(--ink, #0c1f14);
  color: var(--bg, #f5f8f4);
  border: 0;
  border-radius: 12px;
  font-family: var(--display, Inter);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.015em;
  cursor: pointer;
  margin-top: 8px;
  transition: background .15s;
}
.srchSidebar__submit:hover { background: oklch(0.36 0.16 150); }
.srchSidebar__submit-count { font-family: var(--mono); margin-left: 6px; opacity: 0.85; }

/* === TOOLBAR (above results) === */
.srchToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.srchToolbar__count {
  font-size: 14px;
  color: var(--ink-soft, #5f636a);
  font-family: var(--mono);
}
.srchToolbar__count b { color: var(--ink); font-weight: 700; font-family: var(--display, Inter); font-size: 16px; }

/* === SORT (custom dropdown, replaces native select) === */
.sortDropdown { position: relative; display: inline-block; }
.sortDropdown__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1.5px solid var(--line, #e6e6e3);
  border-radius: 12px;
  background: var(--surface, #fff);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink, #0c1f14);
  cursor: pointer;
  transition: transform var(--dur-press, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; /* R16: no transition:all (emil) */
  font-family: inherit;
}
.sortDropdown__btn:hover { border-color: var(--ink-soft); }
.sortDropdown__btn:after {
  content: '';
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 4px;
  transition: transform .15s;
}
.sortDropdown.is-open .sortDropdown__btn:after { transform: rotate(-135deg) translateY(2px); }
.sortDropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e6e6e3);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 30px -10px rgba(15,26,20,0.18);
  z-index: 50;
  display: none;
}
.sortDropdown.is-open .sortDropdown__menu { display: block; }
.sortDropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  transition: background .12s;
  font-family: inherit;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
}
.sortDropdown__item:hover { background: var(--bg-2, #ebf1e8); }
.sortDropdown__item.is-selected { background: var(--ink); color: var(--bg); font-weight: 600; }

/* === RESULTS GRID === */
.srchGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px; /* R31: was 16 — a touch more air so the dense 4-up catalog breathes */
}
/* R15 H-9: the fixed 4-col override is sized for the FULL-WIDTH /poisk/ results area
   (.srchRes). Landing [auto-feed] / sold-cars grids reuse .srchGrid inside a ~760px
   content column — 4 forced tracks there meant ~160px cards with the price wrapped to
   three lines and a clipped CTA. Those grids now keep the fluid auto-fill base rule. */
/* R32-9: the home 'Свіжі авто' bento (#grid) used the fluid auto-fill base, so its span-2 feature
   card left a ragged last row / orphaned empty cell at most desktop widths. Lock it to 4 tracks on
   desktop — feature(2) + 6 normals = two clean rows, every right edge aligned. */
@media (min-width: 1024px) { #grid.srchGrid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .srchRes .srchGrid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1500px) { .srchRes .srchGrid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.srchGrid--list { grid-template-columns: 1fr !important; }
/* R31: on phones the two car-detail cross-sell rails (8 cards each) stacked into a ~16-card
   single-column wall of green CTAs, burying the page. Cap each rail to 4 on mobile — the
   "Дивитись усі →" link under each rail is the path to the rest. Desktop keeps the full 8. */
@media (max-width: 560px) {
  .car-similar .srchGrid > .car-card:nth-child(n+5) { display: none; }
}
/* R30: the favourites "Популярні авто" block is always exactly 4 cards. The fluid auto-fill
   base resolved to 3 tracks at ~720px → an orphaned 4th card with a dead gap. Pin it to 2×2
   on tablet and 1×4 on wide so 4 cars always balance. */
@media (min-width: 600px) and (max-width: 1023px) { #favPopularGrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { #favPopularGrid { grid-template-columns: repeat(4, 1fr); } }

/* === Styled native <select> + <input> for sidebar filters and forms === */
/* Targets unbranded selects/inputs (not .sortDropdown which has its own style).
   Applies the avtokredo design language: pill shape, focus accent, custom arrow. */
.filt select,
.filt input[type=text],
.filt input[type=number],
.filt input[type=tel],
input.filt__rangeInput,
select.facetSelect {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font: 500 14.5px/1.3 var(--sans, system-ui);
  color: var(--ink, #0c1f14);
  background: #fff;
  border: 1.5px solid var(--line, #e6e6e3);
  border-radius: 12px;
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.filt select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b3a5b' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  cursor: pointer;
}
.filt select:hover,
.filt input:hover { border-color: oklch(0.75 0.12 148); }
.filt select:focus,
.filt input:focus {
  border-color: var(--cta, oklch(0.62 0.20 150));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta, oklch(0.62 0.20 150)) 22%, transparent);
}
.filt select[multiple] {
  padding: 8px;
  background-image: none;
  min-height: 140px;
}
.filt select[multiple] option {
  padding: 7px 10px;
  border-radius: 8px;
  margin: 2px 0;
  cursor: pointer;
}
.filt select[multiple] option:checked {
  background: var(--cta-hover);
  color: #fff;
}
/* Spacing between filter fieldsets */
.filt__grp { margin-bottom: 18px !important; }
.filt__grp legend { padding-bottom: 8px !important; }

/* Hero search-field native select restyle (sharper than current bare appearance) */
.search__field select#sfModel {
  cursor: pointer;
}

/* === Visible, well-styled pagination === */
.sa-pager {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 28px 0 8px;
  font-family: var(--mono, monospace);
  font-size: 14px;
}
.sa-pager a, .sa-pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 12px;
  text-decoration: none;
  border: 1.5px solid var(--line, #e6e6e3);
  color: var(--ink, #0c1f14);
  background: #fff;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.sa-pager a:hover { background: var(--bg-2, #ebf1e8); border-color: var(--ink-soft, #5f636a); }
.sa-pager a:active { transform: translateY(1px); }
.sa-pager .current { background: var(--ink, #0c1f14); color: #fff; border-color: var(--ink, #0c1f14); font-weight: 700; }
.sa-sort--count-only { padding: 12px 4px 6px; color: var(--ink-soft, #5f636a); font-size: 14px; }
.sa-sort--count-only .sa-count strong { color: var(--ink, #0c1f14); font-family: var(--mono, monospace); }

/* === VIEW TOGGLE === */
.viewToggle { display: inline-flex; gap: 2px; border: 1.5px solid var(--line); border-radius: 10px; padding: 2px; }
.viewToggle__btn {
  width: 36px; height: 32px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.viewToggle__btn.is-on { background: var(--ink); color: var(--bg); }

/* === CAR-CARD (unified, single source of truth) === */
.car-card {
  position: relative;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e6e6e3);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: column;
}
.car-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(15,26,20,0.2); }
.car-card--feature { grid-column: span 2; }
@media (max-width: 1023px) { .car-card--feature { grid-column: span 1; } }

.car-card__media {
  display: block;
  position: relative;
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #e0e6dd 0%, #c8d2bf 100%);
  overflow: hidden;
}
.car-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.car-card:hover .car-card__media img { transform: scale(1.04); }
.car-card__media-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: rgba(60,80,60,0.3);
}
.car-card__media--noimg { background: linear-gradient(135deg, #e0e6dd 0%, #c8d2bf 100%); display: flex; align-items: center; justify-content: center; }
.car-card__media--noimg img { display: none; }
/* broken/missing image → neutral SVG car silhouette (R31: was a 🚗 emoji — OS-variable, placeholder-ish) */
.car-card__media--noimg::after {
  content: '';
  width: 52px; height: 52px;
  background: center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364706a' stroke-width='1.4'><path d='M5 13l1.5-4.5A2 2 0 0 1 8.4 7h7.2a2 2 0 0 1 1.9 1.5L19 13m-14 0h14m-14 0v4m14-4v4M7 17h.01M17 17h.01M5 17h14'/><circle cx='7.5' cy='16.5' r='1.5'/><circle cx='16.5' cy='16.5' r='1.5'/></svg>");
  opacity: 0.55;
}

.car-card__year {
  position: absolute;
  bottom: 12px; left: 12px;            /* moved bottom-left to avoid heart/badges crowd */
  padding: 4px 10px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #0c1f14);
}

.car-card__badges {
  position: absolute;
  top: 12px; left: 12px;                /* badges left side, heart right */
  display: flex;
  gap: 4px;
  flex-direction: column;
  align-items: flex-start;
}
.car-card__badge {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  letter-spacing: 0.02em;
}
/* R31: was var(--cta) green — collided with the green price + green CTA in one card (3 greens,
   no hierarchy). Dark ink badge so brand green is owned solely by the action. */
.car-card__badge--new { background: var(--ink, #0c1f14); color: #fff; }
.car-card__badge--top { background: oklch(0.78 0.20 80); color: #2a2c33; }
.car-card__badge--deal { background: oklch(0.60 0.20 25); color: #fff; }
.car-card__badge--checked { background: oklch(0.95 0.05 148); color: oklch(0.36 0.16 150); border: 1px solid oklch(0.85 0.10 148); }
.car-card__badge--owner { background: oklch(0.97 0.03 90); color: oklch(0.40 0.15 80); border: 1px solid oklch(0.85 0.10 90); }

.car-card__heart {
  position: absolute;
  top: 10px; right: 10px;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(4px);
  color: var(--ink-3, #3a3d42);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-press, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; /* R16: no transition:all (emil) */
  z-index: 2;
}
/* Extend the tap target to ≥44px without enlarging the visible circle. */
.car-card__heart::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; }
.car-card__heart:hover { color: oklch(0.60 0.20 25); transform: scale(1.1); }
.car-card__heart.is-fav { color: oklch(0.60 0.20 25); }
.car-card__heart.is-fav svg { fill: currentColor; }

.car-card__body { padding: 16px 18px; display: flex; flex-direction: column; flex: 1; }
.car-card__line { margin-bottom: 4px; }
.car-card__brand {
  font-family: var(--mono, monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft, #5f636a);
  font-weight: 600;
}
.car-card__title {
  /* R31: was --display (Bricolage, a high-contrast DISPLAY face) at 16.5px — quirky terminals
     hurt model-name legibility at body grade and mixed 3 faces per card. Sans for sub-24px. */
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink, #0c1f14);
  margin: 0 0 8px;
}
/* R29 P0-4: brand merged into the title; give the make a touch more weight than the
   model so "ЗАЗ Sens · Седан" reads make-first at a glance. */
.car-card__title-brand { font-weight: 700; }
.car-card__meta {
  font-size: 12.5px;
  color: var(--ink-soft, #5f636a);
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.car-card__meta-sep { opacity: 0.5; }

.car-card__price-row {
  /* R33: was a horizontal flex (price | CTA). After the R32 bento change made /poisk/ a 4-col
     grid, cards next to the filter sidebar dropped to ~200px and the side-by-side CTA crushed the
     price block — "810 000"/"₴"/"+"/"КАСКО"/"внесок" each wrapped to their own line and the green
     button overlapped/clipped the last line on every card. Stack vertically: the price block gets
     the full card width (never fragments) and the CTA becomes a full-width button below it, matching
     the home/v2/mobile pattern. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #e6e6e3);
  margin-top: auto;
}
.car-card__price-block { min-width: 0; }
.car-card__price-lbl, .car-card__price-sub, .car-card__price-note { white-space: nowrap; }
.car-card__price-lbl {
  /* R30: 10.5px all-caps was sub-legible on phones for an older car-credit audience; +1px and
     tighter tracking keep "ЦІНА АВТО"/"ПЛАТІЖ" on one line while staying readable. */
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft, #5f636a);
  font-weight: 600;
}
.car-card__price {
  /* R31: tabular SANS instead of JetBrains Mono — the hero conversion number should not read
     as terminal output on a credit/bank product (mirrors avtokredo-v2 tokens-v2). */
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink, #0c1f14);
  letter-spacing: -0.015em;
  margin-top: 2px;
}
.car-card__price small { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; white-space: nowrap; /* R15 H-9: don't let "₴/міс" wrap; R31: explicit colour not opacity, +size so '/міс' isn't misread as full price */ }
.car-card__price-sub {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  /* R32-22: the full-price line read as faint beside the bold monthly figure — nudge size up and
     colour a touch darker so it stays clearly legible (still subordinate to the monthly). */
  font-size: 12.5px;
  color: #555a61;
  margin-top: 2px;
}

/* Quick-apply button in card (moved here from the inline qa-modal <style> in functions.php
   so card styling lives with the rest of the card CSS; search.css is enqueued site-wide). */
/* R16 (backlog M20): the most-repeated CTA on the site was the only non-pill button */
.car-card__quick { display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px; background: #067835; color: #fff; border: 0; padding: 11px 16px; border-radius: var(--r-pill, 999px); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform 0.15s, background 0.15s; /* R33: was var(--cta) (oklch ~4.2:1, white text fails AA) — pin to AA-safe #067835 (5.6:1) like the other primary CTAs (R32). */ }
.car-card__quick:hover { background: #04602a; transform: translateY(-1px); }
.car-card__quick-lbl { white-space: nowrap; }
.car-card__quick-arrow { font-size: 16px; line-height: 1; }
/* CRO #1: on phones the quick-apply button becomes a full-width labeled CTA under the price
   (was hidden to an ambiguous "→" arrow), compare is demoted below */
@media (max-width: 600px) {
  /* base is already a vertical stack (R33); just enlarge the CTA tap target on phones */
  .car-card__quick { padding: 13px 16px; font-size: 15px; min-height: 46px; }
  .car-card__quick-lbl { display: inline; }
}

.car-card__compare {
  /* R33: the per-card "Порівняти" checkbox is a false affordance — its only JS handler fires an
     analytics 'compare_add' event; there is NO comparison view/tray anywhere on the site, so the
     control promises a feature that doesn't exist. Hide it site-wide (markup + analytics hook stay,
     so it can be re-enabled if a real compare feature ships). */
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 0 0;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink-soft, #5f636a);
  cursor: pointer;
  border-top: 1px solid var(--line, #e6e6e3);
  user-select: none;
}
.car-card__compare input { margin: 0; cursor: pointer; }

/* List view variant */
.srchGrid--list .car-card { display: grid; grid-template-columns: 280px 1fr; }
.srchGrid--list .car-card__media { aspect-ratio: auto; height: 100%; }

/* === MOBILE FILTER DRAWER === */
.filterDrawer { display: none; }
@media (max-width: 1023px) {
  .filterDrawer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
  }
  .filterDrawer.is-open { display: block; }
  .filterDrawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,26,20,0.45);
    backdrop-filter: blur(2px);
  }
  .filterDrawer__sheet {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    max-height: 88vh;
    background: var(--surface, #fff);
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform .25s ease;
  }
  .filterDrawer.is-open .filterDrawer__sheet { transform: translateY(0); }
  .filterDrawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line, #e6e6e3);
    flex-shrink: 0;
  }
  .filterDrawer__head h2 { font-size: 18px; margin: 0; font-weight: 700; font-family: var(--display); }
  .filterDrawer__close {
    width: 38px; height: 38px;
    border: 0;
    background: var(--bg-2, #ebf1e8);
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: var(--ink);
  }
  .filterDrawer__body {
    overflow-y: auto;
    flex: 1;
    padding: 16px 20px;
  }
  .filterDrawer__footer {
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
  }
  .filterDrawer__reset {
    flex: 0 0 auto;
    padding: 12px 16px;
    background: transparent;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    font-size: 13px;
    color: var(--ink-soft);
    cursor: pointer;
  }
  .filterDrawer__submit {
    flex: 1;
    padding: 14px;
    background: var(--ink);
    color: var(--bg);
    border: 0;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
  }
  /* Hide desktop sidebar */
  .srchSidebar { display: none; }
  /* Show "Open filters" sticky button on mobile */
  .filterTrigger {
    position: sticky;
    top: 8px;
    z-index: 10;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--ink);
    color: var(--bg);
    border: 0;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 12px;
  }
  .filterTrigger__count {
    background: var(--cta);
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-family: var(--mono);
  }
}
@media (min-width: 1024px) {
  .filterTrigger { display: none; }
}

/* === QUICK FILTER CHIPS BAR === */
.quickFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  padding: 14px 18px;
  background: var(--bg-2, #ebf1e8);
  border-radius: 14px;
}
.quickFilters__label {
  font-size: 12px;
  /* R32-14: --ink-soft (#5f636a) drops to ~4.2:1 on the tinted filter panel — below AA for this
     small uppercase label. Pin a darker grey that clears 4.5:1 on the panel. */
  color: #4c5158;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-right: 4px;
  display: inline-flex;
  align-items: center;
}

/* === COMPARE FLOATING BAR === */
.compareBar {
  position: fixed;
  bottom: 14px;
  left: 12px;            /* corner pill (was centered → covered main CTAs) */
  right: auto;
  transform: translateY(180%);
  background: var(--ink);
  color: var(--bg);
  padding: 10px 14px;
  border-radius: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  box-shadow: 0 16px 40px -8px rgba(15,26,20,0.45);
  z-index: 40;          /* below sticky CTA / modal so it never blocks a click */
  transition: transform .25s ease;
  max-width: calc(100vw - 24px);
  flex-wrap: wrap;
}
.compareBar.is-on { transform: translateY(0); }
/* R15 H-11: on mobile the sticky CTA (z-60, full-width) buried the compare bar (z-40,
   bottom 14px) — compare was effectively dead ≤768px. Lift it above the sticky bar. */
@media (max-width: 768px) {
  .compareBar { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}
/* reserve bottom space so in-flow CTAs (calculator/apply) always clear the bar */
body.has-compareBar { padding-bottom: 84px; }
.compareBar__label { font-size: 14px; font-weight: 600; }
.compareBar__count {
  background: var(--cta);
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
}
.compareBar__btn {
  background: var(--cta);
  color: #fff;
  border: 0;
  padding: 9px 18px;
  border-radius: var(--r-pill, 999px); /* R16: primary CTAs are pills */
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
}
.compareBar__btn:hover { background: var(--cta-hover); }
.compareBar__clear {
  background: transparent;
  color: rgba(245,248,244,0.6);
  border: 0;
  padding: 8px;
  cursor: pointer;
  font-size: 13px;
}

/* === Legacy class aliases (until find.php fully refactored) === */
.facetChip { /* inherit .chip styles */
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border: 1.5px solid var(--line, #e6e6e3); border-radius: 999px;
  background: var(--surface, #fff); font-size: 12.5px; font-weight: 500;
  color: var(--ink, #0c1f14); cursor: pointer; transition: transform var(--dur-press, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; /* R16: no transition:all (emil) */
  user-select: none; white-space: nowrap;
}
/* R15 H-12: the chip inputs were inline display:none → the entire facet sidebar was
   invisible to keyboard and screen readers (WCAG 2.1.1 full fail, ~60 controls).
   Visually-hidden keeps them focusable; the chip shows the focus ring. */
.facetChip__input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.facetChip:focus-within {
  outline: 2px solid var(--cta, oklch(0.52 0.20 150));
  outline-offset: 2px;
}
.facetChip:hover { border-color: var(--ink-soft); background: var(--bg-2, #ebf1e8); }
.facetChip.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.facetChip .count {
  font-family: var(--mono); font-size: 10.5px; opacity: 0.65; font-weight: 500;
}
.facetChip.is-on .count { opacity: 0.85; }
.facetChips { display: flex; flex-wrap: wrap; gap: 6px; }

.activeChip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 4px 5px 11px; background: var(--ink); color: var(--bg);
  border-radius: 999px; font-size: 12px; font-weight: 500;
}
.activeChips { display: flex; flex-wrap: wrap; gap: 6px; }
.activeChip__x {
  background: rgba(255,255,255,0.18); border: 0; color: var(--bg);
  width: 22px; height: 22px; border-radius: 50%;
  cursor: pointer; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 2px;
}
.activeChip__x:hover { background: rgba(255,255,255,0.32); }

/* Legacy .filt and .filt__grp now styled like .srchSidebar */
.filt {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e6e6e3);
  border-radius: 16px;
  padding: 18px 20px;
}
.filt__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.filt__head h2 { font-size: 16px; margin: 0; font-weight: 700; font-family: var(--display, Inter); }
.filt__reset { font-size: 12px; color: oklch(0.46 0.16 150); text-decoration: none; font-family: var(--mono); }
.filt__grp { margin: 0 0 16px; padding: 0; border: 0; }
.filt__grp legend {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; color: var(--ink-soft, #5f636a); margin-bottom: 8px;
  padding: 0;
}
.filt__range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filt__range input {
  width: 100%; height: 36px; padding: 0 11px;
  border: 1.5px solid var(--line); border-radius: 9px;
  font-size: 13px; font-family: inherit;
  background: var(--surface); box-sizing: border-box;
}
.filt__range input:focus { outline: none; border-color: var(--cta); }

/* Make srchBody match new layout */
.srchBody__inner {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1023px) {
  .srchBody__inner { grid-template-columns: 1fr; gap: 14px; }
  .filt { display: none; }
  .filt.is-mobile-open { display: block; }
}
.srchRes { min-width: 0; }
/* R31: on desktop the legacy .filt rail ran full-page height beside a much shorter results
   column (huge void, submit buried at the bottom). Pin it sticky and cap to the viewport so it
   scrolls internally and can't exceed the results column. (v2 poisk-v2.css does its own ≥1100.) */
@media (min-width: 1024px) {
  .filt { position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow-y: auto; }
}
.srchHead { padding: 20px 0 16px; }
.srchH1 {
  font-family: var(--display, Inter);
  font-size: var(--h1-hero, clamp(44px, 6.5vw, 88px)); /* R16: third competing scale unified to the token */
  text-wrap: balance;
  font-weight: 700;
  letter-spacing: -0.03em; /* R17: canon hero metrics (700 / -0.03 / lh 1.0) */
  line-height: 1.0;
  margin: 0 0 8px;
}
/* R17: one .ital accent for hero H1s site-wide (was gray italic here vs green on /katalog/) */
.srchH1 .ital { font-style: normal; font-weight: 700; color: var(--accent-deep, #1f7a46); }
.srchLede { color: var(--ink-soft); font-size: 15px; line-height: 1.55; max-width: 60ch; margin: 0; }

/* R15 H-10: .srchToolbar__filterBtn rules removed — the dead ghost button was deleted
   from find.php (the sticky .filterTrigger is the one working filter control). */
.srchToolbar__chips { flex: 1; min-width: 0; }
.srchToolbar__sort { /* native select fallback if custom dropdown not rendered */
  padding: 9px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
}

/* === FAVORITES NAV BADGE === */
.nav__fav {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  color: inherit;
  text-decoration: none;
  font-size: 14px;
}
.nav__fav-count {
  background: var(--cta);
  color: #fff;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-family: var(--mono);
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

/* === HAND-WRITTEN SEO ARTICLES (.seo-page from /seo-content/) === */
.seo-page {
  /* !important defeats `.brand { display: inline-flex }` from style.css that
     accidentally matches handcrafted markup `<article class="seo-page brand bmw">`.
     Without this override, article collapses to inline-flex container and
     hides all content above the cars block — H1 ends up at 3000px+ offset.
     Fixes brand/city/hot-page rendering after SEO content push. */
  display: block !important;
  width: 100% !important;
  font-family: var(--body, 'Manrope', system-ui, sans-serif);
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 75ch;
  margin: 0 auto;
}
.seo-page .breadcrumbs {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 24px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
/* R22: align landing breadcrumb links with the .crumbs system used on /poisk/ and /avto/
   (muted graphite, not brand-green) so crossing landing→search→detail no longer recolours
   the breadcrumb trail. Full markup/separator unification («/»→«›») is a content-side pass. */
.seo-page .breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.seo-page .breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.seo-page .breadcrumbs .current { color: var(--ink-soft); }
.seo-page h1 {
  font-family: var(--display, 'Bricolage Grotesque', serif);
  /* R16 (backlog M21): the most important keyword pages had the SMALLEST headline
     on the site (38px vs 52-88px siblings) — unified to the page-H1 token */
  font-size: var(--h1-page, clamp(32px, 4.5vw, 52px));
  text-wrap: balance;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 18px;
  color: var(--ink);
}
.seo-page h2 {
  font-family: var(--display, 'Bricolage Grotesque', serif);
  font-size: var(--h2-body, clamp(22px, 2.2vw, 28px)); /* R19 #17 */
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 36px 0 14px;
  color: var(--ink);
}
.seo-page h2:first-of-type { margin-top: 18px; }
.seo-page h3 {
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  margin: 28px 0 12px;
  color: var(--ink);
}
.seo-page .lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  font-weight: 500;
  margin: 0 0 24px;
}
.seo-page p { margin: 0 0 14px; }
.seo-page ul, .seo-page ol { padding-left: 22px; margin: 0 0 18px; }
.seo-page li { margin-bottom: 6px; }
.seo-page strong { color: var(--ink); font-weight: 700; }
.seo-page a { color: var(--accent-deep); }
.seo-page dl { margin: 0 0 18px; }
.seo-page dt { font-weight: 700; margin-top: 12px; color: var(--ink); }
.seo-page dd { margin: 4px 0 8px 18px; color: var(--ink-soft); }
/* Tables (BMW/spec lists) — force responsive scroll instead of expanding parent */
.seo-page table {
  min-width: 100%;          /* was width:100% — with display:block that prevented horizontal
                               scroll, so 5-col rate tables clipped on phones instead of scrolling */
  width: auto;
  border-collapse: collapse;
  font-size: 14px;
  margin: 0 0 22px;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 767px) { .seo-page table th, .seo-page table td { white-space: nowrap; } }
.seo-page thead { background: var(--bg-2); }
.seo-page th, .seo-page td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  white-space: normal;
}
.seo-page th { font-weight: 700; color: var(--ink); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 767px) {
  .seo-page { font-size: 15px; }
  .seo-page table { font-size: 13px; }
  .seo-page th, .seo-page td { padding: 7px 10px; }
}

/* ── R16.2: hand-written landing FAQ (<dl class="faq">, 177 pages) rendered as bare
   browser defaults (indented dd, dense wall). Clean Q/A list: display-font question,
   hairline separators, readable measure. No fake accordion — content stays crawlable. */
.seo-page dl.faq, .entry-content dl.faq {
  margin: 18px 0 8px;
}
.seo-page dl.faq dt, .entry-content dl.faq dt {
  font-family: var(--display, 'Bricolage Grotesque', system-ui);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink, #0c0d0e);
  text-wrap: balance;
  margin: 0 0 8px;
}
.seo-page dl.faq dt:not(:first-child), .entry-content dl.faq dt:not(:first-child) {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line, #e6e6e3);
}
.seo-page dl.faq dd, .entry-content dl.faq dd {
  margin: 0;
  color: var(--ink-3, #3a3d42);
  font-size: 15px;
  line-height: 1.65;
  max-width: 70ch;
}
/* R31: on phones the apply-page FAQ read as a cramped unstyled wall — raise body to 16px and
   give each Q&A block clearer separation so it reads as discrete items. */
@media (max-width: 768px) {
  .seo-page dl.faq dd, .entry-content dl.faq dd { font-size: 16px; line-height: 1.6; }
  .seo-page dl.faq dt, .entry-content dl.faq dt { font-size: 17px; }
  .seo-page dl.faq dt:not(:first-child), .entry-content dl.faq dt:not(:first-child) { margin-top: 20px; padding-top: 18px; }
}