/**
 * custom.css — кастомные стили НОВОЙ версии сайта.
 *
 * Единый файл для всех собственных стилей новой версии. Подключается в
 * templates/page_template.php после темы (theme.min.css), поэтому перебивает
 * её значения. Инлайновые <style> в шаблонах не добавляем — правила пишем сюда.
 */

/* =========================================================================
 * Переопределение переменных темы
 * ========================================================================= */

/* Тема хранит --bs-info, но использует его только в rgba(var(--bs-info-rgb))
   (например .text-info); в местах вроде .link-info цвет прописан литералом
   #334AC0 — их перебиваем отдельно ниже. */
:root {
  --bs-info: #3f6187;
  --bs-info-rgb: 63, 97, 135;
}

.link-info {
  color: #3f6187 !important;
}
.link-info:hover,
.link-info:focus {
  color: #324e6c !important;
}

/* =========================================================================
 * Шапка (templates/page_template.php)
 * ========================================================================= */

/* Разделитель и отступ топбара — только на десктопе (lg+), чтобы в мобильной
   версии шапка не растягивалась и не было лишней полосы. Базовое значение
   перебивает padding-bottom из темы. */
.navbar-topbar {
  padding-bottom: 0;
}
@media (min-width: 992px) {
  .navbar-topbar {
    padding-bottom: 1rem;
    border-bottom: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
  }
}

/* Индикатор авторизации — логин покупателя может быть длинным (до 20 симв.),
   обрезаем многоточием, чтобы не растягивать шапку. */
.hdr-auth-name {
  display: block;
  max-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Активный статус индикаторов шапки (Войти/профиль, Заказы, Корзина) — класс
   .active на своей странице. text-dark в разметке задан с !important, поэтому
   активный цвет темы тоже перебиваем !important. */
.hdr-action-link.active {
  color: var(--bs-primary) !important;
}

/* Бейдж-счётчик у индикаторов шапки (корзина — количество товаров, заказы —
   количество незакрытых заказов покупателя) — тот же вид, что в мобильной нижней
   панели (.nissan-bottom-nav__badge): мелкий, прижат к верхнему правому углу
   иконки. Иконка обёрнута в .hdr-action-icon (inline-flex + position: relative) —
   бейдж позиционируется относительно неё, а не всей ссылки. */
.hdr-action-icon {
  display: inline-flex;
}
.hdr-action-badge {
  position: absolute;
  top: -.35rem;
  left: 50%;
  margin-left: .3rem;
  font-size: .6rem;
}

/* ---- Автодополнение поиска (suggest) ----
   Выпадающий список вариантов под полем поиска в шапке. Портировано со старой
   версии (Prototype Ajax.Autocompleter → suggest.php, стили div.autocomplete из
   images/style.css), адаптировано под тему. Список создаётся из JS
   (assets/js/jquery.init.js) как .nissan-suggest внутри .nissan-search, поэтому
   контейнер поля должен быть точкой отсчёта позиционирования. */
.nissan-search {
  position: relative;
}
.nissan-suggest {
  position: absolute;
  z-index: 1030; /* над контентом, ниже модалок Bootstrap */
  background: #fff;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .375rem;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  overflow: hidden;
}
.nissan-suggest ul {
  margin: 0;
  padding: .25rem 0;
  list-style: none;
}
.nissan-suggest li {
  padding: .3rem .75rem;
  cursor: pointer;
  font-size: .9375rem;
  line-height: 1.3;
  color: var(--bs-body-color, #212529);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nissan-suggest li.selected,
.nissan-suggest li:hover {
  background: rgba(247, 147, 0, .12); /* --bs-primary #f79300 */
}
.nissan-suggest li.mod .informal {
  color: var(--bs-secondary-color, #6c757d);
  font-style: italic;
  font-size: .8125rem;
}

/* =========================================================================
 * Список товаров — карточки (templates/page_product_list.php)
 * ========================================================================= */

/* ---- Раскладка карточки (CSS Grid) ----
   Мобайл: [картинка | производитель] / [характеристики] / [цена + корзина].
   Десктоп (lg+): [картинка | характеристики | правый столбец]. */
.pl-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "image manuf"
    "info  info"
    "buy   buy";
}
.pl-image { grid-area: image; }
.pl-manuf { grid-area: manuf; }
.pl-info  { grid-area: info; }
.pl-buy   { grid-area: buy; }
.pl-right { display: contents; }

/* Крупное фото-hover-галерея внутри .pl-image — страница товара (page_product_info)
   и список товаров категорий (page_product_list). Общие правила .pll-thumb /
   .pll-zones / .pll-dots заданы в блоке products_lists ниже; здесь, в отличие от
   products_lists (квадрат, точки поверх фото), блок шире — фото показывается в
   натуральную величину (без квадратного aspect-ratio и рамки), а точки-индикаторы
   вынесены ПОД фото. Раскладку/ширину задаём на самом .pll-thumb — grid-колонка
   .pl-image подстроится под неё. Базовая ширина 200px; на странице товара
   (.pi-card) на десктопе блок шире — переопределяется ниже. Разница между
   страницами и в поведении ссылки: в списке <a> ведёт на карточку товара, на
   странице товара — открывает fancybox (класс .pl-zoom) с полноразмерным фото. */
.pl-image .pll-thumb {
  width: 200px; max-width: 100%;
  flex-direction: column;
  aspect-ratio: auto;
  padding: 0;
  border: 0;
}
/* Точки-индикаторы — не поверх фото, а отдельной строкой под ним */
.pl-image .pll-dots {
  position: static;
  margin-top: .5rem;
}

/* Характеристики: на мобайле подпись-заголовок над данными */
.pl-info-label { text-transform: uppercase; letter-spacing: .03em; font-weight: 500; margin-bottom: .1rem; }

/* Цена + корзина: на мобайле в одну строку */
.pl-buy { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: .75rem; }

@media (min-width: 992px) {
  .pl-grid {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: none;
    column-gap: 1.5rem;
    row-gap: 0;
  }
  .pl-image, .pl-manuf, .pl-info, .pl-buy { grid-area: auto; }
  .pl-right {
    display: flex; flex-direction: column; justify-content: space-between;
    min-width: 210px; padding-left: 1.5rem; text-align: right;
    border-left: 1px solid var(--bs-border-color, #dee2e6);
  }
  .pl-right > .pl-buy { margin-top: 1rem; }
  .pl-buy { flex-direction: column; align-items: flex-end; justify-content: flex-start; }
  /* Характеристики: подпись слева, данные справа */
  .pl-info-row { display: flex; gap: .75rem; }
  .pl-info-label { flex: 0 0 25%; max-width: 25%; text-transform: none; letter-spacing: normal; font-weight: 400; margin-bottom: 0; }
  .pl-info-data { flex: 1 1 auto; min-width: 0; }
}

/* Инлайновый виджет количества, заменяющий кнопку «В корзину» (.pl-cart a.cart)
   на странице товара, в списке аналогов и на списочных карточках. Группа
   [корзина][−][счётчик][+] — тот же степпер, что в корзине (.basket-qty), плюс
   кнопка перехода в корзину. Рендерится из JS (assets/js/theme-custom.js). */
.pl-cart-widget { display: inline-flex; align-items: stretch; vertical-align: middle; }

/* КЛЮЧЕВОЕ: и кнопка, и виджет ВСЕГДА заполняют слот .pl-cart на 100% — поэтому
   они одной ширины в любом контексте и подмена «кнопка → виджет» не двигает блок
   («прыжка» нет нигде: страница товара, список page_product_list, grid-карточки
   products_lists с w-100, аналоги). Размер задаётся шириной самого слота (ниже). */
.pl-cart .cart,
.pl-cart .pl-cart-widget { width: 100%; }

/* Кнопка «В корзину»: содержимое (иконка + текст) держим в одну строку — Bootstrap 5
   у .btn разрешает перенос, и на узких экранах (2 колонки, ~≤375px) «В корзину»
   уезжало на вторую строку. */
.pl-cart .cart { white-space: nowrap; }

/* Товар уже в корзине и виджет отрисован сервером (templates/cart_widget.php) —
   исходную кнопку «В корзину» прячем (JS вернёт её при удалении товара). */
.pl-cart--has-item > .cart { display: none; }

/* Кнопка перехода в корзину — ОТДЕЛЬНО от группы: круглая, с отступом справа.
   Высоту берёт от степпера (align-self: stretch), ширина задана явно и равна
   высоте контролов темы (~3rem) — получается круг, заведомо крупнее кнопок −/+
   (aspect-ratio в flex-строке не работает: ширина считается до растягивания
   высоты, поэтому бралась ширина иконки). */
.pl-cart-go {
  flex: 0 0 auto; align-self: stretch;
  width: 3rem; padding: 0;
  margin-right: .4rem;
  border-radius: var(--bs-btn-border-radius) !important; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.pl-cart-go .bi-cart2 { vertical-align: -.125em; }

/* Степпер −/счётчик/+ (input-group) занимает оставшуюся ширину; кнопки компактные,
   счётчик тянется, заполняя остаток, но не схлопывается. */
.pl-cart-stepper { flex: 1 1 0; min-width: 0; }
.pl-cart-stepper .btn {
  flex: 0 0 auto; font-weight: 700; line-height: 1;
  padding-left: 0; padding-right: 0;
}
.pl-cart-stepper .minus, .pl-cart-stepper .plus { width: 2rem; }
.pl-cart-stepper .count {
  flex: 1 1 auto; width: auto; min-width: 2.5rem; font-weight: 700;
  padding-left: .15rem; padding-right: .15rem;
}
.pl-cart-stepper .count::-webkit-outer-spin-button,
.pl-cart-stepper .count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Компактный (sm) вариант — аналоги */
.pl-cart-widget-sm .pl-cart-go { width: 2.4rem; }
.pl-cart-widget-sm .pl-cart-stepper .minus,
.pl-cart-widget-sm .pl-cart-stepper .plus { width: 1.8rem; }
.pl-cart-widget-sm .pl-cart-stepper .count { min-width: 2.2rem; }

/* На мобильном (< lg — там же в подвале есть фикс-кнопка «Корзина», .nissan-bottom-nav)
   кнопка перехода в корзину внутри виджета избыточна и на очень узких экранах
   выталкивает степпер за границы карточки. Прячем её — степпер занимает весь слот. */
@media (max-width: 991.98px) {
  .pl-cart-go { display: none; }
}

/* Ширина слота по контексту. Карточки товара/списка (обе используют .pl-buy) —
   10rem; в products_lists слот занимает всю ширину карточки (кнопка там w-100),
   поэтому ширину ему не задаём. */
.pl-buy .pl-cart { width: 10rem; max-width: 100%; }

/* Аналоги — это ТАБЛИЦА: у ячейки (td) `width` лишь «подсказка», auto-раскладка
   всё равно растягивает колонку под содержимое (intrinsic-ширина поля-счётчика
   ~170px раздувает столбец). Поэтому фиксируем ширину самих кнопки и виджета
   (не `100%` от td, а явные 8.75rem) — тогда max-content ячейки постоянен и колонка
   не «прыгает». Счётчик ужимается внутри виджета. */
.pi-alt-table .pl-cart { width: 8.75rem; }
.pi-alt-table .pl-cart .cart,
.pi-alt-table .pl-cart .pl-cart-widget { width: 8.75rem; max-width: 8.75rem; }
/* Скрытые ссылки дополнительных фото товара — участвуют только в fancybox-группе */
.pl-zoom-item { display: none; }
.pl-icon-btn {
  width: 2rem; height: 2rem; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 50%; border: 1px solid var(--bs-border-color, #dee2e6);
  color: #6c757d; text-decoration: none; background: #fff;
}
.pl-icon-btn:hover { color: var(--bs-primary); }
.pl-icon-btn img { display: block; }
.pl-badge-used { background: #f0f0f0; color: #6c757d; }
/* CSS-only тоггл «+ ещё N» */
.pl-toggle-cb { position: absolute; width: 0; height: 0; opacity: 0; }
.pl-extra { display: none; }
.pl-toggle-cb:checked ~ .pl-extra-inline { display: inline; }
.pl-toggle-cb:checked ~ .pl-extra-block  { display: block; }
.pl-toggle { cursor: pointer; user-select: none; white-space: nowrap; margin-left: 5px;}
.pl-toggle .pl-less { display: none; }
.pl-toggle-cb:checked ~ .pl-toggle .pl-more { display: none; }
.pl-toggle-cb:checked ~ .pl-toggle .pl-less { display: inline; }

/* «Подходит для» — чипы (собственные стили) со сворачиванием «+ ещё N» */
.pl-chips { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; }
.pl-chip {
  display: inline-block;
  padding: .3rem .6rem;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: #3c3c3c;
  background-color: rgba(60, 60, 60, .1);
  border-radius: .3rem;
  cursor: default;
}
.pl-extra-chip { display: none; }
.pl-toggle-cb:checked ~ .pl-extra-chip { display: inline-block; }
/* В flex-ряду .pl-chips интервалы задаёт gap — левый отступ тоггла обнуляем */
.pl-chips .pl-toggle { margin-left: 0; }
/* Кнопка-тоггл «+ ещё N» / «свернуть» (btn-soft-info) — размеры под чипы */
.pl-chip-toggle {
  margin-left: 0;
  --bs-btn-padding-y: .3rem;
  --bs-btn-padding-x: .6rem;
  --bs-btn-font-size: .8125rem;
  --bs-btn-font-weight: 500;
}

.clubprice {
  font-size: .8125rem;;
  font-weight: bold;
  color: #2D5A2D;
  white-space: nowrap;
  display: inline-block;
}
a.clubprice {
  color: #2D5A2D !important;
}

/* ---- Модалка «В корзину» (fancybox #addToCart) ----
   Бэкенд /ajax_request.php?mode=addToCart отдаёт legacy-разметку
   (.block/.row/.label/.data/.summa/.quantity/.actions), а её стили из старой
   images/style.css в новой версии не подключены. Переносим оформление сюда,
   скопив под #addToCart, и перебиваем бутстраповский .row (flex). */
.fancybox-inner .block { margin: 0; }
#addToCart { color: #000; }
#addToCart .block_head { padding: 0 0 10px; background: transparent; }
#addToCart .block_head h1 { font-family: Arial, sans-serif; font-size: 18px; font-weight: bold; margin: 0; }
#addToCart .block_content { padding: 10px 0 0; background: transparent; overflow: hidden; }
#addToCart .product_image { float: left; width: 164px; margin: 0 15px 15px 0; }
#addToCart .product_image img { max-width: 164px; height: auto; border: 1px solid #a5a5a5; }
#addToCart .product_info { overflow: hidden; margin: 0 0 10px; line-height: 18px; }
/* .row — перебиваем flex из Bootstrap, здесь это обычная строка */
#addToCart .product_info .row { display: block; width: auto; margin: 0; border-bottom: 1px solid #e4e4e4; }
/* Bootstrap 5 задаёт `.row > *` { width:100%; max-width:100%; padding:gutter; margin-top }
   — из-за этого .data растягивался на 100% и падал под плавающий .label.
   Сбрасываем, чтобы .label/.data снова стояли в две колонки, как в старой версии. */
#addToCart .product_info .row > * { width: auto; max-width: none; padding-left: 0; padding-right: 0; margin-top: 0; }
#addToCart .product_info .row .label { float: left; width: 150px; padding: 5px 0; }
#addToCart .product_info .row .data { overflow: hidden; padding: 5px 0; text-align: right; }
#addToCart .product_info .row.first .label,
#addToCart .product_info .row.first .data { padding-top: 0; }
#addToCart .product_info .row.last,
#addToCart .product_info .row:last-child { border-bottom: none; }
#addToCart .product_info span.price { font-size: 12pt; font-weight: bold; color: #000; }
#addToCart .quantity_summa { margin-top: 20px; overflow: hidden; }
#addToCart .summa { float: right; margin-left: 10px; text-align: right; }
#addToCart .summa .price { font-size: 16pt; font-weight: bold; color: #000; }
#addToCart .quantity { float: left; margin-top: 7px; }
#addToCart .quantity input { float: left; font-size: 14px; padding: 5px; height: auto; text-align: center; border: 1px solid #a5a5a5; background: #fff; }
#addToCart .quantity input.plus,
#addToCart .quantity input.minus { cursor: pointer; }
#addToCart .quantity input.count { width: 50px; border-left: none; border-right: none; font-weight: bold; }
#addToCart .actions { overflow: hidden; margin-top: 20px; }
#addToCart .actions input { font-size: 14px; padding: 7px; height: auto; margin-right: 2px; text-align: center; cursor: pointer; border: 1px solid #a5a5a5; background: #fff; }
#addToCart .actions .cart { float: right; font-weight: bold; background: #f7931e; border-color: transparent; color: #fff; }
#addToCart .actions .cancel { float: left; }
#addToCart .clear { clear: both; }

/* =========================================================================
 * Списки товаров внизу страницы (templates/products_lists.php)
 *
 * Заголовок — <h2> верхнего уровня (акцент даёт тема-правило `.container > h2`).
 * Сетка — стандартные bootstrap row / row-cols-*. Здесь только оформление карточки.
 * ========================================================================= */

/* Кнопка «Редактировать список» (admin) выводится с float-end перед заголовком.
   Сетка товаров — flex-контейнер (BFC), который иначе сжимается, обтекая float,
   и список сужается до ширины кнопки. Очищаем float, чтобы блок занимал 100%
   ширины контейнера (заголовок <h2> при этом остаётся на своём месте). На
   десктопе первый видимый блок — .pll-list-row (сетка), на мобильных —
   .pll-swiper (слайдер); очищаем оба. */
.pll-list-row,
.pll-swiper { clear: both; }

/* Карточка товара */
.pll-card { background: #fff; }

/* Изображение — квадратная рамка, фото по центру */
.pll-thumb {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; padding: 1rem .5rem; background: #fff;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.pll-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* Hover-галерея карточки: фото делится по горизонтали на прозрачные зоны
   (по числу фото). Наведение на зону меняет картинку (JS в theme-custom.js) и
   активную точку-индикатор внизу. Зоны кликабельны — клик уходит по ссылке
   товара (родительский <a>). На тач-устройствах hover не работает: показывается
   первое фото + точки как индикатор количества. */
.pll-zones {
  position: absolute; inset: 0; z-index: 3;
  display: flex;
}
.pll-zone { flex: 1 1 0; }
.pll-dots {
  position: absolute; left: 0; right: 0; bottom: .4rem; z-index: 4;
  display: flex; justify-content: center; gap: .25rem;
  pointer-events: none;
}
.pll-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(0, 0, 0, .25);
  transition: background-color .15s ease, transform .15s ease;
}
.pll-dot.is-active { background: var(--bs-primary); transform: scale(1.15); }

/* Тело карточки — колонка, кнопка прижата вниз */
.pll-card-body {
  display: flex; flex-direction: column;
  padding: .85rem .45rem; flex: 1 1 auto;
}

/* Производитель + код — одна строка, друг за другом, прижаты влево:
   сначала производитель, затем его номер. Не переносим на новую строку.
   Производитель занимает ровно свой текст и при нехватке места сжимается
   с обрезкой многоточием; номер идёт сразу за ним и не сжимается. */
.pll-meta {
  display: flex; align-items: baseline;
  gap: .4rem; margin-bottom: .35rem;
  min-width: 0; overflow: hidden;
}
.pll-company {
  flex: 0 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #21386e; font-size: .85rem; font-weight: 700; line-height: 1.2;
}
.pll-company:hover { color: #16264d; }
.pll-code {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: .85rem; line-height: 1.2;
}
.pll-name {
  font-size: .85rem; line-height: 1.3;
  margin-bottom: .6rem;
}
.pll-name:hover { color: var(--bs-primary) !important; }

/* Цены — в одну строку, прижаты к левой стороне: реальная, затем клубная */
.pll-price-line {
  display: flex; justify-content: flex-start; align-items: baseline;
  flex-wrap: wrap; gap: .1rem .4rem;
}
.pll-wholesale { line-height: 1.2; }
.pll-price { font-size: 1rem; }

/* Мобильный слайдер списка товаров (< lg) — Swiper.
   Десктоп (≥ lg) выводит карточки сеткой (.pll-list-row) и слайдер там скрыт
   (d-lg-none) и отключён в JS. Здесь — только оформление мобильного слайдера.
   Ширина слайда задаётся в % (slidesPerView: 'auto' в theme-custom.js): около
   двух карточек с «выглядыванием» следующей — подсказка, что ряд листается;
   на более широких экранах карточек в кадре больше. */
.pll-swiper {
  --swiper-theme-color: var(--bs-primary);
}
.pll-swiper .swiper-slide {
  width: 46%;
  height: auto;         /* высоту тянет флекс-обёртка — карточки выравниваются */
}
@media (min-width: 576px) {
  .pll-swiper .swiper-slide { width: 31%; }
}
@media (min-width: 768px) {
  .pll-swiper .swiper-slide { width: 23%; }
}

/* =========================================================================
 * Страница товара (templates/page_product_info.php)
 *
 * Основной блок повторяет крупное фото-hover-галерею из списка категорий
 * (.pl-image .pll-thumb, см. выше), но клик по фото открывает fancybox
 * (.pl-zoom) с полноразмерным снимком. Здесь — только миниатюры аналогов.
 * ========================================================================= */

/* Админ-кнопки товара выводятся с float-end перед <h1>. Карточка товара — flex
   (BFC), которая иначе сжимается рядом с float; очищаем float, чтобы карточка
   занимала 100% ширины контейнера (позиция <h1> при этом не меняется). */
.pi-card { clear: both; }

/* Фото-галерея на странице товара заметно шире, чем в списке категорий: базовые
   200px (.pl-image .pll-thumb) переопределяем на десктопе на 390px — тут есть
   место, и в блок подставляются большие снимки (см. page_product_info.php). На
   мобильном ширина остаётся 200px, чтобы не вытеснять колонку производителя. */
@media (min-width: 992px) {
  .pi-card .pl-image .pll-thumb { width: 390px; }
}

/* Фиксированная высота области фото. Снимки товара разной высоты, и при смене
   фото (hover-галерея) блок «прыгал» по вертикали. Задаём картинке жёсткую
   высоту + object-fit: contain — фото вписывается в постоянный по размеру блок,
   раскладка не скачет. Мобильная высота меньше десктопной (уже ширина). */
.pi-card .pl-image .pll-gallery-img {
  width: 100%; height: 240px; object-fit: contain;
}
@media (min-width: 992px) {
  .pi-card .pl-image .pll-gallery-img { height: 340px; }
}
/* Мобильная (< lg): галерея товара занимает всю ширину блока и центрируется, фото
   растягивается по горизонтали на весь блок (высота — по пропорции, без фикс.
   высоты). На десктопе действуют фикс. ширина .pll-thumb (390px) и высота фото
   (340px) выше. */
@media (max-width: 991.98px) {
  .pi-card .pl-image .pll-thumb { width: 100%; margin-left: auto; margin-right: auto; }
  .pi-card .pl-image .pll-gallery-img { height: auto; }
}

/* Характеристики товара (вторая колонка): подпись-заголовок ВСЕГДА над данными,
   а не слева. На мобильном так и было; на десктопе нейтрализуем flex-раскладку
   «подпись 25% слева | данные справа» (@media выше), возвращая блочную укладку
   и капс-подпись. В списке категорий (.pl-card без .pi-card) остаётся слева. */
.pi-card .pl-info-row { display: block; }
.pi-card .pl-info-label {
  flex: none; max-width: none;
  text-transform: uppercase; letter-spacing: .03em; font-weight: 500;
  margin-bottom: .1rem;
}

/* На странице товара цена и корзина в панели .pi-buy-box идут В СТОЛБИК на всех
   брейкпоинтах (переопределяем общий row-на-мобайле и flex-end-на-десктопе из
   .pl-buy): цена сверху, кнопка «В корзину» снизу и на ВСЮ ширину панели. Слот
   .pl-cart и его содержимое (кнопка/виджет) — на 100% фиксированной панели, поэтому
   ширина не зависит от состояния (кнопка ↔ виджет). Счётчик виджета ужимается,
   заполняя слот (см. .pl-cart-stepper .count { min-width: 2.5rem } выше). */
.pi-buy-box .pl-buy { flex-direction: column; align-items: stretch; }
.pi-buy-box .pl-cart { width: 100%; max-width: none; }
.pi-buy-box .pl-cart .cart,
.pi-buy-box .pl-cart .pl-cart-widget { width: 100%; max-width: none; }

/* Тема добавляет крупный вертикальный padding (1.75rem) первой/последней строкам
   любой таблицы внутри .card (.card table>tbody>tr:first-child>td). В таблицах
   «Полезные статьи» и «Наш сервис» возвращаем стандартный padding ячеек Bootstrap
   (.75rem), чтобы крайние строки не выделялись отступом. */
.card .pi-clauses-table > tbody > tr:first-child > td,
.card .pi-service-table > tbody > tr:first-child > td { padding-top: .75rem; }
.card .pi-clauses-table > tbody > tr:last-child > td,
.card .pi-service-table > tbody > tr:last-child > td { padding-bottom: .75rem; }

/* Таблица аналогов */
.pi-alt-table > :not(caption) > * > * { padding: .6rem .75rem; }
.pi-alt-col-photo { width: 72px; }

/* Миниатюра аналога — по клику открывает fancybox-галерею всех его фото */
.pi-alt-thumb {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: .2rem; background: #fff;
  border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .375rem;
}
.pi-alt-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pi-alt-thumb-empty { font-size: 1.25rem; }
/* Бейдж количества фото на миниатюре аналога */
.pi-alt-count {
  position: absolute; top: 0; right: 0;
  min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 600; line-height: 1; color: #fff;
  background: var(--bs-primary); border-radius: 1rem;
}

/* Список аналогов на странице товара (templates/page_product_info.php) — строки
   .pi-alt-list > .pi-alt-item на сетке Bootstrap (row/col), как корзина. Визуальные
   классы (.bi-thumb / .bk-* / .bi-name / .bi-sum) переиспользуются из корзины. */
.pi-alt-list > .pi-alt-item:last-child { border-bottom: 0 !important; }


/* Мобильная цена аналога (2-я строка карточки слева) — вертикальный стек: текущая цена
   сверху крупнее, ниже клубная/старая. Базовый .bi-sum-mobile (инлайн-строка) остаётся у
   корзины — здесь переопределяем ТОЛЬКО в списке аналогов. */
.pi-alt-list .bi-sum-mobile {
  flex-direction: column; align-items: flex-start; flex-wrap: nowrap;
  gap: 0; margin-bottom: 0;
}

/* Слот «В корзину» — фикс. ширины справа в блоке покупки (цена слева тянется flex-grow-1).
   Кнопка и виджет одной ширины (без «прыжка»), вмещает sm-виджет [корзина][−][счётчик][+];
   на 100% слота их растягивают общие правила .pl-cart .cart / .pl-cart .pl-cart-widget. */
.pi-alt-list .pl-cart { flex: 0 0 auto; width: 9.5rem; max-width: 100%; }

/* =========================================================================
 * Кнопка «Поставщики» (admin) — цветовая подсветка по ключевым поставщикам.
 *
 * Перенос цветовых схем из legacy images/style.css. У кнопки классы
 * `highlight highlight<N>`, где N — сумма битов актуальных ключевых поставщиков:
 *   4 = Текстильщики (#c5f7a5), 8 = Косино (#ffcca7),
 *   16 = Бибирево (#8FB4E6), 32 = РИО Дмитровка (#c9a2ff).
 * Комбинация даёт горизонтальный градиент из цветов присутствующих поставщиков.
 * Используется в карточке списка (page_product_list.php) и на странице товара
 * (page_product_info.php — основной товар и аналоги). Селекторы `a.highlight...`
 * перебивают фон/цвет Bootstrap-кнопки .btn-outline-secondary во всех состояниях.
 * ========================================================================= */
a.highlight { font-weight: 600; }
a.highlight,
a.highlight:hover,
a.highlight:focus { color: #212529; border-color: rgba(0, 0, 0, .15); }
a.highlight.highlight4  { background: #c5f7a5; }
a.highlight.highlight8  { background: #ffcca7; }
a.highlight.highlight12 { background: linear-gradient(to right, #c5f7a5, #ffcca7); }
a.highlight.highlight16 { background: #8FB4E6; }
a.highlight.highlight20 { background: linear-gradient(to right, #c5f7a5, #8FB4E6); }
a.highlight.highlight24 { background: linear-gradient(to right, #ffcca7, #8FB4E6); }
a.highlight.highlight28 { background: linear-gradient(to right, #c5f7a5, #ffcca7, #8FB4E6); }
a.highlight.highlight32 { background: #c9a2ff; }
a.highlight.highlight36 { background: linear-gradient(to right, #c5f7a5, #c9a2ff); }
a.highlight.highlight40 { background: linear-gradient(to right, #ffcca7, #c9a2ff); }
a.highlight.highlight44 { background: linear-gradient(to right, #c5f7a5, #ffcca7, #c9a2ff); }
a.highlight.highlight48 { background: linear-gradient(to right, #8FB4E6, #c9a2ff); }
a.highlight.highlight52 { background: linear-gradient(to right, #c5f7a5, #8FB4E6, #c9a2ff); }
a.highlight.highlight56 { background: linear-gradient(to right, #ffcca7, #8FB4E6, #c9a2ff); }
a.highlight.highlight60 { background: linear-gradient(to right, #c5f7a5, #ffcca7, #8FB4E6, #c9a2ff); }

/* =========================================================================
 * Панель навигации — фильтр производителей (templates/panel_navigation_body_new.php)
 * ========================================================================= */

/* CSS-only сворачивание списка производителей «+ ещё N» */
.manuf-toggle-cb { position: absolute; width: 0; height: 0; opacity: 0; }
.manuf-extra { display: none !important; }
.manuf-toggle-cb:checked ~ .manuf-extra { display: inline-block !important; }
.manuf-toggle { cursor: pointer; user-select: none; white-space: nowrap; }
.manuf-toggle-less { display: none; }
.manuf-toggle-cb:checked ~ .manuf-toggle .manuf-toggle-more { display: none; }
.manuf-toggle-cb:checked ~ .manuf-toggle .manuf-toggle-less { display: inline; }

/* =========================================================================
 * Корзина (templates/basket_view.php) и форма заказа (templates/order_create.php)
 * ========================================================================= */



/* thead убран — первому ряду товаров возвращаем верхний отступ (тема задаёт первой
   строке padding-top:1.75rem; корзине хватает .75rem, как у остальных строк). */
.card .basket-table > tbody > tr:first-child > td { padding-top: .75rem; }
/* -------------------------------------------------------------------------
 * Блочная (div) адаптивная раскладка корзины на СЕТКЕ BOOTSTRAP (row/col).
 * Разметка: .basket-list > .basket-item(.border-bottom.py-3) > .row.
 *
 * Раскладку задают классы Bootstrap (см. templates/basket_view.php):
 *   Десктоп (≥ lg): фото col-lg-2 | контент col-lg-6 | итог col-lg-2 |
 *     контролы col-lg-2 (вложенный .row.flex-lg-column → удаление ПОД степпером).
 *   Мобильный (< lg): фото col-4 | контент col-8; ниже контролы col-12 с
 *     вложенным .row (степпер col-4 под фото | удаление col-8 справа).
 * Здесь — только оформление компонентов (не раскладка).
 * ------------------------------------------------------------------------- */
.basket-list > .basket-item:last-child { border-bottom: 0 !important; }

/* Фото — иконка товара, ссылка на страницу товара (галерея убрана) */
.bi-thumb {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 8.5rem; aspect-ratio: 1 / 1; padding: .35rem; background: #fff;
  border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .5rem; overflow: hidden;
  transition: border-color .15s ease-in-out;
}
a.bi-thumb:hover { border-color: var(--bs-primary); }
.bi-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* Производитель + номер в одну строку */
.bk-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem; margin-bottom: .15rem; }

/* Мобильная цена (корзина + список аналогов): обычная/клубная/старая — flex-строка с
   РЕАЛЬНЫМ зазором (gap), а не через пробелы между тегами. Минификатор вывода
   (loader.php: preg_replace('/>\s+</','><')) вырезает пробелы между тегами, из-за чего
   на инлайн-раскладке цены смыкались вплотную. gap работает независимо от разметки. */
.bi-sum-mobile {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem;
  margin-bottom: .35rem;
}

/* Виджет количества: input-group [−][поле][+]. Ширина — по содержимому (компактная,
   ≈ под фото); поле-счётчик фиксировано, кнопки не тянутся. Раскладку (лево под фото на
   моб., право на десктопе) задают классы колонки. */
.basket-qty { width: auto; }
.basket-qty .count { flex: 0 0 2.75rem; width: 2.75rem; font-weight: 700; padding-left: .25rem; padding-right: .25rem; }
.basket-qty .btn { flex: 0 0 auto; width: 2.25rem; font-weight: 700; line-height: 1; }
/* Убираем нативные стрелки на случай inputmode=numeric */
.basket-qty .count::-webkit-outer-spin-button,
.basket-qty .count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Удаление — ОТДЕЛЬНАЯ кнопка справа (btn-outline-danger), не в группе количества */
.bi-delete .delete { white-space: nowrap; }

/* Итоги корзины */
.basket-summary dt, .basket-summary dd { padding-top: .15rem; padding-bottom: .15rem; }
.basket-summary .price { color: #000; }

/* Блок клубной программы в форме заказа — светло-зелёный акцент (как в старой версии) */
.order-club-box { background: rgba(45, 90, 45, .08); border-color: rgba(45, 90, 45, .25) !important; }

/* =========================================================================
 * Просмотр заказа (templates/order_view.php)
 * ========================================================================= */

/* Заголовок страницы — прямой потомок .container (тема-правило .container > h1
   даёт оранжевый акцент). Статус выводится с float-end перед заголовком, поэтому
   первый блок под заголовком очищает обтекание (по образцу .pll-list-row). */
.ov-clear { clear: both; }

/* Бейдж статуса заказа — оранжевый акцент темы */
.ov-status {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .85rem; border-radius: 2rem;
  font-size: .85rem; font-weight: 600; white-space: nowrap;
  color: var(--bs-primary); background: rgba(247, 147, 0, .1);
  border: 1px solid rgba(247, 147, 0, .4);
}
.ov-status .bi-circle-fill { font-size: .5rem; }

/* Реквизиты заказа — строки «подпись / значение» с нижними разделителями */
.ov-row { display: flex; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--bs-border-color, #dee2e6); }
.ov-row:first-child { padding-top: 0; }
.ov-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ov-label { flex: 0 0 30%; max-width: 30%; color: #6c757d; }
.ov-value { flex: 1 1 auto; min-width: 0; }
@media (max-width: 575.98px) {
  .ov-row { flex-direction: column; gap: .1rem; }
  .ov-label { flex-basis: auto; max-width: 100%; }
}

/* Блок оплаты — подпись слева, значение справа */
.ov-payment dt, .ov-payment dd { padding-top: .15rem; padding-bottom: .15rem; }
.ov-payment .price { color: #000; }

/* =========================================================================
 * Авторизация / восстановление пароля (templates/authorization.php)
 * Регистрация (templates/registration.php)
 * ========================================================================= */

/* Формам входа/восстановления/регистрации не нужна вся ширина .container —
   ограничиваем и центрируем блок (одинаковая ширина на обеих страницах). */
.auth-wrap {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Вкладки Авторизация / Регистрация (templates/auth_tabs.php). Активная —
   акцент темы, некликабельна (это <span>); неактивная — приглушённая ссылка. */
.auth-tabs .nav-link {
  font-weight: 600;
  color: #6c757d;
}
.auth-tabs .nav-link:not(.active):hover {
  color: var(--bs-primary);
}
.auth-tabs .nav-link.active {
  color: var(--bs-primary);
  cursor: default;
}

/* Капча (антиспам-код) — картинка в отдельном боксе рядом с кнопкой обновления
   и полем ввода (flex-ряд с gap, не input-group — чтобы был зазор). Оригинал
   картинки 100×38px; высоту бокса выравниваем по соседним .form-control/.btn. */
.reg-captcha-box {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  background: #fff;
}
.reg-captcha {
  display: block;
  height: calc(1.5em + 0.75rem);
  width: auto;
}

/* Уведомление о необходимости регистрации — оранжевый акцент (палитра темы) */
.auth-notice {
  background: rgba(247, 147, 0, .08);
  border: 1px solid rgba(247, 147, 0, .35);
  border-left-width: .25rem;
  color: #212529;
}
.auth-notice a {
  color: var(--bs-primary);
  font-weight: 600;
}

/* =========================================================================
 * Статьи / руководства по ремонту (page_clause_list.php → aboutprod, repairs)
 *
 * Список текстовых материалов карточками: слева фото (если есть), справа
 * заголовок + краткое описание + «Читать далее». Автор и дата не выводятся;
 * кнопка «Редактировать» (админ) — float-end перед заголовком.
 * ========================================================================= */

.cl-row { display: flex; gap: 1.25rem; }

/* Фото-превью статьи слева. Показывается только если у статьи есть изображение
   (иначе текст занимает всю ширину карточки). */
.cl-thumb {
  flex: 0 0 200px; max-width: 200px; align-self: flex-start;
  display: block; overflow: hidden; background: #fff;
  border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .5rem;
}
.cl-thumb img { width: 100%; height: auto; display: block; }

.cl-body { flex: 1 1 auto; min-width: 0; }

/* Заголовок статьи — тёмная ссылка, оранжевый акцент темы при наведении. */
.cl-title a:hover { color: var(--bs-primary) !important; }

/* Краткое описание — не более трёх строк. */
.cl-descr {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* «Читать далее» — акцент темы. */
.cl-more { color: var(--bs-primary); }
.cl-more:hover { color: var(--bs-primary); text-decoration: underline !important; }
.cl-more .bi-chevron-right { vertical-align: -.05em; }

/* На узких экранах фото над текстом. */
@media (max-width: 575.98px) {
  .cl-row { flex-direction: column; gap: 1rem; }
  .cl-thumb { flex-basis: auto; max-width: 100%; }
}

/* ---- Страница конкретной статьи (page_clause_view.php) ----
   Та же карточка, но с полным содержимым. Картинки/таблицы контента не должны
   вылезать за пределы карточки. */
.cl-content { line-height: 1.6; }
.cl-content img { max-width: 100%; height: auto; }
.cl-content table { max-width: 100%; }
.cl-content > :last-child { margin-bottom: 0; }

/* =========================================================================
 * Контакты (page_contacts.php → templates/contacts.php)
 *
 * Карточка площадки: слева инфо-колонка (метро → адрес / режим работы /
 * телефоны, каждый раздел с круглой иконкой-бейджем), справа — карта
 * (готовый виджет Яндекс.Карт, во всю высоту инфо-колонки). На мобильном
 * колонки стекаются: инфо-блок сверху, карта под ним во всю ширину.
 * ========================================================================= */

/* Раздел с иконкой слева (адрес / режим работы / один телефон). */
.ct-row { display: flex; align-items: flex-start; }
.ct-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(247, 147, 0, .12);
  color: var(--bs-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  margin-right: .875rem;
}

/* Ссылки на карты (Яндекс/Google) — пилюли на светлом акценте. */
.ct-map-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.ct-map-links a {
  display: inline-block;
  padding: .25rem .75rem;
  border-radius: 50rem;
  background: rgba(247, 147, 0, .1);
  color: var(--bs-primary);
  font-weight: 600; font-size: .85rem;
  text-decoration: none; white-space: nowrap;
}
.ct-map-links a:hover { background: rgba(247, 147, 0, .18); }

/* Режим работы: день слева, время справа (жирное). */
.ct-hours { display: flex; justify-content: space-between; gap: 1.5rem; }
.ct-hours + .ct-hours { margin-top: .25rem; }

/* Телефоны: свой .ct-row на каждый номер. */
.ct-phones .ct-row + .ct-row { margin-top: .75rem; }
.ct-phone-label { font-size: .8rem; color: #adb5bd; margin-bottom: .1rem; }
.ct-phone { display: block; color: #212529; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ct-phone:hover { color: var(--bs-primary); }

/* Карта — готовый iframe-виджет, тянется на всю высоту инфо-колонки
   (обе колонки в одном flex-row, поэтому высоты выравниваются сами).
   На мобильном (колонки стекаются) высота фиксируется явно. */
.ct-map { background: #eceff1; min-height: 340px; }
.ct-map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 991.98px) {
  .ct-map { min-height: 320px; }
}
@media (max-width: 575.98px) {
  .ct-map { min-height: 260px; }
}

/* =========================================================================
 * Мои заказы (templates/my_orders.php)
 * ========================================================================= */

/* Таблица использует .basket-table (отступы/шапка). Подсветка строки открытого
   заказа — лёгкий оранжевый фон (механизм «вкладок»: my_orders/<number>/). */
.mo-table > tbody > tr.mo-current > * { background: rgba(247, 147, 0, .07); }

/* .basket-table обнуляет верхний отступ первой строки — для таблицы заказов
   возвращаем его (иначе первая строка прижата к шапке и выглядит плохо). */
.card .basket-table.mo-table > tbody > tr:first-child > td { padding-top: .75rem; }

/* Номер заказа — ссылка на страницу заказа (синий акцент, как в корзине) */
.mo-num { color: #21386e; font-weight: 700; text-decoration: none; }
.mo-num:hover { color: var(--bs-primary); text-decoration: underline; }

/* Бейдж статуса заказа: цвет зависит от статуса (в наборе — оранжевый,
   выполнен — зелёный, «увы» — красный). Точка слева повторяет цвет текста. */
.mo-status {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .75rem; border-radius: 2rem;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.mo-status .bi-circle-fill { font-size: .5rem; }
.mo-status--progress {
  color: var(--bs-primary); background: rgba(247, 147, 0, .1);
  border: 1px solid rgba(247, 147, 0, .35);
}
.mo-status--done {
  color: #1a7f37; background: rgba(26, 127, 55, .1);
  border: 1px solid rgba(26, 127, 55, .35);
}
.mo-status--fail {
  color: #b02a37; background: rgba(176, 42, 55, .08);
  border: 1px solid rgba(176, 42, 55, .3);
}

/* =========================================================================
 * Мобильное меню в подвале (templates/page_template.php)
 *
 * Фиксированная панель навигации внизу экрана, видна только на мобильных
 * (< lg, класс .d-lg-none в разметке). Всегда на месте при прокрутке
 * (position: fixed). Повторяет ключевые действия десктопной шапки:
 * Главная / Каталог (offcanvas) / Корзина / Заказы / Профиль.
 * ========================================================================= */
.nissan-bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1035; /* выше контента и .go-to; ниже backdrop offcanvas (1040) */
  display: flex;
  background: #fff;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .07);
  padding-bottom: env(safe-area-inset-bottom, 0); /* home indicator на iOS */
}
.nissan-bottom-nav__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.25rem;
  padding: 0 .15rem;
  border: 0;
  background: transparent;
  color: #6c757d;
  text-decoration: none;
  cursor: pointer;
}
.nissan-bottom-nav__item .bi {
  font-size: 1.6rem;
  line-height: 1;
}
.nissan-bottom-nav__item.active {
  color: var(--bs-primary);
}
/* Составная иконка каталога: список + лупа поиска в правом нижнем углу.
   У лупы белая подложка-кружок (цвет панели), чтобы она читалась поверх линий
   списка; цвет обе иконки наследуют от пункта (серый / оранжевый в active). */
.nbn-catalog-icon {
  position: relative;
  display: inline-flex;
  line-height: 1;
}
.nissan-bottom-nav__item .nbn-catalog-icon__search {
  position: absolute;
  right: -.32em;
  font-size: 1rem;
  background: #fff;
  border-radius: 50%;
  padding: .1em;
}
/* Бейдж-счётчик (корзина — товары, заказы — незакрытые заказы) — над иконкой,
   смещён от центра вправо. */
.nissan-bottom-nav__badge {
  position: absolute;
  top: .45rem;
  left: 50%;
  margin-left: .3rem;
  font-size: .6rem;
}

/* Отступ снизу, чтобы фиксированная панель не перекрывала подвал/контент.
   Панель ~3.5rem + запас; body растянут (min-vh-100), поэтому padding толкает
   подвал вверх над панелью. Только на мобильных (панель скрыта на lg+). */
@media (max-width: 991.98px) {
  body {
    padding-bottom: 3.75rem;
  }
  /* Кнопку «наверх» поднимаем над панелью. HSGoTo ставит inline bottom через
     setProperty (без !important) — перебиваем с !important; fade-анимация
     (visibility/opacity) при этом сохраняется. */
  .go-to {
    bottom: 4.75rem !important;
  }
  /* Уведомление о cookies — над панелью (по умолчанию у него bottom ~16px). */
  .cookie-notification {
    bottom: 4.25rem;
  }
}

/* =========================================================================
 * Offcanvas каталога (templates/page_template.php) — слой «Каталог/Поиск»,
 * открывается кнопкой нижней панели. Дерево на нативном Bootstrap collapse.
 * ========================================================================= */
/* Ширина — через переменную темы (её читает .offcanvas.offcanvas-start, у которой
   специфичность выше одноклассового селектора). Оставляем полоску подложки,
   чтобы было видно, что это перекрывающий слой (закрытие тапом вне). */
.nissan-catalog-offcanvas {
  --bs-offcanvas-width: min(92vw, 400px);
}

/* Дерево категорий. */
.nissan-cat-toggle,
.nissan-cat-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .75rem 1rem;
  border: 0;
  background: transparent;
  color: #212529;
  font-size: .95rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nissan-cat-link.active,
.nissan-cat-toggle[aria-expanded="true"] {
  color: var(--bs-primary);
}
/* Ведущая иконка главного пункта — круглый бейдж (как .ct-icon на контактах).
   Цвет фона/значка задаётся по группе ниже. */
.nissan-cat-ico {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.05rem;
  line-height: 1;
}

/* --- Верхняя группа каталога (Общий каталог, Модели Nissan/Renault, Каталог по
   брендам) — прямые потомки дерева: акцентные «пилюли» с оранжевыми бейджами. --- */
.nissan-catalog-tree {
  padding-top: .75rem;
}
.nissan-catalog-tree > .nissan-cat-toggle {
  /* Небольшой боковой отступ через margin; width calc компенсирует его, чтобы
     не было переполнения. padding-left .5rem + margin .5rem = бейдж на 1rem —
     вровень с бейджами инфо-ссылок (у них padding-left 1rem). */
  width: calc(100% - 1rem);
  margin: 0 .5rem .5rem;
  padding: .5rem;
  border-radius: .5rem;
  background: rgba(247, 147, 0, .08);
}
.nissan-catalog-tree > .nissan-cat-toggle .nissan-cat-ico {
  background: rgba(247, 147, 0, .14);
  color: var(--bs-primary);
}

/* --- Инфо-ссылки (Статьи … Контакты) — серые бейджи, обычные строки без
   разделителей между собой; разделитель сверху задан у обёртки .nissan-cat-info,
   поэтому все ссылки внутри выглядят одинаково. --- */
.nissan-cat-info {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}
.nissan-catalog-tree .nissan-cat-link {
  padding: .4rem 1rem;
  border-bottom: 0;
  font-weight: 500;
}
.nissan-catalog-tree .nissan-cat-link .nissan-cat-ico {
  background: rgba(0, 0, 0, .05);
  color: #6c757d;
}
/* «Каталог по брендам» — ссылка, но входит в группу каталога, поэтому
   оформляется как пункты-аккордеоны выше (оранжевая плашка и бейдж). Правила
   идут после серых: специфичность равная, побеждает порядок. */
.nissan-catalog-tree > .nissan-cat-link--group {
  width: calc(100% - 1rem);
  margin: 0 .5rem .5rem;
  padding: .5rem;
  border-radius: .5rem;
  background: rgba(247, 147, 0, .08);
  font-weight: 600;
}
.nissan-catalog-tree > .nissan-cat-link--group .nissan-cat-ico {
  background: rgba(247, 147, 0, .14);
  color: var(--bs-primary);
}

/* --- Левая колонка десктопного мега-меню каталога (.nissan-catalog-menu,
   templates/page_template.php) — те же пункты, что в группе каталога выше:
   .nissan-cat-link + круглый бейдж .nissan-cat-ico. Базовые правила общие
   (объявлены выше без скоупа), здесь — только оформление плашки, которое в
   мобильной версии скоплено классом .nissan-catalog-tree. --- */
.nissan-catalog-menu .nissan-cat-link {
  margin-bottom: .5rem;
  padding: .5rem;
  border-radius: .5rem;
  background: rgba(247, 147, 0, .08);
  font-weight: 600;
}
.nissan-catalog-menu .nissan-cat-link:last-child {
  margin-bottom: 0;
}
.nissan-catalog-menu .nissan-cat-link .nissan-cat-ico {
  background: rgba(247, 147, 0, .14);
  color: var(--bs-primary);
}
/* Раздел, галерея которого показана справа. Класс .active вешает наведением
   обработчик .js-catalog-menu в assets/js/theme-custom.js, поэтому отдельное
   правило :hover не нужно — состояние одно. Заливка насыщеннее, бейдж сплошной:
   так видно, к какой колонке плиток относится пункт. */
.nissan-catalog-menu .nissan-cat-link.active {
  background: rgba(247, 147, 0, .18);
}
.nissan-catalog-menu .nissan-cat-link.active .nissan-cat-ico {
  background: var(--bs-primary);
  color: #fff;
}

/* Раскрытый список категорий 1-го уровня под пунктом «Общий каталог». Колонка
   узкая (col-3), поэтому текст не выравнивается по тексту родителя, как в
   мобильном меню (там отступ 4rem) — вложенность показывает направляющая линия
   по центру бейджа: .5rem паддинга плашки + половина бейджа 2.25rem = 1.625rem. */
.nissan-catalog-menu .cm-sublist {
  margin: -.25rem 0 .5rem 1.625rem;
  padding: .25rem 0 .25rem .5rem;
  border-left: 1px solid rgba(0, 0, 0, .1);
}
.nissan-catalog-menu .cm-sublink {
  display: block;
  padding: .3rem .5rem;
  border-radius: .375rem;
  color: #495057;
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
}
/* Наведение вешает .active тем же обработчиком, что и на разделах (см.
   theme-custom.js), поэтому отдельного правила :hover не нужно. */
.nissan-catalog-menu .cm-sublink.active {
  background: rgba(247, 147, 0, .1);
  color: var(--bs-primary);
}

/* Шеврон аккордеона прижат к правому краю (иконка + текст слева). */
.nissan-cat-toggle .bi-chevron-down {
  flex-shrink: 0;
  margin-left: auto;
  font-size: .8rem;
  transition: transform .2s ease;
}
.nissan-cat-toggle:not(.collapsed) .bi-chevron-down {
  transform: rotate(180deg);
}
/* Раскрытый список внутри пункта каталога. Оформление то же, что у списка
   категорий в десктопном мега-меню (.cm-sublist / .cm-sublink выше):
   направляющая линия слева и скруглённые пункты вместо сплошных строк во всю
   ширину. Раньше вложенность показывал только большой левый отступ (4rem),
   выравнивавший текст по тексту родителя.

   Линия идёт по центру бейджа родителя: margin .5rem + padding .5rem + половина
   бейджа 1.125rem = 2.125rem. Отступы у самого .collapse только горизонтальные —
   вертикальный padding ломал бы анимацию, Bootstrap анимирует height именно
   этого элемента (margin высоту не задевает и потому допустим). */
.nissan-cat-sub {
  margin: 0 .5rem .5rem 2.125rem;
  padding-left: .5rem;
  border-left: 1px solid rgba(0, 0, 0, .1);
}
/* Второй уровень (подкатегории внутри раздела) — своя линия, отступ меньше: он
   отсчитывается от уже сдвинутого блока, а бейджа у родителя здесь нет. */
.nissan-cat-sub .nissan-cat-sub {
  margin: .125rem .5rem .25rem .75rem;
}

/* Разделы общего каталога. */
.nissan-cat-toggle--sub {
  padding: .45rem .5rem;
  border-radius: .375rem;
  background: transparent;
  color: #495057;
  font-size: .875rem;
  font-weight: 500;
}
/* Раскрытый раздел подсвечен так же, как активный пункт в мега-меню (цвет текста
   даёт общее правило .nissan-cat-toggle[aria-expanded="true"] выше). */
.nissan-cat-toggle--sub[aria-expanded="true"] {
  background: rgba(247, 147, 0, .1);
}

/* Списки ссылок (модели / подкатегории). Отступ слева задаёт обёртка
   .nissan-cat-sub, поэтому у самих пунктов он одинаковый на любой глубине. */
.nissan-cat-list {
  list-style: none;
  margin: 0;
  padding: .125rem 0;
  background: transparent;
}
.nissan-cat-list a {
  display: block;
  padding: .45rem .5rem;
  border-radius: .375rem;
  color: #495057;
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
}
.nissan-cat-list a:hover,
.nissan-cat-list a:focus {
  background: rgba(247, 147, 0, .1);
  color: var(--bs-primary);
}

/* Блок контактов внизу offcanvas. Переиспользует классы страницы контактов
   (.ct-row/.ct-icon/.ct-phone). У каждого телефона своя строка с иконкой —
   строки в одну линию, поэтому иконку центрируем по тексту. Режим работы
   (.ct-worktime) — тем же шрифтом, что телефоны, одной слитной строкой. */
.nissan-cat-contacts .ct-row {
  align-items: center;
}
/* Бейджи телефонов/времени под размер новых бейджей меню (выравнивание текста). */
.nissan-cat-contacts .ct-icon {
  width: 2.25rem;
  height: 2.25rem;
  margin-right: .75rem;
}
.nissan-cat-contacts .ct-worktime {
  display: block;
  color: #212529;
  white-space: nowrap;
}

/* Popover клубной цены (a.clubprice, инициализация — assets/js/theme-custom.js).
   Шире стандартных 276px Bootstrap, чтобы заголовок «Участникам клубной
   программы» (жирный, первой строкой контента) умещался в одну строку. */
.clubprice-popover {
  max-width: 340px;
}

/* Полоса переключения версии сайта (первая строка над шапкой, templates/page_template.php).
   Фон — bg-secondary (#3c3c3c) для контраста с белой шапкой. Админ-бар под ней тоже
   bg-secondary, поэтому отделяем светлой линией, чтобы две тёмные полосы не сливались. */
.nissan-version-bar {
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

/* =========================================================================
 * SEO-блок (templates/seo_block.php)
 * ========================================================================= */

/* Блок сворачивается плагином readmore (инициализация — assets/js/theme-custom.js),
   но высота свёртки задаётся ЗДЕСЬ, а не в опциях плагина. Причина: плагин
   отрабатывает по DOM ready, и без max-height длинный текст успевал показаться
   целиком, а потом схлопывался — страница дёргалась. С max-height блок свёрнут
   с первой отрисовки, а плагин при инициализации читает это значение из CSS
   (setBoxHeights), берёт его за collapsedHeight и сам max-height снимает,
   дальше управляя высотой инлайном. Значение продублировано в theme-custom.js
   (SEO_COLLAPSED_HEIGHT) как запасное — менять надо в обоих местах.

   Побочный эффект: без JS блок остаётся свёрнутым и без кнопки. Текст при этом
   в DOM (не display:none), для поисковых роботов ничего не теряется.

   position: relative — база для градиента ниже. */
.seo-content {
  position: relative;
  max-height: 132px;
  overflow: hidden;
}

/* Затухание текста над линией обрезки, чтобы обрыв строки не выглядел как
   ошибка вёрстки. Класс .seo-collapsed ставит JS и только тем блокам, которые
   реально свёрнуты. Цвет — фон контентной области: у <main> класс темы
   .bg-soft-secondary, то есть rgba(81, 89, 108, .075) поверх белого body,
   что даёт ≈ #f2f3f4. Прозрачный конец градиента задан тем же цветом с
   нулевой альфой: от ключевого слова transparent Safari уводит его в серый. */
.seo-content.seo-collapsed::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3.5rem;
  background: linear-gradient(180deg, rgba(242, 243, 244, 0) 0%, #f2f3f4 100%);
  pointer-events: none;
}

/* Нижний отступ последнего абзаца/списка внутри текста: в свёрнутом виде он
   съедал бы часть видимых строк, в развёрнутом — двоился бы с отступом кнопки. */
.seo-content > :last-child {
  margin-bottom: 0;
}

/* Переключатель «Показать ещё» / «Свернуть» — обычная ссылка; плагин вставляет
   её следующим элементом за .seo-content (внутри .seo-block). inline-block —
   чтобы работал margin-top: у инлайнового элемента вертикальные отступы
   не применяются. */
.seo-more {
  display: inline-block;
  margin-top: .75rem;
  color: var(--bs-primary);
  font-size: .875rem;
  text-decoration: none;
}
.seo-more:hover,
.seo-more:focus {
  color: var(--bs-primary);
  text-decoration: underline;
}

/* Стрелка — иконка темы, уменьшена под текст ссылки и выровнена по нему. */
.seo-more > [class^="bi-"] {
  margin-left: .25rem;
  font-size: .75em;
  vertical-align: middle;
}

/* ==========================================================================
   ЭКСПЕРИМЕНТ: серые плитки галереи в мега-меню каталога
   --------------------------------------------------------------------------
   Плитки (.card) на белом фоне выпадающего меню сливаются с ним; здесь им
   задаётся серый фон, чтобы блоки читались как отдельные карточки.

   ОТКАТ: убрать класс `catalog-menu-tinted` у .nissan-catalog-menu в
   templates/page_template.php (весь блок ниже станет неактивным) — или
   удалить этот блок целиком.

   Все селекторы скоплены классом .catalog-menu-tinted, поэтому галереи в
   контентном блоке страниц (/catalog/, /collection/, /renault/, /brand/)
   не затрагиваются — там используются те же функции-рендеры, но без него.
   ========================================================================== */

/* Фон карточки — через переменную темы, без !important (у .card в theme.css
   background-color: var(--bs-card-bg)). Рамку убираем: на сером фоне она
   лишняя, объём даёт сам фон. */
.catalog-menu-tinted .card {
  --bs-card-bg: #f1f3f5;
  --bs-card-border-color: transparent;
}

/* Обёртка изображения отрисована с утилитой .bg-white (см. renderModelsGallery
   и др. в shop_lib.php). Перебить её background-color можно только через
   !important, поэтому гасим утилиту её же переменной прозрачности — сквозь
   обёртку проступает серый фон карточки. */
.catalog-menu-tinted .card-img-top.bg-white {
  --bs-bg-opacity: 0;
}

/* Фото товаров/моделей — JPEG с белой подложкой: на сером фоне они выглядели бы
   белыми прямоугольниками. multiply «вычитает» белое, оставляя только сам
   предмет; изображения с прозрачностью режим не меняет. */
.catalog-menu-tinted .card-img-top img {
  mix-blend-mode: multiply;
}

/* Наведение: плитка становится белой — подсветка выбранного элемента вместо
   подъёма карточки, который в плотной сетке меню почти не читается. */
.catalog-menu-tinted .card-transition:hover,
.catalog-menu-tinted .card-transition:focus {
  --bs-card-bg: #fff;
  --bs-card-border-color: rgba(220, 224, 229, .6);
}