:root{
  --brand: #123C43;          /* Midnight Emerald */
  --accent: #E6D7B5;         /* Champagne */
  --text: #0f172a;
  --muted: #6b7280;
  --line: #e5e7eb;
  --card-bg: #ffffff;
  --glass: rgba(12,16,18,.55);
}

/* Контейнер каталога */
.listing{
  max-width:1280px; margin:24px auto; padding:0 16px;
  /* 👉 управляющие переменные каталога */
  --ctrl-size: 42px;      /* было 38px — размер круга иконки */
  --ctrl-gap: 12px;       /* зазор между двумя кругами */
  --ctrl-offset: 14px;    /* отступ от правого/верхнего края */
}
.listing__title{ font-size:clamp(20px,2.6vw,28px); margin:0 0 16px; }

/* Фильтры */
.listing .filters{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:16px; }
.listing .filters__chips{ display:flex; gap:8px; flex-wrap:wrap; }
.listing .chip{
  appearance:none; border:1px solid color-mix(in srgb, var(--brand) 14%, transparent);
  background: color-mix(in srgb, var(--brand) 6%, transparent);
  color: var(--text); border-radius:999px; padding:8px 12px;
  font:500 13px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  cursor:pointer; transition:border-color .2s, background-color .2s, transform .1s;
}
.listing .chip:hover{ transform:translateY(-1px); }
.listing .chip.is-active{ border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); }

.listing .filters__sort{ display:flex; align-items:center; gap:8px; color:var(--muted) }
.listing .filters__sort select{ padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:var(--card-bg); }

/* Сетка карточек */
.listing .cards{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; align-items:start; }
@media (max-width:1160px){ .listing .cards{ grid-template-columns: repeat(3,1fr);} }
@media (max-width:860px){  .listing .cards{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:520px){  .listing .cards{ grid-template-columns: 1fr;} }

/* Карточка (стекло + ровные высоты) */
.listing .card{
  background:var(--card-bg);
  border-radius:16px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.listing .card:hover{ transform:translateY(-2px); box-shadow: 0 18px 36px rgba(0,0,0,.10); border-color: rgba(0,0,0,.12); }

/* Медиа-блок */
.listing .card__media{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio: var(--card-media-ratio, 1 / 1);
  background:#05080b;
  overflow:hidden;
}
@supports not (aspect-ratio: 1 / 1){
  .listing .card__media{
    min-height: clamp(200px, 18vw, 260px);
  }
}
.listing .card__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter: saturate(1.15) contrast(1.07) brightness(1.02);
  transition: filter .25s ease, transform .25s ease;
}
.listing .card:hover .card__media img{
  filter: saturate(1.2) contrast(1.1) brightness(1.03);
  transform: translateY(-2px) scale(1.01);
}

/* База для иконок сверху справа — идеальная окружность + стекло */
.listing .btn-icon{
  position:absolute; top:var(--ctrl-offset); right:var(--ctrl-offset);
  inline-size:var(--ctrl-size); aspect-ratio:1/1;

  border-radius:999px; border:1px solid rgba(255,255,255,.55);
  background: var(--glass);
  display:flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer;
  transition:transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  transform: translateZ(0);
}
.listing .btn-icon + .btn-icon{ right: calc(var(--ctrl-offset) + var(--ctrl-size) + var(--ctrl-gap)); }
.listing .btn-icon:hover{ transform:translateY(-1px); background: rgba(12,16,18,.7); border-color: rgba(255,255,255,.65); }
.listing .btn-icon:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* любые встроенные SVG внутри кругов — ровно по центру, одинаковый размер */
.listing .btn-icon svg{
  /* иконка ~58% от круга; хочешь крупнее — поменяй коэффициент */
  width: calc(var(--ctrl-size) * 0.58);
  height: calc(var(--ctrl-size) * 0.58);
  display:block;
}


/* Сердце — симметричный контур (lucide/feather-стиль) */
.listing .btn-fav{ position:absolute; top:14px; right:14px; }
.listing .btn-fav.is-active{ background:#d13e52; border-color:#d13e52; transform:translateY(-1px) scale(1.02); }


/* Сравнение — 3 ровные колонки */
.listing .btn-cmp{ position:absolute; top:14px; right:64px; }
.listing .btn-cmp.is-active{ background:#0c7a43; border-color:#0c7a43; }


/* Тело карточки */
.listing .card__body{ padding:12px; display:flex; flex-direction:column; gap:8px; min-height: var(--card-body-min, 200px); }
.listing .card__title{ margin:0; font-size:16px; font-weight:700; }
.listing .card__title a{ color:inherit; text-decoration:none; }
.listing .card__title a:hover{ text-decoration:underline; }

/* Цена */
.listing .card__price{ font-weight:700; display:flex; align-items:center; gap:8px; }
.listing .price-old{ color:var(--muted); text-decoration:line-through; font-weight:500; }
.listing .price-badge{ display:inline-flex; align-items:center; justify-content:center; font-size:11px; padding:2px 6px; border-radius:999px; background:#ffe6e6; color:#8a1f1f; border:1px solid rgba(138,31,31,.14); }
.listing .badge-rrc{ display:inline-flex; align-items:center; justify-content:center; font-size:11px; padding:2px 6px; border-radius:999px; border:1px solid rgba(0,0,0,.08); color:#0a0f12; background: var(--accent); }
.listing .price-credit{ font-size:13px; color:var(--muted); margin-top:4px; }

/* Характеристики */
.listing .card__spec{ margin:0; padding:0 0 0 18px; color:var(--muted); font-size:13px; }
.listing .card__spec li{ margin:4px 0; }

/* Теги */
.listing .card__tags{ display:flex; gap:6px; flex-wrap:wrap; }
.listing .tag{ display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:3px 8px; border-radius:999px; background: color-mix(in srgb, var(--brand) 6%, transparent); border:1px solid color-mix(in srgb, var(--brand) 14%, transparent); }
.listing .tag--sale{ background:#ffe6e6; border-color: rgba(138,31,31,.14); color:#8a1f1f; }

/* CTA */
.listing .btn-primary{ display:inline-flex; align-items:center; justify-content:center; height:38px; padding:0 14px; border-radius:12px; border:1px solid rgba(0,0,0,.1); text-decoration:none; background: #0f1417; color:#fff; }
.listing .btn-primary:hover{ background:#142026; }

/* Пагинация */
.listing .pager{ text-align:center; margin:16px 0 4px; }
.listing .btn.ghost{ background:transparent; border:1px solid var(--line); padding:10px 14px; border-radius:12px; cursor:pointer; }

/* Скелетоны (на будущее) */
.listing .card-skeleton{ background: var(--card-bg); padding:12px; border-radius:16px; border:1px solid rgba(0,0,0,.06); }
.listing .sk{ display:block; border-radius:10px; background: linear-gradient(90deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.08) 37%, rgba(0,0,0,.06) 63%); background-size: 400% 100%; animation: sk 1.2s ease-in-out infinite; }
.listing .sk-media{ inline-size:100%; aspect-ratio:16/10; }
.listing .sk-line{ height:14px; margin-top:10px; }
.listing .sk-line.small{ width:60%; height:12px; }
@keyframes sk{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }
/* Выравниваем низ карточек: CTA всегда на одном уровне */
.listing .card__cta{ margin-top:auto; }

/* Тёмная тема */
[data-theme="dark"] .listing .card{ background:#0f1417; border-color: rgba(255,255,255,.08); box-shadow: 0 12px 34px rgba(0,0,0,.35); }
[data-theme="dark"] .listing .filters__sort select{ background:#0f1417; border-color: rgba(255,255,255,.1); color:#dbe0e5; }
[data-theme="dark"] .listing .chip{ color:#e5e7eb; border-color: rgba(255,255,255,.14) }
[data-theme="dark"] .listing .badge-rrc{ color:#0f1417; }