/**
 * JV Category Page Styles (design-aligned)
 */


/* Override mango.css top-header spacing on category page */
#product-category .top-header {
  margin-bottom: 15px !important;
}

.jv-category-page {
  background: #fff;
}
/* Кромку задаёт контейнер (padding 20px). Свой margin у заголовка давал на
   ширинах >1710 двойной отступ, а на ≤1710 его снимал медиазапрос — заголовок
   и плашки прыгали на 20px при переходе через этот брейкпоинт. */
.jv-category-page .container .jv-category__title{
  margin: 0;
}
.jv-category-page .container{
}
/* Одна левая вертикаль на всю страницу: лого, меню, хлебные крошки, заголовок,
   плашки и сетка товаров должны начинаться на одной линии. Контейнер шапки
   держит 20px внутреннего отступа, поэтому и контентный держит столько же —
   с нулевым padding контент уезжал левее шапки (на 1900px: 10 против 30). */
/* ============================================================
   Одна левая вертикаль страницы каталога
   ------------------------------------------------------------
   Кромку задаёт единственный источник — контейнер: max-width 1880,
   центрирование и 20px внутреннего отступа. Ровно та же формула у
   шапки, поэтому логотип, меню, хлебные крошки, заголовок, плашки
   серий и сетка товаров встают на одну линию на любой ширине:
     ≤1880 → 20px, 1900 → (1900−1880)/2 + 20 = 30px.

   Внешний .page-wrapper на узких экранах добавляет свои 20px и даёт
   двойной отступ, поэтому для этой страницы его гасим: иначе контент
   уезжает правее шапки на 1600 и левее — на 1900.
   ============================================================ */
.page-wrapper:has(.jv-category-page) {
  padding-left: 0;
  padding-right: 0;
}

/* …и вместе с отступами надо снять их компенсацию у подвала.
   05-catalog.css (≤1890) задаёт паре согласованные значения:
   .page-wrapper { padding: 0 20px } и .site-footer { margin: 0 -20px } —
   подвал выходит из отступов обёртки и встаёт вровень с краем окна.
   Правило выше гасит padding только на страницах разделов, а -20px
   у подвала остаются: он вылезал за окно на 20px справа, документ
   становился шире окна, и шапка (ширина 100% = ширина окна) не
   доставала до правого края — справа появлялась пустая полоса.
   Слева те же 20px просто обрезались.
   Ровно поэтому фикс адресный: на главной и карточке пара работает
   верно, и глобальное обнуление дало бы там белые поля по краям.
   Замерено 14.08 на 1280 и 1440: было 0..1300 при окне 1280, стало 0..1280. */
.page-wrapper:has(.jv-category-page) .site-footer {
  margin-left: 0;
  margin-right: 0;
}

#product-category .container{
  max-width: 1880px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== BREADCRUMB ===== */
.navigation-content .breadcrumb {
  height: auto !important;
  background: transparent !important;
  gap: 0 !important;
  padding: 0px 0 0px !important;
  margin: 0 !important;
  /* overflow: visible !important; */
  border-radius: 0 !important;
  display: flex;
  align-items: center;
}
.navigation-content .breadcrumb > li {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center;
  /* #676 (19.08): активный (последний) пункт стоял на 1,5px выше остальных.
     Кегль задавался ссылке и последнему пункту, а пункту без ссылки доставался
     унаследованный 13px — у inline-flex базовая линия считается от содержимого,
     и строка расходилась. Кегль одинаковый всем пунктам — но одного его мало:
     пункты остаются inline-level и выравниваются по базовой линии, а у пункта
     со ссылкой внутри она своя. Ровно строку держит vertical-align: middle
     (проверено замером на проде: 264.7 / 263.2 → 265.8 / 265.8). */
  font-size: 16px;
  vertical-align: middle;
}
.navigation-content .breadcrumb > li:not(:last-child)::after {
  content: '/' !important;
  margin: 0 6px !important;
  color: var(--jv-text-muted) !important;
  font-size: 16px;
}
/* Левый отступ здесь давал хлебным крошкам лишние 20px поверх контейнерных —
   крошки стояли правее логотипа, меню и заголовка. Кромку держит контейнер. */
.jv-category-page .navigation-content {
    padding: 19px 0px 0px 0px;
}

.navigation-content .breadcrumb > li > a {
  color: var(--jv-text-muted) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: color 0.15s;
}
.navigation-content .breadcrumb > li > a:hover {
  color: var(--jv-accent) !important;
}
.navigation-content .breadcrumb > li:last-child,
.navigation-content .breadcrumb > li:last-child > span,
.navigation-content .breadcrumb > li:last-child > a {
  color: var(--jv-accent) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

/* ===== CATEGORY TITLE ===== */
/* Со счётчиком заголовок отдаёт ему часть нижнего отступа: суммарно те же ~40px
   до подкатегорий, что были у одинокого h1. */
.jv-category__title h1:not(:only-child) { margin-bottom: 8px; }
.jv-category__count {
  margin: 0 0 34px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--jv-text-muted, #999);
}
.jv-category__title h1 {
  margin: 20px 0 40px;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
  color: var(--jv-text-primary);
}

/* ===== SUBCATEGORIES (8-col vertical cards) ===== */
.jv-category__subcategories--sub {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 36px;
}
/* #587: боковых полей у сетки нет — левая и правая кромка плашек совпадают
   с кромкой шапки и сетки товаров. Раньше 20px справа/слева выбивали блок
   из общей вертикали страницы. */
.jv-category__subcategories--main {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 36px;
}

.jv-category__subcategories--sub  .jv-subcategory-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 9px 8px 10px;
  border: 1.5px solid var(--jv-border);
  border-radius: 20px;
  background: var(--jv-bg-card);
  text-decoration: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.jv-category__subcategories--sub .jv-subcategory-card:hover {
  border-color: var(--jv-accent);
  box-shadow: 0 4px 16px rgba(242,91,36,0.1);
}


.jv-category__subcategories--sub .jv-subcategory-card__image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 15px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}


.jv-category__subcategories--sub .jv-subcategory-card__name {
  font-weight: 500;
  font-size: 16px;
  color: var(--jv-text-muted);   /* аудит 02.09: контраст AA, было #999999 */
  line-height: 1.2;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.jv-category__subcategories--sub .jv-subcategory-card:hover .jv-subcategory-card__name {
  color: #fff;
  
}

.jv-category__subcategories--sub .jv-subcategory-card:hover{
  background:var(--jv-primary);
}

.jv-category__subcategories--sub .jv-subcategory-card:hover .jv-subcategory-card__image {
 
}

.jv-category__subcategories--sub .jv-subcategory-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}





.jv-subcategory-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 10px 10px 20px 10px;
  border: 1.5px solid var(--jv-border);
  border-radius: 20px;
  background: var(--jv-bg-card);
  text-decoration: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.jv-subcategory-card:hover {
  border-color: var(--jv-accent);
  box-shadow: 0 4px 16px rgba(242,91,36,0.1);
}

.jv-subcategory-card__image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.jv-subcategory-card__image img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.jv-subcategory-card__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.jv-subcategory-card__name {
  font-weight: 500;
  font-size: 16px;
  color: var(--jv-text-muted);   /* аудит 02.09: контраст AA, было #999999 */
  line-height: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.jv-subcategory-card:hover .jv-subcategory-card__name {
  color: var(--jv-accent);
}

.jv-subcategory-card__count {
  font-size: 11px;
  color: var(--jv-text-muted);
}

.jv-subcategories__more {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}





@media (max-width: 1360px){

  .jv-category-page .navigation-content {
    padding: 19px 0px 0px 0px;
}
.jv-category-page .container .jv-category__title {
    margin: 0 0px;
}
.selected-options .ocfilter-option span{
  background: none;
  font-size: 8px;
  font-weight: 500;
  padding-bottom: 5px;
}
.selected-options .ocfilter-option .btn-xs {
    font-size: 8px;
    padding: 6px !important;
    line-height: 1;
    background: none;
    color: var(--jv-text-primary);
    border-radius: 2.85px;
    border-color: var(--jv-accent) !important;
    color: var(--jv-text-primary) !important;
    border: 1px solid;
}
}







.is-hidden {
  display: none !important;
}

/* Banner */
.jv-category__banner {
  margin-bottom: 30px;
  border-radius: var(--jv-radius-lg);
  overflow: hidden;
}

.jv-category__banner img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* Layout */
.jv-category__body {
  padding: 10px 0 40px;
}

.jv-category__layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.jv-category__filters {
  width: 360px;
  flex-shrink: 0;
  /* stretch был нужен только прилипанию (#198) — после его отмены (#286)
     колонка снова тянется по контенту. */
  align-self: flex-start;
}

/* #286: прилипание фильтров отменено (было добавлено по #198/#199).
   Блок скроллится вместе со страницей, внутренней прокрутки нет — она и
   раздражала: колесо «залипало» внутри фильтров вместо прокрутки страницы. */
.jv-filters__inner {
  background: var(--jv-bg-surface);
  border-radius: 15px;
  /* #217: сверху было 20px — «Фильтры» висели заметно ниже первой карточки
     товара справа. Верхний отступ в 4 раза меньше, боковые и нижний прежние. */
  padding: 5px 20px 20px;
}

/* Filters title */
.jv-filters__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--jv-text-primary);
  margin: 0 0 16px;
  padding: 0;
}

/* Collapsible filter group name */
:is(#product-category #column-left, .ocf-offcanvas-body) .ocf-option-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--jv-text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding-bottom: 0;
  margin-bottom: 0;
  user-select: none;
}

:is(#product-category #column-left, .ocf-offcanvas-body) .jv-collapsed{
  color: var(--jv-text-secondary);
}

/* Chevron icon for collapse */
:is(#product-category #column-left, .ocf-offcanvas-body) .ocf-option-name .jv-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  color: var(--jv-accent);
}

:is(#product-category #column-left, .ocf-offcanvas-body) .ocf-option-name.jv-collapsed .jv-chevron {
  transform: rotate(180deg);
}

/* Collapse animation for values */
:is(#product-category #column-left, .ocf-offcanvas-body) .ocf-option-values.jv-collapsed {
  display: none !important;
}

/* Полный сброс mango.css и bootstrap для колонки фильтров */
:is(#product-category #column-left, .ocf-offcanvas-body),
#column-left {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
}

/* ⚠️ 02.09.2026: `flex: none` из блока выше уехал сюда — он нужен ТОЛЬКО левой
   колонке (сбросить бутстраповский флекс-грид). Мобильной панели он ломал
   раскладку: панель — flex-колонка во весь экран с overflow:hidden, а тело с
   `flex:none` вырастало по содержимому (1040 px против 812 px экрана). Итог:
   нижние группы фильтров были недоступны — тело не прокручивалось, хотя
   overflow-y:auto у него стоял, — и любая строка под телом уезжала за экран.
   Селектор с `:is()` весит два id, поэтому обычным правилом его не перебить:
   разводим декларации, а не наращиваем специфичность. */
#product-category #column-left,
#column-left {
  flex: none !important;
  -ms-flex: none !important;
}

:is(#product-category #column-left, .ocf-offcanvas-body) .panel {
  border: none;
  box-shadow: none;
  background: transparent;
  margin: 0;
}

:is(#product-category #column-left, .ocf-offcanvas-body) .panel-heading {
  font-weight: 600;
  font-size: 24px;
  color: var(--jv-text-primary);
  /* #404: сверху не было отступа вовсе, снизу 16px — заголовок «Фильтры»
     прижимался к верхнему краю колонки. Опускаем на 4px и подбираем низ. */
  padding: 4px 0 12px 0;
  background: transparent;
  border: none;
}

:is(#product-category #column-left, .ocf-offcanvas-body) .list-group {
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
:is(#product-category #column-left, .ocf-offcanvas-body) .selected-options .ocfilter-option{
  background: none;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
}

:is(#product-category #column-left, .ocf-offcanvas-body) .selected-options .btn-danger{
  color: #a0a0a1;
  font-size: 12px;
  background:none;
}
:is(#product-category #column-left, .ocf-offcanvas-body) .btn-group-xs>.btn, .btn-xs{
    font-size: 14px;
    padding: 10px!important;
    line-height: 1;
    background: none;
    color: var(--jv-text-primary);
    border-color: var(--jv-accent) !important;
    color: var(--jv-text-primary) !important;
    border: 2px solid;
}
:is(#product-category #column-left, .ocf-offcanvas-body) .fa-times{
  margin-right: 5px;
  margin-bottom: 1px;
}

:is(#product-category #column-left, .ocf-offcanvas-body) .list-group-item {
  border: none;
  background: var(--jv-bg-card);
  border-radius: 10px;
  padding: 20px 10px;
  margin-bottom: 10px;
  line-height: 1;
  box-shadow: var(--jv-shadow-soft);
  overflow: visible !important;
}

:is(#product-category #column-left, .ocf-offcanvas-body) .jv-filter-collapsed {
  padding: 11px 10px;
}

/* ocf-option-name base — handled above by .jv-collapsed rules */

:is(#product-category #column-left, .ocf-offcanvas-body) .ocf-option-values {
  margin-top: 12px;
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
}

:is(#product-category #column-left, .ocf-offcanvas-body) .ocfilter-option label {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto !important;
  padding: 10px 10px !important;
  border: 2px solid var(--jv-border);
  border-radius: 5px;
  background: #fff;
  color: var(--jv-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 500;
  line-height: 1 !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  user-select: none;
  margin: 0 !important;
  white-space: nowrap;
  text-decoration: none !important;
}

:is(#product-category #column-left, .ocf-offcanvas-body) .ocfilter-option label:hover {
  border-color: var(--jv-accent);
  color: var(--jv-accent) !important;
}

:is(#product-category #column-left, .ocf-offcanvas-body) .ocfilter-option label.ocf-selected {
  border-color: var(--jv-accent) !important;
  color: var(--jv-text-primary)!important;
}

:is(#product-category #column-left, .ocf-offcanvas-body) .ocfilter-option label.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--jv-border) !important;
  color: var(--jv-text-muted) !important;
}

/* Hide the native input but keep it in DOM for JS */
:is(#product-category #column-left, .ocf-offcanvas-body) .ocfilter-option label input.ocf-target {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none;
  margin: 0 !important;
}

/* Counter badge */
:is(#product-category #column-left, .ocf-offcanvas-body) .ocfilter-option label small {
  background: transparent !important;
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 600;
  opacity: 0.6;
  margin-left: 2px;
}

:is(#product-category #column-left, .ocf-offcanvas-body) .ocfilter-option label.ocf-selected small {
  opacity: 0.7;
  color: #fff !important;
}

:is(#product-category #column-left, .ocf-offcanvas-body) .ocfilter-option .dropdown-menu {
  border-radius: 10px;
  box-shadow: var(--jv-shadow-soft);
}

:is(#product-category #column-left, .ocf-offcanvas-body) .collapse-value>button {
  color: var(--jv-accent);
}

:is(#product-category #column-left, .ocf-offcanvas-body) .ocfilter-mobile-handle .btn {
  background: var(--jv-bg-surface);
  color: var(--jv-text-primary);
  border: 1px solid var(--jv-border);
}

.jv-filter-apply-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: var(--jv-accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s ease;
}

.jv-filter-apply-btn:hover {
  background: #d94d1a;
}

.jv-category__products {
  flex: 1;
  min-width: 0;
}

/* ===== TOOLBAR ===== */
/* #581/#585/#589: справа поля нет — сортировка и переключатель вида встают
   ровно на правую вертикаль шапки и сетки товаров (20px отступа отбивали их
   от общей линии). Слева 7px оставлены намеренно: «Выводить по» оптически
   попадает на кромку карточек. */
.jv-category__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border-radius: 0;
  padding: 0 0 15px 7px;
  margin-bottom: 0px;
  box-shadow: none;
}

.jv-category__toolbar-left {
  display: flex;
  align-items: center;
  gap: 4px;
}

.jv-toolbar__limit-label {
  font-size: 16px;
  font-weight: 500;
  color: var(--jv-text-muted);
  line-height: 1;
}

.jv-toolbar__limit-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--jv-accent);
}

.jv-category__toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.jv-sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 5;
}

.jv-sort-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--jv-text-muted);   /* аудит 02.09: контраст AA, было #999999 */
  cursor: default;
  line-height: 1;
  user-select: none;
}

/* 19.08: пилюля обнимает обе части контрола — стрелку направления и значение
   сортировки. До этого (#653) она стояла вокруг ОДНОЙ кнопки, копируя оболочку
   .jv-view-toggle: там контейнер делит два режима, а здесь делить было нечего —
   пилюля с белой заливкой и тенью становилась самым тяжёлым пятном ряда, тяжелее
   переключателя вида справа. Теперь оболочка означает «чем и как сортировать»,
   тень снята, вес держит только цвет стрелки. */
.jv-sort-dir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px 0 3px;
  border-radius: 10px;
  background: var(--jv-bg-light, #F2F3F6);
  transition: background-color .15s ease;
  /* Меню сортировки позиционируется от пилюли, а не от текста значения —
     иначе оно вставало на 9px правее левой кромки и висело внахлёст. */
  position: relative;
}

.jv-sort-dir:hover { background: #EAECF1; }

/* Разделитель внутри пилюли: показывает, что кликов два — направление и выбор
   критерия. Без него группа читалась как одна кнопка. */
.jv-sort-sep {
  width: 1px;
  height: 18px;
  background: #DDE0E6;
}

/* Кнопка направления: своей подложки больше нет, она была бы плашкой в плашке. */
.jv-sort-dir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--jv-text-muted, #999);
  cursor: pointer;
  text-decoration: none;
  transition: color .15s ease;
}

.jv-sort-dir-btn:hover {
  color: var(--jv-primary-hover, #d1410f);
  text-decoration: none;
}

/* Направление выбрано — только цвет, без заливки и тени. */
.jv-sort-dir-btn.sort-asc,
.jv-sort-dir-btn.sort-desc {
  color: var(--jv-primary, #E94E1B);
}

.jv-sort-dir-btn svg { stroke: currentColor; width: 18px; height: 18px; }
.jv-sort-dir-btn path { stroke: currentColor; }

/* Активное направление — в полную силу, встречное приглушено.
   .sort-asc = сейчас порядок по возрастанию (ссылка ведёт в DESC).

   19.08: приглушение перевели с opacity на серый stroke и распространили на
   ВЕСЬ знак — раньше классы висели только на «галочках», а вертикальные палки
   у обеих стрелок оставались в полную силу. Из четырёх штрихов бледнел один,
   и направление в иконке не читалось. Полупрозрачный оранжевый вдобавок
   выглядел как выцветший акцент; серый честно говорит «это неактивная
   половина». Те же классы у мобильной кнопки .jv-mfilter__sort. */
.jv-sort-dir-btn.sort-asc .arrow-down,
.jv-sort-dir-btn.sort-desc .arrow-up,
.jv-mfilter__sort.sort-asc .arrow-down,
.jv-mfilter__sort.sort-desc .arrow-up {
  stroke: #C4C7CE;
}

/* Мобильная панель (≤900px): кнопка сортировки красит стрелки через
   currentColor, поэтому выбранное направление подсвечивается тем же
   акцентом, что и на десктопе. Соседняя ⚙ остаётся серой — она состояния
   не несёт. */
.jv-mfilter__sort { color: var(--jv-primary, #E94E1B); }
.jv-mfilter__sort:not(.sort-asc):not(.sort-desc) { color: var(--jv-text-muted, #999); }

.jv-sort-dir-btn:focus-visible {
  outline: 2px solid var(--jv-primary, #E94E1B);
  outline-offset: 2px;
}

.jv-sort-dir-btn.active {
  color: var(--jv-primary);
  font-weight: 700;
}

/* Grid */
/* Ширина карточки считается из числа колонок и зазора, а не «на глаз».
   #606: раньше формула ширины и gap жили порознь (ширина под 20px, зазор 14) —
   ряд не дотягивал до правой кромки 24 px, и сетка визуально «съезжала» влево
   относительно плашек серий и шапки. Теперь в брейкпоинтах меняются только
   --jv-cards-cols и --jv-cards-gap. */
.jv-products-grid {
  --jv-cards-cols: 5;
  --jv-cards-gap: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--jv-cards-gap);
  margin-bottom: 40px;
}

/* Product Cards */
.jv-product-card {
  width: calc((100% - (var(--jv-cards-cols) - 1) * var(--jv-cards-gap)) / var(--jv-cards-cols));
  padding: 10px;
  border-radius: 15px;
  background: var(--jv-bg-surface);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.jv-product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--jv-shadow-soft);
}

.jv-product-card__top {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background-color: #fff;
  border-radius: 12px;
  margin-bottom: 0px;
  overflow: visible;
}

.jv-product-card__top a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.jv-product-card__top img {
  width: 85%;
  height: auto;
  max-height: 85%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  border-radius: 10px;
}
.jv-product-card__btn-cart svg {
    width: 25px;
    height: 25px;
}
.jv-product-card__status {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 6px 10px;
  background: var(--jv-accent);
  border-radius: 6px;
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  color: #fff;
  z-index: 2;
}

.jv-product-card__like {
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s ease;
}

.jv-product-card__like:hover {
  transform: scale(1.1);
}

.jv-product-card__like:hover path {
  stroke: var(--jv-accent);
}

/* ===== SKU ROW (below image, above name) ===== */
.jv_category_jv-product-card__sku-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 8px 0px 15px;
  gap: 6px;
  position: relative;
  width: 100%;
  margin-top: -25px;
  margin-bottom: 35px;
}

.jv_category_product-item__model{
  display: flex;
  font-size: 12px;
  align-items: center;
  margin-left: auto;
  /* #287: артикул не режем — он нужен целиком, поэтому уступать место
     обязан бейдж «N моделей» слева (см. ниже) */
  flex-shrink: 0;
}
.jv_category_quantity__models{
  display: flex;
  gap: 3px;
  font-size: 12px;
  color: var(--jv-text-primary);
  font-weight: 500;
  line-height: 1;
  justify-content: flex-start;
  /* #287: при 5 карточках в ряд (≈168px) пара «9 моделей» + «Код: 5046337»
     не помещалась и артикул уезжал на 9–13px за край карточки. Бейдж теперь
     сжимается и обрезается многоточием вместо распирания строки. */
  min-width: 0;
  overflow: hidden;
}
.jv_category_quantity__models p{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jv_category_quantity__models p{
  padding: 0;
  margin: 0;
}

.jv_category_product-item__model .jv-product-card__sku-text {
  font-size: 12px;
  color: var(--jv-text-muted);
  margin: 0;
  white-space: nowrap;
  font-weight: 500;
  margin-right: 5px;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jv_category_product-item__model .jv-product-card__sku-copy .copy-icon{width: 20px;height: 20px;}

.jv-product-card__sku-text strong {
  
  
}

.jv_category_product-item__model .jv-product-card__sku-copy {
  width: 21px;
  flex-shrink: 0;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  line-height: 1;
  color: var(--jv-text-muted);
  transition: color 0.15s;
}

.jv-product-card__sku-copy:hover {

}

.jv-product-card__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 10px 15px 10px;
}

.jv-product-card__price-new {
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--jv-primary);
}

.jv-product-card__price-old {
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #878787;
  text-decoration: line-through;
}

/* #562 «поправить выравнивание карточки на адаптивах, текст съезжает»:
   в карточке избранного было три разных левых отступа — фото и кнопка по краю
   внутреннего поля (0), код и описание на 10px, а заголовок с ≤1440px ловил
   каталожное правило `margin: 0 5px` и вставал между ними. Прибиваем весь текст
   к той же вертикали, что фото и кнопка (см. также блок отступов ниже). */
#jv-fav-grid .jv-product-card__name { margin: 14px 0 15px; }

/* #354: «сделать сетку из 6 шт в ряд, 5 очень крупно».
   Сетка избранного донашивала ширины карточек каталога (5 в ряд), но в каталоге
   слева стоит колонка фильтров, а здесь её нет — те же 5 колонок расползались на
   всю ширину контейнера. Переводим ленту на grid с явным числом колонок: ширина
   карточки перестаёт зависеть от подобранных под каталог calc-формул, а колонки
   считаются от реальной ширины страницы. */
#jv-fav-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
/* JS прячет сетку через grid.hidden, а display:grid перебивает [hidden] */
#jv-fav-grid[hidden] { display: none; }
#jv-fav-grid .jv-product-card { width: auto; }
@media (max-width: 1600px) { #jv-fav-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1280px) { #jv-fav-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1023px) { #jv-fav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Мобилка: плитка разворачивается в компактную строку — фото слева, справа
   заголовок, код и описание. Плиточная сетка на телефоне давала карточки
   высотой в пол-экрана, и пять избранных товаров превращались в долгую
   прокрутку; строкой на экран помещается 5–6 позиций. */
@media (max-width: 767px) {
  #jv-fav-grid { grid-template-columns: 1fr; gap: 8px; }
  #jv-fav-grid .jv-product-card {
    position: relative;                 /* якорь для сердечка, см. ниже */
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    /* Четыре явные строки — заголовок, код, описание, кнопка. Без явного шаблона
       `grid-row: 1 / -1` у фото схлопывается в «только первая строка» (−1 указывает
       на конец ЯВНОЙ сетки, а её не было), и заголовок растягивался по высоте
       снимка. Пустые строки — когда код или описание ещё не приехали — сжимаются в 0. */
    grid-template-rows: repeat(4, auto);
    column-gap: 12px;
    align-content: start;
    padding: 8px 38px 8px 8px;          /* справа — место под сердечко */
    border-radius: 10px;
  }
  #jv-fav-grid .jv-product-card__top {
    position: static;                   /* сердечко цепляется за карточку, а не за фото:
                                           на миниатюре 84px оно легло бы поверх снимка */
    grid-column: 1;
    grid-row: 1 / -1;
    width: 84px;
    height: 84px;
    align-self: center;
  }
  #jv-fav-grid .jv-product-card__top a { position: relative; }
  #jv-fav-grid .jv-product-card__like { top: 10px; right: 10px; }
  #jv-fav-grid .jv-product-card__name,
  #jv-fav-grid .jv-fav-card__sku,
  #jv-fav-grid .jv-fav-card__descr,
  #jv-fav-grid .jv-product-card__actions { grid-column: 2; margin-left: 0; margin-right: 0; }
  #jv-fav-grid .jv-product-card__name {
    margin: 0 0 4px; font-size: 14px; line-height: 1.25; min-height: 0;
    display: block; overflow: hidden;
  }
  /* Обрезка в две строки переезжает на ссылку внутри заголовка: сам заголовок
     стал элементом грид-раскладки карточки, а грид блокифицирует своих детей —
     `display:-webkit-box` на нём превращается в flow-root, и -webkit-line-clamp
     перестаёт работать (название разливалось на четыре строки, съедая всю
     экономию высоты). Ссылка грид-элементом не является, на ней клип живой. */
  #jv-fav-grid .jv-product-card__name a {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  #jv-fav-grid .jv-fav-card__sku { margin: 0 0 3px; font-size: 12px; }
  #jv-fav-grid .jv-fav-card__descr {
    margin: 0 0 8px; font-size: 12px; line-height: 1.3; min-height: 0;
  }
  /* кнопка по содержимому: в каталоге она тянется на всю плитку (flex:1 + width:100%),
     здесь это дало бы кнопку во всю строку под трёхстрочным текстом */
  #jv-fav-grid .jv-product-card__actions { margin: 0; justify-content: flex-start; }
  #jv-fav-grid .jv-product-card__btn-more {
    flex: 0 0 auto; width: auto; height: 30px; padding: 0 14px; font-size: 12px;
    border-radius: 8px;
  }
}

/* Код товара под заголовком карточки избранного — та же строка, что на плитке
   каталога, но без кнопки копирования: в сетке из шести колонок она не нужна. */
#jv-fav-grid .jv-fav-card__sku { margin: 0 0 6px; }
#jv-fav-grid .jv-fav-card__descr { margin: 0 0 14px; }

.jv-product-card__name {
  margin: 0 10px 15px 10px;
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  color: var(--jv-text-primary);
  min-height: 48px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jv-product-card__name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.jv-product-card__name a:hover {
  color: var(--jv-accent);
}

.jv-product-card__descr {
  margin: 0 10px 20px 10px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--jv-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 28px;
}

.jv-product-card__actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
}

.jv-product-card__btn-cart,
.jv-product-card__btn-more {
  flex: 1;
  height: 45px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  padding: 0;
}

.jv-product-card__btn-cart {
  background: var(--jv-accent);
  color: #fff;
  border: 1.5px solid var(--jv-accent);
}

.jv-product-card__btn-cart:hover {
  background: #d94d1d;
  border-color: #d94d1d;
  transform: translateY(-1px);
}

.jv-product-card__btn-cart p {
  margin: 0;
  color: inherit;
}

.jv-product-card__btn-cart svg {
  width: 25px;
  height: 25px;
}

.jv-product-card__btn-more {
  background: transparent;
  color: var(--jv-text-muted);
  border: 1.5px solid var(--jv-text-muted);
}

.jv-product-card__btn-more:hover {
  border-color: var(--jv-accent);
  color: var(--jv-accent);
}

/* Load more */
.jv-load-more {
  display: flex;
  justify-content: center;
  margin: 20px 0 10px;
}

.jv-load-more button {
  min-width: 200px;
  padding: 12px 16px;
  background: var(--jv-accent);
  color: #fff;
  border: none;
  border-radius: var(--jv-radius-sm);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.jv-load-more button:hover {
  background: #d94d1d;
  transform: translateY(-1px);
}

.jv-load-more button.is-loading {
  opacity: 0.7;
  cursor: progress;
}

.jv-load-more.is-hidden,
.jv-load-more button.is-hidden {
  display: none;
}

.jv-pagination-hidden {
  display: none;
}

/* Description block */
#catalogDescription {
  margin-top: 16px;
  color: var(--jv-text-secondary);
  line-height: 1.5;
  overflow: hidden;
  transition: height 0.3s ease;
}

#showMoreBtn {
  margin-top: 8px;
  background: transparent;
  border: 1px solid var(--jv-border);
  border-radius: var(--jv-radius-sm);
  padding: 8px 12px;
  cursor: pointer;
  color: var(--jv-text-primary);
}

/* ==========================================================================
   Enhanced Category Page Features - Dropdown, Pagination, Filters, Cards
   Added for improved UX and design alignment
   ========================================================================== */

/* Limit Dropdown Styles
   ========================================================================== */
.jv-toolbar__limit-dropdown {
  position: relative;
  display: inline-block;
  line-height: 1;
}

.jv-toolbar__limit-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0px 0px;
  background: #fff;
  border: 0px;
  border-radius: 0px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: var(--jv-accent);
  transition: all 0.2s ease;
}

.jv-toolbar__limit-value:hover {

}

.jv-toolbar__limit-value svg {
  width: 12px;
  height: 12px;
  display:none;
  transition: transform 0.2s ease;
}

.jv-toolbar__limit-value:hover svg {
  transform: rotate(180deg);
}

.jv-limit-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 4px 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 100;
}

.jv-limit-dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.jv-limit-dropdown-menu li {
  padding: 0;
  margin: 0;
}

.jv-limit-dropdown-menu a {
  display: block;
  padding: 10px 16px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.15s ease;
}

.jv-limit-dropdown-menu a:hover {
  background: #f5f5f5;
  color: var(--jv-primary);
}

/* #611: сортировка на месте бывшего «Выводить по». Раскладку и поведение
   наследуем от limit-дропдауна — тулбар остаётся визуально тем же, меняется
   только содержимое. Стрелка здесь ВИДНА (у лимита она была display:none):
   без неё кнопка не читается как раскрывающийся список. */
/* 15.08: подпись «Сортировка:» из разметки убрана — кнопка сама называет
   текущий порядок. Правило оставлено пустым намеренно: класс мог осесть
   в OCMOD-кэше или чужой копии шаблона, и без него там поехал бы кегль. */
.jv-sort-label-static { display: none; }

/* Счётчик найденного — правый край тулбара, на месте бывшей кнопки-стрелки.
   Приглушённый: он отвечает на действие с фильтром, а не спорит за внимание
   с сортировкой слева. Цифры моноширинные, чтобы не дёргались при обновлении. */
.jv-toolbar__found {
  font-size: 14px;
  line-height: 1.2;
  color: var(--jv-text-muted, #999);
  white-space: nowrap;
  margin-right: 12px;
  font-variant-numeric: tabular-nums;
}

/* 19.08: контекст позиционирования отдан пилюле (.jv-sort-dir), здесь position
   снят — меню считало «100%» от высоты текста и вылезало поверх нижней кромки. */
.jv-toolbar__sort-dropdown {
  position: static;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  line-height: 1;
}

.jv-toolbar__sort-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  /* 15.08: кегль выровнен со счётчиком справа — левый и правый края тулбара
     звучали разным голосом (16 против 14). */
  font-size: 14px;
  font-weight: 500;
  /* 19.08: внутри общей пилюли акцентным остаётся только направление —
     значение звучит основным текстом, иначе в группе два оранжевых пятна. */
  color: var(--jv-text-primary, #171717);
  transition: color .15s ease;
}

.jv-toolbar__sort-value:hover { color: var(--jv-primary, #E94E1B); }

.jv-toolbar__sort-value svg { width: 12px; height: 12px; transition: transform 0.2s ease; }
.jv-toolbar__sort-value[aria-expanded="true"] svg { transform: rotate(180deg); }

.jv-sort-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 4px 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 100;
}

.jv-sort-dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); }
.jv-sort-dropdown-menu li { padding: 0; margin: 0; }

.jv-sort-dropdown-menu a {
  display: block;
  padding: 10px 16px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.jv-sort-dropdown-menu a:hover { background: #f5f5f5; color: var(--jv-primary); }
.jv-sort-dropdown-menu a.is-active { color: var(--jv-primary); font-weight: 600; }

/* #611: «Показать все N» вместо пункта в выборе размера страницы. Стоит под
   пагинацией отдельной строкой — в ряд с номерами страниц не влезает на узких
   экранах и там ломало центрирование. */
.jv-show-all {
  display: inline-block;
  margin: 14px auto 0;
  padding: 9px 22px;
  border: 1.5px solid #e0e0e0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--jv-text-secondary, #303131);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}

.jv-show-all:hover {
  border-color: var(--jv-primary, #E94E1B);
  color: var(--jv-primary, #E94E1B);
  text-decoration: none;
}

/* #642: «Все» переехало в саму нумерацию последним пунктом. Внутри списка
   гасим кнопочный вид (поля, скруглённая пилюля) — пункт должен читаться как
   номер страницы, иначе в ряду цифр он выглядит инородным элементом. */
/* #662 «выровнять по центру». display:block гасил inline-flex-центрирование,
   которое ниже (тач-таргеты ≥40px) выравнивает номера внутри их квадрата:
   слово «Все» садилось в левый верхний угол своей рамки, поля 8px 10px
   добавляли смещения. Возвращаем ту же раскладку, что у номеров, и оставляем
   рамке возможность стать шире квадрата — слово длиннее цифры. */
.jv-category-pagination .pagination .jv-page-all a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 10px;
  border: 1px solid #ededed;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #111;
}

.jv-category-pagination .pagination .jv-page-all a:hover {
  border-color: var(--jv-primary, #E94E1B);
  color: var(--jv-primary, #E94E1B);
}

/* #653: здесь жил второй набор правил .jv-sort-dir-btn (20×20, stroke #f96839
   на всех состояниях). Он шёл ниже по файлу и перебивал геометрию из блока
   «кнопка направления» выше — кнопка выходила мелкой иконкой без пилюли и без
   разницы между ASC и DESC, то есть «отличалась от jv-view-toggle». Оставлен
   один набор — выше; подсветка направления перенесена туда же. */

/* Filter Collapsed State
   ========================================================================== */
.jv-filter-collapsed {
  background: #f9f9f9;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.jv-filter-collapsed .ocf-option-name {
  color: #666;
}

.jv-filter-collapsed .jv-chevron {
  transform: rotate(-90deg);
}

/* Category Subcategories - Main vs Sub levels
   ========================================================================== */
.jv-category__subcategories--main {
  /* Styles for main categories (level 1) */
}

.jv-category__subcategories--sub {
  /* Styles for subcategories (level 2+) */
}

.jv-category__subcategories--sub .jv-subcategory-card {
  padding: 12px;
  background: none;
}

.jv-category__subcategories--sub .jv-subcategory-card__image {
  max-width: 100px;
}

/* Product Card Badges Container
   ========================================================================== */
.jv-product-card__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

/* 19.08: отступ задаёт ТОЛЬКО контейнер. Раньше пилюля внутри него несла ещё
   и собственные position:absolute + top/left:8px (правило выше по файлу,
   осталось от прежней вёрстки) — два правила складывались, и на витрине было
   20px вместо заявленных 12. position:static гасит наследство: в flex-колонке
   контейнера пилюля и так стоит там, где нужно. */
.jv-product-card__status {
  position: static;
  display: inline-block;
  padding: 4px 12px;
  background: var(--jv-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Product Item Model (with copy icon from jv-latest-module)
   ========================================================================== */
.product-item__model {
  /* margin-bottom: 12px; */
  /* padding: 8px 12px; */
  /* background: #f5f5f5; */
  /* border-radius: 6px; */
}

.product-item__text_model {
  display: flex;
  /* align-items: center; */
  /* gap: 8px; */
  font-size: 13px;
  color: #666;
  /* font-family: 'TT Norms Pro', sans-serif; */
}

.product-item__text_model p {
  /* margin: 0; */
  /* font-weight: 600; */
  /* color: #333; */
}

.copy-icon {
  /* width: 15px; */
  /* height: 15px; */
  /* cursor: pointer; */
  /* transition: all 0.2s ease; */
  /* margin-left: auto; */
  /* flex-shrink: 0; */
}

.copy-icon:hover {
  transform: scale(1.1);
}

.copy-icon:active {
  transform: scale(0.95);
}

/* Category Pagination Styles (replacing load more)
   ========================================================================== */
.jv-category-pagination {
  margin-top: 40px;
  display: flex;
  /* #611: под номерами страниц встала кнопка «Показать все N» — в один ряд с
     пагинацией она не влезала на узких экранах и сбивала центрирование. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.jv-category-pagination .pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  border-radius: 15px;
  padding: 20px;
  margin: 0;
  background: #f2f3f6;
}

.jv-category-pagination .pagination li {
  margin: 0 5px;
  background: none;
}

.jv-category-pagination .pagination a,
.jv-category-pagination .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 10px;
  height: 16px;
  width: 16px;
  padding: 0 0px;
  background: none;
  border: none;
  border-radius: 6px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.jv-category-pagination .pagination a:hover {
  background: #f5f5f5;
  border-color: var(--jv-primary);
  color: var(--jv-primary);
}

.jv-category-pagination .pagination li.active span {
  /* background: var(--jv-primary); */
  border-color: var(--jv-primary);
  color: var(--jv-primary);
  font-weight: 500;
  font-size: 14px;
  background: none;
}

.jv-category-pagination .pagination li:first-child a,
.jv-category-pagination .pagination li:last-child a {
  font-weight: 600;
}

.jv-category-pagination .pagination li.disabled a,
.jv-category-pagination .pagination li.disabled span {
  background: transparent;
  border-color: transparent;
  color: #999;
  cursor: default;
  pointer-events: none;
  font-weight: 400;
  min-width: auto;
  padding: 0 4px;
}

/* Breadcrumb Arrow
   ========================================================================== */
.breadcrumb-arrow {
  display: inline-block;
  margin-right: 6px; /* = отступам вокруг «/» (03-nav-breadcrumb: margin 0 6px), чтобы зазоры в крошках были равными */
  vertical-align: middle;
  flex-shrink: 0;
}

/* Enhanced Responsive Styles
   ========================================================================== */
@media (max-width: 768px) {
  .jv-toolbar__limit-value {
    padding: 6px 12px;
    font-size: 13px;
  }

  .jv-category-pagination .pagination a,
  .jv-category-pagination .pagination span {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 13px;
  }
  
  /* #653: было 28×28 с иконкой 12px — кнопка направления мельчала, а
     переключатель вида рядом оставался 34×30. Держим одну геометрию. */
}

@media (max-width: 480px) {
  .jv-limit-dropdown-menu {
    min-width: 140px;
  }

  .jv-category-pagination .pagination a,
  .jv-category-pagination .pagination span {
    min-width: 32px;
    height: 32px;
    font-size: 12px;
  }
  
  .product-item__model {
    padding: 6px 10px;
  }
  
  .product-item__text_model {
    font-size: 12px;
  }
}

@media (max-width: 1919px){
  
.jv-product-card__price-new { font-size: 1.5em; }
.jv-product-card__price-old { font-size: 0.95em; }

/* #325: имя товара в карточке каталога — 1.5em → 1.4em (при родителе 14px это
   21px → 19.6px). Две строки с обрезкой сохраняются, в строку влезает больше
   символов длинного названия. Базовые 26px на ≥1920 не трогаем: там карточка
   шире. */
.jv-product-card__name {
  margin: 0 10px 15px 10px;
  font-size: 1.4em;
  line-height: 1;
  color: var(--jv-text-primary);
  min-height: 1.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

  .jv-product-card__btn-cart, .jv-product-card__btn-more {
    /* flex: 1; */
    /* font-weight: 500; */
    /* height: 38px; */
    /* font-size: 0.9em; */
    /* line-height: 1; */
    /* gap: 2px; */
}
}
@media (max-width: 1710px){
  .jv-category-page .navigation-content {
    padding: 19px 0px 0px 0px;
}
    .jv-product-card__btn-cart, .jv-product-card__btn-more {
    /* flex: 1; */
    /* font-weight: 500; */
    /* height: 38px; */
    font-size: 13px;
    /* line-height: 1; */
    /* gap: 2px; */
}
  .jv-product-card__btn-cart svg {
    width: 22px;
    height: 22px;
}
  .jv-category-page .container .jv-category__title {
    margin: 0 0px;
}
  .jv-category__subcategories--main {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 20px;
    margin: 0 0px 36px;
}
  /* Grid */
.jv-products-grid { --jv-cards-gap: 20px; }
  
}

/* #290: ниже 1024px колонка в 360px (её вернули по #289) съедала слишком много —
   карточка в 3-колоночной сетке падала до ~165px и строка «N моделей + Код»
   снова не помещалась. Здесь фильтрам хватает 260px: карточка ≈200px. */
@media (min-width: 901px) and (max-width: 1023px) {
  .jv-category__filters { width: 260px; }
}

/* #287: между 1441 и 1600px сетка оставалась 5-колоночной (4 колонки включались
   только с 1440px), карточка ужималась до ~188px и пара «N моделей» + «Код: …»
   в неё не влезала — артикул уезжал за край. Отдаём этот диапазон 4 колонкам,
   как и всё, что ниже. */
@media (min-width: 1441px) and (max-width: 1600px) {
  .jv-products-grid { --jv-cards-cols: 4; }
}

/* Responsive */
@media (max-width: 1440px) {
  /* было 5 в ряд + сжатые до 205px фильтры (#191): на ~1400px это делало
     и фильтры, и карточки мелкими. Теперь фильтры сохраняют ширину, а сетка
     перестраивается в 4 колонки. */
  .jv-product-card {
    padding: 7px;
    border-radius: 11px;
  }
  .jv-products-grid { --jv-cards-cols: 4; --jv-cards-gap: 14px; }
    .jv-product-card__btn-cart svg {
    width: 20px;
    height: 20px;
}
      .jv-product-card__btn-cart, .jv-product-card__btn-more {
    /* flex: 1; */
    /* font-weight: 500; */
    height: 34px;
    font-size: 12px;
    /* line-height: 1; */
    gap: 2px;
}
  .jv-category__subcategories--main {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 30px;
  }
  /* ===== CATEGORY TITLE ===== */
.jv-category__title h1 {font-size: 34px;margin: 20px 0 30px;}
.jv-category__filters {
    /* ширину не режем — см. комментарий у .jv-product-card выше (#191) */
    width: 360px;
}
  /* #288: размер заголовка «Фильтры» на этой ширине не меняем — колонка
     всё ещё 360px, базовые 24px в неё помещаются. Правится только отступ. */
  :is(#product-category #column-left, .ocf-offcanvas-body) .panel-heading {
   color: var(--jv-text-primary);
   padding: 4px 0 10px 0;   /* #404: тот же сдвиг вниз, что и на широком экране */
}
  :is(#product-category #column-left, .ocf-offcanvas-body) .ocf-option-name {

    font-size: 8px;

}
  :is(#product-category #column-left, .ocf-offcanvas-body) .ocfilter-option label {
    gap: 3px;
    padding: 6px 6px !important;
    border: 1.14px solid var(--jv-border);
    border-radius: 2.85px;
    background: #fff;
    color: var(--jv-text-secondary) !important;
    font-size: 8px !important;

}
  .jv-subcategory-card__name {
    font-size: 11px;
}
  /* #405/#406: здесь кегль тулбара падал с 16px до 12px — при сужении окна
     «Выводить по» и сортировка заметно съёживались, хотя места хватает.
     Размер оставляем тот же, что на широком экране.
     #653: заодно убран сжим иконки направления до 15px — у переключателя вида
     она 18px на всех ширинах, разнобой и читался как «другая иконка». */

  :is(#product-category #column-left, .ocf-offcanvas-body) .ocf-option-name .jv-chevron {
    width: 10px;
    
}
:is(#product-category #column-left, .ocf-offcanvas-body) .list-group-item {
    border: none;
    background: var(--jv-bg-card);
    border-radius: 5.7px;
    padding: 11.41px 5.7px;
    margin-bottom: 5.7px;
}
.jv-category__toolbar {
    /* #585: правое поле убрано и здесь — иначе на ≤1440 тулбар снова
       отходил от правой вертикали. */
    padding: 0 0 16px 5px;

}
  .jv-filters__inner {
    background: var(--jv-bg-surface);
    border-radius: 8.55px;
    padding: 17.11px 11.41px;
}

  .jv_category_jv-product-card__sku-row {
    padding: 0px 6px 0px 11px;
    gap: 5px;
    margin-top: -25px;
    margin-bottom: 20px;
}
  .jv_category_quantity__models, .jv_category_product-item__model, .jv_category_product-item__model .jv-product-card__sku-text {

    font-size: 9px;

}
  .jv_category_product-item__model .jv-product-card__sku-copy {
    width: 18px;
    height: 18px;
  }

 
  .jv-product-card__price-new { font-size: 19px; }
  .jv-product-card__price-old { font-size: 12px; }
  .jv-product-card__name, .jv-product-card__price, .jv-product-card__descr {margin: 0 5px 10px 5px;}
  .jv-product-card__name {
    
    font-size: 19px;
    line-height: 1.2;
    min-height: 40px;
}

    font-size: 10px;
    min-height: 20px;
}
  .jv-product-card__actions {
    display: flex;
    gap: 7px;
    margin-top: auto;
    line-height: 1;
    font-size: 12px;
}
.jv-product-card__btn-cart, .jv-product-card__btn-more {
    /* flex: 1; */
    /* height: 45px; */
    /* border-radius: 10px; */
    /* font-weight: 500; */
    /* font-size: 12px; */
    /* line-height: 1; */
    /* display: flex; */
    /* gap: 3px; */
    /* align-items: center; */
}
.jv-category-pagination .pagination a, .jv-category-pagination .pagination span {

    height: 14px;
    width: 14px;

    font-size: 14px;

}


    .navigation-content .breadcrumb > li:last-child,
.navigation-content .breadcrumb > li:last-child > span,
.navigation-content .breadcrumb > li:last-child > a {

  font-size: 14px !important;

}
  .navigation-content .breadcrumb > li > a {

    font-size: 14px !important;

}
  /* #676: тот же кегль самому пункту — иначе активный снова уедет вверх
     (у inline-flex базовая линия считается от содержимого). */
  .navigation-content .breadcrumb > li { font-size: 14px; }
.navigation-content .breadcrumb > li:not(:last-child)::after {
    content: '/' !important;
    margin: 0 6px !important;
    color: var(--jv-text-muted) !important;
    font-size: 14px;
}
    .jv-product-card__top {

    border-radius: 9px;

}
  
}
@media (max-width: 1360px){

  .jv-category-page .navigation-content {
    padding: 19px 0px 0px 0px;
}
.jv-category-page .container .jv-category__title {
    margin: 0 0px;
}
.selected-options .ocfilter-option span{
  background: none;
  font-size: 8px;
  font-weight: 500;
  padding-bottom: 5px;
}
.selected-options .ocfilter-option .btn-xs {
    font-size: 8px;
    padding: 6px !important;
    line-height: 1;
    background: none;
    color: var(--jv-text-primary);
    border-radius: 2.85px;
    border-color: var(--jv-accent) !important;
    color: var(--jv-text-primary) !important;
    border: 1px solid;
}
}

@media (max-width: 1360px){

  .jv-category-page .navigation-content {
    padding: 19px 0px 0px 0px;
}
.jv-category-page .container .jv-category__title {
    margin: 0 0px;
}
}



@media (max-width: 1199px) {
  .jv-category__layout {
    gap: 16px;
  }
  .jv-category__title h1 {
        font-size: 34px;
        margin: 21px 0 22px;
    }
  .jv-category__subcategories {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    margin: 0px 0 32px 0;
  }
  /* #289: было 205px — в такую колонку не влезали ни кнопки «Проект+»/
     «Регулярный» (падали по одной в строку), ни заголовки групп рядом с
     шевроном. Возвращаем ширину предыдущего шага; чтобы карточкам осталось
     место, сетка на этом же диапазоне уходит с 4 колонок на 3 (#290). */
  .jv-category__filters {
    width: 360px;
  }
  .navigation-content .breadcrumb > li:last-child,
.navigation-content .breadcrumb > li:last-child > span,
.navigation-content .breadcrumb > li:last-child > a {

  font-size: 14px !important;

}
  .navigation-content .breadcrumb > li > a {

    font-size: 14px !important;

}
      .jv-subcategory-card__name {
        font-size: 8px;
    }
  .jv-subcategory-card {

    padding: 5px 5px 10px 5px;
   
}
  .jv-products-grid { --jv-cards-gap: 12px; }
.navigation-content .breadcrumb > li:not(:last-child)::after {
    content: '/' !important;
    margin: 0 6px !important;
    color: var(--jv-text-muted) !important;
    font-size: 14px;
}
  
  /* #290: было 4 в ряд — с колонкой фильтров карточка ужималась до ~145px,
     названия обрезались на втором слове. 3 в ряд дают ~250px на 1161px и
     ~210px на 938px. */
  .jv-products-grid { --jv-cards-cols: 3; --jv-cards-gap: 12px; }
  .jv-product-card {
    border-radius: 9px;
  }

      /* было 7.35px под 4-колоночную сетку — на карточке шире читается как
         «мусор мелким шрифтом», возвращаем к размеру десктопа минус шаг */
      .jv_category_quantity__models, .jv_category_product-item__model, .jv_category_product-item__model .jv-product-card__sku-text {
        font-size: 11px;
    }
      .jv_category_jv-product-card__sku-row {
        padding: 0px 2px 0px 9px;
        gap: 5px;
        margin-top: -17px;
        margin-bottom: 25px;
    }
    
      .jv-product-card__price-new { font-size: 15px; }
      .jv-product-card__price-old { font-size: 10px; }

      .jv-product-card__price , .jv-product-card__name , .jv-product-card__descr , .jv-group-card {
        margin: 0 10px 15px 10px;
      }
  
      .jv-product-card__name {

        font-size: 15px;
        line-height: 1;
        min-height: 30px;
    }
  .jv-product-card__btn-cart, .jv-product-card__btn-more {
        flex: 1;
        /* #371: «кнопки не пропорциональны, добавь по 3px сверху и снизу» —
           26 → 32px. Заодно совпало с 32px, которые уже стоят в диапазоне
           541–1199 ниже по файлу: теперь высота кнопки одна на всей мобилке. */
        height: 32px;
        border-radius: 7px;
        font-weight: 500;
        font-size: 9.55px;
        line-height: 1;
        display: flex;
        gap: 3px;
        align-items: center;
    }
  .jv-product-card__top {

    border-radius: 6px;

}
      .jv-product-card__actions {
        display: flex;
        gap: 6px;
        margin-top: auto;
        line-height: 1;
        font-size: 12px;
    }
  /* #220: на мобилке иконка была 11px — в неё сложно попасть пальцем.
     Увеличена в 2,5 раза (до 28px), область касания — 40px. */
  /* #678 (19.08): сердечко весило больше пилюли «Новинка» (28px в позиции 6px
     против пилюли 18px в позиции 10px) и перетягивало угол карточки на себя.
     Иконка уменьшена до 24px, смещение 2px + рамка 8px — видимый край встаёт
     на те же 10px от кромки фото, что и пилюля, а область касания остаётся 40px. */
  .jv-product-card__like{
    width: 24px;
    height: 24px;
    top: 2px;
    right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 8px, а не 6: с ними коробка снова 40px (палец), а видимый край иконки
       встаёт ровно на 10px от кромки фото — на одну линию с пилюлей. */
    padding: 8px;
    box-sizing: content-box;
  }
  .jv-product-card__like svg{ width: 100%; height: 100%; }
      .jv_category_product-item__model .jv-product-card__sku-copy {
        width: 13px;
        height: 13px;
    }
}

@media (max-width: 1138px){
        .jv-product-card__price , .jv-product-card__name , .jv-product-card__descr , .jv-group-card {
        margin: 0 5px 15px 5px;
      }
 
  
}
@media (max-width: 980px){
  .jv-product-card__descr {
  margin: 0 5px 11px 5px;
  font-weight: 400;
  font-size: 8.16px;
  line-height: 1;
  color: var(--jv-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 16.32px;
}
   .jv-category__layout {
    gap: 20px;
  }
       .jv_category_jv-product-card__sku-row {
         margin-bottom: 20px;
    }
  .jv-product-card__btn-cart svg {
    width: 15px;
    height: 15px;
}
}

@media (max-width: 900px) {
  .jv-product-card {
    width: 100%;
  }
  .jv-category__title h1 {
    font-size: 28px;
  }

  .jv-category__subcategories {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    margin: 0px 0 32px 0;
    width: calc(100% + 10px );
    overflow: hidden;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0px 0 24px 0;
    display:flex;
  }
  
  .jv-category__subcategories--main {
    display:flex;
    gap: 11px;
    width: calc(100% + 10px );
    overflow: hidden;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin: 0px 0 24px 0;
  }
    .jv-category__subcategories--main .jv-subcategory-card {
    min-width: 117px;
    gap: 10px;
    padding: 10px 10px 20px 10px;
    border: 1.5px solid var(--jv-border);
    border-radius: 20px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .jv-product-card__name {
    font-size: 16px;
  }
  .jv-product-card__price-new { font-size: 16px; }
  .jv-product-card__price-old { font-size: 10px; }
  .jv-product-card__sku-text {
    font-size: 11px;
  }
      .jv-category__filters {
        display:none;
  }
    .jv-products-grid {
    display: grid;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
    /* фильтры на этой ширине скрыты (уходят в offcanvas), место освобождается —
       4 карточки в ряд смотрятся лучше трёх (#197) */
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
    /* здесь ширину раздаёт сама сетка — flex-формула ячейку бы только сузила */
    .jv-products-grid .jv-product-card { width: auto; }
}
@media (max-width: 540px){
   .jv-product-card__price,.jv-product-card__name,.jv-product-card__descr, .jv-group-card {margin: 0 5px 10px 5px;}
  .jv-products-grid {
    display: grid;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .jv-products-grid .jv-product-card { width: auto; }
  .jv-product-card__btn-more {
        display: none;

  }
  .navigation-content .breadcrumb {
  height: auto !important;
  background: transparent !important;
  gap: 0 !important;
  padding: 0px 0 0px !important;
  margin: 0 !important;
  /* overflow: visible !important; */
  border-radius: 0 !important;
  display: inline-table;
  align-items: center;
}
  
  .jv-category__subcategories--sub .jv-subcategory-card__image {
    max-width: 50px;
    border-radius: 10px;
}
  .jv-category__body {
    padding: 0px 0 0px;
}
  
     .jv-toolbar__limit-label, .jv-toolbar__limit-dropdown,.jv-sort-label {
       display:none;
    }
      /* #653: свой фон и радиус 6px ломали парность с .jv-view-toggle
         (фон даёт оболочка .jv-sort-dir, радиус кнопки — 8px). */
  .ocfilter-mobile-handle .btn-primary {
    color: #ffffff;
    background-color: var(--jv-primary);
    border-color: var(--jv-primary);
    padding: 5px 12px;
    margin-bottom: 0;
    font-size: 13px;
}
  .ocfilter-mobile-handle{
    padding:0;
    margin: 0!important;
  }
  .jv-category__toolbar {
        padding: 0px 0px 25px 0px;
        display:flex;
        align-items:center;
        justify-content: flex-start;
        gap: 6px;
    }
  .jv-category-page .navigation-content {
    padding: 19px 0 18px 0;
    margin-bottom: 0px;
    border-bottom: 1px solid rgba(217, 217, 217, 1);
}
      .jv-category-pagination .pagination a, .jv-category-pagination .pagination span {
        height: 14px;
        width: 14px;
        font-size: 12px;
    }
  .jv-category-pagination .pagination li.active span {
    /* background: var(--jv-primary); */
    border-color: var(--jv-primary);
    color: var(--jv-primary);
    font-weight: 500;
    font-size: 12px;
    background: none;
}
  .jv-category-pagination .pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    border-radius: 11px;
    padding: 11px;
    margin: 0;
    background: #f2f3f6;
}

  .ocfilter .ocfilter-option .ocf-option-name svg{
    width:13px;
  }
  .ocfilter .panel-heading{
    background: #ffffff;
  }
  .jv-category__subcategories--sub .jv-subcategory-card__name {

    font-size: 11px;

}
  .jv-category__subcategories--sub .jv-subcategory-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    gap: 5px;
    max-width: 147px;
    min-width: 147px;
    padding: 5px;
    border: 1.5px solid var(--jv-border);
    border-radius: 10px;
    background: var(--jv-bg-card);
    text-decoration: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
}

/* ============ JW: мобильная панель фильтров (≤900px) ============ */
/* OCFilter-мобайл (offcanvas + логика) работает до 900px, а не только <768 */
/* .ocfilter-mobile OCFilter переносит в <body> — селектор БЕЗ #product-category */
@media (max-width: 900px) {
  .ocfilter-mobile { display: block !important; }
  .ocf-offcanvas-remove { display: flex !important; }   /* × закрыть */
  .ocfilter-mobile-handle { display: none !important; } /* старую «Фильтр» заменяет ⚙ */
  /* старый тулбар (Выводить по / сортировка) на мобиле заменяет .jv-mfilter */
  #product-category .jv-category__toolbar { display: none !important; }
}
@media (min-width: 901px) {
  .ocfilter-mobile { display: none !important; }
}

/* Панель: [⚙ настройки][⇅ сортировка][чипсы групп →], липкая под шапкой. Только ≤900px */
.jv-mfilter { display: none; }
@media (max-width: 900px) {
  .jv-mfilter {
    display: flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: var(--jw-sticky-top, 0px);
    z-index: 6; /* выше карточек, ниже шапки(101)/сайдменю(9998) — не перекрывает меню */
    background: #fff;
    padding: 10px 0;
    margin-bottom: 12px;
  }
  .jv-mfilter__btn {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    border: 1px solid var(--jv-border, #d9d9d9);
    border-radius: 8px; background: #fff; cursor: pointer;
  }
  .jv-mfilter__chips {
    flex: 1 1 auto; min-width: 0;
    display: flex; gap: 8px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .jv-mfilter__chips::-webkit-scrollbar { display: none; }
  .jv-mfilter__chip {
    flex: 0 0 auto;
    padding: 10px 14px;
    border: 1px solid var(--jv-border, #d9d9d9);
    border-radius: 8px; background: #fff;
    font-size: 14px; line-height: 1; color: #1a1a1a; white-space: nowrap; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
  }
  .jv-mfilter__chip.is-active { background: var(--jv-primary); border-color: var(--jv-primary); color: #fff; }
  /* крестик на активном чипе группы — снимает все её значения, не открывая панель */
  .jv-mfilter__chip.is-active { display: inline-flex; align-items: center; gap: 8px; }
  .jv-mfilter__chip-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: rgba(255,255,255,.25); color: #fff;
    font-size: 10px; line-height: 1;
  }
  .jv-mfilter__chip-x:active { background: rgba(255,255,255,.45); }
}


@media (max-width: 360px){
    .jv-product-card__descr {
  margin: 0 5px 11px 5px;
  font-weight: 400;
  font-size: 10px;
    }
    .jv-mfilter__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #F2F3F6;
    border-radius: 8px;
    background: #F2F3F6;
    cursor: pointer;
  }
  .jv-mfilter__chip {
    flex: 0 0 auto;
    padding: 10px 14px;
    border: 1px solid var(--jv-border, #d9d9d9);
    border-radius: 8px; background: #fff;
    font-size: 12px; line-height: 1; color: #1a1a1a; white-space: nowrap; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
  }
}
/* Выпадающее меню значений под чипом фильтра (моб.) */
.jv-mfilter__dd {
  position: fixed;
  z-index: 9990;               /* ниже сайдменю(9998), выше контента */
  min-width: 170px; max-width: 80vw;
  max-height: 60vh; overflow-y: auto;
  background: #fff;
  border: 1px solid var(--jv-border, #d9d9d9);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
  padding: 6px;
  -webkit-overflow-scrolling: touch;
}
.jv-mfilter__dd-item {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border: none; background: none;
  font-size: 14px; line-height: 1.2; color: #1a1a1a;
  border-radius: 8px; cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.jv-mfilter__dd-item:hover { background: #f5f5f5; }
.jv-mfilter__dd-item.is-checked { color: var(--jv-primary); font-weight: 600; }
.jv-mfilter__dd-item.is-disabled { color: #c4c4c4; pointer-events: none; }
/* #115: дропдаун слайдер-опций (Мощность и т.п.) — диапазон «от/до» + Применить */
.jv-mfilter__dd-range { display: flex; align-items: center; gap: 8px; padding: 4px 2px 8px; }
.jv-mfilter__dd-input { width: 84px; height: 38px; border: 1.5px solid #d9d9d9; border-radius: 9px;
  padding: 0 10px; font: inherit; font-size: 16px; }
.jv-mfilter__dd-input:focus { outline: none; border-color: var(--jv-primary); }
.jv-mfilter__dd-sep { color: #999; flex: 0 0 auto; }
.jv-mfilter__dd-apply { width: 100%; height: 40px; border: 0; border-radius: 9px;
  background: var(--jv-primary); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.jv-mfilter__dd-apply:active { transform: scale(.98); }

/* #2b: модалка фильтра — крупнее текст и блоки (перебиваем :is()-правила через !important) */
.ocf-offcanvas-body .ocf-option-name { font-size: 16px !important; }
.ocf-offcanvas-body .ocfilter-option label { font-size: 15px !important; }
.ocf-offcanvas-body .ocfilter-option { padding: 14px 16px !important; }

/* ===== Кнопка «Показать все фильтры / Скрыть» (ocfilter hidden options) ===== */
.jv-ocf-more {
    width: 100%;
    margin-top: 4px;
    padding: 10px;
    background: transparent;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    color: var(--jv-text-muted);   /* аудит 02.09: контраст AA, было #999999 */
    cursor: pointer;
    box-shadow: none;
}
.jv-ocf-more:hover, .jv-ocf-more:focus { background: #f2f3f6; color: #172033; }
.jv-ocf-more .jv-ocf-more__hide { display: none; }
.jv-ocf-more[aria-expanded="true"] .jv-ocf-more__show { display: none; }
.jv-ocf-more[aria-expanded="true"] .jv-ocf-more__hide { display: inline; }
@media (max-width: 1360px){
  .jv-ocf-more {

    font-size: 9px;

}
}

/* Тач-таргеты пагинации ≥40px (a11y-аудит: были жёстко 14×14 — мелко для пальца).
   Номер визуально прежний (font-size не трогаем), расширяем только кликабельную область. */
.jv-category-pagination .pagination a,
.jv-category-pagination .pagination span {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
/* ═══ #116: мобильный офканвас OCFilter — вид как у каталожного шита ═══
   Шапка 17/800 + оранжевый крестик 34px + отступы 16px + имена секций 16/600.
   !important — перебиваем :is(#product-category #column-left, ...) (спец. (2,0,1)). */
.ocf-offcanvas.ocfilter-mobile .ocf-offcanvas-body { padding: 0 16px 24px !important; }
.ocf-offcanvas.ocfilter-mobile .panel-heading {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  font-size: 17px !important; font-weight: 800 !important; letter-spacing: -0.015em;
  /* #370: 20/14 по вертикали — как у шапки бургера (.jw-bd__head); по бокам 16px,
     чтобы заголовок и крестик стояли на той же вертикали, что и фильтры ниже
     (раньше шапка шла от края панели, а содержимое — с отступом). */
  padding: 20px 16px 14px !important; margin: 0 0 4px !important; border-bottom: 1px solid #eee !important;
}
/* #370: крестик — как .jw-bd__close: 40×40 на светлой плашке. Оранжевый квадрат
   34px спорил с кнопкой закрытия бургера и, после скругления панели, вставал
   впритык к подрезанному углу. */
.ocf-offcanvas.ocfilter-mobile .ocf-offcanvas-remove {
  /* position:static — шапка и так flex со space-between, она сама поставит крестик
     к правому краю с учётом своего padding. Абсолютное позиционирование прижимало
     его вплотную к углу, а после скругления панели угол ещё и подрезал кнопку. */
  position: static !important; flex: 0 0 auto !important;
  width: 40px !important; height: 40px !important; padding: 0 !important; border: 0 !important;
  border-radius: 10px !important; background: #f2f3f6 !important;
  display: grid !important; place-items: center !important;
}
.ocf-offcanvas.ocfilter-mobile .ocf-offcanvas-remove svg { fill: #171717 !important; width: 14px !important; height: 14px !important; }
.ocf-offcanvas.ocfilter-mobile .ocf-offcanvas-remove svg path { stroke: #171717 !important; }
.ocf-offcanvas.ocfilter-mobile .ocf-option-name { font-size: 16px !important; font-weight: 600 !important; padding: 13px 0 !important; }
.ocf-offcanvas.ocfilter-mobile .ocf-option-values { margin: 10px 0 16px !important; }

/* =====================================================================
   Правки по фидбэку 27.07 (#195, #196, #197).
   Блок в конце файла намеренно: в jv-category.css много перекрывающих
   медиазапросов, идущих не по возрастанию ширины, и правило-победитель
   определяется порядком в файле.
   ===================================================================== */

/* #196: описание карточки было 8.16px на ≤980 — нечитаемо */
@media (max-width: 980px) {
  .jv-product-card__descr { font-size: 12px; line-height: 1.35; }
}

/* #197 закрывается сеткой 4-в-ряд на ≤900 (см. выше), но на планшетах-
   «половинках» 4 колонки уже тесные — промежуточный шаг в 3 колонки,
   иначе карточка ужимается до ~130px и кнопки в ней не помещаются. */
@media (min-width: 541px) and (max-width: 700px) {
  .jv-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* #195: «Подробнее» длиннее соседней кнопки-иконки и переносился/распирал
   пару. Одинаковая высота, без переноса, шрифт под ширину карточки. */
@media (min-width: 541px) and (max-width: 1199px) {
  .jv-product-card__actions { align-items: stretch; }
  .jv-product-card__btn-cart,
  .jv-product-card__btn-more { height: 32px; font-size: 11px; }
  .jv-product-card__btn-more { white-space: nowrap; padding: 0 6px; }
}

/* ═══════════ #222: мобильная панель фильтров ═══════════
   В @media(max-width:1440px) значения фильтров ужимались до 8px, а группы
   держали padding 14/16 и большие пустоты — в модалке на телефоне это
   выглядело как «мелкие кнопки и огромные отступы». На узких экранах
   (офф-канвас) возвращаем читаемый размер и убираем лишний воздух. */
@media (max-width: 991px) {
  /* специфичность повторяет :is(...)-правило из @media(max-width:1440px) выше —
     иначе оно (вес id) перебивает размер шрифта обратно на 8px */
  :is(#product-category #column-left, .ocf-offcanvas-body) .ocf-option-name {
    font-size: 15px !important;
    padding: 10px 0 !important;
  }
  :is(#product-category #column-left, .ocf-offcanvas-body) .ocfilter-option label {
    padding: 8px 14px !important;
    font-size: 14px !important;
    border-radius: 9px !important;
    border-width: 1.5px !important;
    line-height: 1.2 !important;
    min-height: 36px;
    display: inline-flex !important;
    align-items: center;
  }
  :is(#product-category #column-left, .ocf-offcanvas-body) .ocf-option-values {
    gap: 8px !important;
    padding-bottom: 2px !important;
  }
  .ocf-offcanvas-body .ocfilter-option {
    padding: 10px 14px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--jv-border, #e4e4e4);
  }
  .ocf-offcanvas-body .list-group-item:last-child { border-bottom: none; }
  /* кнопка «Показать все фильтры» — крупнее и с воздухом, но без плашки */
  .ocf-offcanvas-body .jv-ocf-showall {
    font-size: 15px !important;
    padding: 14px 14px !important;
    width: 100%;
    text-align: left;
  }
}

/* ============================================================
   QA 29.07 (#249): на ≤1440 панель фильтров переключалась на «сжатую»
   типографику — подписи и значения падали с 14/13px до 8px, паддинги
   и радиусы становились дробными (17.11 / 11.41 / 8.55 / 5.7). На 1212px
   это выглядело как другая страница и не читалось. Возвращаем панели
   фильтров десктопный вид (>1440).
   Сетка карточек 4-в-ряд, введённая на этой же границе по #191, НЕ трогается:
   претензия была к фильтрам, карточкам ширины хватает.
   Блок идёт последним в файле — перебивает правила внутри @media выше
   при равной специфичности. Заголовок «Фильтры» с #288 тоже десктопный
   (24px): урезание до 14px клиент считал сменой вида на ровном месте.
   ============================================================ */
@media (max-width: 1440px) {
  .jv-filters__inner {
    border-radius: 15px;
    padding: 5px 20px 20px;
  }
  :is(#product-category #column-left, .ocf-offcanvas-body) .ocf-option-name {
    font-size: 14px;
  }
  :is(#product-category #column-left, .ocf-offcanvas-body) .ocf-option-name .jv-chevron {
    width: 16px;
    height: 16px;
  }
  :is(#product-category #column-left, .ocf-offcanvas-body) .ocfilter-option label {
    gap: 4px;
    padding: 10px 10px !important;
    border: 2px solid var(--jv-border);
    border-radius: 5px;
    font-size: 13px !important;
  }
  /* :not(.jv-filter-collapsed) — у свёрнутых блоков своя компактная
     набивка (11px 10px), её вернул #245, ломать нельзя */
  :is(#product-category #column-left, .ocf-offcanvas-body) .list-group-item:not(.jv-filter-collapsed) {
    border-radius: 10px;
    padding: 20px 10px;
    margin-bottom: 10px;
  }
  :is(#product-category #column-left, .ocf-offcanvas-body) .list-group-item.jv-filter-collapsed {
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 11px 10px; /* десктопная набивка свёрнутого блока (#245) */
  }
}

/* #310: описание, которого нет в выгрузке 1С. Раньше карточка показывала
   осиротевший хвост «..» (его клеит ядро при обрезке пустого текста) — теперь
   явная метка тем же красным, что и пустые характеристики (.jv-spec-empty). */
.jv-product-card__descr.jv-descr-empty {
  color: #d0342c;
  font-weight: 600;
}

/* #372: на мобилке в строке кода тесно — прячем поясняющую подпись «Код:»,
   оставляем сам артикул. Скринридерам подпись остаётся (visually-hidden). */
@media (max-width: 767px) {
  .jv-product-card__sku-cap {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* #378: длинные значения фильтра («Освещение для образовательных и медицинских
   учреждений») выезжали за колонку — чип был nowrap без ограничения ширины.
   Текст вынесен в .ocf-value-text (value_item.twig), обрезаем его по «…»,
   полное значение остаётся в title. Счётчик-бейдж не сжимаем. */
:is(#product-category #column-left, .ocf-offcanvas-body) .ocfilter-option label {
  max-width: 100%;
}

:is(#product-category #column-left, .ocf-offcanvas-body) .ocfilter-option label .ocf-value-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#product-category #column-left, .ocf-offcanvas-body) .ocfilter-option label small {
  flex: none;
}

/* #383: hover-галерея на плитке каталога. Плагин перекладывает картинки в
   .image-wrap и вешает поверх .tmb-wrap с зонами наведения; его собственный CSS
   делает ссылку inline-block, а картинки — position:relative, из-за чего фото
   съезжало из центра квадрата. Возвращаем прежнюю геометрию карточки. */
.jv-product-card__top a.hover-img-add {
  display: block;
  width: 100%;
  height: 100%;
}

.jv-product-card__top a.hover-img-add .image-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.jv-product-card__top a.hover-img-add .image-wrap img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85%;
  height: auto;
  max-height: 85%;
  transform: translate(-50%, -50%);
  object-fit: contain;
}

/* #400: зоны наведения галереи стояли на z-index:3 и накрывали сердечко
   «в избранное» (z-index:2) — кнопка перестала кликаться. Зонам достаточно
   быть выше .image-wrap (z-index:auto, но позже в DOM), то есть 2; сердечко
   и бейджи поднимаем над ними. */
.jv-product-card__top a.hover-img-add .tmb-wrap {
  z-index: 2;
}

.jv-product-card__like,
.jv-product-card__badges {
  z-index: 4;
}

/* =====================================================================
   #481 (07.08): бегущая обводка (#387) снята — клиенту разонравилась.
   Возвращён прежний ховер: карточка приподнимается, рамка оранжевая,
   лёгкая брендовая тень.
   ===================================================================== */
.jv-subcategory-card {
  position: relative;
  transition: box-shadow 0.2s ease, border-color 0.2s ease,
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.jv-subcategory-card:hover,
.jv-category__subcategories--sub .jv-subcategory-card:hover {
  border-color: var(--jv-accent);
  box-shadow: 0 4px 16px rgba(242, 91, 36, 0.1);
  transform: translateY(-3px);
}

/* Браузеры без @property (Firefox < 128) угол не анимируют — там ховер
   остаётся прежним: акцентная рамка без бега. */
@supports not (background: conic-gradient(from var(--jv-sc-ang), #000, #fff)) {
  .jv-subcategory-card::before { display: none; }
  .jv-subcategory-card:hover,
  .jv-category__subcategories--sub .jv-subcategory-card:hover {
    border-color: var(--jv-accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jv-subcategory-card:hover,
  .jv-category__subcategories--sub .jv-subcategory-card:hover {
    animation: none;
    transform: none;
  }
  .jv-subcategory-card:hover::before {
    background: var(--jv-primary);
  }
}


/* ===== Выбранные фильтры чипами (#8) =====
   Занимают левую часть тулбара — место «Выводить по», которое при активных
   фильтрах им уступает. Без фильтров тулбар остаётся прежним. */
.jv-afilter {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.jv-afilter::-webkit-scrollbar { display: none; }
.jv-afilter > * { flex: none; }
/* #448: счётчик найденного — первым в ряду чипов, приглушённым текстом */
.jv-afilter__count {
  font-size: 14px;
  line-height: 1.2;
  color: var(--jv-text-muted, #999);
  white-space: nowrap;
  padding-right: 4px;
}
.jv-afilter__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px 7px 12px;
  border: 1.5px solid var(--jv-border-light, #E4E5E9);
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  line-height: 1;
  color: var(--jv-text-primary, #171717);
  white-space: nowrap;
  transition: border-color .2s ease;
}
.jv-afilter__chip:hover { border-color: var(--jv-primary, #E94E1B); }
.jv-afilter__chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--jv-bg-light, #F2F3F6);
  color: var(--jv-text-muted, #999);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.jv-afilter__chip-x:hover { background: var(--jv-primary, #E94E1B); color: #fff; }

/* на узких экранах тулбара нет — сводка живёт в мобильной панели чипов */
@media (max-width: 900px) {
  .jv-afilter { display: none; }
}

/* ==== #23 · ЕДИНАЯ КАРТОЧКА ТОВАРА — каталог ====
   Значения из витрины docs/mockups/product-card-showcase.html. Селекторы с
   родителем .jv-products-grid: базовые правила карточки размазаны по файлу
   (26px в одном месте, 1.4em в другом, 19px в медиазапросе), и точечная правка
   каждого превратилась бы в разбор всего каскада. */
.jv-products-grid .jv-product-card__name {
  /* отступ от фото: раньше его давала строка артикула, которую сняли (#23) */
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  min-height: 40px;
}
.jv-products-grid .jv-product-card__descr {
  font-size: 12px;
  line-height: 16px;
  min-height: 32px;
}

/* Бейдж «N модели» — на месте убранного артикула, правый нижний угол фото */
.jv-card__models {
  position: absolute;
  right: 9px;
  bottom: 7px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--jv-bg-light, #F2F3F6);
  font-size: 11px;
  line-height: 1.3;
  color: #555;
  pointer-events: none;
}

@media (max-width: 575px) {
  .jv-products-grid .jv-product-card__name {
    font-size: 14px;
    line-height: 18px;
    min-height: 36px;
  }
  /* на узком экране описание ещё на пункт мельче — иначе спорит с названием */
  .jv-products-grid .jv-product-card__descr {
    font-size: 11px;
    line-height: 15px;
    min-height: 30px;
  }
  .jv-card__models { font-size: 10px; padding: 2px 7px; }
}

/* #446: описание в плитке каталога на больших экранах было 12px — мелко для
   широкой карточки. Поднимаем до 14px от 1200px и выше; на 768–1199 плитки
   уже узкие (4 в ряд), там прежний кегль.

   Правило в самом конце файла намеренно: победитель на широких экранах —
   `.jv-products-grid .jv-product-card__descr` (≈2649), специфичность у нас та
   же, решает порядок. min-height держит две строки: 2 × 19px. */
@media (min-width: 1200px) {
  .jv-products-grid .jv-product-card__descr {
    font-size: 14px;
    line-height: 19px;
    min-height: 38px;
  }
}



/* ============================================================
   #576 · заголовок плитки каталога: 15/19, три строки
   ------------------------------------------------------------
   Было 16/20 и две строки, а типовому названию нужно четыре: под
   многоточие уходило ровно то, чем товары отличаются (мощность,
   температура, IP). Три строки при более мелком кегле закрывают
   типовой случай; что не влезло — обрезается многоточием, полное
   название есть в карточке товара.

   Фиксированная высота, а не min-height: ряд плиток должен стоять
   по одной линии независимо от длины имени.
   ============================================================ */
.jv-products-grid .jv-product-card__name {
  font-size: 15px;
  line-height: 19px;
  height: 57px;               /* ровно три строки */
  min-height: 0;
  -webkit-line-clamp: 3;
}

/* ============================================================
   Вариант C2 · характеристики плитки таблицей с резервом зоны
   ------------------------------------------------------------
   Пары «параметр — значение» с точечным лидером, как в карточке товара:
   значения выстроены по правому краю и ряд плиток читается как таблица.

   Ключевое — min-height на 3 ряда. Набор атрибутов один на раздел, но
   заполнены они не у всех: у одного товара три значения, у другого два,
   у аксессуара ни одного. Без резерва зона схлопывается, описание и всё
   ниже уезжает вверх, и ряд идёт забором (замеряли: разброс 19px).
   Пустые ряды не рисуем — резерв держит высоту молча, без прочерков,
   чтобы не подсвечивать дыры в данных 1С.
   ============================================================ */
.jv-products-grid .jv-card-specs {
  margin: 0 10px 14px;
  min-height: 60px;          /* 3 ряда × 20px */
  font-size: 12.5px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.jv-products-grid .jv-card-specs__row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--jv-text-secondary, #303131);
}

/* имя параметра ужимается и обрезается первым (flex-shrink 1000): разъезжаться
   должна левая колонка, значение по возможности видно целиком — ради него
   строка и заводилась. Но если значение само шире карточки («Литий-железо-
   фосфатный (LiFePO4)»), оно тоже обрезается многоточием — иначе оно вылезало
   за правый край последней колонки и раздвигало страницу (горизонтальная
   прокрутка в «Аварийном освещении», 18–65px в зависимости от ширины). */
.jv-products-grid .jv-card-specs__key {
  flex: 0 1000 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--jv-text-muted, #999);
}

.jv-products-grid .jv-card-specs__dots {
  flex: 1 1 auto;
  min-width: 10px;
  border-bottom: 1px dotted #c9ccd1;
  transform: translateY(-3px);
}

.jv-products-grid .jv-card-specs__val {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}

/* описание — тоже с резервом, иначе товары без текста в 1С поднимают
   кнопку выше соседей по ряду */
.jv-products-grid .jv-product-card__descr {
  min-height: 34px;          /* 2 строки × 17px */
}

@media (max-width: 1199px) {
  .jv-products-grid .jv-card-specs { margin: 0 5px 12px; font-size: 12px; line-height: 19px; min-height: 57px; }
}

/* ============================================================
   Переключатель вида: плитка ↔ список
   ------------------------------------------------------------
   Кнопки живут и в каталоге (правая часть тулбара), и в выдаче
   (строка над сеткой). Активный вид помнит localStorage — см.
   js/jv-view-toggle.js.
   ============================================================ */
.jv-view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: var(--jv-bg-light, #F2F3F6);
}

.jv-view-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--jv-text-muted, #999);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.jv-view-toggle__btn:hover { color: var(--jv-text-primary, #171717); }

.jv-view-toggle__btn.is-active {
  background: #fff;
  color: var(--jv-primary, #E94E1B);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.jv-view-toggle__btn:focus-visible {
  outline: 2px solid var(--jv-primary, #E94E1B);
  outline-offset: 2px;
}

/* ============================================================
   Вид «список»
   ------------------------------------------------------------
   Та же карточка, другая раскладка: фото слева, название и описание
   по центру, характеристики отдельной колонкой справа. Раскладка
   grid по именованным областям — DOM карточки плоский, и порядок
   элементов в списке отличается от плиточного.

   Резервы высоты (три строки имени, три ряда характеристик) в списке
   не нужны: строки идут одна под другой, соседей по ряду нет и
   выравнивать нечего — поэтому здесь они снимаются.
   ============================================================ */
.jv-products-grid--list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jv-products-grid--list .jv-product-card {
  width: 100%;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 300px;
  grid-template-areas:
    "photo name    specs"
    "photo descr   specs"
    "photo actions specs";
  grid-template-rows: auto auto auto;
  align-content: start;
  column-gap: 24px;
  padding: 14px;
}

.jv-products-grid--list .jv-product-card:hover { transform: none; }

.jv-products-grid--list .jv-product-card__top {
  grid-area: photo;
  height: 180px;
}

.jv-products-grid--list .jv-product-card__name {
  grid-area: name;
  height: auto;
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 21px;
  -webkit-line-clamp: 2;
}

.jv-products-grid--list .jv-card-specs {
  grid-area: specs;
  margin: 0;
  min-height: 0;
  align-self: start;
  font-size: 13px;
  line-height: 22px;
}

.jv-products-grid--list .jv-product-card__descr {
  grid-area: descr;
  margin: 0 0 12px;
  min-height: 0;
  -webkit-line-clamp: 3;
}

/* Кнопка идёт сразу под описанием, а не прижимается к низу строки: у высоких
   карточек между текстом и кнопкой зияла пустая полоса в полэкрана. */
.jv-products-grid--list .jv-product-card__actions {
  grid-area: actions;
  align-self: start;
  justify-self: start;
  margin-top: 4px;
}

.jv-products-grid--list .jv-product-card__btn-more {
  min-width: 190px;
}

/* цена и переключатели вариантов в списке идут в центральной колонке */
.jv-products-grid--list .jv-product-card__price,
.jv-products-grid--list .jv-group-card {
  grid-column: 2;
}

/* Узкий экран: колонок под три зоны нет — список схлопывается в тот же
   вертикальный поток, что и плитка, и переключатель прячем. */
@media (max-width: 767px) {
  .jv-products-grid--list .jv-product-card {
    display: flex;
    flex-direction: column;
    padding: 10px;
  }
  .jv-products-grid--list .jv-product-card__top { height: auto; }
  .jv-products-grid--list .jv-product-card__name { -webkit-line-clamp: 3; }
  .jv-view-toggle { display: none; }
}

/* ============================================================
   Серии раздела — плашки над товарами
   ------------------------------------------------------------
   Тот же компонент, что и подкатегории (.jv-subcategory-card): для
   покупателя серия — такой же уровень навигации, и выглядеть она должна
   так же. Отличия минимальные: заголовок блока, состояние «выбрана»
   и ссылка-сброс.
   ============================================================ */
.jv-category__series {
  margin: 0 0 22px;
}

.jv-category__series-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 10px;
}

/* Сетка серий: шесть в ряд, показываем два ряда. Сколько плиток влезает в эти
   два ряда, считает jv-series-more.js — колонок на разных экранах разное число,
   и «12» в CSS зашивать нельзя. */
/* auto-fill, а не фиксированные 8 колонок: при зуме или на узком экране
   колонка становилась уже, чем плашка умеет сжаться (фото + отступы + текст),
   и сетка вылезала за край контейнера. Теперь браузер сам считает, сколько
   колонок влезает — на широком экране это те же восемь, дальше 7, 6, 5… */
.jv-category__series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

@media (max-width: 600px) {
  .jv-category__series-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
  }
}

/* Плашка серии компактнее подкатегорийной: фото 84 → 56, текст переносится.
   Иначе минимальная ширина плашки не даёт получить восемь колонок. */
.jv-category__series-grid .jv-subcategory-card {
  padding: 8px 10px 8px 8px !important;
  gap: 10px !important;
  min-width: 0;
}

.jv-category__series-grid .jv-subcategory-card__image {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
}

.jv-category__series-grid .jv-subcategory-card__content {
  min-width: 0;
}

.jv-category__series-grid .jv-subcategory-card__name {
  /* #627: было overflow-wrap:anywhere — разрешало рвать имя серии в любом месте,
     и «PHB 03 PRO-5» разъезжалось на два этажа. break-word рвёт только слово,
     которое целиком не влезает; дефис внутри кода серии обезврежен в шаблоне. */
  overflow-wrap: break-word;
  line-height: 1.25;
}

.jv-category__series-grid .jv-subcategory-card { width: 100%; margin: 0; }

/* #590: количество на плашках не показываем — ни «(6 шт.)» у серии, ни
   «(209 товаров)» у подкатегории. Число здесь ничего не решает, а плашка
   из-за него в два этажа. Разметку намеренно оставляем: значение нужно
   поиску по странице и разбору вёрстки. Единственное исключение — плитка
   «Показать все (34)»: там счётчик объясняет, сколько ещё серий скрыто. */
.jv-subcategory-card:not(.jv-series-more) .jv-subcategory-card__count {
  display: none;
}

/* Плитка «Показать все» — та же геометрия, но без фото */
.jv-series-more {
  border: 1px dashed var(--jv-border, #e6e8ec);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.jv-series-more:hover { border-color: var(--jv-primary, #E94E1B); }

.jv-series-more__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: var(--jv-bg-light, #F2F3F6);
  color: var(--jv-primary, #E94E1B);
  transition: transform .15s ease;
}

/* развёрнуто — та же стрелка, повёрнутая вверх */
.jv-series-more__icon.is-up { transform: rotate(180deg); }

.jv-series-more:hover .jv-subcategory-card__name { color: var(--jv-primary, #E94E1B); }

.jv-category__series-reset {
  font-size: 13px;
  color: var(--jv-primary, #E94E1B);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}

.jv-category__series-reset:hover { color: var(--jv-primary-hover, #d1410f); }


/* Выбранная серия — оранжевая рамка, как у активной подкатегории на макете.
   Блок держим в хвосте файла: базовую .jv-subcategory-card ниже по файлу ещё
   раз переопределяют (ховер, анимация рамки), и объявленная раньше подсветка
   до элемента не доезжала. */
.jv-category__series-grid .jv-series-card.is-active {
  border-color: var(--jv-primary, #E94E1B);
  box-shadow: 0 0 0 1px var(--jv-primary, #E94E1B);
}

.jv-category__series-grid .jv-series-card.is-active .jv-subcategory-card__name {
  color: var(--jv-primary, #E94E1B);
}

/* ============================================================
   Списочный вид = таблица серий (вариант T3)
   ------------------------------------------------------------
   Общая шапка колонок и одинаковая сетка у всех строк: значения
   выстраиваются по вертикали, и раздел можно сравнивать взглядом.
   Число колонок приходит из JS переменной --jv-series-count: набор
   характеристик у разделов разный.
   ============================================================ */
.jv-products-grid--list .jv-series-head,
.jv-products-grid--list .jv-series-row,
.jv-products-grid--list .jv-series-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) repeat(var(--jv-series-count, 3), minmax(80px, 160px)) 110px;
  align-items: center;
  column-gap: 16px;
}

/* шапка */
.jv-products-grid--list .jv-series-head {
  padding: 0 14px 10px;
  font-size: 12px;
  color: var(--jv-text-muted, #999);
}

.jv-products-grid--list .jv-series-head__col { text-align: right; }

/* строка серии */
.jv-products-grid--list .jv-series-row {
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--jv-bg-surface, #f2f3f6);
  cursor: pointer;
  transition: background-color .15s ease;
}

.jv-products-grid--list .jv-series-row:hover { background: #eceef1; }

.jv-products-grid--list .jv-series-pic {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.jv-products-grid--list .jv-series-pic img {
  max-width: 82%;
  max-height: 82%;
  object-fit: contain;
}

.jv-products-grid--list .jv-series-row__name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.jv-products-grid--list .jv-series-row__chev {
  color: var(--jv-text-muted, #999);
  font-size: 18px;
  transition: transform .15s ease, color .15s ease;
}

.jv-products-grid--list .jv-series-row.is-open .jv-series-row__chev {
  transform: rotate(90deg);
  color: var(--jv-primary, #E94E1B);
}

.jv-products-grid--list .jv-series-row__title {
  font-weight: 600;
  font-size: 16px;
  color: var(--jv-text-primary, #171717);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jv-products-grid--list .jv-series-row__badge {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 99px;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  color: #555;
}

.jv-products-grid--list .jv-series-row__val {
  text-align: right;
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--jv-text-primary, #171717);
}

.jv-products-grid--list .jv-series-row__act {
  text-align: right;
  font-size: 13px;
  color: var(--jv-text-muted, #999);
}

/* строка товара внутри серии */
.jv-products-grid--list .jv-series-item {
  padding: 8px 14px;
  border-bottom: 1px solid var(--jv-border, #e6e8ec);
}

.jv-products-grid--list .jv-series-item.is-hidden { display: none; }

.jv-products-grid--list .jv-series-item__name a {
  font-size: 14px;
  line-height: 19px;
  color: var(--jv-text-primary, #171717);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jv-products-grid--list .jv-series-item__name a:hover { color: var(--jv-primary, #E94E1B); }

.jv-products-grid--list .jv-series-item__val {
  text-align: right;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--jv-text-secondary, #303131);
}

.jv-products-grid--list .jv-series-item__act { text-align: right; }

.jv-products-grid--list .jv-series-item__more {
  font-size: 13px;
  font-weight: 600;
  color: var(--jv-primary, #E94E1B);
  text-decoration: none;
}

.jv-products-grid--list .jv-series-item__more:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   #586 · раскрытая серия — вариант «Таблица» (стенд, вариант 1)
   Рамок у строк нет: группу держат заливка шапки и тонкие
   разделители, как в прайс-листе. Прежнее решение рисовало рамку
   и направляющую У КАЖДОЙ строки, а между строками сетки есть
   зазор — линия шла пунктиром и группа рассыпалась на карточки.
   ------------------------------------------------------------ */
.jv-products-grid--list .jv-series-row.is-open {
  border-radius: 14px 14px 0 0;
  margin-bottom: 0;
}

.jv-products-grid--list .jv-series-row.is-open .jv-series-row__act {
  color: var(--jv-primary, #E94E1B);
  font-weight: 500;
}

.jv-products-grid--list .jv-series-item.is-grouped {
  background: #fff;
  border-bottom: 1px solid var(--jv-border, #e6e8ec);
}

.jv-products-grid--list .jv-series-item.is-grouped .jv-series-pic {
  background: var(--jv-bg-surface, #f2f3f6);
  border-radius: 10px;
}

.jv-products-grid--list .jv-series-item.is-grouped.is-last {
  border-bottom: 0;
  margin-bottom: 10px;
}

/* значение, одинаковое у всей серии, уже написано в её строке — гасим:
   взгляд должен цепляться за то, чем исполнения различаются */
.jv-products-grid--list .jv-series-item__val.is-common { color: #c6c8cd; }

/* артикул второй строкой под именем: в списке по нему заказывают
   (с плитки артикул убран — #23, там он только мешал) */
.jv-products-grid--list .jv-series-item__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.jv-products-grid--list .jv-series-item__sku {
  font-size: 12px;
  color: var(--jv-text-muted, #999);
  font-variant-numeric: tabular-nums;
}

/* #600: описание товара в плитке на мобильном не показываем. На узкой
   колонке от него остаются два обрезанных слова 8-м кеглем — это не текст,
   а серая полоса, которая отодвигает кнопки. Имя и характеристики остаются. */
@media (max-width: 600px) {
  .jv-product-card__descr { display: none !important; }
}

/* карточки в табличном списке скрыты — их заменили строки */
.jv-products-grid--list .jv-product-card.jv-series-hidden { display: none !important; }

/* ------------------------------------------------------------
   Адаптив таблицы серий
   Три состояния, а не одно: на планшете колонки ещё влезают —
   их незачем сваливать под имя, а на телефоне колоночная сетка
   не живёт вовсе, и значения становятся чипсами.
   ------------------------------------------------------------ */

/* 1200–1440: колонки жмутся, но остаются колонками */
@media (max-width: 1440px) {
  .jv-products-grid--list .jv-series-head,
  .jv-products-grid--list .jv-series-row,
  .jv-products-grid--list .jv-series-item {
    column-gap: 12px;
    grid-template-columns: 48px minmax(0, 1fr) repeat(var(--jv-series-count, 3), minmax(64px, 110px)) 92px;
  }
  .jv-products-grid--list .jv-series-pic { width: 48px; height: 48px; }
  .jv-products-grid--list .jv-series-row__val { font-size: 14px; }
  .jv-products-grid--list .jv-series-item__val { font-size: 13px; }
}

/* ≤1200: колонок нет — значения становятся чипсами.
   Порог подняли с 900: при открытой колонке фильтров (360 px) на планшете
   таблице остаётся ~700 px, и три колонки значений съедали имя целиком.
   Здесь строка перестаёт быть сеткой и становится flex: в гриде каждое
   значение занимает СВОЙ ряд (grid-column: 2/-1 кладёт их столбиком),
   а чипсы должны идти лентой и переноситься. Разрыв строки обеспечивает
   растянутое имя — после него значениям уже не хватает места. */
@media (max-width: 1200px) {
  .jv-products-grid--list .jv-series-head { display: none; }

  .jv-products-grid--list .jv-series-row,
  .jv-products-grid--list .jv-series-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 10px 12px;
  }

  .jv-products-grid--list .jv-series-pic { flex: 0 0 48px; }

  .jv-products-grid--list .jv-series-row__name,
  .jv-products-grid--list .jv-series-item__name { flex: 1 1 120px; min-width: 0; }

  /* порядок в строке: фото → имя (тянется) → чипсы → действие.
     Действие обязано быть последним: это точка выхода, а не значение. */
  .jv-products-grid--list .jv-series-row__act,
  .jv-products-grid--list .jv-series-item__act { order: 5; flex: 0 0 auto; }

  .jv-products-grid--list .jv-series-row__val,
  .jv-products-grid--list .jv-series-item__val {
    order: 4;
    flex: 0 0 auto;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 99px;
    background: var(--jv-bg-surface, #f2f3f6);
    color: var(--jv-text-secondary, #303131);
  }

  /* внутри серии показываем только то, чем исполнения различаются:
     повторять «IP40» на каждой строке узкого экрана — трата места */
  .jv-products-grid--list .jv-series-item__val.is-common { display: none; }

  /* прочерк в чипсе читается как значение — на узком экране его не выводим */
  .jv-products-grid--list .jv-series-row__val.is-empty,
  .jv-products-grid--list .jv-series-item__val.is-empty { display: none; }

  /* у строки серии фон чипса белый — она сама лежит на сером */
  .jv-products-grid--list .jv-series-row__val { background: #fff; }

  .jv-products-grid--list .jv-series-row__title { font-size: 15px; white-space: normal; }
}

/* ≤600: телефон, раскладка «строка-ссылка» (мобильный стенд, вариант B).
   Вся строка кликабельна, справа только шеврон, а артикул и отличающая
   характеристика идут одной мета-строкой под именем.
   Механика: строка — flex с переносом, имя забирает остаток первой строки,
   поэтому артикул и чипсы переезжают на вторую и встают рядом. Обёртки для
   них нет (на десктопе это отдельные колонки таблицы), роль обёртки играет
   display:contents у имени — его дети становятся детьми строки. */
@media (max-width: 600px) {
  .jv-products-grid--list .jv-series-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 11px 26px 11px 12px;
  }

  .jv-products-grid--list .jv-series-item .jv-series-pic { width: 48px; height: 48px; flex: none; }

  .jv-products-grid--list .jv-series-item__name { display: contents; }

  .jv-products-grid--list .jv-series-item__name a {
    flex: 1 1 calc(100% - 60px);
    min-width: 0;
    font-size: 13px;
    line-height: 18px;
  }

  /* растянутая ссылка: клик по любой точке строки ведёт на товар */
  .jv-products-grid--list .jv-series-item__name a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  /* мета-строка выравнивается по имени, а не по левому краю: 48 фото + 8 gap.
     Отступ вешаем на первый элемент второй строки — им обычно оказывается
     артикул, а если его нет (товар без model) — первый чипс. */
  .jv-products-grid--list .jv-series-item__sku { order: 3; font-size: 11px; margin-left: 56px; }
  .jv-products-grid--list .jv-series-item__name a + .jv-series-item__val { margin-left: 56px; }

  .jv-products-grid--list .jv-series-item__val {
    order: 4;
    flex: 0 0 auto;
    font-size: 11.5px;
    padding: 2px 8px;
  }

  /* «Подробнее» — шеврон у правого края: текст на 390 px отнимал у имени
     треть ширины, а вся строка и так ссылка */
  .jv-products-grid--list .jv-series-item__act {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }

  .jv-products-grid--list .jv-series-item__more {
    font-size: 0;
    color: #c8ccd4;
  }

  .jv-products-grid--list .jv-series-item__more::after {
    content: "›";
    font-size: 20px;
    line-height: 1;
  }

  /* шапка серии остаётся кнопкой раскрытия — здесь ссылки нет */
  .jv-products-grid--list .jv-series-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 11px 12px;
  }

  .jv-products-grid--list .jv-series-row .jv-series-pic { width: 40px; height: 40px; flex: none; }
  /* 🔴 Было flex: 1 1 auto — имя забирало ровно столько, сколько ему нужно, и
     дальше решал flex-wrap: у коротких серий пилюля диапазона и «развернуть»
     оставались в строке заголовка, у длинных переезжали вниз, а иногда
     «развернуть» падало под миниатюру. Список из десятка серий выглядел
     разъехавшимся (проверено 03.09 на 390px). Базис в остаток первой строки
     (40 фото + 8 gap) заставляет имя всегда дожимать строку до конца, поэтому
     пилюли и «развернуть» ВСЕГДА идут второй строкой — ровно как у строк
     исполнений выше, где этот приём уже применён. */
  .jv-products-grid--list .jv-series-row__name { flex: 1 1 calc(100% - 48px); min-width: 0; }
  .jv-products-grid--list .jv-series-row__title { font-size: 15px; white-space: normal; }
  .jv-products-grid--list .jv-series-row__badge { font-size: 10.5px; padding: 2px 7px; }
  .jv-products-grid--list .jv-series-row__act { order: 5; font-size: 12px; }

  /* у серии значений три — на телефоне это три чипса в ряд; оставляем первое
     (соседний селектор, а не :nth-of-type: ячейки все <span>) */
  .jv-products-grid--list .jv-series-row__val { order: 4; font-size: 11.5px; padding: 2px 8px; }
  .jv-products-grid--list .jv-series-row__val + .jv-series-row__val { display: none; }
}



/* ──────────────────────────────────────────────────────────────────────────
   Мобильная панель фильтров: строка «Показать N товаров» (02.09.2026).

   Отбор применяется мгновенно, и на телефоне человек оставался без ответа:
   панель во весь экран, счётчик найденного скрыт вместе с десктопным тулбаром,
   а выход — только крестик в углу. Строка внизу панели показывает результат и
   служит понятным «готово». Разметку строит jv-mfilter-apply.js.

   Панель — flex-колонка (custom.css, блок @media max-width:900px), тело внутри
   растягивается; строке хватает flex:0 0 auto, чтобы не сжиматься. Скрываем её
   вне мобильной ширины: сама панель там не показывается, но лишний узел в
   потоке нам не нужен.
   ────────────────────────────────────────────────────────────────────────── */
.jv-mfilter-apply { display: none; }

@media (max-width: 900px) {
  /* Тело панели обязано сжиматься: только тогда оно прокручивается само и
     оставляет место строке снизу. min-height:0 — без него флекс-ребёнок не
     уменьшается ниже своего содержимого, и всё возвращается к прежней поломке. */
  .ocf-offcanvas.ocfilter-mobile .ocf-offcanvas-body {
    flex: 1 1 auto !important;
    -ms-flex: 1 1 auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 900px) {
  .ocf-offcanvas.ocfilter-mobile .jv-mfilter-apply {
    display: block;
    flex: 0 0 auto;
    padding: 12px 16px;
    /* Домашняя полоса iPhone перекрывает нижние 34px — иначе кнопка под ней. */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--jv-border, #E6E8EC);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .06);
  }

  .ocf-offcanvas.ocfilter-mobile .jv-mfilter-apply__btn {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    background: var(--jv-accent, #E94E1B);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
  }

  /* Пока идёт запрос — приглушаем, но кликабельной оставляем: закрыть панель
     человек вправе в любой момент, отбор к тому времени уже применён. */
  .ocf-offcanvas.ocfilter-mobile .jv-mfilter-apply__btn.is-busy { opacity: .65; }
}