/* =====================================================================
   n1tools — основные стили. Дизайн-токены 1:1 с React-скелетом
   (src/index.css), только без Tailwind.
   ===================================================================== */

/* =====================================================================
   Темы: токены задаются на :root (тёмная по умолчанию), под html.light
   переопределяются. Переключатель в шапке + no-flash inline-скрипт в base.html.

   Расширенный набор семантических переменных нужен для мест, где раньше
   были захардкожены тёмные оттенки (cat-tile gradient, compare-table chrome,
   glass-шапка, подложки контролов). Когда хардкод заменён на --tile-bg /
   --chrome-bg / --soft-tint — светлая тема получает их «из коробки».
   ===================================================================== */
:root {
  --bg:               hsl(0 0% 5%);
  --bg-deep:          hsl(0 0% 4%);
  --surface:          hsl(0 0% 9%);
  --card:             hsl(0 0% 8%);
  --card-hover:       hsl(0 0% 11%);

  --fg:               hsl(0 0% 96%);
  --fg-dim:           hsl(0 0% 60%);
  --fg-muted:         hsl(0 0% 46%);

  --border:           hsl(0 0% 18%);
  --border-strong:    hsl(0 0% 28%);

  --brand:            hsl(353 97% 55%);
  --brand-dim:        hsl(353 80% 45%);
  --brand-deep:       hsl(353 97% 30%);

  --radius:           0.75rem;
  --radius-card:      1rem;
  --radius-xl:        1.25rem;

  --ease:             cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-card:      0 1px 2px hsl(0 0% 0% / 0.4);
  --shadow-card-hov:  0 20px 40px -20px hsl(353 97% 50% / 0.25);

  /* Семантические подложки (учитывают тему) */
  --tile-bg:          linear-gradient(180deg, hsl(0 0% 10%), hsl(0 0% 7%));
  --chrome-bg:        linear-gradient(180deg, hsl(0 0% 12%), hsl(0 0% 9%));
  --chrome-bg-strong: linear-gradient(180deg, hsl(0 0% 14%), hsl(0 0% 10%));
  --glass-bg:         hsl(0 0% 5% / 0.78);
  --soft-tint:        hsl(0 0% 100% / 0.04);
  --soft-tint-2:      hsl(0 0% 100% / 0.03);
  --soft-tint-strong: hsl(0 0% 100% / 0.06);
  --hairline:         hsl(0 0% 100% / 0.07);
  --diff-row-bg:      hsl(353 97% 45% / 0.06);

  /* Темы для отдельных блоков, у которых был хардкод (шапка, hero товара). */
  --header-bg:           hsl(0 0% 5% / 0.55);
  --header-bg-scrolled:  hsl(0 0% 5% / 0.78);
  --header-border:       hsl(0 0% 100% / 0.06);
  --header-shadow:       0 8px 32px -8px hsl(0 0% 0% / 0.4);

  --card-media-bg:       radial-gradient(ellipse 65% 55% at 50% 88%, hsl(353 97% 28% / 0.42), hsl(0 0% 4%));
  --card-media-shadow:   drop-shadow(0 20px 25px hsl(0 0% 0% / 0.5));
  /* Edge-dissolve на фото карточки — как на детальной странице товара
     (.ph-hero__edge): края фото растворяются в фон медиа-области.
     Цвет совпадает с краем --card-media-bg. */
  --card-media-dissolve: radial-gradient(ellipse 62% 55% at 50% 50%,
                             transparent 32%,
                             hsl(0 0% 4% / 0.8) 78%,
                             hsl(0 0% 4%) 100%);
  /* Смягчённый вариант для маленьких превью (52–64px), где полная
     виньетка съедает картинку. */
  --card-media-dissolve-soft: radial-gradient(ellipse 80% 75% at 50% 50%,
                             transparent 48%,
                             hsl(0 0% 4% / 0.6) 100%);

  --hero-bg:             hsl(0 0% 4%);
  --hero-edge:           hsl(0 0% 4%);
  --hero-glow:           radial-gradient(ellipse 75% 55% at 55% 80%, hsl(353 97% 28% / 0.55), transparent 70%);
  --hero-thumb-bg:       hsl(0 0% 4%);
  --hero-thumb-border:   hsl(0 0% 17%);
  --hero-thumb-card:     hsl(0 0% 7%);
  --hero-thumb-strip-border: hsl(0 0% 12%);
  --hero-pill-bg:        hsl(0 0% 9%);
  --hero-pill-border:    hsl(0 0% 17%);

  /* Хало под фото в премиум-карточке (главная, slider). */
  --premium-halo:        radial-gradient(circle, hsl(353 97% 35% / 0.55), transparent 70%);

  color-scheme: dark;
}

/* ---------- Светлая тема ---------- */
html.light {
  --bg:               hsl(0 0% 98%);
  --bg-deep:          hsl(0 0% 100%);
  --surface:          hsl(0 0% 95%);
  --card:             hsl(0 0% 100%);
  --card-hover:       hsl(0 0% 97%);

  --fg:               hsl(0 0% 8%);
  --fg-dim:           hsl(0 0% 38%);
  --fg-muted:         hsl(0 0% 52%);

  --border:           hsl(0 0% 88%);
  --border-strong:    hsl(0 0% 78%);

  /* Брендовый красный в светлой теме чуть глубже, чтобы был контраст на белом */
  --brand:            hsl(353 80% 47%);
  --brand-dim:        hsl(353 75% 40%);
  --brand-deep:       hsl(353 80% 30%);

  --shadow-card:      0 1px 2px hsl(0 0% 0% / 0.06);
  --shadow-card-hov:  0 20px 40px -20px hsl(353 80% 45% / 0.25);

  --tile-bg:          linear-gradient(180deg, hsl(0 0% 100%), hsl(0 0% 97%));
  --chrome-bg:        linear-gradient(180deg, hsl(0 0% 98%), hsl(0 0% 95%));
  --chrome-bg-strong: linear-gradient(180deg, hsl(0 0% 95%), hsl(0 0% 92%));
  --glass-bg:         hsl(0 0% 100% / 0.78);
  --soft-tint:        hsl(0 0% 0% / 0.04);
  --soft-tint-2:      hsl(0 0% 0% / 0.03);
  --soft-tint-strong: hsl(0 0% 0% / 0.06);
  --hairline:         hsl(0 0% 0% / 0.07);
  --diff-row-bg:      hsl(353 80% 47% / 0.08);

  --header-bg:           hsl(0 0% 100% / 0.85);
  --header-bg-scrolled:  hsl(0 0% 100% / 0.92);
  --header-border:       hsl(0 0% 0% / 0.08);
  --header-shadow:       0 8px 32px -8px hsl(0 0% 0% / 0.08);

  /* Карточка товара: чистый белый фон под фото без overlay-градиента
     и без drop-shadow — фото лежит «плоско» на белом, как на маркетплейсе. */
  --card-media-bg:       hsl(0 0% 100%);
  --card-media-shadow:   none;
  /* На белом фоне фото лежит «плоско» — растворение краёв не нужно
     (тёмная виньетка на белом смотрелась бы грязно). */
  --card-media-dissolve: none;
  --card-media-dissolve-soft: none;

  /* Hero детальной страницы товара — тёплый светлый фон вместо чистого белого,
     чтобы фото инструмента не «висело в пустоте», и pills/thumbs читались. */
  --hero-bg:             hsl(0 0% 95%);
  --hero-edge:           hsl(0 0% 95%);
  --hero-glow:           radial-gradient(ellipse 75% 55% at 55% 80%, hsl(353 60% 80% / 0.35), transparent 70%);
  --hero-thumb-bg:       hsl(0 0% 96%);
  --hero-thumb-border:   hsl(0 0% 84%);
  --hero-thumb-card:     hsl(0 0% 100%);
  --hero-thumb-strip-border: hsl(0 0% 90%);
  --hero-pill-bg:        hsl(0 0% 100%);
  --hero-pill-border:    hsl(0 0% 86%);

  /* В светлой теме хало полностью убираем — на белом фоне любое цветное свечение
     превращается в «розовое пятно». Карточка остаётся чистой. */
  --premium-halo:        none;

  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

a { color: var(--fg); text-decoration: none; transition: color 0.18s var(--ease); }
a:hover { color: var(--brand); }

img, svg, video, canvas { display: block; max-width: 100%; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

::selection { background: var(--brand); color: white; }

/* ---------- Утилиты ---------- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px) { .container { padding: 0 2rem; } }

.muted { color: var(--fg-dim); }
.muted-deep { color: var(--fg-muted); }

.brand-gradient {
  background: linear-gradient(135deg, var(--brand), var(--brand-dim));
}

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border);
}

/* Радиальный градиент за фото товара — точно из React */
.product-bg {
  background: radial-gradient(
    ellipse 70% 55% at 50% 85%,
    hsl(353 97% 30% / 0.35),
    hsl(0 0% 4%)
  );
}
.product-bg-soft {
  background: radial-gradient(
    ellipse 60% 50% at 50% 85%,
    hsl(353 97% 28% / 0.42),
    hsl(0 0% 4%)
  );
}

/* ---------- Тонкая «красная» отбивка ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand);
}
.kicker::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--brand);
}

/* ---------- Бейдж бренда / линейки ---------- */
.brand-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dim));
  color: white;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.line-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.line-badge--industrial { background: hsl(353 97% 55% / 0.12); color: var(--brand); }
.line-badge--pro        { background: hsl(0 0% 96% / 0.10);   color: var(--fg); }
.line-badge--classic,
.line-badge--basic      { background: hsl(0 0% 96% / 0.06);   color: var(--fg-dim); }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s var(--ease), border-color 0.2s, color 0.2s, transform 0.2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--brand); color: white; }
.btn-primary:hover { background: var(--brand-dim); color: white; }

.btn-ghost { background: transparent; border-color: var(--border); color: var(--fg); }
.btn-ghost:hover { border-color: var(--fg-dim); color: var(--fg); }

.btn-outline-brand {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand);
}
.btn-outline-brand:hover { background: var(--brand); color: white; }

.btn-lg { padding: 0.9rem 1.75rem; font-size: 0.95rem; }
.btn-sm { padding: 0.45rem 0.9rem; font-size: 0.78rem; }

/* Круглые мини-кнопки */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-dim);
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s, transform 0.18s;
}
.icon-btn:hover { border-color: var(--brand); color: var(--fg); }
.icon-btn.is-active { color: var(--brand); border-color: var(--brand); background: hsl(353 97% 50% / 0.08); }
.icon-btn--sm { width: 32px; height: 32px; }
.icon-btn--inline { width: auto; padding: 0 0.9rem; gap: 0.45rem; }

.badge-count {
  display: inline-flex;
  min-width: 14px;
  padding: 0 4px;
  border-radius: 9999px;
  background: var(--brand);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  text-align: center;
  line-height: 14px;
  margin-left: 2px;
}

/* ---------- Шапка ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  border-bottom: 1px solid transparent;
  transition: background 0.25s, border-color 0.25s;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.site-header.is-scrolled {
  background: var(--header-bg-scrolled);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom-color: var(--header-border);
  box-shadow: var(--header-shadow);
}
.header-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 72px;
}
.brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-family: inherit;
}
.brand-logo {
  height: 38px;
  width: auto;
  display: block;
}
@media (max-width: 600px) {
  .brand-logo { height: 30px; }
}
.brand-name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.brand-tagline {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-top: 2px;
}
.main-nav {
  display: flex;
  gap: 1.5rem;
  margin-left: auto;
  font-size: 0.85rem;
}
.main-nav a { color: var(--fg-dim); font-weight: 500; }
.main-nav a:hover, .main-nav a.is-active { color: var(--fg); }
@media (min-width: 1920px) {
  .main-nav {
    font-size: 1.1rem;
    gap: 2rem;
  }
}
.header-actions { display: flex; align-items: center; gap: 0.5rem; }

/* Телефон в шапке */
.header-phone {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg);
  white-space: nowrap;
  margin-right: 0.5rem;
  transition: color 0.18s;
}
.header-phone:hover { color: var(--brand); }

/* Всплывающий поиск — выезжает под шапку */
.header-search-pop {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: hsl(0 0% 5% / 0.95);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 30px 60px -30px hsl(0 0% 0% / 0.7);
}
.header-search-pop__form {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.25rem 0;
}
.header-search-pop__icon { color: var(--fg-dim); flex-shrink: 0; }
.header-search-pop__form input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--fg);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  letter-spacing: -0.01em;
  padding: 0.25rem 0;
}
.header-search-pop__form input::placeholder { color: var(--fg-muted); }
.header-search-pop__close {
  width: 32px; height: 32px;
  border-radius: 9999px;
  color: var(--fg-dim);
  font-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.header-search-pop__close:hover { color: var(--fg); background: var(--surface); }

/* Живые подсказки поиска */
.header-suggest {
  padding-bottom: 1rem;
  margin-top: -0.35rem;
}
.header-suggest__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.header-suggest__item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0.5rem;
  border-radius: var(--radius);
  color: var(--fg);
  text-decoration: none;
  transition: background 0.12s ease;
}
.header-suggest__item.is-active { background: var(--card-hover); color: var(--fg); }
.header-suggest__thumb {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 0.6rem;
  background: var(--surface);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-suggest__thumb img { width: 100%; height: 100%; object-fit: contain; }
.header-suggest__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.header-suggest__name {
  font-size: 0.95rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-suggest__name mark { background: transparent; color: var(--brand); font-weight: 600; }
.header-suggest__meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: var(--fg-muted);
}
.header-suggest__price { color: var(--fg-dim); }
.header-suggest__all {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
  color: var(--brand);
  text-decoration: none;
}
.header-suggest__all:hover { text-decoration: underline; }
.header-suggest__empty {
  padding: 0.85rem 0.5rem;
  color: var(--fg-muted);
  font-size: 0.9rem;
}

/* Бургер — скрыт на десктопе, показывается там, где спрятана .main-nav */
.burger { display: none; }

@media (max-width: 900px) {
  .main-nav { display: none; }
  .burger { display: inline-flex; }
  /* .main-nav (с margin-left:auto) скрыта — прижимаем правую группу контролов вправо */
  .header-row > .icon-btn,
  .header-phone { margin-left: auto; }
}
@media (max-width: 640px) {
  .header-phone { display: none; }
}

/* ---------- Мобильное меню (полноэкранная панель под шапкой) ---------- */
.mobile-menu {
  position: fixed;
  left: 0; right: 0;
  top: 72px;            /* высота .header-row */
  /* Высоту задаём явно: у .site-header есть backdrop-filter, из-за чего он
     становится containing block для fixed-потомков и bottom:0 считался бы от
     низа шапки, а не экрана. */
  height: calc(100vh - 72px);
  height: calc(100dvh - 72px);
  z-index: 49;          /* под шапкой (z50), над контентом — крестик в шапке кликабелен */
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu .container {
  display: flex;
  flex-direction: column;
  padding-top: 0.5rem;
  padding-bottom: 2rem;
}
.mobile-menu a {
  padding: 1.15rem 0.25rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--fg);
  border-bottom: 1px solid var(--border);
  transition: color 0.18s var(--ease), padding-left 0.18s var(--ease);
}
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu a:hover, .mobile-menu a:active { color: var(--brand); padding-left: 0.6rem; }
.mobile-menu__phone {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--brand) !important;
  margin-top: 0.5rem;
}
/* На десктопе мобильное меню недоступно */
@media (min-width: 901px) {
  .mobile-menu { display: none !important; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 6rem 0 5rem;
  text-align: left;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 45% at 75% 75%, hsl(353 97% 28% / 0.55), transparent 70%),
    linear-gradient(180deg, var(--bg-deep), var(--bg));
  z-index: -1;
}
.hero h1 {
  font-size: clamp(1.8rem, 4.4vw, 3.2rem);
  margin: 1.25rem 0 1.25rem;
  max-width: 760px;
}
.hero .lead {
  color: var(--fg-dim);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  max-width: 580px;
  margin: 0 0 2rem;
}
.hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ---------- Универсальные секции ---------- */
.section {
  padding: 5rem 0;
}
.section--tight { padding: 3.5rem 0; }
.section--bordered { border-top: 1px solid var(--border); }
.section--surface { background: var(--surface); }
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.section-header__title {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.section-header h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
}
.section-header__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--fg-dim);
  font-weight: 500;
  white-space: nowrap;
}
.section-header__link:hover { color: var(--fg); gap: 0.6rem; }

/* ---------- Сетка карточек ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}
@media (min-width: 800px) {
  .product-grid { gap: 1.75rem; }
}
/* Режим списка: одна колонка, карточка раскладывается горизонтально (см. ниже). */
.product-grid.is-list {
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* ---------- Карточка товара ---------- */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), box-shadow 0.3s var(--ease), transform 0.25s var(--ease);
}
.product-card:hover {
  border-color: hsl(353 97% 55% / 0.4);
  box-shadow: var(--shadow-card-hov);
  transform: translateY(-2px);
}
.product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  background: var(--card-media-bg);
  overflow: hidden;
}
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 1rem;
  filter: var(--card-media-shadow);
  transition: transform 0.5s var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.05); }
/* Edge-dissolve поверх фото (см. --card-media-dissolve в темах). */
.product-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--card-media-dissolve);
}
.product-card__badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
}
/* Header вынесен на самый верх карточки. Минимальная высота позволяет выровнять
   фото и нижние блоки во всех карточках грида независимо от длины названия.
   Title клампится на 3 строки с тултипом (title="..."), чтобы длинные имена
   не ломали сетку, но при этом по hover можно прочитать полностью. */
.product-card__header {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.95rem 1.1rem 0.6rem;
  min-height: 100px;
}
.product-card__body {
  padding: 0.6rem 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}
.product-card__line {
  align-self: flex-start;
  font-size: 0.6rem;
}
.product-card__title {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__title a { color: var(--fg); }
.product-card__title a:hover { color: var(--brand); }
.product-card__sku {
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--fg-muted);
  margin-top: auto;
}

/* Список ключевых ТТХ в карточке листинга. Выделен фоном-плашкой и левой
   акцент-полосой, чтобы блок не сливался с остальной карточкой. Внутри —
   разделители между строками; значение крупное и жирное. */
.product-card__specs {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  font-size: 0.82rem;
}
.product-card__specs li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
}
.product-card__specs li:last-child {
  border-bottom: 0;
}
.product-card__spec-label {
  color: var(--fg-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-card__spec-value {
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.product-card__spec-unit {
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--fg-muted);
  margin-left: 0.15rem;
}

.product-card__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.product-card__price { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; }
.product-card__price small { font-weight: 400; color: var(--fg-muted); font-size: 0.7rem; margin-left: 4px; }
.product-card__save-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.product-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-top: 0.3rem;
}
.product-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}
.product-card__cta svg { flex-shrink: 0; }

/* ---------- List-режим: горизонтальная раскладка ----------
   В списке карточка: media слева, справа header (title+sku) сверху и body
   (specs/price/actions) снизу. Внутри body — две колонки: specs | price+actions. */
.product-grid.is-list .product-card {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "media header"
    "media body";
  align-items: stretch;
}
.product-grid.is-list .product-card__media {
  grid-area: media;
  aspect-ratio: 4/3;
  max-width: 240px;
  align-self: stretch;
}
.product-grid.is-list .product-card__header {
  grid-area: header;
  min-height: 0;
  padding: 1rem 1.1rem 0.4rem;
}
.product-grid.is-list .product-card__title {
  -webkit-line-clamp: 2;
}
.product-grid.is-list .product-card__body {
  grid-area: body;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "specs  price"
    "specs  actions";
  gap: 0.6rem 1.5rem;
  align-items: start;
  padding: 0.4rem 1.1rem 1rem;
}
.product-grid.is-list .product-card__specs {
  grid-area: specs;
  border-top: 0;
  padding-top: 0;
}
.product-grid.is-list .product-card__price-row {
  grid-area: price;
  flex-direction: column;
  align-items: flex-end;
  padding-top: 0;
  margin-top: 0;
  text-align: right;
  gap: 0.3rem;
}
.product-grid.is-list .product-card__actions {
  grid-area: actions;
  margin-top: 0;
  align-self: end;
}
@media (max-width: 720px) {
  .product-grid.is-list .product-card {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "media" "body";
  }
  .product-grid.is-list .product-card__media { max-width: none; }
  .product-grid.is-list .product-card__body {
    grid-template-columns: 1fr;
    grid-template-areas: "specs" "price" "actions";
  }
  .product-grid.is-list .product-card__price-row {
    align-items: center;
    text-align: left;
    flex-direction: row;
  }
}

/* ---------- Toolbar: переключатель grid/list ---------- */
.listing-toolbar__view {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-left: 0.25rem;
}
.listing-toolbar__view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  color: var(--fg-muted);
  border: 0;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.listing-toolbar__view-btn:hover { color: var(--fg); }
.listing-toolbar__view-btn.is-active {
  background: var(--brand);
  color: #fff;
}

/* ---------- StatsBar (числовая полоса под hero) ----------
   Аналог React-секции: bg-surface, border-y, max-w-7xl, py-8 md:py-10.
   Число — foreground tabular-nums; суффикс (+/" года") — красный акцент. */
.stats-bar {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stats-bar__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: 1rem;
  padding: 2rem 0;
}
@media (min-width: 768px) {
  .stats-bar__grid { padding: 2.5rem 0; }
}
.stat-item {
  text-align: center;
  padding: 0 1rem;
}
@media (min-width: 768px) { .stat-item { padding: 0 1.5rem; } }
.stat-item__value {
  font-size: 1.5rem;                /* text-2xl */
  font-weight: 700;
  letter-spacing: -0.025em;         /* tracking-tight */
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
@media (min-width: 768px) {
  .stat-item__value { font-size: 1.875rem; }   /* text-3xl */
}
.stat-item__value [data-countup] { color: var(--fg); }
.stat-item__suffix { color: var(--brand); }
.stat-item__label {
  font-size: 0.75rem;               /* text-xs */
  color: var(--fg-dim);
  margin-top: 0.25rem;
}
@media (min-width: 768px) {
  .stat-item__label { font-size: 0.875rem; }   /* text-sm */
}
.stat-item__sep {
  display: none;
  width: 1px;
  height: 32px;                     /* h-8 как в React */
  background: var(--border);
}
@media (min-width: 768px) {
  .stat-item__sep { display: block; }
}

/* ---------- CategoryGrid (нумерованные строки) ---------- */
.cat-grid {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.cat-row {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 120px;
  color: var(--fg);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  transition: background 0.3s var(--ease);
}
.cat-row:last-child { border-bottom: 0; }
.cat-row__bg {
  position: absolute;
  inset: 0;
  background: var(--surface);
  transition: background 0.3s var(--ease);
  z-index: 0;
}
.cat-row:hover .cat-row__bg { background: hsl(353 97% 50% / 0.05); }

.cat-row__left {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.5rem;
  flex: 1;
  min-width: 0;
}
@media (min-width: 768px) {
  .cat-row__left { gap: 2rem; padding: 1.75rem 2.5rem; }
}

.cat-row__index {
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  width: 2.5rem;
  flex-shrink: 0;
  line-height: 1;
  color: hsl(0 0% 20%);
  transition: color 0.3s var(--ease);
}
.cat-row:hover .cat-row__index { color: var(--brand); }

.cat-row__sep {
  display: none;
  width: 1px;
  height: 40px;
  background: hsl(0 0% 18%);
  flex-shrink: 0;
  transition: background 0.3s var(--ease);
}
@media (min-width: 640px) { .cat-row__sep { display: block; } }
.cat-row:hover .cat-row__sep { background: var(--brand); }

.cat-row__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.cat-row__body h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s var(--ease);
}
.cat-row:hover .cat-row__body h3 { color: var(--brand); }
.cat-row__icon { font-size: 1.05em; line-height: 1; flex-shrink: 0; }
.cat-row__descr {
  margin: 0;
  font-size: 0.82rem;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-row__right {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .cat-row__right { gap: 1.5rem; padding: 1rem 2rem; }
}

.cat-row__count {
  display: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: hsl(0 0% 38%);
  flex-shrink: 0;
  transition: color 0.2s var(--ease);
}
@media (min-width: 640px) { .cat-row__count { display: inline; } }
.cat-row:hover .cat-row__count { color: var(--brand); }

.cat-row__thumb {
  position: relative;
  width: 96px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
@media (min-width: 768px) { .cat-row__thumb { width: 144px; height: 96px; } }
@media (min-width: 1024px) { .cat-row__thumb { width: 192px; height: 112px; } }
.cat-row:hover .cat-row__thumb { transform: scale(1.04); }
.cat-row__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.9) contrast(1.05);
}
.cat-row__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: hsl(353 97% 50% / 0);
  transition: background 0.3s var(--ease);
}
.cat-row:hover .cat-row__thumb::after { background: hsl(353 97% 50% / 0.15); }

.cat-row__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: 1px solid hsl(0 0% 22%);
  color: var(--fg-muted);
  flex-shrink: 0;
  transition: all 0.3s var(--ease);
}
.cat-row:hover .cat-row__arrow {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}

/* Мобайл: превью-картинка съедала ширину, заголовок обрезался в «ничто».
   Убираем thumb, разрешаем тексту переноситься, ужимаем индекс и отступы. */
@media (max-width: 639px) {
  .cat-row { min-height: 0; }
  .cat-row__left {
    gap: 0.85rem;
    padding: 1.15rem 0.75rem 1.15rem 1.1rem;
  }
  .cat-row__index {
    font-size: 1.4rem;
    width: 1.6rem;
  }
  .cat-row__body h3 {
    white-space: normal;
    font-size: 1.02rem;
    line-height: 1.2;
  }
  .cat-row__descr {
    white-space: normal;
    font-size: 0.78rem;
  }
  .cat-row__right {
    gap: 0.6rem;
    padding: 1rem 1rem 1rem 0.25rem;
  }
  .cat-row__thumb { display: none; }
}

/* ---------- BrandManifesto (инверсия — белый фон) ---------- */
.brand-manifesto {
  position: relative;
  background: hsl(0 0% 96%);
  color: hsl(0 0% 9%);
  padding: 8rem 0;
  overflow: hidden;
}
.brand-manifesto__watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-weight: 900;
  font-size: clamp(12rem, 30vw, 28rem);
  letter-spacing: -0.05em;
  color: hsl(0 0% 9% / 0.04);
  line-height: 1;
  user-select: none;
}
.brand-manifesto__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.brand-manifesto__kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.brand-manifesto__hr {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--brand);
}
.brand-manifesto__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--brand);
}
.brand-manifesto h2 {
  /* Минимум снижен, чтобы длинные слова («Профессиональный») влезали на мобиле
     и не обрезались overflow:hidden у секции. */
  font-size: clamp(1.7rem, 7vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  color: hsl(0 0% 9%);
  line-height: 1.05;
  margin-bottom: 1.5rem;
  overflow-wrap: break-word;
}
.brand-manifesto p {
  font-size: 1.1rem;
  color: hsl(0 0% 9% / 0.65);
  line-height: 1.55;
  max-width: 520px;
  margin: 0 auto 3rem;
  overflow-wrap: break-word;
}
.brand-manifesto__cta {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.brand-manifesto__btn-primary {
  /* Кнопка всегда тёмная — независимо от темы сайта,
     потому что находится на инверсном (светлом) брендовом блоке. */
  background: hsl(0 0% 9%);
  color: hsl(0 0% 96%);
}
.brand-manifesto__btn-primary:hover { background: hsl(0 0% 18%); color: hsl(0 0% 96%); }
.brand-manifesto__btn-secondary {
  background: transparent;
  border: 1px solid hsl(0 0% 9% / 0.3);
  color: hsl(0 0% 9%);
}
.brand-manifesto__btn-secondary:hover {
  background: hsl(0 0% 9% / 0.05);
  color: hsl(0 0% 9%);
  border-color: hsl(0 0% 9%);
}

/* ---------- Старые плитки (на случай если где-то используются) ---------- */
.category-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.category-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 140px;
  padding: 1.25rem 1.25rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: var(--fg);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
  position: relative;
  overflow: hidden;
}
.category-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 100%, hsl(353 97% 50% / 0.12), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.category-tile:hover { border-color: var(--brand); transform: translateY(-2px); }
.category-tile:hover::before { opacity: 1; }
.category-tile img {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 16px;
  opacity: 0.85;
}
.category-tile__body { position: relative; z-index: 1; }
.category-tile h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.category-tile .count {
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--fg-muted);
}

/* ---------- Категории — крупные плитки разделов ---------- */
.subcategory-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
}
.subcategory-tile {
  display: block;
  padding: 0.95rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg-dim);
  font-size: 0.88rem;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.subcategory-tile:hover {
  border-color: var(--brand);
  color: var(--fg);
  background: hsl(353 97% 50% / 0.03);
}

/* ---------- Преамбула под hero ---------- */
.intro-strip {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--border);
}
.intro-strip p {
  margin: 0;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: 780px;
  text-align: center;
  margin-inline: auto;
}

/* ---------- Преимущества (01/02/03) ---------- */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .adv-grid { grid-template-columns: 1fr; gap: 1rem; } }

.adv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 2.25rem 1.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.adv-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, hsl(353 97% 50% / 0.12), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.adv-card:hover { border-color: hsl(353 97% 55% / 0.45); transform: translateY(-3px); }
.adv-card:hover::before { opacity: 1; }
.adv-card__index {
  font-size: clamp(1.4rem, 1.8vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}
.adv-card__headline {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--fg);
  position: relative;
  z-index: 1;
  text-transform: uppercase;
}
.adv-card__sub {
  margin: 0;
  font-size: 0.92rem;
  color: var(--fg-dim);
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

/* ---------- Секция «О бренде» — editorial ---------- */
.about {
  position: relative;
  padding: 7rem 0 6rem;
  overflow: hidden;
  isolation: isolate;
}
.about__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 40% at 80% 30%, hsl(353 97% 30% / 0.25), transparent 70%),
    radial-gradient(ellipse 60% 50% at 10% 80%, hsl(0 0% 10%), transparent 70%);
  pointer-events: none;
}
.about__top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 4rem;
  align-items: center;
  margin-bottom: 6rem;
}
@media (max-width: 900px) {
  .about__top { grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 4rem; }
}

.about__media {
  position: relative;
  aspect-ratio: 4/5;
}
.about__media img,
.about__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-xl);
  display: block;
}
.about__placeholder {
  background:
    radial-gradient(ellipse 70% 60% at 50% 70%, hsl(353 97% 28% / 0.5), transparent 70%),
    var(--chrome-bg-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about__placeholder-num {
  font-size: clamp(6rem, 12vw, 11rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  color: var(--soft-tint);
  line-height: 1;
  user-select: none;
}
.about__media-frame {
  position: absolute;
  inset: -16px;
  border-radius: calc(var(--radius-xl) + 16px);
  border: 1px solid var(--border);
  pointer-events: none;
}

.about__intro h2 {
  font-size: clamp(1.85rem, 3.5vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 1rem 0 1.5rem;
  max-width: 560px;
}
.about__lead {
  color: var(--fg-dim);
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.65;
  margin: 0;
  max-width: 540px;
}

/* Принципы — горизонтальная лента из 4 numbered карточек */
.about__principles {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) {
  .about__principles { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}
@media (max-width: 540px) {
  .about__principles { grid-template-columns: 1fr; }
}
.principle {
  position: relative;
  padding: 2rem 1.5rem 2.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.principle::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(to right, transparent, hsl(353 97% 50% / 0.5), transparent);
  transform: scaleX(0);
  transition: transform 0.4s var(--ease);
  transform-origin: left center;
}
.principle:hover {
  border-color: hsl(353 97% 55% / 0.4);
  transform: translateY(-4px);
}
.principle:hover::before { transform: scaleX(1); }
.principle__num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.principle__title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--fg);
}
.principle__text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--fg-dim);
  line-height: 1.55;
}

/* ---------- Новости — magazine grid ---------- */
.news-section { padding: 7rem 0 6rem; }
.mag-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .mag-grid { grid-template-columns: 1fr; }
}

/* Featured card */
.mag-feature {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--soft-tint);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.mag-feature:hover {
  border-color: hsl(0 0% 100% / 0.1);
  box-shadow: 0 50px 80px -40px hsl(353 97% 50% / 0.35);
}
.mag-feature__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.mag-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.mag-feature:hover .mag-feature__media img { transform: scale(1.05); }
.mag-feature__placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 80%, hsl(353 97% 30% / 0.4), transparent 70%),
    var(--chrome-bg-strong);
}
.mag-feature__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg-deep) 0%, color-mix(in srgb, var(--bg-deep) 50%, transparent) 35%, transparent 75%);
}
.mag-feature__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2rem 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.mag-feature__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.mag-feature__tag {
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--brand);
  border-radius: 9999px;
  color: var(--brand);
  font-weight: 700;
}
.mag-feature__date {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.mag-feature__title {
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--fg);
  max-width: 620px;
}
.mag-feature__excerpt {
  color: hsl(0 0% 82%);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 560px;
}
.mag-feature__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  padding-top: 0.4rem;
  transition: gap 0.3s var(--ease);
}
.mag-feature:hover .mag-feature__cta { gap: 0.7rem; }

/* Side compact items */
.mag-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: var(--fg);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.mag-item:hover {
  border-color: hsl(353 97% 55% / 0.4);
  background: var(--card-hover);
}
.mag-item__media {
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
}
.mag-item__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.mag-item:hover .mag-item__media img { transform: scale(1.05); }
.mag-item__date {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}
.mag-item__title {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Колонка справа = вертикальный stack из mag-item */
.mag-grid {
  align-items: stretch;
}
.mag-grid .mag-item:not(:first-of-type) {}
.mag-grid > .mag-item {
  align-self: start;
}
@media (min-width: 901px) {
  .mag-grid {
    grid-template-rows: repeat(3, 1fr);
  }
  .mag-feature { grid-row: 1 / span 3; }
}

/* ---------- Split-text helper (Motion JS наполняет) ---------- */
.split-text { overflow: hidden; }
.split-text .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40%);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  white-space: pre;
}
.split-text.in-view .word { opacity: 1; transform: translateY(0); }

/* ---------- Каталог: листинг + сайдбар ---------- */
.catalog-root { padding-bottom: 6rem; padding-top: 3rem; }
.catalog-root__section { margin-bottom: 3rem; }

/* ---------- Каталог: премиум-герой ---------- */
.catalog-hero {
  position: relative;
  overflow: hidden;
  padding: 5rem 0 5.5rem;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, hsl(353 97% 28% / 0.18), transparent 70%),
    linear-gradient(180deg, var(--bg-deep), var(--bg));
}
.catalog-hero .breadcrumbs { padding: 0 0 1.5rem; }
.catalog-hero__orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.catalog-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
  animation: catalogOrbFloat 14s ease-in-out infinite;
}
.catalog-hero__orb--red {
  width: 520px; height: 520px;
  right: -8%;
  top: -20%;
  background: radial-gradient(circle, hsl(353 97% 35% / 0.55), transparent 70%);
}
.catalog-hero__orb--soft {
  width: 360px; height: 360px;
  left: 5%;
  bottom: -30%;
  background: radial-gradient(circle, hsl(0 0% 70% / 0.10), transparent 70%);
  animation-delay: -7s;
}
@keyframes catalogOrbFloat {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(2%, -3%); }
}
.catalog-hero .container { position: relative; z-index: 1; }
.catalog-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: end;
}
@media (min-width: 960px) {
  .catalog-hero__grid { grid-template-columns: 1.4fr 1fr; gap: 3rem; }
}
.catalog-hero__copy h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  margin: 0.6rem 0 1.2rem;
  letter-spacing: -0.025em;
  line-height: 1.02;
  font-weight: 700;
}
.catalog-hero__copy h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--brand), hsl(353 97% 70%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.catalog-hero__copy .lead {
  max-width: 620px;
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.6;
}
.catalog-hero__stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}
.catalog-hero__stats li {
  background: var(--chrome-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.1rem 1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.catalog-hero__stats li::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, hsl(353 97% 50% / 0.06), transparent 60%);
  pointer-events: none;
}
.catalog-hero__stat-value {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.catalog-hero__stat-label {
  color: var(--fg-dim);
  font-size: 0.75rem;
  line-height: 1.4;
}

/* ---------- Каталог: showcase-секция (раздел) ---------- */
.catalog-showcase {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  padding: 2.25rem 0;
  border-top: 1px solid var(--border);
  position: relative;
}
.catalog-showcase:first-of-type { border-top: 0; padding-top: 2.75rem; }
.catalog-showcase::after {
  /* мягкое свечение слева — даёт ощущение объёма */
  content: "";
  position: absolute;
  left: -10%;
  top: 30%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, hsl(353 97% 35% / 0.06), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 960px) {
  .catalog-showcase {
    grid-template-columns: 0.85fr 1.85fr;
    gap: 2.5rem;
    align-items: start;
  }
}
.catalog-showcase__intro {
  position: relative;
  z-index: 1;
}
.catalog-showcase__intro h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  margin: 0.6rem 0 0.85rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.catalog-showcase__intro h2 a:hover { color: var(--brand); }
.catalog-showcase__desc {
  font-size: 0.92rem;
  margin: 0 0 1.25rem;
  line-height: 1.55;
}
.catalog-showcase__meta {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0 0 1.5rem;
}
.catalog-showcase__count {
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--fg), hsl(0 0% 55%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 0.95;
}
.catalog-showcase__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.1rem 0.75rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--fg);
  font-weight: 600;
  font-size: 0.92rem;
  transition: border-color 0.22s var(--ease), color 0.22s, background 0.22s, transform 0.22s;
}
.catalog-showcase__cta svg { transition: transform 0.25s var(--ease); }
.catalog-showcase__cta:hover {
  border-color: var(--brand);
  color: var(--fg);
  background: hsl(353 97% 50% / 0.06);
}
.catalog-showcase__cta:hover svg { transform: translateX(4px); }
.catalog-showcase__cta:active { transform: translateY(1px); }

.catalog-showcase__tiles {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.7rem;
}
.catalog-showcase__tiles--single { grid-template-columns: 1fr; max-width: 320px; }

/* ---------- Премиум-плитка подкатегории ---------- */
.cat-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.15rem;
  background: var(--tile-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: var(--fg-dim);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.25s var(--ease),
    border-color 0.25s var(--ease),
    color 0.2s,
    box-shadow 0.3s var(--ease);
  min-height: 64px;
}
.cat-tile::before {
  /* верхний блик */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
  pointer-events: none;
}
.cat-tile::after {
  /* фирменное свечение под плиткой при hover */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 100% 100%, hsl(353 97% 45% / 0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.cat-tile__title {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.cat-tile__count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--fg-muted);
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.cat-tile__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--fg-muted);
  transition: color 0.25s, background 0.25s, transform 0.25s var(--ease);
}
.cat-tile:hover {
  border-color: hsl(353 97% 45% / 0.5);
  color: var(--fg);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -10px hsl(353 97% 35% / 0.35);
}
.cat-tile:hover::after { opacity: 1; }
.cat-tile:hover .cat-tile__arrow {
  color: var(--brand);
  transform: translateX(3px) translateY(-3px);
}
.cat-tile:hover .cat-tile__count {
  color: var(--fg);
  border-color: hsl(353 97% 45% / 0.4);
  background: hsl(353 97% 45% / 0.08);
}
.cat-tile:active { transform: translateY(0); }
.cat-tile--full { justify-content: space-between; }

/* Превью категории. Берётся из Category.image, либо фолбэком из
   первого фото первого товара поддерева (см. category_thumb_url). */
.cat-tile__media {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--soft-tint);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.35s var(--ease);
}
.cat-tile--has-image { padding-left: 0.7rem; }
.cat-tile:hover .cat-tile__media img { transform: scale(1.06); }
.cat-tile--full.cat-tile--has-image .cat-tile__media {
  width: 64px;
  height: 64px;
}

/* ---------- Витрина подкатегорий на странице категории-хаба ---------- */
.subcat-showcase { padding: 2.5rem 0 1rem; }
.subcat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.75rem;
}
.subcat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--tile-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.25s var(--ease),
    border-color 0.25s var(--ease),
    box-shadow 0.3s var(--ease);
}
.subcat-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 100% 100%, hsl(353 97% 45% / 0.16), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.subcat-card__media {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem;
  background:
    radial-gradient(80% 90% at 50% 100%, hsl(353 97% 45% / 0.07), transparent 65%),
    var(--soft-tint);
  border-bottom: 1px solid var(--border);
}
.subcat-card__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.35s var(--ease);
}
/* Edge-dissolve на превью категорий — тот же эффект, что на карточках товара. */
.subcat-card__media,
.cat-tile__media {
  position: relative;
}
.subcat-card__media::after,
.cat-tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--card-media-dissolve);
}
/* Мелкие плитки корня каталога — мягче, иначе товар не разглядеть. */
.cat-tile__media::after {
  background: var(--card-media-dissolve-soft);
}
.subcat-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  flex: 1;
}
.subcat-card__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.subcat-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.subcat-card__count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--fg-muted);
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.subcat-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--fg-muted);
  transition: color 0.25s, transform 0.25s var(--ease);
}
.subcat-card:hover {
  border-color: hsl(353 97% 45% / 0.5);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -12px hsl(353 97% 35% / 0.35);
}
.subcat-card:hover::after { opacity: 1; }
.subcat-card:hover .subcat-card__media img { transform: scale(1.06); }
.subcat-card:hover .subcat-card__arrow {
  color: var(--brand);
  transform: translateX(3px) translateY(-3px);
}
.subcat-card:hover .subcat-card__count {
  color: var(--fg);
  border-color: hsl(353 97% 45% / 0.4);
  background: hsl(353 97% 45% / 0.08);
}
.subcat-card:active { transform: translateY(0); }

/* Заголовок листинга под витриной подкатегорий на хабе */
.subcat-products-header { margin-top: 3rem; }

/* Мобилка: компактный список-строки (как плитки на корне каталога) */
@media (max-width: 700px) {
  .subcat-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .subcat-card {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.7rem;
  }
  .subcat-card__media {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    aspect-ratio: auto;
    padding: 0.3rem;
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  .subcat-card__body { padding: 0; }
  .subcat-card__name { font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-hero__orb { animation: none; }
}

/* ---------- Премиум-герой страницы категории ---------- */
.category-hero {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 3rem;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 60% 70% at 90% 10%, hsl(353 97% 28% / 0.22), transparent 70%),
    linear-gradient(180deg, var(--bg-deep), var(--bg));
}
.category-hero .breadcrumbs { padding: 0 0 1.25rem; }
.category-hero__orb {
  position: absolute;
  right: -10%;
  top: -30%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(353 97% 35% / 0.45), transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
.category-hero .container { position: relative; z-index: 1; }
.category-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: end;
}
@media (min-width: 960px) {
  .category-hero__grid { grid-template-columns: 1.6fr 1fr; gap: 3rem; }
}
.category-hero__copy h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin: 0.5rem 0 0.9rem;
  letter-spacing: -0.025em;
  line-height: 1.04;
  font-weight: 700;
}
.category-hero__copy .lead {
  max-width: 640px;
  font-size: clamp(0.98rem, 1.2vw, 1.05rem);
  line-height: 1.6;
}
.category-hero__meta {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.category-hero__count-card {
  position: relative;
  overflow: hidden;
  padding: 1.25rem 1.4rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.category-hero__count-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, hsl(353 97% 50% / 0.08), transparent 60%);
  pointer-events: none;
}
.category-hero__count-value {
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, var(--fg), hsl(0 0% 55%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.category-hero__count-label {
  color: var(--fg-dim);
  font-size: 0.85rem;
}
.category-hero__range {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.92rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-variant-numeric: tabular-nums;
}
.category-hero__range strong { font-weight: 700; }
.category-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}

/* ---------- Сайдбар фильтров: премиум ---------- */
.category-filters .filters {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.filters {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: var(--chrome-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.filters__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--chrome-bg);
}
.filters__title {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.filters__title svg { color: var(--brand); }
.filters__reset {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fg-dim);
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.filters__reset:hover {
  color: var(--fg);
  border-color: hsl(353 97% 45% / 0.5);
  background: hsl(353 97% 45% / 0.08);
}

.filter-block {
  padding: 1.1rem 1.25rem 1.15rem;
  border-top: 1px solid var(--border);
}
.filter-block + .filter-block { padding-top: 1.1rem; }
.filter-block:first-of-type { border-top: 0; }
.filter-block--search { padding: 0.9rem 1.1rem; background: var(--surface); }
.filter-block--empty { font-size: 0.82rem; line-height: 1.5; color: var(--fg-muted); }
.filter-block--empty em { color: var(--fg-dim); font-style: normal; }

.filter-search {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9999px;
  transition: border-color 0.18s;
}
.filter-search:focus-within { border-color: var(--brand); }
.filter-search svg { color: var(--fg-muted); flex-shrink: 0; }
.filter-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--fg);
  font-size: 0.88rem;
  padding: 0;
}
.filter-search input::placeholder { color: var(--fg-muted); }

.filter-block__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  background: transparent;
  border: 0;
  padding: 0 0 0.7rem;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s;
}
.filter-block__title:hover { color: var(--fg); }
.filter-block__chev {
  color: var(--fg-muted);
  transition: transform 0.25s var(--ease);
}
.filter-block__chev.is-closed { transform: rotate(-90deg); }
.filter-block__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  margin-top: 0.25rem;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--fg);
  cursor: pointer;
  padding: 0.38rem 0.55rem;
  border-radius: 8px;
  transition: background 0.15s;
}
.filter-option:hover { background: var(--soft-tint); }
.filter-option input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 16px; height: 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: border-color 0.18s, background 0.18s;
}
.filter-option input[type=checkbox]:hover { border-color: var(--fg-dim); }
.filter-option input[type=checkbox]:checked {
  background: var(--brand);
  border-color: var(--brand);
}
.filter-option input[type=checkbox]:checked::after {
  content: "";
  width: 9px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(0.5px, -1px);
}
.filter-option__label { flex: 1; }
.filter-option__count {
  font-size: 0.74rem;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
}

/* Тулбар над листингом — премиум-карточка */
.listing-toolbar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  padding: 0.85rem 1.15rem;
  background: var(--chrome-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.listing-toolbar__count {
  margin-right: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.92rem;
}
.listing-toolbar__count strong {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.listing-toolbar__field {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
}
.listing-toolbar__field select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--fg);
  padding: 0.45rem 1.6rem 0.45rem 0.95rem;
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  transition: border-color 0.18s, background-color 0.18s;
}
.listing-toolbar__field select:hover { border-color: var(--fg-dim); }
.listing-toolbar__field select:focus { border-color: var(--brand); }

.breadcrumbs {
  padding: 1.25rem 0;
  font-size: 0.8rem;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  color: var(--fg-muted);
}
.breadcrumbs a { color: var(--fg-muted); }
.breadcrumbs a:hover { color: var(--fg); }
.breadcrumbs span { color: var(--fg-dim); }

.category-header { margin-bottom: 2rem; }
.category-header h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  margin: 0.5rem 0 0.75rem;
}
.subcategory-strip {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.subcategory-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  background: var(--chrome-bg-strong);
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: 0.85rem;
  color: var(--fg-dim);
  transition: border-color 0.22s var(--ease), color 0.22s, background 0.22s, transform 0.22s var(--ease);
}
.subcategory-pill svg {
  opacity: 0.5;
  transition: transform 0.25s var(--ease), opacity 0.22s;
}
.subcategory-pill:hover {
  border-color: hsl(353 97% 45% / 0.5);
  color: var(--fg);
  transform: translateY(-1px);
  background: linear-gradient(180deg, hsl(0 0% 13%), hsl(0 0% 9%));
}
.subcategory-pill:hover svg { opacity: 1; color: var(--brand); transform: translate(2px, -2px); }

.category-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2.5rem;
  margin-top: 2rem;
}
@media (max-width: 900px) {
  .category-layout { grid-template-columns: 1fr; }
  .category-filters { order: 2; }
}

.category-filters .filters { position: sticky; top: 96px; }

.filters {
  display: flex; flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.filter-block + .filter-block { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.filter-block h4,
.filter-block__title {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 0.85rem;
  cursor: pointer;
  background: transparent;
  border: 0;
  font-family: inherit;
  padding: 0;
}
.filter-block__body {
  display: flex; flex-direction: column;
  gap: 0.4rem;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.filter-range { display: flex; align-items: center; gap: 0.5rem; }
.filter-range input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  color: var(--fg);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.15s;
}
.filter-range input:focus { border-color: var(--brand); }
.filter-option {
  display: flex; align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: var(--fg);
  cursor: pointer;
  padding: 0.2rem 0;
}
.filter-option input[type=checkbox] {
  accent-color: var(--brand);
  width: 16px; height: 16px;
}
.filter-option .muted { margin-left: auto; font-size: 0.78rem; }

/* Тулбар над листингом */
.listing-toolbar {
  display: flex; align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.listing-toolbar__count { margin-right: auto; font-size: 0.85rem; color: var(--fg-dim); }
.listing-toolbar__field { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
.listing-toolbar__field select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  padding: 0.45rem 0.7rem;
  font-size: 0.85rem;
  outline: none;
}
.listing-toolbar__field select:focus { border-color: var(--brand); }

/* Пагинация */
.pagination {
  display: flex; align-items: center; gap: 1rem; justify-content: center;
  padding: 2.5rem 0 1rem;
  font-size: 0.9rem;
}
.pagination a {
  padding: 0.55rem 1rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--fg-dim);
  transition: all 0.18s;
}
.pagination a:hover { border-color: var(--brand); color: var(--fg); }

.empty-state { text-align: center; padding: 4rem 1rem; color: var(--fg-dim); }

/* ---------- Карточка товара ---------- */
.product-page { padding-bottom: 5rem; }
.product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: flex-start;
  margin: 1.5rem 0 4rem;
}
@media (max-width: 900px) {
  .product-hero { grid-template-columns: 1fr; gap: 2rem; }
}

.product-gallery__main {
  aspect-ratio: 4/3;
  background: radial-gradient(ellipse 65% 55% at 50% 85%, hsl(353 97% 28% / 0.42), hsl(0 0% 4%));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
}
.product-gallery__main img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 2.5rem;
  filter: drop-shadow(0 30px 35px hsl(0 0% 0% / 0.6));
}
.product-gallery__thumbs {
  display: flex; gap: 0.6rem;
  margin-top: 1rem;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 0.25rem;
}
.product-gallery__thumb {
  width: 76px;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  padding: 0.3rem;
  flex-shrink: 0;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery__thumb.is-active {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px hsl(353 97% 55% / 0.4);
}

.product-info { display: flex; flex-direction: column; gap: 1rem; }
.product-info__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.product-info h1 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.2;
}
.product-info__sku {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.85rem;
  color: var(--fg-muted);
}
.product-info__price {
  display: flex; align-items: baseline; gap: 0.65rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.product-info__price-value {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.product-info__key-specs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.product-info__key-specs li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.9rem;
}
.product-info__key-specs li:last-child { border-bottom: 0; }
.product-info__actions {
  display: flex; gap: 0.6rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
}
.product-info__secondary-actions {
  display: flex; gap: 0.5rem;
  flex-wrap: wrap;
}

/* Табы */
.product-tabs { padding-top: 1rem; }
.product-tabs__nav {
  display: flex; gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
  overflow-x: auto;
}
.product-tabs__nav button {
  padding: 0.85rem 1rem;
  color: var(--fg-dim);
  font-size: 0.92rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.18s, border-color 0.18s;
}
.product-tabs__nav button:hover { color: var(--fg); }
.product-tabs__nav button.is-active { color: var(--fg); border-bottom-color: var(--brand); }

.product-tabs__panel { padding: 0 0 2rem; }
.specs-table {
  width: 100%; border-collapse: collapse;
  margin: 0.5rem 0 1.75rem;
}
.specs-table th, .specs-table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.specs-table th { color: var(--fg-dim); font-weight: 400; width: 45%; }
.product-tabs__panel h3 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 1.75rem 0 0.5rem;
}

/* ---------- Подвал ---------- */
.site-footer {
  margin-top: 5rem;
  padding: 4rem 0 2rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-dim);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.footer-grid h4 {
  color: var(--fg);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin: 0.5rem 0; font-size: 0.88rem; }
.footer-grid a { color: var(--fg-dim); }
.footer-grid a:hover { color: var(--fg); }
.copy {
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.78rem;
  color: var(--fg-muted);
}

/* ---------- Партнёры ---------- */
.partners-page { padding-bottom: 5rem; }
.partners-filter {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
  margin: 1.25rem 0 2rem;
}
.partners-filter input,
.partners-filter select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.18s;
}
.partners-filter input:focus,
.partners-filter select:focus { border-color: var(--brand); }
.partners-filter input { flex: 1; min-width: 200px; }

.partners-map {
  height: 380px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-dim);
  overflow: hidden;
}
.partners-map--tall { height: 540px; }
.partners-map--empty { font-size: 0.9rem; text-align: center; padding: 1rem; }
.partners-map__hint { padding: 1rem 1.5rem; text-align: center; font-size: 0.9rem; }
/* Балуны Я.Карт рендерятся со своим white-bg, тёмная тема не должна их перекрашивать */
.partners-map [class*="balloon__content"] { color: #111; }

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.partner-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.55rem;
  font-size: 0.9rem;
  transition: border-color 0.18s, transform 0.18s;
}
.partner-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.partner-card h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.partner-card a { color: var(--fg-dim); }
.partner-card a:hover { color: var(--fg); }
.partner-card .brand-badge { align-self: flex-start; }
.partner-card__address { color: var(--fg); }
.partner-card__hours { font-size: 0.82rem; }
.partners-grid--service { margin-top: 2rem; }

/* ---------- Страница сервиса ---------- */
.service-hero {
  padding: 4rem 0 3rem;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 60% 50% at 90% 0%, hsl(353 97% 28% / 0.30), transparent 70%),
    var(--bg);
}
.service-hero .breadcrumbs { margin-bottom: 1.5rem; }
.service-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 960px) {
  .service-hero__grid { grid-template-columns: 1.4fr 1fr; gap: 3rem; }
}
.service-hero__copy h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  margin: 0.6rem 0 1rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.service-hero__copy .lead {
  color: var(--fg-dim);
  max-width: 600px;
  margin-bottom: 1.75rem;
  font-size: clamp(1rem, 1.2vw, 1.05rem);
}
.service-hero__stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}
.service-hero__stats li {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.service-hero__stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.service-hero__stat-label {
  color: var(--fg-dim);
  font-size: 0.82rem;
  line-height: 1.35;
}

.service-steps {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1.5rem;
}
@media (min-width: 768px) {
  .service-steps { grid-template-columns: repeat(3, 1fr); }
}
.service-step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.service-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--brand);
  color: white;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.85rem;
}
.service-step h3 {
  font-size: 1.1rem;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.service-step p { margin: 0; font-size: 0.92rem; line-height: 1.55; }
.service-step a { color: var(--fg); border-bottom: 1px solid var(--border); }
.service-step a:hover { border-color: var(--brand); }

.service-faq {
  display: grid;
  gap: 0.6rem;
  max-width: 860px;
  margin-top: 1.5rem;
}
.service-faq__item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 0;
  transition: border-color 0.18s;
}
.service-faq__item[open] { border-color: var(--brand); }
.service-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.4rem;
  font-weight: 600;
  font-size: 0.98rem;
  position: relative;
  padding-right: 2.4rem;
}
.service-faq__item summary::-webkit-details-marker { display: none; }
.service-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--fg-dim);
  font-weight: 400;
  transition: transform 0.2s, color 0.2s;
}
.service-faq__item[open] summary::after { content: "−"; color: var(--brand); transform: translateY(-50%) rotate(0); }
.service-faq__item p {
  margin: 0;
  padding: 0 1.4rem 1.2rem;
  color: var(--fg-dim);
  font-size: 0.92rem;
  line-height: 1.6;
}
.service-faq__item a { color: var(--fg); border-bottom: 1px solid var(--border); }
.service-faq__item a:hover { border-color: var(--brand); }

/* ---------- Формы заявок ---------- */
.lead-form {
  display: flex; flex-direction: column;
  gap: 0.85rem;
}
.lead-form h3 {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
  letter-spacing: -0.02em;
}
.lead-form__context { font-size: 0.82rem; color: var(--fg-muted); }
.form-row { display: flex; flex-direction: column; gap: 0.4rem; }
.form-row label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.form-row input,
.form-row select,
.form-row textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--fg);
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.18s;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus { border-color: var(--brand); }
.form-row textarea { resize: vertical; min-height: 90px; }

/* Чекбоксы (например, согласие на ПД) — лейбл справа от квадратика */
.form-row--check { gap: 0.5rem; }
.form-row--check label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--fg-dim);
  line-height: 1.45;
}
.form-row--check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: border-color 0.18s, background 0.18s;
}
.form-row--check input[type="checkbox"]:hover { border-color: var(--fg-dim); }
.form-row--check input[type="checkbox"]:checked {
  background: var(--brand);
  border-color: var(--brand);
}
.form-row--check input[type="checkbox"]:checked::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.form-row--check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.form-error { color: hsl(0 80% 65%); font-size: 0.78rem; }
.form-errors {
  background: hsl(0 80% 50% / 0.08);
  border: 1px solid hsl(0 80% 50% / 0.3);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  color: hsl(0 80% 75%);
  font-size: 0.85rem;
}

.lead-thanks {
  text-align: center;
  padding: 2.5rem 1rem 2rem;
}
.lead-thanks__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 9999px;
  background: linear-gradient(135deg, hsl(140 60% 45%), hsl(140 50% 35%));
  color: white;
  font-size: 1.75rem;
  margin-bottom: 1rem;
  box-shadow: 0 10px 24px -8px hsl(140 60% 40% / 0.4);
}

/* ---------- Модалка ---------- */
[x-cloak] { display: none !important; }
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.modal__backdrop {
  position: absolute; inset: 0;
  background: hsl(0 0% 0% / 0.72);
  backdrop-filter: blur(8px);
}
.modal__panel {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  max-width: 480px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  z-index: 1;
  box-shadow: 0 30px 60px -20px hsl(0 0% 0% / 0.6);
}
.modal__close {
  position: absolute;
  top: 0.85rem; right: 0.85rem;
  color: var(--fg-muted);
  font-size: 1.5rem;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  transition: background 0.15s, color 0.15s;
}
.modal__close:hover { color: var(--fg); background: var(--surface); }

/* ---------- Главный слайдер «Новинки» ----------
   1:1 с React NewProductSlider: товар справа 62%, тёмная панель слева,
   красное сияние за инструментом, нижняя панель с прогрессом и SKU. */
.hero-slider {
  position: relative;
  /* Под высоту окна, за вычетом шапки (значение проставляется из app.js).
     `100svh` — стабильная высота с учётом URL-бара на мобильных. */
  height: calc(100svh - var(--header-h, 72px));
  min-height: 540px;
  background: var(--bg-deep);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

/* Премиум gradient-mesh: 2 медленно дрейфующих красных «пятна» */
.hero-slider::before,
.hero-slider::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
.hero-slider::before {
  width: 540px; height: 540px;
  top: -120px; left: -180px;
  background: radial-gradient(circle, hsl(353 97% 35% / 0.4), transparent 70%);
  animation: hero-blob-1 24s ease-in-out infinite alternate;
}
.hero-slider::after {
  width: 720px; height: 720px;
  bottom: -260px; right: -240px;
  background: radial-gradient(circle, hsl(353 97% 40% / 0.3), transparent 70%);
  animation: hero-blob-2 32s ease-in-out infinite alternate;
}
@keyframes hero-blob-1 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(180px, 120px); }
}
@keyframes hero-blob-2 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-160px, -100px); }
}

/* Фон — фото товара справа + красное сияние */
.hero-slide__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-slide__product {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 62%;
  object-fit: cover;
  object-position: center center;
}
.hero-slide__glow {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 62%;
  background: radial-gradient(
    ellipse 50% 45% at 55% 75%,
    hsl(353 97% 28% / 0.55),
    transparent 70%
  );
  pointer-events: none;
}

/* Затемнения */
.hero-slider__left-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--bg-deep) 0%,
    var(--bg-deep) 38%,
    color-mix(in srgb, var(--bg-deep) 85%, transparent) 48%,
    color-mix(in srgb, var(--bg-deep) 30%, transparent) 60%,
    transparent 72%
  );
}
.hero-slider__top-vignette {
  position: absolute; left: 0; right: 0; top: 0;
  height: 128px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--bg-deep), transparent);
}
.hero-slider__bottom-vignette {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 160px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, var(--bg-deep), transparent);
}

/* Контент */
.hero-slider__content {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;            /* чтобы flex не раздувался выше родителя */
  display: flex;
  align-items: center;
  padding: 2rem 1.5rem 2.5rem;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 768px) { .hero-slider__content { padding: 2.5rem 2rem 3rem; } }

.hero-slide-content {
  width: 100%;
  max-width: 580px;
}
@media (min-width: 768px) { .hero-slide-content { max-width: 55%; } }
@media (min-width: 1024px) { .hero-slide-content { max-width: 50%; } }

/* «Анимация ступенек» — у каждого блока свой transition-delay через style */
.hero-slide-content__line,
.hero-slide-content__title-row,
.hero-slide-content__tagline,
.hero-slide-content__stats,
.hero-slide-content__cta {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.hero-slide-content__line.is-visible,
.hero-slide-content__title-row.is-visible,
.hero-slide-content__tagline.is-visible,
.hero-slide-content__stats.is-visible,
.hero-slide-content__cta.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Линейка + мини-метка */
.hero-slide-content__line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.4rem;
}
.hero-slide-content__hr {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--brand);
  flex-shrink: 0;
}
.hero-slide-content__line-name {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--brand);
}
.hero-slide-content__pill {
  background: var(--brand);
  color: white;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
}

/* Заголовок с красной палочкой */
.hero-slide-content__title-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.hero-slide-content__bar {
  display: block;
  width: 4px;
  border-radius: 9999px;
  background: var(--brand);
  flex-shrink: 0;
  align-self: stretch;
  min-height: 3rem;
}
.hero-slide-content__title-row h1 {
  font-size: clamp(2rem, 4.8vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--fg);
  margin: 0;
}

/* Тэглайн (немного отступ слева — выровнено с палочкой) */
.hero-slide-content__tagline {
  margin: 0 0 2rem 1.25rem;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-dim);
}

/* Stats */
.hero-slide-content__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin: 0 0 2.5rem 1.25rem;
}
.hero-stat { display: flex; flex-direction: column; gap: 0.2rem; }
.hero-stat__value-row { display: flex; align-items: baseline; gap: 0.3rem; }
.hero-stat__value {
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
}
.hero-stat__unit {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brand);
}
.hero-stat__label {
  font-size: 0.72rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* CTA */
.hero-slide-content__cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: 1.25rem;
  flex-wrap: wrap;
}

/* Нижняя панель */
.hero-slider__bottom {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1.5rem 1.25rem;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 768px) { .hero-slider__bottom { padding: 0 2rem 1.5rem; } }

.hero-slider__counter {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--fg-muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.hero-slider__counter-active {
  color: var(--fg);
  font-weight: 600;
}
.hero-slider__progress {
  flex: 1;
  height: 1px;
  max-width: 280px;
  background: hsl(0 0% 22%);
  position: relative;
  overflow: hidden;
}
.hero-slider__progress-bar {
  position: absolute;
  inset-block: 0;
  left: 0;
  background: var(--brand);
}
.hero-slider__dots {
  display: flex;
  gap: 0.5rem;
}
.hero-slider__dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: hsl(0 0% 35%);
  transition: all 0.3s var(--ease);
}
.hero-slider__dot:hover { opacity: 0.7; }
.hero-slider__dot.is-active {
  width: 20px;
  height: 6px;
  background: var(--brand);
}
.hero-slider__sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  color: hsl(0 0% 35%);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .hero-slider__sku { display: none; }
  .hero-slider__progress { max-width: 120px; }
}

/* ---------- Новости ---------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.5rem;
}
.news-card {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  color: var(--fg);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.news-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.news-card img {
  width: 100%; aspect-ratio: 16/9;
  object-fit: cover;
}
.news-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.news-card__date {
  font-size: 0.7rem;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--fg-muted);
  letter-spacing: 0.05em;
}
.news-card h3 { font-size: 1.05rem; line-height: 1.35; }
.news-detail { padding-bottom: 5rem; max-width: 840px; }
.news-detail__header { margin: 1rem 0 2.5rem; }
.news-detail__header h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-top: 0.5rem; }
.news-detail__image { width: 100%; border-radius: var(--radius-card); margin-bottom: 2rem; }

/* ---------- Контент-страницы ---------- */
.content-page { padding-bottom: 5rem; max-width: 820px; }
.content-page h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin: 0.5rem 0 1.5rem; }
.content-body { font-size: 1rem; line-height: 1.75; color: var(--fg-dim); }
.content-body h2 { color: var(--fg); font-size: 1.5rem; margin: 2.5rem 0 1rem; }
.content-body h3 { color: var(--fg); font-size: 1.2rem; margin: 1.75rem 0 0.6rem; }
.content-body p { margin: 1rem 0; }
.content-body ul, .content-body ol { padding-left: 1.25rem; margin: 1rem 0; }
.content-body a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.content-body img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1.75rem 0; }

/* ---------- Премиум-карусель «Новинки» ---------- */
.section--news {
  padding-bottom: 6rem;
}
.carousel {
  position: relative;
}
.carousel__track {
  display: flex;
  gap: 1.25rem;
  /* Вертикальные паддинги дают тени hover-карточки место расти.
     Сжимаются вместе с section, чтобы общий ритм страницы не ломался. */
  padding: 2.5rem 1.5rem 4rem;
  margin: -2rem 0 -3rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 1.5rem;
  scroll-behavior: smooth;
  cursor: grab;
  user-select: none;
}
.carousel__track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
@media (min-width: 768px) {
  .carousel__track {
    padding: 3rem max(2rem, calc((100vw - 1280px) / 2 + 2rem)) 5rem;
    gap: 1.5rem;
  }
}
.carousel__edge-left,
.carousel__edge-right {
  flex-shrink: 0;
  width: 1px;
}
.carousel__nav {
  display: none;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.carousel.has-nav .carousel__nav { display: flex; }
.carousel__btn {
  width: 44px; height: 44px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.carousel__btn:hover {
  border-color: var(--brand);
  color: var(--fg);
  background: hsl(353 97% 50% / 0.05);
}

/* ---------- Editorial XL-карточка для карусели «Новинки» (4:5) ---------- */
.pc-xl {
  position: relative;
  flex: 0 0 320px;
  scroll-snap-align: start;
  aspect-ratio: 4/5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--soft-tint);
  transition: transform 0.6s var(--ease), border-color 0.6s var(--ease),
              box-shadow 0.6s var(--ease);
}
@media (min-width: 640px) { .pc-xl { flex: 0 0 380px; } }
@media (min-width: 1024px) { .pc-xl { flex: 0 0 440px; } }
.pc-xl:hover {
  border-color: var(--border-strong);
  box-shadow:
    0 50px 80px -40px hsl(353 97% 50% / 0.45),
    0 0 100px -30px hsl(353 97% 50% / 0.2);
}

.pc-xl__media {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  color: var(--fg);
  overflow: hidden;
}

/* Хало — большое мягкое красное свечение позади продукта */
.pc-xl__halo {
  position: absolute;
  left: 50%; top: 58%;
  transform: translate(-50%, -50%);
  width: 90%; height: 70%;
  background: var(--premium-halo);
  filter: blur(40px);
  opacity: 0.7;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.pc-xl:hover .pc-xl__halo {
  opacity: 1;
  transform: translate(-50%, -54%) scale(1.05);
}

/* Тонкий внутренний обвод — premium-эффект */
.pc-xl__rim {
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-xl) - 1px);
  background: linear-gradient(180deg, var(--soft-tint) 0%, transparent 30%);
  pointer-events: none;
  z-index: 0;
}

.pc-xl__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 65%;
  object-fit: contain;
  padding: 2.5rem 2.5rem 0;
  filter: var(--card-media-shadow);
  transition: transform 0.7s var(--ease), filter 0.7s var(--ease);
  z-index: 1;
}
.pc-xl:hover .pc-xl__img {
  transform: scale(1.08) translateY(-8px);
  filter:
    drop-shadow(0 40px 60px hsl(0 0% 0% / 0.85))
    drop-shadow(0 0 40px hsl(353 97% 50% / 0.35));
}

/* Edge-dissolve поверх фото — как в карточках каталога. Накрывает только
   фото-зону (верхние 65%, там же живёт .pc-xl__img). */
.pc-xl__media::after {
  content: "";
  position: absolute;
  inset: 0 0 35% 0;
  z-index: 1;
  pointer-events: none;
  background: var(--card-media-dissolve);
}

/* Линейка — мини-тег в верхнем левом углу */
.pc-xl__line-tag {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 3;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--brand);
  padding: 0.3rem 0;
  border-top: 1px solid var(--brand);
  border-bottom: 1px solid var(--brand);
}

/* Номер 01 / 10 — в верхнем правом */
.pc-xl__index {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 3;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.pc-xl__index span { color: var(--fg-muted); font-weight: 400; }

/* Editorial caption — внизу карточки.
   Градиент строится из var(--bg-deep): в тёмной — чёрный шлейф под текстом,
   в светлой — белый, бесшовно сливается с фоном карточки. */
.pc-xl__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 2rem 1.75rem 1.75rem;
  background: linear-gradient(
    to top,
    var(--bg-deep) 0%,
    color-mix(in srgb, var(--bg-deep) 95%, transparent) 35%,
    color-mix(in srgb, var(--bg-deep) 50%, transparent) 75%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.pc-xl__name {
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.pc-xl__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.pc-xl__sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pc-xl__price {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* CTA — текстовая ссылка с стрелкой */
.pc-xl__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid hsl(0 0% 100% / 0.08);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
  transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}
.pc-xl:hover .pc-xl__cta { gap: 0.65rem; color: var(--brand); }
.pc-xl:hover .pc-xl__cta svg { transform: translateX(4px); }
.pc-xl__cta svg { transition: transform 0.3s var(--ease); }

/* ---------- Премиум-штрихи (data-tilt подложка) ---------- */
[data-tilt] { transition: transform 0.5s var(--ease); }

/* ---------- Reveal-анимации (см. app.js: IntersectionObserver) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-scale.in-view { opacity: 1; transform: scale(1); }

.stagger-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.stagger-item.in-view { opacity: 1; transform: translateY(0); }

/* ---------- Скрытие скроллбаров ---------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- Поиск ---------- */
.search-page { padding-bottom: 5rem; }
.search-header { margin: 1rem 0 2.5rem; }
.search-form { display: flex; gap: 0.6rem; margin: 0.75rem 0; }
.search-form input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 0.85rem 1.25rem;
  color: var(--fg);
  font-size: 0.95rem;
  outline: none;
}
.search-form input:focus { border-color: var(--brand); }

.seo-text { padding: 3rem 0 1rem; font-size: 0.9rem; line-height: 1.7; color: var(--fg-dim); }

/* ---------- «Где купить» — editorial statement block ---------- */
.wtb {
  position: relative;
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  padding: 7rem 0 6rem;
  isolation: isolate;
}
.wtb__map {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.6;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 80%);
}
.wtb__map svg { width: 100%; height: 100%; }
.wtb__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}
.wtb__head { max-width: 760px; }
.wtb__head h2 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 1.25rem 0 1.5rem;
}
.wtb__lead {
  color: var(--fg-dim);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  max-width: 580px;
  margin: 0 auto;
}
.wtb__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 2rem 3rem;
  align-items: end;
  padding: 1rem 0;
}
@media (max-width: 640px) {
  .wtb__stats { grid-template-columns: 1fr; gap: 1.5rem; }
}
.wtb__stat { text-align: center; }
.wtb__stat-value {
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.wtb__stat-label {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-top: 0.75rem;
}
.wtb__cta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.brand-fg { color: var(--brand); }

/* ---------- Сертификаты бренда ---------- */
.certificates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}
.certificate {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: var(--fg);
  transition: border-color 0.25s var(--ease), box-shadow 0.3s var(--ease);
}
.certificate:hover {
  border-color: hsl(353 97% 55% / 0.4);
  box-shadow: 0 20px 30px -20px hsl(353 97% 50% / 0.2);
}
.certificate__img {
  aspect-ratio: 3/4;
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.certificate__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.certificate:hover .certificate__img img { transform: scale(1.05); }
.certificate__title {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.certificate__desc { font-size: 0.78rem; }

/* ---------- Viewed-секция (анимация появления) ---------- */
.section--viewed {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* ============================================================
   Wishlist / Compare — клиентские страницы (данные из localStorage)
   ============================================================ */

.wishlist-hero,
.compare-hero {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid var(--border);
}
.wishlist-hero__grid,
.compare-hero__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2rem;
  margin-top: 1rem;
}
.wishlist-hero__copy h1,
.compare-hero__copy h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -0.02em;
  margin: 0.5rem 0 0.75rem;
}
.wishlist-hero__actions,
.compare-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-end;
}
.wishlist-hero__count,
.compare-hero__count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--soft-tint-2);
}
.wishlist-hero__count-value,
.compare-hero__count-value {
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.wishlist-hero__count-label,
.compare-hero__count-label {
  color: var(--fg-muted);
  font-size: 0.85rem;
}
.compare-hero__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--fg-dim);
  background: var(--soft-tint-2);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.compare-hero__toggle:hover {
  color: var(--fg);
  border-color: hsl(353 97% 45% / 0.4);
}
.compare-hero__toggle input { accent-color: var(--brand); }

@media (max-width: 720px) {
  .wishlist-hero__grid,
  .compare-hero__grid {
    grid-template-columns: 1fr;
  }
  .wishlist-hero__actions,
  .compare-hero__actions { align-items: flex-start; }
}

.wishlist-page,
.compare-page { padding: 2rem 0 4rem; }

.empty-state--loading {
  padding: 2.5rem 1rem;
  text-align: center;
}
.empty-state--wishlist,
.empty-state--compare {
  padding: 3.5rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-card);
  background: hsl(0 0% 100% / 0.02);
}
.empty-state--wishlist h2,
.empty-state--compare h2 {
  font-size: 1.5rem;
  margin: 0 0 0.4rem;
}
.empty-state--wishlist p,
.empty-state--compare p { max-width: 520px; margin: 0 auto 1.5rem; }

/* ---------- Compare-таблица ---------- */
.compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--tile-bg);
  -webkit-overflow-scrolling: touch;
}
.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 0.9rem;
}
.compare-table th,
.compare-table td {
  padding: 0.85rem 1rem;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.compare-table__corner {
  width: 220px;
  min-width: 200px;
  position: sticky;
  left: 0;
  background: var(--chrome-bg);
  z-index: 2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.compare-table__col {
  width: 220px;
  min-width: 220px;
  background: hsl(0 0% 100% / 0.015);
  vertical-align: top;
}
.compare-table__group-row { background: var(--soft-tint-2); }
.compare-table__group {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  padding-top: 1.2rem;
  padding-bottom: 0.7rem;
  position: sticky;
  left: 0;
  background: var(--chrome-bg-strong);
}
.compare-table__label {
  position: sticky;
  left: 0;
  z-index: 1;
  font-weight: 500;
  color: var(--fg-dim);
  background: var(--chrome-bg);
  border-right: 1px solid var(--border);
}
.compare-table__cell {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  word-wrap: break-word;
}
.compare-table__cell.is-empty { color: var(--fg-muted); }
.compare-table__row.is-diff .compare-table__cell {
  background: var(--diff-row-bg);
}
.compare-table__row.is-diff .compare-table__label {
  color: var(--fg);
}

/* Шапка с фото / ценой / удалить */
.compare-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: flex-start;
}
.compare-card__remove {
  position: absolute;
  top: -4px;
  right: -4px;
  /* Поверх ссылки-фото (.compare-card__media позиционирована и идёт позже в DOM) */
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.compare-card__remove:hover {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}
.compare-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--soft-tint);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.compare-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.compare-card__placeholder {
  width: 100%; height: 100%;
  background: repeating-linear-gradient(45deg, hsl(0 0% 100% / 0.02) 0 8px, transparent 8px 16px);
}
.compare-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
}
.compare-card__category {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.compare-card__title {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.compare-card__title:hover { color: var(--brand); }
.compare-card__sku {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
/* Названия/коды без пробелов не должны вылезать за колонку (table-layout: fixed,
   220px) и накладываться на соседние — ограничиваем шириной и переносим. */
.compare-card,
.compare-card__title,
.compare-card__category,
.compare-card__sku {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Цена отдельной строкой таблицы */
.compare-table__row--price .compare-table__label--price {
  font-weight: 700;
  color: var(--fg);
  font-size: 0.95rem;
}
.compare-table__cell--price {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  position: relative;
}
.compare-table__cell--price.is-best {
  color: hsl(142 70% 65%);
}
.compare-best-badge {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 9999px;
  background: hsl(142 70% 40% / 0.18);
  color: hsl(142 70% 70%);
  border: 1px solid hsl(142 70% 50% / 0.4);
  vertical-align: middle;
  font-variant-numeric: normal;
}

@media (max-width: 720px) {
  .compare-table__corner,
  .compare-table__col { width: 180px; min-width: 180px; }
}

/* ---------- Переключатель темы: показываем иконку противоположной темы ---------- */
.theme-toggle { position: relative; }
.theme-toggle__icon { transition: opacity 0.2s var(--ease), transform 0.3s var(--ease); }
.theme-toggle__icon--sun  { display: none; }
.theme-toggle__icon--moon { display: block; }
html.light .theme-toggle__icon--sun  { display: block; }
html.light .theme-toggle__icon--moon { display: none; }

/* ---------- prefers-reduced-motion: уважаем настройки системы ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-scale, .stagger-item {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-slider::before,
  .hero-slider::after { animation: none !important; }
}