/* Start:/local/templates/new/components/bitrix/catalog/supplement/style.css?178941073841725*/
/* Каталог БАД (iblock supplement_products) — оформление под тему Mymedi (ps-*) */

.supplement-catalog {
    padding: 10px 0 60px;
}

.supplement-catalog__title {
    color: #103178;
    font-size: 28px;
    font-weight: 600;
    margin: 10px 0 25px;
}

/* «Хлебные крошки» на всех страницах сайта оформлены одинаково — см. блок
   «хлебные крошки» в assets/css/custom.css. */

/* ---- страницы подборок (/product/{type}/ и /product/{type}/{code}/) ---- */

/* Подпись и описание идут сразу под заголовком, а ему тема обнуляет отступы
   (.ps-categogy .ps-categogy__name — специфичнее нашего .supplement-catalog__title,
   и style.css темы идет в head позже наших стилей): отбиваем их от заголовка
   сами. Снизу отступ давать нечему — дальше .ps-categogy__content со своим
   padding-top. */
.supplement-filter__label {
    color: #9babcd;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 12px 0 0;
}

.supplement-filter__description {
    color: #5b6c8f;
    line-height: 1.6;
    margin: 14px 0 0;
    max-width: 860px;
}

/* ---- страница раздела: подразделы-«чипсы» ---- */

/* Заголовку раздела тема обнуляет отступы (.ps-categogy .ps-categogy__name —
   специфичнее нашего .supplement-catalog__title), поэтому «чипсы» упирались
   в него вплотную: отбиваем их сверху сами. */
.supplement-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 25px;
}

.supplement-chips__item {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #d9e0ee;
    border-radius: 20px;
    color: #103178;
    font-size: 13px;
    background: #fff;
    transition: all .2s ease;
}

.supplement-chips__item:hover {
    border-color: #fd8d27;
    color: #fd8d27;
}

.supplement-chips__item span {
    color: #9babcd;
    font-size: 12px;
}

/* Телефон: между «чипсами» и содержимым раздела набегало 65px — 25px своих и
   40px отступа темы у .ps-categogy__content. На экране в одну ладонь это целый
   пустой блок: оставляем один отступ, у содержимого. Селектор с .ps-categogy —
   у темы столько же классов, а её style.css идет в head после наших стилей.
   У раздела без подразделов «чипсов» нет вовсе (шаблон ничего не выводит), и
   тот же отступ отбивает содержимое от заголовка — 18px там тоже хватает. */
@media (max-width: 767.98px) {
    .supplement-chips {
        margin: 12px 0 0;
    }

    .ps-categogy.supplement-catalog .ps-categogy__content {
        padding-top: 18px;
    }
}

/* ---- карточки товаров ---- */

.supplement-grid__col {
    margin-bottom: 30px;
}

.supplement-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #f0f2f5;
    border-radius: 4px;
    padding: 15px;
    background: #fff;
    transition: box-shadow .2s ease;
}

.supplement-card:hover {
    box-shadow: 0 6px 20px rgba(16, 49, 120, .08);
}

.supplement-card .ps-product__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.supplement-card .ps-product__thumbnail figure {
    text-align: center;
    margin: 0 0 10px;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.supplement-card .ps-product__thumbnail img {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
}

.supplement-card__noimage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 160px;
    color: #d9e0ee;
    font-size: 48px;
}

.supplement-card__noimage--big {
    min-height: 320px;
    font-size: 96px;
}

.supplement-card__brand {
    color: #9babcd;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}

.supplement-card .ps-product__title {
    font-size: 15px;
    line-height: 1.35;
    margin-bottom: 8px;
}

.supplement-card .ps-product__title a {
    color: #103178;
}

.supplement-card .ps-product__title a:hover {
    color: #fd8d27;
}

.supplement-card__note {
    color: #5b6c8f;
    font-size: 13px;
    margin-bottom: 8px;
}

.supplement-card .ps-product__meta {
    margin-top: auto;
    margin-bottom: 12px;
}

.supplement-card__noprice {
    color: #9babcd;
    font-size: 14px;
}

.supplement-card__sale {
    display: inline-block;
    background: #f02b2b;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 3px;
    padding: 2px 8px;
}

.supplement-card__sale--inline {
    margin-left: 8px;
    vertical-align: middle;
}

.supplement-btn-cart {
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    border: none;
}

.supplement-btn-cart[disabled] {
    opacity: .6;
    cursor: default;
}

.supplement-empty {
    padding: 40px 0;
    color: #5b6c8f;
    font-size: 16px;
}

/* ---- страница раздела: список товаров (макет product-result.html) ---- */

.supplement-catalog .ps-categogy__name {
    color: #103178;
}

.supplement-list__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

/* Отступ как у сортировки темы (.ps-categogy__sort: 14px 0). Высоту панели он
   не меняет — она задана кнопками вида, — зато на телефоне, где счётчик и
   сортировка встают в две строки, текст не прилипает к краю серой плашки. */
.supplement-list__count {
    color: #5b6c8f;
    padding: 14px 0;
}

.supplement-list__count b {
    color: #103178;
}

/* сортировка и переключатель вида — правым краем панели */
.supplement-list__tools {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Тема прячет переключатель вида до 1280px: в макете там четыре режима, и они
   не помещаются. У нас режима два — они нужны и на планшете, и на телефоне. */
.supplement-catalog .ps-categogy__wrapper .supplement-view {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 0;
    margin-right: 0;
    border-right: none;
}

.supplement-view__btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #9babcd;
    font-size: 15px;
    cursor: pointer;
    transition: all .2s ease;
}

.supplement-view__btn:hover {
    color: #103178;
}

.supplement-view__btn.is-active {
    background: #fff;
    border-color: #d9e0ee;
    color: #103178;
}

/* Телефон: счётчик и правая группа встают в две строки, а отступы по 14px
   сверху и снизу есть у каждой из них (свой у счётчика, темы — у сортировки,
   наш — у переключателя вида), и серая плашка вырастает почти во весь экран.
   Оставляем воздух только по краям панели. */
@media (max-width: 767.98px) {
    .supplement-list__toolbar {
        gap: 0;
    }

    .supplement-list__count {
        padding: 10px 0 0;
    }

    .supplement-catalog .ps-categogy__wrapper .supplement-list__tools .ps-categogy__sort,
    .supplement-catalog .ps-categogy__wrapper .supplement-view {
        padding: 6px 0 10px;
    }

    /* Поле сортировки на телефоне обрезало значение до «Сначала де»: тема
       держит select не шире 100px. Снимаем ограничение и отдаем правой группе
       всю строку — подпись «Сортировать», за ней поле по ширине своего самого
       длинного значения, кнопки вида у правого края.
       Поле не растягиваем (flex: 0 1 auto): у растянутого стрелка уезжает к
       краю панели и отрывается от значения — свободное место должно оставаться
       между полем и кнопками, а не внутри поля. */
    .supplement-list__tools {
        flex: 1 1 100%;
        justify-content: space-between;
        gap: 8px;
    }

    .supplement-catalog .ps-categogy__wrapper .supplement-list__tools .ps-categogy__sort {
        flex: 0 1 auto;
        min-width: 0;
    }

    .supplement-catalog .ps-categogy__wrapper .ps-categogy__sort form {
        display: flex;
        align-items: center;
    }

    .supplement-catalog .ps-categogy__wrapper .ps-categogy__sort span {
        white-space: nowrap;
    }

    .supplement-catalog .ps-categogy__wrapper .ps-categogy__sort .form-select {
        flex: 0 1 auto;
        min-width: 0;
        max-width: none;
        /* Без этого свойства ширина поля равна самому длинному варианту списка
           («Сначала дешевле»), и у коротких значений между текстом и стрелкой
           остается пустое место. Где field-sizing поддерживается, поле ужимается
           по выбранному значению — стрелка идет сразу за ним. */
        field-sizing: content;
    }

    .supplement-catalog .ps-categogy__wrapper .supplement-view {
        margin-left: auto;
        gap: 4px;
    }

    /* Место для подписи и поля набираем на соседях: боковые отступы панели
       (у темы 20px) и кнопки вида на телефоне были крупнее необходимого. */
    .ps-categogy.supplement-catalog .ps-categogy__wrapper {
        padding: 0 12px;
    }

    .supplement-view__btn {
        width: 30px;
        height: 30px;
    }
}

/* Экраны уже 360px (iPhone SE и подобные): подписи, поля и кнопок в одну
   строку уже не хватает — там значение снова начинало обрезаться. Убираем
   подпись: варианты в списке и так читаются как ответ на «сортировать по…»,
   а полю остается имя в aria-label. */
@media (max-width: 359.98px) {
    .supplement-catalog .ps-categogy__wrapper .ps-categogy__sort span {
        display: none;
    }
}

/* ---- рейтинг и отзывы на карточке ---- */

.supplement-list__item .supplement-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 13px;
}

.supplement-rating__stars {
    color: #fd8d27;
    letter-spacing: 1px;
}

.supplement-rating__value {
    color: #103178;
    font-weight: 600;
}

.supplement-rating__count {
    color: #9babcd;
}

.supplement-list__item {
    border: 1px solid #f0f2f5;
    border-radius: 4px;
    background: #fff;
    margin-bottom: 20px;
    transition: box-shadow .2s ease;
}

.supplement-list__item:hover {
    box-shadow: 0 6px 20px rgba(16, 49, 120, .08);
}

.supplement-list__item .ps-product__image figure {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    margin: 0;
}

.supplement-list__item .ps-product__image img {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
}

.supplement-list__item .ps-product__title a {
    color: #103178;
}

/* Тема набирает название карточки списка полужирным
   (.ps-product--list .ps-product__title a). Названия БАДов длинные, в две-три
   строки, и жирным они читаются хуже обычного начертания. Селектор с
   .ps-product--list — стили компонента идут в head раньше style.css темы, при
   равной специфичности выиграла бы тема. */
.supplement-list__item.ps-product--list .ps-product__title a {
    font-weight: 400;
}

.supplement-list__item .ps-product__title a:hover {
    color: #fd8d27;
}

.supplement-list__item .ps-product__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

/* Строки подвала — каждая по своей высоте. В колонке flex-basis отмеряет
   высоту, поэтому доли карточки-строки (тема отдаёт подвалу 30% ширины, а
   строке кнопок — все 100%) здесь только мешали бы. */
.supplement-list__item .ps-product__footer > * {
    flex: 0 0 auto;
}

/* отступы между строками подвала задаёт его gap, отбивки темы обнуляем */
.supplement-list__item .ps-product__meta {
    margin-bottom: 0;
}

/* Колонка покупки в списке: тема отводит ей 30% карточки — этого мало на цену,
   «Быстрый просмотр», счётчик и строку покупки, поэтому 38%.
   Доли только для вида «списком»: в плитке карточка развёрнута колонкой, и
   flex-basis отмерял бы там 62/38 её высоты, а не ширины. */
@media (min-width: 768px) {
    .ps-categogy--list:not(.supplement-list--grid) .supplement-list__item .ps-product__content {
        flex: 0 0 62%;
    }

    /* Подвал растянут во всю высоту карточки, а его строки делили свободную
       высоту между собой — цена и кнопки повисали в середине колонки.
       Прижимаем содержимое подвала к низу. */
    .ps-categogy--list:not(.supplement-list--grid) .supplement-list__item .ps-product__footer {
        flex: 0 0 38%;
        justify-content: flex-end;
    }
}

/* подпись и счётчик количества — в одну строку, на узком экране переносятся;
   отбивку снизу (у темы 20px) заменил gap подвала */
.supplement-list__item .ps-product__quantity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 0;
}

.supplement-list__item .ps-product__quantity h6 {
    margin: 0;
    color: #5b6c8f;
    font-size: 13px;
}

/* Плашка скидки: тема красит .ps-badge--sale оранжевым, а скидка на товаре —
   красная (как percent-плашка карточек-плиток каталога). */
.supplement-list__item .ps-product__badge .ps-badge.ps-badge--sale {
    background-color: #f02b2b;
}

/* Название — не длиннее двух строк, дальше многоточие: длинные имена БАДов
   иначе растягивают карточку и разгоняют по высоте соседей в плитке. */
.supplement-list__item .ps-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Справочные строки под названием — «подпись: значение» (форма выпуска, страна
   производства, для кого). Зелёную галочку темы (.ps-product__desc li::before)
   убираем: это не преимущества товара, а его свойства. Каждое свойство — ровно
   одна строка, длинное значение обрезаем многоточием (целиком — в подсказке). */
.supplement-list__item .ps-product__desc li::before {
    content: none;
}

.supplement-list__item .ps-product__list li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.supplement-list__prop-label {
    color: #9babcd;
}

.supplement-list__prop-label::after {
    content: ':';
}

.supplement-list__prop-value {
    color: #5b6c8f;
    margin-left: 4px;
}

/* Покупка — последняя строка подвала: «В корзину» с подписью занимает свободное
   место, справа от неё круглая кнопка избранного. Если строки не хватает,
   сердце переносится под кнопку. */
.supplement-list__item .supplement-list__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.supplement-act {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    border: 1px solid #d9e0ee;
    border-radius: 4px;
    background: #fff;
    color: #103178;
    font-size: 15px;
    cursor: pointer;
    transition: all .2s ease;
}

.supplement-act:hover {
    border-color: #fd8d27;
    color: #fd8d27;
}

/* избранное — круглая кнопка */
.supplement-act--round {
    flex: 0 0 auto;
    border-radius: 50%;
}

/* Сердце «В избранное» — тот же чип, что на карточке товара
   (.supplement-buybox__wish, catalog.element/supplement2/style.css) и в окне
   быстрого просмотра: серый контур и серое сердце, по наведению розовеет.
   Свой цвет нужен, чтобы избранное не спорило с оранжевой корзиной рядом:
   базовый .supplement-act красит все кнопки плитки в синий, а наведение — в
   оранжевый. Правила идут после базовых, специфичность у них та же. */
.supplement-act--wish {
    border-color: #d7dde8;
    color: #8a97b1;
    font-size: 18px;
}

.supplement-act--wish:hover {
    border-color: #f5c3c7;
    color: #f5555f;
}

/* «В корзину» — «пилюля» темы (.ps-btn: border-radius 50px) */
.supplement-act--cart {
    flex: 1 1 112px;
    width: auto;
    min-width: 0;
    padding: 0 14px;
    border-radius: 50px;
    background: #fd8d27;
    border-color: #fd8d27;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
}

.supplement-act--cart:hover {
    background: #fff;
    color: #fd8d27;
}

/* «Быстрый просмотр» — своя строка над покупкой: контурная «пилюля» во всю
   ширину подвала. Действие названо словами, а не одной иконкой: круглым глазом
   рядом с корзиной его не читали. */
.supplement-act--quick {
    width: 100%;
    padding: 0 14px;
    border-radius: 50px;
    gap: 8px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
}

/* Товар уже в избранном — чип залит красным, сердце белое (класс ставит
   script.js каталога). У Linearicons сердце только контурное, залитость
   имитируем фоном круга — как на карточке товара. Правило идёт после
   :hover, поэтому наведение на отмеченный товар заливку не снимает. */
.supplement-act--wish.is-active {
    background: #f5555f;
    border-color: #f5555f;
    color: #fff;
}

.supplement-act[disabled] {
    opacity: .5;
    cursor: default;
}

/* ---- список на телефоне -------------------------------------------------
   Тема делит верх карточки списка пополам: картинка 50% и текст 50%. На
   телефоне это две узкие колонки — картинка мелкая, а в тексте название
   обрывается и строка свойства заканчивается многоточием сразу после подписи
   («Форма выпуска: Жидк…»). Ставим картинку наверх во всю ширину карточки,
   тексту отдаём следующую строку целиком и разрешаем свойствам переноситься
   по словам вместо обрезки.
   Правки только для вида «списком»: разметка у обоих видов одна, а в плитке
   свойства обязаны оставаться в одну строку, иначе высота карточек в ряду
   разъезжается. Отсюда и длина селекторов — заодно они перебивают стили темы,
   которые в head идут после стилей компонента и при равной специфичности
   выигрывают. */
@media (max-width: 767.98px) {
    .ps-categogy--list:not(.supplement-list--grid) .supplement-list__item .ps-product__content {
        flex-direction: column;
    }

    .ps-categogy--list:not(.supplement-list--grid) .supplement-list__item .ps-product__thumbnail {
        flex: 0 0 auto;
        max-width: none;
        padding: 15px 15px 0;
    }

    /* min-width: 0 — иначе строка текста не сжимается уже своего содержимого
       (длинное название бренда) и распирает карточку */
    .ps-categogy--list:not(.supplement-list--grid) .supplement-list__item .ps-product__info {
        min-width: 0;
        padding: 12px 15px;
    }

    .ps-categogy--list:not(.supplement-list--grid) .supplement-list__item .ps-product__image img {
        max-height: 220px;
    }

    /* название целиком не помещается в две строки — даём три */
    .ps-categogy--list:not(.supplement-list--grid) .supplement-list__item .ps-product__title {
        -webkit-line-clamp: 3;
        line-clamp: 3;
        margin-bottom: 10px;
    }

    .ps-categogy--list:not(.supplement-list--grid) .supplement-list__item .supplement-rating {
        margin-bottom: 8px;
    }

    /* свойства переносим по словам: в узкой колонке многоточие съедало значение */
    .ps-categogy--list:not(.supplement-list--grid) .supplement-list__item .ps-product__list li {
        white-space: normal;
    }

    /* подвал тот же, что на десктопе, но с меньшими отступами */
    .ps-categogy--list:not(.supplement-list--grid) .supplement-list__item .ps-product__footer {
        padding: 12px;
    }
}

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

.supplement-list--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

@media (min-width: 768px) {
    .supplement-list--grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.supplement-list--grid .supplement-list__item {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

/* Карточки ряда грид растягивает до одной высоты, лишнюю высоту забирает
   описание (flex-grow), а подвал прижат к нижнему краю карточки: цена и
   кнопки соседних товаров стоят на одной линии независимо от того, сколько
   у товара строк свойств.
   flex-basis сбрасываем в auto: карточка списка у темы — строка, и она делит
   её долями (.ps-product--list: 70% описанию, 30% подвалу). В плитке карточка
   развёрнута колонкой, и те же доли отмеряли высоту — подвал получал ровно 30%
   высоты карточки и печатал цену с кнопками у своего верхнего края, а не у
   нижнего края карточки. */
.supplement-list--grid .supplement-list__item .ps-product__content {
    flex: 1 1 auto;
    flex-direction: column;
    border-bottom: none;
}

.supplement-list--grid .supplement-list__item .ps-product__thumbnail {
    flex: 0 0 auto;
    padding: 15px 15px 0;
}

/* Картинки товаров разной формы: у одних высокая банка, у других широкая
   коробка (650x321 у «Prolife Pappa Reale» против 622x604 у соседа по
   разделу). Пропорции своей высотой поднимали или опускали всё, что под
   картинкой, поэтому в плитке отводим ей одну высоту на все карточки —
   картинка вписывается в неё целиком и стоит по центру (object-fit
   и flex у figure). */
.supplement-list--grid .supplement-list__item .ps-product__image figure {
    height: 160px;
    min-height: 0;
}

.supplement-list--grid .supplement-list__item .ps-product__image img {
    max-height: 100%;
}

@media (min-width: 768px) {
    .supplement-list--grid .supplement-list__item .ps-product__image figure {
        height: 180px;
    }
}

.supplement-list--grid .supplement-list__item .ps-product__info {
    padding: 15px;
}

.supplement-list--grid .supplement-list__item .ps-product__title {
    font-size: 15px;
    line-height: 1.35;
    margin-bottom: 8px;
}

/* Карточка плитки втрое уже карточки списка: подпись свойства («Страна
   производства:») занимала всю строку, а само значение обрывалось многоточием
   сразу после двоеточия. В плитке подпись убираем — остаётся одно значение
   (целиком строка по-прежнему в подсказке li). */
.supplement-list--grid .supplement-list__prop-label {
    display: none;
}

.supplement-list--grid .supplement-list__prop-value {
    margin-left: 0;
}

/* Подвал в плитке — по содержимому (flex: 0 0 auto вместо 30% высоты от темы),
   а margin-top: auto держит его у нижнего края карточки. */
.supplement-list--grid .supplement-list__item .ps-product__footer {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 0;
}

.supplement-list--grid .supplement-list__item .ps-product__price {
    font-size: 18px;
    line-height: 24px;
}

/* В плитке для счётчика нет ширины: количество выбирают в карточке товара
   или уже в корзине — как в других сетках каталога. Поле остаётся в разметке,
   поэтому «В корзину» по-прежнему кладёт одну штуку. */
.supplement-list--grid .supplement-list__item .ps-product__quantity {
    display: none;
}

/* Плитка на телефоне: карточка в половину экрана, подпись «В корзину» в неё
   не влезает — там кнопка делит строку с сердцем, поэтому оставляем одну
   иконку. Сердце фиксированной ширины, «В корзину» забирает остаток строки.
   «Быстрому просмотру» строка достаётся целиком: подпись остаётся, убираем
   только глаз, иначе он съедает её конец. */
@media (max-width: 767.98px) {
    .supplement-list--grid .supplement-list__item .supplement-list__actions {
        flex-wrap: nowrap;
        gap: 6px;
    }

    .supplement-list--grid .supplement-list__item .supplement-act--round {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
    }

    /* min-width: 0 — на самых узких экранах (320px) кнопке остаётся ~20px,
       и она должна ужиматься, а не выталкивать соседей за край карточки */
    .supplement-list--grid .supplement-list__item .supplement-act--cart {
        flex: 1 1 auto;
        height: 36px;
        min-width: 0;
        padding: 0;
    }

    .supplement-list--grid .supplement-list__item .supplement-act--cart span {
        display: none;
    }

    .supplement-list--grid .supplement-list__item .supplement-act--quick {
        height: 36px;
        padding: 0 8px;
        font-size: 13px;
    }

    .supplement-list--grid .supplement-list__item .supplement-act--quick i {
        display: none;
    }
}

/* Тема отбивает виджет сайдбара по бокам (.ps-widget--product: padding 0 15px)
   — вместе с отступами колонки это 30px до края экрана, и на телефоне узкая
   колонка теряет их зря. Правило общее для обоих виджетов сайдбара (разделы и
   фильтр), поэтому селектор по .supplement-widget; второй класс нужен, чтобы
   перебить тему — её style.css идет в head после стилей компонентов. */
.supplement-widget.ps-widget--product {
    padding: 0;
}

/* Ссылка «на уровень выше» — над списком: у разделов это родительский раздел,
   у подборок — указатель справочника либо каталог. */
.supplement-widget__up {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #103178;
    font-weight: 600;
    font-size: 15px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #f0f2f5;
}

.supplement-widget__up:hover {
    color: #fd8d27;
}

.supplement-widget__up i {
    font-size: 14px;
}

.supplement-widget__sections li {
    margin-bottom: 8px;
}

.supplement-widget__sections a {
    color: #5b6c8f;
}

.supplement-widget__sections a:hover {
    color: #fd8d27;
}

.supplement-widget__sections li.is-current > a {
    color: #103178;
    font-weight: 600;
}

.supplement-widget__sections li.is-current > a:hover {
    color: #fd8d27;
}

/* количество товаров — подпись, а не часть названия */
.supplement-widget__sections a span {
    color: #9babcd;
    font-size: 12px;
    margin-left: 4px;
}

/* Длинный список (брендов почти полсотни) свёрнут до первых пунктов, остальные
   открывает флажок — он идёт в разметке перед списком и кнопкой, поэтому
   достаёт оба соседним селектором и обходится без JS. */
.supplement-widget__more-toggle {
    display: none;
}

.supplement-widget__sections .is-extra {
    display: none;
}

.supplement-widget__more-toggle:checked ~ .supplement-widget__sections .is-extra {
    display: list-item;
}

/* Раскрытый список прокручивается внутри себя: брендов почти полсотни, во всю
   длину они увели бы фильтр далеко вниз. Высота примерно как у свёрнутого
   списка, поэтому от раскрытия страница не прыгает. Названия прижаты влево
   (счётчик идёт сразу за ними), так что тонкая полоса у правого края ничего
   не перекрывает и отступ под неё не нужен. */
.supplement-widget__more-toggle:checked ~ .supplement-widget__sections {
    max-height: 360px;
    overflow-y: auto;
    /* докрутив список до конца, не утаскиваем за собой страницу */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #d9e0ee transparent;
}

.supplement-widget__more-toggle:checked ~ .supplement-widget__sections::-webkit-scrollbar {
    width: 4px;
}

.supplement-widget__more-toggle:checked ~ .supplement-widget__sections::-webkit-scrollbar-thumb {
    background: #d9e0ee;
    border-radius: 2px;
}

.supplement-widget__more {
    display: inline-block;
    margin: 0;
    color: #fd8d27;
    font-size: 14px;
    cursor: pointer;
}

.supplement-widget__more:hover {
    color: #103178;
}

.supplement-widget__more-hide {
    display: none;
}

.supplement-widget__more-toggle:checked ~ .supplement-widget__more .supplement-widget__more-show {
    display: none;
}

.supplement-widget__more-toggle:checked ~ .supplement-widget__more .supplement-widget__more-hide {
    display: inline;
}

/* Тема разворачивает колонки раздела (row-reverse) только с 768px, поэтому на
   телефонах сайдбар оказывался под списком товаров — до фильтра и соседних
   разделов приходилось прокручивать всю выдачу. Переворачиваем колонку. */
@media (max-width: 767px) {
    .supplement-catalog .ps-categogy__content .row-reverse {
        flex-direction: column-reverse;
    }
}

/* Телефон: за кнопкой «Показать фильтр» прячется весь сайдбар — и фильтр, и
   разделы уровня. Кнопка живет внутри виджета фильтра (там же, где ее флажок),
   а виджет разделов идет в разметке перед ним: соседа сверху достает только
   :has() на колонке сайдбара. Браузер без :has() покажет разделы как раньше, а
   фильтр — по кнопке: правила фильтра сидят в его собственном style.css и от
   :has() не зависят.
   Порядок в раскрытом сайдбаре — кнопка, разделы, блоки фильтра (первый из них
   «Цена»). Кнопка и форма лежат в одном виджете, поэтому вставить разделы между
   ними порядком флекса можно, только раскрыв виджет фильтра (display: contents):
   тогда его кнопка и форма становятся такими же элементами колонки, как виджет
   разделов. Своей рамки и отступов у виджета нет — терять нечего. */
@media (max-width: 767.98px) {
    .supplement-catalog__sidebar {
        display: flex;
        flex-direction: column;
    }

    .supplement-catalog__sidebar .supplement-filter {
        display: contents;
    }

    .supplement-catalog__sidebar .supplement-filter__toggle-btn {
        order: -2;
    }

    .supplement-catalog__sidebar .supplement-widget:not(.supplement-filter) {
        order: -1;
    }

    .supplement-catalog__sidebar:has(.supplement-filter__toggle) .supplement-widget:not(.supplement-filter) {
        display: none;
    }

    .supplement-catalog__sidebar:has(.supplement-filter__toggle:checked) .supplement-widget:not(.supplement-filter) {
        display: block;
    }

    /* по шапке блока сайдбара щёлкают так же, как по стрелке (script.js) */
    .supplement-widget .ps-widget__title {
        cursor: pointer;
    }
}

/* ---- счетчик количества (список и карточка товара) ---- */

.supplement-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d9e0ee;
    border-radius: 4px;
    overflow: hidden;
}

.supplement-qty__btn {
    width: 38px;
    height: 44px;
    border: none;
    background: #f6f7fb;
    color: #103178;
    cursor: pointer;
    font-size: 12px;
}

.supplement-qty__btn:hover {
    background: #eceef5;
}

.supplement-qty__input {
    width: 52px;
    height: 44px;
    border: none;
    text-align: center;
    color: #103178;
    font-weight: 600;
    -moz-appearance: textfield;
}

.supplement-qty__input::-webkit-outer-spin-button,
.supplement-qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---- наличие ---- */

.supplement-stock {
    font-size: 13px;
    font-weight: 600;
}

.supplement-stock--in {
    color: #12a05c;
}

.supplement-stock--out {
    color: #f02b2b;
}

/* ---- пагинация ---- */

.ps-pagination .pagination li {
    list-style: none;
}

/* «Показать ещё» над номерами страниц: отбивку сверху даёт этот блок, а у самой
   листалки её убираем — кнопка и номера читаются одной группой */
.supplement-pager__more {
    padding: 30px 0 0;
    text-align: center;
}

.supplement-pager .ps-pagination {
    padding-top: 12px;
}

/* Кнопка в цветах листалки: тёмно-синий #103178 у номеров страниц, при наведении
   заливка как у активной страницы. Форму (пилюлю, отбивки) берём у .ps-btn темы,
   но её ширина — на весь блок, а здесь кнопка нужна по содержимому. Стили темы
   подключены позже, поэтому селектор с обёрткой. */
.supplement-pager .supplement-pager__link {
    display: inline-block;
    width: auto;
    min-width: 260px;
    max-width: 100%;
    background-color: #fff;
    border: 1px solid #103178;
    color: #103178;
    font-weight: bold;
}

.supplement-pager .supplement-pager__link:hover,
.supplement-pager .supplement-pager__link:focus,
.supplement-pager .supplement-pager__link:active {
    background-color: #103178;
    border-color: #103178;
    color: #fff;
}

/* ждём ответ: щелчки не проходят, подпись подменена на «Загружаем…» */
.supplement-pager .supplement-pager__link--loading {
    opacity: .6;
    pointer-events: none;
}

/* ---- уведомление о добавлении в корзину ---- */

.supplement-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10050;
    max-width: 340px;
    background: #fff;
    border: 1px solid #f0f2f5;
    border-left: 4px solid #12a05c;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(16, 49, 120, .15);
    padding: 16px 20px;
    opacity: 0;
    transform: translateY(15px);
    transition: all .25s ease;
}

.supplement-toast--visible {
    opacity: 1;
    transform: translateY(0);
}

.supplement-toast--error {
    border-left-color: #f02b2b;
}

.supplement-toast__text {
    color: #103178;
    font-size: 14px;
    margin-bottom: 10px;
}

.supplement-toast__link {
    color: #fd8d27;
    font-weight: 600;
    font-size: 14px;
}

/* Телефон: внизу справа уведомление налегло бы на панель покупки и нижнее
   меню карточки — показываем его сверху, во всю ширину, выезжающим вниз. */
@media (max-width: 767.98px) {
    .supplement-toast {
        top: 12px;
        right: 12px;
        left: 12px;
        bottom: auto;
        max-width: none;
        transform: translateY(-16px);
    }

    .supplement-toast--visible {
        transform: translateY(0);
    }
}

/* бейдж корзины в шапке */
#cart-mini .badge.supplement-badge--empty {
    display: none;
}

/* End */


/* Start:/local/components/ka/catalog.quickview/templates/.default/style.css?178941073828380*/
/* Быстрый просмотр товара.

   Файл общий для всех шаблонов, где есть карточки товара: в нем и вид самого
   окна, и вид кнопки «Быстрый просмотр» на карточке (.supplement-card__quick).
   Подключается вместе со script.js на странице, где нужны быстрые просмотры:

       Asset::getInstance()->addCss('/local/components/ka/catalog.quickview/templates/.default/style.css');
       Asset::getInstance()->addJs('/local/components/ka/catalog.quickview/templates/.default/script.js');

   Палитра и оформление — как в карточке товара
   (templates/new/components/bitrix/catalog.element/supplement2/style.css). */

/* ---- кнопка «Быстрый просмотр» на карточке-плитке ----
   Лежит поверх фотографии: на компьютере выезжает по наведению на карточку,
   на телефоне наведения нет — там кнопка видна всегда. */

.supplement-card .ps-product__thumbnail {
    position: relative;
}

.supplement-card__quick {
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid #e4e9f2;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    color: #103178;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transform: translate(-50%, 8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    box-shadow: 0 6px 18px rgba(16, 49, 120, .12);
}

.supplement-card__quick i {
    font-size: 14px;
    color: #fd8d27;
}

.supplement-card:hover .supplement-card__quick,
.supplement-card__quick:focus-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.supplement-card__quick:hover {
    border-color: #fd8d27;
    color: #fd8d27;
}

/* Тач-устройства: наведения нет — кнопка видна всегда и стоит спокойнее */
@media (hover: none), (max-width: 767.98px) {
    .supplement-card__quick {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* ---- окно ---- */

.supplement-qv-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* ниже уведомления о добавлении в корзину (.supplement-toast, 10050):
       оно должно оставаться видимым поверх открытого окна */
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 15px;
    background: rgba(16, 49, 120, .55);
    opacity: 0;
    transition: opacity .2s ease;
}

.supplement-qv-modal.is-open {
    opacity: 1;
}

/* закрытое окно скрыто атрибутом hidden, но display: flex выше перебил бы
   его — правило браузера [hidden]{display:none} слабее правила по классу */
.supplement-qv-modal[hidden] {
    display: none;
}

.supplement-qv-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 1080px;
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 28px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(16, 49, 120, .3);
    transform: translateY(12px);
    transition: transform .2s ease;
}

.supplement-qv-modal.is-open .supplement-qv-modal__dialog {
    transform: translateY(0);
}

.supplement-qv-modal__close {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 3;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #f4f6fa;
    color: #5b6c8f;
    /* Символ × сидит на математической оси шрифта — в круге он заметно
       ниже середины, и никакое выравнивание строки этого не исправляет.
       Поэтому сам символ прячем (font-size: 0), а крестик рисуем двумя
       полосками по центру кнопки — он центрован точно и не зависит от шрифта.
       В разметке × остаётся: если стили не загрузились, кнопка видна. */
    font-size: 0;
    line-height: 1;
    cursor: pointer;
}

.supplement-qv-modal__close::before,
.supplement-qv-modal__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
}

.supplement-qv-modal__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.supplement-qv-modal__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.supplement-qv-modal__close:hover {
    background: #fd8d27;
    color: #fff;
}

/* пока грузится содержимое и когда товар не открылся */
.supplement-qv__loader,
.supplement-qv__error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 180px;
    color: #5b6c8f;
    font-size: 15px;
    text-align: center;
}

.supplement-qv__spinner {
    width: 22px;
    height: 22px;
    border: 2px solid #e4e9f2;
    border-top-color: #fd8d27;
    border-radius: 50%;
    animation: supplement-qv-spin .8s linear infinite;
}

@keyframes supplement-qv-spin {
    to { transform: rotate(360deg); }
}

/* ---- три блока: галерея | характеристики | покупка ---- */

.supplement-qv__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
}

@media (min-width: 768px) {
    .supplement-qv__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    /* до 992px покупка идет во всю ширину под галереей и характеристиками */
    .supplement-qv__col--buy {
        grid-column: 1 / -1;
    }
}

@media (min-width: 992px) {
    .supplement-qv__grid {
        grid-template-columns: minmax(0, 34%) minmax(0, 1fr) 290px;
    }

    .supplement-qv__col--buy {
        grid-column: auto;
    }
}

/* ---- галерея ---- */

.supplement-qv__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    padding: 10px;
    border: 1px solid #f0f2f5;
    border-radius: 8px;
    background: #fff;
}

.supplement-qv__photo {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
}

.supplement-qv__sale {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 2px 8px;
    border-radius: 3px;
    background: #f02b2b;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.supplement-qv__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.supplement-qv__thumb {
    width: 56px;
    height: 56px;
    padding: 3px;
    border: 1px solid #eef1f6;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.supplement-qv__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.supplement-qv__thumb.is-active,
.supplement-qv__thumb:hover {
    border-color: #fd8d27;
}

.supplement-qv__noimage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    border: 1px solid #f0f2f5;
    border-radius: 8px;
    color: #d9e0ee;
    font-size: 64px;
}

/* ---- характеристики ---- */

.supplement-qv__brand {
    margin-bottom: 4px;
    color: #9babcd;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.supplement-qv__brand a {
    color: #9babcd;
}

.supplement-qv__brand a:hover {
    color: #fd8d27;
}

.supplement-qv__title {
    margin: 0 0 10px;
    padding-right: 30px;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
}

.supplement-qv__title a {
    color: #103178;
}

.supplement-qv__title a:hover {
    color: #fd8d27;
}

.supplement-qv__rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.supplement-qv__stars {
    color: #fdbe3b;
    font-size: 13px;
    letter-spacing: 1px;
}

.supplement-qv__reviews {
    color: #5b6c8f;
    font-size: 13px;
    text-decoration: underline;
}

.supplement-qv__reviews:hover {
    color: #fd8d27;
}

.supplement-qv__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.supplement-qv__stock--in {
    color: #12a05c;
    font-weight: 600;
}

.supplement-qv__stock--out {
    color: #d6474f;
    font-weight: 600;
}

.supplement-qv__article {
    color: #9babcd;
}

/* строки «подпись …… значение» — как тезисы в карточке товара */
.supplement-qv__highlights {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.supplement-qv__hl-row {
    display: flex;
    align-items: baseline;
    padding: 6px 0;
    font-size: 13.5px;
}

.supplement-qv__hl-row + .supplement-qv__hl-row {
    border-top: 1px dashed #eef1f6;
}

.supplement-qv__hl-label {
    flex: 0 0 auto;
    color: #7a869c;
    white-space: nowrap;
}

.supplement-qv__hl-leader {
    flex: 1 1 auto;
    min-width: 20px;
    margin: 0 8px 3px;
    border-bottom: 1px dotted #c3ccdb;
}

.supplement-qv__hl-value {
    flex: 0 1 auto;
    min-width: 0;
    color: #000;
    text-align: right;
    overflow-wrap: break-word;
}

/* «Активные компоненты»: перечисление в строку «подпись …… значение» не
   помещается — подпись сверху, значение под ней и не длиннее двух строк
   (за полным списком идут на страницу товара) */
.supplement-qv__hl-row--wide {
    display: block;
}

.supplement-qv__hl-row--wide .supplement-qv__hl-label {
    display: block;
    margin-bottom: 2px;
    white-space: normal;
}

.supplement-qv__hl-row--wide .supplement-qv__hl-value {
    display: block;
    text-align: left;
    line-height: 1.45;
}

/* ---- свёрнутый текст с ссылкой «показать полностью» ----
   Общий механизм для трёх мест окна: «Активные компоненты» (одна строка),
   «Предназначение» и «Показания к применению» (--rich, несколько строк). Свёрнуто — видна только часть,
   ссылка под ней; развёрнуто (.is-open) — ограничение снято, ссылка спрятана.
   Класс --clamped вешает script.js и только когда текст действительно не
   поместился: короткий раскрывать нечего. Так же устроено в карточке товара
   (supplement2, .supplement-active). */
.supplement-qv__clamp-text {
    display: block;
}

.supplement-qv__clamp--clamped .supplement-qv__clamp-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.supplement-qv__clamp--clamped.is-open .supplement-qv__clamp-text {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
}

/* Текст из визуального редактора: внутри абзацы и списки, а не одна строка, —
   line-clamp по вложенным блокам работает ненадёжно. Ограничиваем высоту:
   четыре строки при line-height 1.5. */
.supplement-qv__clamp--rich.supplement-qv__clamp--clamped .supplement-qv__clamp-text {
    display: block;
    max-height: 6em;
    overflow: hidden;
    /* последняя видимая строка растворяется — видно, что текст продолжается */
    -webkit-mask-image: linear-gradient(180deg, #000 4.4em, transparent 6em);
    mask-image: linear-gradient(180deg, #000 4.4em, transparent 6em);
}

.supplement-qv__clamp--rich.supplement-qv__clamp--clamped.is-open .supplement-qv__clamp-text {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}

.supplement-qv__clamp-more {
    display: none;
    margin-top: 4px;
    padding: 0;
    border: none;
    background: none;
    color: #fd8d27;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.supplement-qv__clamp-more:hover,
.supplement-qv__clamp-more:focus-visible {
    text-decoration: underline;
}

.supplement-qv__clamp--clamped .supplement-qv__clamp-more {
    display: block;
}

.supplement-qv__clamp--clamped.is-open .supplement-qv__clamp-more {
    display: none;
}

/* ---- предназначение и показания к применению ---- */

.supplement-qv__purposes,
.supplement-qv__indication {
    margin-top: 14px;
}

/* Текст из визуального редактора (свойства «Предназначение» и «Показания к
   применению»): обычный черный текст мелким кеглем. Разметку набирает
   редактор, и цвет с кеглем нужно задать не только блоку, но и абзацам
   внутри: у темы есть правило «p { font-size: 16px; color: #9babcd }»
   (assets/css/style.css) — оно применяется к самим абзацам, поэтому
   наследование от блока его не перебивает. line-height синхронизирован с
   max-height свёрнутого вида (см. --rich выше: 6em ≈ четыре строки). */
.supplement-qv__rich,
.supplement-qv__rich p,
.supplement-qv__rich li,
.supplement-qv__rich td,
.supplement-qv__rich th,
.supplement-qv__rich span {
    color: #000;
    font-size: 13px;
    line-height: 1.5;
}

.supplement-qv__rich p,
.supplement-qv__rich ul,
.supplement-qv__rich ol {
    margin: 0 0 8px;
}

.supplement-qv__rich p:last-child,
.supplement-qv__rich ul:last-child,
.supplement-qv__rich ol:last-child {
    margin-bottom: 0;
}

.supplement-qv__rich ul,
.supplement-qv__rich ol {
    padding-left: 18px;
}

/* «Предназначение» идет без подписи — это короткое описание товара, а вот
   «Показания к применению» без нее не прочитать: подпись отдельной строкой
   над перечислением. */
.supplement-qv__indication-title {
    display: block;
    margin-bottom: 4px;
    color: #000000;
    font-size: 13px;
    font-weight: 600;
}

/* Показания приходят перечислением: маркеры списка браузера рядом с мелким
   текстом смотрятся грубо — рисуем свои точки. Правила выиграют у списочных
   правил темы: селектор из двух классов. */
.supplement-qv__indication .supplement-qv__rich ul,
.supplement-qv__indication .supplement-qv__rich ol {
    padding-left: 0;
    list-style: none;
}

.supplement-qv__indication .supplement-qv__rich li {
    position: relative;
    padding-left: 14px;
}

.supplement-qv__indication .supplement-qv__rich li + li {
    margin-top: 3px;
}

.supplement-qv__indication .supplement-qv__rich li:before {
    content: '';
    position: absolute;
    top: .6em;
    left: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fd8d27;
}

/* ---- покупка ---- */

.supplement-qv__buybox {
    padding: 18px;
    border: 1px solid #eef1f6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(16, 49, 120, .1);
}

.supplement-qv__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
}

.supplement-qv__price {
    color: #000;
    font-size: 24px;
    font-weight: 700;
}

.supplement-qv__old {
    color: #9babcd;
    font-size: 15px;
    text-decoration: line-through;
}

.supplement-qv__benefit {
    padding: 2px 8px;
    border-radius: 4px;
    background: #e7f7ee;
    color: #12a05c;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.supplement-qv__soon {
    margin-bottom: 12px;
    color: #000;
    font-size: 15px;
}

/* ряд «количество + В корзину»: делят ширину поровну */
.supplement-qv__row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.supplement-qv__row .supplement-qv__quantity {
    display: block !important;
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    margin: 0;
}

/* Выбор количества. Тема оформляет его только внутри .ps-product и
   .ps-product--detail (assets/css/style.css), а в окне такого предка нет —
   поэтому «пилюлю» с кнопками −/+ рисуем здесь сами, в том же виде. */
.supplement-qv__row .number-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 44px;
    margin-bottom: 0 !important;
    border: 1px solid #f0f2f5;
    border-radius: 40px;
    background-color: #f0f2f5;
    overflow: hidden;
}

.supplement-qv__row .number-input input[type="number"] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 50%;
    height: 100%;
    padding: 0;
    border: none;
    background-color: transparent;
    color: #103178;
    font-size: 14px;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.supplement-qv__row .number-input input[type="number"]:focus {
    outline: none;
    box-shadow: none;
}

.supplement-qv__row .number-input input[type="number"]::-webkit-inner-spin-button,
.supplement-qv__row .number-input input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.supplement-qv__row .number-input button {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 14px;
    border: none;
    background-color: transparent;
    font-size: 13px;
    cursor: pointer;
}

.supplement-qv__row .number-input button i {
    color: #5b6c8f;
    font-weight: 600;
}

.supplement-qv__row .number-input button:hover i {
    color: #fd8d27;
}

/* Кнопки покупки: селектор с родителем обязателен — у темы вид кнопок задан
   правилом «.ps-btn, button.ps-btn» (класс + тег), и одного нашего класса
   не хватило бы, чтобы перебить её кегль и отступы. */
.supplement-qv__row .supplement-qv__cart {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: auto;
    height: 44px;
    padding: 0 16px;
    border: none;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

/* ряд «сердце | Купить в 1 клик» */
.supplement-qv__oneclick-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.supplement-qv__oneclick-row .supplement-qv__oneclick {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

/* контурная кнопка акцентного цвета (в теме нет класса .ps-btn--outline) */
.supplement-qv__oneclick.ps-btn--outline,
.ps-btn.supplement-qv__oneclick.ps-btn--outline {
    background: transparent;
    border: 2px solid #fd8d27;
    color: #fd8d27;
}

.supplement-qv__oneclick.ps-btn--outline:hover {
    background: #fd8d27;
    color: #fff;
}

/* Избранное — тот же чип-сердце, что в блоке покупки карточки товара
   (supplement2, .supplement-buybox__wish): кнопка без фона и рамки, сердце в
   круге, «в избранном» — круг залит красным. */
.supplement-qv__wish {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    color: #38445c;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: color .15s ease;
}

.supplement-qv__wish:hover {
    color: #f5555f;
}

.supplement-qv__wish i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #d7dde8;
    border-radius: 50%;
    color: #8a97b1;
    font-size: 18px;
    line-height: 1;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.supplement-qv__wish:hover i {
    border-color: #f5c3c7;
    color: #f5555f;
}

.supplement-qv__wish.is-active {
    color: #f5555f;
}

.supplement-qv__wish.is-active i {
    background: #f5555f;
    border-color: #f5555f;
    color: #fff;
}

/* вариант с подписью: остаётся, когда кнопок покупки нет (цена не указана) —
   тогда сердце занимает всю ширину блока, как на детальной странице */
.supplement-qv__wish--full {
    width: 100%;
    margin-top: 12px;
}

/* метка «Нет в наличии» — «пилюля» с точкой, как в карточке товара */
.supplement-qv__out {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #fdecee;
    color: #d6474f;
    font-size: 14px;
    font-weight: 600;
}

.supplement-qv__out-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f5555f;
}

.supplement-qv__note {
    margin: 12px 0 0;
    color: #9babcd;
    font-size: 12px;
}

/* ---- форма «купить в 1 клик» ---- */

.supplement-qv__oneclick-box {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f2f5;
}

.supplement-qv__form .form-group {
    margin-bottom: 10px;
}

.supplement-qv__form .form-control {
    height: 42px;
    border: 1px solid #e4e9f2;
    border-radius: 6px;
    font-size: 14px;
}

.supplement-qv__form .supplement-qv__submit {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border: none;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
}

/* пояснение стоит над полями — как строка-лид в окнах с формами */
.supplement-qv__form-note {
    margin: 0 0 10px;
    color: #9babcd;
    font-size: 12px;
    line-height: 18px;
}

/* флажок согласия (общие стили — .geo-consent в custom.css шаблона сайта):
   в раскрывающейся форме быстрого просмотра он должен быть компактнее */
.supplement-qv__form .geo-consent {
    margin: 12px 0;
}

.supplement-qv__form .geo-consent__input {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.supplement-qv__form .geo-consent__input:checked::after {
    left: 5px;
    top: 2px;
    width: 4px;
    height: 9px;
}

.supplement-qv__form .geo-consent__text {
    font-size: 12px;
    line-height: 17px;
}

.supplement-qv__form-error,
.supplement-qv__form-success {
    display: none;
    margin-bottom: 10px;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 13px;
}

.supplement-qv__form-error {
    background: #fdecee;
    color: #d6474f;
}

.supplement-qv__form-success {
    background: #e7f7ee;
    color: #12a05c;
}

.supplement-qv__form-error.is-visible,
.supplement-qv__form-success.is-visible {
    display: block;
}

/* ---- доставка и ссылка на карточку товара ---- */

.supplement-qv__delivery {
    list-style: none;
    margin: 14px 0 0;
    padding: 14px 16px;
    border: 1px solid #eef1f6;
    border-radius: 8px;
}

.supplement-qv__delivery li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    color: #5b6c8f;
}

.supplement-qv__delivery li + li {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f4f6fa;
}

.supplement-qv__delivery i {
    flex: 0 0 auto;
    color: #fd8d27;
}

.supplement-qv__delivery-label {
    flex: 1 1 auto;
}

.supplement-qv__delivery-value {
    flex: 0 0 auto;
    color: #103178;
    font-weight: 600;
    text-align: right;
}

/* «Перейти в карточку» — кнопка под блоком доставки: контурная, в фирменном
   синем, чтобы не спорить с оранжевой «В корзину». Скругление как у кнопок
   темы (.ps-btn). */
.supplement-qv__more {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    margin-top: 14px;
    padding: 0 16px;
    border: 1px solid #103178;
    border-radius: 50px;
    background: #103178;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    transition: background-color .15s ease, color .15s ease;
}

.supplement-qv__more:hover,
.supplement-qv__more:focus {
    background: #103178;
    color: #fff;
}

/* ---- телефон ---- */

@media (max-width: 767.98px) {
    .supplement-qv-modal {
        padding: 0;
    }

    /* На телефоне окно во весь экран и прокручивается внутри себя, поэтому
       крестик в углу уезжал вместе с содержимым: пролистав вниз, покупатель
       возвращался наверх только чтобы закрыть окно. Закрепляем его — область
       прокрутки здесь сам диалог, значит достаточно position: sticky, но для
       этого кнопка должна стоять в потоке, а не быть абсолютной. Делаем диалог
       колонкой: кнопка — первая строка справа, содержимое под ней.
       Отступ сверху и sticky top равны, чтобы при закреплении кнопка не
       дёргалась: она остаётся ровно там, где стояла до прокрутки. */
    .supplement-qv-modal__dialog {
        display: flex;
        flex-direction: column;
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
        padding: 8px 15px 30px;
    }

    .supplement-qv-modal__close {
        position: sticky;
        top: 8px;
        right: auto;
        /* содержимое длиннее экрана — сжимать кнопку колонке нельзя */
        flex: none;
        align-self: flex-end;
        margin-bottom: 4px;
        /* содержимое проезжает под кнопкой — она должна оставаться читаемой */
        background: #fff;
        box-shadow: 0 4px 14px rgba(16, 49, 120, .18);
    }

    .supplement-qv-modal__body {
        flex: none;
    }

    .supplement-qv__title {
        font-size: 17px;
    }

    .supplement-qv__photo {
        max-height: 220px;
    }
}

/* пока окно открыто, страница под ним не прокручивается */
body.supplement-qv-lock {
    overflow: hidden;
}

/* End */


/* Start:/local/components/ka/catalog.wishlist/templates/.default/style.css?17894107383092*/
/* Страница избранного (компонент ka:catalog.wishlist).

   Вид плитки сюда не переносим: карточки размечены как в каталоге
   (.supplement-list--grid .supplement-list__item) и оформляются его стилями
   (components/bitrix/catalog/supplement/style.css — файл подключает страница,
   см. /wishlist/index.php). Здесь остаётся обвязка страницы: заголовок, сетка
   на широком экране, сердце-«убрать» и пустое состояние. */

/* отбивка страницы — как у раздела каталога (.supplement-catalog) */
.geo-wishlist {
	padding: 10px 0 60px;
}

/* Заголовок берёт вид у темы (.ps-categogy .ps-categogy__name), но она же
   обнуляет ему отступы, а её style.css идёт в head после стилей компонентов —
   при равной специфичности выигрывала бы тема. Поэтому отбивку до списка
   задаём двумя классами самого заголовка. */
.geo-wishlist .ps-categogy__name.geo-wishlist__title {
	margin-bottom: 25px;
}

/* Каталог показывает плитки в три колонки — там рядом сайдбар с фильтром.
   Избранное занимает всю ширину, поэтому на большом экране добавляем четвёртую
   колонку. Двух классов достаточно: у правила каталога (.supplement-list--grid)
   специфичность ниже. */
@media (min-width: 1200px) {
	.geo-wishlist .supplement-list--grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Сердце в плитке избранного не переключает отметку, а убирает товар: оно
   всегда залито (is-active, как на карточке товара), а по наведению темнеет —
   видно, что нажатие снимет товар со страницы. */
.geo-wishlist .supplement-act--wish:hover {
	background: #d6474f;
	border-color: #d6474f;
	color: #fff;
}

/* плитка убранного товара гаснет и только потом уходит из разметки */
.geo-wishlist .supplement-list__item.is-removing {
	opacity: .25;
	transition: opacity .2s ease;
	pointer-events: none;
}

/* пустое избранное */
.geo-wishlist__empty {
	max-width: 520px;
	margin: 10px auto 30px;
	padding: 40px 20px;
	text-align: center;
}

.geo-wishlist__empty-icon {
	margin-bottom: 14px;
	font-size: 46px;
	line-height: 1;
	color: #f5555f;
}

.geo-wishlist__empty-text {
	margin-bottom: 6px;
	font-size: 20px;
	font-weight: 600;
	color: #1d2b3a;
}

.geo-wishlist__empty-hint {
	margin-bottom: 22px;
	color: #5b6c8f;
}

.geo-wishlist__empty .ps-btn {
	width: auto;
	min-width: 220px;
}

/* End */
/* /local/templates/new/components/bitrix/catalog/supplement/style.css?178941073841725 */
/* /local/components/ka/catalog.quickview/templates/.default/style.css?178941073828380 */
/* /local/components/ka/catalog.wishlist/templates/.default/style.css?17894107383092 */