@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");

/* ============================================================
   1. CSS-переменные :root
   ============================================================ */
:root {
    --color-page-bg: #F4F5F7;
    --color-surface: #FFFFFF;
    --color-text-primary: #333333;
    --color-text-secondary: #777777;
    --color-text-black: #000000;
    --color-line: #E0E0E0;
    --color-line-dark: #D6D6D6;
    --color-button-primary: #000000;
    --color-button-primary-hover: #1A1A1A;
    --color-button-primary-active: #111111;
    --color-button-disabled: #BDBDBD;
    --color-filter-hover: #F0F0F0;
    --color-filter-active: #EAEAEA;
    --shadow-card-default: 0 4px 15px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
    --radius-card: 16px;
    --radius-control: 8px;
    --radius-image: 12px;
    --radius-scale: 999px;
    --container-width: 1440px;
    --container-padding-x: 32px;
    --grid-gap: 28px;
    --card-padding: 24px;
    --transition-ui: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    --catalog-font: "Manrope", "Inter", Arial, sans-serif;
}

/* ============================================================
   2. Глобальные стили страницы каталога
   Применяем ТОЛЬКО на катало­говой странице (.sort > .sort__inner > .sort__cards),
   а не на любой странице с .sort__cards (главная использует
   .sort__cards--standalone для блока «Хиты продаж» и не должна перекрашиваться).
   ============================================================ */
body:has(.sort .sort__cards),
.catalog-page {
    background-color: var(--color-page-bg);
    font-family: var(--catalog-font);
    color: var(--color-text-primary);
}

.sort,
.sort__inner,
.filter__top {
    background-color: var(--color-page-bg);
}

.catalog-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding-left: var(--container-padding-x);
    padding-right: var(--container-padding-x);
    padding-bottom: 64px;
}

/* ============================================================
   3. Скрытие большого заголовка категории (ТЗ-апдейт п.2)
   Скрываем только в контексте каталога (.sort > .sort__title и .catalog-page),
   чтобы не задеть похожие заголовки на главной/других страницах.
   ============================================================ */
.catalog-page .catalog-title,
.sort > .container .sort__title,
.sort .filter__top .sort__title,
.sort > .sort__title,
.sort h1.sort__title {
    display: none !important;
}

/* Скрытие баннера раздела (sort__showcase) — по правке от 10.04.2026 убираем полностью */
.sort__showcase,
.sort .sort__showcase,
.catalog-hero,
.catalog .sort__showcase {
    display: none !important;
}

/* ============================================================
   4. Хлебные крошки
   ============================================================ */
.catalog-breadcrumbs,
.sort .breadcrumbs,
.catalog .breadcrumbs {
    margin-top: 16px;
    margin-bottom: 16px;
    font-family: var(--catalog-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.sort .breadcrumbs .breadcrumbs__inner,
.catalog .breadcrumbs .breadcrumbs__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sort .breadcrumbs a,
.catalog .breadcrumbs a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sort .breadcrumbs a:hover,
.catalog .breadcrumbs a:hover {
    color: var(--color-text-black);
}

.sort .breadcrumbs li:last-child,
.catalog .breadcrumbs li:last-child {
    color: var(--color-text-primary);
}

/* ============================================================
   5. Панель Фильтр / Сортировка (по референсу)
   Обе кнопки — у правого края строки, вплотную друг к другу.
   ============================================================ */
.filter__top,
.js-smartfilter-root .filter__top {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
}

/* Кнопка "Закрыть" (.sort__button--mobile) на десктопе не нужна — убираем
   её насовсем. На мобильной версии при открытом фильтре всё равно остаётся
   способ закрыть фильтр через тап вне области. */
.js-smartfilter-root .sort__button--mobile,
.sort__button--mobile,
.js-smartfilter-root.is-open .sort__button--mobile {
    display: none !important;
}

/* Стили базовой кнопки фильтра — не применяем к --mobile (она скрыта) */
.catalog-filter-btn,
.js-smartfilter-root .sort__button:not(.sort__button--mobile),
.sort__button:not(.sort__button--mobile) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-line-dark) !important;
    border-radius: var(--radius-control) !important;
    font-family: var(--catalog-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: var(--color-text-black) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    transition: var(--transition-ui);
}

/* Иконка-«ползунки» слева от текста "Фильтр" — встроенный SVG через mask */
.js-smartfilter-root .sort__button.js-smartfilter-open::before,
.catalog-filter-btn::before {
    content: '';
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' x2='14' y1='4' y2='4'/%3E%3Cline x1='10' x2='3' y1='4' y2='4'/%3E%3Cline x1='21' x2='12' y1='12' y2='12'/%3E%3Cline x1='8' x2='3' y1='12' y2='12'/%3E%3Cline x1='21' x2='16' y1='20' y2='20'/%3E%3Cline x1='12' x2='3' y1='20' y2='20'/%3E%3Cline x1='14' x2='14' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='10' y2='14'/%3E%3Cline x1='16' x2='16' y1='18' y2='22'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' x2='14' y1='4' y2='4'/%3E%3Cline x1='10' x2='3' y1='4' y2='4'/%3E%3Cline x1='21' x2='12' y1='12' y2='12'/%3E%3Cline x1='8' x2='3' y1='12' y2='12'/%3E%3Cline x1='21' x2='16' y1='20' y2='20'/%3E%3Cline x1='12' x2='3' y1='20' y2='20'/%3E%3Cline x1='14' x2='14' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='10' y2='14'/%3E%3Cline x1='16' x2='16' y1='18' y2='22'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}

.catalog-filter-btn:hover,
.js-smartfilter-root .sort__button:hover,
.sort__button:hover {
    background: var(--color-filter-hover) !important;
    border-color: #BDBDBD !important;
}

.catalog-filter-btn:active,
.js-smartfilter-root .sort__button:active,
.sort__button:active,
.sort__button.active {
    background: var(--color-filter-active) !important;
    border-color: #999999 !important;
}

/* ============================================================
   5b. Сортировка — кастомный dropdown (триггер-кнопка + меню)
   ============================================================ */
.catalog-sort {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.catalog-sort__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 220px;
    height: 44px;
    padding: 0 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-line-dark);
    border-radius: var(--radius-control);
    font-family: var(--catalog-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-text-black);
    cursor: pointer;
    transition: var(--transition-ui);
}

.catalog-sort__trigger:hover {
    background: var(--color-filter-hover);
    border-color: #BDBDBD;
}

.catalog-sort.is-open .catalog-sort__trigger {
    background: var(--color-filter-active);
    border-color: #999999;
}

.catalog-sort__label {
    color: var(--color-text-secondary);
}

.catalog-sort__value {
    color: var(--color-text-black);
    font-weight: 600;
}

.catalog-sort__chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.catalog-sort.is-open .catalog-sort__chevron {
    transform: rotate(180deg);
}

.catalog-sort__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 100%;
    padding: 6px 0;
    background: #FFFFFF;
    border-radius: var(--radius-card);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    z-index: 50;
}

.catalog-sort.is-open .catalog-sort__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.catalog-sort__option {
    display: block;
    padding: 10px 18px;
    font-family: var(--catalog-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
    white-space: nowrap;
}

.catalog-sort__option:hover {
    background: var(--color-filter-hover);
    color: var(--color-text-black);
}

.catalog-sort__option.is-active {
    background: transparent;
    color: var(--color-text-black);
    font-weight: 700;
}

/* ============================================================
   6. Сетка каталога
   ============================================================ */
.catalog-grid,
.sort__cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--grid-gap) !important;
}

/* Standalone-обёртка (главная "Хиты продаж", блок "Вам понравится"
   на странице товара) — раньше .card шли напрямую в родительский flex/grid.
   После добавления обёртки она встаёт в одну ячейку родителя, поэтому
   принудительно растягиваем её на всю ширину контейнера. */
.sort__cards--standalone {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    grid-column: 1 / -1;
    flex: 1 1 100%;
    align-self: stretch;
}

/* ============================================================
   7. Карточка товара
   ============================================================ */
.product-card,
.sort__cards .card {
    background: var(--color-surface) !important;
    border: none !important;
    border-radius: var(--radius-card) !important;
    padding: var(--card-padding) !important;
    box-shadow: var(--shadow-card-default) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    font-family: var(--catalog-font);
    color: var(--color-text-primary);
    transition: var(--transition-ui);
}

.product-card:hover,
.sort__cards .card:hover {
    box-shadow: var(--shadow-card-hover) !important;
}

/* ============================================================
   8. Служебная строка карточки (теги + рейтинг)
   ============================================================ */
.product-card__meta,
.sort__cards .card .card__filter {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    font-family: var(--catalog-font) !important;
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 500 !important;
    color: var(--color-text-secondary) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.product-card__rating,
.sort__cards .card .card__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--catalog-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--color-text-black);
    flex-shrink: 0;
}

/* ============================================================
   9. Заголовок товара
   ============================================================ */
.product-card__title,
.sort__cards .card .card__title {
    display: block !important;
    min-height: 48px !important;
    margin-bottom: 20px !important;
    font-family: var(--catalog-font) !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 700 !important;
    color: var(--color-text-black) !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.product-card__title:hover,
.sort__cards .card .card__title:hover {
    color: var(--color-text-black) !important;
    text-decoration: none !important;
}

/* ============================================================
   10. Фото товара (по референсу — квадратная зона; портретный
   пакет вписывается крупно по высоте, не теряясь на широких карточках)
   ============================================================ */
.product-card__image-wrap,
.sort__cards .card .card__image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    margin-bottom: 20px !important;
    border-radius: var(--radius-image) !important;
    overflow: hidden !important;
    background: var(--color-surface) !important;
}

.product-card__image,
.sort__cards .card .card__image img,
.sort__cards .card .card__image .product-item-image-original {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* ============================================================
   11. Описание товара
   ============================================================ */
.product-card__description,
.sort__cards .card .card__text {
    min-height: 66px !important;
    max-height: 66px !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
    font-family: var(--catalog-font) !important;
    font-size: 16px !important;
    line-height: 22px !important;
    font-weight: 400 !important;
    color: var(--color-text-black) !important;
}

/* ============================================================
   12. Шкалы вкуса (по референсу — две шкалы в ряд)
   ============================================================ */
.product-card__scales,
.sort__cards .card .card__items {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 16px !important;
    margin-bottom: 20px !important;
}

.product-scale,
.sort__cards .card .card__item {
    margin-bottom: 0 !important;
    min-width: 0 !important;
}

/* Если шкала одна — растягиваем на всю ширину карточки */
.product-card__scales > .product-scale:only-child,
.sort__cards .card .card__items > .card__item:only-child {
    grid-column: 1 / -1;
}

.product-scale__label,
.sort__cards .card .card__info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    font-family: var(--catalog-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.sort__cards .card .card__name {
    color: var(--color-text-primary);
}

.sort__cards .card .card__percent {
    color: var(--color-text-black);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.product-scale__track,
.sort__cards .card .card__line {
    width: 100% !important;
    height: 6px !important;
    background: var(--color-line) !important;
    border-radius: var(--radius-scale) !important;
    overflow: hidden !important;
}

.product-scale__fill,
.sort__cards .card .card__line > div,
.sort__cards .card .card__line div {
    height: 6px !important;
    background: var(--color-text-black) !important;
    border-radius: var(--radius-scale) !important;
}

/* ============================================================
   13. Выбор веса
   Bitrix-разметка: <li class="card__radio"><span>250г</span></li>
   Стилизуется внутренний <span>; <li> — flex-обёртка для растягивания.
   ============================================================ */
.product-card__weight,
.sort__cards .card .card__radios {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    list-style: none !important;
}

.sort__cards .card .card__radio {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
}

.product-card__weight-btn,
.sort__cards .card .card__radio span {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-line) !important;
    border-radius: var(--radius-control) !important;
    font-family: var(--catalog-font) !important;
    font-size: 14px !important;
    line-height: 14px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: var(--transition-ui);
}

.product-card__weight-btn:hover,
.sort__cards .card .card__radio:hover span {
    background: #F7F7F7 !important;
    border-color: #BDBDBD !important;
    color: var(--color-text-black) !important;
}

.product-card__weight-btn.is-active,
.sort__cards .card .card__radio.selected span {
    background: var(--color-surface) !important;
    border-color: var(--color-text-black) !important;
    /* Визуально утолщаем рамку до 2px через inset-shadow того же цвета,
       без layout-shift (border-width оставляем 1px, чтобы не дёргалась
       соседняя кнопка). */
    box-shadow: inset 0 0 0 1px var(--color-text-black) !important;
    color: var(--color-text-black) !important;
    font-weight: 700 !important;
}

.product-card__weight-btn:disabled,
.sort__cards .card .card__radio.disabled span,
.sort__cards .card .card__radio[disabled] span {
    background: #F2F2F2 !important;
    border-color: var(--color-line) !important;
    color: var(--color-button-disabled) !important;
    cursor: not-allowed;
}

/* ============================================================
   14. Блок покупки — единая чёрная пилюля
   [~стар.цена~  тек.цена  ·  В корзину]
   Сама .card__price теперь и есть пилюля (bg + radius),
   дети — без своих фонов, центрированы как одна группа.
   ============================================================ */
.product-card__buy,
.sort__cards .card .card__price {
    margin-top: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    height: 44px !important;
    padding: 0 16px !important;
    background: var(--color-button-primary) !important;
    border-radius: var(--radius-control) !important;
    overflow: hidden !important;
    cursor: pointer;
    transition: var(--transition-ui);
}

.product-card__buy:hover,
.sort__cards .card .card__price:hover {
    background: var(--color-button-primary-hover) !important;
}

/* Старая цена — внутри пилюли, перед текущей, мельче и полупрозрачным белым.
   Bitrix скрывает её inline-стилем `display:none` при отсутствии скидки —
   тогда она не занимает места. */
.product-card__price-old,
.sort__cards .card .card__price .product-item-price-old {
    flex: 0 0 auto !important;
    order: 0 !important;
    height: auto !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-family: var(--catalog-font) !important;
    font-size: 14px !important;
    line-height: 14px !important;
    font-weight: 500 !important;
    text-decoration: line-through !important;
    text-align: left !important;
    border-radius: 0 !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Текущая цена — также внутри пилюли */
.product-card__price-current,
.sort__cards .card .card__price > span:not(.product-item-price-old) {
    flex: 0 0 auto !important;
    order: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    color: #FFFFFF !important;
    font-family: var(--catalog-font) !important;
    font-size: 16px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: none;
}

/* Разделитель «·» — после текущей цены, перед "В корзину". */
.product-card__price-current::after,
.sort__cards .card .card__price > span:not(.product-item-price-old)::after {
    content: "\B7";
    display: inline-block;
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
}

/* Если кнопки нет/она скрыта — убираем разделитель (точка не нужна без CTA-текста справа) */
.sort__cards .card .card__price:not(:has(> .card__button:not([style*="display: none"]):not([style*="display:none"]))) > span:not(.product-item-price-old)::after {
    content: none !important;
}

/* ============================================================
   15. Кнопка «В корзину» — теперь иконка-корзина, без текста.
   Сам текст ("В корзину" / "Добавить еще") уезжает за пределы видимости
   через text-indent (читается скрин-ридером, не видим визуально).
   Иконка рисуется псевдоэлементом ::after через mask-image — цвет
   меняется через currentColor / background-color.
   ============================================================ */
.product-card__button,
.sort__cards .card .card__button,
.sort__cards .card .card__button.nx-buy-btn,
.sort__cards .card .card__button.btn,
.sort__cards .card .card__button.btn.nx-buy-btn {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: none;
}

.product-card__button::after,
.sort__cards .card .card__button.nx-buy-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    text-indent: 0;
    background-color: #FFFFFF;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
    -webkit-mask-size: 22px 22px;
            mask-size: 22px 22px;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    transition: background-color 0.18s ease;
}

/* Active: эффект через фон .card__price (см. секцию 14) */
.sort__cards .card .card__price:active {
    background: var(--color-button-primary-active) !important;
}

.product-card__button:disabled,
.sort__cards .card .card__button:disabled,
.sort__cards .card .card__button.nx-buy-btn:disabled,
.sort__cards .card .card__button.btn.nx-buy-btn:disabled {
    color: transparent !important;
    cursor: not-allowed;
}

.product-card__button--fluid {
    flex-grow: 1;
}

/* ============================================================
   15b. Состояние "товар в корзине" — инверсия пилюли.
   Класс .is-in-cart выставляется JS-ом, когда Bitrix меняет текст
   кнопки с "В корзину" на "Добавить еще" (или товар уже в basket).
   Пилюля становится белой с чёрной рамкой, текст чёрный, иконка → "+".
   ============================================================ */
.sort__cards .card .card__price.is-in-cart {
    background: #FFFFFF !important;
    border: 1px solid #000000 !important;
    box-sizing: border-box !important;
}

.sort__cards .card .card__price.is-in-cart:hover {
    background: #F5F6F7 !important;
}

.sort__cards .card .card__price.is-in-cart .product-item-price-old {
    color: rgba(0, 0, 0, 0.45) !important;
}

.sort__cards .card .card__price.is-in-cart > span:not(.product-item-price-old) {
    color: #000000 !important;
}

.sort__cards .card .card__price.is-in-cart > span:not(.product-item-price-old)::after {
    content: none !important;
}

.sort__cards .card .card__price.is-in-cart .card__button.nx-buy-btn::after {
    background-color: #000000;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
}

/* Прячем встроенные «скидки» (битриксовские плашки) — не нужны по ТЗ */
.sort__cards .card .product-discount-item,
.sort__cards .card .percent-discount-detail {
    display: none !important;
}

/* Кнопка "Уведомить" (bitrix:catalog.product.subscribe) ломает слитую CTA —
   битрикс рендерит её для всех товаров с офферами между ценой и "В корзину".
   Прячем, когда есть видимая "В корзину". Если "В корзину" скрыта (товар не в наличии)
   — оставляем "Уведомить" как fallback-CTA с правым скруглением. */
.sort__cards .card .card__price > .btn.btn-default,
.sort__cards .card .card__price > .bx-catalog-subscribe-button,
.sort__cards .card .card__price > [id*="_subscribe"] {
    display: none !important;
}

.sort__cards .card .card__price:not(:has(> .card__button.nx-buy-btn:not([style*="display: none"]):not([style*="display:none"]))) > .btn.btn-default,
.sort__cards .card .card__price:not(:has(> .card__button.nx-buy-btn:not([style*="display: none"]):not([style*="display:none"]))) > .bx-catalog-subscribe-button,
.sort__cards .card .card__price:not(:has(> .card__button.nx-buy-btn:not([style*="display: none"]):not([style*="display:none"]))) > [id*="_subscribe"] {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #FFFFFF !important;
    font-family: var(--catalog-font) !important;
    font-size: 14px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: none;
}

/* ============================================================
   16. Адаптивность
   ============================================================ */
@media (max-width: 1199px) {
    .catalog-container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .catalog-grid,
    .sort__cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

/* Адаптив: aspect-ratio сам подстроится по ширине карточки,
   дополнительных правок по высоте на планшете не нужно. */

@media (max-width: 767px) {
    .catalog-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .catalog-grid,
    .sort__cards {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .product-card,
    .sort__cards .card {
        padding: 20px !important;
    }

    /* Заголовок товара на мобиле — уменьшаем шрифт, чтобы названия типа
       "РИО НЕГРО эспрессо" и "НАБОР … 4-е вида" укладывались в 1-2 строки,
       а не рассыпались на 3. min-height убираем — он раздувал короткие. */
    .product-card__title,
    .sort__cards .card .card__title {
        font-size: 16px !important;
        line-height: 20px !important;
        min-height: 0 !important;
    }

    .catalog-breadcrumbs,
    .sort .breadcrumbs,
    .catalog .breadcrumbs {
        margin-top: 12px;
        margin-bottom: 12px;
    }
}