/*
 * Product carousel — [webara_product_carousel]
 *
 * Owns only the carousel chrome: section, header, arrows, dots, first-slide
 * card and the layout of the slider track. The product cards inside are
 * WooCommerce's / the theme's own and are not restyled here; the few
 * `ul.products li.product` rules below just stop the theme's grid/list
 * sizing from fighting the widths Swiper sets on each slide.
 *
 * Direction: everything uses logical properties; the root carries dir="rtl"
 * or "ltr" (set from is_rtl()) and Swiper reads it for slide direction.
 * Per-instance colors arrive on the root as --webara-pc-bg (background),
 * --webara-pc-fg (shared text color) and the more specific
 * --webara-pc-title-color / --webara-pc-more-color.
 */

.webara-product-carousel {
    box-sizing: border-box;
    background-color: var(--webara-pc-bg, transparent);
    color: var(--webara-pc-fg, var(--besanj-color-text));
}

.webara-product-carousel__inner {
    box-sizing: border-box;
}

/* Layout: contained ------------------------------------------------------ */

.webara-product-carousel--has-background {
    padding-block: var(--besanj-space-6);
}

.webara-product-carousel--has-background:not(.webara-product-carousel--full):not(.webara-product-carousel--full-bg) {
    border-radius: var(--besanj-radius-lg);
}

/* Layout: viewport-wide ("full" and "full-bg") ---------------------------- */

/*
 * The section breaks out of whatever column it sits in and spans the
 * viewport, assuming its parent is centered (true for Elementor
 * containers). --webara-pc-viewport is set by product-carousel.js from
 * clientWidth (no scrollbar); 100vw is the no-JS fallback.
 * A parent with overflow: hidden will clip it.
 */
.webara-product-carousel--full,
.webara-product-carousel--full-bg {
    width: var(--webara-pc-viewport, 100vw);
    margin-inline: calc(50% - var(--webara-pc-viewport, 100vw) / 2);
}

.webara-product-carousel--full-bg .webara-product-carousel__inner {
    max-width: var(--besanj-container-storefront);
    margin-inline: auto;
}

.webara-product-carousel--has-background .webara-product-carousel__inner,
.webara-product-carousel--full .webara-product-carousel__inner,
.webara-product-carousel--full-bg .webara-product-carousel__inner {
    padding-inline: var(--besanj-space-4);
}

@media (min-width: 782px) {
    .webara-product-carousel--has-background .webara-product-carousel__inner,
    .webara-product-carousel--full .webara-product-carousel__inner,
    .webara-product-carousel--full-bg .webara-product-carousel__inner {
        padding-inline: var(--besanj-space-6);
    }
}

@media (min-width: 1024px) {
    .webara-product-carousel--has-background .webara-product-carousel__inner,
    .webara-product-carousel--full .webara-product-carousel__inner,
    .webara-product-carousel--full-bg .webara-product-carousel__inner {
        padding-inline: var(--besanj-space-8);
    }
}

/* Header ------------------------------------------------------------------ */

.webara-product-carousel .webara-product-carousel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--besanj-space-3);
    margin-block-end: var(--besanj-space-4);
}

.webara-product-carousel .webara-product-carousel__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--webara-pc-title-color, var(--webara-pc-fg, var(--besanj-color-text)));
    font-size: var(--besanj-font-size-400);
    font-weight: var(--besanj-font-weight-semibold);
    line-height: var(--besanj-line-height-tight);
    overflow-wrap: anywhere;
}

@media (min-width: 782px) {
    .webara-product-carousel .webara-product-carousel__title {
        font-size: var(--besanj-font-size-500);
    }
}

.webara-product-carousel__actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--besanj-space-3);
    margin-inline-start: auto;
}

.webara-product-carousel .webara-product-carousel__more {
    display: inline-flex;
    align-items: center;
    gap: var(--besanj-space-1);
    min-height: var(--besanj-control-height-comfortable);
    color: var(--webara-pc-more-color, var(--webara-pc-fg, var(--besanj-color-interactive-text)));
    font-size: var(--besanj-font-size-200);
    font-weight: var(--besanj-font-weight-semibold);
    text-decoration: none;
}

.webara-product-carousel .webara-product-carousel__more:hover {
    text-decoration: underline;
}

.webara-product-carousel__icon {
    display: block;
    flex-shrink: 0;
}

/* The chevron artwork points to the right; "end" icons follow the reading
   direction forward and "start" icons backward. */
.webara-product-carousel[dir='rtl'] .webara-product-carousel__icon--end,
.webara-product-carousel[dir='ltr'] .webara-product-carousel__icon--start {
    transform: scaleX(-1);
}

/* Arrows ------------------------------------------------------------------ */

.webara-product-carousel__nav {
    display: none;
    gap: var(--besanj-space-2);
}

@media (min-width: 782px) {
    .webara-product-carousel__nav {
        display: flex;
    }
}

.webara-product-carousel .webara-product-carousel__nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--besanj-control-height-comfortable);
    height: var(--besanj-control-height-comfortable);
    padding: 0;
    color: var(--besanj-color-text);
    background: var(--besanj-color-bg-surface);
    border: 1px solid var(--besanj-color-border-strong);
    border-radius: var(--besanj-radius-md);
    cursor: pointer;
    transition: background-color var(--besanj-motion-fast) var(--besanj-ease-standard);
}

.webara-product-carousel .webara-product-carousel__nav-button:hover {
    background: var(--besanj-color-bg-subtle);
}

.webara-product-carousel .webara-product-carousel__nav-button:disabled {
    color: var(--besanj-color-text-disabled);
    background: var(--besanj-color-bg-surface);
    cursor: default;
}

.webara-product-carousel .webara-product-carousel__nav-button.swiper-button-lock {
    display: none;
}

.webara-product-carousel__nav-button:focus-visible,
.webara-product-carousel__more:focus-visible {
    outline: 2px solid var(--besanj-color-focus);
    outline-offset: 2px;
}

/* Slider track ------------------------------------------------------------ */

/* Room for the theme card's hover lift, which the slider would clip. */
.webara-product-carousel__slider {
    padding-block: var(--besanj-space-1);
    margin-block: calc(-1 * var(--besanj-space-1));
}

.webara-product-carousel ul.products.webara-product-carousel__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    overflow: visible;
    list-style: none;
    scroll-snap-type: none;
}

.webara-product-carousel ul.products li.product.swiper-slide {
    float: none;
    align-self: stretch;
    height: auto;
    margin-block: 0;
}

/*
 * By default a card keeps the width the theme gives it (its max-width
 * included). Only when a card count is set (product-carousel.js adds
 * is-counted) is the slide width authoritative, so the cap is lifted.
 */
.webara-product-carousel.is-counted ul.products li.product.swiper-slide {
    max-width: none;
}

/* First slide ------------------------------------------------------------- */

.webara-product-carousel .webara-product-carousel__first-slide {
    display: flex;
    align-self: stretch;
    height: auto;
    min-height: 12rem;
    margin-block: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    background: var(--besanj-color-bg-subtle);
    border: 1px solid var(--besanj-color-border);
    border-radius: var(--besanj-radius-md);
}

/* Auto card width: match the product cards (measured by the script; the
   fallback covers the moment before it runs). With a card count, Swiper's
   own inline width applies instead. */
.webara-product-carousel:not(.is-counted) .webara-product-carousel__first-slide {
    flex: 0 0 auto;
    width: var(--webara-pc-card-width, 13.75rem);
}

.webara-product-carousel__first-slide-link {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

.webara-product-carousel__first-slide-link:focus-visible {
    outline: 2px solid var(--besanj-color-focus);
    outline-offset: -2px;
}

.webara-product-carousel .webara-product-carousel__first-slide-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* Dots -------------------------------------------------------------------- */

.webara-product-carousel__dots {
    --swiper-pagination-color: currentColor;
    --swiper-pagination-bullet-inactive-color: currentColor;
    --swiper-pagination-bullet-inactive-opacity: 0.3;

    display: flex;
    justify-content: center;
    margin-block-start: var(--besanj-space-3);
}

/* Swiper positions its pagination element absolutely by default. */
.webara-product-carousel .webara-product-carousel__dots.swiper-pagination {
    position: static;
    width: auto;
}

/* Empty state (shop managers only) ---------------------------------------- */

.webara-product-carousel__notice {
    margin: 0;
    padding: var(--besanj-space-3) var(--besanj-space-4);
    color: var(--besanj-color-warning-text);
    font-size: var(--besanj-font-size-200);
    background: var(--besanj-color-warning-bg);
    border: 1px solid var(--besanj-color-warning-border);
    border-radius: var(--besanj-radius-md);
}