/* ==========================================================================
   CUSTOM.CSS — кастомные стили темы croen22 (редизайн)
   --------------------------------------------------------------------------
   Правила:
   - Пишем ТОЛЬКО сюда, не в site.theme.min.css (тот собирается из исходников).
   - Каждый функциональный блок отделён комментарием-заголовком (как ниже).
   - Новое добавляем В СВОЙ блок по смыслу, а НЕ в конец файла.
   - Если блока ещё нет — заводим новый раздел с таким же оформлением.

   Оглавление:
     1. ГЛАВНАЯ · Карусели товаров
     2. ГЛАВНАЯ · Блок подписки −10%
     3. ПОДВАЛ · Тёмный подвал
     4. ГЛАВНАЯ · Баннеры 1–4
     5. ПЛИТКА ТОВАРА (универсально) · Избранное и индикаторы галереи
     6. СЕТКИ (универсально) · Единые отступы 10px
     7. КАРТОЧКА ТОВАРА · Размеры, избранное у кнопки
     8. УНАСЛЕДОВАННЫЙ ПОЛЬЗОВАТЕЛЬСКИЙ CSS (из DB-блока site.croen22_css)
     9. ШАПКА · Выбор города (плагин cityselect)
     10. ОБЩЕЕ · Стандартные полосы прокрутки
     11. КАРТОЧКА ТОВАРА · Блок групп товаров (миниатюры вариантов под ценой)
     12. КАРТОЧКА ТОВАРА · Кнопка копирования артикула
     13. КАРТОЧКА ТОВАРА · Размеры, которых нет в наличии
     14. КАРТОЧКА ТОВАРА · Кнопки маркетплейсов (Wildberries / OZON)
     15. КАРТОЧКА ТОВАРА · Модалка «Таблица размеров»
     16. КАРТОЧКА ТОВАРА · Раздельная прокрутка колонок (десктоп)
     17. КАРТОЧКА ТОВАРА · Верх карточки: фото и крошки вровень
     18. КАРТОЧКА ТОВАРА · Раскладка на средних экранах (768–1200)
     19. ГЛОБАЛЬНО · Максимальная ширина контента (1920px)
     20. КАРТОЧКА ТОВАРА · Характеристики (название … значение)
   ========================================================================== */


/* ==========================================================================
   1. ГЛАВНАЯ · Карусели товаров (html/custom/home/products-carousel.html)
   ========================================================================== */

/* Слайд карусели.
   Зазор между карточками 10px (единые отступы, ТЗ К3): по 5px паддинга с боков
   слайда + компенсация −5px на контейнере, чтобы крайние карточки были вровень
   с краем контента.
   ВАЖНО: промежутки нельзя делать через swiper "spaceBetween" — в старом Swiper
   темы он не применяется к раскладке (margin-right=0), но попадает в расчёт длины,
   из-за чего карусель не доезжала до конца (зазор справа). В блоке spaceBetween=0,
   зазор — только CSS-паддингом слайда (box-sizing: border-box — паддинг внутри
   ширины слайда, математику Swiper не ломает). */
.b-home-carousel__swiper .swiper-slide {
    height: auto;
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
}
.b-home-carousel__swiper .swiper {
    margin-left: -5px;
    margin-right: -5px;
}

/* На обёртке карусели висит класс s-products-wrapper (нужен для делегированных
   обработчиков ProductsInit — ховер-листание плиточной галереи карточек).
   Его штатные отрицательные маргины (компенсация gutter) здесь не нужны. */
.b-home-carousel .s-products-wrapper {
    margin-left: 0;
    margin-right: 0;
}

/* Стрелки карусели — тот же вид, что у блока групп товаров под ценой
   (раздел 11): скруглённые белые квадраты с тенью, выезжают серединой на край
   и появляются только при наведении. Здесь КРУПНЕЕ — карточки больше.
   Размер одной переменной, от неё считается и кнопка, и вынос (ровно половина).
   Вынос без inset: swiper-outer уже стоит по краю карточки (замер: left = край
   контента), поэтому центр стрелки при -size/2 попадает ровно на край. */
.b-home-carousel {
    /* Высота полукружка-стрелки (ширина = половина), как в блоке групп (раздел
       11, там 44px), но крупнее. */
    --croen-carousel-arrow: 60px;
}

/* ⚠️ Слайды не должны вылезать за край контента (за стрелки). Причина: .swiper
   тянут на -5px по краям (margin слайда компенсирует зазор между карточками),
   поэтому его бокс с overflow:hidden шире колонки на 5px с каждой стороны — и
   соседний слайд подглядывал в эти 5px СЛЕВА/СПРАВА от плоской стороны стрелки
   («фото выезжает, стрелка висит в воздухе»). .swiper-outer стоит ровно по краю
   контента (= где стрелки), поэтому клипаем по нему. overflow-x: clip не
   навязывает вторую ось (в отличие от hidden) и стрелки не режет — они прижаты к
   краю и выпуклостью ВНУТРЬ, в поток за край не выходят. */
.b-home-carousel .swiper-outer {
    overflow-x: clip;
}

.b-home-carousel .swiper-button-prev,
.b-home-carousel .swiper-button-next {
    /* top: по вертикальному центру ИЗОБРАЖЕНИЯ, а не всего слайда (слайд выше
       фото на зону «название+цена» ≈ 86px — компенсируем половиной). */
    top: calc(50% - 43px);
    max-width: calc(var(--croen-carousel-arrow) / 2) !important;
    min-width: calc(var(--croen-carousel-arrow) / 2) !important;
    max-height: var(--croen-carousel-arrow) !important;
    min-height: var(--croen-carousel-arrow) !important;
    padding: 0 !important;
    /* Без рамки, тени, кольца фокуса и переходов — как в блоке групп. */
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    transition: none !important;
    /* Наведение НЕ темнит кнопку (btn-white-theme по умолчанию затемняет). */
    --bs-btn-hover-bg: var(--bs-white);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-white);
    --bs-btn-active-color: var(--bs-dark);
}

/* Полукружок: плоской стороной к краю карусели, выпуклой — внутрь, над крайней
   карточкой. Шеврон идёт от центра круга (плоская сторона): у next плоско
   справа → padding-right, у prev плоско слева → padding-left. */
.b-home-carousel .swiper-button-next {
    border-radius: 999px 0 0 999px !important; /* выпуклость слева, плоско справа */
    justify-content: flex-end !important;
    padding-right: 3px !important;
}
.b-home-carousel .swiper-button-prev {
    border-radius: 0 999px 999px 0 !important; /* выпуклость справа, плоско слева */
    justify-content: flex-start !important;
    padding-left: 3px !important;
}

/* Прижаты к краю карусели (плоской стороной), не выезжают наружу.
   ⚠️ left/right: auto обязательны: в бандле темы у базовой .swiper-button-next
   стоит left:10px (у prev — right:10px). При фиксированной ширине кнопки левое
   свойство перебивает правое, поэтому без сброса next вставал в 10px от ЛЕВОГО
   края, а не прижимался к правому. */
.b-home-carousel .swiper-button-prev.swiper-button-half {
    left: 0;
    right: auto;
}
.b-home-carousel .swiper-button-next.swiper-button-half {
    right: 0;
    left: auto;
}

/* Глиф-шеврон swiper (::after) гасим — вместо него SVG в шаблоне (у глифа ">"
   левый sidebearing уводил символ вправо от центра). */
.b-home-carousel .swiper-button-prev:after,
.b-home-carousel .swiper-button-next:after {
    content: none !important;
}

/* SVG-шеврон: симметричный, центрируется флексом кнопки точно. Крупнее, чем в
   блоке групп (там 12px) — под более крупную кнопку. */
.b-home-carousel .swiper-button-prev .icon > svg,
.b-home-carousel .swiper-button-next .icon > svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Режим «только фото» (Вы смотрели): карточка = один снимок без зоны
   названия/цены. Поэтому:
   • стрелку центрируем РОВНО по вертикали карточки: top 50% (штатное
     calc(50% - 43px) компенсировало текстовую зону — тут её нет) и margin-top
     под реальную высоту кнопки (иначе центр считается от
     --swiper-navigation-size 44px, и стрелка съезжает);
   • делаем мельче — снимки мелкие (до 12 в ряд). */
.b-home-carousel--photos {
    --croen-carousel-arrow: 36px;
}
.b-home-carousel--photos .swiper-button-prev,
.b-home-carousel--photos .swiper-button-next {
    top: 50%;
    margin-top: calc(var(--croen-carousel-arrow) / -2) !important;
}
.b-home-carousel--photos .swiper-button-prev .icon > svg,
.b-home-carousel--photos .swiper-button-next .icon > svg {
    width: 11px;
    height: 11px;
}
/* Без бокового паддинга шеврона — у мелкой стрелки он смещал уголок. */
.b-home-carousel--photos .swiper-button-prev {
    padding-left: 0 !important;
}
.b-home-carousel--photos .swiper-button-next {
    padding-right: 0 !important;
}

/* Появляются только по наведению на карусель (есть мышь). В скрытом состоянии
   pointer-events: none — стрелка висит над карточкой, иначе перехватывала бы
   клик. :not(.swiper-button-disabled) — на краях неактивную не показываем. */
@media (hover: hover) {
    .b-home-carousel .swiper-button-prev,
    .b-home-carousel .swiper-button-next {
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .b-home-carousel .swiper-outer:hover .swiper-button-prev:not(.swiper-button-disabled),
    .b-home-carousel .swiper-outer:hover .swiper-button-next:not(.swiper-button-disabled) {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Тач/мобильный шаблон — стрелок нет, листаем свайпом. */
@media (hover: none) {
    .b-home-carousel .swiper-button-prev,
    .b-home-carousel .swiper-button-next {
        display: none !important;
    }
}

.l-main--mobile .b-home-carousel .swiper-button-prev,
.l-main--mobile .b-home-carousel .swiper-button-next {
    display: none !important;
}

/* Вся карточка — ссылка на товар (stretched-link на заголовке, ТЗ Г5).
   Поверх ссылки поднимаем: блок картинки (внутри него своя ссылка на товар
   и ховер-зоны плиточной галереи — иначе stretched-link перекрыл бы ховер)
   и сердечко вишлиста. */
.b-home-carousel .b-products-images,
.b-home-carousel .b-wishlist {
    position: relative;
    z-index: 2;
}


/* ==========================================================================
   2. ГЛАВНАЯ · Блок подписки −10% (html/custom/home/subscribe.html)
   ========================================================================== */

/* Секция: ограничиваем ширину контента */
.b-home-subscribe__inner {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Форма: email тянется на всю доступную ширину (ряд email+кнопка и строка
   согласия ниже занимают одинаковую ширину блока), кнопка — по контенту */
.b-home-subscribe__form .b-home-subscribe__email {
    flex: 1 1 280px;
}

/* Чекбокс согласия: компактный текст */
.b-home-subscribe__consent {
    cursor: pointer;
}


/* ==========================================================================
   3. ПОДВАЛ · Тёмный подвал (html/custom/footer-dark.html, ТЗ Г7)
   --------------------------------------------------------------------------
   Цвета зашиты явно: подвал ЧЁРНЫЙ в обоих цветовых режимах темы (light/dark).
   ========================================================================== */

/* Секция подвала */
.b-footer-dark {
    background: #0b0b0b;
    color: #fff;
}

/* Белый логотип CROEN (SVG-paths без fill — красим здесь) */
.b-footer-dark__logo svg {
    width: 180px;
    height: auto;
    display: block;
}
.b-footer-dark__logo svg path {
    fill: #fff;
}

/* Заголовки колонок */
.b-footer-dark__title {
    color: #fff;
    font-size: .875rem;
    letter-spacing: .04em;
}

/* Ссылки */
.b-footer-dark__link {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
}
.b-footer-dark__link:hover {
    color: #fff;
}

/* Приглушённый текст (подписи, копирайт, описание бренда) */
.b-footer-dark__muted,
.b-footer-dark__about {
    color: rgba(255, 255, 255, .55);
}

/* Иконки соцсетей: горизонтальный ряд */
.b-footer-dark__socials {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Иконки соцсетей: тёмные кнопки вместо штатных серых */
.b-footer-dark__socials .b-social-icons__button {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border: 0;
}
.b-footer-dark__socials .b-social-icons__button:hover {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

/* Нижняя строка: разделитель над копирайтом */
.b-footer-dark__bottom {
    border-top: 1px solid rgba(255, 255, 255, .15);
}


/* ==========================================================================
   4. ГЛАВНАЯ · Баннеры 1–4 (штатный блок b-banners-01)
   ========================================================================== */

/* Мобильная скролл-лента баннеров (.row-scrolling): штатные отрицательные
   маргины −1.75rem рассчитаны на контейнер с бóльшим паддингом, а наш
   container-xl даёт меньше — ряд вылезал на 8px за правый край экрана,
   создавая горизонтальный overflow страницы (белая полоса справа от hero
   и асимметричные отступы каруселей).
   Приводим к раскладке обычного bootstrap-row (маргины −½ гаттера, без
   собственных паддингов): первый баннер встаёт по левому краю контента —
   как карточки товаров, а скролл-лента уходит вправо ровно до края экрана. */
.b-banners-01 .row-scrolling {
    margin-left: calc(-.5 * var(--bs-gutter-x));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    padding-left: 0;
    padding-right: 0;
}

/* На мобильном (брейкпоинт штатного .row-scrolling) скролл-лента уходит
   вправо до самого края экрана: 50% − 50vw = −(паддинг контейнера),
   т.к. контейнер отцентрован. Слева остаётся выравнивание по контенту. */
@media (max-width: 575.98px) {
    .b-banners-01 .row-scrolling {
        margin-right: calc(50% - 50vw);
    }
    /* Секция клипает вылет ленты, чтобы её бокс не расширял документ
       (горизонтальный скролл самой ленты живёт внутри .row-scrolling) */
    .b-banners-01 {
        overflow-x: clip;
    }
}


/* ==========================================================================
   5. ПЛИТКА ТОВАРА (универсально) · Избранное и индикаторы галереи
   --------------------------------------------------------------------------
   Применяется ко ВСЕМ плиткам товара (категории, карусели, поиск, list-вид):
   партиалы html/products/images.html (+wishlist) общие. ТЗ категории п.3 и п.5.
   ========================================================================== */

/* Сердечко избранного — в правом верхнем углу блока фото, поверх ссылки.
   Паддинги кнопки обнулены, чтобы видимый отступ сверху был равен отступу
   справа. Внутренность контура залита белым (видно на любом фото) через
   ::before с CSS-маской внешнего контура того же сердца (hearth.svg);
   в активном состоянии заливка и контур — приглушённый красный темы. */
.b-products-images__wishlist {
    position: absolute;
    top: .375rem;
    right: .375rem;
    z-index: 3;
    line-height: 0;
}
.b-products-images__wishlist .b-wishlist {
    padding: 0;
    line-height: 0;
}
.b-products-images__wishlist .b-wishlist__icon {
    position: relative;
    display: block;
}
.b-products-images__wishlist .b-wishlist__icon svg {
    position: relative; /* контур поверх белой заливки */
}
.b-products-images__wishlist .b-wishlist__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M244 84L255.1 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 0 232.4 0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M244 84L255.1 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 0 232.4 0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84z'/></svg>") center / contain no-repeat;
}
/* В вишлисте: заливка внутри контура — чёрная (контур остаётся серым). */
.b-products-images__wishlist .b-wishlist.active .b-wishlist__icon::before {
    background: #000;
}

/* Индикаторы плиточной галереи — кружочки в правом нижнем углу ВНУТРИ фото
   (были полоски по центру под фото). Без обводок и анимаций.
   Селекторы повторяют бандл (.b-products-images .b-products-images__dots...),
   иначе проигрываем ему по специфичности. */
.b-products-images .b-products-images__dots {
    left: auto;
    right: 10px;
    bottom: 10px;
    text-align: right;
}
.b-products-images .b-products-images__dots .b-products-images__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    /* невыбранные — белые, иначе теряются на фото */
    background-color: #fff;
}
.b-products-images .b-products-images__dots .b-products-images__dot.active {
    background-color: var(--bs-emphasis-color);
}


/* ==========================================================================
   6. СЕТКИ (универсально) · Единые отступы 10px (ТЗ К3)
   --------------------------------------------------------------------------
   Один ритм на всех экранах: 10px между карточками (гориз. и верт.),
   10px между баннерами, 10px от блока «название+описание» до контента,
   на мобильных контент в 10px от края экрана.
   !important — потому что паддинги колонок и row-gap перебиваются
   пользовательским CSS из DB-блока site.croen22_css (он в <body>, после нас)
   и bootstrap-утилитами (row-gap-0 и т.п. сами с !important).
   ========================================================================== */

/* Межблочный отступ главной: настройки темы дают шаг 40px (40+80=120),
   по просьбе ужимаем на 20px → визуальный стык 100px на десктопе.
   Точечно: только корневые обёртки блоков главной с нижним спейсером 80. */
@media (min-width: 768px) {
    .s-home-wrapper .b-home-item > .pb-md-10 {
        padding-bottom: 60px !important;
    }
}

/* Гриды товаров (категории, поиск, любые списки .s-products-list--grid) */
.s-products-list--grid {
    --bs-gutter-x: 10px;
    row-gap: 10px !important;
}
.s-products-list--grid > .s-product-wrapper {
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-bottom: 0 !important;
}

/* Баннеры (пары на главной и любые .b-banners-01): 10px между элементами */
.b-banners-01 .row {
    --bs-gutter-x: 10px;
    row-gap: 10px !important;
}

/* Блок «название + описание» страницы/категории → контент: 10px */
.header_other {
    margin-bottom: 10px !important;
}

/* Мобильные края: контент в 10px от края экрана.
   У прямых row-детей контейнеров зажимаем gutter до 20px (их отрицательный
   маргин −½ гаттера иначе превышает паддинг контейнера 10px → горизонтальный
   overflow страницы). Баннерам возвращаем их 10px (правило ниже — позже в
   каскаде при равной специфичности). */
@media (max-width: 575.98px) {
    /* Паддинг контейнера задаём ЧЕРЕЗ переменную гаттера (padding = ½ gutter),
       а не прямым padding: так унаследованное правило раздела 8
       (.container-product { --bs-gutter-x: 0 !important }) сохраняет
       full-bleed фото на карточке товара.
       Удвоенный класс — специфичность выше десктопного gutter 2.5rem
       из раздела 8 (он позже в каскаде). */
    .container.container,
    .container-fluid.container-fluid,
    .container-xl.container-xl {
        --bs-gutter-x: 20px;
    }
    .container > .row,
    .container-fluid > .row,
    .container-xl > .row {
        --bs-gutter-x: 20px;
    }
    .b-banners-01 .row {
        --bs-gutter-x: 10px;
    }
}


/* ==========================================================================
   7. КАРТОЧКА ТОВАРА · Размеры, избранное у кнопки (ТЗ Т3, Т5)
   ========================================================================== */

/* Кнопки выбора размера — ширина ровно 1/7 строки.
   Семь размеров (XS…3XL) — максимум у товара, и они заполняют строку целиком.
   Если размеров меньше, кнопки НЕ растягиваются: ширина та же, справа остаётся
   пустое место. Так кнопка выглядит одинаково на всех товарах.
   Отсюда flex: 0 0 <ширина> — не 1 1 0: тот делил бы строку на фактическое
   число кнопок, и у товара с пятью размерами они стали бы шире.
   Ширину считаем от 100% строки, а не фиксируем в px: колонка плавает
   (десктоп ~466px, мобилка ~340px), и на всех экранах семь кнопок ровно
   заполняют строку.
   min-width: 0 обязателен — иначе флекс не даст кнопке стать уже её текста
   и на узких экранах формула сломается. */
.s-product-page .s-options-wrapper .inline-select {
    /* Оба числа — в одном месте, формула ниже считает от них.
       --croen-size-gap ДОЛЖЕН совпадать с gap-2 у ряда в шаблоне skus.html:
       поменяешь класс gap — поменяй и тут, иначе кнопки не сойдутся по краю. */
    --croen-size-count: 7;
    --croen-size-gap: .5rem;
}

.s-product-page .s-skus-wrapper .s-sku-item .btn,
.s-product-page .s-options-wrapper .inline-select .btn:not(.btn-color) {
    flex: 0 0 calc(
        (100% - (var(--croen-size-count) - 1) * var(--croen-size-gap))
        / var(--croen-size-count)
    );
    min-width: 0;
    padding-left: .25rem;
    padding-right: .25rem;
    text-align: center;
    /* .75rem ставили, когда кнопки ужимали до 42px ради семи в строке. Теперь
       ширину даёт формула выше и места больше — вернули читаемый размер.
       Влезает и на мобилке: там кнопка ~42px, «3XL» при .85rem ≈ 25px + 8px
       паддингов. */
    font-size: .85rem;
    /* Высота как у всего ряда покупки (кнопка «Добавить в корзину»,
       маркетплейсы, иконки поделиться/избранное) — 38px. Задаём явно и
       центрируем флексом: высота у кнопки размера иначе зависела бы от её
       шрифта (.85rem), а нужна ровно 38px. Вертикальные паддинги обнуляем —
       их роль берёт height. */
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Сердечко избранного рядом с «Добавить в корзину»: без рамки, иконка крупнее.
   В избранном — красная заливка внутри контура (как у плиток, блок 5):
   ::before с CSS-маской внешнего контура сердца (hearth.svg). */
.s-product-wishlist-cart {
    width: 36px;
    flex: 0 0 36px;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.s-product-wishlist-cart .b-wishlist__icon {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
}
.s-product-wishlist-cart .b-wishlist__icon svg {
    position: relative; /* контур поверх заливки */
    width: 100%;
    height: 100%;
}
.s-product-wishlist-cart .b-wishlist__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M244 84L255.1 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 0 232.4 0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M244 84L255.1 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 0 232.4 0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84z'/></svg>") center / contain no-repeat;
}
/* Вид «в избранном» (чёрная подложка + белое сердце) задан в разделе 14 —
   там же, где подложка самой кнопки, чтобы состояние не описывалось в двух
   местах. Здесь раньше стояла красная заливка контура — отменена 2026-07-17.
   Механика заливки (::before с маской) остаётся выше в этом блоке. */


/* Галерея товара плиткой 2-в-ряд (ТЗ Т2): зазор 10px — единый ритм */
.b-product-images-tile .row {
    --bs-gutter-x: 10px;
    row-gap: 10px;
}
.b-product-images-tile__item img {
    display: block;
}

/* КРАЙНИЕ отступы плитки убираем, внутренний зазор 10px сохраняем.
   Зазор между двумя колонками фото делается padding 5px у каждого элемента
   (gutter 10px), но у бандла нет компенсирующего отрицательного margin на .row,
   поэтому крайние 5px оставались снаружи — фото начиналось на 25px, а заголовок
   и карусель ниже на 20px (у карусели крайний отступ компенсирован swiper).
   Гасим внешний padding у крайних колонок: у левой (нечётные) — слева, у правой
   (чётные) — справа. Внутренние края (odd-right / even-left) с padding 5px
   остаются, зазор 10px цел. Теперь фото прижато к 20px, как остальной контент. */
.b-product-images-tile .row > *:nth-child(odd) {
    padding-left: 0;
}
.b-product-images-tile .row > *:nth-child(even) {
    padding-right: 0;
}


/* ==========================================================================
   8. УНАСЛЕДОВАННЫЙ ПОЛЬЗОВАТЕЛЬСКИЙ CSS (перенос из DB-блока site.croen22_css)
   --------------------------------------------------------------------------
   Боевой кастомный CSS, ранее жил в админке (Сайт → Блоки). Перенесён сюда
   целиком ради единого места правок; сам DB-блок очищен. Конфликтующие с
   разделами 1–7 правила удалены (помечены комментариями [Перенос]).
   Внутри структура исходного блока сохранена как есть.
   ========================================================================== */
/*
	// START USER CSS STYLES
	*/

.tablesizepage {
    max-width: 100%;
}

.category_picture img {
width: 100%;
}

.category_picture_out {
position: relative;
}

.category_picture2 {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    max-width: 100%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 2;
    text-align: center;
    color: var(--current-color-text);
}

.simbol-page .uhodimg {
    height: 50px;
    margin-right: 20px;
}	
	
	
.callback_cont svg {
    margin-right: 0.5em;
}	

#mailer11253725489257c1484e143fe4566a0d {
    padding: 0;
}

.wa-after-submit {
    padding: 2em;
}

#mailer11253725489257c1484e143fe4566a0d label {
margin-top: 1rem;
}
	
@media (max-width: 575.98px) {
.swiper-slide-desktop img {
padding-left:0px!important;
}
.product-fixed {
    padding-right:0px!important;
}

.container-product {
    --bs-gutter-x: 0rem!important;
}

.product-fixed {
    padding: 0 1rem !important;
}

}

.bg_header_category {
    background-position: center center;
}

.s-step-footer {
    margin-top: 1rem;
}

.header_other {
    background-color: #f4f4f4;
}

.s-product-description {
    text-align: justify;
}
	
.swiper-slide-desktop img {
padding-left:5px;
}

/* padding-right у правой колонки убран (был 5px, легаси): из-за него контент
   колонки — название, цена, кнопки — не доходил до правого края блока на 5px,
   а карусель ниже доходила. Теперь правый край совпадает. Левый отступ колонки
   (зазор от фото) задаёт раздел 17 через padding-left. */
.product-fixed {
    padding-right: 0;
}

.l-desktop-header-top {
    height: 60px;
    background-color: #fff;
}

.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    --bs-gutter-x: 2.5rem;
}

.container-category {
    --bs-gutter-x: 1rem;
}

.container-product {
    --bs-gutter-x: 1rem;
}


@media (max-width: 575.98px) {
.s-category-wrapper .s-products-wrapper {
    margin-left: 0;
    margin-right: 0;
} 
}

@media (min-width: 1200px) {
    .modal-xl {
        --bs-modal-width: unset;
    }
}

@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        --bs-modal-width:  unset;
    }
}


.swiper-button-next.swiper-button-half {
    right: 30px;
}

.swiper-button-prev.swiper-button-half {
    left: 30px;
}

.s-products-list--swiper .swiper-slide {
    margin-right: 0 !important;
}

.s-products-list--swiper .swiper-slide .card {
    border: 0;
}

.tablrazm-img img {
    max-width:100%;
}

.vex.vex-theme-plain .vex-dialog-form .vex-dialog-input {
    margin-bottom: 0;
}

.vex.vex-theme-plain .vex-dialog-form .vex-dialog-message {
    margin-bottom: 0;
}

.b-product-skus .btn-gray-300 {
color: #cdcdcd;
}

/* Стили блока групп товаров переехали отсюда в раздел 11 (собраны вместе
   с правками наложения миниатюр и поведения стрелок). */

.js-quantity-cart-section .js-max-description,
.js-quantity-cart-section .js-min-description,
.js-quantity-cart-section .wa-unit,
.js-quantity-cart-section .wa-product-price {
    display:none !important;
}

.js-quantity-cart-section .s-minus-button,
.js-quantity-cart-section .s-plus-button {
    cursor: default !important;
}

.s-order-section .wa-order-cart-wrapper .wa-products .wa-product .wa-image-section img {
max-height: 100%;
}

.wa-order-cart-wrapper .wa-products .wa-product .wa-product-body > * {

    vertical-align: middle !important;

}

.container-custom .row {
    padding-right: 0;
    padding-left: 0;
    margin-left: 0;
    margin-right: 0;
}


.b-product-skus .inline-select .btn {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.s-product-form .b-product-submit .fs-4 {
    font-size: 1.2em !important;
}


/* [Перенос] Исходное правило
   .container-category .s-product-wrapper, .container-custom .s-product-wrapper,
   .container-custom .flex-grow-1 { padding: 0 0 .5em }
   разобрано на части:
   - паддинги .s-product-wrapper НЕ восстановлены — карточки сеток теперь
     отступают по разделу 6 (единые 10px);
   - padding-bottom .5em НЕ восстановлен — ломал выравнивание сердечка
     с кнопкой корзины (раздел 7);
   - боковые паддинги .flex-grow-1 ВОССТАНОВЛЕНЫ ниже — без них контент
     карточки товара (фото-свайпер) на мобильном терял full-bleed
     (появлялись поля по бокам). */
.container-custom .flex-grow-1 {
    padding-right: 0;
    padding-left: 0;
}

.b-products-images .b-products-images__image img {
    width: 100%;
      z-index: 2;
}



.b-products-images .b-products-images__box:before {
    position: absolute;
    top: 0;
    left: -1px;
    content: '';
    display: block;
    height: 100%;
    width: 1px;
    background: #fff;
    z-index: 2;
}

.b-products-images .b-products-images__box:after {
    position: absolute;
    top: 0;
    right: 0;
    content: '';
    display: block;
    height: 100%;
    width: 1px;
    background: #fff;
    z-index: 2;
}


.actionscard {
    text-align: center;
    position: relative;
   
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    z-index: 1;
    background-color: #fff;
}

.b-products-images .b-products-images__dots {
        z-index: 2;
}

.b-products-badges,
.b-products-images .b-products-images__preview {
        z-index: 3;    
}



.b-products-images .b-products-images__wrapper {
        position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
}



.s-products-list--grid .b-products-images.b-products-images--wide, .s-products-list--swiper:not(.s-products-list--swiper-short) .b-products-images.b-products-images--wide {
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
}

.container-category .s-products-list .card-body {
    /* padding: 5px !important; */
}

.s-products-list .card-body {
    padding: 0;
}

.l-main.l-main--mobile>.l-footer {
    padding-bottom: 0;
}


.b-mobile-logo svg, .b-mobile-logo img {
    height: 28px;
}

.b-mobile-logo {
    max-height: 28px;
}


@media (max-width: 991.98px) {
.b-home-slider .b-home-slider__media-inner {
    padding-top: 133%;
}
}


.b-products-images .b-products-images__wrapper {
    padding-top: 133%;
}


.center-align {
      text-align:center;
      }




.s-products-list--grid .b-products-images.b-products-images--wide .b-products-images__image img, .s-products-list--swiper:not(.s-products-list--swiper-short) .b-products-images.b-products-images--wide .b-products-images__image img {
    border-radius: 0 !important;
}




.s-product-header {
    font-size: .8rem !important;
}

.fs-lg {
    font-size: 1rem !important;
}

.fs-xs {
    font-size: 0.9rem !important;
}

.namebold {
 text-transform: uppercase;
}

.b-footer-01 {
    background-color: #f5f5f5;
    border: none !important;
}

.btn-gray-200 {
    --bs-btn-bg: #eee;
    --bs-btn-hover-bg: #e5e4e4;
    --bs-btn-active-bg: #e9e9e9;
    }



.product-images-desctop-img img {
    width:100%;
}

.product-fixed {
    position: sticky;
    top: 0;
    max-width: 50rem;
    margin: 0 auto;
}

.product-fixed-out {
    position: relative;
    padding:0;
}
.product-fixed-img {
    padding:0;
}


.b-product-quantity {
    display:none !important;
}


.setsname-p {
font-size: 1.5rem;
text-transform: uppercase;
}

.btn-theme .s-price,
.btn-theme .s-compare-price {
    color: #fff !important;
}

.btn-outline-theme .s-compare-price:after {
background-color: #df4759 !important;
}

.btn-theme .s-compare-price:after {
   background-color: #fff !important;
}

.b-product-submit .btn-outline-theme {
       border-color: #000;
       text-transform: uppercase;
       font-weight: 400;
       background-color: #fff;
}

.btn-outline-theme .spinner-text {
   /* color: #000 !important; */
}

.b-product-submit .btn-outline-theme .text-nowrap,
.b-product-submit .btn-theme .text-nowrap {
    text-transform: uppercase !important;
    font-weight: 400;
    font-size: 0.85rem;    
}

.b-product-submit .btn-outline-theme:hover .text-nowrap,
.b-product-submit .btn-outline-theme {
    color: #000;
--bs-btn-active-color: #000;
--bs-btn-hover-color: #000;
}

.accordion-button:not(.collapsed)::after {
    box-shadow: none;
}


.product-images-desctop-img {
    margin-bottom: 1px;
}



.productimagesmobile {
    display:none;
}

.grecaptcha-badge {
    display:none;
}


.b-callback--footer svg,
.b-mobile-nav-contacts svg {
    margin-right: 0.5rem;
    width: 18px;
    height: 18px;
}

.b-footer-nav {
    border-color: #e5e5e5 !important;
}


.b-footer-nav .navbar-toggler.collapsed::after {
    border-top: 0.4em solid !important;
    border-right: 0.26em solid rgba(0,0,0,0) !important;
    border-bottom: 0 !important;
    border-left: 0.26em solid rgba(0,0,0,0) !important;

   
}

.b-footer-nav .dropdown-toggle::after {
    border-top: 0;
    border-right: 0.26em solid rgba(0,0,0,0);
    border-bottom: 0.4em solid;
    border-left: 0.26em solid rgba(0,0,0,0);
}


.content-page {
    width:11rem;
    margin-right: 3rem;
}

.b-sidebar-categories-01 {
    font-size:0.95rem;
}

.b-product-images .b-product-images__main img {
    width: 100%;
    max-height: none;
}

.b-product-images .b-product-images__main .swiper-slide {
    cursor: default;
}

.b-product-images .b-product-images__main .swiper {
    position:relative;
}

.b-product-images .b-product-images__main {
    flex: 0 0 100%;
    max-width: 100%;
    padding-top: 0;
}

.swiper-slide-desktop {
 
}

.swiper-slide-desktop img {
    width:100%;
}

.swiper-button-next:after, .swiper-button-prev:after {
    --swiper-navigation-size: 22px;
}

.b-product-images .b-product-images__main .swiper-button-next, .b-product-images .b-product-images__main .swiper-button-prev {
    display: flex;
}

.swiper-button-next, .swiper-button-prev {
    box-shadow:none;
}


.uhodimg {
    height: 35px;
    margin-right: 10px;
}


.s-sku-item .btn-outline-theme {
    padding-left: 5px;
    padding-right: 5px;
    width: 51px;
}


.btn-wb {
    background-color: #cb11ab;
    border-color: #cb11ab;
}

.btn-wb:hover {
    background-color: #e313bf;
    border-color: #e313bf;
}

.btn-wb:active {
    background-color: #b30f97!important;
    border-color: #b30f97!important;
}

.btn-ozon {
    background-color: #005bff;
    border-color: #005bff;
    /* margin-top: 15px убран 2026-07-16: это был отступ от кнопки Wildberries,
       когда они стояли друг под другом. Теперь они в одном флекс-ряду
       (см. раздел 14), расстояние задаёт gap, а маргин ронял кнопку OZON на
       15px ниже соседней. */
}

.btn-ozon:hover {
    background-color: #286bff;
    border-color: #286bff;
}

.btn-ozon:active {
    background-color: #004fdf!important;
    border-color: #004fdf!important;
}

.buttoncartnone {
    display:none;
}


.dropdown-center.dropdown-hover .dropdown-menu {
    left: -155px;
    top: 30px;
    transform: none !important;
}

.ordersnone:empty {
 /*   display: none; */
}


@media (min-width: 768px) {
.b-footer-nav {
    border: none !important
}
}



@media (min-width: 1400px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
/*	max-width: 100%; */
}
} 

@media (min-width: 1400px) {
.container-page,
.s-checkout-order-page {
	max-width: 1500px;
	margin: 0 auto;
}
} 

@media (min-width: 992px) {
.s-main-wrapper.s-main-wrapper--sidebar .s-sidebar-wrapper {
    width: 240px;
}
}



	/*
	// END USER CSS STYLES
	*/


/* ==========================================================================
   9. ШАПКА · Выбор города (плагин cityselect)
   --------------------------------------------------------------------------
   По образцу bdmp.ru (иконка-стрелка + город с пунктиром), но в цветах темы
   (тёмная иконка, не красная). Плагин выводит <i class="fa fa-map-marker">,
   FA-шрифта в теме нет — иконку рисуем CSS-маской (location-arrow из набора
   svg темы — ровно та же, что у bdmp). Кнопки нотифаера «Ваш город X?» — вместо красных плагина.
   ========================================================================== */

/* Ссылка города: иконка + название, тёмный цвет темы */
.p-shop-cityselect .b-cityselect__city {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--bs-emphasis-color);
    text-decoration: none;
}
.p-shop-cityselect .b-cityselect__city:hover {
    color: var(--bs-emphasis-color);
}

/* Название города — без подчёркиваний (гасим и стили плагина/темы) */
.p-shop-cityselect .b-cityselect__city,
.p-shop-cityselect .b-cityselect__city .i-cityselect__city {
    text-decoration: none !important;
    border-bottom: 0 !important;
}

/* Иконка-стрелка (FA location-arrow — та же, что у bdmp.ru) CSS-маской,
   цвет = цвет текста */
.p-shop-cityselect .b-cityselect__city i.fa-map-marker {
    display: inline-block;
    width: .95em;
    height: .95em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M285.6 444.1C279.8 458.3 264.8 466.3 249.8 463.4C234.8 460.4 223.1 447.3 223.1 432V256H47.1C32.71 256 19.55 245.2 16.6 230.2C13.65 215.2 21.73 200.2 35.88 194.4L387.9 50.38C399.8 45.5 413.5 48.26 422.6 57.37C431.7 66.49 434.5 80.19 429.6 92.12L285.6 444.1z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M285.6 444.1C279.8 458.3 264.8 466.3 249.8 463.4C234.8 460.4 223.1 447.3 223.1 432V256H47.1C32.71 256 19.55 245.2 16.6 230.2C13.65 215.2 21.73 200.2 35.88 194.4L387.9 50.38C399.8 45.5 413.5 48.26 422.6 57.37C431.7 66.49 434.5 80.19 429.6 92.12L285.6 444.1z'/></svg>") center / contain no-repeat;
}

/* Нотифаер «Ваш город X?»: кнопки в цветах темы (вместо красных плагина) */
.b-cityselect__notifier .btn,
.b-cityselect__notifier input[type="button"] {
    background-color: var(--bs-emphasis-color) !important;
    border-color: var(--bs-emphasis-color) !important;
    color: var(--bs-body-bg) !important;
    border-radius: var(--bs-border-radius);
}
.b-cityselect__notifier .btn:hover,
.b-cityselect__notifier input[type="button"]:hover {
    opacity: .85;
}


/* ==========================================================================
   10. ОБЩЕЕ · Стандартные полосы прокрутки
   --------------------------------------------------------------------------
   В бандле темы (site.theme.min.css) оставлено отладочное правило
   body * { scrollbar-width: thin; scrollbar-color: blue orange } —
   оранжево-синие скроллбары у всех прокручиваемых блоков (модалка выбора
   города и т.п.). Возвращаем системный вид.
   ========================================================================== */
body * {
    scrollbar-width: auto;
    scrollbar-color: auto;
}


/* ==========================================================================
   11. КАРТОЧКА ТОВАРА · Блок групп товаров (миниатюры вариантов под ценой)
   --------------------------------------------------------------------------
   Шаблон: shop/themes/croen22/productgroup_plugin.groups_block.photo_group.html
   Карусель вариантов товара (цвета) под ценой. Swiper с фиксированным
   slidesPerView: 6 (от 768px) / 7 (от 1200px).

   ГЛАВНОЕ — ПОЧЕМУ МИНИАТЮРЫ НАЕЗЖАЛИ ДРУГ НА ДРУГА:
   бандл темы задаёт миниатюре жёсткий квадрат
       .product-group-photos__item { min-width:64px; max-width:64px;
                                     min-height:64px; max-height:64px }
   а Swiper при slidesPerView=7 в колонке ~379px отводит слайду всего ~54px.
   Миниатюра шире своей ячейки на ~10px → соседи перекрываются, крайняя
   обрезается. Прошлая правка снимала только max-width/max-height, а
   min-width:64px оставался и продолжал распирать миниатюру (min-width
   сильнее max-width). Снимаем ВСЕ четыре ограничения: размер миниатюры
   должен диктовать слайд, а не бандл.
   ========================================================================== */

.product-groups {
    margin-top: 0 !important;
}

/* Миниатюра тянется по ширине слайда (см. разбор выше), высота — по пропорции
   фото. Паддинг 2px — внутренняя рамка вокруг снимка. */
.product-group .product-group-photos__item {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: auto !important;
    max-height: none !important;
    width: 100% !important;
    padding: 2px !important;
    /* 6px вместо var(--bs-border-radius) — в этой теме переменная равна 3px,
       скругление было почти незаметным. Стрелки держим на том же числе. */
    border-radius: 6px !important;
}

.product-group__item {
    margin: 0 !important;
}

.product-group .card {
    border: none !important;
}

/* Зазор между миниатюрами 4px = по 2px паддинга с боков слайда.
   Как и в каруселях главной (раздел 1), зазор делаем паддингом слайда, а не
   swiper "spaceBetween" — иначе ломается математика ширины. */
.product-group .s-products-list--swiper .swiper-slide {
    padding: 2px;
}

/* --- РАМКИ МИНИАТЮР ---
   Рамка несёт смысл: помечает выбранный вариант. Поэтому не убираем её
   совсем, а гасим у невыбранных — border-color: transparent.
   ВАЖНО: именно прозрачная рамка, а не border: none. Рамка занимает 2px с
   каждой стороны; если у невыбранных её убрать совсем, при переключении
   цвета миниатюры прыгали бы на эти 2px. Место остаётся зарезервированным.
   Порядок правил значим: :hover идёт ДО active (одинаковая специфичность,
   0-3-0) — иначе ховер перебивал бы подсветку выбранного варианта. */
.product-group .product-group-photos__item {
    border-color: transparent !important;
}

/* --- ТУЛТИП С НАЗВАНИЕМ ЦВЕТА ---
   Тултип Bootstrap рендерится в <body>, а НЕ внутри .product-group — селектором
   вида «.product-group .tooltip» до него не достать. Поэтому на триггере стоит
   штатная опция data-bs-custom-class="pg-tooltip" (photo_group.html): она вешает
   класс на сам тултип, и мы стилим только свои, не задевая тултипы в остальной теме. */
.pg-tooltip,
.b-copied-tip {
    /* Было var(--bs-border-radius) = 3px, почти незаметно. */
    --bs-tooltip-border-radius: 8px;
    /* Было 0.875rem (14px) — для подписи в одно слово крупно. */
    --bs-tooltip-font-size: 0.75rem;
}

/* Стрелка-уголок. Бандл темы глушит её ГЛОБАЛЬНО правилом
   .tooltip-arrow{display:none !important} — поэтому возвращаем через !important
   и только своим тултипам. placement="top" (задан на триггере) => тултип над
   миниатюрой, а уголок снизу и смотрит вниз, на неё.
   Цвет уголка бандл берёт из --bs-tooltip-bg (белый) — совпадает с фоном тултипа. */
.pg-tooltip .tooltip-arrow,
.b-copied-tip .tooltip-arrow {
    display: block !important;
}

/* Тач-устройства: ховера нет, тап по миниатюре сразу уводит по ссылке, поэтому
   тултип бесполезен — в лучшем случае моргнёт перед переходом. Прячем.
   Именно media (hover: none), а не .l-main--mobile: тултип лежит в <body>,
   вне .l-main, и классом мобильного шаблона его не зацепить.
   ⚠️ Только .pg-tooltip (названия цветов). .b-copied-tip сюда НЕ добавлять:
   он показывается по клику и подтверждает копирование ссылки — на телефоне
   это нужно даже больше, чем на десктопе. */
@media (hover: none) {
    .pg-tooltip {
        display: none !important;
    }
}

/* Нет в наличии — приглушаем. Такие варианты шаблон photo_group.html уводит
   в конец списка (сортировку делает он, здесь только вид).
   Гасим ПРОЗРАЧНОСТЬЮ, а не grayscale/фильтром: миниатюра показывает ЦВЕТ
   товара, и обесцвечивать её нельзя — человек выбирает как раз по цвету.
   На ховере почти возвращаем — на такой товар всё ещё можно зайти. */
.product-group .product-group-photos__item--oos {
    opacity: .3;
    transition: opacity .2s ease;
}

.product-group .product-group-photos__item--oos:hover {
    opacity: .7;
}

/* Бледная рамка на ховере — подсказка, что миниатюра кликабельна. */
.product-group .product-group-photos__item:hover {
    border-color: #e5e5e5 !important;
}

/* Выбранный вариант — рамка цветом темы. */
.product-group .product-group-photos__item.product-group__item--active,
.product-group .product-group-photos__item.product-group-photos__item--active {
    border-color: var(--bs-theme) !important;
}

/* --- СТРЕЛКИ ---
   Скругление 6px — как у миниатюр (не круг: круглая белая кнопка поверх фото
   читалась как наклейка и выбивалась из блока скруглённых прямоугольников).
   Размер 20px — в полтора раза меньше прежних 30px.

   Размер задан ОДНОЙ переменной: от неё считается и сама кнопка, и её вынос
   за край (ровно половина). Меняешь размер — вынос едет следом. Именно на
   зашитых вручную числах здесь уже горели: отступ шеврона был подогнан под
   кнопку 30px и съезжал при смене размера. */
.product-group {
    /* Высота полукружка-стрелки (ширина = половина). */
    --croen-arrow-size: 44px;

    /* Насколько край ФОТО утоплен относительно края карусели:
       2px паддинг слайда + 2px рамка миниатюры + 2px её паддинг = 6px
       (замерено на странице: 5.7px). На эту величину стрелку сдвигаем внутрь.
       Зачем: сама по себе стрелка центруется по краю КОНТЕЙНЕРА, но глаз
       читает край фотографии — из-за белой полосы между ними стрелка кажется
       съехавшей наружу. Сдвиг ставит её серединой на край фото.
       Если поменяешь паддинги слайда/миниатюры — поправь и это число. */
    --croen-arrow-inset: 6px;
}

/* ПОЛУКРУЖОК: высокая узкая кнопка, плоской стороной к краю миниатюр (не
   выезжает), выпуклой — внутрь, над миниатюрами. Ширина = половина высоты
   (радиус полукруга). next скруглён слева (выпуклость внутрь), prev справа. */
.product-group .swiper-button-next,
.product-group .swiper-button-prev {
    max-width: calc(var(--croen-arrow-size) / 2) !important;
    min-width: calc(var(--croen-arrow-size) / 2) !important;
    max-height: var(--croen-arrow-size) !important;
    min-height: var(--croen-arrow-size) !important;
    padding: 0 !important;
    /* По центру вертикали блока миниатюр (было 58% — сдвигало вниз, под слайд
       карусельной высоты; здесь миниатюры без текстовой зоны). */
    top: 50%;
    /* Без рамки, тени, кольца фокуса и переходов — нажал, пролистал, и всё.
       Белую рамку (btn-white-theme) и кольцо фокуса убираем, иначе они
       мелькали при появлении/клике. */
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    transition: none !important;
}

/* Шеврон идёт ОТ ЦЕНТРА КРУГА (плоская сторона полукруга), раскрыт в дугу.
   Плоская сторона: у next справа, у prev слева — туда и прижимаем шеврон
   (justify-content к плоскому краю). */
.product-group .swiper-button-next {
    border-radius: 999px 0 0 999px !important; /* выпуклость слева, плоско справа */
    justify-content: flex-end !important;
    padding-right: 2px !important;
}
.product-group .swiper-button-prev {
    border-radius: 0 999px 999px 0 !important; /* выпуклость справа, плоско слева */
    justify-content: flex-start !important;
    padding-left: 2px !important;
}

/* Лёгкая тень — отделяет белую кнопку и от фото, и от белого фона страницы
   (стрелка наполовину висит снаружи блока). Берём штатный токен темы
   --bs-box-shadow-sm (0 2px 4px rgba(0,0,0,.075)), а не своё число — тень в
   одном стиле с остальным UI.
   :not(:focus-visible) здесь обязателен: у .btn в бандле кольцо фокуса
   нарисовано через box-shadow при outline:0. Специфичность у нас та же
   (0-2-0), но custom.css подключается позже — без этого исключения наша тень
   затёрла бы кольцо, и кнопка перестала бы подсвечиваться при табе. */
.product-group .swiper-button-next:not(:focus-visible),
.product-group .swiper-button-prev:not(:focus-visible) {
    box-shadow: none;
}

/* Наведение НЕ темнит кнопку: btn-white-theme по умолчанию делает фон тёмным
   (--bs-btn-hover-bg: theme-shade-30) с белой иконкой — для полукружка не
   подходит. Держим белый фон и тёмный шеврон всегда. */
.product-group .swiper-button-next,
.product-group .swiper-button-prev {
    --bs-btn-hover-bg: var(--bs-white);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-white);
    --bs-btn-active-color: var(--bs-dark);
}

/* Стрелки прижаты к краю миниатюр (right/left: 0), НЕ выезжают наружу.
   ⚠️ Half-выезд (серединой на край, как в каруселях) здесь технически
   невозможен: блок групп в правой колонке с раздельной прокруткой
   (.product-fixed-out { overflow-y: auto }, раздел 16). По спеке CSS вторая ось
   тоже клипает по padding-box колонки, а её край держит ширина колонки —
   расширить клип наружу нельзя (padding съедает контент внутрь, границу не
   двигает; margin-right тоже пробовали — сдвигает миниатюры). Единственные
   способы вернуть выезд — отказаться от раздельной прокрутки колонок ИЛИ
   position: fixed стрелок (не скроллится). Оставляем стрелки на краю. */
.product-group .swiper-button-next.swiper-button-half {
    right: 0;
    left: auto; /* сброс базового left:10px из бандла — иначе перебивает right */
}

.product-group .swiper-button-prev.swiper-button-half {
    left: 0;
    right: auto;
}

/* Глиф-шеврон swiper (::after) гасим — вместо него SVG в шаблоне
   (photo_group.html): у глифа ">" левый sidebearing уводил символ вправо. */
.product-group .swiper-button-next:after,
.product-group .swiper-button-prev:after {
    content: none !important;
}

/* SVG-шеврон: симметричный, центрируется флексом кнопки точно. Кнопка 20px —
   шеврон 8px (в каруселях 14px под 32px, та же пропорция). */
.product-group .swiper-button-prev .icon > svg,
.product-group .swiper-button-next .icon > svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

/* Стрелки показываем только по наведению на блок (мышь есть — hover: hover).
   Стрелка лежит поверх крайней миниатюры, поэтому в скрытом состоянии
   обязателен pointer-events: none — иначе она перехватывает клик по товару.
   :not(.swiper-button-disabled) — чтобы на краях карусели не всплывала
   неактивная стрелка (штатный swiper-button-disabled-hidden гасит её сам). */
@media (hover: hover) {
    .product-group .swiper-button-next,
    .product-group .swiper-button-prev {
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .product-group .swiper-outer:hover .swiper-button-next:not(.swiper-button-disabled),
    .product-group .swiper-outer:hover .swiper-button-prev:not(.swiper-button-disabled) {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Тач-устройства и мобильный шаблон темы (l-main--mobile, определяется на
   сервере по User-Agent) — стрелок нет вообще, листаем свайпом. */
@media (hover: none) {
    .product-group .swiper-button-next,
    .product-group .swiper-button-prev {
        display: none !important;
    }
}

.l-main--mobile .product-group .swiper-button-next,
.l-main--mobile .product-group .swiper-button-prev {
    display: none !important;
}


/* ==========================================================================
   12. КАРТОЧКА ТОВАРА · Кнопка копирования артикула
   --------------------------------------------------------------------------
   Разметка: html/product/types/cart/product_01_cart.html (артикул над блоком
   «Цвет»), обработчик: custom.js, раздел 4.
   Внутри кнопки ДВЕ иконки — copy и check; переключает их класс .is-copied,
   который JS вешает на 1.5 секунды после успешного копирования. Так проще, чем
   подменять svg скриптом, и не мигает на медленной сети.
   ========================================================================== */
.b-sku-copy {
    /* Кнопка-иконка: обнуляем всё, чем браузер красит <button>. */
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    color: #b3b3b3;
    transition: color .15s ease;
    /* Отступ от артикула. */
    margin: 0 0 0 .375rem;
    /* font: inherit — обязательно. <button> НЕ наследует шрифт от строки, браузер
       ставит свой (~13.3px Arial). Без этого размер иконки ниже (1em) считался бы
       от шрифта кнопки, а не от текста артикула, и она была бы не в размер. */
    font: inherit;
}

/* Иконка ростом с текст. Бандл темы жёстко задаёт .icon > svg размер
   (1.125rem у обычной, .825rem у .icon-sm) — перебиваем на 1em, то есть ровно
   размер шрифта строки артикула. Специфичности 0-2-1 хватает, !important не нужен. */
.b-sku-copy .icon > svg {
    width: 1em;
    height: 1em;
}

.b-sku-copy:hover,
.b-sku-copy:focus-visible {
    color: var(--bs-theme);
}

/* Иконка «скопировано» появляется только после клика. Обе иконки лежат в одной
   ячейке грида — так кнопка не меняет ширину при переключении и соседний текст
   не дёргается. */
.b-sku-copy__icon {
    grid-area: 1 / 1;
}

.b-sku-copy {
    display: inline-grid;
    align-items: center;
}

.b-sku-copy__icon--done {
    visibility: hidden;
}

.b-sku-copy.is-copied {
    color: #000;
}

.b-sku-copy.is-copied .b-sku-copy__icon--copy {
    visibility: hidden;
}

.b-sku-copy.is-copied .b-sku-copy__icon--done {
    visibility: visible;
}


/* ==========================================================================
   13. КАРТОЧКА ТОВАРА · Размеры, которых нет в наличии
   --------------------------------------------------------------------------
   Кто и как помечает размеры: НЕ шаблон, а бандл темы (shop.theme.js ~2265).
   Он читает настройку темы product__common_skus_available_type_buttons
   (none / hide / disabled / blocked) и вешает на недоступные варианты класс
   .btn-gray-300 вместо .btn-outline-theme. В режиме "blocked" добавляет ещё
   .disabled + aria-disabled — тогда вариант некликабельный.
   ⚠️ Вся эта логика работает ТОЛЬКО при премиум-лицензии темы
   (в бандле: window.waTheme.license.is_premium === "1"). У нас премиум есть.
   2026-07-16 настройку переключили "disabled" -> "blocked" (site-тема,
   theme.xml): раньше недоступные размеры были серыми, но кликались.
   Ниже — перечёркивание крестиком. Селектор .btn-gray-300 внутри .inline-select
   попадает только в размеры/варианты карточки.
   ========================================================================== */

/* Перечёркиваем кнопку КРЕСТОМ — обе диагонали, из угла в угол.
   Не text-decoration: line-through — тот зачёркивает только буквы («XS»),
   а нужно перечеркнуть кнопку целиком.
   Не псевдоэлементы с transform: rotate() — угол наклона зависит от пропорций
   кнопки, а они разные («XS» узкая, «2XL» широкая); любой фиксированный угол
   попадёт в углы только у одной из них.
   Линейные градиенты решают это сами: у направления «to top right» граница
   цветов проходит ровно по диагонали из нижнего левого угла в верхний правый,
   у «to bottom right» — из верхнего левого в нижний правый, и так при ЛЮБЫХ
   ширине и высоте. Два таких градиента накладываются и дают крест.
   Толщина каждой линии — 1px (пара стопов вокруг середины). */
.b-product-skus .inline-select a.btn-gray-300 {
    background-image:
        linear-gradient(
            to top right,
            transparent calc(50% - 0.5px),
            currentColor calc(50% - 0.5px),
            currentColor calc(50% + 0.5px),
            transparent calc(50% + 0.5px)
        ),
        linear-gradient(
            to bottom right,
            transparent calc(50% - 0.5px),
            currentColor calc(50% - 0.5px),
            currentColor calc(50% + 0.5px),
            transparent calc(50% + 0.5px)
        );
}

/* ⚠️ НЕ добавлять сюда pointer-events: auto.
   Клики по недоступным размерам блокирует штатное правило бандла
   .btn.disabled { pointer-events: none } (класс .disabled вешает shop.theme.js
   в режиме настройки "blocked"). Любое pointer-events: auto здесь возвращает
   кликабельность — уже наступали, когда пытались показать курсор
   «not-allowed»: курсор с pointer-events: none не показывается, и ради него
   правило перебили, чем сломали саму блокировку.
   Курсор для таких кнопок сознательно оставлен обычным: возможность НЕ кликнуть
   важнее подсказки курсором. Понадобится курсор — вешать его на обёртку в
   шаблоне, а не снимать pointer-events с самой кнопки. */


/* ==========================================================================
   14. КАРТОЧКА ТОВАРА · Кнопки маркетплейсов (Wildberries / OZON)
   --------------------------------------------------------------------------
   Разметка: html/product/types/cart/product_01_cart.html. Выводятся только у
   товара, которого нет в наличии ({if $product.count > 0}{else}...).
   Три требования сразу: в одну строку, одинаковой ширины, а на узких экранах —
   каждая на своей строке.

   Всё это даёт ОДИН приём — равный flex-basis вместо ширины по содержимому:
     • одинаковый базис + одинаковый flex-grow => ширины строго равны
       (раньше стоял только flex-grow-1, и он раздавал свободное место ПОВЕРХ
       ширины текста — подписи разной длины давали 255px против 203px);
     • flex-wrap переносит кнопку, когда две по 200px + gap не влезают.
   Важно: перенос считается от ширины КОЛОНКИ, а не от ширины экрана, поэтому
   media-запрос не нужен — вёрстка сама подстроится, где бы блок ни оказался.

   Почему базис именно 200px: замер на живой странице — самая длинная подпись
   («Купить на Wildberries») занимает 166px + 2×16px паддингов = 198px. То есть
   200px это минимум, при котором текст ещё не обрезается; при меньшей ширине
   кнопки честно уходят на разные строки. Меняешь подписи или шрифт — перемерь. */
.b-marketplace-buttons > .b-product-submit {
    flex: 1 1 200px;
    /* Внутри — text-nowrap; без min-width флекс не смог бы ужать элемент ниже
       ширины текста и базис бы не работал. */
    min-width: 0;
    /* Обёртка тянет ссылку на всю свою высоту: иначе при разной высоте кнопок
       ссылка OZON вставала по центру и висела ниже соседней на 15px. */
    display: flex;
}

.b-marketplace-buttons > .b-product-submit > .btn {
    width: 100%;
}

/* --- Кнопка «Добавить в корзину» — в ширину кнопки маркетплейса ---
   Кнопки маркетплейсов делят строку пополам с зазором 16px, то есть каждая
   занимает calc(50% - 8px). Тем же выражением задаём кнопку покупки — тогда
   она совпадает с ними ровно, а не «примерно».
   Считаем от 50%, а не копируем 225px: ширина колонки плавает, фиксированное
   число разъехалось бы.
   Селектор через .b-cart-actions (ряд в product_01_cart.html), потому что класс
   .b-product-submit носят И обёртка кнопки покупки, И обёртки маркетплейсов —
   без этого правило зацепило бы всех.
   Рядом в ряду лежит сердечко-избранное; остаток строки за ним остаётся пустым
   — так и задумано, кнопка держит ширину маркетплейсной. */
/* Ширина кнопки покупки = ширине кнопки маркетплейса.
   Кнопка маркетплейса в ряду из двух с gap-2 (8px) занимает (100% - 8px)/2 =
   50% - 4px. Значит и здесь вычитаем ПОЛОВИНУ зазора (4px), а не весь.
   ⚠️ Завязано на gap-2 обоих рядов: если поменяешь класс gap у .b-cart-actions
   или .b-marketplace-buttons — пересчитай это число (было 8px, когда у
   маркетплейсов стоял gap-4). */
.b-cart-actions > .b-product-submit {
    flex: 0 0 calc(50% - 4px);
}

/* --- Кнопки-иконки рядом с «Добавить в корзину»: поделиться и избранное ---
   Серые скруглённые квадраты. Сторона равна высоте ряда: у кнопки покупки
   38px, а align-self: stretch тянет иконки на ту же высоту — flex-basis 38px
   делает их ровно квадратными. Завязано на высоту кнопки покупки: поменяется
   она — поправить и здесь.
   .s-product-wishlist-cart перебиваем осознанно: у него в разделе 7 задано
   width/flex 36px под прежний вид (иконка без подложки). Специфичности
   .b-cart-actions (0-2-0) хватает и над ним, и над бутстраповским .btn. */
.b-cart-actions .b-icon-action,
.b-cart-actions .s-product-wishlist-cart {
    flex: 0 0 38px;
    width: 38px;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    /* Скругление берём переменной, а не числом: так оно совпадает с кнопками
       темы автоматически. У .btn-lg радиус = var(--bs-border-radius). */
    border-radius: var(--bs-border-radius);
    background-color: #f2f2f2;
    color: #000;
    transition: background-color .15s ease, color .15s ease;
}

.b-cart-actions .b-icon-action:hover,
.b-cart-actions .s-product-wishlist-cart:hover {
    background-color: #e6e6e6;
}

/* Кнопка «поделиться» на время подтверждения копирования — чёрная с белой
   иконкой (класс is-copied вешает custom.js раздел 4 на 1.5 с, синхронно с
   тултипом «Ссылка скопирована»). :hover перебиваем, чтобы под курсором
   подтверждение не подсвечивалось серым. */
.b-cart-actions .b-icon-action.is-copied,
.b-cart-actions .b-icon-action.is-copied:hover {
    background-color: #000;
    color: #fff;
}

/* --- Товар В ИЗБРАННОМ: подложка чёрная, сердце белое ---
   Состояние показывает ПОДЛОЖКА, а сердце просто перекрашивается в белый через
   currentColor (у .icon > svg в бандле fill: currentColor).
   ⚠️ Заливку внутри контура (::before с маской, механика в разделе 7) здесь НЕ
   включаем — специально. Сердце собрано из двух слоёв: контур это svg-кольцо, а
   заливка — сплошной силуэт под ним. Если покрасить белым оба, они сливаются в
   сплошное пятно: внешний край тот же, но выглядит заметно крупнее тонкого
   кольца — кажется, будто иконка выросла. Чёрной подложки достаточно, чтобы
   отличить добавленный товар, и толщина сердца при этом не меняется. */
.b-cart-actions .s-product-wishlist-cart.active {
    background-color: #000;
    color: #fff;
}

.b-cart-actions .s-product-wishlist-cart.active:hover {
    background-color: #1a1a1a;
}

/* Размер иконок обеих кнопок (поделиться и избранное) — 0.9rem, почти вровень
   со шрифтом кнопок карточки (.85rem). Это ответ на «сделать иконки потоньше»:
   иконки набора заливочные (не штриховые), толщину линии CSS не регулирует, но
   при меньшем размере штрихи тоньше — визуально легче и ближе к весу текста.
   Обе задаём здесь, чтобы вес совпадал; сердце перебивает свой размер из
   раздела 7. */
.b-cart-actions .b-icon-action .icon > svg {
    width: .9rem;
    height: .9rem;
}

.b-cart-actions .s-product-wishlist-cart .b-wishlist__icon {
    width: .9rem;
    height: .9rem;
}

/* Кольцо фокуса от мыши убираем, для клавиатуры оставляем — тот же приём, что
   у крестика модалки и кнопки копирования артикула. */
.b-cart-actions .b-icon-action:focus:not(:focus-visible) {
    box-shadow: none;
    outline: 0;
}


/* ==========================================================================
   15. КАРТОЧКА ТОВАРА · Модалка «Таблица размеров»
   --------------------------------------------------------------------------
   Модалку собирает custom.js (раздел 7) вместо vex-диалога плагина sizetable.
   Содержимое — то же, что плагин кладёт в скрытый div#size-table-data
   (обычно картинка с таблицей).
   ========================================================================== */

/* Окно обтягивает картинку: width: fit-content вместо ширины по сетке —
   иначе по бокам оставались бы белые поля, если картинка уже окна.
   max-width даёт внешний отступ по 1rem с каждой стороны — на мобильном
   vex открывался во всю ширину экрана, впритык к краям. */
.b-sizetable-modal .modal-dialog {
    width: fit-content;
    max-width: calc(100% - 2rem);
    margin: 1rem auto;
}

/* Скругление окна обрезает картинку по углам — иначе она торчит из-под них. */
.b-sizetable-modal .modal-content {
    overflow: hidden;
}

/* Белых полей вокруг картинки быть не должно — паддинг тела снимаем. */
.b-sizetable-modal .modal-body {
    padding: 0;
}

/* Картинку НЕ растягиваем: только max-*, без width/height. Таблица размеров —
   загруженный снимок, апскейл сделал бы цифры мыльными.
   ГЛАВНОЕ — ограничение по ВЫСОТЕ. Снимок таблицы вытянутый: без max-height
   окно брало натуральную ширину картинки, та упиралась в край экрана, картинка
   масштабировалась по ширине — и по высоте вылезала за экран, появлялась
   прокрутка. Ограничиваем высоту — ширина подтянется сама по пропорции, а
   width: fit-content у окна обтянет уже уменьшенную картинку.
   2rem — это внешние отступы окна (по 1rem сверху и снизу).
   Две строки max-height подряд не опечатка: 100dvh учитывает свёрнутую панель
   браузера на мобильном (iOS Safari при 100vh даёт высоту БОЛЬШЕ видимой
   области, и прокрутка вернулась бы). Где dvh не поддерживается, работает
   первая строка. */
.b-sizetable-modal .modal-body img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    margin: 0 auto;
}

/* Плагин отдаёт картинку в обёртке (в его шаблоне это <p>), и у обёртки свои
   отступы — как браузерные (margin у <p>), так и заданные плагином.
   Гасим их у всего, что лежит в теле: иначе поля возвращаются, даже когда у
   самого .modal-body паддинг снят.
   ⚠️ Раньше здесь стояло обратное правило — оно ДОБАВЛЯЛО паддинг обёрткам
   ради возможного заголовка. Заголовок так и не появился, а поля вокруг
   картинки появились. Не возвращать. */
.b-sizetable-modal .modal-body > *,
.b-sizetable-modal .modal-body > * > * {
    margin: 0;
    padding: 0;
}

/* Крестик поверх картинки: у окна нет шапки, вешать его больше некуда. */
.b-sizetable-modal__close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 1;
    padding: .5rem;
    background-color: rgba(255, 255, 255, .85);
    border-radius: 50rem;
}

/* Синее кольцо после клика убираем — его рисует бандл правилом
   .btn-close:focus { box-shadow: var(--bs-btn-close-focus-shadow) }.
   ⚠️ Гасим ТОЛЬКО :focus:not(:focus-visible), а не :focus целиком: то же
   правило показывает кольцо при переходе табом, и без него клавиатурный
   пользователь не увидит, где находится. :focus-visible браузер ставит как раз
   при клавиатуре, но не при клике мышью — то есть мышь кольцо не получает,
   клавиатура получает. */
.b-sizetable-modal__close:focus:not(:focus-visible) {
    box-shadow: none;
}


/* ==========================================================================
   16. КАРТОЧКА ТОВАРА · Раздельная прокрутка колонок (десктоп)
   --------------------------------------------------------------------------
   Было: правая колонка липла к экрану (.product-fixed { position: sticky },
   раздел 8), а страница прокручивалась вместе с картинками. Чтобы добраться до
   подвала, приходилось пролистать ВСЕ картинки товара.

   Стало: каждая колонка — самостоятельная область прокрутки высотой в экран.
   Курсор над картинками — крутятся картинки, курсор над описанием — крутится
   описание. Вниз страницы уходим, когда та колонка, над которой курсор,
   домотана до конца. Это штатное поведение браузера (scroll chaining):
   внутренний контейнер докрутился — дальше листается страница. Специально
   ничего программировать не нужно, поэтому НЕ ставим overscroll-behavior:
   contain — он как раз это сцепление и отключил бы.

   Высота: calc(100vh - высота шапки). Шапку вычитаем, потому что ряд начинается
   ПОД ней: при чистых 100vh низ колонки ушёл бы за нижний край экрана ровно на
   её высоту, и добраться туда было бы нельзя — курсор над колонкой крутит
   колонку, а не страницу. Высоту меряет custom.js (раздел 8) и кладёт в
   --croen-header-h: числом её не задать, зависит от логотипа и настроек темы.
   На карточке товара шапка всегда в потоке — выезжающая тут не выводится.

   ОБЛАСТЬ ДЕЙСТВИЯ — от 768px И ТОЛЬКО ГДЕ ЕСТЬ МЫШЬ:
   • 768px — там, где колонки идут рядом (ниже вёрстка одноколоночная, делить
     нечего);
   • hover: hover — режим рассчитан на курсор: «навёл на колонку — кручу её».
     Пальцем такого выбора нет, и на тач-планшете (а он попадает в 768–1200)
     две панели скорее сбивают с толку: страница не листается, когда палец на
     фото. Там оставляем обычную прокрутку страницы.
   Ширину берём media-запросом, а НЕ признаком шаблона .l-main--mobile: тема
   отдаёт мобильный шаблон уже с 1200px, но в 768–1200 колонки всё равно рядом,
   и раздельная прокрутка там нужна.
   ========================================================================== */
@media (min-width: 768px) and (hover: hover) {
    .b-product-01 .product-fixed-img,
    .b-product-01 .product-fixed-out {
        height: calc(100vh - var(--croen-header-h, 0px));
        overflow-y: auto;
        /* Полосы прокрутки скрыты — две штуки рядом выглядели тяжело.
           Прокрутка при этом полностью рабочая: скрыт только индикатор.
           Нужны ДВА свойства, они для разных движков: scrollbar-width —
           Firefox, ::-webkit-scrollbar ниже — Chrome/Safari. Раздел 10 вернул
           системные полосы глобально (body *), здесь перебиваем адресно. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .b-product-01 .product-fixed-img::-webkit-scrollbar,
    .b-product-01 .product-fixed-out::-webkit-scrollbar {
        display: none;
    }

    /* Прилипание правой колонки отменяем: колонка сама держит высоту экрана и
       прокручивается внутри — sticky тут больше не нужен и мешал бы.
       Перебиваем .product-fixed{position:sticky} из легаси-раздела 8.
       margin-right компенсирует padding-right ниже (см. следующее правило). */
    .b-product-01 .product-fixed {
        position: static;
    }
}


/* ==========================================================================
   17. КАРТОЧКА ТОВАРА · Верх карточки: фото и крошки вровень
   --------------------------------------------------------------------------
   Откуда отступы сверху:
   • блок фото — pt-3 (12px) на общей обёртке .b-product-images
     (shop/themes/croen22/html/product/images.html);
   • правая колонка — pt-5 (24px) на .product-fixed (product_01.html).
   Из-за разницы крошки висели на 12px ниже верха фото.

   ⚠️ Обёртка .b-product-images ОДНА на оба шаблона: внутри неё плитка
   (.b-product-images-tile, d-none d-md-block) и свайпер
   (.b-product-images__main, d-md-none). Поэтому её pt-3 нельзя просто убрать
   из шаблона — снесётся везде. Разводим медиа-запросами.

   ⚠️ Порог 768px — НЕ произвольный: ровно на нём images.html переключает фото
   со свайпера на плитку (d-md-none / d-none d-md-block, md = 768). Отступ
   нужен там, где плитка; на свайпере (телефон) фото идут вплотную к шапке.
   Поэтому здесь именно ширина экрана, а НЕ признак шаблона .l-main--mobile:
   тема отдаёт мобильный шаблон уже с 1200px, и в промежутке 768–1200 он
   показывает плитку — отступ там нужен.

   Везде !important: pt-3/pt-5 — это утилиты Bootstrap, а они объявлены с
   !important, обычным правилом их не перебить. Специфичность у наших
   селекторов выше, поэтому среди !important побеждают они.
   ========================================================================== */

/* От 768px (там, где колонки идут рядом): ОДНА переменная задаёт и верхний
   отступ обеих колонок, и горизонтальный зазор между ними — пользователь
   попросил их равными, одна переменная это и гарантирует. Меняешь отступ —
   правишь одно число.
   • padding-top обеих колонок — чтобы фото и крошки были на одном уровне;
   • padding-left правой колонки (.product-fixed) — единственный источник
     зазора между блоками: сами колонки без gutter (раздел 8 обнуляет padding
     у .product-fixed-img/out), а в шаблоне зазор задавал ps-md-5 (24px), его
     и перебиваем. */
@media (min-width: 768px) {
    .b-product-01 {
        --croen-card-top: 1.25rem;
    }

    .b-product-01 .b-product-images,
    .b-product-01 .product-fixed {
        padding-top: var(--croen-card-top) !important;
    }

    .b-product-01 .product-fixed {
        padding-left: var(--croen-card-top) !important;
    }
}

/* Уже 768px (фото свайпером): вплотную к шапке, отступа быть не должно. */
@media (max-width: 767.98px) {
    .b-product-01 .b-product-images {
        padding-top: 0 !important;
    }
}


/* ==========================================================================
   18. КАРТОЧКА ТОВАРА · Раскладка на средних экранах (768–1200)
   --------------------------------------------------------------------------
   Диапазон 768–1200 — это планшеты и узкие окна: фото уже идут ПЛИТКОЙ (она
   включается с 768, см. раздел 17), но места мало. Поэтому здесь:
   • фото по ОДНОМУ в ряд (на десктопе остаётся по два);
   • колонки пополам.

   Что в шаблонах по умолчанию:
   • ряд плитки — .row.row-cols-2 (images.html), бандл задаёт .row-cols-2>*
     ширину 50%;
   • колонки — col-12 col-md-6 col-lg-7 col-xl-8 (фото) и col-md-6 col-lg-5
     col-xl-4 (правая). То есть на md (768–991) они и так 6/6, а на lg
     (992–1199) уже 7/5 — вот там и нужно вернуть поровну.

   !important не нужен: наши селекторы специфичнее бутстраповских
   (.b-product-01 .product-fixed-img = 0-2-0 против .col-lg-7 = 0-1-0).
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199.98px) {
    /* Фото по одному в ряд: перебиваем ширину, которую задаёт row-cols-2. */
    .b-product-01 .b-product-images-tile .row.row-cols-2 > * {
        width: 100%;
    }

    /* Колонки поровну. */
    .b-product-01 .product-fixed-img,
    .b-product-01 .product-fixed-out {
        flex: 0 0 auto;
        width: 50%;
    }
}


/* ==========================================================================
   19. ГЛОБАЛЬНО · Максимальная ширина контента (1920px)
   --------------------------------------------------------------------------
   Основной каркас страниц — .container-xl (36 вхождений на обе темы). Бандл
   темы ограничивает его max-width ступенями: 1240px от 1200px экрана и 1500px
   от 1400px. То есть до правки контент упирался в 1500px — на Full HD-мониторе
   по бокам оставалось ~210px пустого поля с каждой стороны.

   Поднимаем потолок до 1920px. max-width — это ПОТОЛОК, а не фиксированная
   ширина: контейнер = min(экран − поля, max-width). Поэтому на экранах уже
   ~1960px контент по-прежнему тянется по ширине окна, а упирается в 1920 только
   на мониторах шире. Ниже 1400px всё как было (1240 / по брейкпоинтам).

   Трогаем всё семейство .container* КРОМЕ -fluid: тот всегда 100% и должен им
   остаться (полноширинные баннеры, шапка). Кастомные .container-product/custom/
   page наследуют ширину от .container-xl, отдельно их не поднимаем.

   ⚠️ Это только КОНТЕЙНЕР. Внутренние сетки (число товаров в ряду в каталоге,
   колонки карточки 8/4) от этого не перестраиваются — на 1920 карточки каталога
   и правая колонка товара станут заметно шире. Если понадобится догонять число
   колонок — это отдельная правка по конкретным страницам.
   ========================================================================== */
/* Боковые поля контента — 1.25rem, чтобы контент не прилипал к краям.
   ТОЛЬКО ОТ 768px: на телефонах отступа быть не должно (там контент и так почти
   на всю ширину, и лишние поля съедают место). Порог 768 = md, где переключается
   вёрстка карточки. По умолчанию контейнер даёт gutter/2 = 0.75rem.
   !important — перебиваем и gutter-based padding бандла, и обнуление у карточки
   (.container-product { --bs-gutter-x: 0 }).
   На текстовых страницах ps-5/pe-5 стоят на ТОМ ЖЕ элементе — padding одного
   свойства не суммируется.
   ⚠️ Пока отступ общий для всех разделов; позже сделаем выборочно по страницам. */
@media (min-width: 768px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        /* 2.2rem: стрелки каруселей выезжают за край контента (половина их
           размера), боковое поле должно быть больше этого выноса + зазор. */
        padding-left: 2.2rem !important;
        padding-right: 2.2rem !important;
    }
}

/* Блоки «Смотрите также/Рекомендуем/Вы смотрели» на карточке (.s-related-products)
   идут ПОСЛЕ .container-product (вне него) и оборачивают контент в свой
   container-xl — боковой отступ 1.25rem у него есть, тут верно.
   Заголовок этих блоков сидел на +12px правее двухколоночного контента выше.
   Причина (замерено): его колонка (.col-12.col-lg-auto) даёт padding 12px =
   половина gutter .row (1.5rem). Обнулять gutter НАДО НА .row, а не на
   контейнере: Bootstrap-класс .row сам переопределяет --bs-gutter-x, и значение
   с контейнера до него не доходит.
   (Двухколоночный блок выше не съезжает, потому что у его колонок padding
   обнулён напрямую — .product-fixed-img/out в разделе 8, а не через gutter.)
   Карточки каруселей выровнены и без правки (swiper со своей компенсацией).

   margin-bottom: единый вертикальный ритм 24px между блоками. Строка заголовка
   имеет mb-6 (32px) — а отступ между самими блоками (mt-5 у .s-related-products)
   24px. Приводим отступ заголовок→карусель к тем же 24, чтобы все зазоры
   (двухколоночный↔заголовок, заголовок↔карусель, карусель↔следующий заголовок)
   были равны. !important — перебиваем utility mb-6. */
.b-product-01 .s-related-products .row {
    --bs-gutter-x: 0;
    margin-bottom: 1.5rem !important;
}

/* Потолок ширины 1920. Порог 1200, а НЕ 1400: бандл темы держит контейнер на
   1240px в диапазоне 1200–1399 (@media(min-width:1200px){.container-xl:1240px}),
   и если наше правило включать только с 1400, то на 1300–1400 контент сидит на
   узких 1240, а на 1400 резко распахивается. Стартуем с 1200 — ступень 1240
   перебивается сразу, контент тянется плавно.
   max-width включает padding (box-sizing: border-box), контент отступает от
   границы на боковые поля выше. */
@media (min-width: 1200px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1920px;
    }
}


/* ==========================================================================
   20. КАРТОЧКА ТОВАРА · Характеристики (название … значение)
   --------------------------------------------------------------------------
   Вкладка «Характеристики» аккордеона (.s-product-reviews, сборка в
   shop/themes/croen22/html/product/tabs_none.html). Каждая строка —
   .b-product-sku: .s-label (название, приглушённый цвет) + .s-sku (значение).

   Делаем «dot leader»: название слева, значение справа, между ними точечная
   линия. Разделитель — псевдоэлемент ::after контейнера, поставленный МЕЖДУ
   двумя span через order (сами span в DOM идут подряд, промежуточного элемента
   нет). Порядок: label(1) → спейсер(2, растягивается) → value(3).
   Точки — border-bottom dotted у спейсера; align-self: flex-end + небольшой
   margin-bottom сажают их на уровень базовой линии текста.

   Двоеточия в названиях («Пол:») оставлены — они захардкожены в шаблоне в 30+
   местах, точки идут после них. Если двоеточия мешают — убирать в шаблоне.
   ========================================================================== */
.s-product-reviews .b-product-sku {
    display: flex;
    align-items: baseline;
}

.s-product-reviews .b-product-sku .s-label {
    order: 1;
    flex: 0 1 auto;
}

.s-product-reviews .b-product-sku::after {
    content: "";
    order: 2;
    flex: 1 1 auto;
    align-self: flex-end;
    /* .4rem — зазор от текста по бокам; .28em снизу поднимает точки к базовой
       линии (иначе легли бы по самому низу строки). */
    margin: 0 .4rem .28em;
    border-bottom: 2px dotted #cfcfcf;
}

.s-product-reviews .b-product-sku .s-sku {
    order: 3;
    flex: 0 0 auto;
    /* text-nowrap на значении уже есть в разметке — держим его в одну строку,
       чтобы точки упирались ровно в начало значения. */
    text-align: right;
}


/* ==========================================================================
   21. КАРТОЧКА ТОВАРА · Аккордеон: смещение при автоскролле к верху
   --------------------------------------------------------------------------
   custom.js (раздел 9) при раскрытии раздела крутит колонку так, чтобы заголовок
   ушёл на 1px ВЫШЕ края — верхний бордер accordion-item прячется за краем, а не
   висит полоской. Смещение задаётся в JS (gap = -1), scroll-margin-top тут не
   работает (только со scrollIntoView) — правило оставлено для наглядности.
   ========================================================================== */
#productstabsmenu .accordion-header {
    scroll-margin-top: -1px;
}