/* Start:/local/templates/eporta/styles.css?1785771249121*/
/* Стили визуального редактора Bitrix (не влияют на публичную часть) */

/* End */


/* Start:/local/templates/eporta/template_styles.css?1793103826168611*/
/*
 * EPORTA — шаблон сайта
 * Дизайн-система адаптирована из прототипа D:\eporta-prototype\assets\app.css
 */

/* ========== Шрифт (локально, Этап 5 перфоманса, 2026-08-05) ==========
   Раньше грузился с fonts.googleapis.com — доп. DNS/TLS round-trip до стороннего хоста,
   попадал в список render-blocking запросов (Lighthouse, ?dev_preview трейс). Manrope —
   вариативный шрифт: Google отдаёт ОДИН и тот же .woff2 на все начертания 400-800 в
   пределах unicode-набора (проверено эмпирически — url совпадает у всех font-weight),
   поэтому здесь всего 2 файла (кириллица + латиница) перекрывают весь диапазон весов
   через несколько @font-face с разным font-weight на один и тот же src. Файлы лежат в
   assets/fonts/, версионируются как остальная статика шаблона (immutable, см. Этап 4). */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/local/templates/eporta/assets/fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/local/templates/eporta/assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ========== Дизайн-токены ========== */
:root {
  --accent:        #e8820a;
  --accent-dark:   #c2670a;
  --dark:          #1b1a17;
  --success:       #1f8a4c;
  --sale:          #c0392b;
  --border:        #efece6;
  --border-soft:   #e7e3db;
  --bg:            #fff;
  --bg-warm:       #f6f3ed;
  --bg-section:    #f4f1ea;
  --text-muted:    #8a857b;
  --text-mid:      #726c62;
  --text-hint:     #a39e95;
  /* clamp вместо фикс. 56px — на широких мониторах (2560px+/32") отступ подрастает вместе
     с шириной вьюпорта, иначе контент "плавает" в пустоте по бокам с узкой рабочей зоной. */
  --pad-x:         clamp(20px, 3vw, 96px);   /* горизонтальный отступ контента */
  --font:          'Manrope', system-ui, sans-serif;
}

/* ========== Ресет и база ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  font-family: var(--font);
  color: var(--dark);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: #fff; }
a { text-decoration: none; color: inherit; }
img { display: block; }

/* ========== Шапка ========== */
.site-header {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 14px var(--pad-x);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

/* Логотип */
.logo-wrap {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
  text-decoration: none;
  color: inherit;
}
.logo-icon { display: block; width: 40px; height: 40px; flex: none; }
.logo-text { line-height: 1; }
.logo-text strong { display: block; font: 800 20px var(--font); letter-spacing: .02em; }
.logo-text small { display: block; font: 600 8px var(--font); letter-spacing: .2em; color: var(--text-muted); }

/* Поиск */
.header-search {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border-soft);
  border-radius: 10px;
  padding: 11px 15px;
  color: var(--text-hint);
  font-size: 14px;
  gap: 10px;
}
.header-search:hover, .header-search:focus-within { border-color: var(--accent); }
.header-search .ico { color: #c2bdb2; flex: none; }
.header-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: var(--dark);
}
.header-search input::placeholder { color: var(--text-hint); }

.header-search-suggest {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(27, 26, 23, .14);
  z-index: 260;
  max-height: 380px;
  overflow-y: auto;
  padding: 6px;
}
.header-search-suggest.open { display: block; }
.header-search-suggest .hs-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--dark);
}
.header-search-suggest .hs-item:hover { background: #f6f4f0; }
.header-search-suggest .hs-item img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  flex: none;
  background: #f2efe9;
}
.header-search-suggest .hs-name { font: 600 13px var(--font); flex: 1; min-width: 0; }
.header-search-suggest .hs-price { font: 700 13px var(--font); color: var(--accent); flex: none; }
.header-search-suggest .hs-empty { padding: 14px; text-align: center; color: var(--text-hint); font-size: 13px; }

/* Телефон */
.header-phone { text-align: right; flex: none; }
.header-phone strong { display: block; font: 800 16px var(--font); }
.header-phone a { display: block; font: 600 11.5px var(--font); color: var(--accent); }

/* Кнопка-иконка звонка — компактная замена .header-phone на мобильном (см. media
   ниже), спрятана на десктопе, там телефон и так виден текстом. */
.header-call-btn {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-warm);
  color: var(--dark);
  flex: none;
  align-items: center;
  justify-content: center;
}
.header-call-btn svg { width: 18px; height: 18px; }

/* Иконки (корзина, аккаунт) */
.header-actions { display: flex; gap: 14px; flex: none; align-items: center; }
.header-actions .btn-account {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #726c62;
  transition: color .15s;
}
.header-actions .btn-account svg { width: 100%; height: 100%; }
.header-actions .btn-account:hover,
.header-actions .btn-account.active { color: var(--accent); }
.cart-btn { position: relative; display: block; color: var(--dark); transition: color .15s; }
.cart-btn:hover { color: var(--accent); }
.cart-btn .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.cart-btn .icon svg { width: 100%; height: 100%; }
.cart-btn .badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font: 700 9px var(--font);
  display: flex;
  align-items: center;
  justify-content: center;
}
.compare-btn { position: relative; display: block; color: var(--dark); transition: color .15s; }
.compare-btn:hover { color: var(--accent); }
.compare-btn .icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.compare-btn .icon svg { width: 100%; height: 100%; }
.compare-btn .badge {
  position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); color: #fff; font: 700 9px var(--font);
  display: flex; align-items: center; justify-content: center;
}

/* Тач-таргеты шапки: видимая иконка остаётся 22×22, но кликабельная область увеличена
   до ~44×44 через прозрачный ::before (position:absolute поверх иконки, без сдвига
   раскладки и без изменения видимого размера). */
.header-actions .btn-account,
.cart-btn,
.compare-btn { position: relative; }
.header-actions .btn-account::before,
.cart-btn::before,
.compare-btn::before {
  content: "";
  position: absolute;
  inset: -11px;
}

/* ========== Навигация (cat-nav) ========== */
.cat-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 15px var(--pad-x);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg);
  flex-wrap: wrap;
}
.cat-nav a, .cat-nav .nav-item {
  font: 600 14.5px var(--font);
  color: var(--text-mid);
  padding-bottom: 6px;
  border-bottom: 2.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.cat-nav a:hover, .cat-nav .nav-item:hover { color: var(--dark); }
.cat-nav a.active, .cat-nav .nav-item.active {
  font-weight: 700;
  color: var(--dark);
  border-bottom-color: var(--accent);
}
.cat-nav .nav-sale {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sale);
}
.cat-nav .nav-sale .dot-red {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sale);
  display: inline-block;
}
.cat-nav .nav-new .badge-new {
  font: 800 8px var(--font);
  color: #fff;
  background: var(--success);
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: .06em;
  margin-left: 6px;
}
.cat-nav .spacer { flex: 1; }
.cat-nav .sale-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 13px var(--font);
  color: var(--accent-dark);
  margin-left: auto;
}
.cat-nav .sale-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

/* ---- Блок "Покупателю" (Замер/Доставка/Оплата/Монтаж/Гарантия) ----
   Крайний правый пункт .cat-nav — то есть противоположный от Каталога/Коллекций. */
.buyer-nav { position: relative; margin-left: 22px; }
.buyer-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 14.5px var(--font);
  color: var(--text-mid);
  background: none;
  border: none;
  padding: 0 0 6px;
  border-bottom: 2.5px solid transparent;
  cursor: pointer;
}
.buyer-nav-toggle:hover,
.buyer-nav.open .buyer-nav-toggle { color: var(--dark); }
.buyer-nav-arrow {
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .15s;
}
.buyer-nav.open .buyer-nav-arrow { transform: rotate(-135deg) translateY(1px); }
.buyer-nav-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 9px);
  z-index: 210;
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(27,26,23,.13);
  padding: 8px;
}
.buyer-nav.open .buyer-nav-dropdown { display: block; }
.buyer-nav-dropdown a {
  display: block;
  font: 600 14px var(--font);
  color: var(--dark);
  padding: 9px 12px;
  border-radius: 8px;
}
.buyer-nav-dropdown a:hover { background: var(--bg-warm); }
.buyer-nav-dropdown a.active { color: var(--accent-dark); background: var(--bg-warm); }
/* ========== Карусель баннеров на главной ==========
   Высота — clamp(min, 42vh, max): на низких вьюпортах (ноутбуки 768px и ниже)
   ужимается так, чтобы под ней уже читался край мозаики "Каталог по категориям"
   без скролла; на высоких — не раздувается больше 480px по той же причине. */
.home-banner-carousel {
  position: relative;
  width: 100%;
  height: clamp(280px, 42vh, 480px);
  overflow: hidden;
  border-radius: 16px;
}
.hbc-track {
  display: flex;
  height: 100%;
  transform: translateX(0);
  transition: transform .5s ease;
  will-change: transform;
}
.hbc-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  display: block;
  background-size: cover;
  background-position: center;
  text-decoration: none;
}
/* Первый слайд — обычный <img fetchpriority="high"> вместо background-image
   (LCP-оптимизация, Этап 6 перфоманса, 2026-08-09), уложен под overlay/content. */
.hbc-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hbc-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,17,12,.62) 0%, rgba(20,17,12,.18) 55%, rgba(20,17,12,0) 80%);
}
.hbc-slide-content {
  position: absolute;
  left: 32px;
  bottom: 32px;
  max-width: 460px;
}
/* Затенение баннера выключено — .hbc-slide-overlay не рендерится вовсе, только картинка и
   название, без плашки под текстом (заказчик рисует своё оформление на самом фото, 05.09.2026).
   Текстовая тень вместо плашки — иначе белое название пропадает на светлом фото. */
.hbc-slide-content--plain .hbc-title,
.hbc-slide-content--plain .hbc-subtitle {
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
}
.hbc-title { font: 800 30px var(--font); color: #fff; letter-spacing: -0.01em; line-height: 1.1; }
.hbc-subtitle { font: 600 14px var(--font); color: rgba(255,255,255,.82); margin-top: 8px; }
.hbc-cta {
  display: inline-block;
  margin-top: 16px;
  font: 700 13.5px var(--font);
  color: #fff;
  background: var(--accent);
  padding: 10px 20px;
  border-radius: 999px;
}
.hbc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  color: var(--dark);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background .15s;
}
.hbc-arrow:hover { background: #fff; }
.hbc-prev { left: 18px; }
.hbc-next { right: 18px; }
.hbc-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}
.hbc-dots .hbc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width .2s, background .2s;
}
.hbc-dots .hbc-dot.active { width: 22px; border-radius: 4px; background: #fff; }
@media (max-width: 640px) {
  .hbc-slide-content { left: 20px; right: 20px; max-width: none; bottom: 24px; }
  .hbc-title { font-size: 22px; }
  .hbc-arrow { display: none; }
  /* Меньший минимум высоты — на телефоне баннер не должен занимать почти весь первый
     экран, под ним должен читаться край следующего блока без скролла. */
  .home-banner-carousel { height: clamp(200px, 32vh, 480px); }
}

/* ---- Шапка на мобильном ----
   Раньше .site-header был чисто десктопной строкой без единого media-запроса:
   лого + поиск + телефон + иконки в один ряд не влезали в экран телефона и
   вылезали за край (документ шире вьюпорта, весь сайт выглядел "скомканным").
   Раскладка: 1-я строка — лого / кнопка-звонок + иконки, 2-я строка — поиск
   на всю ширину. .header-phone (текст номера) прячем — вместо него
   .header-call-btn (см. выше). */
@media (max-width: 640px) {
  .site-header { flex-wrap: wrap; row-gap: 10px; gap: 12px; }
  .logo-wrap { order: 1; }
  .header-phone { display: none; }
  .cat-nav-toggle { order: 2; margin-left: auto; }
  .header-call-btn { display: flex; order: 3; }
  .header-actions { order: 4; gap: 12px; }
  .header-search { order: 5; flex: 0 0 100%; }
}

/* ---- Бургер-меню (мобильная навигация .cat-nav) ----
   .cat-nav на десктопе — обычная строка ссылок в потоке. На мобильном прячем её из
   потока и показываем как выезжающую слева панель (drawer) по клику на .cat-nav-toggle
   (3 полоски) — тот же список пунктов, включая .buyer-nav внутри. JS — тот же паттерн
   click-toggle/click-outside, что у buyerNavToggle (см. app.js). */
.cat-nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  flex: none;
  border: none;
  border-radius: 8px;
  background: var(--bg-warm);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.cat-nav-toggle span { display: block; width: 18px; height: 2px; background: var(--dark); border-radius: 1px; }
@media (max-width: 640px) {
  .cat-nav-toggle { display: flex; }
  body.cat-nav-open { overflow: hidden; }
  body.cat-nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(20,17,12,.45);
    z-index: 295;
  }
  /* !important на position/top/left/bottom/overflow — у Bitrix (авторизованная админка,
     $APPLICATION->ShowPanel()) есть core-JS, который сам проставляет inline
     style="position:relative;overflow:visible" на верхнеуровневые блоки body (замечено
     на проде под админом) — инлайн-стиль иначе перебивает это правило и панель
     разворачивается в потоке на всю высоту документа вместо fixed-оверлея. */
  .cat-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 300;
    width: 84vw;
    max-width: 320px;
    height: 100vh;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 18px var(--pad-x) 24px;
    background: #fff;
    overflow-y: auto !important;
    transform: translateX(-100%);
    transition: transform .25s ease;
    border-bottom: none;
    box-shadow: 0 0 40px rgba(20,17,12,.2);
  }
  .cat-nav.open { transform: translateX(0); }
  .cat-nav a, .cat-nav .nav-item { padding: 11px 0; width: 100%; white-space: normal; }
  .cat-nav .spacer { display: none; }
  .buyer-nav { margin-left: 0; width: 100%; }
  .buyer-nav-toggle { width: 100%; justify-content: space-between; padding: 11px 0; }
  .buyer-nav-dropdown { position: static; box-shadow: none; border: none; padding: 0 0 0 12px; }
}

/* ---- Мозаика: большой слайдер + два маленьких друг под другом ----
   .home-banner-mosaic задаёт общую высоту (тот же clamp, что был у одиночного
   слайдера), а вложенные .home-banner-carousel растягиваются на 100% высоты
   своей ячейки вместо собственного clamp. */
.home-banner-mosaic {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 14px;
  height: clamp(280px, 42vh, 480px);
}
.home-banner-mosaic .home-banner-carousel {
  height: 100%;
}
.hbc-side-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  height: 100%;
}
.home-banner-carousel--compact .hbc-slide-content {
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: none;
}
.home-banner-carousel--compact .hbc-title { font-size: 15px; }
.home-banner-carousel--compact .hbc-subtitle { font-size: 11px; margin-top: 4px; }
.home-banner-carousel--compact .hbc-cta { font-size: 10.5px; padding: 6px 12px; margin-top: 8px; }
.home-banner-carousel--compact .hbc-arrow { display: none; }
.home-banner-carousel--compact .hbc-dots { bottom: 8px; }
.home-banner-carousel--compact .hbc-dots .hbc-dot { width: 5px; height: 5px; }
.home-banner-carousel--compact .hbc-dots .hbc-dot.active { width: 14px; }
@media (max-width: 860px) {
  .home-banner-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
  }
  .home-banner-mosaic .home-banner-carousel.hbc-main { height: clamp(220px, 38vh, 360px); }
  .hbc-side-stack { grid-template-columns: 1fr 1fr; grid-template-rows: none; height: 140px; }
}

/* ========== Хлебные крошки ========== */
.breadcrumb {
  font: 500 12.5px var(--font);
  color: #b3aea4;
  padding: 12px var(--pad-x) 0;
  background: var(--bg);
}
.breadcrumb a { color: inherit; }

/* ========== Меню "personal" (bitrix:menu, страницы simple.offers) ========== */
#personalMenuWrap { padding: 20px 56px 0; }
#personalMenu { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
#personalMenu li { margin: 0; }
#personalMenu a {
  display: inline-block;
  font: 600 13px var(--font);
  color: var(--text, #3a3631);
  background: #f3f1ec;
  padding: 9px 16px;
  border-radius: 20px;
  text-decoration: none;
}
#personalMenu a.selected { background: var(--dark); color: #fff; }

/* ========== Карточка товара ========== */
/* .product-card — внешний позиционирующий блок, сам без фона/скругления/overflow:hidden (это
   теперь на .card-clip, см. ниже) — нужен "чистым", чтобы .card-hover-actions (задача
   10.09.2026, "В корзину" по наведению) могла выезжать НИЖЕ его границ без обрезки. z-index на
   :hover поднимает карточку над рядом снизу — иначе более поздние по DOM карточки следующего
   ряда рисовались бы поверх выехавшей кнопки. */
.product-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}
.product-card:hover { z-index: 5; }
.product-card .card-clip {
  background: #fcfcfc;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.product-card:hover .card-clip { box-shadow: 0 8px 24px rgba(27,26,23,.10); transform: translateY(-2px); }

/* Карточка модели на странице коллекции (см. catalog/index.php, блок "Модели коллекции") —
   задача 08.09.2026 (Сергей: должна быть максимально похожа на товарную карточку, включая точный
   размер): сама карточка теперь буквально .product-card (см. ниже) — тот же размер фото и
   шрифты. Единственные сознательные отличия от товарной карточки — в самой PHP-разметке (нет
   бейджей/звёзд/.card-actions, у модели в целом их не бывает).

   Сетка при этом СВОЯ, не .eporta-product-grid: та — CSS grid с фиксированным числом колонок
   (repeat(N, 200px)) — при неполном последнем ряду (например, 7 моделей = 6 в первом ряду + 1 во
   втором) grid размещает карточки строго слева направо, лишние пустые колонки остаются справа —
   центрирование всей сетки (justify-content:center) не центрирует каждую строку по отдельности,
   только сетку целиком (жалоба Сергея 08.09.2026: "нижний ряд идёт с левого края"). Здесь —
   flex-wrap с фиксированной шириной карточки 200px: браузер сам укладывает столько карточек в
   строку, сколько влезает по ширине контейнера (без явных брейкпоинтов по колонкам — при том же
   200px+16px gap это даёт то же число в ряду, что и у .eporta-product-grid), а justify-content:center
   на flex центрирует КАЖДУЮ строку независимо, включая неполную последнюю. */
.eporta-model-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.eporta-model-grid > .product-card { flex: 0 0 200px; width: 200px; }
/* Мобилка — по 2 модели в ряд (задача 10.09.2026: fixed flex:0 0 200px даёт 1 в ряд на экранах
   уже 416px, т.к. 200px+200px+16px gap не помещается). CSS grid с 2 явными колонками вместо
   flex — десктопное центрирование неполного последнего ряда (сам смысл flex-wrap выше) на
   мобилке не нужно: 2 в ряд почти всегда даёт чётное число моделей, а нечётный хвост из одной
   карточки в grid просто остаётся слева, что и ожидается для сетки. */
@media (max-width: 640px) {
  .eporta-model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eporta-model-grid > .product-card { flex: initial; width: auto; }
}

.product-card .img-wrap { position: relative; }
/* Единый фон подложки под фото (раньше переключался по цвету двери — светлые/тёмные карточки
   вперемешку в сетке смотрелись пёстро, см. inc/card-backdrop.php). Один контрастный тон и для
   светлых, и для тёмных дверей. */
/* Высота фото фиксирована в px, не vw-clamp — при фиксированной ширине карточки (см.
   .eporta-product-grid ниже) vw-зависимая высота продолжала бы "дышать" от ширины окна ровно
   так же, как раньше "дышала" сама плашка (жалоба заказчика на 169.ru, задача 06.09.2026).
   210→240→258→340→296px (задача 10.09.2026: 340px оказалось лишним — по фидбэку заказчика на
   реальном экране на два ряда карточек уже не хватало высоты, цена уезжала за нижний край) —
   object-fit:contain при портретном кадре двери масштабирует и высоту, и ширину пропорционально,
   так что дверь всё равно крупнее исходных 258px. Ширина карточки (200px) и число колонок не
   меняются. */
.product-card .img-wrap img { width: 100%; height: 296px; object-fit: contain; background: #fcfcfc; }
.product-card .img-wrap .img-noimg { width: 100%; height: 296px; display: flex; align-items: center; justify-content: center; background: #fcfcfc; color: #a39e95; font: 700 12px var(--font); }
.product-card .badge {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #fff;
  font: 700 10px var(--font);
  padding: 4px 9px;
  border-radius: 6px;
}
.product-card .badge.hit { background: var(--accent); }
.product-card .badge.sale { background: var(--success); }
.product-card .badge.new { background: var(--success); }
.wishlist-remove-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #a39e95;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(27,26,23,.12);
}
.wishlist-remove-btn:hover { color: #e8820a; }
.wishlist-remove-btn:disabled { opacity: .5; cursor: default; }
/* Рейтинг — раньше .stars внутри .info (пять символов звёзд + число отдельной строкой над
   названием), теперь оверлей поверх фото в правом верхнем углу, компактный формат "★ 4.9"
   (задача 10.09.2026, "карточки каталога"). Бейджи hit/new/sale — тот же угол, но слева
   (.product-card .badge, left:10px), друг с другом не пересекаются. Если на карточке ещё и
   кнопка "Удалить из избранного" (.wishlist-remove-btn, только на /wishlist/) — та же точка
   top:10/right:10 — сдвигаем рейтинг ниже через :has(), а не порядком разметки. */
.product-card .card-rating {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,.88);
  color: var(--dark);
  font: 700 11px var(--font);
  padding: 3px 8px;
  border-radius: 8px;
  line-height: 1.3;
}
.img-wrap:has(.wishlist-remove-btn) .card-rating { top: 44px; }
.product-card .info { padding: 10px 12px 8px; }
/* Название — две строки (задача 06.09.2026): NAME делится в PHP по первой запятой на модель
   (.name, крупнее/жирнее) и покрытие+цвет (.coating, мельче/приглушённый цвет) — раньше это была
   одна обрезанная строка "Dorsum-Eco 12.2, Экошпон Дуб Мадейра янтарь Н", из которой на узкой
   карточке толком не читалось ни то, ни другое. Обе строки — свой nowrap+ellipsis, обрезаются
   независимо; полное название по-прежнему доступно через title= на .name. */
.product-card .name {
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 5px 0 0;
}
/* Фурнитура: полное название товара — до двух строк вместо одной обрезанной. */
.product-card .name.name--full {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 8px;
}
.product-card .coating {
  font-family: var(--font);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 2px 0 8px;
}
/* Цена — одна строка, новая и старая (зачёркнутая) рядом (задача 06.09.2026: были раньше
   строкой одна под другой). */
.product-card .price-row { display: flex; align-items: baseline; gap: 8px; }
.product-card .price-block { display: flex; align-items: baseline; gap: 8px; }
.product-card .price { font-family: var(--font); font-weight: 800; font-size: 18px; white-space: nowrap; }
.product-card .price-old { font-family: var(--font); font-weight: 600; font-size: 12px; color: var(--text-hint); text-decoration: line-through; white-space: nowrap; }
/* Сравнение — убрано из .card-actions под ценой, кнопка переехала иконкой в правый нижний угол
   фото (тот же паттерн круглой кнопки, что у .wishlist-remove-btn в правом верхнем). На
   детальной странице (catalog.element, #ctaBtn) кнопка "В корзину" не тронута — другой шаблон. */
.product-card .btn-compare {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--dark);
  font-weight: 700;
  font-size: 15px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(27,26,23,.12);
  transition: border-color .15s, color .15s;
}
.product-card .btn-compare:hover, .product-card .btn-compare.added { border-color: var(--accent); color: var(--accent-dark); }
/* "В корзину" убрали с плитки насовсем (задача 10.09.2026), но по правке заказчика в тот же день
   вернули — по наведению на карточку. Две прошлые попытки не подошли: max-height 0→auto в потоке
   раздвигал(а) строку сетки и сдвигал(а) соседние ряды; оверлей поверх цены внутри
   .product-card обрезался бы, если бы .product-card сохранял overflow:hidden (задачу решает
   вынос overflow:hidden на .card-clip, см. выше) — здесь блок ВНЕ .card-clip, поэтому ничем не
   обрезается. position:absolute, top:100% — не участвует в потоке, высота строки грида не
   меняется; при наведении появляется НИЖЕ карточки, поверх карточки следующего ряда
   (.product-card:hover получает z-index, см. выше, иначе более поздняя по DOM карточка снизу
   рисовалась бы поверх). */
.product-card .card-hover-actions {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding-top: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
}
.product-card:hover .card-hover-actions,
.product-card:focus-within .card-hover-actions {
  opacity: 1;
  visibility: visible;
}
.product-card .card-hover-actions .btn-cart {
  display: block;
  width: 100%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 8px 11px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(27,26,23,.25);
  transition: background .15s;
}
.product-card .card-hover-actions .btn-cart:hover { background: var(--accent-dark); }

/* Сетка карточек каталога/коллекций — 6 в ряд на десктопе (по аналогии с 169.ru, задача
   Алексея/Сергея 06.09.2026). Раньше колонки были резиновые (repeat(N,1fr)) — при сужении/
   расширении окна тянулась сама плашка ("разъезжались" карточки, а не поля вокруг них — жалоба
   заказчика). Теперь ширина колонки фиксирована (200px), при лишней ширине контейнера
   grid просто добавляет пустое место по бокам (justify-content:center) — сами карточки не растут
   и не сжимаются внутри одного брейкпоинта. --eporta-cols остаётся inline-переменной из PHP
   (catalog/index.php) для широкого экрана, медиа-запросы ниже дожимают число колонок на узких. */
.eporta-product-grid {
  display: grid;
  grid-template-columns: repeat(var(--eporta-cols, 6), 200px);
  justify-content: center;
  gap: 16px;
}
@media (max-width: 1560px) { .eporta-product-grid { grid-template-columns: repeat(5, 200px); } }
@media (max-width: 1300px) { .eporta-product-grid { grid-template-columns: repeat(4, 200px); } }
@media (max-width: 1040px) { .eporta-product-grid { grid-template-columns: repeat(3, 200px); } }
/* Ниже 860px сайдбар фильтров уходит в fixed-шторку (см. .eporta-catalog-filters-form ниже) —
   ширина под сетку освобождается, поэтому мобильный ландшафт возвращается к 4 в ряду
   (пожелание Сергея: "2 или 4 в зависимости от ориентации"). */
@media (max-width: 860px)  { .eporta-product-grid { grid-template-columns: repeat(4, 200px); } }
/* Мобильный портрет — фиксированные 200px в 2 колонки не всегда помещаются на узких экранах
   (320-400px), здесь сетка намеренно резиновая (minmax), а не фиксированная. */
@media (max-width: 640px)  { .eporta-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* На резиновых сетках (эта и .eporta-model-grid ниже) карточка сама не имеет фиксированной
   ширины 200px — фиксированная высота фото (296px, см. .img-wrap img выше) на узкой карточке
   рисовала бы непропорционально высокое фото. Здесь высота — пропорция от той же ширины/высоты
   200:340, а не пиксели (задача 10.09.2026). */
@media (max-width: 640px) {
  .product-card .img-wrap img,
  .product-card .img-wrap .img-noimg { height: auto; aspect-ratio: 200 / 296; }
}

/* Квадратные карточки коллекции (задача 12.09.2026, Invi — скрытые двери): фото товара
   интерьерное (1200x1200/520x520), не обычное портретное — чтобы сцена читалась, карточка крупнее
   и в ряду их меньше (3 на десктопе вместо 6). Флаг UF_SQUARE_CARDS секции-коллекции
   (local/admin_tools/eporta_collections/) добавляет этот модификатор класса на сетку — см.
   $eportaIsSquareCards в catalog.section/.default/template.php. Тот же модификатор пригоден для
   входных дверей/перегородок (тот же формат фото), когда для них заведут коллекции. */
.eporta-product-grid--square { grid-template-columns: repeat(var(--eporta-cols, 3), 320px); }
@media (max-width: 1300px) { .eporta-product-grid--square { grid-template-columns: repeat(3, 300px); } }
@media (max-width: 1040px) { .eporta-product-grid--square { grid-template-columns: repeat(2, 320px); } }
@media (max-width: 860px)  { .eporta-product-grid--square { grid-template-columns: repeat(2, 300px); } }
@media (max-width: 640px)  { .eporta-product-grid--square { grid-template-columns: repeat(1, minmax(0, 1fr)); } }
/* Квадратное фото — object-fit:cover (не contain, как у обычной карточки), интерьерная сцена
   должна заполнять кадр целиком, а не оставлять поля вокруг двери. */
.eporta-product-grid--square .product-card .img-wrap img,
.eporta-product-grid--square .product-card .img-wrap .img-noimg { height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
/* Карточка "квадратной" коллекции внутри ОБЫЧНОГО смешанного списка (общий каталог/похожие/
   вишлист — не страница самой коллекции, там уже весь грид --square выше). Раскладку сетки не
   трогаем (карточка того же размера, что и соседние), только кадрирование фото: было
   object-fit:contain (пустые поля сверху/снизу у квадратного кадра в портретной рамке 200:296),
   по правке заказчика 12.09.2026 — cover, кадр всегда заполнен, лишнее обрезается по бокам. */
.product-card--square-photo .img-wrap img,
.product-card--square-photo .img-wrap .img-noimg { object-fit: cover; }

/* Тот же квадратный вид для блока "Модели коллекции" (свой флекс-грид, см. .eporta-model-grid
   выше) — карточка крупнее, фото квадратом. */
.eporta-model-grid--square > .product-card { flex: 0 0 320px; width: 320px; }
.eporta-model-grid--square .product-card .img-wrap img,
.eporta-model-grid--square .product-card .img-wrap .img-noimg { height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 640px) {
  .eporta-model-grid--square > .product-card { flex: initial; width: auto; }
}

/* Каталог на очень широких мониторах (2560px+/32", ultrawide): --pad-x (см. токены выше)
   растит только боковой отступ. Сама сетка карточек теперь и так не растягивается (фиксированная
   ширина колонки, см. .eporta-product-grid выше) — этот max-width ограничивает более широкие
   строчные блоки страницы (заголовок, чипы фильтров, обёртку сайдбар+сетка), чтобы их кромка не
   расползалась дальше сетки на очень широких экранах, и центрирует их так же, как сама сетка
   центрируется через justify-content. .eporta-collection-models — блок "Модели коллекции"
   (catalog/index.php), выровнен по той же рамке, что и "Все товары коллекции" ниже (задача
   06.09.2026, было: блок моделей тянулся на всю ширину без ограничения). */
.eporta-catalog-headrow, .eporta-catalog-chips, .eporta-catalog-filters-wrap, .eporta-collection-models {
  max-width: 1760px;
  margin-left: auto;
  margin-right: auto;
}

/* Строка "Заголовок + сортировка/вид" каталога (catalog/index.php) — на десктопе H1 и блок
   сортировки/переключателя вида стоят в одну строку по краям, на узком экране блок с
   dropdown'ом сортировки не помещается и вылезал за край экрана. */
@media (max-width: 560px) {
  .eporta-catalog-headrow { flex-wrap: wrap; gap: 10px; align-items: flex-start; }
  .eporta-catalog-toolrow { flex: 0 0 100%; justify-content: space-between; gap: 8px !important; min-width: 0; }
  /* Сортировка уступает место («Сначала популярные» обрезается), иначе три контрола шире экрана и страница скроллится вбок. */
  .eporta-catalog-toolrow .eporta-sort-dd { flex: 1 1 0; min-width: 0; }
  .eporta-catalog-toolrow .eporta-sort-dd > summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .eporta-catalog-toolrow .eporta-filters-toggle, .eporta-catalog-toolrow .eporta-view-switch { flex: none; }
}

/* ---- Фильтры каталога на мобильном (выезжающая шторка справа) ----
   Форма фильтров (.eporta-catalog-filters-form) на десктопе — обычная колонка 216px
   рядом с сеткой. На узком экране это зажимало #eportaCatalogGrid до ~194px. Ниже
   860px форма уходит из потока (display:none) и открывается как fixed-панель по
   клику на .eporta-filters-toggle (JS — catalog/index.php, тот же паттерн, что у
   .cat-nav-toggle в шапке). !important — перебивает инлайн-стили формы (flex/width
   заданы в разметке catalog/index.php). */
.eporta-filters-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #e7e3db;
  border-radius: 10px;
  padding: 10px 14px;
  font: 600 13px 'Manrope';
  color: #3a3631;
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.eporta-filters-toggle-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #e8820a;
  color: #fff;
  font: 700 11px 'Manrope';
}
.eporta-filters-panel-head { display: none; }
.eporta-filters-close {
  border: none;
  background: none;
  font-size: 18px;
  color: #726c62;
  cursor: pointer;
  padding: 4px;
}
@media (max-width: 860px) {
  .eporta-filters-toggle { display: inline-flex; }
  .eporta-catalog-filters-form {
    display: none !important;
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    width: 86vw !important;
    max-width: 340px;
    height: 100vh;
    overflow-y: auto;
    background: #fff;
    padding: 18px var(--pad-x) 24px;
    box-shadow: 0 0 40px rgba(20,17,12,.2);
    box-sizing: border-box;
  }
  .eporta-filters-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: 800 16px 'Manrope';
    margin-bottom: 8px;
  }
  body.eporta-filters-open { overflow: hidden; }
  body.eporta-filters-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(20,17,12,.45);
    z-index: 295;
  }
  body.eporta-filters-open .eporta-catalog-filters-form { display: block !important; }
}

/* Карточка товара: внешняя .product-card — не ссылка (внутри неё теперь два independent-а:
   .product-card-link на сам товар и свотчи цвета — каждый свотч тоже ссылка, но на ДРУГОЙ
   товар, вложенные <a> невалидны, поэтому основная ссылка вынесена в дочерний блок). */
.product-card-link { display: block; text-decoration: none; color: inherit; }

/* Свотчи цвета под карточкой (схлопывание модели в каталоге — см. catalog/index.php): один
   элемент выдачи на модель, остальные цвета доступны кружками-миниатюрами, ведущими на
   соответствующий товар. Тот же паттерн уже был на детальной странице
   (catalog.element/.default/template.php), здесь — компактный вариант под ценой. */
.product-swatches { display: flex; align-items: center; gap: 8px; padding: 0 13px 12px; flex-wrap: wrap; }
.product-swatches .swatch {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background-size: cover; background-position: center; background-color: #f3f1ec;
  border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--border, #e7e3db);
}
.product-swatches .swatch:hover { box-shadow: 0 0 0 1.5px var(--accent, #e8820a); }
.product-swatches .swatch-more { font: 700 11px 'Manrope'; color: #8a857b; }

/* Режим "Список" (переключатель плитка/список над каталогом) — карточка в строку вместо
   плитки: картинка слева фиксированной ширины, инфо справа. Работает поверх той же разметки
   .product-card, без изменений в PHP-шаблоне карточки. */
.eporta-product-grid--list { grid-template-columns: 1fr !important; gap: 10px; }
.eporta-product-grid--list .product-card { display: flex; align-items: center; gap: 12px; }
.eporta-product-grid--list .product-card .card-clip { flex: 1; min-width: 0; display: flex; }
.eporta-product-grid--list .product-card-link { display: flex; align-items: stretch; gap: 16px; flex: 1; min-width: 0; }
.eporta-product-grid--list .product-card .img-wrap { flex: none; width: 160px; aspect-ratio: 1; }
.eporta-product-grid--list .product-card .img-wrap img,
.eporta-product-grid--list .product-card .img-wrap .img-noimg { height: 100%; }
.eporta-product-grid--list .product-card .info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.eporta-product-grid--list .product-swatches { flex: none; padding: 0 13px 0 0; max-width: 140px; }
/* Оверлей "В корзину" по наведению (.card-hover-actions) рассчитан на карточку-плитку —
   позиционируется top:100% от .product-card, а в списке .product-card сам flex-row, всплыл бы
   не под строкой, а как попало. Проще скрыть, чем городить отдельную раскладку под режим,
   которым и так редко пользуются. */
.eporta-product-grid--list .card-hover-actions { display: none; }
@media (max-width: 560px) {
  .eporta-product-grid--list .product-card-link { flex-direction: row; }
  .eporta-product-grid--list .product-card .img-wrap { width: 96px; }
  .eporta-product-grid--list .product-swatches { display: none; }
}

/* Живая фильтрация каталога (#eportaFiltersForm, assets/app.js): "шторка" перекрывает
   #eportaCatalogGrid ДО подмены карточек, затем уезжает вниз, постепенно открывая уже
   подставленный под ней новый результат сверху вниз — а не просто fade всей сетки целиком. */
.eporta-catalog-curtain {
  position: absolute;
  inset: 0;
  background: var(--bg, #fff);
  transform: translateY(0);
  transition: transform .6s cubic-bezier(.65, 0, .35, 1);
  z-index: 5;
  pointer-events: none;
}
.eporta-catalog-curtain::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 24px;
  transform: translateY(100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0));
}

/* Дропдаун сортировки (заменяет мок-<div> "Сначала популярные"): нативный <details>/<summary>,
   без JS-библиотек. summary — сам контрол, открытие рисует список ссылок абсолютным блоком. */
.eporta-sort-dd { position: relative; }
.eporta-sort-dd > summary {
  display: flex; align-items: center; gap: 9px; list-style: none; cursor: pointer;
  border: 1.5px solid #e7e3db; border-radius: 10px; padding: 10px 14px;
  font: 600 13px 'Manrope'; color: #3a3631; white-space: nowrap;
}
.eporta-sort-dd > summary::-webkit-details-marker { display: none; }
.eporta-sort-dd[open] > summary { border-color: #c2bdb2; }
.eporta-sort-dd-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 200px;
  background: #fff; border: 1.5px solid #e7e3db; border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 28px rgba(20,18,14,.12);
}
.eporta-sort-dd-menu a {
  display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none;
  font: 600 13px 'Manrope'; color: #3a3631;
}
.eporta-sort-dd-menu a:hover { background: #f3f1ec; }
.eporta-sort-dd-menu a.active { background: #1b1a17; color: #fff; }

/* Переключатель плитка/список — та же визуальная оболочка, что был у 4/5/6. */
.eporta-view-switch { display: flex; border: 1.5px solid #e7e3db; border-radius: 10px; overflow: hidden; }
.eporta-view-btn {
  width: 40px; height: 40px; border: none; background: transparent; color: #8a857b;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.eporta-view-btn + .eporta-view-btn { border-left: 1.5px solid #e7e3db; }
.eporta-view-btn.active { background: #1b1a17; color: #fff; }

/* Плиточные сетки коллекций (главная "Коллекции фабрики", хаб /collection/) —
   те же брейкпоинты, что у товарной сетки, чтобы плитки не расползались на узких экранах. */
.eporta-tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .eporta-tile-grid { grid-template-columns: repeat(2, 1fr); } }
/* На мобильном (≤640px) карточки квадратные 1:1 растягивали страницу на несколько
   экранов скролла (6-10 плиток в столбец) — оставляем 2 колонки (не схлопываем в 1,
   как раньше) и делаем карточки более приплюснутыми (аспект 3:4 вместо квадрата).
   !important — у карточек свой inline aspect-ratio:1/1 в разметке (index.php/collection). */
@media (max-width: 640px) {
  .eporta-tile-grid--square { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .eporta-tile-grid--square > a { aspect-ratio: 3 / 4 !important; }
}

/* Плитки коллекций (главная "Коллекции фабрики", хаб /collection/) — 4 в ряд на десктопе,
   заявка заказчика 05.09.2026: все коллекции без кнопки "Все коллекции", 3 ряда по 4. */
.eporta-tile-grid--coll { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .eporta-tile-grid--coll { grid-template-columns: repeat(2, 1fr); } }
/* "N моделей" под подписью — подзаголовок и так занимает много места на узком экране,
   заказчик попросил убрать счётчик только на мобильном, оставив его на десктопе/планшете. */
@media (max-width: 640px) { .eporta-coll-count { display: none !important; } }

/* Главная, "Коллекции фабрики": два блока — слева плитки блока 1, справа сетка 2x2 квадратных плиток блока 2
   (UF_HOME_BLOCK). Пока в блоке 2 нет реальных коллекций — 4 моковые плитки .eporta-coll-tile--mock.
   Ниже 861px блоки друг под другом, на мобильном (<=640px) каждый — горизонтальный слайдер 2x2. */
.eporta-coll-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.eporta-coll-split--single { grid-template-columns: 1fr; }
.eporta-coll-tile { position: relative; display: block; border-radius: 16px; overflow: hidden; background: #f2efe9; text-decoration: none; cursor: pointer; }
.eporta-coll-tile-name { position: absolute; left: 20px; right: 20px; bottom: 18px; }
.eporta-coll-pane--1 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-content: start; }
.eporta-coll-split--single .eporta-coll-pane--1 { grid-template-columns: repeat(4, 1fr); }
.eporta-coll-pane--1 .eporta-coll-tile { aspect-ratio: 1 / 1; }
.eporta-coll-pane--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-content: start; }
.eporta-coll-pane--2 > .eporta-coll-tile { aspect-ratio: 1 / 1; }
.eporta-coll-tile--mock { cursor: default; border: 1.5px dashed #d9d2c4; }
.eporta-coll-tile--mock1 { background: linear-gradient(135deg, #f1e9db, #e4d8c3); }
.eporta-coll-tile--mock2 { background: linear-gradient(135deg, #ece6dc, #ddd3c4); }
.eporta-coll-tile--mock3 { background: linear-gradient(135deg, #f3ece0, #e6dac6); }
.eporta-coll-tile--mock4 { background: linear-gradient(135deg, #eee7da, #dfd4c0); }
.eporta-coll-tile--mock5 { background: linear-gradient(135deg, #f0e8dc, #e2d6c1); }
.eporta-coll-tile--mock6 { background: linear-gradient(135deg, #ede5d8, #ded2bd); }
@media (max-width: 860px) {
  .eporta-coll-split { grid-template-columns: 1fr; gap: 18px; }
  .eporta-coll-pane--1, .eporta-coll-split--single .eporta-coll-pane--1 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .eporta-coll-pane--1, .eporta-coll-pane--2, .eporta-coll-split--single .eporta-coll-pane--1 {
    display: grid; grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-rows: auto;
    grid-auto-flow: column; grid-auto-columns: calc((100% - 10px) / 2); gap: 10px; min-height: 0; align-content: start;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .eporta-coll-pane--1::-webkit-scrollbar, .eporta-coll-pane--2::-webkit-scrollbar { display: none; }
  .eporta-coll-pane--1 > .eporta-coll-tile, .eporta-coll-pane--2 > .eporta-coll-tile { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 1 / 1; }
  /* Страница слайдера = 4 плитки (2 колонки x 2 ряда): привязка к началу каждой второй колонки. */
  .eporta-coll-pane--1 > :nth-child(4n+1), .eporta-coll-pane--1 > :nth-child(4n+2),
  .eporta-coll-pane--2 > :nth-child(4n+1), .eporta-coll-pane--2 > :nth-child(4n+2) { scroll-snap-align: start; }
  .eporta-coll-tile-name { left: 12px; right: 12px; bottom: 12px; }
  .eporta-coll-tile-name > div:first-child { font-size: 16px !important; }
}

/* Полноэкранный просмотр фото товара (карточка товара, только десктоп >860px): подложка --lb-bg
   меняется выбором цвета, цвет элементов управления --lb-fg подстраивается под яркость фона. */
@media (min-width: 861px) { .product-detail-main-photo[data-zoom] { cursor: zoom-in; } }
.eporta-lightbox { --lb-bg: #f2f0ec; --lb-fg: #2b2620; position: fixed; inset: 0; z-index: 10000; background: var(--lb-bg); color: var(--lb-fg); display: flex; flex-direction: column; }
.eporta-lightbox[hidden] { display: none; }
.eporta-lb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 28px 96px 8px; box-sizing: border-box; }
.eporta-lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.eporta-lb-btn { position: absolute; border: 0; border-radius: 50%; width: 46px; height: 46px; background: rgba(127, 127, 127, .2); color: var(--lb-fg); font: 400 22px/1 'Manrope', sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.eporta-lb-btn:hover { background: rgba(127, 127, 127, .35); }
.eporta-lb-btn[hidden] { display: none; }
.eporta-lb-close { top: 18px; right: 22px; }
.eporta-lb-nav { top: 50%; margin-top: -23px; font-size: 30px; }
.eporta-lb-prev { left: 22px; }
.eporta-lb-next { right: 22px; }
.eporta-lb-bar { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 20px 22px; font: 600 13px 'Manrope', sans-serif; }
.eporta-lb-count { min-width: 44px; opacity: .7; }
.eporta-lb-label { opacity: .7; }
.eporta-lb-swatches { display: inline-flex; gap: 8px; }
.eporta-lb-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(127, 127, 127, .45); padding: 0; cursor: pointer; }
.eporta-lb-swatch.active { box-shadow: 0 0 0 2px var(--lb-bg), 0 0 0 4px var(--lb-fg); }
.eporta-lb-custom { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.eporta-lb-custom input { width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }

/* Полоска подколлекций на странице коллекции (родитель + подколлекции): только текст, по центру,
   текущая страница залита с рамкой, остальные — ссылки на соответствующие страницы. */
.eporta-subcoll-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 20px var(--pad-x) 4px; }
.eporta-subcoll-btn { display: inline-flex; align-items: center; padding: 10px 22px; border: 1.6px solid #e7e3db; border-radius: 999px; background: #fff; color: #2b2620; font: 700 14px 'Manrope'; text-decoration: none; transition: border-color .15s, background .15s; }
a.eporta-subcoll-btn:hover { border-color: #e8820a; }
.eporta-subcoll-btn--active { background: #e8820a; border-color: #c96f06; color: #fff; cursor: default; }
/* Типы фурнитуры (этап 3): полоска кнопок со счётчиками + «Скрыть/Показать»; на мобильном — одна прокручиваемая строка */
.eporta-hwkind { display: flex; align-items: center; gap: 14px; padding: 20px var(--pad-x) 4px; }
.eporta-hwkind-nav { display: flex; flex-wrap: wrap; flex: 1; gap: 10px; padding: 0; }
.eporta-hwkind-btn { gap: 8px; padding: 8px 16px; }
.eporta-hwkind-btn.eporta-subcoll-btn--active { cursor: pointer; }
.eporta-hwkind-cnt { font: 600 12px 'Manrope'; color: #8a857b; }
.eporta-hwkind-btn.eporta-subcoll-btn--active .eporta-hwkind-cnt { color: rgba(255, 255, 255, .85); }
.eporta-hwkind-toggle { flex: none; border: 0; background: none; padding: 6px 2px; font: 600 13px 'Manrope'; color: #8a857b; cursor: pointer; text-decoration: underline; }
.eporta-hwkind-toggle:hover { color: #e8820a; }
.eporta-hwkind--hidden .eporta-hwkind-nav { display: none; }
.eporta-hwkind--hidden { justify-content: flex-end; }
@media (max-width: 720px) {
  .eporta-hwkind { flex-direction: column; align-items: stretch; gap: 6px; }
  .eporta-hwkind-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .eporta-hwkind-btn { flex: none; white-space: nowrap; }
  .eporta-hwkind-toggle { align-self: flex-end; }
}

/* Мозаика категорий на главной — на десктопе 4 колонки с явной раскладкой плиток
   (grid-column/grid-row в инлайн-стилях), на узких экранах раскладка ломается,
   поэтому ниже 860px сбрасываем сетку в простой 2-колоночный поток и убираем
   инлайн-позиционирование через !important (иначе оно перебивает media query). */
@media (max-width: 860px) {
  .eporta-mosaic-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 168px !important;
  }
  .eporta-mosaic-grid > a {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}
@media (max-width: 560px) {
  .eporta-mosaic-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ========== Кнопки ========== */
.btn-primary {
  background: var(--accent);
  color: #fff;
  font: 800 17px var(--font);
  text-align: center;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(232,130,10,.32);
  border: none;
  cursor: pointer;
  display: block;
  width: 100%;
  transition: background .15s;
}
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary {
  background: var(--bg);
  color: var(--dark);
  font: 700 14px var(--font);
  text-align: center;
  padding: 13px;
  border-radius: 12px;
  border: 1.6px solid var(--dark);
  cursor: pointer;
  display: block;
  width: 100%;
}
.btn-outline-orange {
  font: 700 12.5px var(--font);
  color: var(--accent);
  border: 1.5px solid var(--accent);
  padding: 7px 14px;
  border-radius: 9px;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.btn-outline-orange:hover { background: #fff8f0; }

/* ========== Подвал ========== */
.site-footer {
  background: var(--dark);
  color: #cfcabf;
  padding: 24px var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.site-footer .f-logo { font: 800 17px var(--font); color: #fff; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; }
.site-footer nav a { color: inherit; transition: color .15s; }
.site-footer nav a:hover { color: #fff; }
.site-footer .f-phone { font: 800 15px var(--font); color: #fff; }

/* ========== Раздел с заголовком ========== */
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}
.section-heading h2 { font: 800 27px var(--font); letter-spacing: -0.01em; }
.section-heading a { font: 600 14px var(--font); color: var(--accent); }

/* Баннер-табы "Хиты / Распродажа / Новинки" на главной (Этап 3, 10.09.2026, между блоками
   "Каталог по категориям" и "Коллекции фабрики") — слева вертикальный список переключателей,
   справа один ряд карточек товара с горизонтальной прокруткой (стрелки + свайп/трекпад),
   максимум 10 карточек на таб (см. eportaHomeTabsGetConfig). Карточки — тот же компонент
   bitrix:catalog.section/.default, что и в каталоге: его штатную обёртку .eporta-product-grid
   (CSS grid с фиксированным числом колонок) отключаем через display:contents, чтобы
   .product-card стали прямыми flex-элементами прокручиваемой строки — без правки template.php. */
.home-tabs-banner { display: flex; gap: 32px; padding: 26px var(--pad-x); align-items: stretch; }
.home-tabs-banner__nav { flex: 0 0 188px; display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.home-tabs-banner__tab {
  font: 800 20px var(--font);
  letter-spacing: -0.01em;
  color: var(--text-hint);
  cursor: pointer;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-soft);
  transition: color .15s;
}
.home-tabs-banner__tab:last-child { border-bottom: none; }
.home-tabs-banner__tab:hover { color: var(--text-mid); }
.home-tabs-banner__tab.active { color: var(--dark); }
.home-tabs-banner__body { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.home-tabs-banner__scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  width: 100%;
  padding: 4px 2px 10px;
  scrollbar-width: none;
}
.home-tabs-banner__scroll::-webkit-scrollbar { display: none; }
.home-tabs-banner__scroll .eporta-product-grid { display: contents; }
.home-tabs-banner__scroll .product-card { flex: 0 0 200px; width: 200px; scroll-snap-align: start; }
/* .card-hover-actions (задача 10.09.2026, "В корзину" по наведению) больше не обрезается
   overflow:hidden карточки (см. .card-clip выше) — здесь это аукнулось багом: overflow-x:auto
   у флекс-браузеров автоматически домысливает overflow-y в auto же (спека CSS2.1 §11.1.1), и
   невидимый (opacity:0), но не вырезанный из потока блок под карточкой раздувал scrollHeight
   полосы — внутри баннера появлялся лишний вертикальный скролл. В карусели наведение мышью и
   так не главный сценарий (тач/свайп) — проще скрыть, как и в режиме "Список" ниже. */
.home-tabs-banner__scroll .card-hover-actions { display: none; }
.home-tabs-banner__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--dark);
  font: 700 18px var(--font);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(27,26,23,.08);
  z-index: 2;
  transition: opacity .15s;
}
.home-tabs-banner__arrow--left { left: -8px; }
.home-tabs-banner__arrow--right { right: -8px; }
.home-tabs-banner__arrow[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 900px) {
  .home-tabs-banner { flex-direction: column; gap: 14px; padding-top: 22px; }
  .home-tabs-banner__nav { flex-direction: row; flex: none; gap: 22px; overflow-x: auto; justify-content: flex-start; }
  .home-tabs-banner__tab { padding: 4px 0; border-bottom: none; white-space: nowrap; }
  .home-tabs-banner__arrow--left { left: 0; }
  .home-tabs-banner__arrow--right { right: 0; }
}

/* ========== Сетка товаров ========== */
.products-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }

/* ========== Плашка преимуществ ========== */
.benefit-strip {
  display: flex;
  align-items: stretch;
  background: var(--bg-warm);
  border: 1px solid #ece7de;
  border-radius: 14px;
  margin-top: 12px;
  overflow: hidden;
}
.benefit-strip .item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 18px 20px;
  cursor: pointer;
}
.benefit-strip .item:not(:last-child) { border-right: 1px solid #ece7de; }
.benefit-strip .item div { font: 700 13.5px/1.25 var(--font); color: #2b2822; }
.benefit-strip .item div span { display: block; color: var(--text-muted); font-weight: 600; }

/* ========== Социальное доказательство ========== */
.social-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 18px var(--pad-x);
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
.social-proof .stars { font: 700 18px var(--font); color: var(--accent); }
.social-proof .text { font: 500 14px var(--font); color: #5f5a51; }

/* ========== Три блока внизу главной: работы / отзывы / салоны (24-25.09.2026) ==========
   Редизайн под общий язык сайта: карточки "фото + подпись снизу" (MVP-версия) заменены на
   overlay-текст на фото — тот же приём, что уже используют .hbc-* (карусель баннеров) и плитки
   коллекций (.eporta-tile-grid--coll в index.php), а не изобретённый заново card-паттерн. */

/* ---- Наши работы: featured-карточка (первая работа, крупнее) + лента остальных ----
   Вариант "A" из предложенных 25.09.2026 (согласовано с пользователем): вместо ряда
   одинаковых плиток первая работа — акцент (в 2 раза шире, крупнее подпись), остальные —
   обычная лента. Даёт иерархию "вот наша свежая/витринная работа" вместо однородного ряда. */
.home-works-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 4px 2px 14px;
  scrollbar-width: none;
}
.home-works-scroll::-webkit-scrollbar { display: none; }
.home-work-card {
  position: relative;
  flex: 0 0 240px;
  width: 240px;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-warm);
  scroll-snap-align: start;
  display: block;
}
.home-work-card--featured { flex: 0 0 480px; width: 480px; aspect-ratio: 16 / 10; }
.home-work-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.home-work-card:hover img { transform: scale(1.045); }
.home-work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,17,12,0) 45%, rgba(20,17,12,.82) 100%);
}
.home-work-card__caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 1;
}
.home-work-card__title { font: 800 15.5px var(--font); color: #fff; letter-spacing: -0.005em; }
.home-work-card--featured .home-work-card__title { font-size: 22px; }
.home-work-card__meta { margin-top: 3px; font: 600 12px var(--font); color: rgba(255,255,255,.8); }
.home-work-card--featured .home-work-card__meta { font-size: 13px; }
@media (max-width: 640px) {
  .home-work-card { flex-basis: 190px; width: 190px; }
  .home-work-card--featured { flex-basis: 280px; width: 280px; aspect-ratio: 4 / 3; }
}

/* ---- Отзывы: бегущая строка (marquee) ----
   Вариант "B": вместо ручной горизонтальной прокрутки — непрерывная лента, останавливается
   под курсором. Контент дублируется 2x для бесшовной прокрутки (translateX(-50%) ровно
   возвращает на первый набор) — вторая копия скрыта от скринридеров (aria-hidden в разметке)
   и от reduced-motion (там лента становится обычным прокручиваемым рядом без анимации). */
.home-reviews-marquee {
  overflow: hidden;
  padding: 4px 0 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.home-reviews-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: eportaReviewsMarquee var(--marquee-duration, 32s) linear infinite;
}
/* display:contents — набор не создаёт свой flex-контекст, карточки становятся прямыми
   flex-элементами трека с единым gap. Без этого второй вложенный flex добавил бы ещё один
   gap на стыке наборов, и translateX(-50%) не попадал бы ровно на начало первой карточки
   (заметный микро-скачок раз в цикл анимации). */
.home-review-set { display: contents; }
.home-reviews-marquee:hover .home-reviews-track { animation-play-state: paused; }
@keyframes eportaReviewsMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.home-review-card {
  flex: 0 0 300px;
  width: 300px;
  background: var(--bg-section);
  border-radius: 16px;
  padding: 24px 22px 20px;
}
.home-review-card__quote-mark {
  font: 800 38px/1 var(--font);
  color: var(--accent);
  opacity: .5;
  display: block;
  margin-bottom: 2px;
}
.home-review-card__rating { color: var(--accent); font: 700 13px var(--font); letter-spacing: .04em; }
.home-review-card__rating .dim { color: var(--border-soft); }
.home-review-card__text {
  margin-top: 10px;
  font: 500 14px/1.55 var(--font);
  color: #3a3631;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 68px;
}
.home-review-card__author { margin-top: 16px; font: 800 13.5px var(--font); color: var(--dark); }
.home-review-card__city { margin-top: 1px; font: 600 12px var(--font); color: var(--text-muted); }
.home-reviews-agg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 13.5px var(--font);
  color: var(--text-mid);
}
.home-reviews-agg .star { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .home-reviews-track { animation: none; width: auto; overflow-x: auto; scrollbar-width: none; }
  .home-reviews-track::-webkit-scrollbar { display: none; }
  .home-reviews-track .home-review-set--dup { display: none; }
}

/* ---- Карта салонов: карта на всю ширину блока, список плавает поверх ----
   Вариант "A": карта — главный визуальный элемент секции (как в приложениях Я.Карт/2ГИС на
   мобильном), список салонов — плавающая карточка сверху слева со своей прокруткой и тенью.
   На узких экранах (<780px) оверлей превращается в обычный блок под картой (mobile collapse
   объявлен здесь же, не полагаемся молча на "Tailwind разрулит" — тут и не Tailwind). */
.home-stores-hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 480px;
}
.home-stores-map {
  position: absolute;
  inset: 0;
  background: var(--bg-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font: 600 13px var(--font);
  text-align: center;
  padding: 20px;
}
.home-stores-overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 320px;
  max-width: calc(100% - 40px);
  max-height: calc(100% - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(27,26,23,.16);
  z-index: 2;
}
.home-store-row {
  padding: 16px 16px 16px 14px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  transition: background-color .15s, border-color .15s;
}
.home-stores-overlay .home-store-row:last-child { border-bottom: none; }
.home-store-row--clickable { cursor: pointer; }
.home-store-row--clickable:hover { background: var(--bg-section); }
.home-store-row.is-active { background: var(--bg-section); border-left-color: var(--accent); }
.home-store-row__title { font: 800 14.5px var(--font); color: var(--dark); }
.home-store-row__address { margin-top: 4px; font: 500 13px var(--font); color: #3a3631; }
.home-store-row__phone { margin-top: 4px; font: 700 13px var(--font); color: var(--accent); }
.home-store-row__schedule { margin-top: 2px; font: 500 12px var(--font); color: var(--text-muted); }
@media (max-width: 780px) {
  .home-stores-hero { min-height: 0; display: flex; flex-direction: column; }
  .home-stores-map { position: static; height: 260px; border-radius: 16px; }
  .home-stores-overlay {
    position: static;
    width: 100%;
    max-width: none;
    max-height: 340px;
    box-shadow: none;
    border-radius: 0;
    margin-top: 14px;
    background: transparent;
  }
}

/* ========== Конструктор комплекта ========== */
.kit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,17,12,.78);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.kit-overlay.open { opacity: 1; pointer-events: all; }
.kit-modal {
  background: #fff;
  border-radius: 20px;
  width: 940px;
  max-width: 95vw;
  height: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
  transform: translateY(12px);
  transition: transform .2s;
}
.kit-overlay.open .kit-modal { transform: none; }

/* ========== Подтверждение удаления позиции корзины (assets/cart-kit.js) ========== */
.ek-confirm-overlay {
  position: fixed; inset: 0; background: rgba(20,17,12,.6); z-index: 210;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.ek-confirm-overlay.open { opacity: 1; pointer-events: all; }
.ek-confirm-modal {
  background: #fff; border-radius: 16px; width: 360px; max-width: 90vw;
  padding: 24px 22px 20px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  transform: translateY(10px); transition: transform .15s;
}
.ek-confirm-overlay.open .ek-confirm-modal { transform: none; }
.ek-confirm-text { font: 700 15.5px var(--font); color: var(--dark); margin-bottom: 20px; }
.ek-confirm-actions { display: flex; gap: 10px; }
.ek-confirm-cancel, .ek-confirm-delete {
  flex: 1; padding: 12px; border-radius: 10px; font: 700 13.5px var(--font); cursor: pointer;
  border: none; transition: background .15s, color .15s;
}
.ek-confirm-cancel { background: var(--bg-warm); color: var(--dark); }
.ek-confirm-cancel:hover { background: var(--border-soft); }
.ek-confirm-delete { background: #fdeceb; color: #c0392b; }
.ek-confirm-delete:hover { background: #c0392b; color: #fff; }

.kit-mhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border);
  flex: none;
}
.kit-mhead h2 { margin: 0; font: 800 18px var(--font); letter-spacing: -0.01em; }
.kit-mhead .sub { font: 500 12.5px var(--font); color: var(--text-muted); margin-top: 3px; }
.kit-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eceae4;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.kit-body { display: flex; flex: 1; min-height: 0; }
.kit-tabs {
  width: 238px;
  flex: none;
  background: #f0ede6;
  border-right: 1px solid #eceae4;
  overflow-y: auto;
  padding: 10px;
}
.kit-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .13s, box-shadow .13s;
  margin-bottom: 4px;
}
.kit-tab:hover { background: #e8e4dc; }
.kit-tab.active { background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.05); }
.kit-tab .tname { font: 700 13.5px var(--font); flex: 1; }
.kit-tab .thint { font: 500 11px var(--font); color: var(--text-hint); margin-top: 1px; }
.kit-tab .tbadge {
  background: var(--accent);
  color: #fff;
  font: 700 11px var(--font);
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  flex: none;
}
.kit-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.kit-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  flex: none;
}
.kit-search input {
  flex: 1;
  border: 1.5px solid var(--border-soft);
  border-radius: 9px;
  padding: 8px 13px;
  font: 500 13.5px var(--font);
  outline: none;
  color: var(--dark);
}
.kit-search input:focus { border-color: var(--accent); }
.kit-search .scnt { font: 600 12px var(--font); color: var(--text-hint); white-space: nowrap; }
.kit-items { flex: 1; overflow-y: auto; padding: 10px 18px 14px; display: flex; flex-direction: column; gap: 7px; }
.kit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1.5px solid #eceae4;
  cursor: pointer;
  transition: border-color .13s, background .13s;
}
.kit-row:hover { border-color: #d8d2c4; }
.kit-row.selected { border-color: var(--accent); background: #fff8f0; }
.kit-row .rmark {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #cfc9bd;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 10px;
  color: transparent;
}
.kit-row.selected .rmark { background: var(--accent); border-color: var(--accent); color: #fff; }
.kit-row .rname { font: 700 13.5px var(--font); flex: 1; }
.kit-row .rsub { font: 500 11.5px var(--font); color: var(--text-hint); margin-top: 1px; }
.kit-row .rprice { font: 800 13.5px var(--font); white-space: nowrap; }
.kit-stepper { display: flex; align-items: center; border: 1.5px solid var(--accent); border-radius: 9px; overflow: hidden; flex: none; }
.kit-stepper button { width: 30px; height: 32px; border: none; background: none; font: 700 16px var(--font); cursor: pointer; color: var(--accent-dark); }
.kit-stepper span { width: 26px; text-align: center; font: 700 13px var(--font); }
.kit-empty { text-align: center; padding: 40px 20px; color: var(--text-hint); font: 500 13.5px var(--font); }
.kit-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  flex: none;
  background: #fff;
}
.kit-foot .total-info { font: 500 13px var(--font); color: var(--text-muted); }
.kit-foot .total-price { font: 800 24px var(--font); letter-spacing: -0.01em; }
.kit-foot .kit-cta {
  background: var(--accent);
  color: #fff;
  font: 800 16px var(--font);
  border: none;
  padding: 14px 24px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(232,130,10,.3);
  white-space: nowrap;
  transition: background .15s;
}
.kit-foot .kit-cta:hover { background: var(--accent-dark); }

/* Кнопка-триггер конструктора */
.kit-trigger {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-radius: 14px;
  border: 1.8px solid var(--accent);
  background: #fff8f0;
  cursor: pointer;
  transition: box-shadow .15s;
  width: 100%;
}
.kit-trigger:hover { box-shadow: 0 8px 22px rgba(232,130,10,.16); }
.kit-trigger .kt-icon {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 11px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: 800 22px var(--font);
}
.kit-trigger .kt-label { font: 800 15px var(--font); color: var(--accent-dark); }
.kit-trigger .kt-sub { font: 500 12.5px var(--font); color: var(--text-muted); margin-top: 2px; }
.kit-trigger .kt-arrow { font: 700 20px var(--font); color: var(--accent-dark); margin-left: auto; }

/* ========== Свотчи ========== */
.swatch-wrap { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 52px;
  height: 52px;
  border-radius: 11px;
  cursor: pointer;
  border: 2px solid var(--border-soft);
  overflow: hidden;
  transition: border-color .13s;
}
.swatch.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent);
}
.swatch img, .swatch div { width: 100%; height: 100%; object-fit: cover; }
.swatch-label { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.swatch-label .sl-name { font: 700 13px var(--font); }
.swatch-label .sl-val { font: 700 13px var(--font); color: var(--accent-dark); }

/* Фото-свотчи цвета/остекления — вариант "1a" из Claude Design ("Варианты - Цвет и
   остекление.dc.html"): 64x64 (увеличены 11.10.2026, чтобы цвета было легко различать) превью реального фото товара-варианта (PREVIEW_PICTURE),
   активный — оранжевая рамка. Отличие от прототипа: >5 вариантов не обрезаются пунктиром
   переноса, а едут в горизонтальную карусель со стрелками (см. .eporta-variant-row). */
.eporta-variant-row { display: flex; align-items: center; gap: 6px; }
.eporta-variant-scroll {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.eporta-variant-scroll::-webkit-scrollbar { display: none; }
.eporta-variant-item {
  flex: none;
  width: 64px;
  height: 64px;
  box-sizing: border-box;
  border-radius: 11px;
  padding: 2px;
  border: 2px solid transparent;
  display: block;
  transition: border-color .13s;
}
.eporta-variant-item:hover { border-color: #e7e3db; }
.eporta-variant-item.active { border-color: var(--accent); }
.eporta-variant-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  background: #f6f4ef;
}
.eporta-variant-item .eporta-variant-noimg {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: #f6f4ef;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 13px var(--font);
  color: #a39e95;
}
.eporta-variant-nav {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font: 700 14px var(--font);
  color: #3a3631;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.eporta-variant-nav:hover { border-color: var(--accent); color: var(--accent-dark); }

/* Кнопки размера (SIZES): тот же товар, меняется только надбавка к цене — не ссылка, а JS-переключатель. */
.eporta-size-wrap { display: flex; gap: 8px; flex-wrap: wrap; }
.eporta-size-btn {
  padding: 8px 13px;
  border-radius: 10px;
  border: 1.6px solid var(--border-soft);
  font: 600 12.5px var(--font);
  color: #3a3631;
  background: #fff;
  cursor: pointer;
  transition: border-color .13s, background .13s;
}
.eporta-size-btn:hover { border-color: var(--accent); }
.eporta-size-btn.active {
  border-color: var(--accent);
  background: #fff8f0;
  color: var(--accent-dark);
  font-weight: 700;
}

/* Врезка под петли (Invi): значения не визуальные (марка+кол-во петель), поэтому
   выпадающий список вместо свотчей, как у цвета/остекления/кромки. */
.eporta-insert-select {
  width: 100%;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1.6px solid var(--border-soft);
  font: 600 13px var(--font);
  color: #3a3631;
  background: #fff;
  cursor: pointer;
}
.eporta-insert-select:hover { border-color: var(--accent); }

/* ---- Карточка товара на мобильном ----
   .product-detail-layout (галерея+панель покупки) и .product-detail-description
   (описание+характеристики) — на десктопе flex-строка без единого media-запроса,
   на узком экране (~390px) это сжимало фото в узкую полоску и ломало перенос цены.
   Схлопываем оба блока в одну колонку; !important — перебивает инлайн-стили (флекс/
   высота/ширина заданы в разметке template.php компонента catalog.element). */
@media (max-width: 768px) {
  .product-detail-layout,
  .product-detail-description {
    flex-direction: column !important;
    gap: 20px !important;
  }
  /* Раньше вся галерея жёстко сжималась до 360px (высота полосы главного фото — минус
     превьюшки и паддинги — получалась ~220px). Фото дверей почти всегда портретные
     (реальный пример с прода — 561×1200), при object-fit:contain высота становится
     лимитирующим измерением: ширина картинки сжималась до ~100px и терялась на фоне
     широкого светлого блока — выглядело так, будто фото вообще пропало (найдено 11.09.2026).
     Отдаём высоту самому фото через aspect-ratio (по ширине экрана), а не фиксируем её
     сверху — портретное фото получает пропорциональный размер вместо обрезки по высоте. */
  .product-detail-gallery { height: auto !important; }
  .product-detail-main-photo { flex: none !important; min-height: 0 !important; width: 100%; aspect-ratio: 3 / 4; }
  .product-detail-panel { align-self: stretch !important; }
  /* Цена (#priceBig, шрифт 40px inline) вместе со старой ценой/бейджем скидки не
     помещалась в узкую панель и переносилась посреди числа ("9 818" / "₽" на разных
     строках) — уменьшаем шрифт и разрешаем строке переноситься целиком по элементам,
     а не рвать сам текст цены. */
  .product-detail-price-row { flex-wrap: wrap !important; row-gap: 6px; }
  .product-detail-price-row #priceBig { font-size: 30px !important; }
}

/* ========== Тост-уведомление ========== */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: var(--dark);
  color: #fff;
  font: 600 15px var(--font);
  padding: 17px 22px 17px 26px;
  border-radius: 14px;
  z-index: 300;
  opacity: 0;
  transition: all .28s;
  white-space: nowrap;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 18px 40px rgba(27,26,23,.28);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast-btn {
  font: 700 14.5px var(--font);
  color: var(--accent);
  background: none;
  border: 1.5px solid rgba(232,130,10,.5);
  border-radius: 9px;
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

/* ========== Мегаменю ========== */
.mm-link { text-decoration: none; transition: color .12s; }
.mm-link:hover { color: var(--accent-dark) !important; }

/* ========== Корзина (bx-basket, bitrix:sale.basket.basket, шаблон "eporta") ==========
   Override вендорского .default (local/templates/eporta/components/bitrix/sale.basket.basket/eporta) —
   template.php/js-templates свои, но JS-контроллер BX.Sale.BasketComponent, темы и картинки
   подключаются напрямую из вендорской .default-директории (см. комментарий в template.php),
   поэтому здесь по-прежнему только перекрашиваем/переструктурируем классы компонента под
   эталон "EPORTA Прототип" (#cart), не трогая функциональные data-entity-хуки.
   Все селекторы намеренно с префиксом #basket-root: у вендорского style.css
   (2228 строк) и themes/blue/style.css часть правил тег-квалифицированы или
   составные (h2.basket-item-info-name, div.bx-blue .btn.btn-default) —
   специфичнее наших плоских классов, поэтому побеждают независимо от того, что
   наш файл подключается последним. #basket-root (ID) гарантированно перебивает
   любые их классы/теги; !important у вендора в этом скоупе не встречается. */
#basket-root, #basket-root * { font-family: var(--font); box-sizing: border-box; }
#basket-root { max-width: none; }

/* 2-колоночный layout эталона: без форка HTML template.php — родная структура
   #basket-root > .row.col-xs-12 > (.basket-items-list-wrapper | [data-entity=basket-total-block])
   превращается в две flex-колонки через :has(); скрытый .row с basket-warning (display:none
   по умолчанию) в раскладке не участвует. */
#basket-root { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
#basket-root > .row { margin: 0; }
/* flex-basis намеренно 0 (не px): жёсткий px-минимум (560+340+22 gap) оказался чуть шире реального
   контейнера страницы (~913px) и колонки переносились на отдельные строки на всю ширину — при этом
   sticky-карточка "Итого" визуально наезжала на карточки товаров. С basis:0 колонки всегда делят
   ширину пропорционально 1.62:1, без переноса. */
#basket-root > .row:has(.basket-items-list-wrapper) { flex: 1.62 1 0; min-width: 0; }
#basket-root > .row:has([data-entity="basket-total-block"]) { flex: 1 1 0; min-width: 280px; position: sticky; top: 20px; }
#basket-root > .row:not(:has(.basket-items-list-wrapper)):not(:has([data-entity="basket-total-block"])) { flex: 0 0 100%; }

/* В эталоне нет строки поиска/фильтра по позициям корзины */
#basket-root .basket-items-list-header { display: none; }

#basket-root .basket-items-list-wrapper { border: none; box-shadow: none; }
/* table-layout:fixed обязателен: с дефолтным auto длинное название двери в .basket-item-info-name
   (одна ячейка на всю строку, см. basket-item.php) заставляет таблицу вырасти по контенту шире
   родительской колонки (width:100% не ограничивает auto-таблицу сверху) — карточка визуально
   "наезжала" на соседнюю колонку "Итого". С fixed таблица держит 100% и переносит длинный текст. */
#basket-root .basket-items-list-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
#basket-root .basket-item-info-name,
#basket-root .basket-kit-header .bkh-name { overflow-wrap: break-word; word-break: break-word; }
#basket-root .basket-items-list-item-container {
  border: 1px solid var(--border);
  border-radius: 16px;
  display: block;
  margin-bottom: 14px;
  overflow: hidden;
  transition: box-shadow .2s;
}
#basket-root .basket-items-list-item-container:hover { box-shadow: 0 14px 32px rgba(27,26,23,.07); }
#basket-root .basket-items-list-item-container td { display: block; padding: 0; border: none; }
/* Фурнитура из окна «Собрать комплект»: строка сразу под дверью, со сдвигом и акцентной полосой слева
   (группировка — cart-kit.js groupKitRows). Дверь с комплектом и её фурнитура читаются как один блок. */
#basket-root .basket-items-list-item-container.bk-kit-parent { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
#basket-root .basket-items-list-item-container.bk-kit-child {
  margin: -1px 0 0 22px; border-radius: 0; border-left: 3px solid #e8820a; background: #fffdfa;
}
#basket-root .basket-items-list-item-container.bk-kit-child:not(:has(+ .bk-kit-child)) {
  border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; margin-bottom: 14px;
}
#basket-root .bk-kit-child .basket-kit-header { padding: 9px 16px; }
#basket-root .bk-kit-child .basket-item-block-image { width: 52px; height: 52px; }
#basket-root .bk-kit-child .basket-items-list-item-descriptions-inner { padding: 10px 16px 12px; }
#basket-root .basket-items-list-item-descriptions { padding: 0 !important; }
#basket-root .basket-items-list-item-descriptions-inner { display: flex; gap: 15px; align-items: flex-start; padding: 16px 18px; }
/* Без min-width:0 средний (текстовый) ребёнок этой flex-строки не может сжаться уже своего
   содержимого — на узком экране он раздвигал строку и .basket-item-price-inline (см. ниже,
   flex:none, margin-left:auto) наезжал поверх текста названия вместо переноса под него. */
#basket-root .basket-items-list-item-descriptions-inner > * { min-width: 0; }

/* Шапка карточки-«комплекта» (название/бейдж/сумма) — эталон #cart, группа cartGroups[].name */
#basket-root .basket-kit-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; gap: 10px;
  background: linear-gradient(180deg,#faf8f4,#f6f4ef);
  border-bottom: 1px solid var(--border);
}
#basket-root .bkh-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
#basket-root .bkh-name { font: 800 14.5px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#basket-root .bkh-badge {
  font: 700 11px var(--font); color: var(--accent-dark); background: #fbecd9;
  padding: 4px 10px; border-radius: 20px; white-space: nowrap; flex: none;
}
#basket-root .bkh-badge.bkh-badge-kit { color: #c2670a; background: #fbecd9; }
#basket-root .bkh-total { font: 800 15px var(--font); flex: none; }

#basket-root .basket-item-block-image {
  width: 78px; height: 104px; flex: none;
  border-radius: 12px; border: 1px solid var(--border);
  padding: 4px; background: #fff; position: relative;
}
#basket-root .basket-item-image { width: 100%; height: 100%; object-fit: contain; background: var(--bg-warm); border-radius: 8px; }

#basket-root .basket-item-info-name { font: 700 14.5px var(--font); margin: 0 0 4px; }
#basket-root .basket-item-info-name-link { color: var(--dark); }
#basket-root .basket-item-property { font: 500 12px var(--font); color: var(--text-muted); margin-top: 4px; }
#basket-root .basket-item-property-name { display: inline; }
#basket-root .basket-item-property-value { display: inline; margin-left: 4px; }

#basket-root .basket-items-list-item-amount,
#basket-root .basket-items-list-item-price,
#basket-root .basket-items-list-item-remove {
  padding: 0 18px 14px !important;
}
#basket-root .basket-item-block-amount {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--border-soft); border-radius: 9px; overflow: hidden;
}
/* Кнопки −/+ у вендора — пустые <span>, глиф рисуется через вендорскую тему (themes/blue/style.css);
   под нашими селекторами он не подхватывается (нет фонового спрайта/иконки в этом скоупе), поэтому
   явно рисуем "−"/"+" через ::before — тот же приём, что уже применён для basket-item-actions-remove. */
#basket-root .basket-item-amount-btn-minus, #basket-root .basket-item-amount-btn-plus {
  width: 32px; height: 34px; display: flex; align-items: center; justify-content: center;
  font: 700 16px var(--font); color: var(--text-muted); cursor: pointer; transition: background .15s;
  position: relative;
}
/* Тач-таргет: видимый размер кнопки не трогаем (32×34), кликабельную область расширяем
   до ~44px через ::after (::before уже занят глифом "−"/"+" ниже). */
#basket-root .basket-item-amount-btn-minus::after,
#basket-root .basket-item-amount-btn-plus::after {
  content: "";
  position: absolute;
  inset: -6px -8px;
}
#basket-root .basket-item-amount-btn-minus::before { content: "−"; }
#basket-root .basket-item-amount-btn-plus::before { content: "+"; }
#basket-root .basket-item-amount-btn-minus:hover,
#basket-root .basket-item-amount-btn-plus:hover { background: var(--bg-warm); }
#basket-root .basket-item-amount-btn-plus { color: var(--accent-dark); }
#basket-root .basket-item-amount-filed-block { width: 34px; }
#basket-root .basket-item-amount-filed {
  width: 100%; border: none; text-align: center; font: 700 13.5px var(--font); background: none;
}

#basket-root .basket-item-price-current-text { font: 800 17px var(--font); color: var(--dark); }
#basket-root .basket-item-price-old-text { font: 500 11.5px var(--font); color: var(--text-hint); text-decoration: line-through; }

/* Цена двери, перенесённая cart-kit.js рядом с фото/названием (см. relocatePrice) — эталон #cart
   показывает её справа от строки фото+название, а не отдельной строкой внизу карточки. */
#basket-root .basket-item-price-inline { flex: none; margin-left: auto; text-align: right; }

/* Степпер количества, перенесённый cart-kit.js под свойства товара (см. relocateAmount) —
   в исходной табличной вёрстке шёл отдельным блоком в самом низу карточки. Доп. правый
   паддинг — иначе текст "N шт = ЦЕНА" (.basket-item-amount-field-description) упирается
   прямо в правую рамку блока (overflow:hidden без внутренних отступов). */
#basket-root .basket-item-amount-inline { margin-top: 12px; }
#basket-root .basket-item-block-amount.basket-item-amount-inline { padding-right: 10px; }
#basket-root .basket-item-amount-inline .basket-item-amount-field-description {
  padding: 0 2px 0 8px;
  white-space: nowrap;
}

/* Кнопка удаления у вендора — пустой <span>, крестик целиком рисуется через
   ::before/::after (2px×14px, повёрнуты ±45deg, красный фон). Раньше здесь
   просто подменялся content на "::before" — текст "Удалить" рендерился внутри
   этой узкой красной полоски вместо нормальной ссылки. Сбрасываем геометрию
   псевдоэлементов и превращаем в обычный текстовый линк. */
#basket-root .basket-item-actions-remove {
  position: static; width: auto; height: auto; display: inline-block;
  cursor: pointer;
}
#basket-root .basket-item-actions-remove::after { content: none; }
#basket-root .basket-item-actions-remove::before {
  content: "Удалить";
  position: static; width: auto; height: auto;
  background: none; transform: none;
  font: 500 12.5px var(--font); color: var(--text-muted);
  transition: color .15s;
}
#basket-root .basket-item-actions-remove:hover::before {
  background: none; color: var(--accent-dark);
}

/* Зона допов позиции (заполняется assets/cart-kit.js) + строки допов + триггер модалки */
#basket-root .basket-item-addons { border-top: 1px dashed var(--border); }
#basket-root .kb-addon-row {
  display: flex; gap: 13px; padding: 11px 18px; align-items: center;
  border-top: 1px dashed var(--border);
}
#basket-root .kb-addon-row:first-child { border-top: none; }
#basket-root .kb-addon-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
#basket-root .kb-addon-name { font: 600 13px var(--font); }
#basket-root .kb-addon-qty { color: var(--text-hint); font-weight: 600; }
#basket-root .kb-addon-sub { font: 500 11.5px var(--font); color: var(--text-hint); margin-top: 2px; }
#basket-root .kb-addon-price { font: 700 14px var(--font); flex: none; }
#basket-root .kb-addon-remove {
  font: 600 12px var(--font); color: var(--text-hint); flex: none; cursor: pointer; transition: color .15s;
}
#basket-root .kb-addon-remove:hover { color: var(--accent-dark); }
#basket-root .kb-kit-trigger {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border-top: 1px dashed var(--border); cursor: pointer; color: var(--accent-dark);
  font: 700 13px var(--font); transition: background .15s;
}
#basket-root .kb-kit-trigger:hover { background: var(--bg-warm); }
#basket-root .kb-kit-trigger-icon {
  width: 26px; height: 26px; border-radius: 8px; background: #fbecd9; color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center; font: 700 16px var(--font); flex: none;
}

/* Апселл "С этими дверями берут" — под списком групп */
#basket-root .cart-upsell { border-top: 1px solid var(--border); padding-top: 24px; margin-top: 6px; }
#basket-root .cart-upsell-title { font: 800 17px var(--font); margin-bottom: 14px; }
#basket-root .cart-upsell-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
#basket-root .cart-upsell-card {
  display: flex; gap: 12px; align-items: center; border: 1px solid var(--border);
  border-radius: 13px; padding: 12px; transition: box-shadow .15s, border-color .15s;
}
#basket-root .cart-upsell-card:hover { box-shadow: 0 10px 24px rgba(27,26,23,.06); border-color: #e2ddd0; }
#basket-root .cart-upsell-icon {
  width: 56px; height: 56px; flex: none; border-radius: 9px; background: var(--bg-warm);
  display: flex; align-items: center; justify-content: center; color: var(--text-hint); font-size: 20px;
}
#basket-root .cart-upsell-name { font: 600 12.5px var(--font); }
#basket-root .cart-upsell-price { font: 800 14px var(--font); margin-top: 4px; }
#basket-root .cart-upsell-add {
  width: 30px; height: 30px; border-radius: 8px; background: #fbecd9; color: var(--accent-dark);
  font: 700 17px var(--font); display: flex; align-items: center; justify-content: center; flex: none; cursor: pointer;
}

/* Итог заказа */
#basket-root .basket-checkout-container {
  border: 1px solid var(--border); border-radius: 18px;
  padding: 22px 22px 24px;
  background: linear-gradient(180deg,#ffffff,#fdfbf7);
  box-shadow: 0 18px 44px rgba(27,26,23,.08);
}
#basket-root .basket-checkout-title {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font: 800 18px var(--font);
}
#basket-root .basket-checkout-title-icon {
  width: 34px; height: 34px; flex: none; border-radius: 10px; background: #fbecd9; color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center; font: 800 16px var(--font);
}
#basket-root .basket-checkout-line {
  display: flex; justify-content: space-between; padding: 7px 0; font: 500 13.5px var(--font); color: #3a3631;
}
#basket-root .basket-checkout-line-value { font-weight: 700; color: var(--dark); }
#basket-root .basket-checkout-line-value-free { color: #1f8a4c; }
#basket-root .basket-coupon-block-field .form-control {
  border: 1.5px dashed var(--border-soft); border-radius: 10px;
  padding: 11px 13px; font: 500 13px var(--font); color: var(--text-hint);
}
#basket-root .basket-checkout-block-total-title { font: 700 15px var(--font); }
#basket-root .basket-checkout-block-total-description { font: 500 12px var(--font); color: var(--text-muted); }
#basket-root .basket-coupon-block-total-price-current { font: 800 26px var(--font); letter-spacing: -0.01em; color: var(--dark); }
#basket-root .basket-coupon-block-total-price-old { font: 500 13px var(--font); color: var(--text-hint); text-decoration: line-through; }
/* Строка "К оплате ... 23 460 ₽" — вендор рендерит подпись и сумму двумя соседними
   блоками (.basket-checkout-block-total / -total-price), эталон показывает их одной
   строкой на противоположных краях — делаем контейнер flex-row вместо форка разметки. */
#basket-root .basket-checkout-section-inner {
  display: flex; align-items: baseline; justify-content: space-between;
  border-top: 1px solid var(--border); margin: 12px 0 0; padding-top: 14px;
}
#basket-root .basket-checkout-block-total-price-inner { display: flex; align-items: baseline; gap: 10px; }
#basket-root .basket-btn-checkout {
  display: block; width: 100%; text-align: center; text-decoration: none;
  background: var(--accent); color: #fff; font: 700 15px var(--font);
  padding: 15px; border-radius: 12px; border: none; cursor: pointer;
  box-shadow: 0 10px 24px rgba(232,130,10,.32); margin-top: 14px;
}
#basket-root .basket-btn-checkout.disabled { opacity: .5; pointer-events: none; }
#basket-root .basket-checkout-guarantees { margin-top: 18px; display: flex; flex-direction: column; gap: 11px; }
#basket-root .basket-checkout-guarantee-row { display: flex; align-items: center; gap: 10px; font: 600 12.5px var(--font); color: #3a3631; }
#basket-root .bcg-check {
  width: 20px; height: 20px; flex: none; border-radius: 50%; background: #eaf6ee; color: #1f8a4c;
  display: flex; align-items: center; justify-content: center; font: 700 11px var(--font);
}

/* ---- Корзина на мобильном ----
   #basket-root (строка 1242 выше) — десктопная двухколоночная flex-раскладка (список товаров
   1.62fr + "Итого" 1fr, min-width:280px у "Итого"). На узком экране 280px+ колонка "Итого" и
   основная колонка товаров конкурировали за ширину и наезжали друг на друга (та самая "каша"
   на мобильном скрине). Ниже брейкпоинта складываем обе колонки в одну и убираем sticky —
   на телефоне "прилипающий" блок итога при коротком списке товаров смысла не имеет, а с
   переносом в одну колонку ещё и не даёт своей высотой перекрыть контент под собой. */
@media (max-width: 720px) {
  #basket-root > .row:has(.basket-items-list-wrapper),
  #basket-root > .row:has([data-entity="basket-total-block"]) {
    flex: 0 0 100%;
    min-width: 0;
    position: static;
  }
  #basket-root .basket-item-block-image { width: 64px; height: 86px; }
  #basket-root .cart-upsell-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  #basket-root .basket-items-list-item-descriptions-inner { flex-wrap: wrap; }
  #basket-root .basket-item-price-inline { flex: 0 0 100%; margin-left: 0; text-align: left; margin-top: 8px; }
  #basket-root .cart-upsell-grid { grid-template-columns: repeat(1, 1fr); }
}

/* Пустая корзина (empty.php) */
#basket-root ~ .basket-empty,
.basket-empty {
  text-align: center; padding: 80px 20px 96px; color: var(--text-hint);
}
.basket-empty-title { font: 700 18px var(--font); color: #5f5a51; }
.basket-empty-desc { font: 500 13.5px var(--font); margin-top: 8px; }
.basket-empty-cta {
  display: inline-block; margin-top: 20px; background: var(--accent); color: #fff;
  font: 700 14px var(--font); padding: 13px 26px; border-radius: 11px; text-decoration: none;
  transition: background .15s;
}
.basket-empty-cta:hover { background: var(--accent-dark); }

/* ========== Защита общей шапки/навигации/подвала от bootstrap.css ==========
   Компонент bitrix:sale.basket.basket (.default) на этой странице сам
   подключает /bitrix/css/main/bootstrap.css, у которого `a:hover, a:focus
   { color: #23527c; text-decoration: underline; }` специфичнее нашего общего
   сброса `a { text-decoration: none; color: inherit; }` — из-за этого на
   странице корзины (единственной, где грузится bootstrap.css) обычные ссылки
   шапки/навигации/подвала подсвечивались и подчёркивались при наведении.
   Явные :hover-правила ниже специфичнее bootstrap-овского `a:hover`, поэтому
   перебивают его без !important. */
.logo-wrap:hover, .logo-wrap:hover * { text-decoration: none; color: inherit; }
.header-phone a:hover { text-decoration: none; }
.header-actions a:hover { text-decoration: none; }
.cat-nav a:hover, .cat-nav .nav-item:hover { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; color: inherit; }
/* Внутри карточек ЛК/авторизации (.lk-card) — отступ как у заголовка карточки. */
.breadcrumb--lk { padding-left: 28px; padding-right: 28px; background: none; }
.site-footer nav a:hover { text-decoration: none; }

/* Та же история, что и с :hover выше, но со второй частью вендорского правила —
   `a:focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }` — рисует
   прямоугольную рамку вокруг ссылок шапки/навигации при клике (клик отдаёт фокус <a>), чего нет
   на других страницах (там bootstrap.css не подключается). */
.logo-wrap:focus, .logo-wrap:focus-visible,
.header-phone a:focus, .header-phone a:focus-visible,
.header-actions a:focus, .header-actions a:focus-visible,
.cat-nav a:focus, .cat-nav a:focus-visible, .cat-nav .nav-item:focus, .cat-nav .nav-item:focus-visible,
.breadcrumb a:focus, .breadcrumb a:focus-visible,
.site-footer nav a:focus, .site-footer nav a:focus-visible {
  outline: none;
}

/* ========== Личный кабинет (Этап 6) ==========
   Общая карточка-контейнер + таб-навигация + инпуты + пустые состояния —
   переиспользуются на всех LK-страницах (профиль/заказы/счёт/подписка/сравнение)
   и на странице авторизации/регистрации (/auth/). */
.lk-card {
  width: 100%; max-width: 1200px; margin: 0 auto; background: var(--bg);
  border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px rgba(27, 26, 23, .12);
}
.lk-title { padding: 16px 28px 4px; }
.lk-title h1 { margin: 0; font: 800 27px var(--font); letter-spacing: -0.01em; }

.lk-tabs {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding: 14px 28px 0; border-bottom: 1px solid var(--border);
}
.lk-tab {
  font: 600 13.5px var(--font); color: var(--text-mid); text-decoration: none;
  padding-bottom: 12px; border-bottom: 2.5px solid transparent; white-space: nowrap;
}
.lk-tab:hover { color: var(--dark); }
.lk-tab.active { font-weight: 700; color: var(--dark); border-bottom-color: var(--accent); }
.lk-tab-logout { color: var(--sale); }
.lk-tab-logout:hover { color: var(--sale); text-decoration: underline; }

.lk-body { display: flex; gap: 60px; padding: 28px 28px 40px; flex-wrap: wrap; }
.lk-col { flex: 1; min-width: 280px; max-width: 420px; }

.epi {
  width: 100%; border: 1.5px solid var(--border-soft); border-radius: 10px;
  padding: 12px 14px; font: 600 13.5px var(--font); color: var(--dark);
  background: #faf8f4; resize: none;
}
.epi::placeholder { color: #c2bdb2; font-weight: 500; }
.epi:focus { outline: none; border-color: var(--accent); }
.lk-field-label {
  font: 700 12.5px var(--font); color: #3a3631; margin: 16px 0 7px;
}
.lk-field-label:first-child { margin-top: 0; }

.lk-btn-primary {
  display: inline-block; font: 700 14px var(--font); color: #fff; background: var(--accent);
  padding: 13px 26px; border-radius: 12px; box-shadow: 0 10px 24px rgba(232, 130, 10, .32);
  text-decoration: none; border: none; cursor: pointer;
}
.lk-btn-primary:hover { background: var(--accent-dark); }
.lk-btn-ghost {
  display: inline-block; font: 700 13.5px var(--font); color: var(--dark);
  border: 1.6px solid var(--dark); padding: 12px 20px; border-radius: 12px; text-decoration: none;
}
.lk-btn-ghost:hover { background: var(--dark); color: #fff; }

.lk-check-row { display: flex; align-items: center; gap: 9px; margin: 16px 0 20px; }
.lk-check-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.lk-check-row span { font: 500 12.5px var(--font); color: #5f5a51; }

.lk-empty {
  padding: 60px 28px 70px; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.lk-empty-icon {
  width: 64px; height: 64px; border-radius: 16px; background: var(--bg-warm);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.lk-empty-icon svg { width: 26px; height: 26px; stroke: var(--text-hint); }
.lk-empty-title { font: 800 18px var(--font); margin-bottom: 6px; }
.lk-empty-desc { font: 500 13.5px var(--font); color: var(--text-muted); max-width: 340px; margin-bottom: 24px; }
.lk-empty-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Общая обёртка страниц ЛК (тот же паддинг, что у /auth/) — Фаза B. */
.lk-page-wrap { padding: 46px var(--pad-x) 80px; }
.lk-subheading { font: 800 15px var(--font); color: var(--accent-dark); margin: 22px 0 12px; }

/* Профиль (dresscode:personal.info/eporta) — модалка результата сохранения вместо
   вендорского #elementError, тот же контракт ajax.php (heading/message/reload). */
.lk-profile-modal {
  position: fixed; inset: 0; background: rgba(27, 26, 23, .45); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* [hidden] в UA-стиле теряет против авторского `display:flex` той же специфичности —
   без явного правила модалка рендерится (и блокирует клики) ещё до первого сабмита. */
.lk-profile-modal[hidden] { display: none; }
.lk-profile-modal-box {
  background: var(--bg); border-radius: 16px; padding: 28px; max-width: 360px; width: 100%;
  text-align: center; box-shadow: 0 24px 60px rgba(27, 26, 23, .25);
}
.lk-profile-modal-heading { font: 800 18px var(--font); margin-bottom: 10px; }
.lk-profile-modal-message { font: 500 13.5px var(--font); color: var(--text-mid); margin: 0 0 22px; }

/* История заказов (sale.personal.order.list/eporta) — карточки, по аналогии с корзиной. */
.lk-orders-list { display: flex; flex-direction: column; gap: 16px; }
.lk-order-card { border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; }
.lk-order-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.lk-order-number { font: 800 15.5px var(--font); }
.lk-order-date { font: 500 12.5px var(--font); color: var(--text-hint); margin-top: 4px; }
.lk-order-status {
  font: 700 12px var(--font); color: var(--accent-dark); background: var(--bg-warm);
  border-radius: 8px; padding: 6px 12px; white-space: nowrap;
}
.lk-order-status.is-paid { color: #2e7d32; background: #eaf5ea; }
.lk-order-sum { font: 800 18px var(--font); margin-top: 14px; }
.lk-order-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.lk-order-actions .lk-btn-ghost { padding: 10px 18px; font-size: 13px; }
.lk-order-cancel {
  font: 700 13px var(--font); color: #a12b2b; text-decoration: none;
  padding: 10px 18px; border: 1.6px solid #a12b2b; border-radius: 12px;
}
.lk-order-cancel:hover { background: #a12b2b; color: #fff; }

/* Сравнение товаров (dresscode:catalog.compare/eporta) — Этап 6, Фаза D. */
.compare-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 28px 0;
}
.compare-count { font: 700 13.5px var(--font); color: var(--text-mid); }
.compare-table-wrap { padding: 20px 28px 40px; overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare-table th, .compare-table td {
  border-bottom: 1px solid var(--border); padding: 14px 16px; text-align: left; vertical-align: top;
}
.compare-table th:first-child, .compare-table td:first-child {
  width: 190px; min-width: 190px; font: 700 12.5px var(--font); color: var(--text-hint);
}
.compare-item-col { min-width: 200px; }
.compare-item-remove {
  border: none; background: none; color: var(--text-hint); font: 700 16px var(--font);
  cursor: pointer; float: right; line-height: 1;
}
.compare-item-remove:hover { color: #a12b2b; }
.compare-item-photo { width: 100%; max-width: 160px; height: 120px; object-fit: contain; background: #f6f4ef; border-radius: 10px; display: block; margin-bottom: 10px; }
.compare-item-noimg { display: flex; align-items: center; justify-content: center; color: #a39e95; font: 700 12px var(--font); margin-left: auto; margin-right: auto; }
.compare-item-name { font: 700 13.5px var(--font); color: inherit; text-decoration: none; display: block; margin-bottom: 8px; }
.compare-item-name:hover { color: var(--accent-dark); }
.compare-item-price { font: 800 17px var(--font); margin-bottom: 10px; }
.compare-item-actions { display: flex; flex-direction: column; gap: 8px; }
.compare-item-actions .lk-btn-primary { font-size: 12.5px; padding: 10px 14px; text-align: center; }
.compare-prop-value { font: 500 13px var(--font); color: var(--text-mid); }

/* Личный счёт (sale.personal.account + sale.account.pay, Фаза C) — две отдельные
   компоненты в общем flex-ряду, компоновка задаётся страницей (.lk-bill-row). */
.lk-bill-row { display: flex; gap: 40px; padding: 28px 28px 40px; align-items: flex-start; flex-wrap: wrap; }

.lk-bill-balance { flex: none; width: 360px; max-width: 100%; }
.lk-bill-balance-card { border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; background: #faf8f4; }
.lk-bill-balance-label { font: 700 11.5px var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--text-hint); margin-bottom: 10px; }
.lk-bill-balance-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lk-bill-balance-row + .lk-bill-balance-row { margin-top: 10px; }
.lk-bill-balance-code { font: 800 16px var(--font); }
.lk-bill-balance-name { font: 500 12px var(--font); color: var(--text-hint); }
.lk-bill-balance-sum { font: 800 28px var(--font); white-space: nowrap; }

.lk-bill-pay { flex: 1; min-width: 280px; max-width: 480px; }
.lk-bill-confirm { font: 500 13.5px var(--font); color: var(--text-mid); }
.lk-bill-confirm p { margin: 0 0 10px; }

/* Классы ниже — обязательный контракт вендорского script.js (sale.account.pay/.default),
   скопированного без изменений: переименовывать нельзя, JS ищет их по getElementsByClassName. */
.sale-acountpay-block { margin-bottom: 18px; }
.sale-acountpay-title { font: 700 12.5px var(--font); color: #3a3631; margin: 0 0 10px; }
.sale-acountpay-fixedpay-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 9px; flex-wrap: wrap; }
.sale-acountpay-fixedpay-item {
  display: inline-block; cursor: pointer; font: 700 13px var(--font);
  border: 1.5px solid var(--border-soft); border-radius: 9px; padding: 10px 16px;
  transition: border-color .15s ease;
}
.sale-acountpay-fixedpay-item:hover { border-color: var(--accent); }
.sale-acountpay-input { text-align: left; margin-top: 0; }
.sale-acountpay-pp { display: flex; gap: 12px; flex-wrap: wrap; }
.sale-acountpay-pp-company {
  display: flex; align-items: center; gap: 10px; cursor: pointer; width: fit-content;
  border: 2px solid var(--border-soft); border-radius: 10px; padding: 11px 14px;
  transition: border-color .15s ease, background .15s ease;
}
.sale-acountpay-pp-company.bx-selected { border-color: var(--accent); background: #fff8f0; }
.sale-acountpay-pp-company-graf-container {
  position: relative; flex: none; width: 34px; height: 22px; border-radius: 4px;
  background: #fff; border: 1px solid var(--border-soft); overflow: hidden;
}
.sale-acountpay-pp-company-image { position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; background-position: center; }
.sale-acountpay-pp-company-checkbox { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sale-acountpay-pp-company-smalltitle { font: 600 13px var(--font); color: var(--text-mid); }
.sale-acountpay-pp-company.bx-selected .sale-acountpay-pp-company-smalltitle { color: var(--accent-dark); }
.sale-account-pay-button.btn { margin-top: 6px; }
#loading_screen img { display: block; }

/* Подписка на рассылку (subscribe.edit, Фаза C). */
.lk-subscribe-banner {
  border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; margin: 0 0 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: #faf8f4;
}
.lk-subscribe-banner-text { font: 600 13px var(--font); color: #3a3631; }
.lk-subscribe-logout { font: 600 12.5px var(--font); color: var(--text-hint); text-decoration: underline; }
.lk-subscribe-heading { font: 800 15.5px var(--font); margin: 0 0 16px; }
.lk-subscribe-form { max-width: 440px; }
.lk-subscribe-rubrics { margin: 10px 0 20px; display: flex; flex-direction: column; gap: 8px; }
.lk-subscribe-radio-row { display: flex; gap: 22px; margin: 0 0 22px; }
.lk-subscribe-radio { display: flex; align-items: center; gap: 8px; font: 600 13px var(--font); cursor: pointer; }
.lk-subscribe-radio input[type="radio"] { width: 17px; height: 17px; accent-color: var(--accent); }
.lk-subscribe-note { font: 500 12px var(--font); color: var(--text-hint); margin: 0 0 20px; }
.lk-subscribe-legacy table.data-table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font: 500 13px var(--font); }
.lk-subscribe-legacy table.data-table thead td { font: 800 14px var(--font); padding: 0 0 12px; }
.lk-subscribe-legacy table.data-table td { padding: 6px 0; vertical-align: top; }
.lk-subscribe-legacy input[type="text"], .lk-subscribe-legacy input[type="password"] { width: 100%; max-width: 260px; }
.lk-subscribe-legacy .starrequired { color: #a12b2b; }

/* ========== Авторизация / Регистрация (/auth/) ==========
   Оверрайд .default для bitrix:system.auth.authorize и bitrix:system.auth.registration —
   те же компоненты, что и штатный NEED_AUTH-рендер ядра, просто своя вёрстка вместо
   родного bx-auth-table. */
.auth-page-wrap { padding: 46px var(--pad-x) 80px; }
.auth-tabs { display: flex; align-items: center; gap: 26px; padding: 14px 28px 0; border-bottom: 1px solid var(--border); }
.auth-tab { font: 600 13.5px var(--font); color: var(--text-mid); text-decoration: none; padding-bottom: 12px; border-bottom: 2.5px solid transparent; }
.auth-tab:hover { color: var(--dark); }
.auth-tab.active { font-weight: 700; color: var(--dark); border-bottom-color: var(--accent); cursor: default; }
.auth-body { display: flex; gap: 60px; padding: 28px 28px 40px; flex-wrap: wrap; }
.auth-form-col { flex: 1; min-width: 280px; max-width: 400px; }
.auth-side-col { flex: 1; min-width: 280px; border-left: 1px solid var(--border); padding-left: 40px; }
.auth-side-col h2 { font: 800 16px var(--font); margin-bottom: 10px; }
.auth-side-col p { font: 500 14px/1.6 var(--font); color: var(--text-mid); max-width: 420px; margin-bottom: 16px; }
.auth-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; max-width: 820px; }
.auth-error {
  background: #fdecea; color: #a12b2b; border: 1px solid #f3c6c2; border-radius: 10px;
  padding: 12px 16px; font: 600 13px var(--font); margin: 0 28px 20px;
}
.auth-captcha img { border-radius: 8px; border: 1px solid var(--border-soft); }

/* Блок соцавторизации (bitrix:socserv.auth.form, реальный активный функционал —
   LiveJournal/Mail.ru OpenID/Blogger/OpenID, рендерится вендорским компонентом без
   изменений). Даём только отступ/контейнер, чтобы иконки не торчали вплотную к карточке. */
.bx-auth-serv-icons {
  max-width: 1200px; margin: 16px auto 0; padding: 10px 28px;
  display: flex; gap: 14px; align-items: center;
}
.bx-auth-serv-icons a { opacity: .55; transition: opacity .15s; }
.bx-auth-serv-icons a:hover { opacity: 1; }

/* ========== Пагинация каталога/поиска (маркап .bx-pagination/.bx-pag-prev/.bx-active/
   .bx-pag-next) ==========
   На /catalog/ эту разметку по-прежнему рендерит core-компонент bitrix:system.pagenavigation
   (шаблон "round", bitrix/components/bitrix/system.pagenavigation/templates/round) — его
   собственный style.css (синий #0083d1) подключается САМИМ компонентом при вызове. На
   /search/ с этапа "релевантность CSearch" (2026-07-17) пагинация рендерится вручную в
   search/index.php (той же разметкой, для визуального единства) — без вызова компонента,
   а значит БЕЗ его CSS вообще. Поэтому здесь заданы полные базовые layout-свойства
   (display/list-style на ul и li), а не только цвета/рамки поверх core — иначе на /search/
   разметка разваливается (ul/li падают на display:block/list-item браузера по умолчанию).
   На /catalog/ эти базовые правила просто дублируют то, что уже задаёт core-CSS. */
.bx-pagination { margin: 28px 0 0; }
.bx-pagination .bx-pagination-container { text-align: center; }
.bx-pagination .bx-pagination-container ul {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bx-pagination .bx-pagination-container ul li { display: flex; margin: 0 3px 10px; }
/* Коробка (рамка/фон/скругление) — только на внешнем элементе (<a> у ссылок, голый <span> у
   активной/недоступной страницы). Вложенный <span> внутри <a> (маркап core-шаблона:
   <a href="..."><span>1</span></a>) сведён к display:contents — иначе получалась двойная рамка
   и число не по центру: и <a>, и вложенный <span> одновременно рисовали свою рамку/паддинг. */
.bx-pagination .bx-pagination-container ul li > a,
.bx-pagination .bx-pagination-container ul li > span {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: #fff;
  border: 1.5px solid var(--border-soft);
  border-radius: 10px;
  height: 40px;
  min-width: 40px;
  padding: 0 14px;
  font: 600 13px var(--font);
  line-height: normal;
  color: var(--dark);
}
.bx-pagination .bx-pagination-container ul li > a > span { display: contents; }
.bx-pagination .bx-pagination-container ul li.bx-pag-gap > span {
  background: transparent;
  border-color: transparent;
  min-width: 24px;
  padding: 0;
  color: var(--text-hint);
}
.bx-pagination .bx-pagination-container ul li > a:hover {
  background: var(--bg-warm);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.bx-pagination .bx-pagination-container ul li.bx-active > span,
.bx-pagination.bx-blue .bx-pagination-container ul li.bx-active > span,
.bx-pagination.bx-green .bx-pagination-container ul li.bx-active > span,
.bx-pagination.bx-yellow .bx-pagination-container ul li.bx-active > span,
.bx-pagination.bx-red .bx-pagination-container ul li.bx-active > span {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}
.bx-pagination .bx-pagination-container ul li.bx-pag-all > a,
.bx-pagination .bx-pagination-container ul li.bx-pag-prev > a,
.bx-pagination .bx-pagination-container ul li.bx-pag-next > a,
.bx-pagination .bx-pagination-container ul li.bx-pag-all > span,
.bx-pagination .bx-pagination-container ul li.bx-pag-prev > span,
.bx-pagination .bx-pagination-container ul li.bx-pag-next > span {
  padding: 0 16px;
  font-weight: 700;
}
.bx-pagination .bx-pagination-container ul li.bx-pag-all > span,
.bx-pagination .bx-pagination-container ul li.bx-pag-prev > span,
.bx-pagination .bx-pagination-container ul li.bx-pag-next > span {
  color: var(--text-hint);
}

/* ========== Плавающая панель чипов /search/ (вариант C) ==========
   Скрыта по умолчанию (translateY + opacity), показывается JS-классом .visible, когда
   исходный блок чипов (#eportaChipRow) уходит за пределы экрана — см. IntersectionObserver
   в search/index.php. pointer-events отключены в скрытом состоянии, чтобы невидимая панель
   не перехватывала клики по контенту под ней во время transition. */
.eporta-sticky-chips {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 6px 18px rgba(20, 17, 12, .08);
  padding: 10px 56px;
  z-index: 150;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
  pointer-events: none;
}
.eporta-sticky-chips.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.eporta-sticky-chips > div::-webkit-scrollbar { display: none; }
.eporta-sticky-chips > div { scrollbar-width: none; }

/* ========== Оформление заказа (bitrix:sale.order.ajax, шаблон "eporta") ==========
   ВАЖНО: template.php/script.js/order_ajax.js в local/templates/eporta/components/bitrix/
   sale.order.ajax/eporta/ — байт-в-байт копия вендорского .default, НЕ изменены. Основной
   контент шагов (доставка/оплата/адрес) рендерится JS из компилированного order_ajax.min.js —
   markup внутри него не редактируется (риск для бизнес-логики), поэтому здесь ТОЛЬКО CSS
   поверх классов, которые генерирует сам вендорский JS (та же схема, что и фикс пагинации
   bitrix:system.pagenavigation — переопределение без вмешательства в разметку/поведение).
   Обёртка .lk-page-wrap/.lk-card — на стороне вызывающей personal/cart/order/index.php,
   не здесь. */
#bx-soa-order, #bx-soa-order * { font-family: var(--font) !important; }
#bx-soa-order { color: var(--dark); }
#bx-soa-order a { color: var(--accent-dark); }

/* Карточка шага (доставка/оплата/адрес/корзина) */
.bx-soa-section {
  background: #fff;
  border: 1.5px solid var(--border-soft) !important;
  border-radius: 14px;
  padding: 22px 24px !important;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(20, 17, 12, .04);
}
.bx-soa-section.bx-selected { border-color: var(--accent) !important; }
.bx-soa-section.bx-step-completed { border-color: var(--border-soft) !important; }
.bx-soa-section.bx-step-warning { border-color: #f0b429 !important; }
.bx-soa-section.bx-step-error { border-color: var(--sale) !important; }
.bx-soa-section-title-container { padding: 0 0 4px !important; border: none !important; }
.bx-soa-section-title {
  font: 800 18px var(--font) !important;
  color: var(--dark);
  letter-spacing: -0.01em;
}
.bx-soa-section.bx-selected .bx-soa-section-title { font-size: 20px !important; }
.bx-soa-section-title-count {
  background: var(--bg-warm) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-mid) !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
}
.bx-soa-section.bx-step-completed .bx-soa-section-title-count,
.bx-soa-section.bx-selected .bx-soa-section-title-count {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
.bx-soa-editstep {
  font: 700 12.5px var(--font);
  color: var(--accent-dark);
  border-bottom-color: var(--accent) !important;
}

/* Поля ввода (адрес/ФИО/телефон/промокод) — тот же стиль, что фильтры каталога/поиска.
   Поля-локейшн-виджета (sale.location.selector.search, класс "Местоположение" в адресе)
   ИСКЛЮЧЕНЫ из общего правила через :not() — вендор сам рисует единственную рамку/фон на
   родителе .dropdown-block, а сам <input class="dropdown-field"> намеренно безрамочный
   (то же самое для служебных оверлей-инпутов .bx-ui-sls-fake/.bx-ui-sls-route). Раньше эти
   классы попадали под общий "input[type=text]" и получали ВТОРУЮ рамку внутри уже
   обрамлённого .dropdown-block — визуально "коробка в коробке" (тот же класс бага, что чинили
   в пагинации: родитель и вложенный элемент красились одинаково). Единственная коробка теперь
   рисуется на .dropdown-block отдельным правилом ниже. */
#bx-soa-order .form-control,
#bx-soa-order input[type="text"]:not(.dropdown-field):not(.bx-ui-sls-fake):not(.bx-ui-sls-route),
#bx-soa-order input[type="tel"],
#bx-soa-order input[type="email"],
#bx-soa-order textarea,
#bx-soa-order select {
  font-family: var(--font) !important;
  border: 1.5px solid var(--border-soft) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 9px 12px !important;
}
#bx-soa-order .form-control:focus,
#bx-soa-order input:not(.dropdown-field):not(.bx-ui-sls-fake):not(.bx-ui-sls-route):focus,
#bx-soa-order textarea:focus,
#bx-soa-order select:focus {
  border-color: var(--accent) !important;
  box-shadow: none !important;
}
#bx-soa-order input[type="radio"],
#bx-soa-order input[type="checkbox"] {
  accent-color: var(--accent);
}
#bx-soa-order .radio,
#bx-soa-order .checkbox {
  margin: 9px 0;
}
#bx-soa-order .radio label,
#bx-soa-order .checkbox label {
  font: 600 13.5px var(--font);
  padding-left: 4px;
  cursor: pointer;
}

/* Местоположение (bitrix:sale.location.selector.search, класс .bx-sls) — единственная коробка
   на родителе .dropdown-block вместо вендорского серого 2px-радиуса, тот же язык, что у
   остальных полей выше. Сам <input class="dropdown-field"> внутри остаётся безрамочным
   (см. исключение выше) — это НЕ баг, а как вендор его и задумывал: контейнер красит рамку,
   инпут просто заполняет её текстом. */
.bx-sls .dropdown-block {
  border: 1.5px solid var(--border-soft) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  background: #fff !important;
}
.bx-sls .dropdown-block:focus-within { border-color: var(--accent) !important; }
.bx-sls .dropdown-field { font: 600 14px var(--font) !important; }
.bx-ui-sls-pane {
  border: 1.5px solid var(--border-soft) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 28px rgba(20, 17, 12, .1) !important;
  font-family: var(--font);
  overflow: hidden;
}
.dropdown-item.bx-ui-sls-variant {
  font: 600 13.5px var(--font);
  padding: 9px 14px;
}
.dropdown-item.bx-ui-sls-variant:hover { background: var(--bg-warm); }

/* Кнопки — основная CTA "Оформить заказ"/"Продолжить" в акцентном оранжевом */
#bx-soa-order .btn,
#bx-soa-order .btn-default,
#bx-soa-order [data-save-button] {
  font: 700 14px var(--font) !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 24px rgba(232, 130, 10, .28) !important;
  text-shadow: none !important;
}
#bx-soa-order .btn:hover,
#bx-soa-order .btn-default:hover,
#bx-soa-order [data-save-button]:hover {
  background: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
}
#bx-soa-order .btn-link { background: none !important; color: var(--accent-dark) !important; }

/* Купон */
.bx-soa-coupon-input input[type="text"].form-control { border-radius: 10px 0 0 10px !important; }
.bx-soa-coupon-item {
  background: var(--bg-warm);
  border-radius: 20px;
  font: 600 12.5px var(--font);
}

/* Сайдбар итогов заказа */
.bx-soa-sidebar { }
.bx-soa-cart-total {
  background: #fff;
  border: 1.5px solid var(--border-soft);
  border-radius: 14px;
  padding: 18px 20px;
}
.bx-soa-cart-total-line { font: 600 13.5px var(--font); }
.bx-soa-changeCostSign { color: var(--accent-dark); font-weight: 800; }

/* Способы доставки/оплаты — карточки-компании и пункты выдачи */
.bx-soa-pp-company {
  border: 1.5px solid var(--border-soft) !important;
  border-radius: 14px !important;
  transition: border-color .15s, box-shadow .15s;
}
.bx-soa-pp-company:hover { border-color: var(--accent) !important; box-shadow: 0 4px 14px rgba(20, 17, 12, .06); }
.bx-soa-pp-company-selected {
  border-color: var(--accent) !important;
  box-shadow: 0 4px 14px rgba(232, 130, 10, .12);
}
.bx-soa-pp-company-title { font: 700 14px var(--font) !important; color: var(--dark); }
.bx-soa-pickup-l-item-btn,
.bx-soa-more { color: var(--accent-dark) !important; }

/* ========== Страницы раздела "Покупателю" (Замер/Доставка/Оплата/Монтаж/Гарантия) ========== */
.info-page { max-width: 900px; margin: 0 auto; padding: 32px var(--pad-x) 64px; }
.info-page h1 { font: 800 30px var(--font); color: var(--dark); margin-bottom: 22px; }
.info-page h2 { font: 800 20px var(--font); color: var(--dark); margin: 30px 0 12px; }
.info-page p { font: 500 15px/1.6 var(--font); color: var(--text-mid); margin-bottom: 12px; }
.info-page strong { color: var(--dark); }
.info-page a.info-link { color: var(--accent-dark); font-weight: 700; }

/* Содержимое статьи (articles/index.php, DETAIL_TEXT из WYSIWYG-редактора админки статей) —
   правила для тегов и классов, которые расставляет редактор (local/admin_tools/eporta_articles):
   абзацы/заголовки/списки/выравнивание картинок. Те же классы img-align-* задействует и
   предпросмотр в самой админке (.article-preview-body там), чтобы выглядело одинаково. */
.article-content { font: 400 15px/1.7 var(--font); color: #3a3631; }
.article-content p { margin: 0 0 18px; }
.article-content h2 { margin: 32px 0 14px; font: 800 22px var(--font); letter-spacing: -0.01em; color: var(--dark); }
.article-content h3 { margin: 26px 0 12px; font: 800 18px var(--font); letter-spacing: -0.01em; color: var(--dark); }
.article-content ul, .article-content ol { margin: 0 0 18px; padding-left: 24px; }
.article-content li { margin-bottom: 6px; }
.article-content a { color: var(--accent-dark); }
.article-content img { max-width: 100%; height: auto; border-radius: 10px; }
.article-content .img-align-left { float: left; margin: 4px 20px 16px 0; max-width: 48%; }
.article-content .img-align-center { display: block; margin: 20px auto; }
.article-content .img-align-full { display: block; width: 100%; margin: 20px 0; }
.article-content::after { content: ""; display: table; clear: both; }

.info-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.info-tabs a {
  font: 700 13.5px var(--font);
  color: var(--text-mid);
  background: var(--bg-warm);
  border-radius: 20px;
  padding: 9px 16px;
}
.info-tabs a:hover { color: var(--dark); }
.info-tabs a.active { color: #fff; background: var(--accent-dark); }

.info-callout {
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 20px;
  background: var(--bg-warm);
  border: 1px solid var(--border-soft);
}
.info-callout h4 { font: 800 15.5px var(--font); color: var(--dark); margin-bottom: 8px; }
.info-callout p { margin: 0; color: var(--text-mid); }
.info-callout--accent { background: #fdf1e2; border-color: #f3dcb2; }
.info-callout--accent h4 { color: var(--accent-dark); }

.info-list { list-style: none; margin: 0 0 20px; padding: 0; }
.info-list li {
  font: 500 14.5px/1.5 var(--font);
  color: var(--text-mid);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.info-list li:last-child { border-bottom: none; }
.info-list li.info-list-heading {
  font: 800 13px var(--font);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-hint);
  border-bottom: none;
  padding: 20px 0 6px;
}
.info-list li.info-list-heading:first-child { padding-top: 0; }

.info-table-wrap { overflow-x: auto; margin-bottom: 24px; }
.info-table { width: 100%; border-collapse: collapse; font: 500 14px var(--font); }
.info-table th, .info-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.info-table th { font: 800 12px var(--font); text-transform: uppercase; letter-spacing: .03em; color: var(--text-hint); background: var(--bg-warm); }
.info-table td:last-child, .info-table th:last-child { text-align: right; white-space: nowrap; }
.info-table tr.info-table-section th { background: #f2ede2; color: var(--dark); font-size: 12.5px; }

.info-form {
  background: var(--bg-warm);
  border-radius: 16px;
  padding: 26px 28px;
  margin-top: 8px;
}
.info-form label { display: block; font: 700 13.5px var(--font); color: var(--dark); margin-bottom: 6px; }
.info-form input, .info-form textarea {
  width: 100%;
  font: 500 14.5px var(--font);
  color: var(--dark);
  background: #fff;
  border: 1.5px solid var(--border-soft);
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 16px;
}
.info-form button {
  font: 700 14.5px var(--font);
  color: #fff;
  background: var(--accent-dark);
  border: none;
  border-radius: 10px;
  padding: 12px 26px;
  cursor: pointer;
}
.info-form button:hover { background: var(--accent); }
.info-form .info-form-note { font: 500 12.5px/1.5 var(--font); color: var(--text-hint); margin-top: 10px; }

/* Информационные плашки — тот же стиль, что .auth-error на /auth/ */
#bx-soa-order .alert {
  border-radius: 10px;
  font: 600 13px var(--font);
  border: 1px solid transparent;
}
#bx-soa-order .alert-danger { background: #fdecea; color: #a12b2b; border-color: #f3c6c2; }
#bx-soa-order .alert-warning { background: #fff6e5; color: #8a6100; border-color: #f0dba8; }
#bx-soa-order .alert-success { background: #eaf7ee; color: #1f8a4c; border-color: #bfe6cc; }

/* Подтверждение заказа (confirm.php — отдельный, не JS-завязанный шаблон sale.order.ajax,
   показывается после отправки формы и на прямых визитах ?ORDER_ID=N). В отличие от
   template.php здесь нет вендорской JS-инициализации на конкретных id/классах — поэтому
   разметка confirm.php сама приведена к паттерну .lk-empty (как на /auth/), не только CSS
   поверх исходных <table>/<td>. Успех/ошибка используют одну и ту же .lk-empty — визуально
   различаются только иконкой/текстом. */
.lk-order-pay-block {
  margin-top: 20px;
  padding: 20px 22px;
  border: 1.5px solid var(--border-soft);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.lk-order-pay-header { display: flex; align-items: center; gap: 14px; }
.lk-order-pay-logo { border-radius: 10px; object-fit: contain; }
.lk-order-pay-label { font: 600 12px var(--font); color: var(--text-hint); text-transform: uppercase; letter-spacing: .04em; }
.lk-order-pay-name { font: 700 15px var(--font); color: var(--dark); }
.lk-order-pay-action { margin-left: auto; font: 600 13.5px var(--font); }
.lk-order-pay-action a { color: var(--accent-dark); }
.lk-order-pay-error {
  margin-top: 16px;
  padding: 12px 16px;
  background: #fdecea;
  color: #a12b2b;
  border: 1px solid #f3c6c2;
  border-radius: 10px;
  font: 600 13px var(--font);
}

/* ========== Карта магазинов /store/, /stores/ (Этап 4) ==========
   Список (catalog.store.list) + детальная карточка (catalog.store.detail).
   Карта отключена (MAP_TYPE=0 в обоих разделах) — только список/карточки. */
.store-title { padding: 10px var(--pad-x) 4px; }
.store-title h1 { margin: 0; font: 800 27px var(--font); letter-spacing: -0.01em; }

.store-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;
  padding: 20px var(--pad-x) 60px;
}
.store-card {
  display: flex; flex-direction: column; background: var(--bg);
  border: 1px solid var(--border-soft); border-radius: 16px; overflow: hidden;
  text-decoration: none; color: inherit; transition: box-shadow .15s ease, border-color .15s ease;
}
.store-card:hover { box-shadow: 0 14px 34px rgba(27, 26, 23, .12); border-color: var(--border); }
.store-card-image { aspect-ratio: 16 / 11; background: var(--bg-warm); }
.store-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.store-card-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.store-card-title { font: 700 15.5px var(--font); color: var(--dark); }
.store-card-row { font: 500 13px var(--font); color: var(--text-muted); }
.store-card-address { color: var(--text-mid); }

.store-detail-page { padding-bottom: 60px; }
.store-detail-card {
  display: flex; gap: 28px; flex-wrap: wrap; margin: 20px var(--pad-x) 0;
  padding: 26px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 18px;
}
.store-detail-image img { border-radius: 12px; display: block; }
.store-detail-body { flex: 1; min-width: 240px; }
.store-detail-title { margin: 0 0 12px; font: 800 22px var(--font); letter-spacing: -0.01em; }
.store-detail-desc { font: 500 14px var(--font); color: var(--text-mid); margin: 0 0 16px; }
.store-detail-row { margin-bottom: 12px; }
.store-detail-label { font: 700 12px var(--font); color: var(--text-hint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.store-detail-value { font: 600 14px var(--font); color: var(--dark); }
.store-detail-back { margin-top: 8px; }

/* SEO-текст категории каталога (Этап SEO, catalog/index.php + inc/seo/<slug>.php) —
   сами файлы содержат голые h2/p/ul без классов, стили только на уровне обёртки. */
.eporta-catalog-seo-text { border-top: 1px solid var(--border-soft); padding-top: 24px; }
.eporta-catalog-seo-text h2 { margin: 0 0 12px; font: 800 20px var(--font); letter-spacing: -0.01em; color: var(--dark); }
.eporta-catalog-seo-text p { margin: 0 0 14px; font: 500 14px/1.65 var(--font); color: var(--text-mid); }
.eporta-catalog-seo-text ul { margin: 0 0 14px; padding-left: 20px; }
.eporta-catalog-seo-text li { font: 500 14px/1.6 var(--font); color: var(--text-mid); margin: 4px 0; }
.eporta-catalog-seo-text p:last-child, .eporta-catalog-seo-text ul:last-child { margin-bottom: 0; }

/* «Паспорт коллекции» — SEO-текст страницы коллекции/подколлекции (UF_SEO_TEXT, catalog/index.php):
   слева факты из каталога, справа текст. Свёртка вешается классом .is-collapsible из JS —
   без JS текст виден целиком. */
.coll-seo { display: grid; grid-template-columns: 17rem minmax(0, 46rem); gap: 0 clamp(28px, 5vw, 64px); align-items: start; padding: 30px var(--pad-x) 6px; }
.coll-seo:not(:has(.coll-seo__facts)) { grid-template-columns: minmax(0, 46rem); }
.coll-seo__facts { margin: 0; padding: 0; border-top: 2px solid var(--dark); }
.coll-seo__facts > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 0 13px; border-bottom: 1px solid var(--border-soft); }
.coll-seo__facts dt { margin: 0; font: 600 12.5px var(--font); color: #8d8677; }
.coll-seo__facts dd { margin: 0; font: 800 19px/1.25 var(--font); letter-spacing: -0.01em; color: var(--dark); font-variant-numeric: tabular-nums; }
.coll-seo__facts dd small { font: 600 13.5px var(--font); color: var(--text-mid); letter-spacing: 0; }
.coll-seo__main { min-width: 0; }
.coll-seo__body { font: 500 15px/1.72 var(--font); color: var(--text-mid); }
.coll-seo__body p { margin: 0 0 14px; }
.coll-seo__body > p:first-child { font: 600 19px/1.55 var(--font); color: var(--dark); letter-spacing: -0.005em; text-wrap: pretty; }
.coll-seo__body h2 { margin: 22px 0 10px; font: 800 20px var(--font); color: var(--dark); letter-spacing: -0.01em; }
.coll-seo__body h3 { margin: 18px 0 8px; font: 800 16px var(--font); color: var(--dark); }
.coll-seo__body ul, .coll-seo__body ol { margin: 0 0 14px; padding-left: 20px; }
.coll-seo__body li { margin: 4px 0; }
.coll-seo__body a { color: #b85f00; text-decoration: underline; text-underline-offset: 2px; }
.coll-seo__body.is-collapsible:not(.is-open) { max-height: 11.5em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); }
.coll-seo__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 18px; border: 1.5px solid var(--border-soft); border-radius: 999px; background: #fff; font: 700 14px var(--font); color: var(--dark); cursor: pointer; }
.coll-seo__more:hover { border-color: var(--accent, #e8820a); color: #b85f00; }
.coll-seo__more:focus-visible { outline: 2px solid var(--accent, #e8820a); outline-offset: 2px; }
.coll-seo__more svg { width: 14px; height: 14px; transition: transform .2s ease; }
.coll-seo__more[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (max-width: 760px) {
	.coll-seo, .coll-seo:not(:has(.coll-seo__facts)) { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 24px; }
	.coll-seo__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
	.coll-seo__facts > div { border-bottom: 0; padding-bottom: 4px; }
	.coll-seo__facts dd { font-size: 16px; }
	.coll-seo__body > p:first-child { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .coll-seo__more svg { transition: none; } }

/* ========== Мега-меню «Каталог» (вариант A) ==========
   Разметка — include/megamenu.php (серверная, ссылки обычные <a href>), поведение — app.js, структура колонок —
   админка local/admin_tools/eporta_menu/. Кнопка и скрытие меню — в critical.css. */
.mega {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 26px 50px rgba(27,26,23,.13);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.mega a { text-decoration: none; }
.mega a:focus-visible, .mega button:focus-visible { outline: 3px solid var(--dark); outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }
.mega__bar { display: none; }
.mega__in { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; padding: 28px var(--pad-x) 8px; }
.mega__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 28px; align-content: start; }
.mcol__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mcol__title { font: 800 15px/1.3 var(--font); color: var(--dark); }
.mcol__title:hover { color: #9a4608; }
.mcol__tg { display: none; }
.mcol__body ul { list-style: none; margin: 8px 0 0; padding: 0; }
.mcol__body li a { display: block; padding: 4px 0; font: 600 13.5px var(--font); color: #3a3631; }
.mcol__body li a:hover { color: #9a4608; text-decoration: underline; }
.mcol__all { display: inline-block; margin-top: 8px; font: 800 13px var(--font); color: #b45309; }
.mcol__all:hover { text-decoration: underline; }
.mega__cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mega__cat { position: relative; display: block; height: 104px; border-radius: 12px; overflow: hidden; background: #ddd; }
.mega__cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mega__cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(20,17,12,.78)); }
.mega__cat span { position: absolute; left: 12px; bottom: 9px; z-index: 1; color: #fff; font: 800 13.5px var(--font); }
.mega__promos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.mega__promo { position: relative; display: block; min-height: 120px; border-radius: 14px; overflow: hidden; }
.mega__promo-bg { position: absolute; inset: -1px; background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; }
.mega__promo-tx { position: absolute; left: 14px; right: 14px; bottom: 12px; }
.mega__promo-tx b { display: block; font: 800 16px var(--font); color: #fff; }
.mega__promo-tx i { display: block; font: 700 12px var(--font); font-style: normal; color: #ffd7b0; margin-top: 3px; }
.mega__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px var(--pad-x) 0; padding: 14px 0 18px; border-top: 1px solid var(--border); }
.mega__chips > span { font: 700 12px var(--font); color: #5f5a51; margin-right: 4px; }
.mega__chips a { font: 600 13px var(--font); color: #3a3631; background: var(--bg-section); border: 1px solid #ece7de; border-radius: 999px; padding: 7px 14px; }
.mega__chips a:hover { background: #ece7de; }
@media (max-width: 1100px) and (min-width: 641px) {
  .mega__in { grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; }
  .mega__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* Шапка: 1-я строка лого, бургер, звонок; 2-я кнопка «Каталог» (тянется) и иконки; 3-я поиск на всю ширину */
  .catbtn { order: 4; flex: 1 0 190px; justify-content: center; padding: 0 16px; }
  .header-actions { order: 5; }
  .header-search { order: 6; flex: 0 0 100%; }
  /* Меню на мобильном — шторка на весь экран с аккордеоном разделов */
  .mega { position: fixed; inset: 0; z-index: 310; max-height: none; height: 100%; border: 0; box-shadow: none; }
  body.mega-open { overflow: hidden; }
  .mega__bar { display: flex; position: sticky; top: 0; z-index: 2; align-items: center; justify-content: space-between; padding: 10px var(--pad-x); background: var(--bg); border-bottom: 1px solid var(--border); font: 800 17px var(--font); }
  .mega__close { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; background: #fff; display: grid; place-items: center; cursor: pointer; }
  .mega__close svg, .mcol__tg svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mega__in { display: block; padding: 0; }
  .mega__cols { display: block; }
  .mcol { border-bottom: 1px solid var(--border); }
  .mcol__head { align-items: center; padding: 0 var(--pad-x); min-height: 52px; }
  .mcol__title { flex: 1; padding: 14px 0; }
  .mcol__tg { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; }
  .mcol__tg svg { transition: transform .15s; }
  .mcol__tg[aria-expanded="true"] svg { transform: rotate(180deg); }
  .mcol__body { display: none; padding: 0 var(--pad-x) 14px; background: var(--bg-warm); }
  .mcol.is-open .mcol__body { display: block; }
  .mcol__body ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .mcol__body li a { padding: 10px 0; }
  .mega__side { padding: 14px var(--pad-x); }
  .mega__cats { display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none; }
  .mega__cat { flex: none; width: 130px; height: 90px; }
  .mega__promos { grid-template-columns: 1fr; }
  .mega__chips { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .catbtn .catbtn__chev, .mcol__tg svg { transition: none; } }
/* «Каталог» в .cat-nav: на десктопе вместо ссылки кнопка #catBtn в шапке; в мобильной панели ссылка остаётся */
@media (min-width: 641px) { .cat-nav .nav-catalog-link { display: none; } }

/* Страница запроса: лид, чипы похожих запросов, SEO-текст с раскрытием, вопросы и ответы, консультация. */
.eporta-q-lead { margin: 8px 0 0; max-width: 720px; font: 500 14px/1.55 var(--font); color: var(--text-mid); }
.eporta-q-chips { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; max-width: 100%; scrollbar-width: thin; }
.eporta-q-chips a { flex: none; font: 600 13px var(--font); color: var(--dark); background: #f3f1ec; border-radius: 99px; padding: 7px 14px; text-decoration: none; white-space: nowrap; }
.eporta-q-chips a:hover { background: #ebe7de; }
.eporta-q-seo { border-top: 1px solid var(--border-soft); padding-top: 24px; max-width: 900px; box-sizing: content-box; }
.eporta-q-seo__body h2 { margin: 0 0 12px; font: 800 20px var(--font); letter-spacing: -0.01em; color: var(--dark); }
.eporta-q-seo__body h3 { margin: 18px 0 8px; font: 800 16px var(--font); color: var(--dark); }
.eporta-q-seo__body p { margin: 0 0 14px; font: 500 14px/1.65 var(--font); color: var(--text-mid); }
.eporta-q-seo__body ul, .eporta-q-seo__body ol { margin: 0 0 14px; padding-left: 22px; font: 500 14px/1.65 var(--font); color: var(--text-mid); }
.eporta-q-seo__body.is-clamped { position: relative; max-height: 15em; overflow: hidden; }
.eporta-q-seo__body.is-clamped::after { content: ""; position: absolute; inset: auto 0 0; height: 4.5em; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); pointer-events: none; }
.eporta-q-seo__more { margin: 0 0 22px; padding: 0; border: 0; background: none; font: 700 14px var(--font); color: #b45309; cursor: pointer; }
.eporta-q-seo__more:focus-visible, .eporta-q-faq summary:focus-visible, .eporta-q-help a:focus-visible { outline: 2px solid #b45309; outline-offset: 2px; }
.eporta-q-faq { margin: 8px 0 28px; }
.eporta-q-faq h2 { margin: 0 0 10px; font: 800 20px var(--font); letter-spacing: -0.01em; color: var(--dark); }
.eporta-q-faq details { border-top: 1px solid var(--border-soft); }
.eporta-q-faq details:last-of-type { border-bottom: 1px solid var(--border-soft); }
.eporta-q-faq summary { cursor: pointer; padding: 14px 0; font: 700 15px var(--font); color: var(--dark); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.eporta-q-faq summary::-webkit-details-marker { display: none; }
.eporta-q-faq summary::after { content: "+"; font-weight: 600; color: #b45309; }
.eporta-q-faq details[open] summary::after { content: "\2212"; }
.eporta-q-faq details p { margin: 0 0 14px; font: 500 14px/1.65 var(--font); color: var(--text-mid); }
.eporta-q-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 18px 20px; border-radius: 14px; background: #f7f3ea; }
.eporta-q-help div { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 260px; }
.eporta-q-help b { font: 800 16px var(--font); color: var(--dark); }
.eporta-q-help span { font: 500 14px/1.5 var(--font); color: var(--text-mid); }
.eporta-q-help a { flex: none; padding: 12px 22px; border-radius: 10px; background: #b45309; color: #fff; font: 700 14px var(--font); text-decoration: none; }
@media (max-width: 640px) { .eporta-q-seo__body.is-clamped { max-height: 17em; } .eporta-q-help a { width: 100%; text-align: center; box-sizing: border-box; } }

/* End */
/* /local/templates/eporta/styles.css?1785771249121 */
/* /local/templates/eporta/template_styles.css?1793103826168611 */