/* ==========================================================
   ak.slider.css
   Замена Owl Carousel 2.3.4 на нативный overflow-x скролл.
   Подключается при ?test=Y ПОСЛЕДНИМ файлом, после main.css.

   Содержание:
   1. Базовая лента товаров (.owc / .bowc / .dowc)
   2. Точечные фиксы старой вёрстки под нативную ленту
   3. Стрелки (общие)
   4. Точки (общие)
   5. Главная: баннер .msln, «Товар дня» .daily
   6. Попап корзины (.bap)
   7. Карточка товара: отзывы .ak-rvs, .ak-vpr, миниатюры .ak-thumbs
   8. Баннеры внутренних страниц (.ak-banner)
   9. Новости: .news-slider, .owc на детальной странице
   10. Строгое листание (один свайп = --step карточек)
   ========================================================== */

/* ---------- 1. Базовая лента товаров (.owc / .bowc / .dowc) ---------- */
.owl-carousel.owc, .owl-carousel.bowc, .owl-carousel.dowc {
    --n: 1.5;                 /* сколько карточек видно в ряд (мобильный дефолт: 1,5) */
    --step: 1;                /* на сколько карточек листать за клик */
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;       /* без этого overflow-x:auto включает и вертикальный скролл */
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* в Owl было overflow:visible, и содержимое карточки, выходящее за её высоту (2-я строка названия,
       отзывы, кнопки), было видно. Здесь его срезает overflow-y:hidden — даём запас снизу
       и возвращаем его отрицательным margin, чтобы вёрстка вокруг не сдвинулась. Подберите 60px под карточку. */
    padding-bottom: 60px;
    margin-bottom: -60px;
}
.owc::-webkit-scrollbar, .bowc::-webkit-scrollbar, .dowc::-webkit-scrollbar { display: none; }

.owc > .catalog_item, .bowc > .catalog_item, .dowc > .catalog_item {
    flex: 0 0 calc((100% - (var(--n) - 1) * 12px) / var(--n));
    scroll-snap-align: start;
    /* в Owl точкой отсчёта для абсолютных бейджей (%, огонь, ХИТ) и сердечка был .owl-item
       (position: relative); без него они привязываются к .lsl-wrap / дальним предкам */
    position: relative;
}
/* пустые ADD-заглушки от компонента (:empty не ловит пробелы/переносы, поэтому + :has) */
.catalog_item:empty,
.catalog_item:not(:has(*)) { display: none; }

/* мобилка: в main.css контейнерам задано width:216px (это была ширина одного слайда Owl,
   остальные слайды торчали за пределы контейнера). Для нативной ленты контейнер должен
   быть на всю ширину, а 216px — это ширина карточки. */
@media (max-width: 979px) {
    /* .best / .top-catalog остаются 216px из main.css (от этого переносится заголовок),
       а сама лента тянется до краёв экрана: боковые отступы считает JS (bleedAll() в ak.slider.js) */
    .owc, .bowc, .dowc { width: auto; }
    .owc > .catalog_item, .bowc > .catalog_item, .dowc > .catalog_item { flex: 0 0 216px; }
}

@media (min-width: 980px) {
    .owl-carousel.owc  { --n: 4; --step: 4; }
    .owl-carousel.bowc { --n: 3; --step: 3; }
}
@media (min-width: 1200px) {
    .owl-carousel.owc  { --n: 5; --step: 4; }
    .owl-carousel.bowc { --n: 4; --step: 4; }
}
@media (min-width: 1481px) {
    .owl-carousel.owc  { --n: 6; --step: 4; }
    .owl-carousel.bowc { --n: 5; --step: 5; }
}

/* «Топ в своей категории» рядом с «Товаром дня» — лента уже */
@media (min-width: 980px) and (max-width: 1199px) {
    .top-catalog .owl-carousel.owc { --n: 2.5; --step: 2; }
}
@media (min-width: 1200px) {
    .top-catalog .owl-carousel.owc { --n: 3.5; --step: 3; }
}
@media (min-width: 1481px) {
    .top-catalog .owl-carousel.owc { --n: 4.5; --step: 4; }
}

/* ---------- 2. Точечные фиксы старой вёрстки под нативную ленту ----------
   Без Owl исчезла обёртка .owl-item, которая неявно давала
   .catalog_item_images position: relative и фиксированную ширину слайда. */
.catalog_item_images {
    position: relative;
    box-sizing: border-box;
}
.catalog_item_images::after {
    inset: 0;              /* было: width: calc(100% - 40px); height: 190px */
    width: auto;
    height: auto;
}

.catalog_item .labels i {
    z-index: 1;
}

/* ---------- 3. Стрелки (общие для всех лент) ---------- */
.lsl-wrap { position: relative; min-width: 0; width: 100%; }

.lsl-prev, .lsl-next {
    display: none;
    position: absolute;
    width: 48px;
    height: 48px;
    top: 91px;
    background: #ffffff url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.05 18L18.0501 9.99999L10.05 1.99999' stroke='%232D3130' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 43% center;
    border: 0;
    padding: 0;
    border-radius: 100px;
    box-shadow: 0px 2px 20px rgba(38, 0, 38, 0.1);
    cursor: pointer;
    z-index: 2;
}
.lsl-next { right: -24px; }
.lsl-prev { left: -24px; transform: rotate(180deg); }

/* глобальное "button:hover:not(:disabled) { background-color: #7e1c7e }" перебиваем
   совпадающей специфичностью + порядком подключения */
button.lsl-prev:hover, button.lsl-next:hover { background-color: #ffffff; }

@media (min-width: 1200px) and (max-width: 1998px) { .lsl-prev, .lsl-next { display: block; } }

.lsl-static .lsl-prev, .lsl-static .lsl-next { display: none !important; }
.lsl-prev:disabled, .lsl-next:disabled { opacity: 0; pointer-events: none; }

/* вариант «always» (ставится JS для .msln и по опции always): тёмный полупрозрачный круг,
   показывается на любой ширине от 1200px, без верхней границы 1999px */
@media (min-width: 1200px) {
    .lsl-always .lsl-prev, .lsl-always .lsl-next { display: block; }
}
.lsl-always .lsl-prev, .lsl-always .lsl-next {
    top: calc(50% - 48px / 2 - 11px);
    background: rgba(45, 49, 48, 0.2) url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.94997 18L1.94997 9.99999L9.94998 1.99999' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 18px center;
    box-shadow: none;
    transition: background-color .2s;
    z-index: 2;
}
.lsl-always .lsl-next { right: -90px; transform: rotate(180deg); }
.lsl-always .lsl-prev { left: -90px; transform: none; }
.lsl-always .lsl-prev:hover, .lsl-always .lsl-next:hover {
    background-color: rgba(45, 49, 48, 0.6);
}

/* ---------- 4. Точки (общие) ----------
   Абсолютно поверх .lsl-wrap; значения из старого .owl-dots */
.lsl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 7px;
    display: flex;
    gap: 8px;
    justify-content: center;
    z-index: 2;
}
.lsl-dots button {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    border: 0;
    padding: 0;
    background: rgba(184, 176, 184, 0.5);
    cursor: pointer;
}
.lsl-dots button:hover,
.lsl-dots button.act {
    background: #ffffff;
    box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.15);
}

/* мобилка: точки под слайдером, отступ 12px */
@media (max-width: 979px) {
    .lsl-dots {
        position: static;
        margin-top: 12px;
        padding-bottom: 4px;   /* чтобы кольцо (box-shadow 3px) активной точки не обрезалось */
    }
}

/* ---------- 5. Главная ---------- */

/* Баннер (.msln) */
.msln {
    display: flex;
    gap: 27px;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* перебиваем старое .msln{max-width:957px; margin:0 auto} из main.css */
    max-width: none;
    margin: 0;
    /* как flex-item иначе считал бы ширину по содержимому (сумма всех слайдов) */
    width: 100%;
    min-width: 0;
    /* временная защита: у <img> в шаблоне баннера нет width/height, поэтому height:auto
       до загрузки картинки даёт 0 — резервируем высоту. Именно height, а не min-height. */
    height: 180px;              /* мобилка */
}
@media (min-width: 980px) {
    .msln { height: 358px; }    /* десктоп */
}
.msln::-webkit-scrollbar { display: none; }
.msln .msi { flex: 0 0 100%; scroll-snap-align: center; align-self: stretch; }
.msln img { width: 100%; height: auto; display: block; }

/* старое @media (max-width:979px){.msln>.msi{height:0}} — перебиваем той же специфичностью */
@media (max-width: 979px) {
    .msln > .msi { height: auto; }
}

/* десктоп: центральный слайд фиксированной ширины 957px, соседи "выглядывают" по бокам */
@media (min-width: 1200px) {
    .msln .msi { flex: 0 0 957px; }
}

/* «Товар дня»: по 1 слайду на всех разрешениях (перебивает и мобильный 216px, и десктопные --n) */
/* Бейдж скидки (.daily i.perc, top/right: -24px) выступает за пределы слайда. В Owl его не резало
   (у .owl-item был position:relative и overflow:visible), а у нативной ленты overflow обрезает.
   Даём ленте запас 28px сверху и по бокам (padding) и возвращаем его отрицательным margin —
   вёрстка не сдвигается, а бейдж помещается в padding. Чтобы соседние слайды не заглядывали
   в этот запас, gap = 2 × запас (56px): бейдж предыдущего слайда (+24px) тоже не заходит в кадр. */
.daily .owl-carousel.dowc {
    --n: 1; --step: 1;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    width: calc(100% + 56px);
    margin: -28px -28px -60px;
    padding: 28px 28px 60px;   /* снизу 60px — тот же запас под текст, что у остальных лент */
    gap: 56px;
}
.daily .dowc > .catalog_item {
    flex: 0 0 100%;
    scroll-snap-align: center;
    position: relative;        /* как у .owl-item: точка отсчёта для абсолютного бейджа .perc */
}

/* стрелки «Товара дня» — на любом разрешении */
.daily .lsl-prev, .daily .lsl-next { display: block; top: calc(115px - 48px / 2); }
/* отрицательный margin-top ленты не должен «схлопываться» наружу и сдвигать обёртку:
   top стрелок отсчитывается от верха слайда */
.daily .lsl-wrap { display: flow-root; }

/* «Товар дня» рядом с «Топ в своей категории».
   Обычный flex-сосед на десктопе (лента сужается на реальную ширину .daily);
   на мобильных — друг под другом, иначе .daily (300px) съедает всю ширину. */
.popular.new .mp { display: block; }
.popular.new .mp:after { display: none; }
.popular.new .mp .top-catalog { min-width: 0; }   /* обязательно: иначе overflow-x внутри flex-элемента не сработает */
.daily {
    width: 300px;
    max-width: 100%;
    margin: 16px auto 0;
    padding: 26px 34px 20px;
    background: #0D1B2A;
    border-radius: 15px;
    overflow: hidden;
    position: relative;    /* было: absolute; right: 0; z-index: 9; — z-index нужен, чтобы лента (.lsl-wrap, position:relative) не перекрывала блок */
    z-index: 3;
}
@media (min-width: 980px) {
    .popular.new .mp {
        display: flex;
        flex-wrap: nowrap;
        gap: 59px;
    }
    .popular.new .mp .top-catalog { flex: 1 1 auto; }
    .daily { width: 300px; flex: 0 0 300px; margin: 0; }
}

/* ---------- 6. Попап корзины (.bap) ---------- */
.bap { width: 718px; max-width: 100%; box-sizing: border-box; padding: 29px; }

.bap-ribbon {
    --n: 4; --step: 4; --gap: 30px;
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 35px;
}
.bap-ribbon::-webkit-scrollbar { display: none; }
.bap-ribbon > * {
    flex: 0 0 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
    scroll-snap-align: start;
    position: relative;
}

@media (max-width: 979px) {
    /* окно на всю ширину экрана (см. мобильный блок в ak.modal.css). Отступы как у Fancybox: 33px от края
       (15px своей рамки попапа + 18px здесь), сверху больше (15 + 28), чтобы заголовок начинался ниже крестика */
    .bap { width: 100%; padding: 28px 18px 18px; }
    .bap-ribbon { --n: 2; --step: 2; --gap: 12px; }
}

/* стрелки внутрь попапа: за границей .ak-modal-scroll они обрезались бы */
.bap .lsl-prev, .bap .lsl-next { top: 41px; }   /* центр по картинке карточки: 130px / 2 - 48px / 2 */
.bap .lsl-prev { left: -26px; }
.bap .lsl-next { right: -26px; }

/* общее правило показывает стрелки только на 1200–1998px, в попапе нужны от 980 и без верхней границы */
@media (min-width: 980px) {
    .bap .lsl-prev, .bap .lsl-next { display: block; }
}

/* ---------- 7. Карточка товара ---------- */

/* Отзывы (.ak-rvs): было items 2/1, margin 20 */
.ak-rvs {
    --n: 2; --step: 2; --gap: 20px;
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    pointer-events: none;   /* бокс ленты шире блока и лежит поверх фильтра — клики ловят только карточки */
}
.ak-rvs::-webkit-scrollbar { display: none; }

/* высота и отступы: .cat .ak-rvs перебивает старое .rvs { height: 269px; margin: 32px 0 59px }.
   --sh — запас под тень карточки сверху и снизу; он вычитается из прежних отступов,
   поэтому вёрстка вокруг не сдвигается */
.cat .ak-rvs,
.ak-rvs {
    --sh: 24px;
    box-sizing: border-box;
    height: calc(269px + 2 * var(--sh));              /* 269px карточки + запас */
    margin: calc(32px - var(--sh)) 0 calc(59px - var(--sh));   /* прежние 32px 0 59px */
    padding: var(--sh) 0;
    z-index: 1;
}

.ak-rvs > * {
    flex: 0 0 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
    min-width: 0;
    scroll-snap-align: start;
    /* бывший .rvs.owl-carousel .owl-item */
    border-radius: 15px;
    box-shadow: 0px 2px 20px rgb(38 0 38 / 10%);
    background: #ffffff;
    pointer-events: auto;
}

.ak-rvs ~ .lsl-prev,
.ak-rvs ~ .lsl-next { top: calc(50% - 24px); }

@media (max-width: 979px) {
    .ak-rvs { --n: 1; --step: 1; }
}

/* .vpr: было items 9/6/3/1, margin 22 */
.ak-vpr {
    --n: 1.5; --step: 1; --gap: 22px;
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.ak-vpr::-webkit-scrollbar { display: none; }
.ak-vpr > * {
    flex: 0 0 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
    min-width: 0;
    scroll-snap-align: start;
    position: relative;
}
@media (min-width: 600px) { .ak-vpr { --n: 3; --step: 3; } }
@media (min-width: 980px) { .ak-vpr { --n: 6; --step: 6; } }
@media (min-width: 1600px) { .ak-vpr { --n: 9; --step: 9; } }

/* Миниатюры под фото (до 1199px): лента со свайпом, без стрелок */
@media (max-width: 1199px) {
    .ak-thumbs {
        position: relative;            /* нужно для расчёта позиции активной миниатюры */
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;                     /* подгони под макет */
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .ak-thumbs::-webkit-scrollbar { display: none; }
    .ak-thumbs > * { flex: 0 0 auto; scroll-snap-align: start; }
}

/* ---------- 8. Баннеры внутренних страниц (.ak-banner) ---------- */
/* высота блока = высота самого высокого слайда (flex-контейнер растёт по самому высокому элементу).
   Картинки показываются целиком, у более низких слайдов остаётся пустое место снизу */
.ak-banner {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: flex-start;          /* слайды разной высоты прижимаются к верху */
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.ak-banner::-webkit-scrollbar { display: none; }
.ak-banner > * { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; }
.ak-banner img { width: 100%; height: auto; display: block; }

/* у этих баннеров стрелки и точки внутри блока, а не за краем, как у .msln */
.lsl-wrap:has(> .ak-banner) .lsl-prev,
.lsl-wrap:has(> .ak-banner) .lsl-next {
    top: calc(50% - 24px);
}
.lsl-wrap:has(> .ak-banner) .lsl-prev { left: 12px; }
.lsl-wrap:has(> .ak-banner) .lsl-next { right: 12px; }
.lsl-wrap:has(> .ak-banner) .lsl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    margin: 0;
    padding: 0;
}

/* ---------- 9. Новости ---------- */

/* .news-slider: было items 1/1/2/4 (брейкпоинты Owl: 0, 600, 900, 1200), margin 25 */
.news-slider.ak-news {
    --n: 1; --step: 1; --gap: 25px;
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.news-slider.ak-news::-webkit-scrollbar { display: none; }
.news-slider.ak-news > * {
    flex: 0 0 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
    min-width: 0;
    scroll-snap-align: start;
    position: relative;
}
@media (min-width: 900px)  { .news-slider.ak-news { --n: 2; --step: 2; } }
@media (min-width: 1200px) { .news-slider.ak-news { --n: 4; --step: 4; } }

/* .owc в блоке «Вам может быть интересно» на детальной новости: 2 карточки до 980px, 4 с 980px, без стрелок.
   Класс ak-news-owc приходит из SLIDER_CLASS в new:catalog.top и стоит на самой ленте.
   Повтор класса нужен, чтобы не зависеть от порядка относительно общих правил .owc */
.owc.ak-news-owc.ak-news-owc { --n: 2; --step: 2; }
.owc.ak-news-owc.ak-news-owc > .catalog_item { flex: 0 0 calc((100% - (var(--n) - 1) * 12px) / var(--n)); }
@media (min-width: 980px) { .owc.ak-news-owc.ak-news-owc { --n: 4; --step: 4; } }


/* ---------- 10. Строгое листание ----------
   Один свайп любой силы листает ровно --step карточек, без пропусков по инерции:
   привязка mandatory + принудительная остановка (scroll-snap-stop: always) на каждой --step-й карточке.
   CSS не умеет :nth-child(var(--step)), поэтому значения step здесь продублированы из разделов выше —
   менять --step и :nth-child нужно парой. */

/* баннеры и «Товар дня»: один слайд за свайп на любой ширине (привязка у них уже mandatory) */
.msln .msi,
.ak-banner > *,
.daily .dowc > .catalog_item { scroll-snap-stop: always; }

/* телефоны и планшеты до 980px; на десктопе листают стрелки по --step (ak.slider.js), свайп/трекпад без изменений */
@media (max-width: 979px) {
    /* step = 1: каждая карточка — точка остановки */
    .owl-carousel.owc, .owl-carousel.bowc,
    .ak-vpr, .ak-rvs, .news-slider.ak-news { scroll-snap-type: x mandatory; }
    .owc > .catalog_item, .bowc > .catalog_item,
    .ak-vpr > *, .ak-rvs > *, .news-slider.ak-news > * { scroll-snap-stop: always; }

    /* step = 2: точки остановки только на нечётных карточках (1, 3, 5...) */
    .bap-ribbon { scroll-snap-type: x mandatory; }
    .bap-ribbon > * { scroll-snap-align: none; }
    .bap-ribbon > :nth-child(2n+1) { scroll-snap-align: start; scroll-snap-stop: always; }

    .owc.ak-news-owc > .catalog_item { scroll-snap-align: none; scroll-snap-stop: normal; }
    .owc.ak-news-owc > .catalog_item:nth-child(2n+1) { scroll-snap-align: start; scroll-snap-stop: always; }
}

/* .ak-vpr на 600–979px: step = 3 */
@media (min-width: 600px) and (max-width: 979px) {
    .ak-vpr > * { scroll-snap-align: none; scroll-snap-stop: normal; }
    .ak-vpr > :nth-child(3n+1) { scroll-snap-align: start; scroll-snap-stop: always; }
}

/* .news-slider на 900–979px: step = 2 */
@media (min-width: 900px) and (max-width: 979px) {
    .news-slider.ak-news > * { scroll-snap-align: none; scroll-snap-stop: normal; }
    .news-slider.ak-news > :nth-child(2n+1) { scroll-snap-align: start; scroll-snap-stop: always; }
}