/* ==========================================================================
   Fitness Formula — редизайн 2026
   Стили страниц волны 2: карточка товара, главная, успех заказа,
   карточка товара (детальная), каталог, поиск.
   Собирается к styles.css (утверждённая база: шапка/футер/чекаут).

   Правила:
   - градиентов нет, только плоские цвета бренда;
   - токены берём из styles.css (:root);
   - сетки: desktop — контейнер 1060, mobile — 390 (контейнер 354).
   ========================================================================== */

/* --------------------------------- Общее --------------------------------- */

.pg {
    padding: 26px 0 60px;
}

.pg__h1 {
    margin: 0 0 6px;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--navy);
}

.pg__lead {
    margin: 0 0 22px;
    font-size: 15px;
    color: var(--muted);
}

.pg__lead a {
    color: var(--blue);
}

/* хлебные крошки страницы */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--muted);
}

.crumbs a {
    color: var(--muted);
}

.crumbs a:hover {
    color: var(--blue);
}

.crumbs__sep {
    color: var(--muted-2);
}

/* ряд заголовка со счётчиком */
.pg__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 16px;
}

.pg__count {
    font-size: 15px;
    color: var(--muted);
    white-space: nowrap;
}

/* --------------------------------- Кнопки --------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--r);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    transition: background .18s, color .18s, border-color .18s, transform .18s;
}

.btn--primary {
    background: var(--blue);
    color: #fff;
}

.btn--primary:hover {
    background: var(--blue-hover);
    transform: translateY(-1px);
}

.btn--outline {
    background: #fff;
    color: var(--blue);
    border: 1.5px solid var(--blue);
}

.btn--outline:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-1px);
}

.btn--ghost {
    background: #fff;
    color: var(--navy);
    border: 1.5px solid var(--border);
}

.btn--ghost:hover {
    border-color: #c8d5e4;
    transform: translateY(-1px);
}

.btn--light {
    background: #fff;
    color: var(--blue);
}

.btn--light:hover {
    background: var(--tint);
    transform: translateY(-1px);
}

.btn--light-outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .72);
}

.btn--light-outline:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    transform: translateY(-1px);
}

.btn--sm {
    height: 40px;
    padding: 0 18px;
    font-size: 14px;
}

.btn--block {
    width: 100%;
}

.btn:disabled {
    background: #dfe8f2;
    color: #9aa9bc;
    border-color: transparent;
    cursor: default;
    transform: none;
}

/* --------------------------------- Карточка товара (сетка) --------------------------------- */

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

.pcard {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.pcard__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--panel);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pcard__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pcard__badges {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    gap: 6px;
}

.pbadge {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    border-radius: var(--pill);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .01em;
}

.pbadge--hit {
    background: var(--blue);
    color: #fff;
}

.pbadge--new {
    background: var(--blue);
    color: #fff;
}

.pbadge--sale {
    background: var(--red);
    color: #fff;
}

.pbadge--order {
    background: rgba(107, 123, 150, .16);
    color: var(--navy);
}

.pcard__fav {
    position: absolute;
    top: 12px;
    right: 12px;
    /* галерея фото — .swiper с z-index: 1 и лежит выше в DOM,
       без z-index кнопка избранного не получает клики */
    z-index: 3;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--muted-2);
    cursor: pointer;
    transition: color .18s;
}

.pcard__fav:hover,
.pcard__fav.is-active {
    color: var(--red);
}

.pcard__fav .ic {
    width: 22px;
    height: 22px;
}

.pcard__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 16px 16px;
}

.pcard__rating {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    font-size: 13.5px;
    color: var(--muted);
}

.stars {
    display: inline-flex;
    gap: 2px;
}

.stars .ic {
    width: 14px;
    height: 14px;
    color: #f2a33c;
}

.stars .ic--off {
    color: #d9dee7;
}

.pcard__name {
    margin: 0 0 4px;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--navy);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pcard__name a {
    color: inherit;
}

.pcard__name a:hover {
    color: var(--blue);
}

.pcard__brand {
    margin: 0 0 10px;
    font-size: 13.5px;
    color: var(--muted);
}

.pcard__price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
}

.pcard__price {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
}

.pcard__old {
    font-size: 14px;
    color: var(--muted-2);
    text-decoration: line-through;
}

.pcard__sale {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--pill);
    background: var(--red);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
}

.pcard__bonus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    height: 26px;
    padding: 0 10px;
    margin: 0 0 10px;
    border-radius: var(--pill);
    background: #e2f7ea;
    color: #0aa653;
    font-size: 12.5px;
    font-weight: 600;
}

.pcard__bonus .ic {
    width: 14px;
    height: 14px;
}

.pcard__stock {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: #0aa653;
}

.pcard__stock .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.pcard__stock--none {
    color: var(--muted);
}

.pcard__stock--order {
    color: var(--muted);
}

.pcard__btn {
    margin-top: auto;
}

.pcard__btn .btn {
    width: 100%;
    font-size: 16px;
}

/* кнопка-степпер «в корзине» */
.qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 44px;
    border-radius: var(--r);
    background: var(--blue);
    color: #fff;
}

.qty__btn {
    width: 52px;
    height: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty__val {
    font-size: 16px;
    font-weight: 700;
}

/* карточка: фото не загрузилось */
.pcard__ph {
    width: 76px;
    height: 76px;
    border-radius: var(--r-sm);
    border: 1px dashed #c8d3e0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-2);
}

.pcard__ph .ic {
    width: 32px;
    height: 32px;
}

/* пустое фото + серые строки */
.pcard--nofoto .pcard__name {
    color: var(--muted);
}

/* ------------------- Компактный вариант (слайдеры) ------------------- */

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

.mini {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 12px;
}

.mini__media {
    position: relative;
    /* бокс выше: фото товара в слайдерах заметнее */
    height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.mini__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.mini__badge {
    position: absolute;
    top: 0;
    left: 0;
    /* фото с filter: drop-shadow создаёт stacking context и в DOM идёт
       после бейджа — без z-index картинка красится поверх */
    z-index: 2;
}

.mini__name {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--navy);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.mini__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}

.mini__price {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
}

.mini__old {
    display: block;
    font-size: 12.5px;
    color: var(--muted-2);
    text-decoration: line-through;
}

.mini__add {
    flex: none;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .18s;
}

.mini__add:hover {
    background: var(--blue-hover);
}

.mini__add .ic {
    width: 16px;
    height: 16px;
}

/* --------------------------------- Секции-обёртки --------------------------------- */

.sec {
    margin: 34px 0 0;
}

.sec__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px;
}

.sec__h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
}

.sec__link {
    font-size: 14px;
    font-weight: 600;
    color: var(--blue);
}

/* подпись демо-раздела */
.demo-cap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.demo-cap:after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--border);
}

/* --------------------------------- Мобильная адаптация --------------------------------- */

@media (max-width: 1023px) {
    .pg {
        padding: 18px 0 44px;
    }

    .pg__h1 {
        font-size: 24px;
    }

    .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .pcard__body {
        padding: 10px 12px 12px;
    }

    .pcard__media {
        padding: 12px;
    }

    .pcard__badges {
        top: 8px;
        left: 8px;
    }

    .pbadge {
        height: 22px;
        padding: 0 9px;
        font-size: 11.5px;
    }

    .pcard__fav {
        top: 6px;
        right: 6px;
        width: 34px;
        height: 34px;
    }

    .pcard__rating {
        font-size: 12.5px;
        gap: 5px;
    }

    .pcard__name {
        font-size: 14.5px;
        min-height: 40px;
    }

    .pcard__price {
        font-size: 17px;
    }

    .pcard__old {
        font-size: 12px;
    }

    .mini-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

/* ==========================================================================
   ГЛАВНАЯ
   ========================================================================== */

.hero-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 316px;
    gap: 20px;
    margin-bottom: 22px;
}

.hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 232px;
    padding: 28px 26px;
    border-radius: var(--r-lg);
    background: var(--blue);
    color: #fff;
    overflow: hidden;
}

.hero__text {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

.hero__h1 {
    margin: 0 0 10px;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
    color: #fff;
}

.hero__sub {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .88);
    max-width: 34ch;
}

.hero__img {
    flex: none;
    width: 300px;
    height: 186px;
    border-radius: var(--r) var(--r) var(--r) var(--r);
    object-fit: cover;
    object-position: center bottom;
    align-self: flex-end;
    margin-bottom: -28px;
}

.hero-dots {
    position: absolute;
    left: 26px;
    bottom: 16px;
    display: flex;
    gap: 6px;
}

.hero-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
}

.hero-dots span.is-active {
    background: #fff;
}

/* Панель доверия: контент распределяется по высоте колонки.
   Раньше при высоком hero внизу оставалась пустота — теперь пункты
   расходятся равномерно, а на мобильном (высота свободная) работают
   обычные отступы. */
.trust-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.trust-item {
    display: flex;
    gap: 12px;
}

.trust-item__ic {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tint);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-item__ic .ic {
    width: 20px;
    height: 20px;
}

.trust-item__title {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.25;
}

.trust-item__text {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.35;
}

/* --- чипы категорий --- */

.cats-row {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}

.cat-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 12px;
    border-radius: var(--r);
    background: var(--panel);
    transition: background .18s, box-shadow .18s;
}

.cat-chip:hover {
    background: var(--tint);
}

.cat-chip__ic {
    height: 44px;
    display: flex;
    align-items: flex-end;
}

.cat-chip__ic img {
    max-height: 44px;
    max-width: 56px;
    object-fit: contain;
}

.cat-chip__name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.2;
}

.cat-chip__count {
    font-size: 12.5px;
    color: var(--muted);
}

/* --- промо-дуо --- */

.promo-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 26px;
}

.promo-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 112px;
    padding: 18px 20px;
    border-radius: var(--r-lg);
    overflow: hidden;
}

.promo-banner--blue {
    background: var(--blue);
    color: #fff;
}

.promo-banner--light {
    background: var(--tint);
    color: var(--navy);
}

.promo-banner__h {
    margin: 0 0 6px;
    font-size: 21px;
    line-height: 1.15;
    font-weight: 700;
}

.promo-banner__text {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.35;
    max-width: 22ch;
}

.promo-banner--blue .promo-banner__text {
    color: rgba(255, 255, 255, .86);
}

.promo-banner--light .promo-banner__text {
    color: var(--muted);
}

.promo-banner__img {
    flex: none;
    align-self: flex-end;
    max-height: 86px;
    object-fit: contain;
}

/* --- секция с двумя колонками --- */

.two-col {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 26px;
}

/* чипы-вкладки «Подбора по цели» */
.goal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.chip {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border-radius: var(--pill);
    background: var(--tint);
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .18s, color .18s;
}

.chip:hover {
    background: #d8eefc;
}

.chip.is-active {
    background: var(--blue);
    color: #fff;
}

.chip--grey {
    background: var(--panel);
    color: var(--navy);
}

/* --- хиты продаж: полноширинный блок, табы + слайдер --- */

.sec__head--tabs {
    align-items: flex-end;
    gap: 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}

.tabslider__tabs {
    display: flex;
    gap: 26px;
    min-width: 0;
}

.tabslider__tabs a {
    padding-bottom: 12px;
    margin-bottom: -1px;
    font-size: 16px;
    font-weight: 700;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .18s, border-color .18s;
}

.tabslider__tabs a:hover {
    color: var(--navy);
}

.tabslider__tabs a.is-active {
    color: var(--navy);
    border-color: var(--blue);
}

/* правая группа шапки блока: ссылка «Все товары» + стрелки слайдера */
.sec__head-right {
    flex: none;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* в шапке с табами компенсируем их нижний padding (12px) под подчёркивание,
   чтобы ссылка и стрелки стояли по центру строки вкладок */
.sec__head--tabs .sec__head-right {
    padding-bottom: 7px;
}

.tabslider__pane {
    display: none;
}

.tabslider__pane.is-active {
    display: block;
    animation: panel-in .28s cubic-bezier(.22, .61, .36, 1);
}

/* Стрелки переехали в шапку блока: слайдер занимает всю ширину,
   ряд товаров не сдвинут вправо. */
.tabslider__slider {
    position: relative;
}

.tabslider__slider .swiper-slide {
    height: auto;
}

.tabslider__slider .mini {
    height: 100%;
}

.tabslider__nav {
    flex: none;
    display: flex;
    gap: 8px;
}

.tabslider__arrow {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .18s, border-color .18s, color .18s;
}

.tabslider__arrow:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.tabslider__arrow.is-disabled,
.tabslider__arrow.swiper-button-disabled {
    opacity: .35;
    pointer-events: none;
}

.tabslider__arrow .ic {
    width: 16px;
    height: 16px;
}

/* карточка акции в слайдере хитов */
.mini__date {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
}

.mini--action .mini__name {
    -webkit-line-clamp: 2;
    margin-bottom: 10px;
}

.mini__link {
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
}

.mini__link:hover {
    text-decoration: underline;
}

/* --- соцсети --- */

.social-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px;
}

.social-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.social-panel__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}

.social-panel__img {
    width: 100%;
    border-radius: var(--r-sm);
    display: block;
}

/* --- бренды --- */

.brands-row {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    padding: 6px 0;
}

/* Логотипы: высота 36px (ассеты обрезаны по контуру и нормализованы
   до 72px = 2x). В макете бренды показаны приглушёнными, чтобы ряд
   не пестрил — при наведении логотип проявляется в цвете. */
/* Логотип — ссылка на страницу бренда: кликабельна вся область,
   при наведении логотип проявляется в цвете. */
.brands-row__i {
    flex: none;
    display: flex;
    align-items: center;
    border-radius: var(--r-sm);
}

.brands-row img {
    height: 36px;
    width: auto;
    object-fit: contain;
    opacity: .45;   /* цветные, но полупрозрачные — ряд не пестрит */
    transition: opacity .2s ease;
}

.brands-row__i:hover img,
.brands-row__i:focus-visible img {
    opacity: 1;
}

/* иконка в плитке «Все категории» — на месте фото */
.subcat__img--ic {
    color: var(--blue-bright);
}
.subcat__img--ic .ic {
    width: 24px;
    height: 24px;
}

/* --- SEO + статья --- */

.seo-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.seo-block {
    background: var(--tint);
    border-radius: var(--r-lg);
    padding: 20px 22px;
}

.seo-block__h {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
}

.seo-block__text {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
}

.seo-block__link {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--blue);
}

.article-card {
    display: flex;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px;
}

.article-card img {
    flex: none;
    width: 84px;
    height: 84px;
    border-radius: var(--r-sm);
    object-fit: cover;
    object-position: center 35%;
    background: var(--panel);
}

.article-card__title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.35;
}

.article-card__meta {
    font-size: 12px;
    color: var(--muted);
}

/* --- нижний таб-бар (mobile) --- */

.tabbar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    background: #fff;
    border-top: 1px solid var(--border);
    margin: 0 -18px;
    padding: 6px 10px 8px;
}

.tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    color: var(--muted);
    position: relative;
}

.tabbar a.is-active {
    color: var(--blue);
}

.tabbar .ic {
    width: 22px;
    height: 22px;
}

.tabbar__count {
    position: absolute;
    top: -4px;
    right: 50%;
    transform: translateX(14px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   УСПЕХ ЗАКАЗА
   ========================================================================== */

.suc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 316px;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 22px;
}

.suc-hero__main {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 26px 28px;
}

.suc-check {
    flex: none;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #0aa653;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.suc-check .ic {
    width: 30px;
    height: 30px;
}

.suc-hero__h1 {
    margin: 0 0 6px;
    font-size: 27px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--navy);
}

.suc-hero__text {
    margin: 0;
    font-size: 14.5px;
    color: var(--muted);
}

.suc-hero__thanks {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    background: var(--tint);
    border-radius: var(--r-lg);
    padding: 20px 22px;
    overflow: hidden;
}

.suc-hero__thanks-h {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--navy);
    max-width: 18ch;
}

.suc-hero__thanks-text {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    max-width: 24ch;
}

.suc-hero__thanks img {
    position: absolute;
    right: -8px;
    bottom: -6px;
    width: 110px;
    object-fit: contain;
}

.suc-trust {
    display: flex;
    gap: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px 8px;
    margin-bottom: 22px;
}

.suc-trust__item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 16px;
    border-left: 1px solid var(--border-soft);
}

.suc-trust__item:first-child {
    border-left: 0;
}

.suc-trust__ic {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tint);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.suc-trust__ic .ic {
    width: 20px;
    height: 20px;
}

.suc-trust__title {
    margin: 0 0 1px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy);
}

.suc-trust__text {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}

/* --- таймлайн --- */

.timeline-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px 24px 20px;
    margin-bottom: 22px;
}

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

.tl-step {
    position: relative;
    padding-right: 18px;
}

.tl-step__mark {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.tl-step__num {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: var(--panel);
    color: var(--muted);
    border: 1px solid var(--border);
}

.tl-step__num--done {
    background: #0aa653;
    border-color: #0aa653;
    color: #fff;
}

.tl-step__num--active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.tl-step__line {
    flex: 1;
    height: 2px;
    background: var(--border);
    margin-left: 8px;
}

.tl-step:last-child .tl-step__line {
    visibility: hidden;
}

.tl-step__title {
    margin: 0 0 4px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
}

.tl-step__text {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
}

.timeline-note {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
    font-size: 13px;
    color: var(--muted);
}

.timeline-note .ic {
    width: 17px;
    height: 17px;
    color: var(--blue);
    flex: none;
}

/* --- панели заказа --- */

.suc-row {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.suc-row--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.suc-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px 22px;
}

.suc-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.suc-panel__h {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 9px;
}

.suc-panel__h .ic {
    width: 20px;
    height: 20px;
    color: var(--blue);
}

.suc-panel__link {
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
    white-space: nowrap;
}

.order-item {
    display: flex;
    gap: 13px;
    align-items: center;
    padding: 11px 0;
    border-top: 1px solid var(--border-soft);
}

.order-item:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.order-item__img {
    flex: none;
    width: 58px;
    height: 58px;
    border-radius: var(--r-sm);
    background: var(--panel);
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-item__img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.order-item__body {
    flex: 1;
    min-width: 0;
}

.order-item__name {
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3;
}

.order-item__params {
    font-size: 12.5px;
    color: var(--muted);
}

.order-item__price {
    text-align: right;
    white-space: nowrap;
}

.order-item__total {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}

.order-item__qty {
    font-size: 12.5px;
    color: var(--muted);
}

/* способ получения */

.pickup-row {
    display: flex;
    gap: 11px;
    margin-bottom: 12px;
}

.pickup-row .ic {
    flex: none;
    width: 19px;
    height: 19px;
    color: var(--blue);
    margin-top: 1px;
}

.pickup-row__title {
    margin: 0 0 3px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--navy);
}

.pickup-row__text {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.4;
}

.pill-green {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 12px;
    border-radius: var(--pill);
    background: #e2f7ea;
    color: #0aa653;
    font-size: 12.5px;
    font-weight: 600;
}

/* бонусы */

.bonus-panel {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--tint);
    border-radius: var(--r-lg);
    padding: 18px 22px;
    margin-bottom: 22px;
}

.bonus-panel__ic {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #0aa653;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bonus-panel__ic .ic {
    width: 20px;
    height: 20px;
}

.bonus-panel__text {
    flex: 1;
    font-size: 14.5px;
    color: var(--navy);
}

.bonus-panel__text b {
    font-weight: 700;
}

.bonus-panel__balance {
    text-align: right;
}

.bonus-panel__balance-num {
    font-size: 19px;
    font-weight: 700;
    color: #0aa653;
}

.bonus-panel__balance-label {
    font-size: 12.5px;
    color: var(--muted);
}

/* кросс-сейл */

.cross-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

.cross-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 12px;
}

.cross-item__media {
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.cross-item__media img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.cross-item__name {
    margin: 0 0 8px;
    font-size: 12.5px;
    color: var(--navy);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cross-item__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.cross-item__price {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}

.cross-item__add {
    flex: none;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cross-item__add .ic {
    width: 15px;
    height: 15px;
}

/* нижняя строка успеха */

.suc-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px 20px;
}

.suc-foot__mail {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.4;
}

.suc-foot__mail .ic {
    flex: none;
    width: 26px;
    height: 26px;
    color: var(--blue);
}

.suc-foot__btns {
    display: flex;
    gap: 10px;
    flex: none;
}

/* ==========================================================================
   КАРТОЧКА ТОВАРА (PDP)
   ========================================================================== */

.pdp-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 356px 246px;
    gap: 20px;
    align-items: start;
    margin-bottom: 26px;
}

/* галерея */

.gal {
    display: flex;
    gap: 14px;
    /* grid-элемент без min-width:0 растягивается под ширину всех
       слайдов галереи (6 × ~400px) и ломает мобильную вёрстку */
    min-width: 0;
    max-width: 100%;
}

.gal__thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: none;
    width: 64px;
}

.gal__thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--border);
    background: var(--panel);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    transition: border-color .18s;
}

.gal__thumb.is-active {
    border-color: var(--blue);
}

.gal__thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.gal__thumb--more {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    background: #fff;
}

.gal__main {
    position: relative;
    flex: 1;
    min-width: 0;
    border-radius: var(--r-lg);
    background: var(--panel);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.gal__main img {
    max-width: 100%;
    max-height: 380px;
    object-fit: contain;
}

.gal__badges {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: flex;
    gap: 6px;
}

.gal__fav {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--muted-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gal__dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
}

.gal__dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cfd8e4;
}

.gal__dots span.is-active {
    background: var(--blue);
}

.pdp-trust {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.pdp-trust__item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    font-size: 12px;
    color: var(--muted);
    line-height: 1.3;
}

.pdp-trust__item .ic {
    flex: none;
    width: 19px;
    height: 19px;
    color: var(--blue);
}

/* блок покупки */

/* H1 24px проигрывал цене 30px — название товара должно читаться первым */
.buy__h1 {
    margin: 0 0 8px;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--navy);
}

.buy__brand {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--blue);
}

.buy__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 13.5px;
    color: var(--muted);
}

.buy__price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* кегль как у Ozon (27–30), но line-height наследовался 44px (1.47)
   и строка занимала лишнюю высоту — фиксируем 1.2 */
.buy__price {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--navy);
}

.buy__old {
    font-size: 17px;
    color: var(--muted-2);
    text-decoration: line-through;
}

.buy__bonus {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 11px;
    margin-bottom: 16px;
    border-radius: var(--pill);
    background: #e2f7ea;
    color: #0aa653;
    font-size: 12.5px;
    font-weight: 600;
}

.buy__bonus .ic {
    width: 15px;
    height: 15px;
}

.buy__label {
    margin: 0 0 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
}

.variants {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.variant {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--border);
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
    transition: border-color .18s, background .18s;
}

.variant:hover {
    border-color: #bcd0e4;
}

.variant.is-active {
    border-color: var(--blue);
    background: var(--tint);
    color: var(--blue);
}

.buy__variants-link {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
}

.buy__stock {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #0aa653;
}

.buy__stock--muted {
    color: var(--muted);
}

.buy__stock .ic {
    width: 18px;
    height: 18px;
}

.buy__pickup {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--muted);
}

.buy__pickup .ic {
    width: 16px;
    height: 16px;
    color: var(--blue);
    flex: none;
}

.buy__qty-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.stepper {
    display: inline-flex;
    align-items: center;
    height: 44px;
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
}

.stepper button {
    width: 42px;
    height: 100%;
    border: 0;
    background: #fff;
    color: var(--navy);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stepper span {
    min-width: 44px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
}

.buy__qty-note {
    font-size: 12.5px;
    color: var(--muted);
}

.buy__btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ссылки-действия в карточке: «Читать полностью», «Показать все» */
.pdp-more,
.buy__variants-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue-bright);
    /* кнопки-ссылки: убираем нативные стили кнопки, ведём себя как текстовая ссылка */
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.45;
}
.pdp-more:hover,
.buy__variants-link:hover {
    text-decoration: underline;
}
.pdp-more .ic,
.buy__variants-link .ic {
    width: 12px;
    height: 12px;
    transition: transform .18s;
}
.pdp-more:hover .ic,
.buy__variants-link:hover .ic {
    transform: translateX(2px);
}

/* кнопки карточки: иконка перед текстом */
.buy__btns .btn .ic {
    width: 18px;
    height: 18px;
}
.combine .btn .ic {
    width: 18px;
    height: 18px;
}

/* панели справа */

.pdp-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.side-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 18px;
}

.side-panel__h {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}

.dlv-row {
    display: flex;
    gap: 10px;
    margin-bottom: 13px;
}

.dlv-row .ic {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--blue);
    margin-top: 1px;
}

.dlv-row__title {
    margin: 0 0 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
}

.dlv-row__text {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
}

.dlv-free {
    display: flex;
    align-items: center;
    gap: 8px;
    /* фикс-высота 34px обрезала текст, который переносится на две строки
       в узком сайдбаре */
    min-height: 34px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    background: #e2f7ea;
    color: #0aa653;
    font-size: 12.5px;
    font-weight: 600;
}

.dlv-free .ic {
    width: 16px;
    height: 16px;
}

.adv-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.4;
}

.adv-row:last-child {
    margin-bottom: 0;
}

.adv-row .ic {
    flex: none;
    width: 18px;
    height: 18px;
    color: #0aa653;
    margin-top: 1px;
}

/* табы и контент */

.pdp-tabs {
    display: flex;
    gap: 26px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
    /* overflow-x:auto включает и вертикальную прокрутку; табы на 1px выше
       контейнера из-за подчёркивания активного таба — отсюда скролл */
    overflow-x: auto;
    overflow-y: hidden;
}

.pdp-tabs a {
    padding: 12px 0;
    font-size: 15px;
    /* компенсация подчёркивания: держим таб ровно в высоте контейнера */
    box-sizing: border-box;
    font-weight: 600;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}

.pdp-tabs a.is-active {
    color: var(--navy);
    border-color: var(--blue);
}

.pdp-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 26px;
    margin-bottom: 30px;
}

/* было 17px против 24px у Ozon — заголовок раздела не отделял блок */
.pdp-h3 {
    margin: 0 0 14px;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--navy);
}

.pdp-text {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
}

.pdp-list {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.pdp-list li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 7px;
    font-size: 14px;
    color: var(--ink);
}

.pdp-list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--blue);
}

.nutr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.nutr-table caption {
    text-align: left;
    font-size: 13px;
    color: var(--muted);
    padding-bottom: 8px;
}

.nutr-table th,
.nutr-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
}

.nutr-table th {
    color: var(--muted);
    font-weight: 600;
}

.nutr-table td:last-child,
.nutr-table th:last-child {
    text-align: right;
    font-weight: 600;
    color: var(--navy);
}

.pdp-steps {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.pdp-step {
    display: flex;
    gap: 11px;
    margin-bottom: 12px;
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.45;
}

.pdp-step__ic {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: var(--tint);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdp-step__ic .ic {
    width: 17px;
    height: 17px;
}

.pdp-tip {
    display: flex;
    gap: 10px;
    padding: 13px 14px;
    border-radius: var(--r);
    background: var(--tint);
    font-size: 12.5px;
    color: var(--navy);
    line-height: 1.45;
}

.pdp-tip .ic {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--blue);
    margin-top: 1px;
}

/* часто покупают вместе (pdp) */

.combine {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px 22px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: center;
}

.combine__item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.combine__img {
    flex: none;
    /* было 64px — фото упаковки читалось плохо */
    width: 84px;
    height: 84px;
    border-radius: var(--r-sm);
    background: var(--panel);
    display: flex;
    align-items: center;
    justify-content: center;
}

.combine__img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.combine__name {
    margin: 0 0 3px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3;
}

.combine__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
}

.combine__check {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1.5px solid var(--border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
}

.combine__check.is-on {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.combine__check .ic {
    width: 12px;
    height: 12px;
}

.combine__total {
    text-align: right;
}

.combine__total-label {
    font-size: 12.5px;
    color: var(--muted);
}

.combine__total-sum {
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 10px;
}

/* ==========================================================================
   КАТАЛОГ
   ========================================================================== */

.subcats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) 96px;
    gap: 10px;
    margin-bottom: 24px;
}

/* Плитка подкатегории: компактная горизонтальная раскладка —
   текст слева, картинка справа, поэтому плитка ниже и не «комкается» */
.subcat {
    border-radius: var(--r);
    background: var(--panel);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    transition: background .18s;
}

.subcat:hover {
    background: var(--tint);
}

.subcat__body {
    min-width: 0;
}

.subcat__img {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.subcat__img img {
    max-height: 44px;
    max-width: 44px;
    object-fit: contain;
}

.subcat__name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.25;
}

.subcat__count {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
}

.subcat--more {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
}

.subcat--more .ic {
    width: 22px;
    height: 22px;
}

/* верхняя строка раздела: заголовок + промо */

.cat-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 316px;
    gap: 20px;
    align-items: start;
    margin-bottom: 24px;
}

.cat-hero__lead {
    margin: 0;
    font-size: 15px;
    color: var(--muted);
    line-height: 1.5;
    max-width: 60ch;
}

.cat-hero__lead a {
    color: var(--blue);
    font-weight: 600;
}





/* раскладка: фильтры + выдача */

.cat-layout {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.filters {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 18px;
}

.filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.filters__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
}

.f-group {
    padding: 14px 0;
    border-top: 1px solid var(--border-soft);
}

.f-group:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.f-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
}

.f-group__head .ic {
    width: 14px;
    height: 9px;
    color: var(--muted);
    transition: transform .18s;
}

.f-group.is-open .f-group__head .ic {
    transform: rotate(180deg);
}

.f-group__body {
    display: none;
    padding-top: 12px;
}

.f-group.is-open .f-group__body {
    display: block;
}

.switch {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--ink);
    cursor: pointer;
}

.switch__track {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: #cfd8e4;
    flex: none;
    transition: background .18s;
}

.switch__track:after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: left .18s;
}

.switch.is-on .switch__track {
    background: var(--blue);
}

.switch.is-on .switch__track:after {
    left: 21px;
}

.price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.price-input {
    flex: 1;
    min-width: 0;
    height: 38px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: 0 10px;
    font-size: 13.5px;
    color: var(--navy);
    outline: none;
}

.price-input:focus {
    border-color: var(--blue);
}

.range {
    position: relative;
    height: 4px;
    border-radius: 2px;
    background: #dfe8f2;
    margin: 18px 4px 22px;
}

.range__fill {
    position: absolute;
    left: 12%;
    right: 18%;
    top: 0;
    bottom: 0;
    border-radius: 2px;
    background: var(--blue);
}

.range__dot {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--blue);
    transform: translate(-50%, -50%);
}

.f-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: 0 11px;
    margin-bottom: 12px;
    color: var(--muted);
}

.f-search .ic {
    width: 15px;
    height: 15px;
    flex: none;
}

.f-search input {
    border: 0;
    outline: 0;
    width: 100%;
    font-size: 13px;
}

.f-check {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
}

.f-check__box {
    flex: none;
    width: 19px;
    height: 19px;
    border-radius: 5px;
    border: 1.5px solid var(--border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
}

.f-check.is-on .f-check__box {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.f-check__box .ic {
    width: 11px;
    height: 11px;
}

.f-check__count {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
}

.f-check.is-off {
    color: #b3bfcf;
}

.f-more {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
}

.f-apply {
    margin-top: 4px;
}

/* отступ сверху: чипы стоят первым элементом в колонке результатов
   и прилипали к границе раздела */
.f-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 4px 0 12px;
}

.f-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 11px;
    border-radius: var(--pill);
    background: var(--tint);
    color: var(--blue);
    font-size: 12.5px;
    font-weight: 600;
}

.f-chip .ic {
    width: 11px;
    height: 11px;
    cursor: pointer;
}

.f-chip--reset {
    background: transparent;
    color: var(--blue);
}

/* панель выдачи */

.list-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.list-head__count {
    font-size: 14px;
    color: var(--muted);
}

.list-head__sort {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 13.5px;
    color: var(--navy);
}

.list-head__sort select {
    height: 38px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: 0 30px 0 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
    background: #fff;
}





/* сетка каталога: 4 колонки в основной области */

.cat-layout .cards-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 22px;
}

.pagination a,
.pagination span {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    background: #fff;
    border: 1.5px solid var(--border);
}

.pagination a:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.pagination .is-active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.pagination__dots {
    border: 0;
    background: transparent;
    color: var(--muted);
}

.popular-queries {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
}

/* ==========================================================================
   ПОИСК
   ========================================================================== */

/* подсказки */

.sug-wrap {
    position: relative;
}

.sug {
    position: absolute;
    left: 0;
    right: 0;
    top: 54px;   /* сразу под строкой поиска (46px) + 8px зазор */
    z-index: 20;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: 0 18px 44px rgba(18, 58, 99, .14);
    padding: 18px 20px 18px;
}

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

.sug__title {
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.sug-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.sug-item__img {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm);
    background: var(--panel);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sug-item__img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sug-item__body {
    flex: 1;
    min-width: 0;
}

.sug-item__name {
    margin: 0 0 2px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3;
}

.sug-item__name mark {
    background: transparent;
    color: var(--blue);
}

.sug-item__brand {
    font-size: 12px;
    color: var(--muted);
}

.sug-item__price {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
}

.sug-item__stock {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: #0aa653;
    text-align: right;
}

.sug-item__stock--none {
    color: var(--muted);
}

.sug-item__add {
    flex: none;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sug-item__add .ic {
    width: 15px;
    height: 15px;
}

.sug-block {
    padding-left: 22px;
    border-left: 1px solid var(--border-soft);
}

.sug-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 13.5px;
    color: var(--ink);
}

.sug-link:hover {
    color: var(--blue);
}

.sug-link .ic {
    width: 17px;
    height: 17px;
    color: var(--muted-2);
    flex: none;
}

.sug-link__count {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
}

.sug-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.sug-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}

.sug-foot__all {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--blue);
}

.sug-foot__hint {
    font-size: 12px;
    color: var(--muted);
}

/* страница выдачи */

.search-results-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.search-results-head__h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--navy);
}

.search-results-head__reset {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--blue);
}

.result-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

.result-tabs a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.result-tabs a.is-active {
    color: var(--navy);
    border-color: var(--blue);
}

.result-tabs__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--panel);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
}

.result-tabs a.is-active .result-tabs__count {
    background: var(--tint);
    color: var(--blue);
}

.search-layout {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr) 236px;
    gap: 20px;
    align-items: start;
}

.quick-cats {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px;
    margin-bottom: 16px;
}

.quick-cats__title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}

.quick-cat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 13.5px;
    color: var(--ink);
}

.quick-cat .ic {
    width: 17px;
    height: 17px;
    color: var(--blue);
    flex: none;
}

.pick-promo {
    position: relative;
    background: var(--tint);
    border-radius: var(--r-lg);
    padding: 16px;
    overflow: hidden;
}

.pick-promo__h {
    margin: 0 0 4px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
    max-width: 14ch;
}

.pick-promo__link {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--blue);
}

.pick-promo img {
    display: block;
    width: 100%;
    margin-top: 10px;
    border-radius: var(--r-sm);
}

/* мобильные экраны поиска */

.m-search-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 12px;
}

.m-search-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    border: 1.5px solid var(--blue);
    border-radius: var(--pill);
    padding: 0 6px 0 14px;
    background: #fff;
}

.m-search-input .ic {
    width: 17px;
    height: 17px;
    color: var(--muted-2);
    flex: none;
}

.m-search-input input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    font-size: 14px;
}

.m-search-btn {
    flex: none;
    height: 34px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--blue);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.m-search-cancel {
    flex: none;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--blue);
}

.m-sug-title {
    margin: 16px 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.m-sug-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
}

.m-sug-row__img {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    background: var(--panel);
    display: flex;
    align-items: center;
    justify-content: center;
}

.m-sug-row__img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.m-sug-row__body {
    flex: 1;
    min-width: 0;
}

.m-sug-row__name {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3;
}

.m-sug-row__sub {
    font-size: 11.5px;
    color: var(--muted);
}

.m-sug-row__price {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
}

.m-sug-row__add {
    flex: none;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.m-sug-row__add .ic {
    width: 14px;
    height: 14px;
}

.m-sug-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 0;
    font-size: 13.5px;
    color: var(--ink);
}

.m-sug-link .ic {
    width: 16px;
    height: 16px;
    color: var(--muted-2);
    flex: none;
}

.m-sug-link__count {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
}

.m-sug-all {
    display: block;
    padding: 12px 0 4px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--blue);
}

.m-res-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--border-soft);
}

.m-res-head__back {
    flex: none;
    color: var(--navy);
}

.m-res-head .m-search-input {
    height: 42px;
}

.m-res-count {
    margin: 14px 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
}

.m-filter-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.m-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

.m-filter-btn .ic {
    width: 15px;
    height: 15px;
    color: var(--blue);
}

/* ничего не найдено */

.no-results {
    text-align: center;
    padding: 34px 18px;
}

.no-results__ic {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--tint);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-results__ic .ic {
    width: 34px;
    height: 34px;
}

.no-results__h {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
}

.no-results__text {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
}

.no-results__chips-label {
    margin: 18px 0 8px;
    font-size: 12.5px;
    color: var(--muted);
}

/* ==========================================================================
   Мобильная адаптация новых блоков
   ========================================================================== */

@media (max-width: 1023px) {
    .hero-row,
    .two-col,
    .suc-row,
    .suc-row--even,
    .cat-hero,
    .cat-layout {
        grid-template-columns: 1fr;
    }

    /* описание категории на мобильном не показываем — полный текст внизу страницы */
    .cat-hero__lead {
        display: none;
    }

    .hero {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 20px 18px 18px;
        min-height: 0;   /* высоту задаёт активный слайд (текст/баннер) */
    }

    /* панель на мобильном идёт отдельным блоком — растягивать нечего */
    .trust-panel {
        justify-content: flex-start;
    }

    .hero__h1 {
        font-size: 22px;
    }

    .hero__img {
        width: 100%;
        height: 168px;
        margin-bottom: 0;
        border-radius: var(--r);
    }

    .cats-row {
        /* горизонтальная лента: 8 плиток в 4 колонки на 390px не помещаются
           и подписи вроде «Жиросжигатели» обрезались */
        display: flex;
        gap: 10px;
        overflow-x: auto;
        /* margin-bottom не должен обнуляться: иначе следующий блок
           прилипает к ленте (у остальных секций зазор 36px) */
        margin: 0 calc(var(--gutter) * -1) 36px;
        padding: 2px var(--gutter) 10px;
        scroll-snap-type: x mandatory;
        /* без scroll-padding снап-порт считается от края скроллпорта,
           полоса прокручивается на 20px и левый отступ «съедается» */
        scroll-padding: 0 var(--gutter);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .cats-row::-webkit-scrollbar {
        display: none;
    }

    .cat-chip {
        flex: none;
        width: 118px;
        padding: 8px 10px;
        scroll-snap-align: start;
    }

    .cat-chip__count {
        white-space: nowrap;
    }

    .cat-chip__ic {
        height: 34px;
    }

    .cat-chip__ic img {
        max-height: 34px;
    }

    .promo-duo {
        grid-template-columns: 1fr;
    }

    .goals-2col {
        gap: 16px;
    }

    .brands-row img {
        height: 26px;
    }

    .seo-row {
        grid-template-columns: 1fr;
    }

    /* успех */
    .suc-hero__main {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .suc-hero__h1 {
        font-size: 21px;
    }

    .suc-trust {
        flex-direction: column;
        gap: 0;
        padding: 6px 14px;
    }

    .suc-trust__item {
        border-left: 0;
        border-top: 1px solid var(--border-soft);
        padding: 12px 0;
    }

    .suc-trust__item:first-child {
        border-top: 0;
    }

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

    .tl-step {
        padding-right: 0;
    }

    .tl-step__line {
        display: none;
    }

    .bonus-panel {
        flex-wrap: wrap;
    }

    .bonus-panel__balance {
        text-align: left;
    }

    .cross-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .suc-foot {
        flex-direction: column;
        align-items: stretch;
    }

    .suc-foot__btns {
        flex-direction: column;
    }

    /* PDP */
    .pdp-top,
    .pdp-cols {
        grid-template-columns: 1fr;
    }

    .gal {
        flex-direction: column-reverse;
    }

    .gal__thumbs {
        flex-direction: row;
        width: auto;
    }

    .gal__main {
        padding: 18px;
    }

    .gal__main img {
        max-height: 260px;
    }

    .pdp-trust {
        flex-direction: column;
    }

    .buy__h1 {
        font-size: 20px;
    }

    .buy__price {
        font-size: 26px;
    }

    .combine {
        grid-template-columns: 1fr;
    }

    .combine__total {
        text-align: left;
    }

    .pdp-sticky {
        position: sticky;
        bottom: 0;
        z-index: 6;
        display: flex;
        align-items: center;
        gap: 12px;
        background: #fff;
        border-top: 1px solid var(--border);
        /* панель лежит прямо в main.pg (вне .container) — отрицательные
           боковые margin делали её шире вьюпорта и давали горизонтальный скролл */
        margin: 16px 0 0;
        padding: 10px 18px 12px;
    }

    .pdp-sticky__price {
        font-size: 19px;
        font-weight: 700;
        color: var(--navy);
    }

    .pdp-sticky__bonus {
        display: block;
        font-size: 11.5px;
        color: #0aa653;
        font-weight: 600;
    }

    .pdp-sticky .btn {
        margin-left: auto;
        flex: none;
    }

    .subcats .subcat--more {
        display: none;
    }

    .search-layout {
        grid-template-columns: 1fr;
    }

    .result-tabs {
        gap: 16px;
        overflow-x: auto;
    }
}

/* --- соцсети: компактный ряд плиток + статья --- */

.social-row {
    display: flex;
    align-items: center;
    gap: 24px;
}

.social-row__img {
    flex: none;
    height: 116px;
    width: auto;
    border-radius: var(--r);
    display: block;
}

.social-row .article-card {
    flex: 1;
    min-width: 0;
}

@media (max-width: 1023px) {
    .social-row {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .social-row__img {
        width: 100%;
        height: auto;
    }
}

/* --- фиксы после первого рендера --- */

/* строки-пары «название/подпись» должны быть блочными */
.subcat__name,
.subcat__count,
.suc-trust__title,
.suc-trust__text,
.combine__name,
.combine__price,
.trust-item__title,
.trust-item__text,
.pickup-row__title,
.pickup-row__text,
.dlv-row__title,
.dlv-row__text,
.cat-chip__name,
.cat-chip__count {
    display: block;
}

/* поиск: подсказки — absolute, поэтому враппер держит высоту в потоке */
.sug-wrap {
    min-height: 440px;
}

/* поиск: раскладка выдачи — 230 + 1fr + 210 */
.search-layout {
    grid-template-columns: 230px minmax(0, 1fr) 210px;
}

.search-layout .cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* карточка в узкой колонке поиска: компактнее */
.search-layout .pcard__body {
    padding: 12px 13px 14px;
}

.search-layout .pcard__name {
    font-size: 14px;
}

.search-layout .pcard__price {
    font-size: 18px;
}

.search-layout .pcard__media {
    padding: 14px;
}

/* «ничего не найдено»: подпись перед чипами */
.no-results__chips-label {
    margin: 0 0 10px;
}

/* в блоке «ничего не найдено» подпись идёт перед чипами */
.no-results .sug-chips {
    margin-bottom: 6px;
}

.no-results .sug-chips {
    justify-content: center;
    margin-bottom: 16px;
}

/* мобильные: фильтры и сортировка — компактный ряд кнопок,
   по клику открывается шторка снизу (bottom sheet) */
.m-filter-row {
    display: none;
}

/* --- шторка (bottom sheet) --- */
.sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    background: #fff;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 16px 18px calc(22px + env(safe-area-inset-bottom));
    transform: translateY(105%);
    transition: transform .28s ease;
    visibility: hidden;
    box-shadow: 0 -8px 32px rgba(18, 58, 99, .14);
}

.sheet.is-open {
    transform: none;
    visibility: visible;
}

.sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.sheet__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
}

.sheet__close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--navy);
    padding: 0;
}

.sheet__close .ic {
    width: 18px;
    height: 18px;
}

.sheet__opts {
    display: flex;
    flex-direction: column;
}

.sheet__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 48px;
    border: 0;
    border-top: 1px solid var(--border-soft);
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
    text-align: left;
    padding: 0;
    cursor: pointer;
}

.sheet__opt:first-child {
    border-top: 0;
}

.sheet__opt .ic {
    display: none;
    width: 18px;
    height: 18px;
    color: var(--blue);
}

.sheet__opt.is-on {
    color: var(--blue);
}

.sheet__opt.is-on .ic {
    display: block;
}

.sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(18, 58, 99, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}

.sheet-backdrop.is-show {
    opacity: 1;
    pointer-events: auto;
}

body.is-sheet-open {
    overflow: hidden;
}

@media (max-width: 1023px) {
    /* панель фильтров становится шторкой снизу */
    .cat-layout > .filters {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 120;
        max-height: 82vh;
        overflow-y: auto;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        border-bottom: 0;
        margin: 0;
        transform: translateY(105%);
        transition: transform .28s ease;
        visibility: hidden;
    }

    .cat-layout > .filters.is-open {
        transform: none;
        visibility: visible;
    }

    .search-layout > .filters {
        display: none;
    }

    .m-filter-row {
        display: flex;
        gap: 8px;
        margin-bottom: 10px;
    }

    .m-filter-btn {
        flex: 1;
        justify-content: center;
        height: 32px;
        padding: 0 10px;
        font-size: 12.5px;
    }

    .pdp-sticky {
        display: flex;
    }
}

/* мобильные: сетки каталога и поиска — строго 2 колонки */
@media (max-width: 1023px) {
    .cat-layout .cards-grid,
    .search-layout .cards-grid,
    .cat-layout .cards-grid,
    .search-layout .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* мобильные: успех/чекаут — одна колонка */
@media (max-width: 1023px) {
    .suc-hero {
        grid-template-columns: 1fr;
    }

    .suc-hero__thanks {
        min-height: 132px;
        padding-right: 130px;
    }

    .suc-hero__thanks img {
        width: 104px;
    }
}

/* ==========================================================================
   СТРАНИЦА БРЕНДА
   ========================================================================== */

.brand-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 412px;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 20px;
}

.brand-hero__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 8px 0;
}

.brand-hero__top {
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand-hero__logo {
    width: 196px;
    height: auto;
    flex: none;
}

.brand-hero__h1 {
    margin: 0;
    font-size: 36px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--navy);
}

.brand-hero__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--muted);
    max-width: 46ch;
}

.brand-adv {
    display: flex;
    gap: 0;
    margin-top: 4px;
}

.brand-adv__item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border-left: 1px solid var(--border-soft);
}

.brand-adv__item:first-child {
    border-left: 0;
    padding-left: 0;
}

.brand-adv__ic {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tint);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-adv__ic .ic {
    width: 20px;
    height: 20px;
}

.brand-adv__title {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.25;
}

.brand-adv__text {
    margin: 0;
    font-size: 11.5px;
    color: var(--muted);
}

.brand-hero__photo {
    border-radius: var(--r-lg);
    overflow: hidden;
    min-height: 230px;
}

.brand-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* статистика бренда */

.brand-stats {
    display: flex;
    gap: 12px;
    margin: 18px 0 0;
}

.brand-stat {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: var(--panel);
    border-radius: var(--r-lg);
}

.brand-stat__ic {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-stat__ic .ic {
    width: 22px;
    height: 22px;
}

.brand-stat__num {
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
}

.brand-stat__label {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--muted);
}

/* инновации + почему выбирают */

.brand-innov {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 20px;
    margin-top: 30px;
}

.brand-innov__panel {
    display: flex;
    align-items: stretch;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #0a1e33;
    min-height: 168px;
}

.brand-innov__photo {
    flex: none;
    width: 154px;
    object-fit: cover;
    display: block;
}

.brand-innov__body {
    padding: 22px 24px;
    color: #fff;
    align-self: center;
}

.brand-innov__h {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
}

.brand-innov__sub {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.45;
    opacity: .9;
}

.brand-why {
    background: var(--tint);
    border-radius: var(--r-lg);
    padding: 22px 24px;
}

.brand-why__h {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
}

.brand-why__row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.4;
}

.brand-why__row .ic {
    flex: none;
    width: 17px;
    height: 17px;
    color: #0aa653;
    margin-top: 2px;
}

/* мобильная липкая кнопка бренда */

.brand-sticky {
    position: sticky;
    bottom: 0;
    z-index: 6;
    display: flex;
    background: #fff;
    border-top: 1px solid var(--border);
    /* см. .pdp-sticky: панель вне .container, отрицательный margin не нужен */
    margin: 16px 0 0;
    padding: 10px 18px 12px;
}

.brand-sticky .btn {
    width: 100%;
}

/* ==========================================================================
   АКЦИИ: СПИСОК
   ========================================================================== */

.promo-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.promo-toolbar .chip {
    height: 38px;
}

.promo-toolbar__sort {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--muted);
}

.promo-toolbar__sort select {
    height: 38px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: 0 30px 0 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
    background: #fff;
}

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

.promo-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.promo-card__media {
    position: relative;
    aspect-ratio: 23 / 12;
    background: var(--panel);
}

.promo-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.promo-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 18px 18px;
}

.promo-card__name {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
}

.promo-card__text {
    margin: 0 0 14px;
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.45;
}

.promo-card__row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.promo-card__discount {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--r-sm);
    background: var(--red);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.promo-card__gift {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    margin-bottom: 12px;
    border-radius: var(--pill);
    background: #e2f7ea;
    color: #0aa653;
    font-size: 12.5px;
    font-weight: 600;
}

.promo-card__gift .ic {
    width: 15px;
    height: 15px;
}

.promo-card__promo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.promo-card__code {
    flex: 1;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed #b9cee4;
    border-radius: var(--r-sm);
    background: var(--tint);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--navy);
}

.promo-card__btn {
    flex: 1;
}

.promo-card--over {
    opacity: .72;
}

.promo-card--over .promo-card__media img {
    filter: grayscale(.7);
}

.promo-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--tint);
    border-radius: var(--r-lg);
    padding: 26px 28px;
    margin-top: 26px;
}

.promo-empty__ic {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-empty__ic .ic {
    width: 26px;
    height: 26px;
}

.promo-empty__body {
    flex: 1;
}

.promo-empty__h {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
}
.promo-empty__text {
    margin: 0;
    font-size: 13.5px;
    color: var(--muted);
}

.promo-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 26px;
}

.promo-more__count {
    font-size: 13.5px;
    color: var(--muted);
}
   АКЦИЯ: ДЕТАЛЬНАЯ
   ========================================================================== */

.promo-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.promo-top__left {
    min-width: 0;
}

.promo-top__badge {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    margin-bottom: 10px;
    border-radius: var(--pill);
    background: var(--red);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.promo-top__h1 {
    margin: 0 0 8px;
    font-size: 32px;
    line-height: 1.18;
    font-weight: 700;
    color: var(--navy);
}

.promo-top__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--muted);
    max-width: 62ch;
}

.promo-top__date {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--pill);
    background: var(--tint);
    color: var(--blue);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.promo-top__date .ic {
    width: 16px;
    height: 16px;
}

.promo-detail-hero {
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 8px;
}

.promo-detail-hero img {
    width: 100%;
    display: block;
}

.promo-feats {
    display: flex;
    gap: 0;
    padding: 16px 8px;
    margin-bottom: 8px;
}

.promo-feat {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-left: 1px solid var(--border-soft);
}

.promo-feat:first-child {
    border-left: 0;
}

.promo-feat .ic {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--navy);
}

.promo-feat__title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.25;
}

.promo-cond {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 24px;
    padding: 24px 0 8px;
    border-top: 1px solid var(--border-soft);
    margin-top: 10px;
}

.promo-cond__h {
    margin: 0 0 14px;
    font-size: 19px;
    font-weight: 700;
    color: var(--navy);
}

.promo-cond__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.promo-cond__item {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.45;
}

.promo-cond__item .ic {
    flex: none;
    width: 17px;
    height: 17px;
    color: var(--blue);
    margin-top: 2px;
}

.promo-gift {
    background: var(--tint);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    display: flex;
    gap: 14px;
    align-items: center;
}

.promo-gift__img {
    flex: none;
    width: 74px;
    height: 74px;
    border-radius: var(--r-sm);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-gift__img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.promo-gift__h {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}

.promo-gift__text {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
}

@media (max-width: 1023px) {
    .brand-hero,
    .brand-innov,
    .promo-cond {
        grid-template-columns: 1fr;
    }

    .brand-hero__h1 {
        font-size: 26px;
    }

    .brand-hero__photo {
        min-height: 180px;
    }

    .brand-adv {
        flex-direction: column;
        gap: 0;
    }

    .brand-adv__item {
        border-left: 0;
        border-top: 1px solid var(--border-soft);
        padding: 12px 0;
    }

    .brand-adv__item:first-child {
        border-top: 0;
    }

    .brand-stats {
        flex-direction: column;
    }

    .promo-grid {
        grid-template-columns: 1fr;
    }

    .promo-top {
        flex-direction: column;
    }

    .promo-top__h1 {
        font-size: 24px;
    }

    .promo-feats {
        flex-direction: column;
        gap: 0;
        padding: 6px 0;
    }

    .promo-feat {
        border-left: 0;
        border-top: 1px solid var(--border-soft);
        padding: 12px 0;
    }

    .promo-feat:first-child {
        border-top: 0;
    }
}

/* --- доп. элементы бренда/акций --- */

.pill-blue {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: var(--pill);
    border: 1.5px solid #bcd9ee;
    background: #fff;
    color: var(--blue);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* товары акции: карточка-строка в сетке */
.promo-item {
    display: flex;
    gap: 14px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 16px;
}

.promo-item__img {
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: var(--r-sm);
    background: var(--panel);
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-item__img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.promo-item__body {
    min-width: 0;
}

.promo-item__name {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3;
}

.promo-item__rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
}

.promo-item__rating .ic {
    width: 13px;
    height: 13px;
    color: #f2a33c;
}

.promo-item__price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.promo-item__price {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
}

.trim-old {
    font-size: 12.5px;
    color: var(--muted-2);
    text-decoration: line-through;
}

/* --- фиксы страниц бренда/акций (после рендера) --- */

/* мобильная кнопка бренда — только на мобильных */
.brand-sticky {
    display: none;
}

.brand-stat__num,
.brand-stat__label,
.promo-empty__h,
.promo-empty__text {
    display: block;
}

/* сетка 5 колонок (товары бренда) */
.cards-grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* товары акции — вертикальные карточки */
.promo-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px;
}

.promo-item__img {
    width: 100%;
    height: 108px;
    margin-bottom: 4px;
}

.promo-item__img img {
    max-height: 100%;
}

.promo-item__body {
    width: 100%;
}


/* промокод: нейтральный серый, как в макете */
.promo-card__code {
    background: #f4f6f9;
    border-color: #cfd8e4;
    letter-spacing: .12em;
}

@media (max-width: 1023px) {
    .brand-sticky {
        display: flex;
    }

    .cards-grid--5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .promo-item__img {
        height: 92px;
    }
}

/* --- фиксы бренда на мобильном --- */
@media (max-width: 1023px) {
    .brand-hero__top {
        flex-wrap: wrap;
        gap: 10px;
    }

    .brand-hero__logo {
        width: 128px;
    }

    .brand-adv__title,
    .brand-adv__text {
        display: block;
    }

    .brand-adv__text {
        margin-top: 2px;
    }

    /* панель инноваций столбиком */
    .brand-innov__panel {
        flex-direction: column;
    }

    .brand-innov__photo {
        width: 100%;
        height: 148px;
        object-fit: cover;
    }
}

/* ==========================================================================
   АНИМАЦИИ И МИКРОВЗАИМОДЕЙСТВИЯ (2026)
   ========================================================================== */

/* --- scroll-reveal --- */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    /* контент не должен «пропадать»: страховка видимости ниже */
    transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

/* --- sticky-шапка при скролле --- */
/* --- карточка товара: зум фото + отклик --- */
.pcard__media {
    overflow: hidden;
}


/* --- кнопки: отклик на нажатие --- */
.btn:active,
.mini__add:active,
.cross-item__add:active,
.sug-item__add:active,
.m-sug-row__add:active,
.qty__btn:active {
    transform: translateY(0) scale(.98);
}

.search__btn:active,
.hdr-m__search-btn:active {
    transform: translateY(1px);
}

/* --- чипы и табы --- */
.chip,
.cat-chip,
.subcat,
.tabslider__tabs a,
.pdp-tabs a,
.result-tabs a,
.f-check,
.sug-item,
.m-sug-row,
.trust-item__ic,
.pcard__fav {
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.pcard__fav:active {
    transform: scale(.94);
}

/* --- фокус-кольцо (доступность) --- */
.btn:focus-visible,
.chip:focus-visible,
.pcard a:focus-visible,
.sug-item__add:focus-visible,
.m-filter-btn:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 125, 187, .25);
    border-radius: var(--r-sm);
}

/* --- аккордеон мобильного футера: плавно --- */
.ftr-m__acc-body {
    overflow: hidden;
}

.ftr-m__acc.is-open .ftr-m__acc-body {
    animation: acc .26s ease;
}

@keyframes acc {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

/* --- выпадающие подсказки поиска --- */
.sug {
    animation: sug .2s cubic-bezier(.22, .61, .36, 1);
}

@keyframes sug {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* --- липкие панели въезжают --- */
.pdp-sticky,
.brand-sticky,
.co-m__bar,
.tabbar {
    animation: slideUp .3s cubic-bezier(.22, .61, .36, 1);
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* --- тосты/бейджи скидок: лёгкий акцент --- */

/* --- глобально: уважать предпочтения пользователя --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* --- фильтры выдачи: обычный блок, без липкости и внутренней прокрутки --- */
.filters {
    position: static;
}

@media (max-width: 1023px) {
    /* липкая панель «Фильтры + сортировка» при скролле выдачи */
    .m-filter-row {
        position: sticky;
        top: 0;
        z-index: 8;
        background: #fff;
        margin: 0 -18px;
        padding: 10px 18px;
        border-bottom: 1px solid var(--border-soft);
    }

    .filters {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* --- мобильные тап-зоны: минимум 44px у интерактивных элементов --- */
@media (max-width: 1023px) {
    .pcard__fav {
        width: 44px;
        height: 44px;
        top: 2px;
        right: 2px;
    }

    .mini__add,
    .cross-item__add,
    .sug-item__add,
    .m-sug-row__add {
        width: 40px;
        height: 40px;
    }

    .mini__add .ic,
    .cross-item__add .ic,
    .sug-item__add .ic,
    .m-sug-row__add .ic {
        width: 18px;
        height: 18px;
    }

    .f-chip {
        height: 34px;
        padding: 0 13px;
    }

    .pagination a,
    .pagination span {
        min-width: 44px;
        height: 44px;
    }

    /* 9 кнопок по 44px в строку не помещаются в 350px контейнера —
       переносим на вторую строку вместо горизонтальной прокрутки страницы */
    .pagination {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .tabslider__tabs a,
    .pdp-tabs a,
    .result-tabs a {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    /* вторичные подписи чуть крупнее для читаемости */
    .tabbar a {
        font-size: 11px;
    }

    .cat-chip__count,
    .subcat__count {
        font-size: 12.5px;
    }
}

/* --- мелкий полиш --- */
html {
    scroll-behavior: smooth;
}

::selection {
    background: rgba(0, 125, 187, .18);
    color: var(--navy);
}

/* ссылки без подчёркивания по умолчанию (прототип) */
a {
    text-decoration: none;
    color: inherit;
}

/* числа в ценах — табличные, чтобы не «плясали» */
.pcard__price,
.pcard__old,
.pcard__sale,
.mini__price,
.mini__old,
.buy__price,
.buy__old,
.sum-total__value,
.cross-item__price,
.promo-item__price,
.promo-card__discount,
.order-item__total,
.bonus-panel__balance-num {
    font-variant-numeric: tabular-nums;
}

/* --- переносы и заголовки (2026) --- */
.gal__badges {
    flex-wrap: nowrap;
}

.buy__h1,
.pg__h1,
.suc-hero__h1,
.promo-top__h1,
.brand-hero__h1,
.sec__h2,
.promo-card__name,
.pcard__name,
.mini__name,
.no-results__h {
    text-wrap: pretty;
}

.pg__h1,
.buy__h1,
.suc-hero__h1,
.promo-top__h1,
.brand-hero__h1,
.sec__h2 {
    text-wrap: balance;
}

/* адаптив 1024–1200: бейджи галереи компактнее */
@media (min-width: 1024px) and (max-width: 1240px) {
    .gal__badges .pbadge {
        padding: 0 9px;
        font-size: 11px;
    }

    .pdp-top {
        grid-template-columns: minmax(0, 1fr) 320px 220px;
        gap: 16px;
    }
}

/* --- тач-устройства: убираем «залипающий» hover у кнопок и логотипов --- */
@media (hover: none) {
    .btn:hover {
        transform: none;
    }

}

/* --- демо-страницы: экраны телефонов не растягиваются пустотой --- */
@media (max-width: 1023px) {
    .phone__screen {
        height: auto;
        max-height: none;
        overflow: visible;
    }
}

/* ==========================================================================
   ФИКСЫ РЕВИЗИИ: выравнивание, единые высоты, детали
   ========================================================================== */

/* --- карточки: фиксированные строки, чтобы ряды не «плясали» --- */
.pcard__rating {
    min-height: 20px;
    white-space: nowrap;
}

.pcard__name {
    min-height: 44px;
}

.pcard__brand {
    min-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pcard__price-row {
    min-height: 30px;
}

.pcard__bonus {
    min-height: 26px;
}

.pcard__stock {
    min-height: 20px;
}

/* слот под бейдж скидки в карточке — резервируем место всегда */
.pcard__price-row .pcard__sale {
    flex: none;
}

/* --- единые высоты кнопок --- */
.btn--sm {
    height: 44px;
    padding: 0 20px;
}

.f-apply,
.filters .btn--block {
    height: 44px;
}

/* --- пагинация по центру колонки --- */
.pagination {
    justify-content: center;
}

/* --- счётчики в фильтре бренда: правый край --- */
.f-check__count {
    margin-left: auto;
    min-width: 32px;
    text-align: right;
}

/* --- карточки акций: акцентная строка единой высоты --- */
.promo-card__gift,
.promo-card__promo,
.promo-card__discount {
    min-height: 38px;
}

.promo-card__row {
    min-height: 44px;
}

/* бейдж скидки карточки акции — единый компонент */
.promo-card__discount {
    height: 28px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: var(--r-sm);
}

/* --- промокод: рамка из системы --- */
.promo-card__code {
    height: 44px;
    border-color: #cfd8e4;
}

/* --- детальная акции: баннер на всю ширину сетки --- */
.promo-detail-hero img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    object-position: center;
}

/* --- заголовки карточек: не рвать числа --- */
.pcard__name a,
.mini__name a {
    word-break: normal;
    overflow-wrap: anywhere;
}

/* --- hero бренда: фото обложкой --- */
.brand-hero__photo {
    align-self: stretch;
}

.brand-hero__photo img {
    min-height: 230px;
}

/* --- плашки акции детальной: одинаковая высота в строке --- */
.promo-top {
    align-items: center;
}

.promo-top__badge {
    height: 34px;
}

.promo-top__date {
    height: 34px;
}

/* --- список условий: маркеры --- */
.promo-cond__item .ic {
    margin-top: 3px;
}

/* --- блок «нет акций»: показывать только как отдельную демонстрацию --- */
.promo-empty {
    display: none;
}

.promo-empty.is-demo {
    display: flex;
}

/* --- пустой слот бонусов: место зарезервировано --- */
.pcard__bonus--empty {
    visibility: hidden;
}

/* --- фото товаров: прозрачный фон ассетов (_make_transparent.py) --- */
.pcard__img,
.mini__media img,
.cross-item__media img,
.order-item__img img,
.sug-item__img img,
.m-sug-row__img img,
.combine__img img,
.cat-chip__ic img,
.subcat__img img,
.promo-item__img img {
    /* фон уже прозрачный; лёгкая тень отделяет упаковку от плашки */
    filter: drop-shadow(0 6px 10px rgba(18, 58, 99, .07));
}

/* логотипы брендов и ON — фон прозрачный */

/* ==========================================================================
   ФИКСЫ РЕВИЗИИ №2: единый синий, размеры, сетки
   ========================================================================== */

/* --- единый левый край правого рельса (как у панели hero), только desktop --- */
@media (min-width: 1024px) {
    .two-col {
        grid-template-columns: minmax(0, 1fr) 316px;
    }
}

/* --- кнопки баннеров главной: одна высота 48 --- */
.promo-banner .btn {
    height: 48px;
    padding: 0 24px;
}

/* --- фото товаров: заполняют бокс целиком, без обрезки --- */
.pcard__media img {
    max-height: 100%;
    width: auto;
    margin: 0 auto;
}

.mini__media img {
    max-height: 100%;
    width: auto;
}

/* --- бейдж мини-карточки: не наезжает на фото --- */
.mini__media {
    padding-top: 6px;
}

.mini__badge {
    top: -2px;
    left: -2px;
}

/* --- степпер как у кнопок: 48px --- */
.qty {
    height: 48px;
}

/* --- успех: фото шейкера не обрезается --- */
.suc-hero__thanks {
    overflow: hidden;
}

.suc-hero__thanks img {
    right: 4px;
    bottom: 4px;
    width: 104px;
}

/* --- таймлайн: неактивные шаги приглушены, коннекторы симметричны --- */
.tl-step__line {
    margin-left: 6px;
    margin-right: 6px;
}

.tl-step--plain .tl-step__title,
.tl-step--plain .tl-step__text {
    color: var(--muted);
    font-weight: 600;
}

/* --- кросс-сейл: фото на подложке --- */
.cross-item__media {
    background: var(--panel);
    border-radius: var(--r-sm);
    height: 96px;
}

/* --- бренды на главной: лента-слайдер --- */
/* логотипы разной ширины (20…195px), поэтому слайды «по контенту»:
   на десктопе всё влезает, Swiper блокируется и работает space-between,
   на мобильном лента листается свайпом */
.brands-row {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}


/* --- секции: единый вертикальный ритм --- */
.sec {
    margin: 32px 0 0;
}

.social-row {
    margin-top: 6px;
}

/* --- бренд: кнопка «Перейти к каталогу» как остальные --- */
.brand-innov__body .btn {
    height: 44px;
}

/* --- бренд: панели инноваций поровну --- */
.brand-innov {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --- акция детальная: равномерные разделители преимуществ --- */
.promo-feat {
    flex: 1;
}

/* --- категории каталога: 7 плиток в один ряд ---
   auto-fit переносил седьмую плитку («Все категории») на вторую строку;
   на 1366 семь колонок дают по ~178px — текст помещается. */
.subcats {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.subcat--more {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- поиск: рейтинг в одну строку --- */
.sug-item__name,
.pcard__rating {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pcard__rating {
    display: flex;
}

/* --- фото в кросс-сетке успеха: ровный бокс --- */
.cross-item__media img {
    max-height: 80px;
}

/* --- «Вы смотрели» и мини: одинаковые кнопки «+» --- */
.mini__add {
    width: 32px;
    height: 32px;
}

.cross-item__add {
    width: 32px;
    height: 32px;
}

/* --- плашки-подложки: единый токен --- */
.suc-hero__thanks,
.promo-card__code,
.promo-gift,
.brand-why,
.seo-block,
.promo-empty {
    background: var(--tint);
}

/* --- фото на цветных подложках --- */
/* фото со своим светлым фоном — мягко смешиваем с цветной подложкой */
.hero__img,
.promo-banner__img,
.pick-promo img,
.suc-hero__thanks img {
    mix-blend-mode: multiply;
}

/* hero: фото вплотную к низу, без белой кромки */
.hero__img {
    border-radius: var(--r) var(--r) 0 0;
    object-fit: cover;
    object-position: center top;
}

/* фото бренда и соцсети — обычные (не на цветном) */
.brand-hero__photo img,
.social-row__img,
.innov {
    mix-blend-mode: normal;
}

/* --- соцсети: чистые кнопки вместо растровых плиток --- */
.social-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr);
    gap: 14px;
    align-items: stretch;
}

.social-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: #fff;
    transition: border-color .18s ease;
}

.social-btn:hover {
    border-color: var(--blue);
}

.social-btn__ic {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tint);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-btn__ic .ic {
    width: 20px;
    height: 20px;
}

.social-btn__name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.25;
}

.social-btn__meta {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
}

@media (max-width: 1023px) {
    .social-row {
        grid-template-columns: 1fr;
    }
}

/* --- бренды: единый размер логотипов, подложка убрана --- */
.brands-row {
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

/* --- финальные фиксы ревизии №3 --- */

/* hero бренда: фото заполняет карточку по высоте, без пустой полосы сверху */
.brand-hero {
    align-items: stretch;
}

.brand-hero__photo {
    position: relative;
    min-height: 100%;
    height: auto;
}

.brand-hero__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1023px) {
    .brand-hero__photo {
        position: relative;
        min-height: 200px;
        height: 200px;
    }
}

/* логотип бренда — на подложке, без «висящего» прямоугольника */
.brand-hero__logo {
    width: 180px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: var(--panel);
}

/* --- главная: ритм секций и заголовки --- */
.sec {
    margin: 36px 0 0;
}

.sec__h2 {
    font-size: 22px;
}

/* подпись секции «Бренды» больше не дублируется картинкой */
.brands-row {
    min-height: 44px;
}

/* --- успех: равные отступы коннекторов --- */
.tl-step__line {
    margin-left: 8px;
    margin-right: 8px;
}

/* --- категории/соцсети: выравнивание --- */
.cat-chip__ic img,
.subcat__img img {
    filter: drop-shadow(0 5px 8px rgba(18, 58, 99, .06));
}

/* ==========================================================================
   ФИКСЫ РЕВИЗИИ №3: критичные пункты из отчётов
   ========================================================================== */

/* --- главная: заголовки баннеров отдельными строками (были слиты в поток) --- */
.promo-banner__h,
.promo-banner__text,
.promo-banner__h + .promo-banner__text {
    display: block;
}

.promo-banner > span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.promo-banner .btn {
    margin-top: 6px;
}

/* --- заголовок секции + ссылка: не ломаются на две строки --- */
.sec__head {
    flex-wrap: nowrap;
}

.sec__h2 {
    flex: 1;
    min-width: 0;
}

.sec__link {
    flex: none;
    white-space: nowrap;
}

/* --- галерея PDP: бейджи с нормальным зазором --- */
.gal__badges {
    flex-wrap: wrap;
    gap: 6px;
}

/* --- табы: не упираются в край на мобильном ---
   scroll-padding-right отступает контент при горизонтальной прокрутке;
   padding-right не нужен — он ужимал контейнер и давал лишнюю прокрутку */
.pdp-tabs,
.result-tabs {
    scroll-padding-right: 18px;
}

/* --- тап-зоны 44px (все иконочные кнопки) --- */
@media (max-width: 1023px) {
    .mini__add,
    .cross-item__add,
    .sug-item__add,
    .m-sug-row__add,
    .pcard__fav,
    .gal__fav {
        width: 44px;
        height: 44px;
    }

    .mini__add .ic,
    .cross-item__add .ic,
    .sug-item__add .ic,
    .m-sug-row__add .ic {
        width: 18px;
        height: 18px;
    }

    .f-chip {
        height: 40px;
    }

    .m-filter-btn {
        height: 32px;   /* компактный ряд «Фильтры / Сортировка» в одну строку */
    }

    .promo-toolbar .chip {
        height: 44px;
    }

    /* тулбар каталога: переносится, не растягивает контейнер */
    .list-head {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* сортировка на мобильном — кнопка в m-filter-row, селект скрыт */
    .list-head__sort {
        display: none;
    }

    .cat-layout > section,
    .search-layout > section {
        min-width: 0;
    }

    /* пустое состояние акций — в колонку */
    .promo-empty {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .promo-empty .btn {
        width: 100%;
    }

    /* «Почему выбирают»: галочки видны на голубом */
    .brand-why__row .ic {
        color: var(--blue);
    }

    /* условия акции: читаемый ритм */
    .promo-cond__item {
        line-height: 1.55;
    }

    /* название в товарах-участниках: фиксируем 2 строки */
    .promo-item__name {
        min-height: 2.6em;
    }

    /* «Хотите больше выгоды»: заголовок отдельной строкой */
    .promo-gift__h {
        display: block;
    }
}


/* --- плейсхолдер «нет фото»: оставляем скелет карточки --- */
.pcard--nofoto .pcard__name,
.pcard--nofoto .pcard__price-row,
.pcard--nofoto .pcard__stock,
.pcard--nofoto .pcard__btn {
    visibility: hidden;
}

/* --- success: правый паддинг цен в позициях заказа --- */
.order-item__price {
    padding-right: 4px;
}

/* --- поиск: тост «добавлено» — контрастная галочка --- */
.no-results__ic.is-success {
    background: #0aa653;
    color: #fff;
}

/* --- hero: фото полноформатной правой частью баннера (без видимой кромки) --- */
.hero {
    padding: 0;
    align-items: stretch;
}

.hero__text {
    flex: 1;
    min-width: 0;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero__img {
    flex: none;
    width: auto;
    height: 232px;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: multiply;   /* светлый фон фото растворяется в синем баннере */
    align-self: stretch;
}

@media (max-width: 1023px) {
    .hero {
        padding: 0;
    }

    .hero__text {
        padding: 20px 18px;
    }

    .hero__img {
        width: 100%;
        height: 180px;
        border-radius: 0;
    }
}

/* --- фото промо-баннеров: светлый фон растворяем в подложке --- */
.promo-banner__img {
    mix-blend-mode: multiply;
    align-self: center;
    max-height: 96px;
}

/* фото промо-баннеров: прямоугольная студийная съёмка —
   оформляем как вставленную карточку со скруглением (намеренный приём) */
.promo-banner__img {
    border-radius: var(--r);
    box-shadow: 0 10px 24px rgba(18, 58, 99, .12);
    align-self: center;
    max-height: 104px;
    object-fit: cover;
    mix-blend-mode: normal;
}

/* --- промо-баннеры: вырезанные товары вместо фотокропов --- */
.promo-banner__prods {
    flex: none;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 6px 6px 0 0;
}

.promo-banner__prods img {
    width: auto;
    height: 104px;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(18, 58, 99, .16));
}

.promo-banner__prods img:last-child {
    height: 88px;
}

.promo-banner--light .promo-banner__prods img {
    filter: drop-shadow(0 8px 14px rgba(18, 58, 99, .10));
}

/* убрать прежние правила для фото-картинок баннеров */
.promo-banner__img {
    display: none;
}

@media (max-width: 1023px) {
    .promo-banner__prods img {
        height: 78px;
    }

    .promo-banner__prods img:last-child {
        height: 66px;
    }
}

/* --- промо-баннеры: товары вписаны в высоту баннера --- */
.promo-banner {
    align-items: center;
    min-height: 148px;
    padding: 18px 20px;
    overflow: hidden;
}

.promo-banner__prods {
    align-self: center;
    align-items: flex-end;
    padding: 0;
    height: auto;
}

.promo-banner__prods img {
    height: 92px;
    max-height: 92px;
    width: auto;
}

.promo-banner__prods img:last-child {
    height: 74px;
    max-height: 74px;
}

@media (max-width: 1023px) {
    .promo-banner {
        min-height: 128px;
    }

    .promo-banner__prods img {
        height: 72px;
        max-height: 72px;
    }

    .promo-banner__prods img:last-child {
        height: 58px;
        max-height: 58px;
    }
}

/* --- промо: товары в ряд (перебиваем column из общего правила) --- */
.promo-banner > span.promo-banner__prods {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
    flex: none;
}

.promo-banner__prods img {
    height: 84px;
    max-height: 84px;
}

.promo-banner__prods img:last-child {
    height: 68px;
    max-height: 68px;
}

/* ==========================================================================
   ДОБИВКА РЕВИЗИИ: звёзды, склонения, мобильные детали
   ========================================================================== */

/* --- звёзды с частичной заливкой --- */
.stars {
    position: relative;
    display: inline-block;
    line-height: 1;
    font-size: 13px;
    letter-spacing: 1.5px;
    white-space: nowrap;
    vertical-align: -1px;
}

.stars__base {
    color: #d9dee7;
}

.stars__fill {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--fill, 100%);
    overflow: hidden;
    color: #f2a33c;
}

/* на карточках товара крупнее */
.pcard__rating .stars {
    font-size: 14px;
}

.buy__meta .stars {
    font-size: 15px;
}

/* --- таблица состава: группа-подзаголовок --- */
.nutr-table__group th {
    padding-top: 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    background: transparent;
    border-bottom: 0;
}

/* --- PDP: варианты 2 в ряд на мобильном --- */
@media (max-width: 1023px) {
    .variants {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .variant {
        justify-content: center;
    }

    /* цена + бейдж: резервируем высоту под две строки */
    .pcard__price-row {
        min-height: 30px;
        align-content: flex-start;
        align-items: flex-start;
    }

    /* название — до трёх строк, чтобы длинные бренды не обрезались */
    .pcard__name {
        -webkit-line-clamp: 3;
        min-height: 0;
    }

    /* чипы активных фильтров — 44px */
    .f-chip {
        height: 44px;
        padding: 0 14px;
    }

    /* бренды: горизонтальная лента со свайпом и снапом.
       Нативный scroll-snap вместо Swiper: у Swiper со slidesPerView 'auto'
       последний снап не доезжал до края и логотип обрезался на 11px. */
    .brands-row {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 24px;
        overflow-x: auto;
        margin: 0 calc(var(--gutter) * -1);
        padding: 2px var(--gutter) 10px;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 var(--gutter);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .brands-row::-webkit-scrollbar {
        display: none;
    }

    .brands-row__i {
        scroll-snap-align: start;
    }

    .brands-row img {
        max-width: 100%;
    }

    /* блок «Хотите больше выгоды»: заголовок отдельной строкой */
    .promo-gift__h {
        display: block;
    }
}

/* --- комбо на PDP: названия одинаковой высоты --- */
.combine__name {
    display: block;
    min-height: 2.6em;
}

/* --- шапка акции: баннер без обрезки текста (слева лого, справа текст) --- */
.promo-detail-hero img {
    height: auto;
    max-height: 360px;
    object-fit: cover;
    object-position: left center;
}

/* --- группа-подзаголовок таблицы: по левому краю, на всю ширину --- */
.nutr-table__group th {
    text-align: left !important;
}

.nutr-table__group td {
    display: none;
}

/* --- товары бренда: 5 в ряд на desktop, 2 на mobile --- */
.cards-grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.cards-grid--5 .pcard__media {
    /* квадрат вместо 4/3: у большинства товаров фото вертикальные
       (26 из 50 уже 0.7), в квадратном боксе они заполняют площадь
       заметно лучше — 73% против 55% — и при этом не режутся */
    aspect-ratio: 1 / 1;
    padding: 14px 20px;
}

.cards-grid--5 .pcard__img {
    /* фиксированная высота не давала фото расти больше 164px */
    height: auto;
    max-height: 100%;
    width: auto;
    max-width: 100%;
}

@media (max-width: 1023px) {
    .cards-grid--5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .cards-grid--5 .pcard__media {
        aspect-ratio: 1 / 1;
    }
}

/* --- акция: хиро собрано из чистых ассетов (вместо растянутого кропа) --- */
.promo-detail-hero {
    display: flex;
    align-items: center;
    gap: 30px;
    border-radius: var(--r-lg);
    background: #0a1e33;
    padding: 26px 32px;
    min-height: 240px;
    overflow: hidden;
}

.promo-detail-hero__photo {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 18px;
}

.promo-detail-hero__photo img {
    height: 188px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .35));
}

.promo-detail-hero__photo img:last-child {
    height: 148px;
}

.promo-detail-hero__text {
    flex: none;
    width: 300px;
}

.promo-detail-hero__h {
    margin: 0 0 10px;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 700;
    color: #fff;
}

.promo-detail-hero__sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .72);
}

@media (max-width: 1023px) {
    .promo-detail-hero {
        flex-direction: column;
        gap: 18px;
        padding: 22px 18px;
        min-height: 0;
    }

    .promo-detail-hero__photo {
        width: 100%;
    }

    .promo-detail-hero__photo img {
        height: 130px;
    }

    .promo-detail-hero__photo img:last-child {
        height: 100px;
    }

    .promo-detail-hero__text {
        width: 100%;
    }

    .promo-detail-hero__h {
        font-size: 21px;
    }
}

/* --- детальная акции: статус и срок в одну строку над заголовком --- */
.promo-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "badge date"
        "title title"
        "text  text";
    gap: 10px 20px;
    align-items: center;
    margin-bottom: 18px;
}

.promo-top__left {
    display: contents;
}

.promo-top__badge {
    grid-area: badge;
    justify-self: start;
    margin-bottom: 0;
}

.promo-top__h1 {
    grid-area: title;
    margin: 0;
}

.promo-top__text {
    grid-area: text;
    margin: 0;
}

.promo-top__date {
    grid-area: date;
    justify-self: end;
    align-self: center;
}

@media (max-width: 1023px) {
    .promo-top {
        grid-template-columns: 1fr;
        grid-template-areas:
            "badge"
            "title"
            "text"
            "date";
    }

    .promo-top__date {
        justify-self: start;
    }
}

/* --- «Часто покупают вместе»: фото не режем --- */
.combine__item {
    align-items: center;
    min-width: 0;
}

.combine__img {
    /* было 64px — упаковки читались плохо; ассеты пересобраны в 168px */
    width: 84px;
    height: 84px;
    padding: 4px;
}

.combine__img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.combine__name {
    min-height: 0;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   ИНТЕРАКТИВ (Swiper, noUiSlider, табы, тосты)
   ========================================================================== */

/* --- карусель фото в карточке товара --- */
.pcard__gallery {
    width: 100%;
    height: 100%;
    position: relative;
}

.pcard__gallery .swiper-wrapper {
    align-items: center;
    height: 100%;
}

.pcard__gallery .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* точки карусели внутри фото-бокса */
.pcard__dots {
    position: absolute !important;
    bottom: 8px !important;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 4px;
    z-index: 3;
}

.pcard__dots .swiper-pagination-bullet {
    width: 5px;
    height: 5px;
    margin: 0 !important;
    background: #c7d2e0;
    opacity: 1;
    transition: background .18s, width .18s;
}

.pcard__dots .swiper-pagination-bullet-active {
    background: var(--blue);
    width: 14px;
    border-radius: 3px;
}

/* --- hero-слайдер --- */
/* Swiper сам управляет раскладкой слайдов, поэтому снимаем с корня flex.
   min-width:0 обязателен: без него grid-ячейка растягивается под ширину
   всех слайдов (3×975px), и контейнер «уезжает» вправо. */
.hero--slider {
    display: block !important;
    position: relative;
    overflow: hidden;
    min-width: 0;
    width: 100%;
    padding: 0 !important;
    border-radius: var(--r-lg);
    background: var(--blue);
}

.hero--slider .swiper-wrapper {
    align-items: stretch;
}

.hero--slider .swiper-slide {
    height: auto;
}

/* слайд повторяет прежнюю раскладку hero: текст слева, фото справа */
.hero__slide {
    display: flex;
    align-items: stretch;
    gap: 18px;
    min-height: 232px;
    box-sizing: border-box;
}

.hero__slide .hero__text {
    padding: 28px 0 28px 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.hero__slide .hero__img {
    flex: none;
    width: auto;
    height: 232px;
    margin: 0;
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: normal;
    align-self: stretch;
    padding: 0 0 0 0;
}

.hero__slide .btn {
    margin-top: 4px;
}

.hero--slider .hero-dots {
    position: absolute;
    left: 26px;
    bottom: 16px;
    display: flex;
    gap: 6px;
    z-index: 4;
}

.hero-dots__i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: background .2s, width .2s, border-radius .2s;
}

.hero-dots__i.is-active {
    background: #fff;
    width: 22px;
    border-radius: 4px;
}

.hero__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s, background .2s;
}

.hero:hover .hero__nav {
    opacity: 1;
}

.hero__nav:hover {
    background: rgba(255, 255, 255, .38);
}

.hero__nav--prev {
    left: 12px;
}

.hero__nav--next {
    right: 12px;
}

.hero__nav .ic {
    width: 14px;
    height: 14px;
}

/* Одиночное фото (у товара один кадр, без Swiper).
   Без явной высоты цепочка .pcard__single → .swiper-slide → .pcard__img-link
   не давала img определённой высоты: он растягивался по ширине
   (293×477 при боксе 222) и обрезался сверху и снизу. */
.pcard__single {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pcard__single .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* --- ссылки на карточку товара вокруг фото --- */
.pcard__img-link,
.mini__img-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.pcard__img-link {
    max-width: 100%;
    max-height: 100%;
}

/* --- hero-слайд с баннером ---
   Слайд = синяя плашка бренда + фото-панель справа.
   Баннер не растягиваем (contain), поэтому он не искажается;
   текст всегда на сплошном синем — читается на любом баннере. */
/* 340px вместо 460: при прежней высоте панель доверия справа
   растягивалась и внизу оставалось ~200px пустоты */
.hero__slide--img {
    min-height: 340px;
    position: relative;
    background: var(--blue);
}

.hero__slide--img .hero__text {
    max-width: 44%;
    padding: 32px 0 32px 40px;
}

/* фото-панель справа */
.hero__pic {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 58%;
    height: 100%;
    object-fit: cover;
    /* Кадр смещаем от правого края: баннер шире панели, при якоре вправо
       обрезка проходила через фигуру человека. 62% центрирует на связке
       «человек + товар». У каждого баннера своя композиция — правится
       модификатором --pos-*. */
    object-position: 62% center;
    pointer-events: none;
}

/* мягкий переход от синей плашки к фото — без градиента,
   ступенью из полупрозрачного слоя бренда */
.hero__pic::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* У товарного баннера (hero-2) пропорции шире панели: cover обрезал бы
   упаковки по краям — поэтому здесь contain со светлым полем под фон. */
.hero__slide--fit .hero__pic {
    object-fit: contain;
    background: var(--tint);
}

/* --- слайд-баннер: готовая картинка на весь слайд --- */
.hero__slide--banner {
    min-height: 340px;
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
}

.hero__slide--banner .hero__banner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

/* --- промо-дуо: фото-половина баннера --- */
.promo-banner__pic {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 54%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    pointer-events: none;
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
/* у светлого баннера фото стыкуется по правому краю */
.promo-banner--light .promo-banner__pic {
    object-position: center;
}
/* текст не заезжает под фото */
.promo-banner > span:first-child {
    position: relative;
    z-index: 1;
    max-width: 48%;
}

/* --- галерея PDP: слайдер + стрелки --- */
.gal__slider {
    width: 100%;
    height: 100%;
    /* без min-width:0 flex-элемент галереи растягивается под ширину
       всех слайдов (6 × ~600px) и ломает вёрстку на мобильном */
    min-width: 0;
    max-width: 100%;
}

.gal__slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gal__main-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.gal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s, background .18s, color .18s;
}

.gal__main:hover .gal__nav {
    opacity: 1;
}

.gal__nav:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.gal__nav.swiper-button-disabled {
    opacity: 0;
}

.gal__nav--prev {
    left: 12px;
}

.gal__nav--next {
    right: 12px;
}

.gal__nav .ic {
    width: 15px;
    height: 15px;
}

/* --- табы PDP: панели --- */
.pdp-panels {
    margin-bottom: 26px;
}

.pdp-panel {
    display: none;
}

.pdp-panel.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 26px;
    align-items: start;
    animation: panel-in .28s cubic-bezier(.22, .61, .36, 1);
}

.pdp-panel[data-tab-panel="compose"],
.pdp-panel[data-tab-panel="spec"] {
    grid-template-columns: minmax(0, 720px);
}

@keyframes panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.pdp-panel__text {
    min-width: 0;
}

.pdp-panel__aside {
    min-width: 0;
}

/* отзывы */
.reviews-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: var(--panel);
    border-radius: var(--r);
}

.reviews-summary__score {
    font-size: 30px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
}

.reviews-summary__count {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--muted);
}

.review {
    padding: 14px 0;
    border-top: 1px solid var(--border-soft);
}

.review:first-of-type {
    border-top: 0;
}

.review__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}

.review__date {
    font-size: 12.5px;
    color: var(--muted);
}

.review__text {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
}

/* FAQ */
.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 0;
    border: 0;
    border-top: 1px solid var(--border-soft);
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
    text-align: left;
    cursor: pointer;
}

.faq__q .ic {
    width: 14px;
    height: 9px;
    color: var(--muted);
    transition: transform .2s;
}

.faq__q.is-open .ic {
    transform: rotate(180deg);
}

.faq__a {
    display: none;
    padding: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
}

.faq__a.is-open {
    display: block;
}

/* --- noUiSlider: стилизация под дизайн-систему --- */
.range--slider {
    height: 6px !important;
    margin: 20px 8px 24px !important;
    background: #dfe8f2;
    border: 0;
}

.range--slider .noUi-connect {
    background: var(--blue);
}

.range--slider .noUi-handle {
    width: 20px;
    height: 20px;
    top: -7px;
    right: -10px;
    border: 2px solid var(--blue);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(18, 58, 99, .18);
    cursor: grab;
}

.range--slider .noUi-handle:active {
    cursor: grabbing;
}

.range--slider .noUi-handle::before,
.range--slider .noUi-handle::after {
    display: none;
}

.range--slider .noUi-touch-area {
    border-radius: 50%;
}

/* --- тост --- */
.toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 20px);
    z-index: 999;
    max-width: calc(100vw - 32px);
    padding: 14px 24px;
    border-radius: var(--pill);
    background: var(--navy);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;   /* уведомление всегда в одну строку */
    box-shadow: 0 12px 32px rgba(18, 58, 99, .28);
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s, transform .24s;
}

.toast.is-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* --- микроанимации --- */
@keyframes bump {
    0% { transform: scale(1); }
    40% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.is-bump {
    animation: bump .22s ease;
}

@keyframes pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.is-pop {
    animation: pop .26s ease;
}

.btn.is-in-cart {
    background: #0aa653 !important;
}

/* карточка: фото-слайды не должны ломать сетку */
.pcard__media .swiper-slide img.pcard__img {
    max-height: 100%;
}

@media (max-width: 1023px) {
    .pdp-panel.is-active,
    .pdp-panel[data-tab-panel="compose"],
    .pdp-panel[data-tab-panel="spec"] {
        grid-template-columns: 1fr;
    }

    .hero__slide {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hero__nav {
        display: none;
    }

    .pcard__dots {
        bottom: 4px !important;
    }
}

/* ==========================================================================
   РЕВИЗИЯ №4: главная — отступ сверху, хиты-слайдер, бренды
   ========================================================================== */

/* верхний отступ главной убираем: между меню и баннером не должно быть пустоты */
@media (min-width: 1024px) {
    .pg--home {
        padding-top: 0;
    }
}

/* телефоны/планшеты: стрелки слайдера уходят на края карточек */
@media (max-width: 1023px) {
    .sec__head--tabs {
        align-items: center;
        gap: 14px;
    }

    .tabslider__tabs {
        gap: 18px;
    }

    .tabslider__tabs a {
        font-size: 15px;
    }

    .sec__head--tabs .sec__link {
        display: none;
    }

    /* на тач-устройствах слайдер листается свайпом — стрелки в шапке
       только сжимали бы ряд вкладок */
    .tabslider__nav {
        display: none;
    }
}

/* ==========================================================================
   ПОДКАТЕГОРИИ НА МОБИЛЬНОМ: горизонтальная лента со свайпом
   ========================================================================== */
@media (max-width: 1023px) {
    .subcats {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 12px;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
    }

    .subcats::-webkit-scrollbar {
        display: none;
    }

    .subcat {
        flex: none;
        width: auto;
        min-width: 128px;
        max-width: 220px;
        padding: 8px 12px;
        gap: 8px;
        scroll-snap-align: start;
    }

    .subcat--more {
        display: none;
    }

    /* картинки в плитках на мобильном только мешают — скрываем */
    .subcat__img {
        display: none;
    }

    .subcat__name {
        font-size: 13px;
        white-space: nowrap;
    }

    .subcat__count {
        font-size: 12px;
        white-space: nowrap;
    }
}

/* ==========================================================================
   БАННЕРЫ НА ГЛАВНОЙ (hero + промо-дуо)
   ========================================================================== */
@media (max-width:1023px){
  /* hero: фото сверху, текст на синей плашке снизу */
  .hero__slide--img{
    min-height:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
  }
  /* высоту слайдов определяет контент (обёртку синхронизирует JS) */
  .swiper .hero__slide{
    height:auto;
  }
  /* дети текстового слайда не должны сжиматься при низкой обёртке */
  .hero__slide--img .hero__pic,
  .hero__slide--img .hero__text{
    flex:none;
  }
  .hero__slide--img .hero__text{
    max-width:none;
    padding:16px 16px 28px;   /* снизу больше: точки пагинации не наезжают на кнопку */
    position:relative;
    z-index:1;
  }
  .hero__slide--img .hero__h1{
    margin-bottom:8px;
  }
  .hero__slide--img .hero__sub{
    margin-bottom:16px;
  }
  .hero__pic{
    position:static;
    width:100%;
    height:200px;
    order:-1;
  }
  /* баннер-картинка на весь слайд: фиксированная высота, cover по центру.
     Селектор с .swiper — чтобы перебить height:100% у .swiper-slide */
  .swiper .hero__slide--banner{
    min-height:0;
    height:180px;
    border-radius:var(--r-lg);
    overflow:hidden;
  }
  .swiper .hero__slide--banner .hero__banner{
    position:static;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }
  /* точки пагинации читаемы на светлых баннерах */
  .hero--slider .hero-dots{
    left:18px;
    bottom:10px;
    filter:drop-shadow(0 1px 2px rgba(18,58,99,.35));
  }
  /* промо-дуо: фото уже, текст шире — иначе подпись уходила под картинку */
  .promo-banner__pic{width:40%}
  .promo-banner > span:first-child{max-width:60%}
  .promo-banner{padding:16px 14px 16px 18px}
}

/* ==========================================================================
   Мобильные чипы фильтров: компактная горизонтальная лента,
   «Сбросить» — квадратной кнопкой-крестиком в том же ряду
   ========================================================================== */
@media (max-width: 1023px) {
    .f-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        margin: 4px 0 10px;
    }

    .f-chips::-webkit-scrollbar {
        display: none;
    }

    .f-chip {
        flex: none;
        height: 28px;
        padding: 0 10px;
        gap: 5px;
        font-size: 12px;
        white-space: nowrap;
    }

    .f-chip .ic {
        width: 10px;
        height: 10px;
    }

    .f-chip--reset {
        width: 28px;
        padding: 0;
        justify-content: center;
    }

    .f-chip__reset-label {
        display: none;
    }
}

/* ==========================================================================
   Избранное: без сайдбара — 5 карточек в ряд на десктопе, 2 на мобильном
   ========================================================================== */
.cards-grid--fav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

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