/* Nocturne: обвязка страницы — верхняя полоса, шапка, категории,
   мобильная шторка, подписка, подвал. Адаптив живёт рядом со своей
   секцией, а не в общем mobile.css. */

.nc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 16px; background: var(--color-surface); color: var(--color-text);
}
.nc-skip:focus { left: 0; }

/* ── верхняя полоса ─────────────────────────────────────────────── */

.nc-topbar { font-size: 12px; color: var(--color-neutral-400); }
.nc-topbar__in {
  display: flex; align-items: center; gap: var(--space-6);
  height: 36px; overflow: hidden; white-space: nowrap;
}
.nc-topbar__push { margin-left: auto; }
.nc-topbar__phone { color: var(--color-text); text-decoration: none; }
.nc-topbar__phone:hover { color: var(--color-accent-200); }

/* ── шапка ──────────────────────────────────────────────────────── */

.nc-header__in {
  display: flex; align-items: center; gap: var(--space-8); height: 72px;
}
.nc-header__burger { display: none; }
.nc-header__searchbtn { display: none; }

.nc-logo {
  width: 200px; flex: none; text-decoration: none; color: inherit;
  display: block;
}
.nc-logo__img { max-width: 200px; max-height: 48px; width: auto; height: auto; }
/* Логотипы парка нарисованы под белую шапку. Если светлой версии
   (image/catalog/logo-nc.svg) у магазина нет — кладём исходный файл на
   светлую плашку: инверсия и фильтры испортили бы цветные знаки. */
.nc-logo__img--plate {
  background: var(--color-neutral-100);
  padding: 5px 9px;
  border-radius: var(--radius-sm);
}
.nc-logo__name {
  display: block; font-size: 20px; font-weight: 600; letter-spacing: -.01em;
  font-family: var(--font-heading);
}
.nc-logo__sub {
  display: block; font-size: 11px; color: var(--color-neutral-500);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nc-nav { display: flex; gap: var(--space-6); font-size: 14px; }
.nc-nav__link {
  position: relative; text-decoration: none; color: var(--color-neutral-300);
  padding-bottom: 2px; white-space: nowrap;
}
.nc-nav__link:hover { color: var(--color-accent-200); }
.nc-nav__link--on { color: var(--color-accent-300); }
.nc-nav__link--on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -8px;
  height: 2px; background: var(--color-accent);
}

.nc-header__tools {
  display: flex; align-items: center; gap: var(--space-3); margin-left: auto;
}
.nc-search { margin: 0; }
.nc-search__input { width: 240px; }

.nc-cartbtn { position: relative; }
.nc-cartbtn__qty {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px;
  background: var(--color-accent); color: var(--color-bg);
  font-size: 11px; line-height: 18px; text-align: center; font-weight: 600;
}

/* ── полоса категорий ───────────────────────────────────────────── */

.nc-cats__in {
  display: flex; gap: var(--space-2); padding-bottom: var(--space-4);
  font-size: 13px; overflow-x: auto; scrollbar-width: none;
}
.nc-cats__in::-webkit-scrollbar { display: none; }
.nc-chip {
  text-decoration: none; padding: 4px 12px; border-radius: var(--radius-sm);
  color: var(--color-neutral-400); white-space: nowrap;
}
.nc-chip:hover { color: var(--color-accent-200); }
/* Раньше активная категория ничем не отличалась — было непонятно, где стоишь. */
.nc-chip--on { background: var(--color-accent-900); color: var(--color-accent-200); }
/* На телефоне строка категорий — основная навигация, а 28px в высоту это
   меньше цели нажатия: соседние ссылки задеваются пальцем. */
@media (max-width: 767px) {
  .nc-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 12px; }
}

/* ── мобильная шторка ───────────────────────────────────────────── */

.nc-drawer { position: fixed; inset: 0; z-index: 60; }
.nc-drawer[hidden] { display: none; }
.nc-drawer__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.nc-drawer__panel {
  position: absolute; inset: 0 auto 0 0; width: min(320px, 86vw);
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4); overflow-y: auto;
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.nc-drawer__head { display: flex; align-items: center; gap: var(--space-3); }
.nc-drawer__title { font-family: var(--font-heading); font-size: 17px; margin-right: auto; }
.nc-drawer__group { display: flex; flex-direction: column; }
.nc-drawer__group--sub { border-top: 1px solid var(--color-divider); padding-top: var(--space-3); }
.nc-drawer__link {
  padding: 12px 4px; min-height: 44px; display: flex; align-items: center;
  text-decoration: none; color: var(--color-text); font-size: 16px;
}
.nc-drawer__link--sub { font-size: 14px; color: var(--color-neutral-300); }
.nc-drawer__foot {
  margin-top: auto; padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  display: flex; flex-direction: column; gap: var(--space-1); font-size: 13px;
}
.nc-drawer__phone { color: var(--color-text); text-decoration: none; font-size: 17px; }

/* ── тост (корзина, сравнение) ──────────────────────────────────── */

.nc-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 80;
  transform: translate(-50%, 16px);
  padding: 10px 18px; border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-md); font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
.nc-toast--on { opacity: 1; transform: translate(-50%, 0); }
.nc-toast--bad { box-shadow: 0 0 0 1px var(--color-accent), 0 6px 18px rgba(0, 0, 0, .55); }

/* ── подписка ───────────────────────────────────────────────────── */

.nc-subscribe { background: var(--color-surface); }
.nc-subscribe__in {
  display: flex; align-items: center; gap: var(--space-8);
  padding-top: var(--space-8); padding-bottom: var(--space-8);
}
.nc-subscribe__title { font-family: var(--font-heading); font-size: 22px; margin-bottom: 2px; }
.nc-subscribe__form { display: flex; gap: var(--space-3); margin-left: auto; min-width: 380px; }
.nc-subscribe__form .nc-input { min-width: 240px; }

/* ── подвал ─────────────────────────────────────────────────────── */

.nc-footer { padding-top: 48px; font-size: 14px; }
.nc-footer__cols {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
  gap: var(--space-8); padding-bottom: 48px;
}
.nc-footer__col { display: flex; flex-direction: column; gap: var(--space-2); }
.nc-footer__brand { font-family: var(--font-heading); font-size: 18px; }
.nc-footer__logo { max-width: 228px; max-height: 40px; width: auto; height: auto; margin-bottom: var(--space-2); }
.nc-footer__desc { font-size: 13px; color: var(--color-neutral-400); margin: 0; }
.nc-footer__req {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px; color: var(--color-neutral-500); margin-top: var(--space-2);
}
.nc-footer__h {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-neutral-500); margin: 0 0 var(--space-2); font-weight: 400;
}
.nc-footer__link { color: var(--color-neutral-300); text-decoration: none; font-size: 14px; }
.nc-footer__link:hover { color: var(--color-accent-200); }
/* На телефоне подвал — основной способ дойти до служебных страниц, а строки
   в 22px стоят слишком тесно, чтобы попадать пальцем. */
@media (max-width: 767px) {
  .nc-footer__link { display: flex; align-items: center; min-height: 40px; }
  .nc-footer__col { gap: 0; }
}
.nc-footer__phone {
  color: var(--color-text); text-decoration: none;
  font-size: 17px; font-family: var(--font-heading);
}
.nc-footer__note { font-size: 12px; color: var(--color-neutral-500); }
.nc-footer__bottom {
  display: flex; gap: var(--space-6); padding: var(--space-6) var(--gutter);
  font-size: 12px; color: var(--color-neutral-500);
}
.nc-footer__disclaimer { margin-left: auto; }

/* ══ планшет ════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .nc-nav { display: none; }
  .nc-header__burger { display: inline-flex; }
  .nc-search__input { width: 180px; }
  .nc-footer__cols { grid-template-columns: 1fr 1fr 1fr; }
  .nc-seotext { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ══ мобильная ══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .nc-topbar__in { gap: var(--space-4); font-size: 11px; }
  /* На телефоне в полосе остаётся только суть: статус и телефон. */
  .nc-topbar__item { display: none; }
  .nc-topbar__phone { margin-left: auto; }

  .nc-header__in { height: 60px; gap: var(--space-3); }
  .nc-logo { width: auto; flex: 1; min-width: 0; }
  .nc-logo__img { max-width: 150px; max-height: 36px; }
  .nc-header__tools { gap: var(--space-2); }
  .nc-header__searchbtn { display: inline-flex; }

  /* Поиск выезжает отдельной строкой под шапкой, чтобы не сжимать логотип. */
  .nc-search {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
    padding: var(--space-3) var(--gutter);
    background: var(--color-surface); display: none;
  }
  .nc-header { position: relative; }
  body.nc-search-open .nc-search { display: block; }
  .nc-search__input { width: 100%; }

  .nc-subscribe__in { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .nc-subscribe__form { margin-left: 0; min-width: 0; flex-direction: column; }
  .nc-subscribe__form .nc-input { min-width: 0; }

  .nc-footer { padding-top: 32px; }
  .nc-footer__cols { grid-template-columns: 1fr; gap: var(--space-6); padding-bottom: 32px; }
  .nc-footer__bottom { flex-direction: column; gap: var(--space-2); }
  .nc-footer__disclaimer { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════
   Общее для страниц каталога: крошки, карточка товара, пагинация,
   SEO-текст. Лежит здесь, а не в category.css, потому что теми же
   блоками пользуется карточка товара (похожие модели, отзывы).
   ══════════════════════════════════════════════════════════════ */

/* ── крошки ─────────────────────────────────────────────────────── */

.nc-crumbs {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  padding-top: var(--space-4); font-size: 12px; color: var(--color-neutral-500);
}
.nc-crumbs a { color: inherit; text-decoration: none; }
.nc-crumbs a:hover { color: var(--color-accent-200); }
.nc-crumbs__cur { color: var(--color-text); }

.nc-p {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid transparent;
}
/* Меняется только подложка: ни поворота фото, ни пересчёта тени —
   именно это раньше давало артефакты по контуру снимка. */
.nc-p:hover { box-shadow: var(--shadow-md); }
/* Обёртка микроразметки не должна ломать раскладку карточки */
.nc-p__item { display: contents; }
.nc-p__photo { position: relative; }
.nc-p__photo img { width: 100%; height: auto; }
/* Без рельса фильтров колонка шире, и снимок раздувается на пол-экрана */
.nc-p__photo img { max-height: 300px; object-fit: contain; }
/* Метки внизу слева, а не сверху: у части снимков в углах впечатаны
   фабричные плашки («17 инструментов», «размер 101 мм») — наши налезали
   прямо на них. Внизу свободно, и это совпадает с галереей карточки. */
.nc-p__badges {
  position: absolute; bottom: 8px; left: 8px;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px;
}
.nc-p__mid { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nc-p__stock {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--color-accent-300);
}
.nc-p__stock::before {
  content: ""; width: 6px; height: 6px; border-radius: 3px;
  background: var(--color-accent); flex: none;
}
.nc-p__title {
  font-family: var(--font-heading); font-size: 16px; line-height: 1.25;
  color: var(--color-text); text-decoration: none;
}
.nc-p__title:hover { color: var(--color-accent-200); }
.nc-p__meta { font-size: 11px; color: var(--color-neutral-500); }
.nc-p__desc { display: none; margin: 0; font-size: 13px; color: var(--color-neutral-400); max-width: 64ch; }
.nc-p__buy { display: flex; flex-direction: column; gap: var(--space-2); }
.nc-p__price { display: flex; align-items: baseline; gap: var(--space-2); }
.nc-p__price b { font-size: 21px; font-weight: 500; font-family: var(--font-heading); }
.nc-p__price s { font-size: 13px; color: var(--color-neutral-500); }
.nc-p__compare {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--color-neutral-500); cursor: pointer;
  background: none; border: 0; padding: 0;
}
.nc-p__compare:hover { color: var(--color-accent-200); }
.nc-p__compare--on { color: var(--color-accent-300); }

/* Под заказ: карточка теряет поверхность, фото гаснет, действие другое */
.nc-p--out { background: transparent; border-color: var(--color-divider); }
.nc-p--out .nc-p__photo { background: var(--color-neutral-900); }
.nc-p--out .nc-p__photo img { opacity: .45; }
.nc-p--out .nc-p__stock { color: var(--color-neutral-500); }
.nc-p--out .nc-p__stock::before { background: transparent; border: 1px solid var(--color-neutral-500); }
.nc-p--out .nc-p__price b { color: var(--color-neutral-400); }

.nc-pagi { margin-top: var(--space-6); }
.nc-pagi .pagination {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0; padding: 0; list-style: none; font-size: 14px;
}
.nc-pagi .pagination li a,
.nc-pagi .pagination li span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--radius-md);
  border: 1px solid var(--color-divider); color: var(--color-neutral-300);
  text-decoration: none;
}
.nc-pagi .pagination li a:hover { border-color: var(--color-accent); color: var(--color-accent-200); }
.nc-pagi .pagination li.active span { border-color: var(--color-accent); color: var(--color-accent); }
.nc-pagi__results { margin-top: var(--space-3); font-size: 12px; color: var(--color-neutral-500); }

/* ── чипы разделов (каталог, поиск, 404) ──────────────────────────────────────────── */

.nc-subcats {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  padding-bottom: var(--space-6); font-size: 13px;
}
.nc-subcats__item {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  color: var(--color-neutral-300); text-decoration: none;
}
.nc-subcats__item:hover { border-color: var(--color-accent); color: var(--color-accent-200); }
.nc-subcats__count { color: var(--color-neutral-500); }

/* ── строки итогов: корзина и оформление ────────────────────────── */

.nc-totals__line {
  display: flex; justify-content: space-between; gap: var(--space-4);
  font-size: 15px; padding-bottom: var(--space-4); color: var(--color-neutral-300);
}
.nc-totals__grand {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-4); margin-bottom: var(--space-6);
  padding-top: var(--space-4); border-top: 1px solid var(--color-divider);
}
.nc-totals__grand b { font-size: 28px; font-weight: 500; font-family: var(--font-heading); }

/* ── SEO-текст раздела и товара (имя своё: .nc-seo занят главной) ──────────────────────────────────────────── */

.nc-seotext { padding-top: 48px; padding-bottom: 48px; display: grid;
  grid-template-columns: 300px 1fr; gap: var(--space-8); }
.nc-seotext__body { font-size: 13px; color: var(--color-neutral-500); max-width: 90ch; }
/* В две колонки разводим только длинный текст: короткий, разорванный
   пополам, читается как вёрстка «поехала». */
.nc-seotext__body--2col { columns: 2; column-gap: var(--space-8); max-width: none; }
.nc-seotext__body p { margin: 0 0 var(--space-3); }
.nc-seotext__body img { display: none; }
.nc-seotext__body a { color: var(--color-accent-300); }
.nc-seotext summary { display: none; }

@media (max-width: 767px) {
  .nc-p__title { font-size: 15px; }
  .nc-p__desc { display: none; }
  /* цена не переносится: «20 828 руб.» в две строки читалось как сбой */
  .nc-p__price { white-space: nowrap; }
  .nc-p__price b { font-size: 18px; }
  .nc-p__compare { display: none; }

  /* В выдаче категории товар становится строкой с фото 104px. В блоке
     «похожие модели» карточка остаётся вертикальной — там сетка 2 в ряд.

     min-width: 0 обязателен: у элемента сетки и у флекс-детей минимальная
     ширина по умолчанию равна ширине содержимого, поэтому строка «фото +
     текст + цена с кнопкой» распирала колонку до 444px при экране 390 и
     страница уезжала вбок. */
  .nc-grid { min-width: 0; }
  .nc-grid .nc-p { flex-direction: row; flex-wrap: wrap; gap: var(--space-3); min-width: 0; }
  .nc-grid .nc-p__photo { width: 104px; flex: none; align-self: flex-start; padding: 8px; }
  /* Базис, а не min-content: без него колонка текста либо распирала карточку
     до 444px, либо схлопывалась в столбик по одной букве. */
  .nc-grid .nc-p__mid { flex: 1 1 180px; min-width: 0; overflow-wrap: break-word; }
  /* Цена и кнопка — отдельной строкой под текстом, как в макете 390 */
  .nc-grid .nc-p__buy {
    flex: 1 0 100%; flex-direction: row; align-items: center;
    gap: var(--space-3); margin-top: 4px; min-width: 0;
  }
  .nc-grid .nc-p__price { flex: none; }
  .nc-grid .nc-p__buy .nc-btn { margin-left: auto; min-height: 44px; padding: 0 16px; }

  .nc-seotext { grid-template-columns: 1fr; gap: var(--space-3); }
  .nc-seotext__body--2col { columns: 1; }
}