/* Nocturne — главная страница.
   Все цвета берутся из переменных палитры (tokens.css + :root из header_nc.tpl).
   Ни одного цветового литерала. Базовые компоненты (.nc-btn/.nc-card/.nc-plate/
   .nc-tag/.nc-table/.nc-acc/…) живут в tokens.css — здесь только раскладка секций.
   Брейкпоинты: 1279 (laptop), 1023 (tablet), 767 (mobile) — в конце файла. */

/* Вертикальный ритм: между секциями 64px, а не 128 — поэтому у идущих
   подряд секций верхний отступ снимается. */
.nc-prodsec { padding-top: 0; }
.nc-faqsec  { padding-bottom: 64px; }
.nc-seosec  { padding-bottom: 0; }

/* ═══ 1. Первый экран ═══════════════════════════════════════════ */

.nc-hero {
  position: relative;
  background: radial-gradient(120% 90% at 78% 40%, var(--color-neutral-900), var(--color-bg) 70%);
}
.nc-hero__in {
  display: grid;
  grid-template-columns: 620px 1fr;
  grid-template-areas:
    "head card"
    "cta  card"
    "facts card";
  align-content: center;
  gap: var(--space-6) var(--space-8);
  padding-top: 72px;
  padding-bottom: 72px;
}
/* min-width:0 обязателен: без него фото товара 345px в колонке 1fr
   раздвигает сетку шире вьюпорта и на телефоне уезжает вся страница. */
.nc-hero__in > * { min-width: 0; }
.nc-hero__head  { grid-area: head; }
.nc-hero__ctas  { grid-area: cta; }
.nc-hero__facts { grid-area: facts; }
.nc-hero__card  { grid-area: card; align-self: center; }

.nc-hero__mark { margin-bottom: var(--space-4); }
.nc-hero__kick { margin-bottom: var(--space-4); }
.nc-hero__title {
  font-size: 54px;
  line-height: 1.05;
  margin: 0 0 var(--space-4);
  max-width: 16ch;
}
.nc-hero__title span { color: var(--color-accent); }
.nc-hero__sub {
  font-size: 17px;
  color: var(--color-neutral-300);
  max-width: 46ch;
  margin: 0 0 var(--space-4);
}

.nc-hero__usps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nc-hero__usp {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-neutral-400);
}
.nc-hero__usp svg { flex: none; color: var(--color-accent); }

.nc-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.nc-hero__facts { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.nc-fact__val { font-size: 24px; font-weight: 500; line-height: 1.15; }
.nc-fact__cap { font-size: 12px; color: var(--color-neutral-500); }
a.nc-fact__cap { color: var(--color-neutral-400); text-decoration: none; }
a.nc-fact__cap:hover { color: var(--color-accent-200); }

/* Карточка товара в первом экране.
   При наведении меняется ТОЛЬКО плашка под фото: никаких drop-shadow
   и transform на самом изображении — они давали артефакты. */
.nc-hero__card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.nc-hero__plate { display: block; transition: background-color .15s ease; }
.nc-hero__link { text-decoration: none; color: inherit; display: block; }
.nc-hero__link:hover .nc-hero__plate { background: var(--color-neutral-100); }
.nc-hero__cardname {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: 17px;
  font-weight: 500;
}
.nc-hero__cardname .nc-tag { margin-left: auto; }
.nc-hero__cardmeta { font-size: 13px; color: var(--color-neutral-400); }

/* ═══ 2. Полоса доверия (на мобильной — полоса фактов 2×2) ══════ */

.nc-trust__in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.nc-trust__mark { margin-bottom: var(--space-3); }
.nc-trust__title { font-size: 15px; font-weight: 500; }
.nc-trust__text { font-size: 13px; color: var(--color-neutral-400); }

/* ═══ 3. Категории (модуль banner_main_page) ════════════════════ */

.nc-catgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.nc-catcard {
  padding: 0;
  gap: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.nc-catcard:hover { background: var(--color-neutral-900); }
.nc-catcard__media { display: block; }
.nc-catcard__media img {
  width: 100%;
  height: 170px;
  object-fit: cover;
}
.nc-catcard__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.nc-catcard__icon { flex: none; color: var(--color-accent); }
.nc-catcard__name { font-size: 18px; font-weight: 500; }
.nc-catcard__count {
  margin-left: auto;
  font-size: 13px;
  color: var(--color-neutral-500);
}
.nc-catcard__row .nc-tag { margin-left: auto; }

/* ═══ 4. Товары в наличии ═══════════════════════════════════════ */

.nc-prods {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.nc-prod__link { text-decoration: none; color: inherit; }
.nc-prod__link:hover { color: var(--color-accent-200); }
/* при наведении меняется только плашка под фото — без теней и transform */
.nc-prod__link .nc-plate { transition: background-color .15s ease; }
.nc-prod__link:hover .nc-plate { background: var(--color-neutral-100); }
.nc-prod__price { font-size: 22px; font-weight: 500; }
.nc-prod__old {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-neutral-500);
  text-decoration: line-through;
  margin-left: var(--space-2);
}
.nc-prod .nc-btn--block { margin-top: auto; }

/* ═══ 5. Почему нам можно доверять — единственная заливка ═══════ */

.nc-why {
  background: var(--color-section);
  background-image: radial-gradient(80% 120% at 20% 0%, var(--color-section-glow), transparent);
}
.nc-why__in { padding-top: 56px; padding-bottom: 56px; }
.nc-why__kick { color: var(--color-accent-200); margin-bottom: var(--space-2); }
.nc-why__sub {
  font-size: 14px;
  color: var(--color-accent-200);
  opacity: .8;
  margin: 0 0 var(--space-6);
}
.nc-why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}
.nc-why__num { font-size: 40px; font-weight: 500; line-height: 1; }
.nc-why__title { font-size: 15px; margin: var(--space-2) 0; }
.nc-why__text { font-size: 13px; color: var(--color-accent-200); opacity: .8; }

/* ═══ 6. Сравнение моделей ══════════════════════════════════════ */

.nc-cmp__sub { font-size: 14px; color: var(--color-neutral-400); margin: -8px 0 var(--space-6); }
.nc-cmp__scroll { overflow-x: auto; }
.nc-cmp__table th:first-child { width: 24%; }
.nc-cmp__model { display: block; font-weight: 500; }
.nc-cmp__row--rec .nc-cmp__model { margin-top: 4px; }
.nc-cmp__sku { display: block; font-size: 12px; color: var(--color-neutral-500); }
.nc-cmp__for { color: var(--color-neutral-300); }
.nc-cmp__price { font-weight: 500; white-space: nowrap; }
.nc-cmp__act { text-align: right; }
.nc-cmp__row--rec { background: var(--color-accent-900); }
.nc-cmp__row--rec .nc-cmp__for { color: var(--color-neutral-200); }
.nc-cmp__thumb { display: none; }          /* миниатюра нужна только карточкам на телефоне */
.nc-cmp__c::before { display: none; }      /* подписи ячеек — только на телефоне */

/* ═══ 7. Отзывы ═════════════════════════════════════════════════ */

.nc-rev__in {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-8);
  align-items: start;
}
.nc-rev__score { display: flex; align-items: baseline; gap: var(--space-3); }
.nc-rev__avg { font-size: 44px; font-weight: 500; line-height: 1; }
.nc-rev__count { font-size: 13px; color: var(--color-neutral-400); }
.nc-rev__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.nc-rev__links .nc-btn { justify-content: flex-start; }
.nc-rev__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
/* длинные отзывы не должны растягивать ряд карточек */
.nc-rev__grid .nc-card__body {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nc-rev__empty { grid-column: 1 / -1; }
.nc-rev__empty .nc-card__body { -webkit-line-clamp: none; }
.nc-rev__empty .nc-btn { align-self: flex-start; }
.nc-rev__prod { color: var(--color-neutral-400); text-decoration: none; }
.nc-rev__prod:hover { color: var(--color-accent-200); }

/* ═══ 8. Частые вопросы ═════════════════════════════════════════ */

.nc-faq__in {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-8);
  align-items: start;
}
.nc-faq__h2 { font-size: 30px; margin: 0 0 var(--space-3); }
.nc-faq__note { font-size: 14px; color: var(--color-neutral-400); margin: 0; }
.nc-faq__item { padding: var(--space-4) 0; }
.nc-faq__q {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 500;
}
.nc-faq__q::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--color-accent);
  border-bottom: 1.5px solid var(--color-accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.nc-faq__item[open] > .nc-faq__q::after { transform: rotate(-135deg) translate(-2px, -2px); }
.nc-faq__a {
  margin: var(--space-3) 0 0;
  color: var(--color-neutral-300);
  max-width: 70ch;
}
.nc-faq__a > :first-child { margin-top: 0; }
.nc-faq__a > :last-child { margin-bottom: 0; }

/* ═══ 9. SEO-текст ══════════════════════════════════════════════ */

.nc-seo {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-8);
  padding-bottom: 48px;
}
.nc-seo__sum { display: flex; align-items: center; gap: var(--space-2); }
.nc-seo__body {
  font-size: 13px;
  color: var(--color-neutral-500);
  columns: 2;
  column-gap: var(--space-8);
}
.nc-seo__body h2, .nc-seo__body h3 { font-size: 15px; margin: 0 0 var(--space-2); }
.nc-seo__body p { margin: 0 0 var(--space-3); }

/* ═══ laptop ≤1279 ══════════════════════════════════════════════ */

@media (max-width: 1279px) {
  .nc-hero__in { grid-template-columns: 1fr 300px; padding-top: 56px; padding-bottom: 56px; }
  .nc-hero__title { font-size: 42px; }
  .nc-hero__card { padding: var(--space-4); }
  .nc-prods { grid-template-columns: repeat(3, 1fr); }
  .nc-cmp__table { font-size: 13px; }
  .nc-why__num { font-size: 34px; }
}

/* ═══ tablet ≤1023 ══════════════════════════════════════════════ */

@media (max-width: 1023px) {
  .nc-hero__in {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "card" "cta" "facts";
    gap: var(--space-6);
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .nc-hero__title { font-size: 38px; max-width: none; }
  .nc-hero__card { max-width: 420px; }
  .nc-hero__facts { gap: var(--space-6) var(--space-8); }

  .nc-trust__in { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .nc-catgrid { grid-template-columns: repeat(2, 1fr); }
  .nc-prods { grid-template-columns: repeat(2, 1fr); }
  .nc-why__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .nc-why__in { padding-top: 40px; padding-bottom: 40px; }

  /* колонка «Для чего» на планшете не помещается */
  .nc-cmp__c--for, .nc-cmp__h--for { display: none; }

  .nc-rev__in, .nc-faq__in, .nc-seo { grid-template-columns: 1fr; gap: var(--space-6); }
  .nc-rev__grid { grid-template-columns: repeat(2, 1fr); }
  .nc-rev__links { flex-direction: row; flex-wrap: wrap; }
  .nc-faq__h2 { font-size: 26px; }
  .nc-seo__body { columns: 2; }
}

/* ═══ mobile ≤767 — свой порядок блоков ═════════════════════════ */

@media (max-width: 767px) {
  /* Порядок: первый экран → факты 2×2 → категории → товары →
     сравнение → почему доверять → отзывы → FAQ → SEO. */
  #nc-main { display: flex; flex-direction: column; }
  #nc-main > * { order: 20; min-width: 0; }
  #nc-main > .nc-rule { display: none; }
  #nc-main > .nc-hero    { order: 1; }
  #nc-main > .nc-trust   { order: 2; }
  #nc-main > .nc-catsec  { order: 3; }
  #nc-main > .nc-prodsec { order: 4; }
  #nc-main > .nc-cmpsec  { order: 5; }
  #nc-main > .nc-why     { order: 6; }
  #nc-main > .nc-revsec  { order: 7; }
  #nc-main > .nc-faqsec  { order: 8; }
  #nc-main > .nc-seosec  { order: 9; }

  /* первый экран */
  .nc-hero__in {
    grid-template-areas: "head" "card" "cta";
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
    gap: var(--space-4);
  }
  .nc-hero__title { font-size: 30px; line-height: 1.1; }
  .nc-hero__sub { font-size: 15px; max-width: none; }
  .nc-hero__usps { gap: var(--space-2) var(--space-4); }
  .nc-hero__card { padding: var(--space-4); max-width: none; }
  .nc-hero__cardname { font-size: 15px; margin-top: var(--space-3); }
  .nc-hero__cardmeta { font-size: 12px; }
  .nc-hero__ctas { flex-direction: column; gap: var(--space-2); }
  .nc-hero__ctas .nc-btn { width: 100%; min-height: 48px; font-size: 16px; }
  /* числа первого экрана дублируют полосу фактов — на телефоне не выводим */
  .nc-hero__facts { display: none; }

  /* полоса фактов 2×2 на подложке */
  .nc-trust { background: var(--color-surface); }
  .nc-trust__in {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
  .nc-trust__mark { display: none; }
  .nc-trust__title { font-size: 18px; }
  .nc-trust__text { font-size: 12px; }

  /* категории — списком, строка 72px */
  .nc-catgrid { grid-template-columns: 1fr; gap: var(--space-3); }
  .nc-catcard {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    min-height: 72px;
  }
  .nc-catcard__media {
    width: 72px;
    height: 56px;
    flex: none;
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .nc-catcard__media img { width: 100%; height: 100%; }
  .nc-catcard__row { padding: 0; flex: 1; gap: var(--space-2); }
  .nc-catcard__name { font-size: 16px; }

  /* товары — горизонтальный скролл со snap */
  .nc-prods {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .nc-prods::-webkit-scrollbar { display: none; }
  .nc-prods > * { flex: 0 0 240px; width: 240px; scroll-snap-align: start; }
  .nc-prod__price { font-size: 20px; }

  /* почему доверять */
  .nc-why__grid { gap: var(--space-6); }
  .nc-why__num { font-size: 28px; }
  .nc-why__title { font-size: 13px; margin: var(--space-1) 0 0; }
  .nc-why__text { display: none; }

  /* сравнение — таблица превращается в вертикальные карточки */
  .nc-cmp__scroll { overflow: visible; }
  .nc-cmp__table, .nc-cmp__table tbody { display: block; width: 100%; }
  .nc-cmp__table thead { display: none; }
  .nc-cmp__table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2) var(--space-3);
    align-items: center;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-4);
  }
  .nc-cmp__table tbody tr.nc-cmp__row--rec { box-shadow: var(--shadow-md); }
  .nc-cmp__table td { display: block; padding: 0; }
  .nc-cmp__c--model {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .nc-cmp__thumb {
    display: block;
    width: 84px;
    flex: none;
    background: var(--color-neutral-200);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
  }
  .nc-cmp__thumb img { width: 100%; height: auto; }
  .nc-cmp__c--for {
    display: block;
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--color-neutral-400);
  }
  .nc-cmp__c--spec::before {
    display: block;
    content: attr(data-label);
    font-size: 11px;
    color: var(--color-neutral-500);
  }
  .nc-cmp__c--spec { font-weight: 500; }
  .nc-cmp__c--price { grid-column: span 1; font-size: 20px; align-self: center; }
  .nc-cmp__act { grid-column: 2 / -1; text-align: right; }
  .nc-cmp__act .nc-btn { min-height: 44px; }

  /* отзывы */
  .nc-rev__grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .nc-rev__avg { font-size: 36px; }
  .nc-rev__links { flex-direction: column; }
  .nc-rev__links .nc-btn { width: 100%; }

  /* FAQ — цели нажатия ≥44px */
  .nc-faq__item { padding: var(--space-3) 0; }
  .nc-faq__q { min-height: 44px; font-size: 15px; }
  .nc-faq__a { font-size: 14px; }
  .nc-faq__h2 { font-size: 24px; }

  /* SEO-текст свёрнут */
  .nc-seo { padding-bottom: var(--space-6); }
  .nc-seo__sum { min-height: 44px; color: var(--color-neutral-400); }
  .nc-seo__sum::after {
    content: "";
    margin-left: auto;
    width: 9px;
    height: 9px;
    border-right: 1.5px solid var(--color-accent);
    border-bottom: 1.5px solid var(--color-accent);
    transform: rotate(45deg) translate(-2px, -2px);
  }
  .nc-seo[open] > .nc-seo__sum::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .nc-seo__body { columns: 1; font-size: 12px; }
}