/* Ryjik Products Carousel — v1.2.2 (external heading wrapper for related products) */

.ryjik-carousel-wrap {
    position: relative;
    margin: 0;
}

.ryjik-carousel-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

/* Когда перед шорткодом стоит виджет et_heading — JS добавляет этот класс
   на wrap и выставляет inline `top` на header. Header позиционируется
   абсолютно относительно wrap (full-width shortcode-виджета) и встаёт
   вертикально по центру заголовка, right-aligned. Заголовок остаётся
   центрированным своим виджетом et_heading. */
.ryjik-carousel-wrap--has-heading .ryjik-carousel-header {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    margin: 0;
    z-index: 2;
}

.ryjik-carousel-title {
    margin: 0;
}

.ryjik-carousel-nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.ryjik-carousel-prev,
.ryjik-carousel-next {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f97316;
    color: #fff;
    border: 0;
    cursor: pointer;
    transition: background .2s ease;
}

.ryjik-carousel-prev:hover,
.ryjik-carousel-next:hover {
    background: #ea580c;
}

.ryjik-carousel-prev.swiper-button-disabled,
.ryjik-carousel-next.swiper-button-disabled {
    opacity: .3;
    cursor: default;
}

.ryjik-carousel-prev span,
.ryjik-carousel-next span {
    font-size: 26px;
    line-height: 1;
    display: block;
    margin-top: -3px;
}

.ryjik-carousel.swiper {
    overflow: hidden;
    width: 100%;
}

.ryjik-carousel .swiper-slide {
    height: auto;
}

/* Внутренний ul.products — контейнер для одной карточки */
/* Specificity (0,4,2) — побеждает темовое `.single .product ul.products:not(.fbt)` (0,4,1) на странице товара. */
.ryjik-carousel.swiper .swiper-slide > ul.products {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}

.ryjik-carousel.swiper .swiper-slide > ul.products > li.product {
    list-style: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
}

@media (max-width: 767px) {
    .ryjik-carousel-header {
        display: none;
    }
}

/* Fix FOUC — карусель невидима до инициализации Swiper */
.ryjik-carousel.swiper:not(.swiper-initialized) {
    visibility: hidden;
}
.ryjik-carousel.swiper:not(.swiper-initialized) .swiper-slide {
    opacity: 0;
}

/* 2-рядная карусель: в каждом .swiper-slide лежат $rows карточек,
   стакованных вертикально. align-items:flex-start на wrapper убирает
   дефолтный stretch Swiper'а, чтобы каждая колонка (slide) имела
   свою высоту, а карточки внутри — индивидуальную высоту (masonry,
   как в .ryjik-cart-cross-sells). */
.ryjik-carousel.has-rows-2 .swiper-wrapper {
    align-items: flex-start;
}
.ryjik-carousel.has-rows-2 .swiper-slide {
    height: auto;
}
.ryjik-carousel.has-rows-2.swiper .swiper-slide > ul.products {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Внешний heading wrapper — используется, когда heading рендерится вне Elementor-контекста
   (напр., related products на странице товара). Центрирует inline-block `.et-heading`
   и задаёт отступы, чтобы визуально матчить heading на главной. */
.ryjik-related-heading {
    text-align: center;
    margin: 48px 0 24px;
}