/* =========================================================
   Shared product-slider CSS — split out of home.css (2026-09-02) so that
   pages which only need the ".ds-product-swiper" slider (currently: single
   product pages, for the related-products slider in
   woocommerce/single-product/related.php) don't have to download the rest
   of home.css (hero slider, intro/features/search sections, category-icon
   slider, etc.), which is homepage-only.

   IMPORTANT: every rule below is a VERBATIM COPY of the matching rule still
   present in home.css (home.css itself is untouched, and remains the file
   loaded on the front page). This file is enqueued INSTEAD of home.css only
   on pages that are not the front page (see inc/enqueue.php). If any of
   these ".ds-product-swiper" / ".ds-product-slider-*" / ".ds-slider-nav" /
   ".ds-slider-pagination" rules are ever changed, the matching rule in
   home.css must be updated to match (and vice versa), or the homepage and
   product-page sliders will silently drift apart in appearance.
   ========================================================= */

/* ---- Anti-flash: lay out the right number of columns in plain CSS before
   Swiper's JS finishes running, matching assets/js/slider.js's own
   slidesPerView/spaceBetween breakpoints exactly (see home.css's fuller
   comment on this same rule for the full rationale). ---- */
.ds-product-swiper:not(.swiper-initialized) .swiper-wrapper {
    flex-wrap: nowrap;
}

.ds-product-swiper:not(.swiper-initialized) .swiper-slide {
    width: auto;
    flex: 0 0 calc((100% - 16px) / 2);
    margin-inline-end: 16px;
}

@media (min-width: 768px) {
    .ds-product-swiper:not(.swiper-initialized) .swiper-slide {
        flex-basis: calc((100% - 40px) / 3);
        margin-inline-end: 20px;
    }
}

@media (min-width: 992px) {
    .ds-product-swiper:not(.swiper-initialized) .swiper-slide {
        flex-basis: calc((100% - 72px) / 4);
        margin-inline-end: 24px;
    }
}

/* ---- Product slider section heading + wrapper + slides ---- */
.ds-product-slider-section .section-title {
    margin-bottom: 0;
}

.ds-product-swiper {
    padding-block: 0.5rem;
    padding-inline: 4px;
}

/* Wrapper that owns the nav arrows + pagination as SIBLINGS of the swiper root (not
   children of it) — the swiper root itself has overflow:hidden by default (needed to
   properly clip/mask sliding cards), so anything meant to sit visually outside the
   product images must live outside that box instead of inside it. */
.ds-product-slider-wrap {
    position: relative;
    padding-inline: 0;
}

@media (min-width: 992px) {
    .ds-product-slider-wrap {
        padding-inline: 46px;
    }
}

/*
 * IMPORTANT: these buttons/pagination keep the "swiper-button-next/prev" and
 * "swiper-pagination" classes so Swiper's JS (navigation/pagination modules) can find
 * and operate them — but ALL visual styling is driven by our own ".ds-slider-nav" /
 * ".ds-slider-pagination" classes below, with every position-related property reset
 * explicitly. This sidesteps Swiper's bundled CSS entirely instead of trying to win a
 * cascade fight against it: Swiper's own RTL flip rules only ever target elements that
 * are still DESCENDANTS of its ".swiper-rtl"-classed root, and since these buttons now
 * live outside that root (see note above), they never receive that automatic flip —
 * left unresolved, that produced the exact "both buttons collapse onto the same spot"
 * bug. Every offset below is therefore set to an explicit value (never left implicit),
 * so nothing from Swiper's stylesheet can leak through.
 */
.ds-slider-nav {
    box-sizing: border-box;
    display: none;
    position: absolute !important;
    inset-block-start: 38% !important;
    inset-block-end: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--ds-primary-dark);
    background: var(--ds-white);
    width: 38px !important;
    height: 38px !important;
    border-radius: 50%;
    box-shadow: var(--ds-shadow-sm);
    z-index: 5 !important;
    transition: background-color var(--ds-transition), color var(--ds-transition);
}

@media (min-width: 992px) {
    .ds-slider-nav {
        display: inline-flex;
    }
}

.ds-slider-nav-prev {
    /* inset-inline-start resolves to the RIGHT edge under RTL — "previous" sits on
       the right, matching standard RTL carousel convention. */
    inset-inline-start: 0 !important;
}

.ds-slider-nav-next {
    /* inset-inline-end resolves to the LEFT edge under RTL — "next" sits on the left. */
    inset-inline-end: 0 !important;
}

.ds-slider-nav::after {
    content: "";
    width: 8px;
    height: 8px;
    border-style: solid;
    border-color: currentColor;
    border-width: 0 1.6px 1.6px 0;
}

.ds-slider-nav-prev::after {
    /* Sits on the right edge — points further right, toward previous items. */
    transform: rotate(-45deg) translate(-1px, -1px);
}

.ds-slider-nav-next::after {
    /* Sits on the left edge — points further left, toward next items. */
    transform: rotate(135deg) translate(-1px, -1px);
}

.ds-slider-nav:hover {
    background: var(--ds-primary);
    color: var(--ds-white);
}

.ds-slider-nav:focus-visible {
    outline: 2px solid var(--ds-primary);
    outline-offset: 2px;
}

.ds-slider-nav.swiper-button-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* Pagination dots: forced into normal document flow BELOW the slides (not the
   library's default absolute-over-content position), with clear breathing room so
   they never sit on top of product cards. */
.ds-slider-pagination {
    display: flex !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    margin-top: 1.5rem !important;
    margin-inline: 0 !important;
    padding: 0;
    justify-content: center;
    gap: 0.4rem;
}

/* Higher specificity than the rule above (two classes vs one) so that when Swiper's
   watchOverflow locks the pagination (not enough slides to need it — e.g. a related-
   products list with only 1-3 items), it actually stays hidden instead of our own
   "!important; display:flex" winning the tie and showing empty/useless dots. */
.ds-slider-pagination.swiper-pagination-lock {
    display: none !important;
}

.ds-slider-pagination .swiper-pagination-bullet {
    margin: 0 !important;
}

.ds-slider-pagination .swiper-pagination-bullet-active {
    background: var(--ds-primary);
    opacity: 1;
}