/* Каталог схем света — студия «Избранное»
   Mobile-first дизайн. kaif.izbrannoestudio.ru
   Шрифты: Involve (body) + Neutralface (display caps) — бренд izbrannoestudio.ru */

/* === ШРИФТЫ БРЕНДА «Избранное» === */
@font-face {
  font-family: 'Involve';
  src: url('fonts/Involve-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Involve';
  src: url('fonts/Involve-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Involve';
  src: url('fonts/Involve-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neutralface';
  src: url('fonts/NeutralFace.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neutralface';
  src: url('fonts/NeutralFace-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kontrabanda';
  src: url('fonts/Kontrabanda.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --terra: #C8392E;
  --terra-dark: #8a2418;
  --beige: #F2F0EB;       /* бренд-бежевый (не используется на чёрной теме, оставлен) */
  --beige-dark: #E5E2D8;
  --beige-soft: #ECE9E0;
  --bg: #1d1d1d;          /* фон страницы — угольно-серый */
  --ink: #f2f0eb;         /* основной текст — светлый на чёрном */
  --muted: #888888;
  --line: rgba(255,255,255,0.10);
  --paper: #ffffff;

  /* шрифты бренда «Избранное» */
  --font-body: 'Involve', -apple-system, "Helvetica Neue", system-ui, sans-serif;
  --font-display: 'Neutralface', 'Involve', -apple-system, sans-serif;
  --font-numbers: 'Kontrabanda', cursive;
  --font-mono: 'Kontrabanda', 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.45;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* ====== ГЛАВНАЯ СТРАНИЦА (index.html) ====== */

.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 18px 14px 60px;
}

header.brand {
  text-align: center;
  padding: 18px 0 26px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 20px;
  position: relative;
}

.brand .label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--terra);
  text-transform: lowercase;
  margin-bottom: 6px;
}

.brand h1 {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0;
  line-height: 1;
  text-transform: lowercase;
  color: #f2f0eb;
}

.brand .sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
  text-transform: lowercase;
}

/* Старый маленький счётчик — отключён, его заменяет .fav-cta */
.fav-counter { display: none !important; }

/* CTA-кнопка «смотреть мои избранные» — крупная, явная, всегда видна */
.fav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #f2f0eb;
  border: 1px solid #f2f0eb;
  padding: 14px 18px;
  margin: 0 0 14px;
  font-family: var(--font-numbers);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.3px;
  line-height: 1;
  text-transform: lowercase;
  color: #1a1a1a;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.fav-cta:active { transform: scale(0.98); }
.fav-cta img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.fav-cta .fav-cta-count {
  font-family: var(--font-numbers);
  color: var(--terra);
  font-size: 22px;
  line-height: 1;
  margin-left: 4px;
}
.fav-cta .fav-cta-count:empty { display: none; }
.fav-cta:hover { background: var(--terra); border-color: var(--terra); color: white; }

/* Подсказка про РЕКОМЕНДУЕМ — над сеткой */
.recommend-note {
  margin: 0 0 22px;
  padding: 12px 14px;
  background: rgba(200, 57, 46, 0.15);
  border-left: 3px solid var(--terra);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: #f2f0eb;
}
.recommend-note .recommend-tag-inline {
  display: inline-block;
  background: var(--terra);
  color: white;
  font-family: var(--font-numbers);
  font-size: 14px;
  padding: 1px 7px 2px;
  line-height: 1;
  vertical-align: 1px;
  text-transform: lowercase;
}

/* Инструкция вверху главной — белая карточка на чёрном фоне */
.guide {
  background: #f2f0eb;
  border-radius: 0;
  padding: 16px 18px 18px;
  margin: 0 0 24px;
  color: #1a1a1a;
}
.guide h2 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
  text-transform: lowercase;
  color: #1a1a1a;
}
.guide li { color: #1a1a1a; }
.guide li + li { border-top: 1px solid rgba(0,0,0,0.08); }

/* Видео-инструкция Kinescope внутри guide */
.guide-video {
  margin: 0 auto 14px;
  max-width: 240px;
}
.guide-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
  overflow: hidden;
}
.guide-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.guide-video-caption {
  text-align: center;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--muted);
  margin: 6px 0 0;
  text-transform: lowercase;
}
.guide ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.guide li {
  display: flex;
  gap: 12px;
  padding: 7px 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.35;
  align-items: flex-start;
}
.guide li + li { border-top: 1px solid var(--line); }
.guide li .g-num {
  font-family: var(--font-numbers);
  color: var(--terra);
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  min-width: 22px;
}
.guide li .g-text { flex: 1; padding-top: 3px; }
.guide li b { font-weight: 700; }
.guide .heart-mini {
  color: #E53935;
  font-family: -apple-system, sans-serif;
}

/* Категория-разделитель */
.cat {
  margin: 26px 0 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.cat .cat-num {
  font-family: var(--font-numbers);
  font-size: 22px;
  color: var(--terra);
  letter-spacing: 0;
  line-height: 1;
}
.cat h2 {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0;
  color: #f2f0eb;
  margin: 0;
  font-weight: 700;
  text-transform: lowercase;
}

/* Сетка карточек 2 в ряд — стиль «доска с полароидами» */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 18px;
  padding: 14px 0 24px;
}

.card {
  /* Настоящий полароид-PNG растянут вертикально — дырка становится 4:5 чтобы фото влезало без полей */
  background: url('assets/polaroid-frame.png') no-repeat center;
  background-size: 100% 100%;
  display: block;
  position: relative;
  aspect-ratio: 5 / 8;       /* было 4/5 (0.8), стало 0.625 — карточка вытянута */
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
  transition: transform 0.2s ease;
  transform-origin: center center;
  will-change: transform;
  overflow: visible;
}
/* Лёгкий рандомный наклон через nth-child — чтобы все полароиды торчали по-разному */
.grid .card:nth-child(1)  { transform: rotate(-0.88deg); }
.grid .card:nth-child(2)  { transform: rotate(0.77deg); }
.grid .card:nth-child(3)  { transform: rotate(0.44deg); }
.grid .card:nth-child(4)  { transform: rotate(-1.10deg); }
.grid .card:nth-child(5)  { transform: rotate(-0.28deg); }
.grid .card:nth-child(6)  { transform: rotate(0.99deg); }
.grid .card:nth-child(7)  { transform: rotate(-1.21deg); }
.grid .card:nth-child(8)  { transform: rotate(0.55deg); }
.grid .card:nth-child(9)  { transform: rotate(-0.50deg); }
.grid .card:nth-child(10) { transform: rotate(1.10deg); }
.grid .card:nth-child(11) { transform: rotate(-0.66deg); }
.grid .card:nth-child(12) { transform: rotate(0.22deg); }
.grid .card:nth-child(13) { transform: rotate(-1.10deg); }
.grid .card:nth-child(14) { transform: rotate(0.88deg); }
.grid .card:nth-child(15) { transform: rotate(-0.33deg); }
.grid .card:nth-child(16) { transform: rotate(0.66deg); }
.grid .card:nth-child(17) { transform: rotate(-0.83deg); }
.grid .card:nth-child(18) { transform: rotate(1.10deg); }
.grid .card:nth-child(19) { transform: rotate(-0.55deg); }
.grid .card:nth-child(20) { transform: rotate(0.39deg); }
.grid .card:nth-child(21) { transform: rotate(-0.99deg); }
.grid .card:nth-child(22) { transform: rotate(0.83deg); }
.grid .card:nth-child(23) { transform: rotate(-1.21deg); }
.grid .card:nth-child(24) { transform: rotate(0.28deg); }
.grid .card:nth-child(25) { transform: rotate(-0.39deg); }
.grid .card:nth-child(26) { transform: rotate(1.04deg); }
.grid .card:nth-child(27) { transform: rotate(-0.77deg); }
.grid .card:nth-child(28) { transform: rotate(0.61deg); }
.grid .card:nth-child(29) { transform: rotate(-0.94deg); }
.grid .card:nth-child(30) { transform: rotate(0.50deg); }
.grid .card:nth-child(31) { transform: rotate(-0.55deg); }
.grid .card:nth-child(32) { transform: rotate(1.10deg); }
.grid .card:nth-child(33) { transform: rotate(-0.72deg); }
.grid .card:nth-child(34) { transform: rotate(0.33deg); }
.grid .card:nth-child(35) { transform: rotate(-1.10deg); }
.grid .card:nth-child(36) { transform: rotate(0.77deg); }
.grid .card:nth-child(37) { transform: rotate(-0.44deg); }
.grid .card:nth-child(38) { transform: rotate(0.94deg); }
.grid .card:nth-child(39) { transform: rotate(-0.83deg); }
.grid .card:nth-child(40) { transform: rotate(0.66deg); }

.card:active {
  transform: rotate(0) scale(0.97);
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}

.card .preview {
  /* Фото внутри прозрачной «дырки» настоящего полароида (теперь вертикальная) */
  position: absolute;
  top: 8.3%;
  left: 5.9%;
  right: 5.8%;
  bottom: 21.2%;
  overflow: hidden;
  background: transparent;    /* нет полей — если что-то и осталось, видна угольно-серая страница */
}
.card .preview img,
.card .preview svg {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* заполняет всю дырку — минимальный crop ~2% по бокам */
  display: block;
}

.card .badge {
  position: absolute;
  top: 12%;
  left: 10%;
  background: rgba(0,0,0,0.7);
  color: white;
  font-size: 18px;
  padding: 2px 10px 3px;
  font-family: var(--font-numbers);
  letter-spacing: 0;
  line-height: 1;
  z-index: 2;
}

/* «Рекомендуем» — теперь маленький тег на белой полосе полароида */
.card.is-recommended {
  /* без рамки — полароидный вид сам по себе выделяет */
}
/* Стикер «рекомендуем» — наклеен ПОВЕРХ верхней белой рамки полароида */
.card .recommend-tag {
  position: absolute;
  top: -3%;                    /* выше — частично торчит над верхним краем */
  left: 50%;
  background: var(--terra);
  color: white;
  font-family: var(--font-numbers);
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: lowercase;
  padding: 2px 10px 3px;
  z-index: 10;                 /* поверх всего */
  line-height: 1;
  transform: translateX(-50%) rotate(-4deg);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.25),
    0 2px 4px rgba(0,0,0,0.15);
  white-space: nowrap;
}

/* Пользовательское избранное — рукописное сердечко бренда в правом верхнем углу */
.fav-toggle {
  position: absolute;
  top: 3.5%;
  right: 5%;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  z-index: 3;
  transition: transform 0.15s;
}
.fav-toggle:active { transform: scale(0.85); }
.fav-toggle .h-empty,
.fav-toggle .h-full {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  transition: opacity 0.2s;
}
.fav-toggle .h-empty { color: white; }     /* SVG-контур наследует через currentColor */
.fav-toggle .h-full { opacity: 0; }
.fav-toggle .h-empty { opacity: 1; }
.fav-toggle.is-fav .h-full { opacity: 1; }
.fav-toggle.is-fav .h-empty { opacity: 0; }
.fav-toggle.is-fav { animation: heart-pop 0.3s ease; }
@keyframes heart-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Inline-heart для текста (footer и т.п.) */
.heart-inline {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin: 0 2px;
}
.heart-inline-mini {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin: 0 1px;
}

.card .meta {
  /* Подпись в нижней белой полосе настоящего полароида */
  position: absolute;
  bottom: 0;
  left: 5.9%;
  right: 5.8%;
  height: 21.2%;
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 1;
}

.card .num {
  font-family: var(--font-numbers);
  font-size: 22px;
  color: var(--terra);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

.card .title {
  /* подпись ручкой на белой полосе полароида — текст ВСЕГДА тёмный (бумага светлая) */
  font-family: var(--font-numbers);
  font-size: 14px;
  line-height: 1.05;
  margin-top: 3px;
  color: #1a1a1a;
  text-transform: lowercase;
  letter-spacing: 0.2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer */
.footer {
  text-align: center;
  margin-top: 50px;
  padding: 20px 0;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  text-transform: lowercase;
}

/* ====== ДЕТАЛЬНАЯ СТРАНИЦА ====== */

.detail .back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  padding: 12px 0;
  text-transform: lowercase;
}
.detail .back:before { content: "←"; }
.detail .back:active { color: var(--terra); }

.detail .hero {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--beige-dark);
}
.detail .hero img,
.detail .hero svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail .num-big {
  font-family: var(--font-numbers);
  font-size: 30px;
  color: var(--terra);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  text-transform: lowercase;
}

.detail h1 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  margin: 6px 0 18px;
  line-height: 1.15;
  text-transform: lowercase;
}

.detail .priority-badge {
  display: inline-block;
  background: var(--terra);
  color: white;
  font-size: 22px;
  padding: 2px 14px 4px;
  border-radius: 0;
  letter-spacing: 0.5px;
  text-transform: lowercase;
  margin-bottom: 10px;
  font-family: var(--font-numbers);
  line-height: 1;
}

/* Большие кнопки действий на детальной */
.detail .actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}
.detail .action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  text-transform: lowercase;
  text-align: center;
  line-height: 1.2;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.detail .action-btn.fav-action.is-fav {
  background: #fff4f3;
  border-color: #E53935;
  color: #E53935;
}
.detail .action-btn.compare-toggle-big.selected {
  background: var(--terra);
  color: white;
  border-color: var(--terra);
}
.detail .action-btn .ico {
  font-size: 18px;
  line-height: 1;
}
.detail .action-heart {
  position: relative;
  width: 22px;
  height: 22px;
  display: inline-block;
}
.detail .action-heart .h-empty,
.detail .action-heart .h-full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.2s;
}
.detail .action-heart .h-empty { color: var(--ink); }
.detail .fav-action.is-fav .action-heart .h-empty { color: #E53935; }
.detail .action-heart .h-full { opacity: 0; }
.detail .fav-action.is-fav .action-heart .h-empty { opacity: 0; }
.detail .fav-action.is-fav .action-heart .h-full { opacity: 1; }

.detail section.block {
  background: white;
  border-radius: 0;
  padding: 16px 18px;
  margin: 12px 0;
}

.detail section.block h3 {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.5px;
  color: var(--terra);
  margin: 0 0 8px;
  font-weight: 700;
  text-transform: lowercase;
}

.detail section.block p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  font-family: var(--font-body);
}

.detail section.block.placeholder p {
  color: var(--muted);
  font-style: italic;
}

/* Галерея */
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 14px;
}

.gallery .item {
  aspect-ratio: 4/5;
  background: var(--beige-dark);
  border-radius: 0;
  overflow: hidden;
}

.gallery .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery.placeholder .item {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: lowercase;
}

/* Соседние схемы */
.neighbours {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.neighbours h3 {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted);
  margin: 0 0 10px;
  font-weight: 400;
  text-transform: lowercase;
}

.neighbours .row {
  display: flex;
  gap: 8px;
}

.neighbours .nb {
  flex: 1;
  background: white;
  border-radius: 0;
  padding: 10px 12px;
  font-size: 12px;
  text-align: center;
  text-transform: lowercase;
}

.neighbours .nb .nb-num {
  font-family: var(--font-numbers);
  color: var(--terra);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
}

.neighbours .nb .nb-arrow {
  font-size: 14px;
  color: var(--muted);
}

/* ====== РЕЖИМ СРАВНЕНИЯ ====== */

/* Кнопка «+» к сравнению — рукописный плюсик в нижней рамке справа */
.compare-toggle {
  position: absolute;
  bottom: 4%;
  right: 5%;
  width: 22px;
  height: 22px;
  border: none;
  background: url('assets/plus_dark.png') no-repeat center;
  background-size: contain;
  cursor: pointer;
  z-index: 5;
  font-size: 0;
  transition: transform 0.15s, opacity 0.15s;
}
.compare-toggle:active { transform: scale(0.85); }
.compare-toggle.selected {
  background-image: url('assets/check_dark.png');
}
.compare-toggle::before { content: none; }
.compare-toggle::after { content: none; }
/* На детальной странице — большая кнопка с классом compare-toggle-big, у неё свой стиль */
.compare-toggle-big.compare-toggle {
  position: static;
  width: auto;
  height: auto;
  border-radius: 0;
  background: white;
  border: 1px solid var(--line);
  padding: 14px 12px;
}
.compare-toggle-big.compare-toggle::before { content: none; }

/* (Старый стиль .compare-toggle-big объединён в .detail .actions выше) */

/* Плавающая панель снизу */
#compare-bar {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: white;
  border-radius: 0;
  padding: 10px 8px 10px 18px;
  z-index: 100;
  box-shadow: 0 6px 24px rgba(0,0,0,0.22);
  font-family: var(--font-body);
  font-size: 13px;
  max-width: 95vw;
}
#compare-bar .cb-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
#compare-bar .cb-items {
  display: flex;
  align-items: center;
  gap: 6px;
}
#compare-bar .cb-num {
  font-family: var(--font-numbers);
  font-size: 22px;
  color: white;
  line-height: 1;
}
#compare-bar .cb-vs {
  opacity: 0.5;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
#compare-bar .cb-hint {
  opacity: 0.65;
  font-size: 12px;
  text-transform: lowercase;
}
#compare-bar .cb-go {
  background: var(--terra);
  color: white;
  padding: 7px 14px;
  border-radius: 0;
  font-size: 13px;
  text-decoration: none;
  text-transform: lowercase;
}
#compare-bar .cb-go:active { transform: scale(0.96); }
#compare-bar .cb-clear {
  background: rgba(255,255,255,0.12);
  border: none;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 0;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

/* ====== СТРАНИЦА СРАВНЕНИЯ (compare.html) ====== */
.compare-page .back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  padding: 12px 0;
  text-transform: lowercase;
}
.compare-page .back:before { content: "←"; }

.compare-page h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 18px;
  text-transform: lowercase;
}

.compare-container {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  background: var(--beige-dark);
  border-radius: 0;
  overflow: hidden;
  user-select: none;
  touch-action: none;
}
.compare-container img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.compare-container .compare-img-top {
  clip-path: inset(0 50% 0 0);
}
.compare-container .compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: white;
  pointer-events: none;
  z-index: 2;
}
.compare-container .compare-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: white;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  line-height: 1;
}
.compare-container .compare-knob::before { content: "‹›"; letter-spacing: -2px; }

/* Карточки A и B под слайдером */
.compare-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.compare-labels .cl {
  background: white;
  border-radius: 0;
  padding: 10px 12px;
}
.compare-labels .cl .cl-side {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 2px;
}
.compare-labels .cl .cl-num {
  font-family: var(--font-numbers);
  font-size: 26px;
  color: var(--terra);
  line-height: 1;
  margin-top: 4px;
}
.compare-labels .cl .cl-name {
  font-size: 12px;
  margin-top: 2px;
  text-transform: lowercase;
  line-height: 1.3;
}
.compare-labels .cl a {
  color: var(--muted);
  font-size: 11px;
  margin-top: 6px;
  display: inline-block;
  text-transform: lowercase;
}

.compare-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 14px;
  text-transform: lowercase;
}