/*
 * Минимальный Swiper layout для конкретных слайдеров.
 *
 * В теме лежит только swiper-bundle.min.js без сопутствующего CSS-файла.
 * Старый .cart-slider работал благодаря inline style="display:flex"
 * в шаблоне; новые/перенесённые слайдеры (.reviews-slider, .bxslider-about)
 * этого inline-стиля не имеют, поэтому добавляем базовый layout сами.
 *
 * ВАЖНО: правила НЕ глобальные по .swiper*, потому что Fancybox-лайтбокс
 * использует пересекающиеся внутренние классы (.swiper-slide и т.п.),
 * и широкие правила ломали отображение фото в попапе.
 */

/* Конкретные Swiper-слайдеры, у которых нет inline display:flex */
.reviews-slider.swiper,
.bxslider-about.swiper {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.reviews-slider.swiper > .swiper-wrapper,
.bxslider-about.swiper > .swiper-wrapper {
    display: flex;
    align-items: stretch;
    box-sizing: content-box;
}

.reviews-slider.swiper > .swiper-wrapper > .swiper-slide,
.bxslider-about.swiper > .swiper-wrapper > .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

/*
 * Галерея товара .cart-slider.
 *
 * Исходно её .swiper-wrapper держал layout на inline style="display:flex"
 * из шаблона (single-product.php). cart-slider-perf.js пересоздаёт Swiper на
 * всех фактурах и вызывает el.swiper.destroy(true, true) — cleanStyles=true
 * делает wrapperEl.removeAttribute('style'), то есть СТИРАЕТ тот inline flex.
 * Своего CSS у Swiper в теме нет → wrapper становился display:block и слайды
 * сваливались в столбец (баг 2026-05-20).
 *
 * Фиксим flex на уровне CSS, чтобы layout не зависел от inline-стиля, который
 * Swiper срывает при re-init. .cart-slider в разметке без класса .swiper —
 * скоупим по самому .cart-slider (markup: class="cart-slider slider-container").
 */
.cart-slider > .swiper-wrapper {
    display: flex;
    align-items: stretch;
    box-sizing: content-box;
}

.cart-slider > .swiper-wrapper > .swiper-slide {
    flex-shrink: 0;
    box-sizing: border-box;
}

/* ============================================================
   Навигация reviews — .reviews-nav (за пределами .swiper).
   Одинаковые простые тёмные стрелки на всех ширинах.
   • mobile/tablet: в потоке слева под слайдером
   • desktop (≥992px): absolute по центру section, под кнопкой "Оставить отзыв"
   ============================================================ */

/* Базовое (общее) — flex-контейнер со стрелками */
.reviews-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-start;
    margin-top: 20px;
}

.reviews-nav .swiper-button-prev,
.reviews-nav .swiper-button-next {
    position: static;
    width: 36px;
    height: 36px;
    background: transparent;
    color: #1a1a1a;
    border: none;
    outline: none;
    box-sizing: border-box;
    cursor: pointer;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    -webkit-appearance: none;
}

.reviews-nav .swiper-button-prev:focus,
.reviews-nav .swiper-button-next:focus,
.reviews-nav .swiper-button-prev:focus-visible,
.reviews-nav .swiper-button-next:focus-visible {
    outline: none;
}

.reviews-nav .swiper-button-prev:hover,
.reviews-nav .swiper-button-next:hover {
    opacity: 0.6;
}

.reviews-nav .swiper-button-prev::before,
.reviews-nav .swiper-button-next::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.reviews-nav .swiper-button-prev::before {
    transform: rotate(-135deg);
    margin-left: 4px;
}

.reviews-nav .swiper-button-next::before {
    transform: rotate(45deg);
    margin-right: 4px;
}

.reviews-nav .swiper-button-disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}

/* ── Mobile/tablet (<992px) ── */
@media (max-width: 991px) {
    /* Сброс рудиментарного top-margin у .reviews-btn — был под Slick-стрелки в absolute. */
    .reviews-btn {
        margin-top: 30px !important;
    }
}

/* ── Desktop (≥992px): стрелки absolute под кнопкой "Оставить отзыв" ── */
@media (min-width: 992px) {
    /* На проде .reviews-btn — position:absolute от .new-section (left:50%, bottom:72px).
       Стрелки тоже absolute, на 60px ниже кнопки. Контейнер .reviews-nav центрируем. */
    .block-reviews .new-section {
        position: relative;
    }

    .reviews-nav {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 20px;
        margin-top: 0;
        gap: 24px;
    }
}

/*
 * Заглушка под кадром галереи товара (2026-08-07).
 *
 * Кадры фактур весят 150–250 КБ и грузятся по мере переключения. Пока картинка
 * едет, на её месте была белая пустота — заказчица описала это как «постоянно
 * пустые окна» (жалоба 07.08, слабый интернет в кафе). Нейтральная подложка
 * убирает ощущение поломки: видно, что кадр есть и он загружается.
 *
 * Плавное проявление — чтобы картинка не «выстреливала» поверх фона.
 */
.cart-slider .cart-slider__block {
    background-color: #f2efec;
}

.cart-slider .cart-slider__img {
    animation: lc-img-fade 0.25s ease-in;
}

@keyframes lc-img-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}