/* Module 04 — Каталог */

.catalog-wrap { background: var(--mist); min-height: 100vh; }

/* Crumbs */
.crumbs {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 32px 0;
  display: flex; gap: 8px; align-items: center;
  font-size: 13px; color: var(--grey);
}
.crumbs a { color: var(--grey); text-decoration: none; }
.crumbs a:hover { color: var(--midnight); }
.crumbs .sep { color: var(--grey-light); }
.crumbs .current { color: var(--midnight); font-weight: 500; }

/* Page header */
.cat-head {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 32px 24px;
}
.cat-title-row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.cat-title { font-family: 'Manrope'; font-weight: 700; font-size: 40px; line-height: 48px; letter-spacing: -0.02em; color: var(--midnight); margin: 0; }
.cat-count { font-family: 'Inter'; font-weight: 500; font-size: 18px; color: var(--grey); font-feature-settings: 'tnum'; }
.cat-sub { font-size: 15px; color: var(--grey); margin: 8px 0 0; max-width: 720px; }

/* Layout shell: sidebar + main */
.cat-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px 80px;
  display: grid;
  grid-template-columns: 296px 1fr;
  gap: 32px;
  align-items: start;
}

/* ====== SIDEBAR FILTERS ====== */
.filters {
  background: var(--snow);
  border: 1px solid var(--stone);
  border-radius: 14px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.filters-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--stone);
  display: flex; align-items: center; justify-content: space-between;
}
.filters-title { font-family: 'Manrope'; font-weight: 700; font-size: 16px; color: var(--midnight); }
.filters-reset { font-size: 13px; color: var(--grey); background: none; border: none; cursor: pointer; padding: 0; }
.filters-reset:hover { color: var(--midnight); }
.filters-body { padding: 4px 20px 20px; overflow-y: auto; flex: 1; }

.f-group { padding: 16px 0; border-bottom: 1px solid var(--stone); }
.f-group:last-child { border-bottom: none; }
.f-group-head {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
  margin-bottom: 12px;
}
.f-group-name { font-family: 'Manrope'; font-weight: 600; font-size: 14px; color: var(--midnight); }
.f-group-chev { color: var(--grey); transition: transform 0.2s; }
.f-group.collapsed .f-group-chev { transform: rotate(-90deg); }
.f-group.collapsed .f-group-body { display: none; }

/* search input inside filter */
.f-search {
  width: 100%; height: 36px;
  border: 1.5px solid var(--stone);
  border-radius: 8px; background: var(--snow);
  font-family: 'Inter'; font-size: 13px; color: var(--midnight);
  padding: 0 12px 0 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: 12px center;
  margin-bottom: 8px;
}
.f-search:focus { outline: none; border-color: var(--voltage); }

/* checkbox list */
.f-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; padding-right: 4px; }
.f-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; cursor: pointer;
}
.f-row .f-row-label { display: flex; align-items: center; gap: 8px; color: var(--graphite); }
.f-row .f-row-count { color: var(--grey-light); font-feature-settings: 'tnum'; font-size: 12px; }
.f-row:hover .f-row-label { color: var(--midnight); }
.f-row .flag { font-size: 14px; }

/* mini check */
.mini-cb {
  width: 18px; height: 18px;
  border: 1.5px solid var(--stone);
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--snow);
  flex-shrink: 0;
}
.mini-cb.checked { background: var(--voltage); border-color: var(--voltage); }
.mini-cb.checked::after {
  content: ""; width: 10px; height: 6px;
  border-left: 2px solid var(--midnight);
  border-bottom: 2px solid var(--midnight);
  transform: rotate(-45deg) translate(0px, -1px);
}

/* show more */
.f-more { font-size: 12px; color: var(--voltage); background: none; border: none; cursor: pointer; padding: 6px 0 0; font-family: 'Inter'; font-weight: 500; }
.f-more:hover { text-decoration: underline; }

/* range */
.range-row { display: flex; gap: 8px; margin-bottom: 12px; }
.range-input {
  flex: 1; height: 36px;
  border: 1.5px solid var(--stone);
  border-radius: 8px; background: var(--snow);
  padding: 0 10px;
  font-family: 'Inter'; font-size: 13px; color: var(--midnight);
  font-feature-settings: 'tnum';
}
.range-input:focus { outline: none; border-color: var(--voltage); }

.range-track-wrap { position: relative; padding: 4px 0 0; height: 24px; }
.range-track {
  position: absolute; top: 12px; left: 0; right: 0;
  height: 3px; background: var(--stone); border-radius: 4px;
}
.range-track-fill {
  position: absolute; top: 12px;
  height: 3px; background: var(--voltage); border-radius: 4px;
}
.range-thumb {
  position: absolute; top: 6px;
  width: 14px; height: 14px;
  background: var(--snow); border: 2px solid var(--voltage);
  border-radius: 50%;
  cursor: grab;
  transform: translateX(-50%);
}
.range-thumb:hover { transform: translateX(-50%) scale(1.15); }

/* chip-style segmented filter (тип силовой, кузов и т.д.) */
.f-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.f-chip {
  height: 30px; padding: 0 12px;
  border-radius: 999px;
  border: 1.5px solid var(--stone);
  background: var(--snow);
  font-family: 'Inter'; font-weight: 500; font-size: 12px;
  color: var(--graphite);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: all 0.15s;
}
.f-chip:hover { border-color: var(--midnight); color: var(--midnight); }
.f-chip.active { background: var(--midnight); border-color: var(--midnight); color: var(--snow); }

/* switch row */
.f-switch-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; }
.f-switch-row .label { font-size: 13px; color: var(--graphite); }

/* applied filter pills (above grid) */
.applied-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 16px;
}
.applied-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 8px 0 12px;
  border-radius: 999px;
  background: var(--snow);
  border: 1px solid var(--stone);
  font-family: 'Inter'; font-weight: 500; font-size: 13px;
  color: var(--midnight);
}
.applied-pill .x {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--mist);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--grey);
  border: none;
}
.applied-pill .x:hover { background: var(--alert); color: var(--snow); }
.applied-clear { font-size: 13px; color: var(--grey); cursor: pointer; background: none; border: none; padding: 0 8px; }
.applied-clear:hover { color: var(--alert); }

/* ====== TOOLBAR (sort + view + count) ====== */
.cat-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--snow);
  border: 1px solid var(--stone);
  border-radius: 12px;
  padding: 10px 14px 10px 18px;
  margin-bottom: 16px;
}
.cat-toolbar-left { display: flex; align-items: center; gap: 18px; }
.cat-toolbar-count { font-size: 14px; color: var(--graphite); font-feature-settings: 'tnum'; }
.cat-toolbar-count b { color: var(--midnight); font-family: 'Manrope'; font-weight: 700; }

.sort-control { display: flex; align-items: center; gap: 8px; }
.sort-control-label { font-size: 13px; color: var(--grey); }
.sort-select {
  height: 36px; padding: 0 32px 0 12px;
  border: 1.5px solid var(--stone);
  border-radius: 8px;
  background: var(--snow);
  font-family: 'Inter'; font-weight: 500; font-size: 13px; color: var(--midnight);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C6B7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.sort-select:focus { outline: none; border-color: var(--voltage); }

.view-toggle { display: inline-flex; background: var(--mist); border-radius: 8px; padding: 3px; gap: 2px; }
.view-toggle button {
  height: 30px; width: 36px;
  border: none; background: transparent;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--grey);
}
.view-toggle button.active { background: var(--snow); color: var(--midnight); box-shadow: 0 1px 2px rgba(15,42,61,0.06); }

/* ====== CARS GRID ====== */
.cars-grid {
  display: grid;
  gap: 20px;
}
.cars-grid.density-3 { grid-template-columns: repeat(3, 1fr); }
.cars-grid.density-4 { grid-template-columns: repeat(4, 1fr); }
.cars-grid.density-5 { grid-template-columns: repeat(5, 1fr); }

/* override car-card for fluid grid */
.cars-grid .car-card { width: 100%; }

/* image area: solid fallback for placeholder feel */
.car-card-img {
  background:
    linear-gradient(180deg, rgba(15,42,61,0.04), rgba(15,42,61,0)),
    repeating-linear-gradient(135deg, #DCE3E8 0 12px, #E5EBEF 12px 24px);
}

/* ===== Card states ===== */

/* state badges placement */
.car-card-state-row {
  position: absolute; left: 12px; top: 12px;
  display: flex; gap: 6px; flex-wrap: wrap;
  max-width: calc(100% - 100px);
}
.car-card-state-row .badge { box-shadow: 0 1px 2px rgba(15,42,61,0.06); }

/* hot lot: subtle border highlight */
.car-card.is-hot { border-color: rgba(245,166,35,0.5); box-shadow: 0 0 0 1px rgba(245,166,35,0.18); }
.car-card.is-just-arrived { border-color: rgba(0,200,150,0.45); box-shadow: 0 0 0 1px rgba(0,200,150,0.16); }

/* in transit overlay strip */
.in-transit-strip {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 32px;
  background: linear-gradient(180deg, rgba(59,130,246,0) 0%, rgba(59,130,246,0.95) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--snow);
  font-family: 'Inter'; font-weight: 500; font-size: 12px;
  gap: 6px;
  letter-spacing: 0.01em;
}

/* reserve overlay with timer */
.reserve-strip {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 36px;
  background: rgba(245,166,35,0.95);
  display: flex; align-items: center; justify-content: center;
  color: var(--midnight);
  font-family: 'Inter'; font-weight: 600; font-size: 12px;
  gap: 8px;
  font-feature-settings: 'tnum';
}

/* sold overlay (greyed out) */
.car-card.is-sold .car-card-img,
.car-card.is-sold .car-card-body { filter: grayscale(0.95); opacity: 0.78; }
.car-card.is-sold .car-card-img::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(15,42,61,0.35);
  z-index: 1;
}
.car-card.is-sold .sold-watermark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.car-card.is-sold .sold-watermark span {
  font-family: 'Manrope'; font-weight: 800; font-size: 28px;
  color: var(--snow);
  letter-spacing: 0.18em;
  border: 3px solid var(--snow);
  padding: 6px 18px;
  transform: rotate(-8deg);
  text-transform: uppercase;
  background: rgba(229,72,77,0.92);
}
.car-card.is-sold .car-card-body .btn-primary { background: var(--stone); color: var(--grey); pointer-events: none; }

/* no photo state */
.car-card-img.no-photo {
  background:
    linear-gradient(180deg, rgba(15,42,61,0.05), rgba(15,42,61,0)),
    var(--mist);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  color: var(--grey-light);
}
.car-card-img.no-photo svg { color: var(--grey-light); }
.car-card-img.no-photo .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }

/* discount old price */
.car-card-price-old {
  font-size: 14px;
  color: var(--grey-light);
  text-decoration: line-through;
  font-feature-settings: 'tnum';
}
.car-card-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.discount-badge {
  display: inline-flex; align-items: center;
  background: var(--alert); color: var(--snow);
  font-family: 'Inter'; font-weight: 700; font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  font-feature-settings: 'tnum';
}

/* hot flame */
.fire-badge {
  background: linear-gradient(135deg, #FF6B35, #F5A623);
  color: var(--snow);
}

/* ====== PAGINATION ====== */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 40px;
}
.pg-btn {
  min-width: 40px; height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--stone);
  background: var(--snow);
  border-radius: 8px;
  font-family: 'Inter'; font-weight: 500; font-size: 14px;
  color: var(--midnight);
  cursor: pointer;
  font-feature-settings: 'tnum';
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.pg-btn:hover { border-color: var(--midnight); }
.pg-btn.active { background: var(--midnight); border-color: var(--midnight); color: var(--snow); }
.pg-btn[disabled] { color: var(--grey-light); cursor: not-allowed; border-color: var(--stone); background: var(--mist); }
.pg-ellipsis { padding: 0 4px; color: var(--grey-light); font-size: 14px; }
.pg-info { font-size: 13px; color: var(--grey); margin-left: 16px; font-feature-settings: 'tnum'; }

/* ====== EMPTY STATE ====== */
.empty-state {
  background: var(--snow);
  border: 1px solid var(--stone);
  border-radius: 16px;
  padding: 80px 40px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.empty-illustration {
  width: 140px; height: 140px;
  position: relative;
  margin-bottom: 8px;
}
.empty-title { font-family: 'Manrope'; font-weight: 700; font-size: 24px; color: var(--midnight); margin: 0; }
.empty-sub { font-size: 15px; color: var(--grey); max-width: 480px; line-height: 1.55; margin: 0; }
.empty-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.empty-suggestions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.empty-suggest-chip {
  padding: 6px 12px; border-radius: 999px;
  background: var(--mist);
  font-size: 13px; color: var(--midnight);
  cursor: pointer; border: 1px solid transparent;
}
.empty-suggest-chip:hover { border-color: var(--stone); background: var(--snow); }

/* ====== SKELETON ====== */
.skel-card {
  background: var(--snow);
  border: 1px solid var(--stone);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 420px;
  display: flex; flex-direction: column;
}
.skel-img { height: 170px; background: var(--mist); }
.skel-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.skel-line { height: 12px; border-radius: 4px; background: var(--mist); }
.skel-line.w-70 { width: 70%; }
.skel-line.w-50 { width: 50%; }
.skel-line.w-90 { width: 90%; }
.skel-line.w-30 { width: 30%; }
.skel-block { height: 32px; border-radius: 6px; background: var(--mist); margin-top: auto; }

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skel-img, .skel-line, .skel-block {
  background: linear-gradient(90deg, #F4F7F5 0%, #ECF0EE 50%, #F4F7F5 100%);
  background-size: 800px 100%;
  animation: shimmer 1.5s linear infinite;
}

/* ====== Tweaks panel placement (so doesn't overlap) ====== */
.tweaks-host { position: fixed; right: 20px; bottom: 20px; z-index: 100; }