/* Дополнения к вёрстке донора: блоки, которых нет в app.min.css
   (подкатегории в листинге, корзина, форма заказа). */

.category__wrapper {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.category__found {
    margin-bottom: 12px;
    color: #848484;
}

.filters .filters__box {
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 16px;
}

.filters__header {
    margin-bottom: 12px;
}

.filters__title {
    font-size: 20px;
    font-weight: 600;
}

.filters__block {
    padding: 12px 0;
    border-top: 1px solid #f0f0f0;
}

.filters__toggler {
    font-weight: 600;
    margin-bottom: 8px;
    cursor: pointer;
}

.filters__checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
}

.filters__checkbox input[hidden] + .checkbox-2__value::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    vertical-align: -3px;
}

.filters__checkbox input:checked + .checkbox-2__value::before {
    background: #df0024;
    border-color: #df0024;
}

.filters__checkbox label:has(input:disabled) {
    opacity: .45;
}

.filters__price-inputs {
    display: flex;
    gap: 8px;
}

.filters__price-inputs input {
    width: 100%;
    padding: 8px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
}

/* В подвале фильтров теперь две кнопки — «Применить» и «Сбросить».
   Раньше была одна, поэтому расстояние между ними никто не задавал
   и они слипались. */
.filters__footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}
.filters__footer .btn {
    width: 100%;
}

.filters__opener {
    display: none;
}

@media (max-width: 900px) {
    .category__wrapper { grid-template-columns: 1fr; }
}

.category__subcats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 24px;
}

.category__subcat {
    padding: 8px 16px;
}

.category__products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 1200px) {
    .category__products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .category__products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .category__products { grid-template-columns: 1fr; }
}

.category__pagination {
    margin: 24px 0;
}

/* избранное и сравнение: донорские кнопки-иконки в карточке */
.product-wishlist.is-active,
.product-compare.is-active {
    filter: none;
    opacity: 1;
}

.product-card__buttons .comparison,
.product-page__buttons .comparison {
    display: inline-block;
    line-height: 0;
}

/* модуль Comparison прячет ненужную кнопку сам, помогаем ему с рамками */
a.comparison-link {
    border-bottom: none;
}

/* таблица сравнения */
.comparison-wrapper {
    overflow-x: auto;
    margin: 24px 0 48px;
}

.comparison-table {
    border-collapse: collapse;
    min-width: 100%;
}

.comparison-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
    min-width: 200px;
}

.comparison-table .comparison-param {
    color: #848484;
    background: #fafafa;
    white-space: nowrap;
}

.comparison-table .comparison-head img {
    max-width: 160px;
    height: auto;
    border-radius: 8px;
}

.comparison-head__name {
    display: block;
    margin: 8px 0;
    font-weight: 600;
}

.comparison-corner {
    background: #fafafa;
}

/* метки товара: в app.min.css донора есть только контейнер .product-card__labels */
.product-card__label {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.2;
    color: #fff;
    background: #848484;
}

.product-card__label--sale { background: #df0024; }
.product-card__label--new  { background: #2ea44f; }
.product-card__label--top  { background: #f0a020; }

/* выбор размера упаковки (модификации msOptionsPrice2) */
.product-page__options {
    margin: 16px 0;
}

.product-page__option-name {
    display: block;
    margin-bottom: 6px;
    color: #848484;
}

.product-page__select {
    width: 100%;
    max-width: 420px;
    padding: 12px 16px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    cursor: pointer;
}

/* у донора обе кнопки стоят в один ряд; поле количества — наше дополнение,
   ставим его слева узкой колонкой, кнопки делят остаток поровну */
.product-page__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
}

.product-page__controls .btn {
    flex: 1 1 200px;
}

.product-page__count {
    flex: 0 0 88px;
    padding: 12px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    font: inherit;
    text-align: center;
}

/* подборки товаров (акции, новинки, хиты) */
.category__products .product-card {
    display: flex;
    flex-direction: column;
}

/* корзина */
.cart__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 24px 0;
}

.cart__item {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) 220px 140px 120px;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
}

.cart__image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.cart__name {
    font-weight: 600;
}

.cart__article {
    display: block;
    color: #848484;
    font-size: 14px;
}

.cart__count {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cart__count .input {
    width: 80px;
    padding: 8px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
}

.cart__price {
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap;
}

.cart__total {
    font-size: 20px;
    margin: 16px 0;
}

.cart__actions {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 40px;
}

.cart__empty {
    margin: 32px 0 64px;
}

@media (max-width: 900px) {
    .cart__item {
        grid-template-columns: 80px minmax(0, 1fr);
        grid-auto-rows: auto;
    }
}

/* оформление заказа */
.order-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 24px 0 48px;
}

.order-form__block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
}

.order-form__title {
    font-size: 20px;
    font-weight: 600;
}

.order-form__block .input input,
.order-form__block .input textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
}

.order-form__block .input input.error,
.order-form__block .input textarea.error {
    border-color: #e02b2b;
}

.order-form__footer {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.order-form__cost {
    font-size: 24px;
    font-weight: 600;
}

@media (max-width: 900px) {
    .order-form { grid-template-columns: 1fr; }
}

/* Галерея товара: слайдер инициализирует app.min.js темы донора,
   поэтому раскладку ему не навязываем — только подгоняем картинки. */
.product-page__image img,
.product-page__mimage img {
    width: 100%;
    height: auto;
    display: block;
}

.product-page__mimages {
    margin-top: 12px;
}

.product-page__mimage {
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 8px;
    overflow: hidden;
}

.product-page__mimages .swiper-slide-thumb-active .product-page__mimage,
.product-page__mimage:hover {
    border-color: #df0024;
}

/* Соцсети донора: Instagram и Facebook. В теме их не было — она рассчитана
   на vk/ok/yt, поэтому классы и иконки добавлены здесь. */
.socials__link--inst,
.socials__link--fb {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}
.socials__link--inst { background-image: url(/assets/pol/catalog/view/theme/default/frontend/app/assets/images/icons/inst.svg); }
.socials__link--fb { background-image: url(/assets/pol/catalog/view/theme/default/frontend/app/assets/images/icons/fb.svg); }

/* Логотип. У донора он не картинка, а текстовый знак «Lepnina brest»:
   в его main.css — uppercase, font-weight 700, 20px, цвет #343434.
   Повторяем те же параметры, чтобы знак выглядел как на исходном сайте. */
.pol-logo {
    display: inline-block;
    color: #343434;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
/* блоки темы были рассчитаны на картинку фиксированной ширины */
.header__logo,
.footer__logo {
    max-width: none;
    width: auto;
}
.footer__logo .pol-logo { font-size: 17px; }
@media (max-width: 767px) { .pol-logo { font-size: 16px; } }

/* Блок «О компании» был гридом в две колонки: текст и ролик прежнего магазина.
   Ролик убран, поэтому колонки схлопываем — иначе половина секции пустует. */
.about__content { grid-template-columns: 100%; -ms-grid-columns: 100%; }

/* Цена в карточке. Сброс темы жёстко задаёт кегль тегам: `a, mark, p, small,
   span { font-size: 16px }` (и 14px на ширине до 1024px). Из-за этого вложенный
   span не наследует размер родителя. Цена собрана из трёх частей — «Итого:»,
   число в отдельном span (его обновляет msOptionsPrice) и валюта, — и число
   выпадало из строки в 26px до 16px, выглядя опечаткой. Возвращаем наследование. */
.product-page__price span,
.product-page__price .msoptionsprice-cost {
    font-size: inherit;
    line-height: inherit;
}

/* Тексты раздела. В теме у .textbox нет внешних отступов — задаём сами:
   вступление отбивается от заголовка, основной текст от списка товаров. */
.category__intro { margin: 14px 0 24px; }
.category__text { margin-top: 32px; }
@media (max-width: 767px) {
    .category__intro { margin: 10px 0 16px; }
    .category__text { margin-top: 24px; }
}

/* ======================================================== МОБИЛЬНАЯ ШАПКА
   Тема на ≤1024 px прячет .header__top, .header__logo и .header__search,
   рассчитывая на отдельную мобильную вёрстку, которой нет ни у нас, ни
   у донора. Пишем свою: показываем то, что уже есть в DOM, вместо второй
   копии разметки. Классы свои, с префиксом pol-. */

.pol-mobbar { display: none; }

.pol-mobbar__btn {
    align-items: center;
    background: none;
    border: 0;
    border-radius: 8px;
    color: #231f20;
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    height: 40px;
    justify-content: center;
    padding: 0;
    width: 40px;
}
.pol-mobbar__btn svg {
    fill: none;
    height: 24px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 24px;
}
.pol-mobbar__btn:hover { background: #f2f3f4; }
.pol-mobbar__btn[aria-expanded="true"] { background: #f2f3f4; color: #e31a0b; }

@media (max-width: 1024px) {
    .pol-mobbar { display: flex; gap: 4px; }

    /* тема прячет их безусловно — возвращаем с большей специфичностью */
    .header .header__logo { display: flex; max-width: none; width: auto; }

    .header__bottom .header__container {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
    }
    .header__bottom .header__container > * { min-width: 0; }
    .pol-mobbar--left { order: 1; }
    .header .header__logo { order: 2; margin-right: auto; }
    .pol-mobbar--right { order: 3; }
    /* избранное и сравнение: без явного order улетают в начало строки,
       потому что по умолчанию order:0, а у остальных он задан */
    .header__bottom .header__buttons { order: 4; }
    /* «Каталог» уходит на свою строку во всю ширину */
    .header__bottom .header__catalog { order: 5; width: 100%; }
    .header__bottom .header-catalog__button {
        box-sizing: border-box;
        width: 100%;
    }

    /* поиск и меню раскрываются кнопками, а не висят всегда */
    .header .header__search { display: none; order: 6; width: 100%; }
    body.pol-search-open .header .header__search { display: block; }

    /* .header__top лежит в разметке выше .header__bottom, поэтому раскрытое
       меню вылезало НАД логотипом. Переставляем колонки местами: панель
       должна падать из-под кнопки, а не выталкивать шапку вниз. */
    .header {
        display: flex;
        flex-direction: column;
    }
    .header .header__bottom { order: 1; }
    .header .header__top { display: none; order: 2; }
    body.pol-menu-open .header .header__top { display: block; }
    /* меню темы — флекс-строка на .header__menu > ul; на узком экране
       разворачиваем его в столбик */
    body.pol-menu-open .header__menu > ul {
        align-items: stretch;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 4px 0 8px;
    }
    body.pol-menu-open .header__menu > ul > li {
        border-bottom: 1px solid #e6e7e8;
        font-size: 16px;
        line-height: 22px;
    }
    body.pol-menu-open .header__menu > ul > li:last-child { border-bottom: 0; }
    body.pol-menu-open .header__menu > ul > li > a {
        display: block;
        padding: 12px 0;
    }
    /* кнопка «Еще» сворачивает лишние пункты — в столбике она не нужна */
    body.pol-menu-open .header__menu-more { display: none; }
    /* внутри .header__top своя сетка на десктоп — на узком экране в столбик */
    body.pol-menu-open .header__top .header__container {
        display: block;
    }
}

/* ==================================================== МОБИЛЬНЫЙ КАТАЛОГ
   Скрипт темы выбирает ветку по window.innerWidth >= 996 в момент загрузки.
   Ниже 996 он ищет блок .header-catalog-mobile — разметки под него нет ни
   у нас, ни у донора, поэтому кнопка «Каталог» на телефоне просто мертва.
   А если окно было широким при загрузке и его сузили, остаётся десктопная
   ветка: две колонки с обрезанными подписями и горизонтальной прокруткой.

   Второй разметки не делаем: раскрываем тот же список категорий, но
   аккордеоном. Видимость завязана на класс body, а не на innerWidth,
   поэтому изменение ширины окна ничего не ломает. */

/* Стрелку раскрытия pol.js вешает на все разделы с вложенными категориями,
   независимо от ширины. На десктопе она не нужна и добавляла лишнюю высоту
   пункту — прячем по умолчанию, показываем только в аккордеоне. */
.pol-cat-toggle { display: none; }

@media (max-width: 995px) {
    /* панель темы — фиксированный тёмный оверлей на весь экран; на узком
       экране он не нужен, кладём список прямо под кнопку */
    .header-catalog__body {
        background: #fff;
        height: auto;
        position: static;
        width: auto;
    }
    .header-catalog__body[hidden] { display: none; }
    body.pol-catalog-open .header-catalog__body { display: block; }

    .header-catalog__box {
        border-radius: 0;
        box-shadow: none;
        height: auto;
    }
    .header-catalog__container {
        height: auto;
        overflow: visible;
        padding: 4px 0 8px;
    }

    /* вертикальная линия между колонками — это :before контейнера,
       в одну колонку она не нужна */
    .header-catalog__container:before { display: none; }
    .header-catalog__categories {
        display: block;
        max-height: 70vh;
        overflow-y: auto;
        width: 100%;
    }
    .header-catalog__category {
        border-bottom: 1px solid #e6e7e8;
        border-radius: 0;
        padding: 0;
        position: relative;
    }
    .header-catalog__categories > li:last-child { border-bottom: 0; }
    .header-catalog__category > a {
        display: block;
        font-size: 16px;
        line-height: 22px;
        padding: 12px 48px 12px 0;
    }

    /* стрелка раскрытия: её ставит pol.js только там, где есть вложенные */
    .pol-cat-toggle {
        align-items: center;
        background: none;
        border: 0;
        color: #545556;
        cursor: pointer;
        display: flex;
        height: 46px;
        justify-content: center;
        padding: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 46px;
    }
    .pol-cat-toggle svg {
        fill: none;
        height: 18px;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
        transition: transform .2s;
        width: 18px;
    }
    .header-catalog__category.pol-open .pol-cat-toggle svg { transform: rotate(180deg); }

    /* правая колонка десктопа становится вложенным списком */
    .header-catalog__info { display: none; }
    .header-catalog__category.pol-open .header-catalog__info { display: block; }
    /* на десктопе панель подкатегорий позиционирована абсолютно — она висит
       в правой колонке. В аккордеоне это значит, что список выпадает из потока
       и прячется под следующими пунктами. Возвращаем в поток. */
    .header-catalog__info {
        height: auto;
        left: auto;
        padding: 0;
        position: static;
        top: auto;
        width: auto;
    }
    .header-catalog__left {
        display: block;
        padding: 0;
        width: 100%;
    }
    /* имя раздела внутри панели дублирует строку выше */
    .header-catalog__name { display: none; }
    /* тема раскладывает подкатегории в две колонки (column-count: 2) —
       на телефоне названия рвутся по словам, нужна одна */
    .header-catalog__links {
        column-count: 1;
        display: block;
        margin-top: 0;
        padding-bottom: 8px;
    }
    .header-catalog__link a {
        color: #545556;
        display: block;
        padding: 8px 0 8px 16px;
    }
}

/* Плитки разделов. Тема растягивает картинку правилом .catalog__image img,
   но сам блок — flex-контейнер, а прямой ребёнок в нём <picture>, а не <img>.
   Поэтому ширина 100% считалась от инлайнового <picture> и картинка
   оставалась в натуральную величину — крошечное превью посреди серого поля. */
.catalog__image {
    align-items: center;
    /* фон не задаём: сквозь него виден серый фон самой плитки, иначе
       белый прямоугольник разрывает карточку — у фотографий товаров
       фон бывает и белым, и цветным, и тёмным */
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}
.catalog__image picture {
    display: block;
    height: 100%;
    width: 100%;
}
.catalog__image img {
    display: block;
    height: 100%;
    /* contain, а не cover: на фото лепнины подписаны размеры, обрезать нельзя */
    object-fit: contain;
    padding: 12px;
    width: 100%;
}

/* Переключатель «Все параметры / Различающиеся».
   Строки с одинаковыми значениями скрыты правилом .comparison-table .same
   в css компонента. Компонент показывал их через jQuery .show(), но его
   jQuery 1.10.2 подставляет для <tr> display:block — строка перестаёт быть
   строкой таблицы, ячейки съезжают влево. В default.js переключение
   переведено на класс таблицы, а показ описан здесь — с правильным
   display для строки. */
.comparison-table.show-all-params .same {
    display: table-row;
}

/* Надпись-разделитель в меню «Каталог»: отбивает страницы марок
   от разделов по типу изделия. Это не пункт меню — ссылки нет
   намеренно, вести ей некуда.

   Список у темы — flex-колонка с align-items:flex-start, поэтому
   ширину задаём явно, иначе линия обрежется по длине слова.
   Отступ сверху больше, чем снизу: надпись принадлежит нижней группе. */
.header-catalog__divider {
    border-top: 1px solid #e9edf1;
    color: #a0a0a0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    margin-top: 16px;
    padding: 16px 8px 4px;
    text-transform: uppercase;
    width: 100%;
}

/* === калькулятор количества === */
/* Калькулятор количества на странице товара.
   Поля, кнопки и типографика — от темы, здесь только раскладка блока. */
.calc{--calc-line:#e3e3e3;--calc-muted:#8a8a8a;margin:16px 0 0;padding:16px;
  border:1px solid var(--calc-line);border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.calc *,.calc *::before,.calc *::after{box-sizing:border-box}
.calc__title{display:block;font-weight:600;font-size:15px}
.calc__hint{display:block;margin:2px 0 12px;color:var(--calc-muted);font-size:13px}
.calc__label{display:block;margin-bottom:4px;font-size:12px;color:var(--calc-muted)}
.calc__label--modes{margin-top:12px}
.calc__row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.calc__field{flex:1 1 110px;min-width:96px}
.calc__field .input{width:100%}
/* тема красит подсказку почти чёрным, и «5», «4», «20» читаются как уже
   введённые числа — посетитель ждёт результата, которого не будет */
.calc__field .input::placeholder{color:#b8b8b8;opacity:1}
.calc__or{color:#b0b0b0;font-size:12px;padding-bottom:10px}
.calc__modes{display:flex;gap:6px;flex-wrap:wrap}
.calc__mode{flex:1 1 auto;position:relative}
.calc__mode input{position:absolute;opacity:0;pointer-events:none}
.calc__mode span{display:block;padding:7px 10px;border:1px solid #dcdcdc;border-radius:6px;
  background:#fff;font-size:13px;text-align:center;cursor:pointer;white-space:nowrap}
.calc__mode input:checked+span{border-color:#111;background:#111;color:#fff}
.calc__mode input:focus-visible+span{outline:2px solid #111;outline-offset:2px}
.calc__result{margin-top:14px;padding:14px;border-radius:8px;background:#f5f5f5}
.calc__headline{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.calc__big{font-size:30px;font-weight:700;line-height:1}
.calc__big small{font-size:14px;font-weight:600;color:var(--calc-muted);margin-left:6px}
.calc__sum{font-size:18px;font-weight:600;white-space:nowrap}
.calc__details{margin-top:10px;padding-top:10px;border-top:1px solid #e6e6e6}
.calc__line{display:flex;justify-content:space-between;gap:12px;padding:2px 0;font-size:13px;color:#666}
.calc__note{margin-top:8px;color:var(--calc-muted);font-size:12px;line-height:1.45}
.calc__apply{display:block;width:100%;margin-top:12px;padding:12px 16px;border:1px solid #111;
  border-radius:6px;background:#fff;color:#111;font:inherit;font-weight:600;cursor:pointer}
.calc__apply:hover{background:#111;color:#fff}
.calc__empty{color:var(--calc-muted);font-size:13px}
@media (max-width:560px){
  .calc__field{flex:1 1 100%}
  .calc__or{display:none}
  .calc__mode{flex:1 1 100%}
  .calc__big{font-size:26px}
}
/* === /калькулятор === */

/* === управление галереей === */
/* Управление галереей товара: стрелки главного фото, счётчик кадров
   и прокрутка ленты миниатюр. Сам слайдер — Swiper из темы донора. */
.product-page__images{position:relative}
/* фирменный красный темы — #df0024, тот же, что у кнопки «Заказать звонок» */
.pol-gallery__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border:1px solid #df0024;border-radius:50%;background:#fff;
  cursor:pointer;opacity:0;transition:opacity .15s,background .15s,box-shadow .15s;
  box-shadow:0 1px 3px rgba(0,0,0,.08)}
.product-page__images:hover .pol-gallery__nav{opacity:1}
.pol-gallery__nav:hover{background:#df0024;box-shadow:0 2px 8px rgba(223,0,36,.28)}
.pol-gallery__nav::before{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;
  border-left:2px solid #df0024;border-bottom:2px solid #df0024;transition:border-color .15s}
.pol-gallery__nav:hover::before{border-color:#fff}
.pol-gallery__nav--prev{left:8px}
.pol-gallery__nav--prev::before{transform:translate(-30%,-50%) rotate(45deg)}
.pol-gallery__nav--next{right:8px}
.pol-gallery__nav--next::before{transform:translate(-70%,-50%) rotate(-135deg)}
.pol-gallery__counter{position:absolute;right:12px;bottom:12px;z-index:3;
  padding:3px 9px;border-radius:12px;background:rgba(17,17,17,.62);color:#fff;font-size:12px}

.pol-thumbs--scroll{position:relative;padding:0 30px}
.pol-thumbs__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:24px;height:44px;border:0;background:none;cursor:pointer}
.pol-thumbs__nav::before{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;
  border-left:2px solid #df0024;border-bottom:2px solid #df0024}
.pol-thumbs__nav--prev{left:0}
.pol-thumbs__nav--prev::before{transform:translate(-30%,-50%) rotate(45deg)}
.pol-thumbs__nav--next{right:0}
.pol-thumbs__nav--next::before{transform:translate(-70%,-50%) rotate(-135deg)}
.pol-thumbs__nav[disabled]{opacity:.25;cursor:default}

/* на узком экране стрелки главного фото держим видимыми: наведения нет */
@media (hover:none){
  .pol-gallery__nav{opacity:1}
}
/* === /галерея === */

/* === сертификаты === */
/* Сертификаты на карточке товара. Документ открывается в новой вкладке:
   лайтбокса в теме нет, свой ради девяти картинок заводить незачем. */
.certs{display:flex;flex-wrap:wrap;gap:18px;margin-top:8px}
.certs__item{width:176px;margin:0}
.certs__link{display:block;border:1px solid #e3e3e3;border-radius:8px;overflow:hidden;background:#fff}
.certs__link:hover{border-color:#df0024}
.certs__link img{display:block;width:100%;height:auto}
.certs__caption{margin-top:6px;font-size:12px;line-height:1.35;color:#555}
.certs__links{margin-top:4px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 7px}
.certs__pages-label{font-size:12px;color:#8a8a8a;white-space:nowrap}
.certs__page,.certs__pdf{font-size:12px;color:#df0024;text-decoration:underline;white-space:nowrap}
.certs__pdf{margin-left:4px}
.certs__note{margin-top:14px;font-size:12px;color:#8a8a8a}
@media (max-width:560px){
  .certs{gap:12px}
  .certs__item{width:calc(50% - 6px)}
}
/* === /сертификаты === */

/* === мобильный каталог: раскрытие только по стрелке === */
/* Тема показывает панель подразделов по `:hover` и по классу `active`:

       .header-catalog__category.active .header-catalog__info,
       .header-catalog__category:hover .header-catalog__info { display: flex }

   На тач-экране тап вызывает mouseenter — класс появляется, а mouseleave
   не приходит вовсе, и раскрытый раздел уже не закрыть: у правила темы
   вес выше, чем у нашего `.header-catalog__info { display: none }`.

   На узких экранах отключаем оба источника и оставляем один — нашу
   стрелку с классом `pol-open`. Правило идёт после, вес тот же. */
@media (max-width: 995px) {
    .header-catalog__category.active .header-catalog__info,
    .header-catalog__category:hover .header-catalog__info { display: none; }
    .header-catalog__category.pol-open .header-catalog__info { display: block; }
}
/* === /мобильный каталог === */

/* === лента вкладок карточки === */
/* У темы стоит `.product-detail__togglers { overflow-y: auto }`. Для
   горизонтального ряда это включает прокрутку по обеим осям — по правилу
   CSS, если одна ось не `visible`, вторая тоже перестаёт ею быть. На узком
   экране вкладки не помещаются и листаются, но браузер рисует системную
   полосу: на Windows она толстая, с кнопками, и лезет в глаза прямо под
   вкладками.

   Прокрутку оставляем — иначе пятая вкладка «Сертификаты» на узком экране
   недостижима, — а полосу прячем. Что лента листается, подсказывает
   затенение у правого края; класс вешает pol.js только когда листать
   действительно есть что. */
.product-detail__togglers {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* старый Edge */
}
.product-detail__togglers::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.product-detail__togglers.pol-tabs-scroll {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
/* === /лента вкладок === */

/* === документы товара === */
/* Документы товара: чертёж и инструкция. Строки, а не плитки — файлов
   один-два, карточки под них выглядели бы вторым калькулятором.
   Размер файла показываем рядом: клик по ссылке на телефоне не должен
   оборачиваться неожиданной загрузкой на два мегабайта. */
.docs{margin:16px 0 0;padding:14px 16px;border:1px solid #e3e3e3;border-radius:10px;background:#fff}
.docs__title{display:block;font-weight:600;font-size:15px;margin-bottom:10px}
.docs__item{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid #f0f0f0;
  color:#111;text-decoration:none}
.docs__item:first-of-type{border-top:0}
.docs__item:hover .docs__name{color:#df0024}
.docs__icon{flex:none;width:30px;height:34px;border:1px solid #df0024;border-radius:4px;
  display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#df0024}
.docs__name{flex:1 1 auto;font-size:14px;line-height:1.3}
.docs__name small{display:block;color:#8a8a8a;font-size:12px;margin-top:2px}
.docs__size{flex:none;color:#8a8a8a;font-size:12px;white-space:nowrap}
/* === /документы === */

/* === пустая страница отзывов === */
/* Пустая страница отзывов. Не «ошибка» и не пустота: коротко говорим,
   что своих отзывов не держим, и ведём туда, где они настоящие. */
.reviews-page__empty{max-width:640px;color:#555;font-size:15px;line-height:1.6}
.reviews-page__empty p{margin:0 0 10px}
.reviews-page__empty a{color:#df0024}
/* === /пустая страница отзывов === */

/* === преимущества на главной === */
/* Полоса прокрутки под преимуществами. Тема прячет её свойствами старого
   IE (`scrollbar-face-color`), которых нет ни в одном нынешнем браузере,
   и на Windows под карточками висит толстая системная полоса со стрелками.
   Прокрутку оставляем — иначе четвёртая карточка недостижима, — а полосу
   убираем и добавляем докрутку по карточкам. */
@media screen and (max-width: 1024px) {
    .advantages__list {
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* старый Edge */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .advantages__list::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }
    .advantages__item {
        scroll-snap-align: start;
    }
}
/* === /преимущества === */

/* === страница 404 === */
/* Страница 404. Не пугаем и не шутим: крупный код, одна фраза по делу,
   поиск и разделы каталога — то, за чем человек пришёл. */
.notfound{padding:48px 0 72px}
.notfound__inner{max-width:720px;margin:0 auto;text-align:center}
.notfound__code{font-size:96px;line-height:1;font-weight:700;color:#df0024;letter-spacing:-2px}
.notfound__title{margin:12px 0 14px}
.notfound__text{color:#545556;font-size:16px;line-height:1.55;margin:0 0 26px}
.notfound__search{position:relative;max-width:520px;margin:0 auto 26px}
.notfound__input{width:100%;height:52px;padding:0 56px 0 18px;border:1px solid #d9d9d9;border-radius:10px;font-size:16px;background:#fff;box-sizing:border-box}
.notfound__input:focus{outline:none;border-color:#df0024}
.notfound__submit{position:absolute;right:6px;top:6px;width:40px;height:40px;border:0;border-radius:8px;background:#df0024 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/20px no-repeat;cursor:pointer}
.notfound__links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;margin:0 0 30px}
.notfound__link{display:inline-block;padding:8px 14px;border:1px solid #e3e3e3;border-radius:20px;color:#111;text-decoration:none;font-size:14px}
.notfound__link:hover{border-color:#df0024;color:#df0024}
.notfound__actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 26px}
.notfound__phone{color:#111;font-size:18px;font-weight:600;text-decoration:none}
@media (max-width:640px){.notfound{padding:28px 0 48px}.notfound__code{font-size:72px}}
/* === /страница 404 === */

/* === видео в статье === */
/* Видео YouTube в статье: обложка 16:9 с кнопкой, iframe появляется по клику.
   Кнопка — как у донора на примере: белый круг, красный треугольник. */
.video{position:relative;aspect-ratio:16/9;margin:0 0 24px;border-radius:12px;overflow:hidden;background:#111}
.video__poster{width:100%;height:100%;object-fit:cover;display:block;margin:0}
.video__play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border:0;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.35);transition:transform .15s}
.video__play::after{content:"";position:absolute;left:29px;top:22px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #df0024}
.video__play:hover{transform:scale(1.08)}
.video--playing iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:640px){.video{border-radius:8px}.video__play{width:56px;height:56px;margin:-28px 0 0 -28px}.video__play::after{left:22px;top:17px;border-width:11px 0 11px 17px}}
/* === /видео в статье === */

/* === цена по запросу === */
.product-card__price--request,.product-page__price--request{font-weight:500;color:#545556;font-size:.95em}
/* === /цена по запросу === */

/* === размеры под названием === */
.pol-dims{display:flex;align-items:center;gap:6px 22px;flex-wrap:wrap;margin:0 0 18px;padding:12px 18px;
  border:1px solid #d3dbe3;border-radius:16px;background:#fff}
.pol-dims__icon{width:52px;height:52px;object-fit:contain;flex:none;margin-right:4px}
.pol-dims__item{display:flex;flex-direction:column;min-width:86px}
.pol-dims__value{font-size:22px;line-height:26px;font-weight:600;color:#231f20}
.pol-dims__label{font-size:12px;line-height:16px;color:#848484}
@media (max-width:767px){.pol-dims{gap:6px 16px;padding:10px 14px}.pol-dims__value{font-size:18px;line-height:22px}.pol-dims__item{min-width:72px}}
/* === /размеры === */

/* === другие исполнения === */
.pol-variants-wide{margin:8px 0 28px;padding-top:24px;border-top:1px solid #eaedf0}
.pol-variants__title{display:block;font-size:22px;line-height:28px;font-weight:500;color:#231f20;margin-bottom:14px}
.pol-variants__title em{font-style:normal;color:#848484;font-weight:400}
.pol-variants__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px 12px}
.pol-swatch{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:#545556;min-width:0}
.pol-swatch img,.pol-swatch__empty{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;border:1px solid #d3dbe3;box-sizing:border-box;background:#f2f4f6;transition:border-color .2s}
a.pol-swatch:hover img{border-color:#231f20}
.pol-swatch--current img{border:2px solid #231f20}
.pol-swatch small{font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pol-swatch--current small{color:#231f20;font-weight:600}
@media (max-width:767px){.pol-variants__grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px 8px}.pol-variants__title{font-size:18px;line-height:24px}}
/* === /исполнения === */

/* === для монтажа понадобится === */
.pol-kit__hint{font-size:12px;line-height:16px;color:#38b036;list-style:none;text-align:center;margin:0 0 4px}
/* === /для монтажа === */

/* === монтаж за пять шагов === */
.pol-steps__list{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.pol-steps__list li{position:relative;background:#f2f4f6;border-radius:14px;padding:14px;font-size:14px;line-height:20px;color:#545556}
.pol-steps__list li::before{counter-increment:s;content:counter(s);display:block;width:28px;height:28px;border-radius:50%;background:#231f20;color:#fff;font-weight:600;font-size:14px;text-align:center;line-height:28px;margin-bottom:8px}
.pol-steps__list b{display:block;color:#231f20;font-weight:500;margin-bottom:4px}
.pol-steps__note{margin:12px 0 0;font-size:13px;line-height:18px;color:#848484}
@media (max-width:1023px){.pol-steps__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.pol-steps__list{grid-template-columns:1fr}}
/* === /монтаж === */

/* === другие в серии === */
.pol-series__hint{font-size:12px;line-height:16px;color:#848484;list-style:none;text-align:center;margin:0 0 4px}
/* === /серия === */

/* === фильтр на телефоне === */
@media (max-width:768px){
  .filters__opener{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;margin:0 0 16px;padding:12px 16px 12px 48px;
    font:inherit;font-size:16px;font-weight:500;color:#231f20;background:#fff;border:0;border-radius:12px;box-shadow:inset 0 0 0 1.5px #d3dbe3;cursor:pointer}
  .filters__count{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#df0024;color:#fff;font-size:12px;line-height:20px;text-align:center}
  .filters__count[hidden]{display:none}
  .filters{display:block}
  .filters .filters__box{border:0;border-radius:0;padding:16px 16px 96px}
  .filters__box.active{display:flex;z-index:1000}
  .filters__header{position:sticky;top:-16px;z-index:2;background:#fff;margin:-16px -16px 8px;padding:16px;border-bottom:1px solid #eaedf0;display:flex;justify-content:space-between;align-items:center}
  .filters__close{display:block;width:40px;height:40px;border:0;cursor:pointer;
    background:url(/assets/pol/catalog/view/theme/default/frontend/app/assets/images/icons/close.svg) 50% no-repeat}
  .filters__box.active .filters__footer{position:fixed;left:0;right:0;bottom:0;z-index:1001;margin:0;padding:12px 16px;background:#fff;
    box-shadow:0 -4px 16px rgba(35,31,32,.08);flex-direction:row}
  .filters__footer .btn{flex:1}
  body.pol-filters-open{overflow:hidden}
}
@media (min-width:769px){.filters__close{display:none}}
/* === /фильтр на телефоне === */

/* === подвал: оферта === */
.footer__offer{margin:24px 0 0;padding:16px 0 24px;border-top:1px solid rgba(132,132,132,.25);font-size:12px;line-height:18px;color:#848484}
/* === /оферта === */

/* === ярлыки мессенджеров у телефона (11.10.2026) === */
.header__info{align-items:center;gap:12px}
.header__phone-messengers{order:2}
.messengers__link{transition:transform .15s}
.messengers__link:hover{transform:scale(1.1)}
/* === /мессенджеры === */

/* === каталоги для скачивания (11.10.2026) === */
.pol-docs{padding-bottom:40px}
.pol-docs__brand{margin-top:40px}
.textbox .pol-docs__title{margin:0 0 20px}
.pol-docs__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}
.textbox .pol-docs__card{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:#f5f5f5;color:inherit;text-decoration:none}
.pol-docs__cover{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:#fff}
.textbox .pol-docs__cover img{width:100%;height:100%;margin:0;object-fit:contain}
.pol-docs__ph{font-weight:700;color:#848484}
.pol-docs__size{font-size:13px;color:#848484}
.pol-docs__btn{margin-top:auto;text-align:center}
.textbox .pol-docs__sub{margin:28px 0 12px}
.textbox .pol-docs__list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.textbox .pol-docs__list li{margin:0;padding:0}
.textbox .pol-docs__list li::before{content:none}
@media (max-width:575px){.pol-docs__grid{grid-template-columns:repeat(2,1fr);gap:12px}}
/* === /каталоги === */

/* === вкладка «Каталог» в карточке товара — ссылка, вес как у кнопок-вкладок (замер: 500 против 400 у <a>) === */
a.product-detail__toggler{font-weight:500}

/* ============================== МОБИЛЬНАЯ ШАПКА И МЕНЮ — ВАРИАНТ A (19.10.2026)
   Одобрено по макету _design/mob-menus-mockup.html. */
@media (max-width: 1024px) {
    /* «Избранное» и «Сравнение» — в строке с «Каталогом», а не отдельной строкой:
       «Каталог» занимает строку за вычетом места под две кнопки (2×44 + gap) */
    .header__bottom .header__buttons { order: 6; }
    .header__bottom .header__catalog { order: 5; flex: 1 1 calc(100% - 108px); width: auto; }

    /* тема тянет полосу преимуществ на 100vw — это ширина окна С полосой прокрутки,
       страница становилась шире экрана (прокрутка вбок). Растягиваем отступами */
    .advantages__box { width: auto; margin-left: -16px; margin-right: -16px; -webkit-transform: none; transform: none; }

    /* меню (три полоски) — панелью поверх страницы от низа шапки до низа экрана;
       --pol-hb (низ шапки) ставит pol.js */
    body.pol-menu-open .header .header__top {
        background: #fff;
        bottom: 0;
        box-sizing: border-box;
        left: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 0 24px;
        position: fixed;
        right: 0;
        top: var(--pol-hb, 110px);
        z-index: 150;
        -webkit-overflow-scrolling: touch;
    }
    body.pol-menu-open .header__top .header__info { flex-wrap: wrap; justify-content: flex-start; row-gap: 10px; }
    .header__top .header__phone a, .header__phone-box a { white-space: nowrap; }
    /* под открытой панелью страница не прокручивается */
    body.pol-menu-open { overflow: hidden; }
}
@media (max-width: 995px) {
    /* каталог — тоже панелью; список целиком, без своей прокрутки внутри (было 70vh) */
    body.pol-catalog-open .header-catalog__body {
        background: #fff;
        bottom: 0;
        box-sizing: border-box;
        left: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 16px 24px;
        position: fixed;
        right: 0;
        top: var(--pol-hb, 110px);
        z-index: 150;
        -webkit-overflow-scrolling: touch;
    }
    body.pol-catalog-open .header-catalog__body .container { padding: 0; }
    body.pol-catalog-open .header-catalog__categories { max-height: none; overflow: visible; }
    body.pol-catalog-open { overflow: hidden; }
}
/* телефон в подвале — одной строкой; значки мессенджеров уходят ниже, если не помещаются */
.footer__contacts-phones a { white-space: nowrap; }
.footer__contacts-wrap { flex-wrap: wrap; row-gap: 8px; }
/* === /мобильная шапка вариант A === */

/* === CLS: слайдеры до запуска — та же раскладка, что после (21.10.2026) ===
   Пока Swiper не запущен (нет .swiper-initialized), слайды стоят в ряд
   и сжимаются (галерея карточки — 6 фото по 119 px) или переносятся (ленты
   товаров — в 3 ряда), а после запуска раскрываются — всё ниже прыгает:
   CLS 0,16 на главной (телефон) и 0,2 в карточке. Ширины и отступы сняты
   замером после запуска; брейкпоинты — как в настройках слайдеров темы
   (по ширине окна). После запуска размеры ставит сам Swiper, правила молчат. */
.offer__slider:not(.swiper-initialized) > .swiper-wrapper,
.product-listing .swiper:not(.swiper-initialized) > .swiper-wrapper,
.latests .swiper:not(.swiper-initialized) > .swiper-wrapper,
.product-page__images .swiper:not(.swiper-initialized) > .swiper-wrapper,
.product-page__mimages .swiper:not(.swiper-initialized) > .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}
.offer__slider:not(.swiper-initialized) > .swiper-wrapper > *,
.product-listing .swiper:not(.swiper-initialized) > .swiper-wrapper > *,
.latests .swiper:not(.swiper-initialized) > .swiper-wrapper > *,
.product-page__images .swiper:not(.swiper-initialized) > .swiper-wrapper > * {
    flex-shrink: 0;
    margin-right: 10px;
    width: 100%;
}
.product-page__mimages .swiper:not(.swiper-initialized) > .swiper-wrapper > * {
    flex-shrink: 0;
    margin-right: 6px;
    width: calc((100% - 18px) / 4);
}
/* главное фото карточки — квадрат (все big 732×732): место есть до загрузки картинки */
.product-page__image img { aspect-ratio: 1 / 1; height: auto; width: 100%; }
@media (min-width: 640px) {
    .product-page__mimages .swiper:not(.swiper-initialized) > .swiper-wrapper > * { margin-right: 12px; width: calc((100% - 48px) / 5); }
}
@media (min-width: 1024px) {
    .product-listing .swiper:not(.swiper-initialized) > .swiper-wrapper > * { width: calc((100% - 20px) / 3); }
    .latests .swiper:not(.swiper-initialized) > .swiper-wrapper > * { margin-right: 12px; width: calc((100% - 12px) / 2); }
}
@media (min-width: 1218px) {
    .product-listing .swiper:not(.swiper-initialized) > .swiper-wrapper > * { margin-right: 30px; width: calc((100% - 90px) / 4); }
    .latests .swiper:not(.swiper-initialized) > .swiper-wrapper > * { margin-right: 30px; width: calc((100% - 60px) / 3); }
}
/* баннер на телефоне: под ним строка точек (отступ 24 + 3 px) — её высоту
   заранее, а пропорцию 1218/430 держит сам слайдер, а не весь блок с точками */
@media (max-width: 1024px) {
    .offer__content[style] { aspect-ratio: auto !important; }
    .offer__slider { aspect-ratio: 1218 / 430; }
    .offer__dotted { min-height: 3px; }
}
/* === /CLS === */