/* ==========================================================================
   NANOSOUNDS — тема магазина. Слой поверх Bootstrap 3.
   Правила и обоснования: ДИЗАЙН.md в корне проекта.
   ========================================================================== */

/* --- Шрифты со своего сервера. Кириллица и латиница разными файлами:
   так браузер тянет только нужное подмножество. -------------------- */
@font-face {
  font-family: 'Inter NS';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter NS';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter NS';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter NS';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter NS';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter NS';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter NS';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter NS';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald NS';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/oswald-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald NS';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/oswald-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald NS';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/oswald-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald NS';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/oswald-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Переменные ---------------------------------------------------------- */
:root {
  --ink:       #0F172A;
  --graphite:  #1E293B;
  --slate:     #334155;
  --muted:     #64748B;
  --line:      #E2E8F0;
  --line-soft: #EEF2F7;
  --surface:   #F8FAFC;
  --white:     #FFFFFF;

  --red:       #DC2626;
  --red-dark:  #B91C1C;
  --red-soft:  #FEF2F2;
  --green:     #16A34A;
  --amber:     #D97706;

  --font-head: 'Oswald NS', 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter NS', 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --r-card: 8px;
  --r-btn:  6px;

  --sh-1: 0 1px 2px rgba(15, 23, 42, .06);
  --sh-2: 0 8px 24px rgba(15, 23, 42, .10);

  --header-h: 64px;
}

/* --- База ---------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3 {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
  margin-top: 0;
}

h1 { font-size: 40px; line-height: 1.15; margin-bottom: 20px; }
h2 { font-size: 30px; line-height: 1.25; }
h3 { font-size: 22px; line-height: 1.3; font-weight: 500; }

a { color: var(--ink); text-decoration: none; transition: color .18s ease; }
a:hover, a:focus { color: var(--red); text-decoration: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; }

.container { max-width: 1200px; }

/* Bootstrap рисует у всех .row отрицательные поля — оставляем как есть,
   но на узких экранах убираем горизонтальный вынос за край. */
@media (max-width: 767px) {
  body { overflow-x: hidden; }
}

/* --- Кнопки -------------------------------------------------------------- */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  padding: 11px 20px;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
  cursor: pointer;
  text-shadow: none;
  box-shadow: none;
}

.btn:active, .btn:focus { box-shadow: none; }

.btn-primary,
.btn-danger,
.btn-buy {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-danger:hover, .btn-danger:focus,
.btn-buy:hover, .btn-buy:focus {
  background: var(--red-dark);
  border-color: var(--red-dark);
  color: #fff;
}

.btn-default {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink);
}
.btn-default:hover, .btn-default:focus {
  background: var(--surface);
  border-color: var(--muted);
  color: var(--ink);
}

.btn-dark {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.btn-dark:hover, .btn-dark:focus { background: var(--graphite); color: #fff; }

.btn-lg { padding: 15px 28px; font-size: 17px; }
.btn-block { display: block; width: 100%; }

/* Поля ввода */
.form-control,
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], select, textarea {
  height: auto;
  min-height: 44px;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  box-shadow: none;
  padding: 10px 14px;
  color: var(--ink);
}
.form-control:focus {
  border-color: var(--slate);
  box-shadow: none;
}

/* ==========================================================================
   ШАПКА
   ========================================================================== */
.ns-topbar {
  background: var(--ink);
  color: #94A3B8;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.ns-topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
}
.ns-topbar a { color: #CBD5E1; }
.ns-topbar a:hover { color: #fff; }
.ns-topbar__usp { display: flex; gap: 22px; }
.ns-topbar__usp span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ns-topbar__usp svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--red); }
.ns-topbar__links { display: flex; gap: 18px; align-items: center; }

.ns-header {
  background: var(--ink);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
}
.ns-header__in {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--header-h);
  padding: 10px 0;
}

.ns-logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ns-logo__mark { width: 30px; height: 30px; flex: 0 0 30px; }
.ns-logo__text {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: .10em;
  color: #fff;
  line-height: 1;
}
.ns-logo__text b { color: var(--red); font-weight: 600; }
.ns-logo:hover .ns-logo__text { color: #fff; }
.ns-logo__tagline {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #64748B;
  margin-top: 3px;
  font-weight: 500;
}

/* Поиск */
.ns-search { flex: 1 1 auto; max-width: 460px; position: relative; }
.ns-search input {
  width: 100%;
  min-height: 42px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r-btn);
  color: #fff;
  padding: 9px 46px 9px 14px;
  font-size: 15px;
}
.ns-search input::placeholder { color: #64748B; }
.ns-search input:focus {
  background: rgba(255, 255, 255, .11);
  border-color: #475569;
  outline: none;
}
.ns-search button {
  position: absolute;
  right: 0; top: 0;
  height: 100%;
  width: 44px;
  background: none;
  border: 0;
  color: #94A3B8;
  cursor: pointer;
}
.ns-search button:hover { color: #fff; }
.ns-search svg { width: 18px; height: 18px; }

/* Правая группа шапки */
.ns-head-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.ns-phone { display: flex; flex-direction: column; line-height: 1.2; margin-right: 6px; }
.ns-phone a { font-family: var(--font-head); font-size: 19px; font-weight: 500; color: #fff; }
.ns-phone a:hover { color: var(--red); }
.ns-phone small { font-size: 11px; color: #64748B; letter-spacing: .04em; }

.ns-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, .07);
  color: #E2E8F0;
  border: 0;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  cursor: pointer;
}
.ns-icon-btn:hover, .ns-icon-btn:focus { background: rgba(255, 255, 255, .14); color: #fff; }
.ns-icon-btn svg { width: 19px; height: 19px; }
.ns-icon-btn--cart { background: var(--red); color: #fff; }
.ns-icon-btn--cart:hover, .ns-icon-btn--cart:focus { background: var(--red-dark); color: #fff; }
/* Счётчик корзины. Разметку отдаёт языковая строка text_items (см.
   server/patch_language.py): <b class="ns-cart-count" data-n="N">N</b>
   <span class="ns-cart-sum">сумма</span>. Пустая корзина — просто «Корзина». */
#cart-total { display: inline-flex; align-items: center; gap: 8px; }
.ns-cart-count { font-weight: 700; }
.ns-cart-count::after { content: " шт."; font-weight: 500; }
.ns-cart-count[data-n="0"] { display: none !important; }
.ns-cart-count[data-n="0"] + .ns-cart-sum { font-size: 0; }
.ns-cart-count[data-n="0"] + .ns-cart-sum::before { content: "Корзина"; font-size: 14px; }
@media (max-width: 767px) { .ns-cart-count::after { content: none; } }
#cart .fa-shopping-cart { display: none; }

.ns-burger { display: none; }

/* --- Главное меню -------------------------------------------------------- */
.ns-nav { background: var(--graphite); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.ns-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
}
.ns-nav__list > li > a {
  display: block;
  padding: 13px 14px;
  color: #CBD5E1;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.ns-nav__list > li > a:hover,
.ns-nav__list > li.active > a {
  color: #fff;
  border-bottom-color: var(--red);
}
.ns-nav__sep { flex: 1 1 auto; }
.ns-nav__blog > a {
  color: #fff !important;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}
.ns-nav__blog svg { width: 16px; height: 16px; color: var(--red); }

/* ==========================================================================
   ХЛЕБНЫЕ КРОШКИ
   ========================================================================== */
.breadcrumb {
  background: none;
  padding: 16px 0 12px;
  margin: 0 0 8px;
  font-size: 13px;
  border-radius: 0;
}
.breadcrumb > li { display: inline-block; color: var(--muted); }
.breadcrumb > li a { color: var(--muted); }
.breadcrumb > li a:hover { color: var(--red); }
.breadcrumb > li + li:before {
  content: "/";
  padding: 0 8px;
  color: #CBD5E1;
}
.breadcrumb > li:last-child { color: var(--ink); }

/* ==========================================================================
   КАРТОЧКА ТОВАРА В СЕТКЕ
   ========================================================================== */
.product-thumb {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.product-thumb:hover { border-color: #CBD5E1; box-shadow: var(--sh-2); }

.product-thumb .image { position: relative; background: var(--surface); display: block; }
.product-thumb .image a { display: block; padding: 8px; }
.product-thumb .image img { width: 100%; border-radius: 4px; }

.ns-badge {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: .01em;
}
.ns-badge--stock { background: var(--green); }

.product-thumb .caption {
  padding: 14px 14px 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.product-thumb .caption h4 { margin: 0 0 8px; font-size: 15px; line-height: 1.35; font-family: var(--font-body); font-weight: 600; }
.product-thumb .caption h4 a { color: var(--ink); }
.product-thumb .caption h4 a:hover { color: var(--red); }
.product-thumb .caption p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-thumb .price {
  margin-top: auto;
  padding: 0 0 12px;
  font-family: var(--font-head);
  font-size: 23px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}
.product-thumb .price-new { color: var(--ink); }
.product-thumb .price-old,
.product-thumb .price-tax {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: line-through;
}
.product-thumb .price-tax { display: none; }

.product-thumb .button-group {
  display: flex;
  gap: 8px;
  padding: 0 14px 14px;
  background: none;
}
.product-thumb .button-group button {
  min-height: 44px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.product-thumb .button-group button:first-child {
  flex: 1 1 auto;
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.product-thumb .button-group button:first-child:hover { background: var(--red-dark); border-color: var(--red-dark); }
.product-thumb .button-group button:not(:first-child) { flex: 0 0 44px; width: 44px; color: var(--muted); }
.product-thumb .button-group button:not(:first-child):hover { color: var(--red); border-color: var(--red); }

/* Выравнивание карточек в ряд */
.ns-grid { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.ns-grid > div { padding: 10px; display: flex; }
.ns-grid .product-thumb { width: 100%; }

/* ==========================================================================
   КАТЕГОРИЯ
   ========================================================================== */
.ns-page-head { padding: 4px 0 20px; }
.ns-page-head h1 { margin-bottom: 10px; }
.ns-page-head__lead { font-size: 16px; color: var(--slate); max-width: 760px; line-height: 1.6; }
/* Шапка с фото (контакты): кадр справа, слева градиент под белый текст. */
.ns-page-head--photo {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-card); background: var(--ink);
  padding: 56px 40px; margin-bottom: 24px; min-height: 260px;
  display: flex; flex-direction: column; justify-content: center;
}
.ns-page-head--photo h1 { color: #fff; }
.ns-page-head--photo .ns-page-head__lead { color: #CBD5E1; max-width: 460px; }
.ns-page-head__bg { position: absolute; inset: 0; z-index: -1; }
.ns-page-head__bg img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.ns-page-head__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(15, 23, 42, .95) 0%, rgba(15, 23, 42, .8) 40%, rgba(15, 23, 42, .2) 75%, rgba(15, 23, 42, .05) 100%);
}
@media (max-width: 767px) {
  .ns-page-head--photo { padding: 28px 20px; min-height: 220px; margin-left: -15px; margin-right: -15px; border-radius: 0; }
  .ns-page-head__bg img { object-position: 70% center; }
  .ns-page-head__bg::after { background: linear-gradient(90deg, rgba(15, 23, 42, .92) 0%, rgba(15, 23, 42, .7) 60%, rgba(15, 23, 42, .35) 100%); }
}

.ns-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  font-size: 14px;
}
.ns-toolbar label { color: var(--muted); font-weight: 400; margin: 0; }
.ns-toolbar select { min-height: 40px; padding: 8px 12px; max-width: 220px; }
.ns-toolbar__count { margin-left: auto; color: var(--muted); font-size: 13px; }

.ns-sidebar { padding-right: 24px; }
.ns-sidebar h5 {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 12px;
}
.ns-sidebar .list-group-item {
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  padding: 11px 0;
  background: none;
  font-size: 14px;
  color: var(--slate);
  border-radius: 0 !important;
}
.ns-sidebar .list-group-item:hover { color: var(--red); background: none; }
.ns-sidebar .list-group-item.active {
  background: none;
  color: var(--ink);
  font-weight: 600;
  border-left: 2px solid var(--red);
  padding-left: 10px;
}
.ns-sidebar .list-group-item span { color: var(--muted); font-size: 13px; }

.pagination > li > a,
.pagination > li > span {
  color: var(--ink);
  border-color: var(--line);
  min-width: 40px;
  min-height: 40px;
  line-height: 26px;
  text-align: center;
}
.pagination > .active > span,
.pagination > .active > a {
  background: var(--ink);
  border-color: var(--ink);
}

/* ==========================================================================
   КАРТОЧКА ТОВАРА
   ========================================================================== */
.ns-product { padding-bottom: 32px; }


.ns-buybox {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 22px;
  background: var(--white);
  box-shadow: var(--sh-1);
}
.ns-buybox h1 { font-size: 27px; line-height: 1.2; margin-bottom: 12px; }

.ns-sku { font-size: 13px; color: var(--muted); margin-bottom: 14px; display: flex; gap: 16px; flex-wrap: wrap; }

.ns-stock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 16px;
}
.ns-stock svg { width: 16px; height: 16px; }
.ns-stock--out { color: var(--muted); }

.ns-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.ns-price__now { font-family: var(--font-head); font-size: 38px; font-weight: 600; color: var(--ink); line-height: 1; }
.ns-price__old { font-size: 19px; color: var(--muted); text-decoration: line-through; }
.ns-price__save {
  background: var(--red-soft);
  color: var(--red);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.ns-price__note { font-size: 13px; color: var(--muted); margin-bottom: 18px; }

.ns-qty { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ns-qty label { font-size: 14px; color: var(--muted); margin: 0; font-weight: 400; }
.ns-qty__box { display: flex; border: 1px solid var(--line); border-radius: var(--r-btn); overflow: hidden; }
.ns-qty__box button {
  width: 44px; height: 46px;
  background: var(--white);
  border: 0;
  color: var(--slate);
  font-size: 19px;
  cursor: pointer;
  line-height: 1;
}
.ns-qty__box button:hover { background: var(--surface); color: var(--ink); }
.ns-qty__box input {
  width: 58px; height: 46px;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  min-height: 0;
  border-radius: 0;
  padding: 0;
}

.ns-buy-actions { display: flex; gap: 10px; margin-bottom: 18px; }
.ns-buy-actions .btn-buy { flex: 1 1 auto; min-height: 52px; font-size: 17px; }
.ns-buy-actions .ns-fav {
  flex: 0 0 52px;
  width: 52px; height: 52px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ns-buy-actions .ns-fav:hover { color: var(--red); border-color: var(--red); }
.ns-buy-actions .ns-fav svg { width: 20px; height: 20px; }

.ns-assure { border-top: 1px solid var(--line-soft); padding-top: 16px; display: grid; gap: 13px; }
.ns-assure__row { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.ns-assure__row svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--red); margin-top: 2px; }
.ns-assure__row b { display: block; font-weight: 600; }
.ns-assure__row span { color: var(--muted); font-size: 13px; }

/* Вкладки */
.nav-tabs { border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.nav-tabs > li > a {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 2px;
  margin-right: 28px;
}
.nav-tabs > li > a:hover { background: none; border-bottom-color: var(--line); color: var(--ink); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border: 0;
  border-bottom: 2px solid var(--red);
  color: var(--ink);
  background: none;
}

.ns-desc { font-size: 16px; line-height: 1.7; color: var(--slate); max-width: 820px; }
.ns-desc p { margin-bottom: 14px; }
.ns-desc strong, .ns-desc b { color: var(--ink); }
/* С 24.09 описания товаров с подзаголовками, списками и таблицей сечений —
   оформлены как в статьях блога, только на ступень мельче. */
.ns-desc h2 { font-size: 22px; line-height: 1.3; color: var(--ink); margin: 30px 0 12px; }
.ns-desc h2:first-child { margin-top: 0; }
.ns-desc ul { margin: 0 0 16px; padding-left: 22px; }
.ns-desc li { margin-bottom: 6px; }
.ns-desc li::marker { color: var(--red); }
.ns-desc a { color: var(--red); border-bottom: 1px solid rgba(220, 38, 38, .3); }
.ns-desc a:hover { border-bottom-color: var(--red); text-decoration: none; }
.ns-desc table { width: 100%; margin: 4px 0 16px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.ns-desc th { background: var(--ink); color: #fff; font-weight: 500; text-align: left; padding: 9px 12px; }
.ns-desc td { padding: 9px 12px; border-top: 1px solid var(--line-soft); }
.ns-desc tr:nth-child(even) td { background: var(--surface); }
@media (max-width: 480px) {
  .ns-desc table { font-size: 13px; }
  .ns-desc th, .ns-desc td { padding: 8px 6px; }
  .ns-desc td { white-space: nowrap; }
}

.ns-specs { width: 100%; border-collapse: collapse; max-width: 720px; font-size: 15px; }
.ns-specs td { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.ns-specs td:first-child { color: var(--muted); width: 45%; }
.ns-specs td:last-child { font-weight: 500; font-variant-numeric: tabular-nums; }

/* Закреплённая панель покупки на мобильном */
.ns-sticky-buy {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 18px rgba(15, 23, 42, .10);
  align-items: center;
  gap: 12px;
}
.ns-sticky-buy__price { font-family: var(--font-head); font-size: 22px; font-weight: 600; line-height: 1; }
.ns-sticky-buy__price small { display: block; font-family: var(--font-body); font-size: 12px; color: var(--muted); text-decoration: line-through; font-weight: 400; }
.ns-sticky-buy .btn { flex: 1 1 auto; min-height: 48px; }

/* ==========================================================================
   БЛОГ: список
   ========================================================================== */
.ns-blog-hero { background: var(--ink); color: #fff; padding: 40px 0 36px; margin-bottom: 32px; }
.ns-blog-hero h1 { color: #fff; margin-bottom: 10px; }
.ns-blog-hero p { color: #94A3B8; font-size: 17px; max-width: 640px; margin: 0; }

.ns-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 36px; }
.ns-post {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 22px;
  background: var(--white);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ns-post:hover { border-color: #CBD5E1; box-shadow: var(--sh-2); }
.ns-post__date { font-size: 12px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
.ns-post__title { font-family: var(--font-head); font-size: 20px; font-weight: 500; line-height: 1.3; margin: 0 0 10px; }
.ns-post__title a { color: var(--ink); }
.ns-post__title a:hover { color: var(--red); }
.ns-post__intro { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; }
.ns-post__more {
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ns-post__more svg { width: 15px; height: 15px; transition: transform .18s ease; }
.ns-post:hover .ns-post__more svg { transform: translateX(3px); }

/* ==========================================================================
   БЛОГ: статья. Главный экран заработка — см. ЗАМЕР_ДО.md
   ========================================================================== */
.ns-article-wrap { max-width: 720px; margin: 0 auto; padding-bottom: 40px; }
.ns-article-wrap h1 { font-size: 38px; line-height: 1.15; margin-bottom: 16px; }

.ns-article-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.ns-article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ns-article-meta svg { width: 14px; height: 14px; }

.ns-article-intro {
  font-size: 19px;
  line-height: 1.6;
  color: var(--slate);
  border-left: 3px solid var(--red);
  padding-left: 18px;
  margin-bottom: 28px;
}

/* Оглавление */
.ns-toc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 18px 22px;
  margin-bottom: 32px;
}
.ns-toc__title {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 12px;
}
.ns-toc ol { margin: 0; padding-left: 20px; }
.ns-toc li { margin-bottom: 7px; font-size: 15px; line-height: 1.45; }
.ns-toc a { color: var(--slate); }
.ns-toc a:hover { color: var(--red); }

/* Тело статьи */
.nano-article { font-size: 18px; line-height: 1.75; color: #24324a; }
.nano-article p { margin: 0 0 20px; }
.nano-article h2 {
  font-size: 29px;
  line-height: 1.25;
  margin: 44px 0 16px;
  scroll-margin-top: 90px;
}
.nano-article h3 { font-size: 22px; margin: 32px 0 12px; scroll-margin-top: 90px; }
.nano-article a { color: var(--red); border-bottom: 1px solid rgba(220, 38, 38, .3); }
.nano-article a:hover { border-bottom-color: var(--red); }
.nano-article strong, .nano-article b { color: var(--ink); font-weight: 600; }
.nano-article ul, .nano-article ol { margin: 0 0 20px; padding-left: 26px; }
.nano-article li { margin-bottom: 9px; }
.nano-article li::marker { color: var(--red); font-weight: 600; }
.nano-article img { border-radius: var(--r-card); margin: 10px 0 24px; }
.nano-article em, .nano-article i { color: var(--slate); }
.nano-article blockquote {
  border-left: 3px solid var(--line);
  padding: 4px 0 4px 20px;
  margin: 0 0 22px;
  font-size: 17px;
  color: var(--slate);
}

/* Таблицы сечений — ключевой контент, читают в первую очередь */
.nano-article table {
  width: 100%;
  margin: 8px 0 28px;
  border-collapse: collapse;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.nano-article table th {
  background: var(--ink);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 500;
  text-align: left;
  padding: 12px 14px;
  font-size: 15px;
  letter-spacing: .01em;
}
.nano-article table td { padding: 11px 14px; border-top: 1px solid var(--line-soft); }
.nano-article table tr:nth-child(even) td { background: var(--surface); }
.ns-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 28px; }
.ns-table-scroll table { margin-bottom: 0; }

/* --- Товарный блок внутри статьи ---------------------------------------- */
.nano-products {
  margin: 36px 0;
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: var(--r-card);
  background: var(--white);
  padding: 22px;
  box-shadow: var(--sh-1);
}
.nano-products__title {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ink);
}
.nano-products__note {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 18px;
}
.nano-products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.nano-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--white);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.nano-card:hover { border-color: #CBD5E1; box-shadow: var(--sh-2); }
.nano-card__img { display: block; background: var(--surface); padding: 6px; }
.nano-card__img img { width: 100%; border-radius: 4px; display: block; }
.nano-card__body { padding: 11px 12px 12px; display: flex; flex-direction: column; flex: 1 1 auto; }
.nano-card__name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 9px;
}
.nano-card__name:hover { color: var(--red); }
.nano-card__price {
  margin-top: auto;
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 10px;
}
.nano-card__old {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: line-through;
}
.nano-card__btn {
  display: block;
  text-align: center;
  background: var(--red);
  color: #fff;
  border: 0;
  border-radius: var(--r-btn);
  padding: 11px 8px;
  font-size: 14px;
  font-weight: 600;
  min-height: 44px;
  cursor: pointer;
  width: 100%;
  transition: background-color .18s ease;
}
.nano-card__btn:hover, .nano-card__btn:focus { background: var(--red-dark); color: #fff; }

/* Финальный призыв в конце статьи */
.ns-article-cta {
  margin: 40px 0 0;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-card);
  padding: 30px;
  text-align: center;
}
.ns-article-cta h3 { color: #fff; font-size: 25px; margin-bottom: 10px; }
.ns-article-cta p { color: #94A3B8; font-size: 16px; margin-bottom: 20px; max-width: 480px; margin-left: auto; margin-right: auto; }

.nano-related { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.nano-related h3 { font-size: 20px; margin-bottom: 16px; }
.nano-related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.nano-related li a {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  transition: border-color .18s ease, background-color .18s ease;
}
.nano-related li a:hover { border-color: var(--red); background: var(--red-soft); color: var(--ink); }

/* ==========================================================================
   ГЛАВНАЯ
   ========================================================================== */
.ns-hero {
  background: var(--ink);
  color: #fff;
  padding: 72px 0 68px;
  min-height: 420px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
/* Фото и затемнение разными слоями: раньше градиент лежал фоном самой секции,
   то есть ПОД снимком, и текст оказывался на светлых участках кабеля. */
.ns-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
/* Фон — настоящая <img> со srcset, а не background-image: браузер сам берёт
   размер под экран, и картинка никогда не растягивается больше исходника. */
.ns-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 55%;
  display: block;
}
.ns-hero__bg:after {
  content: '';
  position: absolute;
  inset: 0;
  /* Затемняем только зону текста слева, наконечники справа — живым цветом. */
  background: linear-gradient(100deg,
    rgba(15, 23, 42, .94) 0%,
    rgba(15, 23, 42, .80) 34%,
    rgba(15, 23, 42, .30) 62%,
    rgba(15, 23, 42, 0) 85%);
}
.ns-hero .container { position: relative; z-index: 1; width: 100%; }
.ns-hero__in { max-width: 640px; }
.ns-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(220, 38, 38, .15);
  border: 1px solid rgba(220, 38, 38, .35);
  color: #FCA5A5;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.ns-hero h1 { color: #fff; font-size: 46px; line-height: 1.1; margin-bottom: 18px; }
.ns-hero h1 em { font-style: normal; color: var(--red); }
.ns-hero__lead { font-size: 18px; line-height: 1.6; color: #CBD5E1; margin-bottom: 28px; }
.ns-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.ns-usp { background: var(--surface); border-bottom: 1px solid var(--line); padding: 26px 0; }
.ns-usp__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ns-usp__item { display: flex; gap: 12px; align-items: flex-start; }
.ns-usp__item svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--red); margin-top: 2px; }
.ns-usp__item b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.ns-usp__item span { font-size: 13px; color: var(--muted); line-height: 1.45; }

.ns-section { padding: 48px 0; }
.ns-section--surface { background: var(--surface); }
.ns-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.ns-section__head h2 { margin: 0 0 6px; }
.ns-section__head p { color: var(--muted); font-size: 15px; margin: 0; max-width: 620px; }
.ns-section__link { font-size: 15px; font-weight: 600; color: var(--red); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ns-section__link svg { width: 16px; height: 16px; }

/* Плитка категорий */
.ns-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ns-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 168px;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ink);
  padding: 18px;
  color: #fff;
  transition: box-shadow .18s ease;
}
.ns-cat:hover { box-shadow: var(--sh-2); color: #fff; }
.ns-cat__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
/* Фото в полную яркость, затемнён только низ под подписью. Раньше картинка
   была приглушена до 58 % И сверху лежал тёмный градиент — плитки выглядели
   грязными. */
.ns-cat:hover .ns-cat__img { transform: scale(1.04); }
.ns-cat:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, .9) 0%, rgba(15, 23, 42, .55) 38%, rgba(15, 23, 42, 0) 72%);
  z-index: 1;
}
.ns-cat__name { text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.ns-cat__body { position: relative; z-index: 2; }
.ns-cat__name { font-family: var(--font-head); font-size: 18px; font-weight: 500; line-height: 1.25; display: block; margin-bottom: 4px; }
.ns-cat__count { font-size: 13px; color: #94A3B8; }

/* Блок «подобрать по мощности» */
.ns-picker {
  background: var(--ink);
  border-radius: var(--r-card);
  padding: 32px;
  color: #fff;
}
/* Фон блока подбора: фото справа, слева градиент цвета ink под текст. */
.ns-picker { position: relative; overflow: hidden; isolation: isolate; }
.ns-picker__bg { position: absolute; inset: 0; z-index: -1; }
.ns-picker__bg img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.ns-picker__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(15, 23, 42, .97) 0%, rgba(15, 23, 42, .9) 45%, rgba(15, 23, 42, .6) 75%, rgba(15, 23, 42, .45) 100%);
}
/* Плашки вариантов плотные: под правыми лежит медь, текст на ней не читался. */
.ns-picker .ns-picker__opt { background: rgba(15, 23, 42, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ns-picker .ns-picker__opt:hover { background: rgba(60, 20, 28, .85); }
.ns-picker > p { max-width: 640px; }
@media (max-width: 767px) {
  .ns-picker__bg img { object-position: center bottom; }
  .ns-picker__bg::after { background: linear-gradient(180deg, rgba(15, 23, 42, .97) 0%, rgba(15, 23, 42, .9) 55%, rgba(15, 23, 42, .45) 100%); }
}
.ns-picker h2 { color: #fff; margin-bottom: 8px; }
.ns-picker p { color: #94A3B8; font-size: 15px; margin-bottom: 22px; }
.ns-picker__row { display: flex; gap: 12px; flex-wrap: wrap; }
.ns-picker__opt {
  flex: 1 1 150px;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .05);
  border-radius: var(--r-card);
  padding: 16px;
  text-align: left;
  color: #fff;
  transition: border-color .18s ease, background-color .18s ease;
}
.ns-picker__opt:hover { border-color: var(--red); background: rgba(220, 38, 38, .12); color: #fff; }
.ns-picker__opt b { display: block; font-family: var(--font-head); font-size: 19px; font-weight: 500; margin-bottom: 4px; }
.ns-picker__opt span { font-size: 13px; color: #94A3B8; }

/* Блок статей на главной */
.ns-home-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ==========================================================================
   ПОДВАЛ
   ========================================================================== */
.ns-footer { background: var(--ink); color: #94A3B8; padding: 46px 0 0; margin-top: 56px; font-size: 14px; }
.ns-footer a { color: #94A3B8; }
.ns-footer a:hover { color: #fff; }
.ns-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; padding-bottom: 36px; }
.ns-footer h5 {
  font-family: var(--font-head);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: 0 0 16px;
}
.ns-footer ul { list-style: none; padding: 0; margin: 0; }
.ns-footer li { margin-bottom: 9px; }
.ns-footer__about { font-size: 14px; line-height: 1.6; color: #64748B; margin: 14px 0 16px; max-width: 300px; }
.ns-footer__phone { font-family: var(--font-head); font-size: 22px; color: #fff; display: block; margin-bottom: 4px; }
.ns-footer__phone:hover { color: var(--red); }
.ns-footer__hours { font-size: 13px; color: #64748B; }
.ns-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 20px 0 26px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #64748B;
}

/* ==========================================================================
   ПРОЧЕЕ
   ========================================================================== */
.alert { border: 0; border-radius: var(--r-card); font-size: 15px; padding: 14px 18px; }
.alert-success { background: #ECFDF5; color: #065F46; }
.alert-danger { background: var(--red-soft); color: var(--red-dark); }

.ns-info { max-width: 820px; font-size: 16px; line-height: 1.7; color: var(--slate); padding-bottom: 40px; }
.ns-info h2 { font-size: 24px; margin: 32px 0 12px; }
.ns-info ul, .ns-info ol { padding-left: 24px; }
.ns-info li { margin-bottom: 8px; }

/* Прячем то, чего у магазина нет */
.ns-hide { display: none !important; }

/* ==========================================================================
   АДАПТИВ
   ========================================================================== */
@media (max-width: 1199px) {
  .ns-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .ns-footer__grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 991px) {
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  .ns-posts { grid-template-columns: repeat(2, 1fr); }
  .ns-home-posts { grid-template-columns: repeat(2, 1fr); }
  .ns-cats { grid-template-columns: repeat(2, 1fr); }
  .ns-usp__grid { grid-template-columns: repeat(2, 1fr); }
  .ns-hero h1 { font-size: 36px; }
  .ns-phone { display: none; }
  .ns-sidebar { padding-right: 0; margin-bottom: 24px; }
}

@media (max-width: 767px) {
  body { font-size: 15px; }
  h1 { font-size: 28px; line-height: 1.2; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }

  .ns-topbar__usp { display: none; }
  .ns-topbar__in { justify-content: center; }

  .ns-header__in { gap: 12px; min-height: 58px; }
  .ns-header__in { flex-wrap: wrap; }
  /* Подпись под логотипом занимает ширину, из-за которой кнопки корзины
     срывались на вторую строку. На телефоне она не нужна. */
  .ns-logo__tagline { display: none; }
  .ns-logo__text { font-size: 19px; }
  .ns-head-actions { gap: 6px; }
  .ns-search { display: none; }
  /* Поиск в потоке, а не поверх: absolute накладывал его на первый пункт
     открытого меню, и «Комплекты КГ» становились недоступны. */
  .ns-search--open {
    display: block;
    order: 10;
    flex: 1 0 100%;
    max-width: none;
    margin: 4px 0 10px;
  }
  .ns-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: rgba(255, 255, 255, .07);
    border: 0;
    border-radius: var(--r-btn);
    color: #fff;
    cursor: pointer;
  }
  .ns-burger svg { width: 21px; height: 21px; }
  .ns-icon-btn span { display: none; }
  .ns-icon-btn { padding: 0; width: 44px; }
  /* На телефоне от кнопки корзины остаются иконка и бейдж с количеством. */
  .ns-icon-btn #cart-total { display: contents; }
  .ns-icon-btn .ns-cart-sum { display: none; }
  .ns-icon-btn .ns-cart-count {
    position: absolute; top: -6px; right: -6px;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 10px; border: 2px solid var(--graphite);
    background: #fff; color: var(--red);
    font-size: 11px; line-height: 16px; text-align: center;
  }

  .ns-nav { display: none; }
  .ns-nav--open { display: block; }
  .ns-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .ns-nav__list > li > a {
    padding: 14px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    white-space: normal;
  }
  .ns-nav__list > li > a:hover, .ns-nav__list > li.active > a { border-bottom-color: rgba(255, 255, 255, .07); }
  .ns-nav__sep { display: none; }

  .ns-hero { padding: 40px 0 36px; }
  .ns-hero h1 { font-size: 29px; }
  .ns-hero__lead { font-size: 16px; }
  .ns-hero__actions .btn { width: 100%; }

  .ns-usp__grid { grid-template-columns: 1fr; gap: 16px; }
  .ns-cats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ns-cat { min-height: 132px; padding: 14px; }
  .ns-cat__name { font-size: 15px; }

  .ns-section { padding: 34px 0; }
  .ns-posts, .ns-home-posts { grid-template-columns: 1fr; }
  .ns-post { padding: 18px; }

  .ns-article-wrap { padding: 0 0 32px; }
  .ns-article-wrap h1 { font-size: 27px; }
  .ns-article-intro { font-size: 17px; padding-left: 14px; }
  .nano-article { font-size: 17px; line-height: 1.7; }
  .nano-article h2 { font-size: 24px; margin: 34px 0 14px; }
  .nano-article h3 { font-size: 20px; }
  .nano-article table { font-size: 14px; }
  .nano-article table th, .nano-article table td { padding: 9px 10px; }

  .nano-products { padding: 16px; margin: 28px 0; }
  .nano-products__grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  .ns-article-cta { padding: 24px 18px; }
  .ns-article-cta h3 { font-size: 21px; }

  .ns-buybox { padding: 18px; border: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
  .ns-buybox h1 { font-size: 23px; }
  .ns-price__now { font-size: 32px; }
  .ns-product { padding-bottom: 88px; }
  .ns-sticky-buy { display: flex; }

  .ns-toolbar { font-size: 13px; }
  .ns-toolbar select { max-width: 160px; }

  .ns-footer { padding-top: 34px; margin-top: 36px; }
  .ns-footer__grid { grid-template-columns: 1fr; gap: 26px; padding-bottom: 26px; }
  .ns-footer__bottom { flex-direction: column; gap: 8px; }

  .nav-tabs > li > a { margin-right: 18px; font-size: 14px; }
}

@media (max-width: 400px) {
  .nano-products__grid { grid-template-columns: 1fr; }
  /* Категории остаются в две колонки: в одну семь плиток занимали три экрана
     и отодвигали товары. */
  .ns-cat { min-height: 116px; padding: 12px; }
  .ns-cat__name { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* Печать: статью иногда распечатывают, чтобы взять в гараж */
@media print {
  .ns-header, .ns-topbar, .ns-nav, .ns-footer, .ns-sticky-buy, .nano-products, .ns-article-cta { display: none !important; }
  .ns-article-wrap { max-width: none; }
  body { font-size: 12pt; }
}

/* ==========================================================================
   ВЫПАДАЮЩАЯ КОРЗИНА
   Структуру #cart > button / #cart > ul диктует common.js, см. cart.twig.
   ========================================================================== */
.ns-cart-drop {
  min-width: 340px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-2);
  margin-top: 8px;
  overflow: hidden;
}
.ns-cart-drop > li { padding: 0; }
.ns-cart-table { margin: 0; width: 100%; }
.ns-cart-table tr { border-bottom: 1px solid var(--line-soft); }
.ns-cart-table td { padding: 10px 12px; vertical-align: top; }
.ns-cart-table__img { width: 56px; }
.ns-cart-table__img img { width: 48px; border-radius: 4px; border: 1px solid var(--line); }
.ns-cart-table__name { font-size: 13px; line-height: 1.35; }
.ns-cart-table__name a { color: var(--ink); font-weight: 500; }
.ns-cart-table__qty { color: var(--muted); font-size: 12px; margin-top: 3px; }
.ns-cart-table__sum { text-align: right; font-weight: 600; font-size: 14px; white-space: nowrap; }
.ns-cart-table__del { width: 36px; text-align: center; }
.ns-cart-table__del button {
  border: 0;
  background: none;
  color: #CBD5E1;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  width: 28px; height: 28px;
  border-radius: 4px;
}
.ns-cart-table__del button:hover { color: var(--red); background: var(--red-soft); }
.ns-cart-foot { padding: 14px 12px; background: var(--surface); }
.ns-cart-foot__row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; color: var(--slate); }
.ns-cart-foot__row b { color: var(--ink); }
.ns-cart-foot__actions { display: flex; gap: 8px; margin-top: 12px; }
.ns-cart-foot__actions .btn { flex: 1 1 0; padding: 10px 8px; font-size: 14px; text-align: center; }
.ns-cart-empty { padding: 26px 16px; text-align: center; color: var(--muted); margin: 0; font-size: 14px; }

@media (max-width: 767px) {
  .ns-cart-drop { min-width: 290px; max-width: calc(100vw - 24px); }
}

/* Выпадающие подкатегории главного меню */
.ns-nav .dropdown-menu {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-2);
  padding: 10px;
  margin-top: 0;
}
.ns-nav .dropdown-inner { display: flex; gap: 20px; }
.ns-nav .dropdown-menu a { display: block; padding: 7px 10px; font-size: 14px; color: var(--slate); border-radius: 4px; }
.ns-nav .dropdown-menu a:hover { background: var(--surface); color: var(--red); }
.ns-nav .see-all { border-top: 1px solid var(--line-soft); margin-top: 6px; font-weight: 600; }

/* ==========================================================================
   ПРИЗЫВ ВНУТРИ ТЕКСТА — маркер [[cta:...]]
   Заменил текстовые костыли Кита, см. tools/fix_cta_blocks.py.
   ========================================================================== */
.ns-inline-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 34px 0;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: var(--r-card);
}
.ns-inline-cta__text { flex: 1 1 260px; }
.ns-inline-cta__text b {
  display: block;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--ink);
}
.ns-inline-cta__text span { font-size: 15px; color: var(--muted); line-height: 1.5; }
.ns-inline-cta .btn { white-space: nowrap; }

@media (max-width: 767px) {
  .ns-inline-cta { padding: 18px; gap: 14px; }
  .ns-inline-cta__text b { font-size: 18px; }
  .ns-inline-cta .btn { width: 100%; }
}

/* Ссылки внутри текста статьи красные, но название товара в карточке —
   часть интерфейса, а не текста. Перебиваем правило .nano-article a. */
.nano-article .nano-card__name,
.nano-article .nano-card__img { border-bottom: 0; color: var(--ink); }
.nano-article .nano-card__name:hover { color: var(--red); }
.nano-article .nano-products a { border-bottom: 0; }
.nano-article .ns-inline-cta a { border-bottom: 0; }

/* Кнопка-ссылка внутри статьи: правило .nano-article a перекрашивало её
   в красный текст на красном фоне, и надпись пропадала. */
.nano-article a.btn-primary,
.nano-article a.btn-primary:hover,
.nano-article a.btn-primary:focus { color: #fff; border-bottom: 0; }
.nano-article a.btn-default,
.nano-article a.btn-default:hover { color: var(--ink); border-bottom: 0; }

/* ==========================================================================
   ДОБАВКИ К КАТЕГОРИИ И КАРТОЧКЕ
   ========================================================================== */
.ns-subcats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ns-subcat {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--slate);
  background: var(--white);
  transition: border-color .18s ease, color .18s ease;
}
.ns-subcat:hover { border-color: var(--red); color: var(--red); }

.ns-pager { margin: 24px 0 8px; }

.ns-cat-help {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 36px 0 8px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.ns-cat-help__text { flex: 1 1 280px; }
.ns-cat-help__text b {
  display: block;
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 4px;
}
.ns-cat-help__text span { font-size: 14px; color: var(--muted); line-height: 1.5; }

.ns-tabs-wrap { margin-top: 44px; }

/* Список товаров в категории: у карточек разная высота названия,
   поэтому выравниваем их сеткой, а не плаванием. */
#product-category .ns-grid > div,
#product-product .ns-grid > div { float: none; }

@media (max-width: 767px) {
  .ns-cat-help { padding: 18px; }
  .ns-cat-help .btn { width: 100%; }
  .ns-subcats { gap: 6px; }
  .ns-subcat { font-size: 13px; padding: 7px 12px; }
}

/* Кнопка-призрак на тёмном первом экране */
.btn-ghost {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}
.btn-ghost:hover, .btn-ghost:focus { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); color: #fff; }

.ns-picker__foot { margin: 20px 0 0; font-size: 14px; color: #94A3B8; }
.ns-picker__foot a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.ns-picker__foot a:hover { color: var(--red); border-bottom-color: var(--red); }

/* Главная идёт секциями во всю ширину, поэтому стандартный контейнер
   common/home.twig ей мешает — снимаем поля именно на главной. */
#common-home.container { max-width: none; padding: 0; width: 100%; }
#common-home > .row { margin: 0; }
#common-home #content { padding: 0; width: 100%; }

/* ==========================================================================
   ЗАМЕНА FONT AWESOME
   Библиотека тянула 105 КБ (css + шрифт) ради одной иконки — домика в
   хлебных крошках. Осталось два класса, которые проставляет сам движок:
   .fa-home в крошках и .fa-shopping-cart, который common.js вставляет в
   кнопку корзины после добавления товара. Рисуем их фоном.
   ========================================================================== */
.fa {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: -.13em;
}
.fa-home {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5'/%3E%3C/svg%3E");
}
.breadcrumb > li:first-child a:hover .fa-home {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5'/%3E%3C/svg%3E");
}
.fa-shopping-cart {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
  margin-right: 6px;
}


/* ==========================================================================
   ЧЁТКОСТЬ КАРТИНОК
   Превью теперь 3:4, как сами фото (900×1200), и вдвое крупнее места на
   экране — под ретину. Поэтому ничего не растягивается и нет белых полей.
   ========================================================================== */
.product-thumb .image img,
.nano-card__img img {
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: var(--surface);
}
/* ==========================================================================
   ОФОРМЛЕНИЕ ЗАКАЗА — checkout/checkout.twig
   ========================================================================== */
.ns-checkout h1 { margin-bottom: 24px; }

.ns-step {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--white);
  margin-bottom: 16px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ns-step__head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; }
.ns-step__head h2 { font-size: 21px; margin: 0; flex: 1 1 auto; }
.ns-step__num {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.ns-step__done { display: none; color: var(--green); }
.ns-step__done svg { width: 20px; height: 20px; }
.ns-step__body { padding: 0 22px 22px; display: none; }
.ns-step__hint { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.ns-step__foot { margin-top: 18px; }

.ns-step.is-active { box-shadow: var(--sh-1); }
.ns-step.is-active .ns-step__body { display: block; }
.ns-step.is-active .ns-step__num { background: var(--ink); border-color: var(--ink); color: #fff; }
.ns-step:not(.is-active) { opacity: .6; }
.ns-step.is-done .ns-step__done { display: inline-flex; }
.ns-step.is-done .ns-step__num { background: var(--green); border-color: var(--green); color: #fff; }
.ns-step.is-done .ns-step__hint,
.ns-step.is-active #ns-shipping:not(:empty) + .ns-step__hint { display: none; }
.ns-step.is-active .ns-step__hint:has(+ #ns-shipping:not(:empty)),
.ns-step.is-active .ns-step__hint:has(+ #ns-payment:not(:empty)) { display: none; }

/* Поля */
.ns-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.ns-field { display: flex; flex-direction: column; min-width: 0; }
.ns-field--wide { grid-column: 1 / -1; }
.ns-field label { font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.ns-field label small { font-weight: 400; color: var(--muted); }
.ns-field input,
.ns-field select,
.ns-field textarea {
  width: 100%;
  min-height: 46px;
  font-size: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 10px 14px;
  background: var(--white);
  color: var(--ink);
  transition: border-color .18s ease;
}
.ns-field textarea { min-height: 80px; resize: vertical; }
.ns-field input:focus, .ns-field select:focus, .ns-field textarea:focus { border-color: var(--slate); outline: none; }
.ns-field__error { color: var(--red); font-size: 13px; margin-top: 5px; min-height: 0; }
.ns-field__error:empty { display: none; }
.ns-field.has-error input, .ns-field.has-error select { border-color: var(--red); background: var(--red-soft); }
.ns-comment { margin-top: 18px; }

/* Варианты доставки и оплаты */
.ns-options { display: grid; gap: 10px; }
.ns-option {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  cursor: pointer;
  font-weight: 400;
  margin: 0;
  transition: border-color .18s ease, background-color .18s ease;
}
.ns-option:hover { border-color: #CBD5E1; }
.ns-option input { width: 20px; height: 20px; margin: 0; accent-color: var(--red); flex: 0 0 20px; }
.ns-option:has(input:checked) { border-color: var(--red); background: var(--red-soft); }
.ns-option__body { flex: 1 1 auto; display: flex; flex-direction: column; }
.ns-option__title { font-weight: 600; font-size: 15px; }
.ns-option__note { font-size: 13px; color: var(--muted); }
.ns-option__price { font-family: var(--font-head); font-size: 19px; font-weight: 600; white-space: nowrap; }

.ns-agree { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-weight: 400; font-size: 14px; color: var(--slate); cursor: pointer; }
.ns-agree input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--red); flex: 0 0 18px; }
.ns-agree a { color: var(--red); }

.ns-loading { color: var(--muted); font-size: 14px; padding: 8px 0; }
.btn.is-busy { opacity: .7; cursor: progress; }

/* Подтверждение */
.ns-confirm__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ns-confirm__table td { padding: 12px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.ns-confirm__table a { color: var(--ink); font-weight: 500; }
.ns-confirm__qty { font-size: 13px; color: var(--muted); margin-top: 3px; }
.ns-confirm__sum { text-align: right; white-space: nowrap; font-weight: 600; padding-left: 16px !important; }
.ns-confirm__totals { padding: 12px 0 4px; }
.ns-confirm__row { display: flex; justify-content: space-between; font-size: 15px; color: var(--slate); padding: 4px 0; }
.ns-confirm__row.is-grand { font-size: 19px; color: var(--ink); padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--line); }
.ns-confirm__row.is-grand b { font-family: var(--font-head); font-size: 26px; }
.ns-confirm__pay { margin-top: 18px; }
.ns-confirm__pay .buttons .pull-right { float: none !important; }
.ns-confirm__pay .btn { width: 100%; min-height: 54px; font-size: 18px; }

/* Сводка справа */
.ns-summary {
  position: sticky; top: 90px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: 18px;
}
.ns-summary__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.ns-summary__head h3 { font-size: 19px; margin: 0; }
.ns-summary__head a { font-size: 14px; color: var(--red); }
.ns-summary__list { list-style: none; padding: 0; margin: 0; }
.ns-summary .ns-cart-table { background: none; }
.ns-summary .ns-cart-table__del,
.ns-summary .ns-cart-foot__actions { display: none; }
.ns-summary .ns-cart-foot { background: none; padding: 12px 0 0; }
.ns-summary__trust { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 9px; font-size: 13px; color: var(--slate); }
.ns-summary__trust div { display: flex; gap: 8px; align-items: flex-start; }
.ns-summary__trust svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--red); margin-top: 1px; }
.ns-summary__trust a { color: var(--ink); font-weight: 600; }

@media (max-width: 991px) {
  .ns-summary { position: static; margin-top: 8px; }
}
@media (max-width: 767px) {
  .ns-fields { grid-template-columns: 1fr; }
  .ns-step__head { padding: 16px; }
  .ns-step__body { padding: 0 16px 18px; }
  .ns-step__head h2 { font-size: 19px; }
  .ns-step__foot .btn { width: 100%; }
}

/* ==========================================================================
   СТРАНИЦА КОРЗИНЫ — checkout/cart.twig
   ========================================================================== */
.ns-cart-list { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.ns-cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto 110px;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.ns-cart-item:last-child { border-bottom: 0; }
.ns-cart-item__img img { width: 72px; height: 96px; object-fit: contain; background: var(--surface); border-radius: 6px; display: block; }
.ns-cart-item__name { display: block; font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--ink); margin-bottom: 4px; }
.ns-cart-item__price, .ns-cart-item__opt { font-size: 13px; color: var(--muted); }
.ns-cart-item__warn { font-size: 13px; color: var(--amber); font-weight: 600; }
.ns-cart-item__remove { background: none; border: 0; padding: 0; margin-top: 6px; font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.ns-cart-item__remove:hover { color: var(--red); }
.ns-cart-item__total { text-align: right; font-family: var(--font-head); font-size: 20px; font-weight: 600; white-space: nowrap; }
.ns-cart-item .ns-qty__box button { height: 40px; width: 38px; }
.ns-cart-item .ns-qty__box input { height: 40px; width: 46px; }
.ns-cart-back { display: inline-block; margin-top: 16px; font-size: 14px; color: var(--muted); }
.ns-cart-back:hover { color: var(--red); }
.ns-cart .ns-summary h3 { font-size: 20px; margin: 0 0 6px; }
.ns-cart-go { margin-top: 14px; }
.ns-cart-note { font-size: 13px; color: var(--muted); text-align: center; margin: 10px 0 0; }

@media (max-width: 767px) {
  .ns-cart-item { grid-template-columns: 64px 1fr; grid-template-areas: "img info" "img qty" "img total"; gap: 8px 14px; padding: 14px; }
  .ns-cart-item__img { grid-area: img; align-self: start; }
  .ns-cart-item__img img { width: 64px; height: 85px; }
  .ns-cart-item__info { grid-area: info; }
  .ns-cart-item__qty { grid-area: qty; }
  .ns-cart-item__total { grid-area: total; text-align: left; font-size: 18px; }
}


/* ==========================================================================
   SEO-ТЕКСТ КАТЕГОРИИ И FAQ
   Текст категории стоит под товарами (product/category.twig), FAQ в статьях
   и категориях собирает в <details> extension/module/ns_faq.
   ========================================================================== */
.ns-seo { max-width: 760px; margin: 48px 0 8px; font-size: 16px; line-height: 1.7; }
.ns-seo h2 { font-size: 26px; margin: 32px 0 12px; }
.ns-seo h2:first-child { margin-top: 0; }
.ns-seo h3 { font-size: 19px; }

.ns-faq { margin: 36px 0; }
.ns-faq__item { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); margin-bottom: 10px; }
.ns-faq__item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 16px 52px 16px 18px; border-radius: var(--r-card);
}
.ns-faq__item summary::-webkit-details-marker { display: none; }
.ns-faq__item summary:hover .ns-faq__q { color: var(--red); }
.ns-faq__item summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.ns-faq__item summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease; color: var(--muted);
}
.ns-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.nano-article .ns-faq__q, .ns-faq__q { font-size: 17px; line-height: 1.4; margin: 0; transition: color .15s ease; }
.ns-faq__a { padding: 0 18px 16px; }
.ns-faq__a > :last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .ns-seo { margin-top: 36px; font-size: 15px; }
  .ns-seo h2 { font-size: 22px; }
  .ns-faq__item summary { padding: 14px 46px 14px 14px; }
  .ns-faq__a { padding: 0 14px 14px; }
}
@media (prefers-reduced-motion: reduce) { .ns-faq__item summary::after { transition: none; } }


/* ==========================================================================
   ГАЛЕРЕЯ ТОВАРА (24.09.2026, по образцу Кита, WB и Ozon)
   Миниатюры столбиком слева, фото листается лентой прямо в карточке:
   свайп, стрелки, наведение на миниатюру. Все фото каталога 3:4, кадр
   той же пропорции — полей по бокам нет, размытый фон больше не нужен.
   Активная миниатюра — тёмной рамкой: красный только у кнопки покупки.
   ========================================================================== */
.ns-gallery {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px;
  /* На невысоком ноутбуке фото целиком помещается в первый экран.
     Выше 600 px не растём: исходник 1200 px, на ретине ×2 было бы мыло. */
  max-width: clamp(420px, calc((100vh - 230px) * .75 + 84px), 534px);
}
.ns-gallery:not(.ns-gallery--multi) { grid-template-columns: minmax(0, 1fr); max-width: clamp(336px, calc((100vh - 230px) * .75), 450px); }

/* Столбик миниатюр не выше фото, лишнее прокручивается внутри. */
.ns-gallery__thumbs { position: relative; }
.ns-gallery__thumbs-list {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; scrollbar-width: none;
}
.ns-gallery__thumbs-list::-webkit-scrollbar { display: none; }
/* Край столбика растворяется, если дальше есть ещё фото. */
.ns-gallery__thumbs-list.is-more-down { -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), transparent); mask-image: linear-gradient(#000 calc(100% - 56px), transparent); }
.ns-gallery__thumbs-list.is-more-up { -webkit-mask-image: linear-gradient(transparent, #000 56px); mask-image: linear-gradient(transparent, #000 56px); }
.ns-gallery__thumbs-list.is-more-up.is-more-down {
  -webkit-mask-image: linear-gradient(transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
.ns-gallery__thumb {
  flex: 0 0 auto; display: block; width: 72px; height: 96px;
  border: 2px solid transparent; border-radius: 6px; overflow: hidden;
  background: var(--surface); transition: border-color .15s ease;
}
.ns-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-gallery__thumb:hover { border-color: var(--line); }
.ns-gallery__thumb.is-active { border-color: var(--ink); }
.ns-gallery__thumb:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }

.ns-gallery__stage {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--r-card); background: #0B1220;
}
.ns-gallery__track {
  display: flex; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.ns-gallery__track::-webkit-scrollbar { display: none; }
.ns-gallery__slide {
  flex: 0 0 100%; height: 100%;
  scroll-snap-align: start; scroll-snap-stop: always; cursor: zoom-in;
}
.ns-gallery__slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ns-gallery__slide:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; }

/* Стрелки появляются под курсором; на сенсорных экранах листают пальцем. */
.ns-gallery__nav {
  position: absolute; top: 50%; z-index: 2; margin-top: -22px;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--ink); cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .25);
  opacity: 0; transition: opacity .15s ease, background .15s ease;
}
.ns-gallery__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.ns-gallery__nav--prev { left: 12px; }
.ns-gallery__nav--next { right: 12px; }
.ns-gallery__stage:hover .ns-gallery__nav, .ns-gallery__nav:focus-visible { opacity: 1; }
.ns-gallery__nav:hover { background: #fff; }
.ns-gallery__nav:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media (hover: none) { .ns-gallery__nav { display: none; } }

.ns-gallery__count {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(15, 23, 42, .72); color: #fff;
  font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .ns-gallery__nav, .ns-gallery__thumb { transition: none; }
}

/* Планшет: колонки уже друг под другом, фото не растягиваем на всю ширину. */
@media (min-width: 768px) and (max-width: 991px) {
  .ns-gallery { max-width: 534px; margin: 0 auto 24px; }
}
/* Телефон: как в приложениях маркетплейсов — фото на всю ширину, листают
   свайпом, миниатюр нет (лента превью съедала ещё 90 px до цены). */
@media (max-width: 767px) {
  .ns-gallery { display: block; max-width: none; }
  .ns-gallery__thumbs { display: none; }
  .ns-gallery__count { right: 10px; bottom: 10px; }
}

/* Просмотр фото на весь экран. */
html.ns-lock, html.ns-lock body { overflow: hidden; }
.ns-lightbox {
  position: fixed; inset: 0; z-index: 2000; display: none;
  align-items: center; justify-content: center;
  background: rgba(5, 8, 15, .97);
}
.ns-lightbox.is-open { display: flex; }
.ns-lightbox__img { max-width: 100vw; max-height: 100vh; max-height: 100dvh; object-fit: contain; user-select: none; }
.ns-lightbox__close, .ns-lightbox__nav {
  position: absolute; border: 0; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, .12); border-radius: 50%;
  width: 48px; height: 48px; font-size: 30px; line-height: 44px; text-align: center;
  transition: background .15s ease;
}
.ns-lightbox__close:hover, .ns-lightbox__nav:hover { background: rgba(255, 255, 255, .24); }
.ns-lightbox__close { top: 14px; right: 14px; }
.ns-lightbox__nav { top: 50%; margin-top: -24px; font-size: 38px; line-height: 42px; }
.ns-lightbox__nav--prev { left: 14px; }
.ns-lightbox__nav--next { right: 14px; }
.ns-lightbox__count {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: #CBD5E1; font-size: 14px; background: rgba(0, 0, 0, .4); padding: 4px 12px; border-radius: 12px;
}
@media (max-width: 767px) {
  /* На телефоне листают свайпом, стрелки не закрывают фото. */
  .ns-lightbox__nav { display: none; }
}

/* ==========================================================================
   СТРАНИЦЫ-СОСТОЯНИЯ: «готово» (common/success) и 404 (error/not_found)
   ========================================================================== */
.ns-status { max-width: 640px; margin: 24px auto 56px; text-align: center; }
.ns-status h1 { margin: 16px 0 12px; }
/* Картинка Higgsfield вместо значка (24.09): 404, пустая корзина, заказ оформлен. */
.ns-status__img {
  display: block; width: 360px; max-width: 100%; aspect-ratio: 16 / 10; height: auto;
  object-fit: cover; margin: 0 auto; border-radius: var(--r-card); background: var(--ink);
}
@media (max-width: 767px) { .ns-status__img { width: 100%; } }
.ns-status__icon {
  width: 64px; height: 64px; margin: 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--slate);
}
.ns-status__icon svg { width: 30px; height: 30px; }
.ns-status__icon--ok { background: #DCFCE7; color: #15803D; }
.ns-status__text { font-size: 16px; line-height: 1.6; color: var(--slate); }
.ns-status__text a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.ns-status__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.ns-status__search { display: flex; gap: 8px; margin: 24px 0 18px; }
.ns-status__search input { height: 48px; font-size: 16px; }
.ns-status__search .btn { flex: 0 0 auto; }
.ns-status__cats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ns-status__cats a {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 20px;
  color: var(--ink); font-size: 14px; background: var(--white);
}
.ns-status__cats a:hover { border-color: var(--red); color: var(--red); }
@media (max-width: 767px) {
  .ns-status { margin-top: 8px; }
  .ns-status__actions .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   КОНТАКТЫ (information/contact.twig)
   ========================================================================== */
.ns-contacts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 8px 0 40px; }
.ns-contact {
  display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto auto; column-gap: 16px;
  padding: 22px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white);
  color: var(--ink); text-decoration: none;
}
a.ns-contact:hover { border-color: var(--red); color: var(--ink); text-decoration: none; }
.ns-contact__icon {
  grid-row: 1 / 4; width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; background: var(--red-soft); color: var(--red);
}
.ns-contact__icon svg { width: 22px; height: 22px; }
.ns-contact__label { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ns-contact__value { font-family: var(--font-head); font-size: 22px; font-weight: 600; line-height: 1.3; margin: 2px 0 4px; }
.ns-contact__note { font-size: 14px; color: var(--slate); line-height: 1.5; }
.ns-contact__note a { color: var(--red); }
.ns-contact--main { background: var(--graphite); border-color: var(--graphite); color: #fff; }
a.ns-contact--main:hover { color: #fff; border-color: var(--red); }
.ns-contact--main .ns-contact__label, .ns-contact--main .ns-contact__note { color: #94A3B8; }
.ns-contact--main .ns-contact__icon { background: var(--red); color: #fff; }
.ns-contact-form { max-width: 640px; margin: 0 0 40px; }
.ns-contact-form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.ns-contact-form .ns-field { margin-bottom: 16px; }
@media (max-width: 767px) {
  .ns-contacts { grid-template-columns: 1fr; gap: 12px; }
  .ns-contact { padding: 16px; grid-template-columns: 40px 1fr; column-gap: 12px; }
  .ns-contact__icon { width: 40px; height: 40px; }
  .ns-contact__value { font-size: 19px; }
}

/* Первый экран на телефоне: текст лежит на всём кадре, затемняем ровнее. */
@media (max-width: 767px) {
  /* Текст на телефоне лежит поверх всего кадра, а медь даёт светлые блики —
     затемняем плотно и ровно, картинка остаётся фактурой, а не фоном текста. */
  .ns-hero__bg:after { background: linear-gradient(180deg, rgba(15, 23, 42, .90) 0%, rgba(15, 23, 42, .86) 55%, rgba(15, 23, 42, .72) 100%); }
  .ns-hero__bg img { object-position: 50% 100%; }
  .ns-hero h1, .ns-hero__lead { text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
  .ns-hero__lead { color: #E2E8F0; }
}


/* ==========================================================================
   ОБЛОЖКИ СТАТЕЙ (blog/article.twig, blog/blog.twig)
   ========================================================================== */
.ns-article-cover { display: block; margin: 0 0 24px; }
.ns-article-cover img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--r-card); background: #0B1220; }
.ns-post__img { display: block; margin: -23px -23px 16px; overflow: hidden; border-radius: var(--r-card) var(--r-card) 0 0; background: #0B1220; }
.ns-post__img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .35s ease; }
.ns-post:hover .ns-post__img img { transform: scale(1.03); }
@media (max-width: 767px) {
  .ns-article-cover { margin: 0 -15px 20px; }
  .ns-article-cover img { aspect-ratio: 4 / 3; border-radius: 0; }
}

.ns-search-page { max-width: 640px; margin: 0 0 24px; }

/* ==========================================================================
   ЦЕЛИ НАЖАТИЯ НА ТЕЛЕФОНЕ (аудит tools/browser/mobile_audit.mjs, 23.09)
   Ссылки верхней строки, «Все комплекты / Все статьи», галочки были 13–23 px
   в высоту при норме от 40.
   ========================================================================== */
@media (max-width: 767px) {
  .ns-topbar__links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; }
  .ns-section__link, .ns-home a[class*="__all"], .ns-link-more { display: inline-flex; align-items: center; min-height: 40px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; }
  .ns-assure a { display: inline-block; padding: 6px 0; }
  .ns-contact__note a { display: inline-block; padding: 8px 0; }
}


/* ==========================================================================
   ОТЗЫВЫ С WILDBERRIES (extension/module/ns_reviews)
   ========================================================================== */
.ns-stars { color: #F59E0B; letter-spacing: 1px; }
.ns-rating { display: flex; width: fit-content; align-items: center; gap: 6px; font-size: 14px; color: var(--slate); margin: 0 0 12px; }
a.ns-rating:hover { color: var(--red); text-decoration: none; }
.ns-rating b { color: var(--ink); }
.ns-rating--static { margin: 8px 0 0; }
.ns-reviews .ns-section__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.ns-reviews__sum { font-size: 15px; color: var(--slate); }
.ns-reviews__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ns-review {
  margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white);
  display: flex; flex-direction: column; gap: 10px;
}
.ns-review__stars { color: #F59E0B; letter-spacing: 1px; font-size: 15px; }
.ns-review__stars .is-off { color: var(--line); }
.ns-review blockquote { margin: 0; padding: 0; border: 0; font-size: 15px; line-height: 1.6; color: var(--ink); flex: 1 1 auto; }
.ns-review figcaption { font-size: 13px; color: var(--muted); line-height: 1.5; }
.ns-review figcaption b { color: var(--ink); }
.ns-review figcaption span { display: block; }
@media (max-width: 991px) { .ns-reviews__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  /* На телефоне отзывы — лентой с прокруткой пальцем, а не стеной текста. */
  .ns-reviews__list {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    margin: 0 -15px; padding: 0 15px 6px; scrollbar-width: none;
  }
  .ns-reviews__list::-webkit-scrollbar { display: none; }
  .ns-review { flex: 0 0 84%; scroll-snap-align: start; padding: 16px; }
}

/* Текст поверх фото — тень для читаемости везде, где он лежит на картинке. */
.ns-hero h1 { text-shadow: 0 2px 16px rgba(0, 0, 0, .45); }
.ns-hero__lead { text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }

/* Карточка статьи кликается целиком: ссылка заголовка растянута на всю
   карточку (::after). Раньше нажималось только название, «Читать» и сам блок
   были мёртвыми. */
.ns-post { position: relative; cursor: pointer; }
.ns-post__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-card); }
.ns-post:hover { border-color: var(--red); }
.ns-post:hover .ns-post__title a { color: var(--red); }
.ns-post:focus-within { outline: 2px solid var(--red); outline-offset: 2px; }


/* Фирменный логотип (вектор, пропорция ~7,7:1). */
.ns-logo__img { display: block; height: 30px; width: auto; }
.ns-footer .ns-logo__img { height: 26px; }
@media (max-width: 767px) {
  .ns-logo__img { height: 22px; }
}
@media (max-width: 360px) {
  .ns-logo__img { height: 19px; }
}

.ns-home-seo { padding: 8px 0 48px; }
.ns-home-seo .ns-seo { margin-top: 0; }
.ns-seo li > p { margin: 0; }

/* Логотип нажимается по всей высоте шапки, а не только по буквам:
   раньше зона была ровно с картинку (30 px), чуть выше-ниже — мимо. */
.ns-header .ns-logo { align-self: stretch; display: flex; align-items: center; padding: 0 10px; margin: 0 -10px; min-height: 48px; }
.ns-footer .ns-logo { display: inline-flex; padding: 10px; margin: -10px; }


/* ==========================================================================
   КАРУСЕЛЬ ПЕРВОГО ЭКРАНА (ns_home.twig)
   Слайды в одной ячейке сетки: высота = самому высокому слайду.
   ========================================================================== */
.ns-carousel { display: block; padding: 0; min-height: 0; }
.ns-carousel__track { display: grid; }
.ns-slide {
  grid-area: 1 / 1; position: relative; display: flex; align-items: center;
  padding: 72px 0 96px; min-height: 480px;
  opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s;
}
.ns-slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease; z-index: 1; }
.ns-slide .container { position: relative; z-index: 1; width: 100%; }
.ns-hero__title { color: #fff; font-size: 46px; line-height: 1.1; margin: 0 0 18px; }
.ns-hero__kicker b { color: #fff; }

.ns-carousel__nav { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 2; pointer-events: none; }
.ns-carousel__nav .container { display: flex; align-items: center; justify-content: space-between; }
.ns-carousel__dots, .ns-carousel__arrows { display: flex; gap: 8px; pointer-events: auto; }
.ns-carousel__dot {
  width: 28px; height: 28px; border: 0; padding: 0; background: none; cursor: pointer; position: relative;
}
.ns-carousel__dot::before {
  content: ""; position: absolute; left: 4px; right: 4px; top: 12px; height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, .35); transition: background .2s ease;
}
.ns-carousel__dot.is-active::before { background: var(--red); }
.ns-carousel__dot:hover::before { background: rgba(255, 255, 255, .7); }
.ns-carousel__arrow {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(15, 23, 42, .5); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, border-color .2s ease;
}
.ns-carousel__arrow:hover { background: var(--red); border-color: var(--red); }
.ns-carousel__arrow svg { width: 18px; height: 18px; }

@media (max-width: 1199px) { .ns-hero__title { font-size: 36px; } }
@media (max-width: 767px) {
  .ns-slide { padding: 40px 0 76px; min-height: 0; }
  .ns-hero__title { font-size: 29px; }
  .ns-carousel__nav { bottom: 18px; }
  .ns-carousel__nav .container { justify-content: center; }
  .ns-carousel__arrows { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ns-slide, .ns-slide.is-active { transition: none; } }
.ns-hero__title { text-shadow: 0 2px 16px rgba(0, 0, 0, .45); }
@media (max-width: 767px) { .ns-hero__title { text-shadow: 0 1px 12px rgba(0, 0, 0, .6); } }

/* Кнопки карусели на одном месте на всех слайдах: текст прижат к верху,
   кнопки — к низу слайда. Раньше каждый слайд центрировал свой текст по
   высоте, и кнопки прыгали при смене. */
.ns-slide { align-items: stretch; }
.ns-slide .container { display: flex; }
.ns-slide .ns-hero__in { display: flex; flex-direction: column; }
.ns-slide .ns-hero__lead { margin-bottom: 0; }
.ns-slide .ns-hero__actions { margin-top: auto; padding-top: 28px; }
.ns-slide .ns-hero__kicker { align-self: flex-start; }


/* ==========================================================================
   ПУНКТ ВЫДАЧИ СДЭК (checkout/shipping_method.twig)
   ========================================================================== */
.ns-pvz { margin: 12px 0 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); transition: box-shadow .3s ease; }
.ns-pvz.is-attention { box-shadow: 0 0 0 3px rgba(220, 38, 38, .35); }
.ns-pvz__head { font-weight: 600; margin-bottom: 10px; }
.ns-pvz__head small { color: var(--muted); font-weight: 400; }
.ns-pvz__chosen { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--white); border: 1px solid #86EFAC; border-radius: 8px; }
.ns-pvz__chosen svg { width: 18px; height: 18px; color: #15803D; flex: 0 0 18px; margin-top: 2px; }
.ns-pvz__chosen-text { flex: 1 1 auto; font-weight: 500; }
.ns-pvz__change { background: none; border: 0; padding: 4px 0; color: var(--red); text-decoration: underline; cursor: pointer; font-size: 14px; }
.ns-pvz__search { width: 100%; height: 46px; padding: 0 14px; font-size: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); margin-bottom: 10px; }
.ns-pvz__list { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; -webkit-overflow-scrolling: touch; }
.ns-pvz__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); cursor: pointer;
  font-size: 14px; line-height: 1.4; transition: border-color .15s ease;
}
.ns-pvz__item:hover, .ns-pvz__item:focus { border-color: var(--red); outline: none; }
.ns-pvz__item span { color: var(--muted); font-size: 13px; }
.ns-pvz__empty, .ns-pvz__more { color: var(--muted); font-size: 13px; margin: 6px 2px; }


/* ==========================================================================
   УВЕДОМЛЕНИЕ «ТОВАР В КОРЗИНЕ» (footer.twig, nsToast)
   ========================================================================== */
.ns-toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 1500; width: min(560px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px;
  background: var(--ink); color: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
  transform: translate(-50%, 140%); opacity: 0; transition: transform .25s ease, opacity .25s ease; pointer-events: none;
}
.ns-toast.is-open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.ns-toast--error { background: #7F1D1D; }
.ns-toast__text { flex: 1 1 auto; font-size: 14px; line-height: 1.4; }
.ns-toast__text a { color: #fff; text-decoration: underline; }
.ns-toast__go { flex: 0 0 auto; padding: 10px 14px; font-size: 14px; }
.ns-toast__close { flex: 0 0 auto; background: none; border: 0; color: #94A3B8; font-size: 24px; line-height: 1; padding: 4px 6px; cursor: pointer; }
@media (max-width: 767px) {
  /* Над закреплённой панелью «В корзину» в карточке. */
  .ns-toast { bottom: 84px; flex-wrap: wrap; }
  .ns-toast__text { flex-basis: calc(100% - 40px); }
  .ns-toast__go { flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .ns-toast { transition: none; } }
.ns-pvz [hidden] { display: none !important; }

/* Блок преимуществ на главной: текст темнее и крупнее — был 13 px светло-серым. */
.ns-usp__item span { font-size: 14px; color: var(--slate); line-height: 1.55; }

/* ==========================================================================
   КАРТОЧКА ТОВАРА В КАТАЛОГЕ — «витрина», а не «альбом» (23.09.2026)
   Фото лежало в белой рамке с отступом — каждая обложка выглядела как
   карточка в фотоальбоме. Теперь фото во всю ширину карточки на тёмном фоне
   (обложки сами тёмные), без внутренней рамки; серый обрезанный текст
   описания убран — он одинаковый у всех товаров серии и только шумит.
   ========================================================================== */
.product-thumb { border-color: transparent; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 0 0 1px var(--line); }
.product-thumb:hover { border-color: transparent; box-shadow: 0 10px 28px rgba(15, 23, 42, .14), 0 0 0 1px #CBD5E1; }
.product-thumb .image { background: #0B1220; overflow: hidden; }
.product-thumb .image a { padding: 0; }
.product-thumb .image img { border-radius: 0; object-fit: cover; background: #0B1220; transition: transform .35s ease; }
.product-thumb:hover .image img { transform: scale(1.03); }
.product-thumb .caption { padding: 14px 16px 0; }
.product-thumb .caption p { display: none; }
.product-thumb .caption h4 { margin-bottom: 10px; min-height: 2.7em; }
.product-thumb .button-group { padding: 0 16px 16px; }
@media (max-width: 767px) {
  .product-thumb .caption { padding: 12px 12px 0; }
  .product-thumb .button-group { padding: 0 12px 12px; }
}
@media (prefers-reduced-motion: reduce) { .product-thumb .image img { transition: none; } }

.ns-footer__legal a, .ns-footer__hours a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ns-footer__legal a:hover, .ns-footer__hours a:hover { color: #fff; }
@media (max-width: 767px) {
  /* Подвал на телефоне: «Каталог» и «Покупателям» рядом, остальное во всю ширину. */
  .ns-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .ns-footer__grid > div:first-child, .ns-footer__grid > div:last-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   ЛИЧНЫЙ КАБИНЕТ И ФОРМЫ АККАУНТА
   ========================================================================== */
.ns-acc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
.ns-acc-tile {
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px;
  padding: 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); color: var(--ink);
}
.ns-acc-tile:hover { border-color: var(--red); color: var(--ink); text-decoration: none; }
.ns-acc-tile svg { grid-row: 1 / 3; width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--red-soft); color: var(--red); }
.ns-acc-tile b { font-size: 17px; }
.ns-acc-tile span { font-size: 14px; color: var(--muted); }
.ns-acc-tile--muted svg { background: var(--surface); color: var(--slate); }
.ns-acc-menu .list-group-item { border-color: var(--line); }

/* Штатные формы кабинета (вход, регистрация, данные, адрес, пароль): подписи
   над полями, как в оформлении заказа, а не узкой колонкой слева. */
[id^="account-"] .form-horizontal .form-group { margin-left: 0; margin-right: 0; }
[id^="account-"] .form-horizontal .form-group > [class*="col-sm-"] { width: 100%; float: none; padding: 0; text-align: left; }
[id^="account-"] .form-horizontal .control-label { text-align: left; padding-top: 0; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
[id^="account-"] .form-control { height: 46px; font-size: 16px; }
[id^="account-"] fieldset { max-width: 640px; }
[id^="account-"] legend { font-family: var(--font-head); font-size: 22px; border: 0; margin-bottom: 14px; }
[id^="account-"] h2 { font-size: 28px; }
@media (max-width: 991px) { .ns-acc-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ns-acc-tiles { grid-template-columns: 1fr; } }

/* Ловушка для ботов в форме контактов — вне экрана, не display:none (его боты пропускают). */
.ns-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }