/*NOTE: This file is intended for programmers. Aspro technical support is not advised to work with him.*/

/* Examples (uncomment to use):*/

/* Expand site width */
/* body .wrapper { max-width: 1400px !important;  } */

/* Set site background image */
/* body {  background: url(image_source) top no-repeat; }

/* Hide compare button */
/* a.compare_item { display: none !important;  }*/

/* === Символ ₽ — стиль Озон ===
   В шрифте Inter глиф ₽ отсутствует, fallback (Arial/Segoe) рендерит его крупнее
   и жирнее цифр. Уменьшаем и облегчаем — чтобы визуально был как цифры. */
span.rouble-thin {
    font-size: 0.85em;
    font-weight: 500 !important;
    color: inherit;
    margin-left: 1px;
    letter-spacing: 0;
    vertical-align: baseline;
}

/* === Подпись «Бесплатная доставка» — розовая, полужирная, после цены === */
.free-shipping-note {
    display: inline-block !important;
    font-size: 14px;
    line-height: 1.3;
    color: var(--theme-base-color, #e8a2e1);
    margin-left: 8px;
    margin-top: 0;
    font-weight: 600;
    user-select: none;
    letter-spacing: 0.1px;
    white-space: nowrap;
    vertical-align: baseline;
}
@media (max-width: 600px) {
    .free-shipping-note { font-size: 12px; margin-left: 6px; }
}

/* Цена и подпись — в одной строке. Делаем .price (внутри .js-popup-price)
   inline-block, чтобы соседний span подписи стоял рядом, а не на новой строке. */
.js-popup-price > .price,
.catalog-block__info-inner > .price {
    display: inline-block !important;
    vertical-align: baseline;
}
.js-popup-price {
    line-height: 1.3;
}

/* В корзине / мини-корзине / чекауте — надпись блочно ПОД ценой */
.basket-checkout-block-total-inner .free-shipping-note,
.cart-total .free-shipping-note,
.cart-total__value .free-shipping-note,
.co-summary .free-shipping-note,
.dropdown-product-foot .free-shipping-note {
    display: block !important;
    margin-left: 0;
    margin-top: 6px;
    font-size: 13px;
    white-space: normal;
}

/* 06.05.2026 — скрываем «Заказать звонок» внутри dropdown'а с телефоном
   (захардкожен в bitrix/modules/aspro.lite/classes/general/CLite.php, core не правим). */
.phones__dropdown-item.callback-item { display: none !important; }

/* 06.05.2026 — скрываем кнопку «Сравнить» на карточках товара
   (опция CATALOG_COMPARE=N не убирает кнопку из разметки, поэтому добиваем CSS-ом). */
.item-action--compare { display: none !important; }

/* 11.05.2026 — Откат full-width-баннера (правка 06.05.2026 снята).
   Заказчик попросил вернуть баннер в стандартную ширину — он был
   единственным элементом главной шире остального контента. Достаточно
   убрать override на .maxwidth-banner.maxwidth-theme: дефолтная ширина
   Аспро (var(--theme-page-width) ≈1402px) применится автоматически.
   Скругление 16px оставляем — выглядит хорошо и в bounded-режиме. */
.banners-big .main-slider__item.rounded-x,
.banners-big .banners-big__item {
    border-radius: 16px !important;
}

/* 06.05.2026 — Сердечко «В избранное»: заливка розовым в активном состоянии.
   Спрайт catalog/item_icons.svg#favorite-18-16 нарисован fill-rule:evenodd
   (одна path с outer+inner subpath = контур). При .active правило
   .item-action.active svg * { fill: ... } красит только обводку, внутри
   остаётся пусто. Подменяем иконку на full-filled heart через CSS mask на
   самом <i class="svg"> — внутренний <svg> прячем visibility:hidden, чтобы
   его layout-box (18x16) сохранил размер контейнера, а мы рисуем заливку
   маской того же size + background-color поверх. */
.item-action.item-action--favorite.active .svg svg { visibility: hidden; }
.item-action.item-action--favorite.active .svg {
    background-color: var(--theme-base-color, #e8a2e1);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M1.381 1.82174C2.34318 0.674873 3.76177 0 5.52098 0C6.96294 0 8.14387 0.713899 8.99703 1.68332C9.84131 0.715432 11.012 0 12.4767 0C14.2583 0 15.681 0.671889 16.6405 1.8248C17.5794 2.95299 18 4.44961 18 6C18 8.44511 16.4984 10.5773 14.7999 12.2017C13.0767 13.8498 10.9846 15.1367 9.44211 15.897C9.1607 16.0357 8.83051 16.0343 8.55028 15.8932C7.01127 15.1183 4.92111 13.825 3.19921 12.1782C1.50328 10.5562 0 8.4318 0 6C0 4.44191 0.437452 2.9464 1.381 1.82174Z'/%3E%3C/svg%3E") no-repeat center / 18px 16px;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M1.381 1.82174C2.34318 0.674873 3.76177 0 5.52098 0C6.96294 0 8.14387 0.713899 8.99703 1.68332C9.84131 0.715432 11.012 0 12.4767 0C14.2583 0 15.681 0.671889 16.6405 1.8248C17.5794 2.95299 18 4.44961 18 6C18 8.44511 16.4984 10.5773 14.7999 12.2017C13.0767 13.8498 10.9846 15.1367 9.44211 15.897C9.1607 16.0357 8.83051 16.0343 8.55028 15.8932C7.01127 15.1183 4.92111 13.825 3.19921 12.1782C1.50328 10.5562 0 8.4318 0 6C0 4.44191 0.437452 2.9464 1.381 1.82174Z'/%3E%3C/svg%3E") no-repeat center / 18px 16px;
    opacity: 1 !important;
}

/* 06.05.2026 — Скруглённые углы фото товара на hover.
   styles.css задаёт .catalog-block__item:hover .section-gallery-wrapper img
   { transform: scale(1.03) } — картинка увеличивается на 3% и её собственный
   border-radius (от .section-gallery-wrapper__item img: var(--border-radius))
   уходит за пределы видимой области. Контейнер .section-gallery-wrapper уже
   имеет overflow:hidden, но без border-radius — отсюда острые углы при hover.
   Добавляем border-radius самому wrapper'у: clip совпадает со статичным
   состоянием, зазор между сердечком и фото становится постоянным. */
.catalog-block__item .section-gallery-wrapper,
.catalog-list__item .section-gallery-wrapper {
    border-radius: var(--border-radius, 8px);
}

/* 06.05.2026 — скрываем кнопку «Загрузить ещё» в каталоге.
   Заказчик хочет оставить только нумерованную пагинацию (1 / 2 / 3).
   Кнопка рендерится в bitrix/templates/aspro-lite/components/bitrix/system.pagenavigation/{main,ajax}/template.php
   как .ajax_load_btn — скрытие через CSS не ломает SEO-разметку <link rel="next">. */
.ajax_load_btn { display: none !important; }

/* 09.05.2026 → 11.05.2026 — Tilda-style «pill»-кнопки. Изначально жили в
   .header__top-part, 11.05.2026 переехали в .header__bottom-part (тот же ряд,
   что и быстрые категории) — сам .header__top-part удалён вместе с дублирующим
   телефоном и переключателем темы. Цвет — брендовый --theme-base-color
   (#e8a2e1). Перебиваем дефолтные классы Aspro (header-menu__link--top-level
   + light-opacity-hover + fill-theme-hover + banner-light-text + dark_link).
   !important точечно — иначе theme-selector перекрашивает кнопки через
   CSS-переменные темы. */
.header_3 .header__bottom-part .header-menu__link.header-menu__link--top-level {
    display: inline-flex !important;
    align-items: center;
    background: var(--theme-base-color, #e8a2e1) !important;
    color: #fff !important;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .03em;
    font-size: 12px;
    line-height: 1;
    padding: 7px 16px !important;
    border-radius: 22px !important;
    margin: 0 3px;
    transition: filter .15s ease, opacity .15s ease;
    opacity: 1 !important;
}
.header_3 .header__bottom-part .header-menu__link.header-menu__link--top-level .header-menu__title {
    color: #fff !important;
}
.header_3 .header__bottom-part .header-menu__link.header-menu__link--top-level:hover,
.header_3 .header__bottom-part .header-menu__link.header-menu__link--top-level:focus {
    background: var(--theme-base-color, #e8a2e1) !important;
    color: #fff !important;
    opacity: 1 !important;
    filter: brightness(0.92);
    text-decoration: none;
}
/* 09.06.2026 — 2-я и 3-я pill (ПРЕМИУМ / ХИТЫ) — контур без заливки.
   1-я (АКЦИИ) остаётся залитой. Таргет по href (надёжнее nth-child —
   меню динамическое из top.menu.php). Обводка через inset box-shadow,
   чтобы габариты совпадали с залитой pill (border сдвинул бы геометрию). */
.header_3 .header__bottom-part .header-menu__link.header-menu__link--top-level[href*="/catalog/premium/"],
.header_3 .header__bottom-part .header-menu__link.header-menu__link--top-level[href*="/catalog/khity/"] {
    background: transparent !important;
    color: var(--theme-base-color, #e8a2e1) !important;
    box-shadow: inset 0 0 0 1.5px var(--theme-base-color, #e8a2e1);
}
.header_3 .header__bottom-part .header-menu__link.header-menu__link--top-level[href*="/catalog/premium/"] .header-menu__title,
.header_3 .header__bottom-part .header-menu__link.header-menu__link--top-level[href*="/catalog/khity/"] .header-menu__title {
    color: var(--theme-base-color, #e8a2e1) !important;
}
/* hover — заливаем брендовым (как у активной залитой pill) */
.header_3 .header__bottom-part .header-menu__link.header-menu__link--top-level[href*="/catalog/premium/"]:hover,
.header_3 .header__bottom-part .header-menu__link.header-menu__link--top-level[href*="/catalog/khity/"]:hover {
    background: var(--theme-base-color, #e8a2e1) !important;
    color: #fff !important;
}
.header_3 .header__bottom-part .header-menu__link.header-menu__link--top-level[href*="/catalog/premium/"]:hover .header-menu__title,
.header_3 .header__bottom-part .header-menu__link.header-menu__link--top-level[href*="/catalog/khity/"]:hover .header-menu__title {
    color: #fff !important;
}
/* Скрываем «…» оверфлоу-индикатор Аспро для пилл-меню — наши 3 пилла всегда помещаются */
.header_3 .header__bottom-part .header__bottom-pills .header-menu__item--more-items { display: none !important; }
/* Убираем точки-разделители между пунктами */
.header_3 .header__bottom-part .header__bottom-pills .header-menu__item--top-level + .header-menu__item--top-level::before,
.header_3 .header__bottom-part .header__bottom-pills .menu-dot,
.header_3 .header__bottom-part .header__bottom-pills .dot { display: none !important; }

/* Контейнер пиллов — flex с gap, чтобы пилла не сжималась и не уезжала на «…» */
.header_3 .header__bottom-part .header__bottom-pills .header-menu__wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* 11.05.2026 — пиллы стоят слева, отделены отступом от .header-quick-cats */
.header_3 .header__bottom-part .header__bottom-pills {
    flex: 0 0 auto;
    margin-right: 16px;
}

/* Быстрые ссылки на категории в нижнем ряду — продолжают строку после пиллов */
.header-quick-cats {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.header-quick-cats__link {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .03em;
    color: #1f1f1f;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.header-quick-cats__link:hover,
.header-quick-cats__link:focus {
    color: var(--theme-base-color, #e8a2e1);
    text-decoration: none;
}
@media (max-width: 1280px) {
    .header-quick-cats__link:nth-child(n+5) { display: none; }
}
@media (max-width: 991px) {
    .header_3 .header__bottom-part { display: none !important; }
}

/* === 16.05.2026 — Фикс ломки шапки в зоне 700-991px на десктопном UA ===
   Десктопный шаблон aspro-lite UA-детектом отдаётся даже узкому окну. При
   ширине <992px Аспро показывает в DOM мобильную шапку header_mobile_1.php
   (она всегда в HTML — переключение через CSS). В мобильной шапке есть три
   блока, чьи стили жили только в aspro-lite-mobile/css/custom.css и не
   попадали сюда — отсюда «текст вместо пилл» и фиксированная нижняя панель.
   Портируем стили под @media (max-width: 991px). */
@media (max-width: 991px) {
    /* Pill-кнопки (АКЦИИ/ПРЕМИУМ/ХИТЫ) мобильной шапки */
    .ship-mobile-pills {
        display: flex;
        gap: 6px;
        padding: 8px 12px;
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
        max-width: 100%;
    }
    .ship-mobile-pills::-webkit-scrollbar { display: none; }
    .ship-mobile-pill {
        flex: 1 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--theme-base-color, #e8a2e1);
        color: #fff !important;
        text-decoration: none !important;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: .03em;
        font-size: 12px;
        line-height: 1;
        padding: 9px 16px;
        border-radius: 22px;
        transition: filter .15s ease;
        white-space: nowrap;
        min-height: 36px;
    }
    .ship-mobile-pill:hover,
    .ship-mobile-pill:focus { filter: brightness(0.92); color: #fff !important; }
    .ship-mobile-pill:active { transform: translateY(1px); }

    /* Быстрые ссылки к категориям (горизонтальная лента) */
    .ship-mobile-quick-cats {
        display: flex;
        gap: 16px;
        padding: 8px 12px 10px;
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        box-sizing: border-box;
        max-width: 100%;
    }
    .ship-mobile-quick-cats::-webkit-scrollbar { display: none; }
    .ship-mobile-quick-cats__link {
        flex: 0 0 auto;
        color: #1a1a1a !important;
        text-decoration: none !important;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        padding: 6px 0;
        scroll-snap-align: start;
        transition: color .15s ease;
    }
    .ship-mobile-quick-cats__link:hover,
    .ship-mobile-quick-cats__link:focus { color: var(--theme-base-color, #e8a2e1) !important; }

    /* === 07.06.2026 — Таблетки категорий в ОДИН ряд (как на ПК). Зеркало
       aspro-lite-mobile/css/custom.css. Объединили .ship-mobile-pills +
       .ship-mobile-quick-cats в .ship-mobile-catbar: первые 3 выделенные pill'ы,
       дальше обычные ссылки. Стили самих элементов переиспользуются. */
    .ship-mobile-catbar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        box-sizing: border-box;
        max-width: 100%;
    }
    .ship-mobile-catbar::-webkit-scrollbar { display: none; }
    .ship-mobile-catbar .ship-mobile-pill { flex: 0 0 auto; scroll-snap-align: start; }
    .ship-mobile-catbar .ship-mobile-quick-cats__link { flex: 0 0 auto; }
    /* 19.06.2026 — первая таблетка прилипала к левому краю: scroll-snap-align:start
       съедает padding-left ленты. Реальный отступ — margin на первой ячейке. */
    .ship-mobile-catbar > :first-child { margin-left: 14px; }
    .ship-mobile-catbar { scroll-padding-left: 14px; }

    /* 09.06.2026 — 2-я и 3-я pill (ПРЕМИУМ / ХИТЫ) — контур без заливки
       (зеркало aspro-lite-mobile/custom.css; этот блок — для DevTools responsive). */
    .ship-mobile-catbar .ship-mobile-pill[href="/catalog/premium/"],
    .ship-mobile-catbar .ship-mobile-pill[href="/catalog/khity/"] {
        background: transparent;
        color: var(--theme-base-color, #e8a2e1) !important;
        box-shadow: inset 0 0 0 1.5px var(--theme-base-color, #e8a2e1);
    }
    .ship-mobile-catbar .ship-mobile-pill[href="/catalog/premium/"]:hover,
    .ship-mobile-catbar .ship-mobile-pill[href="/catalog/khity/"]:hover,
    .ship-mobile-catbar .ship-mobile-pill[href="/catalog/premium/"]:active,
    .ship-mobile-catbar .ship-mobile-pill[href="/catalog/khity/"]:active {
        background: var(--theme-base-color, #e8a2e1);
        color: #fff !important;
    }
}

/* Нижняя фиксированная панель Аспро (bottom-icons-panel) дублирует функционал
   шапки и содержит demo-ссылки — скрываем всегда на десктопном шаблоне.
   На aspro-lite-mobile аналогичное правило уже есть (12.05.2026). */
.bottom-icons-panel,
.bottom-icons-panel-wrap,
.js-bottom-icons-panel { display: none !important; }
body.body-has-bottom-icons-panel,
body.has-bottom-icons-panel { padding-bottom: 0 !important; }

/* 16.05.2026 — выравнивание иконок в мобильной шапке (применяется и при
   ресайзе десктоп-окна <992px, когда показывается mobileheader_1.php).
   Лейбл «Смехов» у кабинета скрываем — он делал колонку выше остальных и
   ломал выравнивание. Зеркало правила из aspro-lite-mobile/custom.css. */
.mobileheader__item--right-icons > .line-block,
.mobileheader__item:first-child > .line-block {
    align-items: center !important;
}
.mobileheader__item--right-icons > .line-block > .line-block__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}
.mobileheader__item--right-icons > .line-block > .line-block__item > *,
.mobileheader__item--right-icons > .line-block > .line-block__item > * > *,
.mobileheader__item--right-icons > .line-block > .line-block__item > * > * > * {
    display: flex;
    align-items: center;
    height: 100%;
}
.mobileheader__item--right-icons .header-cart,
.mobileheader__item--right-icons .basket.top,
.mobileheader__item--right-icons .basket.top > a,
.mobileheader__item--right-icons .header-cart__inner {
    display: flex !important;
    align-items: center;
    height: 100%;
}
.mobileheader__item--right-icons .header-cart svg,
.mobileheader__item--right-icons .header-personal-link svg,
.mobileheader__item--right-icons .icon-block-with-counter svg {
    display: block;
    vertical-align: middle;
}
.mobileheader .header-personal-link .header-personal-label {
    display: none;
}
.mobileheader .header-personal-link > a {
    justify-content: center;
}

/* === side-баннер выпадающего меню «Каталог» (override aspro:com.banners.lite/wide_menu) === */
/* 09.05.2026: добавлена надпись поверх картинки. */
.header-menu__wide-right-part .side_banners__item-img {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 24px;
    background-size: cover !important;
    min-height: 100%;
}
.header-menu__wide-right-part .side_banners__caption {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .01em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
.header-menu__wide-right-part .side_banners__item-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 55%);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

/* === Миниатюры категорий в поповере «Каталог»: крупнее + скругление === */
/* 10.05.2026: 56→72 px (отображение), физически 80×80 для retina; border-radius 12px.
   Селектор сужен на .header-menu__dropdown-menu--grids — это обёртка списка
   категорий именно в выпадающем «Каталоге». !important перебивает bundled
   стили шаблона Аспро (template_styles.css), которые жёстко задают 56 px. */
.header-menu__dropdown-menu--grids .header-menu__dropdown-item-img,
.header-menu__dropdown-menu--grids .header-menu__dropdown-item-img-inner {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    flex: 0 0 72px !important;
}
.header-menu__dropdown-menu--grids .header-menu__dropdown-item-img-inner img,
.header-menu__dropdown-menu--grids .header-menu__dropdown-item-img img {
    width: 72px !important;
    height: 72px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    overflow: hidden;
}
.header-menu__dropdown-menu--grids .header-menu__dropdown-item-img-inner {
    border-radius: 12px;
    overflow: hidden;
}
.header-menu__dropdown-menu--grids .header-menu__dropdown-item--img-LEFT .header-menu__wide-item-wrapper {
    padding-left: 16px;
}

/* 10.05.2026 — На карточке товара кнопка «В корзину» должна быть такой же
   ширины, как «Купить в 1 клик». styles.css:1905-1908 ставит
   .item-action--basket в display:inline-flex (для тайлов каталога — там
   так задумано), и эта правка побочно сжимает обёртку до ширины текста на
   странице товара. Внутренняя <span class="btn btn-wide"> не может растянуться
   шире своего inline-flex родителя. Возвращаем full-width только на детали. */
.catalog-detail .buy_block .item-action--basket,
.catalog-element .buy_block .item-action--basket {
    display: flex !important;
    width: 100% !important;
}

/* 20.06.2026 — Цвета кнопок на детальной странице (ПК): зеркало плиток.
   «Купить» — розовая (--theme-base-color), hover чуть темнее #dc8fd4;
   «Купить в 1 клик» — серая (#f3f5f9 / #222), hover розовый.
   Раньше десктоп-детальная брала дефолт Аспро — теперь раскладка единая. */
.catalog-detail .buy_block .item-action--basket .btn:not(.btn-ocb),
.catalog-detail .buy_block .item-action--basket .to_cart:not(.btn-ocb),
.catalog-element .buy_block .item-action--basket .btn:not(.btn-ocb),
.catalog-element .buy_block .item-action--basket .to_cart:not(.btn-ocb) {
    background-color: var(--theme-base-color, #e8a2e1) !important;
    border-color: var(--theme-base-color, #e8a2e1) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.catalog-detail .buy_block .item-action--basket .btn:not(.btn-ocb):hover,
.catalog-detail .buy_block .item-action--basket .to_cart:not(.btn-ocb):hover,
.catalog-element .buy_block .item-action--basket .btn:not(.btn-ocb):hover,
.catalog-element .buy_block .item-action--basket .to_cart:not(.btn-ocb):hover {
    background-color: #dc8fd4 !important;
    border-color: #dc8fd4 !important;
    color: #fff !important;
}
.catalog-detail .buy_block .btn-ocb,
.catalog-element .buy_block .btn-ocb {
    background-color: #f3f5f9 !important;
    border-color: #f3f5f9 !important;
    color: #222 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.catalog-detail .buy_block .btn-ocb:hover,
.catalog-element .buy_block .btn-ocb:hover {
    background-color: var(--theme-base-color, #e8a2e1) !important;
    border-color: var(--theme-base-color, #e8a2e1) !important;
    color: #fff !important;
}

/* 20.06.2026 — ПК детальная: «Купить» и «Купить в 1 клик» одного размера.
   Корень: «Купить» (.item-action--basket > .to_cart, btn-lg) обёрнута в span
   .item-action--basket, которому styles.css ставит inline-flex → он сжимается
   по контенту и кнопка выходит уже, чем OCB (.btn-ocb, btn-md, на всю ширину
   .line-block__item). Форсим обе на 100% ширины и единую высоту 52px. */
.catalog-detail .buy_block .buttons .line-block__item,
.catalog-element .buy_block .buttons .line-block__item {
    width: 100% !important;
}
.catalog-detail .buy_block .item-action--basket,
.catalog-element .buy_block .item-action--basket {
    display: flex !important;
    width: 100% !important;
}
.catalog-detail .buy_block .item-action--basket .btn.to_cart,
.catalog-detail .buy_block .item-action--basket .btn.in_cart,
.catalog-detail .buy_block .btn-ocb,
.catalog-element .buy_block .item-action--basket .btn.to_cart,
.catalog-element .buy_block .item-action--basket .btn.in_cart,
.catalog-element .buy_block .btn-ocb {
    width: 100% !important;
    min-height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 10.05.2026 — Скрыть ссылку «Подробности» под превью-описанием на карточке
   товара. Аспро рендерит её как якорь к табу «Описание» (data-block="desc"),
   но детальный текст у наших букетов совпадает с превью — ссылка ведёт «в
   никуда» и сбивает клиента. */
.catalog-detail .js-detail-description-anchor { display: none !important; }

/* 12.05.2026 — Полоса фильтра по цене (главная + все категории).
   Разметка — local/include/category_price_filter.php; на главной подключается
   напрямую из main_random_categories.php, на /catalog/<code>/ — через
   AddViewContent('top_section_filter_content', …) из local/php_interface/init.php. */
.ship-price-filter {
    background: #f4f4f6;
    border-radius: 16px;
    padding: 18px 28px;
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 18px 0 28px;
    flex-wrap: wrap;
}
.ship-price-filter__label {
    display: inline-flex; align-items: center; gap: 10px;
    color: #555; font-weight: 500; text-transform: uppercase;
    font-size: 13px; letter-spacing: 0.04em;
    white-space: nowrap;
}
.ship-price-filter__icon { color: #555; flex-shrink: 0; }
.ship-price-filter__buttons {
    display: flex; gap: 12px; flex: 1;
    flex-wrap: wrap; justify-content: flex-start;
}
.ship-price-filter__btn {
    background: var(--theme-base-color, #E8A2E1);
    color: #fff !important;
    text-decoration: none !important;
    padding: 13px 28px;
    min-width: 110px;
    border-radius: 14px;
    text-align: center;
    font-size: 16px; font-weight: 500;
    transition: filter .15s, transform .1s;
    flex: 1 1 auto;
}
.ship-price-filter__btn:hover { filter: brightness(0.93); }
.ship-price-filter__btn--active {
    background: #2a2a2a;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
/* 21.05.2026 — Мобильный фильтр по цене: одна строка как на Тильде.
   Лейбл «Фильтр по цене» прячем (font-size:0), оставляем только SVG-иконку
   слева; кнопки flex-nowrap одной строкой, равной ширины. Зеркало для
   desktop-шаблона (применяется при ресайзе окна десктопа <768px). */
@media (max-width: 768px) {
    .ship-price-filter {
        flex-direction: row;
        align-items: center;
        padding: 10px 12px;
        gap: 8px;
        margin: 6px 0 14px;
        flex-wrap: nowrap;
    }
    .ship-price-filter__label {
        font-size: 0;
        line-height: 0;
        gap: 0;
        flex-shrink: 0;
        align-self: center;
    }
    .ship-price-filter__icon {
        width: 22px;
        height: 18px;
    }
    .ship-price-filter__buttons {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        flex: 1 1 auto;
        width: auto;
    }
    .ship-price-filter__btn {
        padding: 8px 2px;
        min-width: 0;
        font-size: 11px;
        font-weight: 500;
        border-radius: 10px;
        flex: 1 1 0;
        white-space: nowrap;
    }
}

/* Скрыть штатный слайдер цен Аспро smart filter — заменён нашими кнопками. */
.bx_filter_parameters_box.prices { display: none !important; }

/* === 15.05.2026 — Слайдер-баннер на главной: розовые «плюсики» преимуществ ===
   Список преимуществ баннера (PREVIEW_TEXT = <ul class="banner-plus-list">)
   оформляем как на Тильде — розовый кружок с белым «+» вместо маркера.
   Применяется ко всем баннерам в ротации инфоблока aspro_lite_advtbig. */
.banners-big .banner-plus-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.banners-big .banner-plus-list li {
    position: relative;
    padding-left: 40px;
    line-height: 1.3;
}
.banners-big .banner-plus-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    /* «+» нарисован двумя белыми полосами через градиенты — идеально по центру,
       без зависимости от метрик шрифта (глиф "+" центрировался криво). */
    background-color: var(--theme-base-color, #E8A2E1);
    background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
    background-size: 11px 1px, 1px 11px;
    background-position: center, center;
    background-repeat: no-repeat;
}

/* === 19.05.2026 — Точки переключения баннеров: Tilda-style ===
   Заказчик попросил подравнять под Тильду: solid-белый активный + полупрозрачные
   белые неактивные, все одного размера, поверх картинки баннера (не под ней).
   Заменяет правку 15.05.2026 (мелкие точки в серой полосе под баннером).

   Штатный .banners-big__nav-wrap — absolute, full-width, flex-end (точки+стрелки
   справа). Вытаскиваем .swiper-pagination в центр и смещаем вверх на 18px, чтобы
   точки легли на тёмное поле картинки, а не на серый фон страницы. Стрелки уже
   скрыты ниже (.slider-nav display:none). */
.banners-big .maxwidth-banner .banners-big__nav-wrap .swiper-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    margin-left: auto;
    margin-right: auto;
    width: -moz-max-content;
    width: max-content;
    max-width: 90%;
    padding: 0;
    justify-content: center;
    z-index: 4;
}
/* Сплошные белые круги одинакового размера 10×10px.
   Аспро использует контейнер-кружок + внутренний :before (мини-точка) —
   прячем :before, чтобы получить чистый solid-look как у Тильды. */
.banners-big .swiper-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.45);
    opacity: 1;
    border: 0;
    transition: background-color .2s ease;
}
.banners-big .swiper-pagination .swiper-pagination-bullet:before {
    display: none;
}
.banners-big .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #fff;
}
/* стрелки влево/вправо у баннера убраны полностью — остаются только точки */
.banners-big .slider-nav-wrap,
.banners-big .banners-big__nav-wrap .slider-nav { display: none !important; }

/* === 19.05.2026 — Сдвиг фокуса баннера вправо на мобиле ===
   На узком вьюпорте дефолт Аспро `background-position: center bottom`
   (banners.css:68) обрезает правую часть фото, где у нас субъект (девушка
   с букетом). Сдвигаем точку фокуса в правую часть, чтобы букет был
   виден. На десктопе оставляем штатный crop — там ширина достаточная. */
@media (max-width: 991px) {
    .banners-big .main-slider__item,
    .banners-big .banners-big__item {
        background-position: 75% center !important;
    }
}

/* === 19.05.2026 — Текст баннера слева на мобиле ===
   Аспро для banners-big--adaptive-1 на <768px (banners.css:743-748) ставит
   `align-items: center; text-align: center` — тексты USP-списка отрываются
   от розовых +-плюсиков, которые торчат у левого края. Возвращаем левое
   выравнивание для блока текста и кнопки, чтобы было как в preview мока:
   текст сразу за плюсиками, кнопка тоже у левого края. */
@media (max-width: 768px) {
    .banners-big.banners-big--adaptive-1 .banners-big__text {
        align-items: flex-start;
        text-align: left;
    }
    .banners-big.banners-big--adaptive-1 .banners-big__buttons {
        justify-content: flex-start;
    }
}

/* 16.05.2026 — стикеры у заголовков разделов (Tilda-style pill).
   Источник — UF-поле UF_TITLE_STICKER на разделах IB=40. Рендерится слева от
   H1 страницы раздела (local/include/title_sticker.php) и у заголовков блоков
   категорий на главной (main_random_categories.php). См. CLAUDE_BITRIX.md. */
.title-sticker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--theme-base-color, #e8a2e1);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}
.title-sticker__icon {
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}
/* SALE → такая же растянутая «таблетка», как у текстовых стикеров, только со значком «%» */
@media (max-width: 600px) {
    .title-sticker { font-size: 11px; padding: 1px 7px; margin-right: 6px; }
}


/* === 17.05.2026 — Выравнивание высоты кнопки «Купить» на плитках каталога ===
   На SKU-плитках Аспро рендерит <button class="...btn-sm js-replace-more">,
   на solo-плитках — <span class="...btn-lg to_cart">. Из-за этого в одной
   строке каталога часть кнопок 47px (btn-lg), часть 35px (btn-sm).
   Приводим .to_cart.btn-lg к sm-размерам, переопределяя CSS-переменные.
   Селектор `.item-action--basket .to_cart.btn-lg` живёт в шаблонах плиток
   (/lib/product/basket.php:311), а на детальной карточке кнопка лежит в
   `.actions-row .item-action--basket` — её НЕ трогаем, поэтому добавлен
   родитель `.line-block__item.item-action-container` (есть только в плитках). */
.line-block__item.item-action-container .item-action--basket .to_cart.btn-lg {
    --button-height: 35px;
    --button-font-size: 0.875rem;
    --button-pl: 16px;
    --button-pr: 16px;
}


/* === 20.05.2026 — Мобильные карточки товара: портретный бокс 4:5 + cover ===
   Аспро по умолчанию даёт квадратный бокс (.image-list-wrapper { padding-top:
   100% }) с contain-фитом — портретные фото букетов летят с пустотами по
   бокам, «иконки» получаются разной ширины и мелкие. Делаем как у Tilda:
   125% (4:5) + object-fit cover → все одной формы, букет на весь бокс. */
@media (max-width: 991px) {
    .catalog-block__item .image-list-wrapper,
    .catalog-list__item .image-list-wrapper {
        padding-top: 125%;
    }
    /* Слой стикеров (sticker/economy/side-icons) поверх фото — нужен тот же
       aspect-ratio, иначе бейджи «-38%» уедут вниз за пределы фото. */
    .catalog-block__item .properties-absolute-outer,
    .catalog-list__item .properties-absolute-outer {
        padding-top: 125%;
    }
    .catalog-block__item .properties-absolute-outer.properties-absolute-margin,
    .catalog-list__item .properties-absolute-outer.properties-absolute-margin {
        padding-top: calc(125% + 28px);
    }
    /* Cover-фит: фото заполняет бокс, лишнее обрезается. Аспро дефолтно ставит
       max-width/max-height:100% — это contain. Снимаем оба, выставляем
       width/height:100% + object-fit:cover. object-position:center top —
       букет обычно вверху кадра, при кропе срезаем низ (ноги/одежду флориста). */
    .catalog-block__item .image-list-wrapper img,
    .catalog-block__item .section-gallery-wrapper__item img,
    .catalog-list__item .image-list-wrapper img,
    .catalog-list__item .section-gallery-wrapper__item img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover;
        object-position: center top;
    }
}


/* === 20.05.2026 v2 — Мобильные карточки товара: портретный бокс 4:5 + contain ===
   v1 (выше с object-fit:cover + center top) обрезал верх/низ фото — отрезалась
   голова флориста на 15 Кенийских / Пятиэтажке. Переходим на contain: фото
   укладывается целиком, букет+флорист видны полностью как у Tilda. Источники
   в МС обычно 4:5 (1311×1638), идеально совпадают с боксом 125%. Если фото
   шире/уже — появятся небольшие поля по краям, это лучше, чем обрезка. */
@media (max-width: 991px) {
    .catalog-block__item .image-list-wrapper img,
    .catalog-block__item .section-gallery-wrapper__item img,
    .catalog-list__item .image-list-wrapper img,
    .catalog-list__item .section-gallery-wrapper__item img {
        object-fit: contain !important;
        object-position: center center !important;
    }
}


/* === 20.05.2026 v3 — Фото товара на мобиле: 3:4 + full-bleed (как у Tilda) ===
   v1/v2 поставили 4:5 contain. Заказчик хочет: 1) бокс выше, как у Tilda
   (DevTools: 186×248 → 1.33 = 3:4); 2) фото касается краёв карточки (без
   12px белого зазора). 3) Кнопка «Сравнить» (.item-action--compare) убрана
   глобально — заказчик ей не пользуется. */
@media (max-width: 991px) {
    /* Бокс 3:4 (перекрывает 125% из v1) */
    .catalog-block__item .image-list-wrapper,
    .catalog-list__item .image-list-wrapper {
        padding-top: 133%;
    }
    .catalog-block__item .properties-absolute-outer,
    .catalog-list__item .properties-absolute-outer {
        padding-top: 133%;
    }
    .catalog-block__item .properties-absolute-outer.properties-absolute-margin,
    .catalog-list__item .properties-absolute-outer.properties-absolute-margin {
        padding-top: calc(133% + 28px);
    }

    /* Фото выходит за padding карточки — full-bleed к краям и верху.
       Снизу margin:0 — текст/кнопки остаются на месте, в пределах padding'а. */
    .catalog-block__item .image-list-outer,
    .catalog-list__item .image-list-outer {
        width: auto;
        margin: calc(-1 * var(--catalog-block-padding, 12px))
                calc(-1 * var(--catalog-block-padding, 12px))
                0;
    }

    /* Верхние углы фото скруглить по форме карточки, нижние оставить
       прямыми — стыкуются с текстовой зоной. overflow:hidden обрезает
       img внутри по этой форме. Внутренние radius'ы Аспро (8px у .section-gallery-wrapper
       и у .section-gallery-wrapper__item img) обнуляем — иначе видны лишние округления. */
    .catalog-block__item .image-list-outer .image-list__link,
    .catalog-list__item .image-list-outer .image-list__link {
        border-radius: var(--catalog-block-radius, 12px)
                       var(--catalog-block-radius, 12px) 0 0;
        overflow: hidden;
    }
    .catalog-block__item .section-gallery-wrapper,
    .catalog-list__item .section-gallery-wrapper,
    .catalog-block__item .section-gallery-wrapper__item img,
    .catalog-list__item .section-gallery-wrapper__item img,
    .catalog-block__item .image-list-wrapper img,
    .catalog-list__item .image-list-wrapper img {
        border-radius: 0 !important;
    }
}

/* Кнопка «Сравнить» — убрана везде (mobile + desktop). На главной/в категориях
   живёт в .side-icons (поверх фото), на детальной — в action-bar. */
.item-action--compare,
.item-action.item-action--compare,
.side-icons .item-action--compare { display: none !important; }


/* === 20.05.2026 v4 — Фикс v3: правильный селектор для corner-mode =========
   v3 целился в .image-list-outer, но реальный DOM Аспро catalog_block /
   catalog_block_promo использует .image-list (без -outer). Поэтому
   negative-margin не сработал, фото осталось с белой рамкой 12px.
   Заодно усиливаем: width:100% явно (а не auto), top-corner radius на
   самом .image-list для гарантии скругления, даже если внутренний
   .image-list__link не получил overflow:hidden из-за порядка каскада. */
@media (max-width: 991px) {
    .catalog-block__item .image-list,
    .catalog-list__item .image-list {
        width: auto !important;
        margin: calc(-1 * var(--catalog-block-padding, 12px))
                calc(-1 * var(--catalog-block-padding, 12px))
                0 !important;
        border-radius: var(--catalog-block-radius, 12px)
                       var(--catalog-block-radius, 12px) 0 0;
        overflow: hidden;
    }
    /* Дублирующая страховка на .image-list__link — для catalog_block, где
       .image-list контейнер может быть без overflow по совокупности правил. */
    .catalog-block__item .image-list .image-list__link,
    .catalog-list__item .image-list .image-list__link {
        border-radius: var(--catalog-block-radius, 12px)
                       var(--catalog-block-radius, 12px) 0 0;
        overflow: hidden;
    }
}

/* === 21.05.2026 — Главный баннер: вертикальный 550px на мобиле (Tilda-style) ===
   Аспро в banners.css на <=600px задаёт height:400px для
   .banners-big--adaptive-1 .banners-big__depend-height — отношение ~0.93,
   почти квадрат. У Tilda (orangesmr.ru) тот же баннер 402×550 = 1.37 портрет:
   фото девушки с букетом не обрезано сверху, USP-список и CTA-кнопка не
   наезжают на лицо. Заказчик попросил привести ship-shops к Tilda 1-в-1.

   Брейкпойнт 768px (а не 600px) — захватывает все мобильные UA до планшета
   в portrait. 550px фикс, не aspect-ratio — выбран простой путь точного
   соответствия Tilda. На узких устройствах (Galaxy S8 360px) пропорция
   станет ещё более портретной (1.53), что приемлемо — фото не обрезается.

   Зеркало в обоих custom.css (aspro-lite + aspro-lite-mobile): реальный
   мобильный UA отдаётся aspro-lite-mobile, а DevTools Responsive Mode на
   десктопе живёт в aspro-lite (см. memory project_aspro_lite_dual_template). */
@media (max-width: 768px) {
    .banners-big.banners-big--adaptive-1 .banners-big__depend-height {
        height: 550px !important;
    }
    /* Слайд (фоновое фото) тянем под новую высоту — иначе под текстом
       появится белая полоса. min-height, чтобы не сжать desktop-режим. */
    .banners-big .main-slider__item,
    .banners-big .banners-big__item {
        min-height: 550px !important;
    }
}


/* === 21.05.2026 — Карточка товара Tilda-style (описание + 2 кнопки) =========
   Порядок DOM (правится в template.php): title → desc (2 строки) → price →
   .catalog-block__info-bottom с двумя кнопками в столбик.

   Что закрывает этот блок:
   1) Стиль блока описания PREVIEW_TEXT: 2 строки серого текста под названием.
      min-height резервирует место даже у товаров без описания — кнопки в
      ряду плиток выравниваются по нижнему краю.
   2) Кнопка «Добавить в корзину» — светло-серая #f3f5f9 с тёмным текстом
      (тильда-палитра, см. DevTools на orangesmr.ru).
   3) Кнопка «Купить в 1 клик» (.btn-ocb, появилась после ONE_CLICK_BUY=>true
      в template.php) — чёрная с белым текстом.
   4) Десктоп: фото 3:4 портрет (на мобиле уже сделано в правках 20.05 v3/v4
      этого же файла, см. блоки выше).

   В мобильном custom.css зеркалится тот же набор правил. */

.catalog-block__item .catalog-block__info-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #777;
    font-size: 13px;
    line-height: 1.35;
    margin: 6px 0 4px;
    min-height: 2.7em;
}
@media (max-width: 600px) {
    .catalog-block__item .catalog-block__info-desc {
        font-size: 12px;
        margin: 4px 0;
    }
}

/* «Купить» (кнопка корзины) — розовая (фирменный --theme-base-color). Селектор
   сужен на .catalog-block__info-bottom, чтобы не задеть кнопку в детальной карточке. */
.catalog-block__item .catalog-block__info-bottom .item-action--basket .btn,
.catalog-block__item .catalog-block__info-bottom .item-action--basket .to_cart,
.catalog-block__item .catalog-block__info-bottom .js-replace-btns .btn:not(.btn-ocb),
.catalog-block__item .catalog-block__info-bottom .js-replace-btns .to_cart:not(.btn-ocb) {
    background-color: var(--theme-base-color, #e8a2e1) !important;
    border-color: var(--theme-base-color, #e8a2e1) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.catalog-block__item .catalog-block__info-bottom .item-action--basket .btn:hover,
.catalog-block__item .catalog-block__info-bottom .item-action--basket .to_cart:hover,
.catalog-block__item .catalog-block__info-bottom .js-replace-btns .btn:not(.btn-ocb):hover,
.catalog-block__item .catalog-block__info-bottom .js-replace-btns .to_cart:not(.btn-ocb):hover {
    background-color: #dc8fd4 !important;
    border-color: #dc8fd4 !important;
    color: #fff !important;
}

/* «Купить в 1 клик» — серая (Tilda #f3f5f9 / #222), hover розовый.
   btn-ocb добавлен через 'BTN_OCB_CLASS' в template.php */
.catalog-block__item .catalog-block__info-bottom .btn-ocb {
    background-color: #f3f5f9 !important;
    border-color: #f3f5f9 !important;
    color: #222 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.catalog-block__item .catalog-block__info-bottom .btn-ocb:hover {
    background-color: var(--theme-base-color, #e8a2e1) !important;
    border-color: var(--theme-base-color, #e8a2e1) !important;
    color: #fff !important;
}

/* Кнопки в столбик с одинаковым gap 8px */
.catalog-block__item .catalog-block__info-bottom .line-block--8-vertical {
    gap: 8px !important;
}

/* === 24.05.2026 — Десктоп: «Купить» + «Купить в 1 клик» в одну строку =========
   Aspro рендерит обе кнопки внутри .js-replace-btns > .buy_block > .buttons >
   .line-block.flexbox--direction-column. Именно ЭТОТ внутренний line-block
   принудительно ставит кнопки в столбик через flexbox--direction-column. Чтобы
   получить как у Тильды (две кнопки в строку, делят ширину пополам) — на
   десктопе перебиваем direction на row + flex:1 на каждом item + width:100%
   на самих кнопках (.item-action--basket — inline-flex обёртка, без width:100%
   кнопка «Купить» съёживается в pill).
   На <=991px остаются в столбик — узкие плитки текст «Купить в 1 клик» рядом
   не поместят. */
@media (min-width: 992px) {
    /* Aspro грабли:
       1) .line-block > .line-block__item { padding:0 16px } — съедает 32px у каждой ячейки.
       2) Внешний .line-block--8-vertical имеет .flex-1 ребёнок с display:flex,
          но flex:1 1 0 на внутренних не давал ровного 50/50 (флекс не размер-сэйфтит при
          .flex-shrink:0 на .line-block + content-based size у вложенных).
       Решение: вместо flex используем CSS Grid с 1fr 1fr — гарантированно ровные колонки,
       и зануляем padding на ВСЕХ .line-block__item внутри info-bottom. */
    .catalog-block__item .catalog-block__info-bottom .line-block > .line-block__item {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* === 07.06.2026 — фикс: кнопки не растягивались на всю ширину ============
       Корень проблемы: базовое правило Аспро `.line-block > .line-block__item`
       делает внешнюю обёртку кнопок (.js-btn-state-wrapper / .catalog-wide-button)
       флекс-контейнером с justify-content:center. Её ребёнок .js-replace-btns —
       обычный флекс-айтем без flex-grow, поэтому сжимается по контенту. Все
       нижележащие width:100% (.buy_block/.buttons/grid) считались от этой сжатой
       коробки → grid 1fr 1fr делил узкую ширину, а не ширину карточки (кнопки
       выходили узкими и прижатыми). Решение: обёртку делаем block + width:100%,
       и сам .js-replace-btns тоже тянем на 100% — тогда grid считается от карточки. */
    .catalog-block__item .catalog-block__info-bottom .js-btn-state-wrapper,
    .catalog-block__item .catalog-block__info-bottom .catalog-wide-button {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
    }
    .catalog-block__item .catalog-block__info-bottom .js-replace-btns {
        display: block !important;
        width: 100% !important;
    }
    /* Контейнерная цепочка → ширина 100% карточки */
    .catalog-block__item .catalog-block__info-bottom .buy_block,
    .catalog-block__item .catalog-block__info-bottom .buy_block .buttons {
        width: 100% !important;
        display: block !important;
    }
    /* Внутренний line-block (с .flexbox--direction-column) → 2-колоночный grid. */
    .catalog-block__item .catalog-block__info-bottom .buy_block .buttons > .line-block.flexbox--direction-column {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-auto-rows: auto !important;
        gap: 8px !important;
        width: 100% !important;
        flex-shrink: 1 !important;
    }
    /* Каждая ячейка grid'а → стрейч на 100% колонки */
    .catalog-block__item .catalog-block__info-bottom .buy_block .buttons > .line-block.flexbox--direction-column > .line-block__item {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: none !important;
    }
    /* «Купить» — обёртка .item-action--basket по дефолту inline-flex (styles.css
       перебивает с !important того же уровня; наш селектор имеет 3 класса и грузится
       последним, поэтому ничья → последний выигрывает). */
    .catalog-block__item .catalog-block__info-bottom .item-action--basket,
    .catalog-block__item .buy_block .item-action--basket {
        display: flex !important;
        width: 100% !important;
    }
    .catalog-block__item .catalog-block__info-bottom .item-action--basket .btn,
    .catalog-block__item .catalog-block__info-bottom .btn-ocb,
    /* 07.06.2026 — «В корзине» (.in_cart) показывается вместо «Купить» когда товар
       уже добавлен; без width:100% левая половина схлопывается по контенту. */
    .catalog-block__item .catalog-block__info-bottom .item-action-container > .in_cart {
        width: 100% !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px !important;
    }
    /* === 09.06.2026 — фикс «срезанного» внешне-нижнего угла кнопок ============
       Ряд кнопок (.line-block--8-vertical) Аспро имеет отрицательные margin-гуттеры
       (margin: 0 -4px), парные к .line-block__item{padding:0 16px}. Выше (07.06) мы
       занулили этот padding ради grid 1fr/1fr — гуттеры остались непарными, и ряд
       стал на 4px шире карточки с каждой стороны (L28/R368 против карточки L32/R364).
       Эти 4px-выступы кнопок попадали под .catalog-block__item{overflow:hidden;
       border-radius:8px} → внешне-нижние углы «Купить» (слева) и «Купить в 1 клик»
       (справа) срезались в прямой угол. Зануляем горизонтальные гуттеры — кнопки
       встают вровень с краями карточки, углы скругляются по радиусу карточки.
       Проверено Playwright'ом: overhang L/R = 0, gap между кнопками сохранён (8px). */
    .catalog-block__item .catalog-block__info-bottom .line-block {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* === 24.05.2026 — Фикс гигантского пустого зазора между сердечком и фото =====
   Багу подвергся каскад 20.05 v1/v3 + 21.05 (вечер): на .image-list-wrapper
   стоял padding-top:125% (4:5 «aspect-ratio через padding» хак). Но
   .section-gallery-wrapper внутри уже имеет свой aspect-ratio: 3/4
   (styles.css 1860-1866) и НЕ position:absolute — поэтому фото вставало
   В НОРМАЛЬНЫЙ ПОТОК ПОСЛЕ padding-зоны, а сердечко (.side-icons, абсолют
   top:12px) висело сверху в пустой padding-зоне. Получался гигантский
   пробел между сердечком и картинкой (десктоп + мобила).
   Фикс: зануляем padding-top хак (бокс задаёт сам .section-gallery-wrapper)
   и поднимаем aspect-ratio до 4/5 — точно по форме исходников в МС
   (1311×1638 / 1680×2100), без crop. Перебивает 3/4 из styles.css через
   тот же селектор (custom.css грузится позже). */
.catalog-block__item .image-list-wrapper,
.catalog-list__item .image-list-wrapper {
    padding-top: 0 !important;
}
.catalog-block__item .section-gallery-wrapper,
.catalog-list__item .section-gallery-wrapper {
    aspect-ratio: 4 / 5;
}
.catalog-block__item .properties-absolute-outer,
.catalog-list__item .properties-absolute-outer {
    padding-top: 125% !important;
}
.catalog-block__item .properties-absolute-outer.properties-absolute-margin,
.catalog-list__item .properties-absolute-outer.properties-absolute-margin {
    padding-top: calc(125% + 28px) !important;
}
.catalog-block__item .image-list-wrapper img,
.catalog-block__item .section-gallery-wrapper__item img,
.catalog-list__item .image-list-wrapper img,
.catalog-list__item .section-gallery-wrapper__item img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    /* 22.05.2026 — cover вместо contain: некоторые фото сильно портретные
       (1680×2986) и при contain получали белые поля по бокам + острые углы.
       cover заполняет бокс, лишнее обрезается, углы скруглены контейнером.
       object-position: center top — букет обычно вверху кадра. */
    object-fit: cover !important;
    object-position: center top !important;
}
/* Скругление 8px на все 4 угла фото (Tilda-look) */
.catalog-block__item .image-list,
.catalog-list__item .image-list,
.catalog-block__item .image-list .image-list__link,
.catalog-list__item .image-list .image-list__link,
.catalog-block__item .section-gallery-wrapper,
.catalog-list__item .section-gallery-wrapper,
.catalog-block__item .section-gallery-wrapper__item img,
.catalog-list__item .section-gallery-wrapper__item img,
.catalog-block__item .image-list-wrapper img,
.catalog-list__item .image-list-wrapper img {
    border-radius: 8px !important;
}

/* === 22.05.2026 — Выравнивание карточек по горизонтали (заголовок, описание,
   статус «В наличии» на одном уровне у всех плиток в ряду, как у Tilda) ======
   Источник вариативности — длина заголовка: «Горизонт» 1 строка, «15 Кенийских
   Розовых» 2 строки. Это сдвигает всё ниже. Резервируем 2 строки под заголовок
   у всех карточек: при коротком имени появляется пустое место, но цена и статус
   ложатся на ту же горизонталь, что и у длинных. Аналогично — описание
   (уже было min-height: 2.7em).

   Для «В наличии» используем margin-top: auto: статус прижимается к низу
   info-inner-контейнера, что фактически делает его «нижней границей» текстовой
   зоны карточки и убирает прыжки от старой цены / «+ Бесплатная доставка». */
.catalog-block__item .catalog-block__info-title,
.catalog-block__item .catalog-block__info-title a,
.catalog-block__item .catalog-block__info-title span {
    font-weight: 700 !important;
}
.catalog-block__item .catalog-block__info-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.4em;
    line-height: 1.2;
}
/* Flex-цепочка: info/info-top/info-inner — column flex:1, чтобы кнопка «Купить»
   (.catalog-block__info-bottom) всегда прижималась к низу карточки.
   Статус наличия (info-tech) НЕ приклеиваем к низу — ставим сразу под ценой/доставкой:
   для товаров не в наличии кнопки нет, и margin-top:auto уводил «Нет в наличии» в самый
   низ с большим зазором. Высота заголовка/описания/цены зафиксирована выше (min-height +
   line-clamp + «доставка» на отдельной строке), поэтому статус и так встаёт на одну
   вертикаль во всех карточках ряда. */
.catalog-block__item .catalog-block__info {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}
.catalog-block__item .catalog-block__info-top {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}
.catalog-block__item .catalog-block__info-inner {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}
.catalog-block__item .catalog-block__info-tech {
    margin-top: 6px !important;
}

/* «+ Бесплатная доставка» - всегда на отдельной строке под ценой.
   Иначе у дорогих товаров (11 670 ₽) она переносится на 2-ю строку, а у
   дешёвых (2 470 ₽) помещается в одну с ценой - блок цены разной высоты,
   статус «В наличии» прыгает по вертикали. */
.catalog-block__item .free-shipping-note {
    display: block !important;
    margin-left: 0 !important;
    margin-top: 4px !important;
}

/* === 22.05.2026 - Сердечко «В избранное» в стиле Тильды =====================
   Круглый белый pill 38px. Отступ 12px от края фото - чтобы не торчало
   за края image-list-wrapper'а (у некоторых карточек wrapper имеет
   overflow: hidden, и сердечко обрезалось по rounded-углу). */
.catalog-block__item .side-icons {
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    width: 38px !important;
    height: 38px !important;
    background-color: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: visible !important;
}
/* image-list-wrapper и image-list — overflow:visible, чтобы сердечко
   не обрезалось скруглением фото. Сама картинка имеет свой border-radius. */
.catalog-block__item .image-list,
.catalog-block__item .image-list-wrapper,
.catalog-block__item .js-image-block {
    overflow: visible !important;
}
.catalog-block__item .side-icons .item-action--favorite {
    margin: 0 !important;
}
.catalog-block__item .side-icons .item-action__inner {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
.catalog-block__item .side-icons .item-action__inner .svg {
    width: 22px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.catalog-block__item .side-icons .item-action__inner .svg svg {
    width: 22px !important;
    height: 20px !important;
}

/* === 22.05.2026 — Убрать обводку карточек + добавить gap между ними =========
   Аспро ставит на карточку класс .bordered (1px серая обводка) + shadow
   на hover, плюс .grid-list--compact обнуляет gap между колонками — карточки
   слипаются и обведены прямоугольником. Tilda этого не делает: карточки без
   рамки, разделены небольшим горизонтальным зазором. */
.catalog-block__item.bordered,
.catalog-block__item.shadow-hovered,
.catalog-block__item.shadow-no-border-hovered,
.catalog-block .catalog-block__item {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.catalog-block .catalog-block__wrapper.grid-list__item,
.catalog-block .grid-list-border-outer {
    border: 0 !important;
    background: transparent !important;
}
.catalog-block .grid-list,
.catalog-block .grid-list--compact,
.catalog-block .grid-list--fill-bg {
    gap: 16px !important;
    row-gap: 20px !important;
    background: transparent !important;
}
@media (max-width: 600px) {
    .catalog-block .grid-list,
    .catalog-block .grid-list--compact,
    .catalog-block .grid-list--fill-bg {
        gap: 10px !important;
        row-gap: 16px !important;
    }
}

/* === 22.05.2026 (вечер) — Текст вровень с краем фото (как Tilda) ===========
   Зануляем все горизонтальные padding'и на карточке И внутренних контейнерах
   info/info-top/info-inner/info-bottom — Аспро их где-то добавляет в bundled
   CSS. Зеркалим конкретный селектор Аспро (.grid-list--compact .js-popup-block)
   + !important чтобы перебить высокую специфичность. */
.grid-list .js-popup-block,
.grid-list.grid-list--compact .js-popup-block,
.owl-carousel .catalog-block__item,
.catalog-block__item,
.catalog-block__item .catalog-block__inner,
.catalog-block__item .catalog-block__info,
.catalog-block__item .catalog-block__info-top,
.catalog-block__item .catalog-block__info-inner,
.catalog-block__item .catalog-block__info-bottom {
    --catalog-block-padding: 0px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* === 24.05.2026 — Скрываем «Цена действительна…» и артикул на детальной =====
   Заказчик попросил убрать оба элемента глобально (мобила + десктоп):
   - .price_txt — фраза «Цена действительна только для интернет-магазина и
     может отличаться от цен в розничных магазинах».
   - .catalog-detail__main-article — «Арт. NNNNNN» в шапке детальной (мобила).
   - .catalog-detail__info-tech .article — то же на десктопе: там артикул
     обёрнут в другой класс (.catalog-detail__info-tech > … > span.article),
     старый селектор .catalog-detail__main-article его не цеплял.
     Добавлено 25.05.2026.
   Зеркало этого блока есть в aspro-lite-mobile/css/custom.css. */
.price_txt,
.catalog-detail__main-article,
.catalog-detail__info-tech .article {
    display: none !important;
}
/* === 24.05.2026 — Мобильный бургер: плоский тильда-стайл ===
   Меню рендерится bitrix:menu (template "mobile") из .mobile.menu.php -
   список IB=40 категорий + 3 статичных пункта.
   ВАЖНО: селектор ограничен .mobilemenu__menu--top — у верхнего блока
   «Кабинет» / «Избранное» / «Корзина» (mobilemenu__menu--cabinet и т.п.)
   ТЕ ЖЕ классы .mobilemenu__menu-list > .mobilemenu__menu-item, но другая
   разметка с иконками - их нельзя задеть, иначе flex-row схлопывается
   в столбец (см. скрин 24.05.2026 - иконка кабинета ушла наверх, текст
   под неё, стрелка ▶ далеко справа).
   Парные правки в aspro-lite/css/custom.css и aspro-lite-mobile/css/custom.css
   (см. CLAUDE_BITRIX.md "Два шаблона по user-agent"). */

/* Плоский список меню каталога (только --top!) */
.mobilemenu .mobilemenu__menu--top .mobilemenu__menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mobilemenu .mobilemenu__menu--top .mobilemenu__menu-list > .mobilemenu__menu-item {
    border: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;  /* перебиваем Aspro line-height:0; «normal» давал слишком большие зазоры */
}
.mobilemenu .mobilemenu__menu--top .mobilemenu__menu-list > .mobilemenu__menu-item .link-wrapper {
    padding: 0 !important;          /* геометрию строки задаём на <a>, чтобы клик-зона = вся строка */
    background: transparent !important;
    min-height: 0 !important;
}
.mobilemenu .mobilemenu__menu--top .mobilemenu__menu-list > .mobilemenu__menu-item > .link-wrapper > a.dark_link {
    display: block;
    padding: 9px 30px !important;      /* 30px слева; 9px верт = компактный шаг как был изначально */
    color: #1a1a1a !important;
    text-decoration: none !important;
    background: transparent !important;
    line-height: 1.2 !important;
}
.mobilemenu .mobilemenu__menu--top .mobilemenu__menu-list > .mobilemenu__menu-item > .link-wrapper > a.dark_link > span {
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
}
.mobilemenu .mobilemenu__menu--top .mobilemenu__menu-list > .mobilemenu__menu-item > .link-wrapper > a.dark_link:hover > span,
.mobilemenu .mobilemenu__menu--top .mobilemenu__menu-list > .mobilemenu__menu-item > .link-wrapper > a.dark_link:active > span {
    color: var(--theme-base-color, #e8a2e1) !important;
}

/* === 08.06.2026 — Бургер стиль «Семицветик»: секции-заголовки + телефон с иконкой
   + круглые розовые соцкнопки. Заменил блок «Футер тильда-стайл» от 24.05.2026.
   Список меню (.mobilemenu__menu--top …) стилизуется правилами выше без изменений. */
.mobilemenu__section-title {
    font-weight: 700;
    font-size: 18px;
    color: #1a1a1a;
    padding: 18px 30px 8px;
    line-height: 1.2;
}
/* Гасим 26px padding-top у .mobilemenu__item-обёртки меню (Аспро), иначе зазор
   «Клиентам» → первый пункт вдвое больше, чем между пунктами. Остаётся ровно
   8px (низ заголовка) + 9px (верх ссылки) ≈ как между пунктами. */
.mobilemenu .mobilemenu__menu--top {
    margin-top: -26px !important;
}
.mobilemenu__footer--ss {
    padding: 8px 0 28px !important;
    background: transparent !important;
}
.mobilemenu__footer--ss .mobilemenu__phone {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 30px;
    font-size: 16px;
    color: #1a1a1a !important;
    text-decoration: none !important;
    line-height: 1.2;
}
.mobilemenu__footer--ss .mobilemenu__phone-ic {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: #1a1a1a;
}
.mobilemenu__footer--ss .mobilemenu__socials {
    display: flex;
    gap: 14px;
    padding: 14px 30px 0;
}
.mobilemenu__footer--ss .mmsoc {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--theme-base-color, #e8a2e1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: opacity .15s ease;
}
.mobilemenu__footer--ss .mmsoc:hover {
    opacity: .85;
}
.mobilemenu__footer--ss .mmsoc svg {
    width: 22px;
    height: 22px;
    color: #fff !important;
    fill: #fff !important;
}

/* === 09.06.2026 — Бургер: минималистичные карточки рейтинга «Хорошее место» (Яндекс / 2ГИС).
   Светлые, в тон бургеру; без заголовка и брендовых чипов; звезда золотая как в футере.
   Парные правки в обоих custom.css. */
.mobilemenu__reviews { padding: 4px 0 0; }
.mmrev {
    display: flex; align-items: center; gap: 12px;
    margin: 8px 16px 0;
    padding: 11px 14px;
    background: #f6f6f8;
    border: 1px solid #ededf0;
    border-radius: 14px;
    text-decoration: none !important;
    transition: background .15s ease, border-color .15s ease;
}
.mmrev:hover { background: #f0f0f3; border-color: #e2e2e7; }
.mmrev__body { flex: 1 1 auto; min-width: 0; }
.mmrev__title { display: block; font-weight: 600; font-size: 14px; color: #1a1a1a !important; line-height: 1.25; }
.mmrev__sub   { display: block; font-size: 12px; color: #9a9aa2 !important; line-height: 1.3; margin-top: 2px; }
.mmrev__score { flex: 0 0 auto; display: flex; align-items: center; gap: 4px;
    font-weight: 700; font-size: 16px; color: #1a1a1a !important; }
.mmrev__star  { color: #ffb84d; font-size: 15px; }

/* === 25.05.2026 — BURGER_FAVORITE_FIX — иконка избранного/корзины + счётчик в бургере ===
   Аспро: .icon-count позиционируется absolute с top:calc(50%-9px) — устаревший хак,
   ломается на нашей геометрии (счётчик висит выше центра). Иконка тоже зажата без
   вертикального воздуха. Чиним центровку через transform translateY(-50%) и даём
   пункту нормальный вертикальный паддинг. */
.mobilemenu .mobilemenu__menu--favorite .mobilemenu__menu-item > .link-wrapper > a.icon-block,
.mobilemenu .mobilemenu__menu--cart     .mobilemenu__menu-item > .link-wrapper > a.icon-block {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}
.mobilemenu .mobilemenu__menu--favorite .icon-count,
.mobilemenu .mobilemenu__menu--cart     .header-cart__count,
.mobilemenu .mobilemenu__menu--cart     .icon-count {
    top: 50% !important;
    right: 32px !important;
    transform: translateY(-50%) !important;
}

/* === 25.05.2026 — Десктоп: компакт детальной товара ===========================
   1. Подтягиваем блок «Размер букета» (.sku-props__item) ближе к H1+цене —
      убираем большой воздух сверху. Дефолт Аспро (.sku-props--detail
      .sku-props__inner:first-of-type .sku-props__item) = 0, у остальных
      .sku-props__item = 10px. Заказчик попросил -70px (зеркаление визуальной
      правки из DevTools).
   2. Убираем верхний отступ блока .product-tabs (по умолчанию margin:48px 0
      20px из inline-style в catalog.element/main/template.php) — табы
      «Характеристики/Описание» прижимаются к блоку выше.
   Только для пк: файл aspro-lite/css/custom.css грузится только для
   шаблона aspro-lite (десктоп); мобильный aspro-lite-mobile тянет
   собственный custom.css и эти правки туда не попадают. */
.sku-props--detail .sku-props__item {
    margin-top: -60px !important;
}
.product-tabs {
    margin-top: 0 !important;
}

/* 27.05.2026 - скрыта верхняя сортировочная строка Аспро на страницах каталога:
   "Фильтр" + дропдаун "Сначала популярные". Селектор .filter-panel.sort_header
   нацелен только на верхнюю строку (rozy.html:1252); дубль .filter-panel__sort
   внутри попапа смарт-фильтра обёрнут в .bx_filter_vertical без класса
   .sort_header и не задевается. Плашки цен .ship-price-filter остаются. */
.filter-panel.sort_header { display: none !important; }

/* 27.05.2026 - подъём блока плашек фильтра по цене (.ship-price-filter-wrap)
   ближе к заголовку "Композиции 13 товаров". Селектор .ship-price-filter-wrap
   (внешний контейнер, см. local/include/category_price_filter.php) - чистое
   место без других стилей. На мобильном брейкпойнте отступ меньше, т.к.
   у самих .ship-price-filter мобильные margin'ы тоже меньше (6px vs 18px). */
.ship-price-filter-wrap { margin-top: -40px; }
@media (max-width: 768px) {
    .ship-price-filter-wrap { margin-top: -5px; }
}

/* === 09.06.2026 — ПК: фикс «кнопка Купить уезжает вниз на hover» в блоке «Акции» ===
   Симптом: на промо-карточках главной (catalog_block_promo: 15 Кенийских / Горизонт /
   Комбинация / Пятиэтажка) при наведении курсора кнопки «Купить» + «Купить в 1 клик»
   прыгали вниз на ~35px. Кнопка уезжала из-под курсора → мерцание (hover-ловушка).

   Корень: Aspro-правило (catalog-block.css:121)
     .catalog-block__wrapper[data-hovered="true"] .catalog-block__item { height:auto; position:absolute; ... }
   На hover JS вешает data-hovered="true", и height:auto распускает карточку до НАТУРАЛЬНОЙ
   высоты (693px) вместо grid-сжатой (658px). Эти промо-карточки выше остальных на ~35px
   из-за лишней строки .ship-price-row (старая цена + бирка «-XX%», правка 27.05.2026), и
   grid-ряд равняется по более низким карточкам. Разница в 35px — пустой slack, который
   justify-between на .catalog-block__info при раскрытии перебрасывает НАД кнопки → сдвиг.
   Изначально этот hover-разворот в теме нужен был для показа .catalog-block__offers .sku-props,
   но SKU-офферы в листинге отключены (if(false) в template.php) — раскрывать нечего.

   Фикс: на hover не давать карточке менять высоту — пинуем height:100% (= высоте слайда).
   position:absolute и тень (z-index lift) сохраняются. Проверено Playwright'ом на проде:
   сдвиг кнопки 35px→0, кнопки не обрезаются (btn bottom == item bottom), обычные карточки
   листинга/каталога без old-price не задеты (как не прыгали, так и не прыгают). */
@media (min-width: 769px) {
    .catalog-block__wrapper[data-hovered="true"] .catalog-block__item {
        height: 100% !important;
    }
}

/* ============================================================
   09.06.2026 — чистка страницы корзины (/basket/)
   Скрываем: «Тип цены», тулбар Скачать/Распечатать/Поделиться,
   иконки платёжных систем в подвале. CSS-only, парная правка
   aspro-lite{,-mobile}/css/custom.css. См. CLAUDE_BITRIX.md. */

/* 1. «Тип цены: Розничная цена» — кастомная колонка корзины
      (data-column-property-code="TYPE"). Прячем строку целиком (имя+значение). */
.basket-item-property-custom:has(.basket-item-property-custom-value[data-column-property-code="TYPE"]) {
    display: none !important;
}

/* 2. Тулбар «Скачать файлом / Распечатать / Поделиться» над корзиной.
      .heading-icons общий для разных страниц — скоупим по наличию
      basket-кнопок (работает на десктопе и мобайле, без опоры на body-класс). */
.heading-icons:has(.btn_basket_heading) {
    display: none !important;
}

/* 3. Иконки платёжных систем в подвале — убрать на всём сайте. */
.footer__pays {
    display: none !important;
}

/* 20.06.2026 — убираем промежуточный шаг «Товар … был удалён / Восстановить»
   при удалении из корзины (/basket/, компонент sale.basket.basket v2).
   Строка-уведомление (tr.basket-items-list-item-container-expend) на мобиле
   наследовала жёлоб под фото (padding-left:158px) и схлопывалась в вертикальный
   текст; «Восстановить» (ядро Bitrix) не возвращало товар. Удаление и так
   коммитится на сервере — просто скрываем undo-оверлей, товар исчезает сразу. */
.basket-items-list-item-wrapper.basket-items-list-item-container-expend {
    display: none !important;
}

/* 09.06.2026 (v5) — мобильная корзина: крупное РЕЗКОЕ фото слева, текст справа.
   Фото position:absolute, вертикально по центру карточки (top:50% + translateY),
   размер 130×130. Высота фото не влияет на стопку справа. Паддинги дают «воздух».
   Резкость фото — JS basket_hd_img.js. Парная правка aspro-lite{,-mobile}/css/custom.css. */
@media (max-width: 767px) {
  .basket-items-list-item-wrapper {
    display: block !important; position: relative !important;
    min-height: 158px !important;
    padding: 15px 14px 15px 158px !important;
    box-sizing: border-box !important;
  }
  /* фото — крупное, абсолютно слева, вертикально по центру карточки */
  .basket-items-list-item-picture {
    position: absolute !important; left: 14px !important; top: 50% !important;
    transform: translateY(-50%) !important;
    width: 130px !important; height: 130px !important; margin: 0 !important; padding: 0 !important;
  }
  .basket-item-block-image {
    width: 130px !important; height: 130px !important; min-width: 0 !important; max-width: none !important;
    padding: 0 !important; overflow: hidden !important; border-radius: 10px !important;
  }
  .basket-item-image-link { display: block !important; width: 100% !important; height: 100% !important; }
  .basket-item-image { width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: cover !important; }
  /* правые ячейки — обычный блочный поток, лево-выровненная стопка */
  .basket-items-list-item-descriptions-inner,
  .basket-items-list-item-amount-outer,
  .basket-items-list-item-price {
    display: block !important; width: auto !important; float: none !important;
    padding: 0 !important; margin: 0 0 8px !important; text-align: left !important;
  }
  .basket-items-list-item-descriptions-inner { padding-right: 22px !important; box-sizing: border-box !important; }
  .basket-items-list-item-price { margin-bottom: 0 !important; }
  .basket-item-price-current-value { text-align: left !important; }
  .basket-item-amount { margin: 0 !important; }
  .basket-item-info-name { margin: 0 0 8px !important; word-break: normal !important; overflow-wrap: anywhere !important; }
  .basket-items-list-item-price-for-one { margin-top: 6px !important; }
}