/* Promotions Gallery Component */
.promotions-gallery-container {
    width: 100%;
    /* Same desktop cap as the single-pic hero (defined on .product-hero-card).
       The active slide is max-width:85% of this, so capping the container
       shrinks the whole gallery proportionally — smaller image, same peek. */
    max-width: var(--hero-max-width, 640px);
    margin: 0 auto;
    overflow: hidden;
}

/* Specificity note: this targets `.promotions-gallery.swiper` (both classes,
   specificity 0,2,0) instead of just `.promotions-gallery` (0,1,0) so it always
   wins over Swiper v11's own `.swiper { overflow: hidden }` rule — Benefit.php
   re-injects swiper-bundle.min.css at the bottom of the page via $script, so a
   single-class override loses the cascade race and the image's drop shadow gets
   clipped flush at the swiper's bottom edge. */
.promotions-gallery.swiper {
    width: 100%;
    overflow: visible;
    position: relative;
}

.promotions-gallery .swiper-wrapper {
    align-items: center;
}

.promotions-gallery .swiper-slide {
    width: 758px;
    max-width: 85%;
    opacity: 0.4;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: scale(0.9);
}

.promotions-gallery .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
}

.promotions-gallery .swiper-slide .gallery-image {
    width: 100%;
    aspect-ratio: 950/540;
    object-fit: cover;
    border-radius: 8px;
    /* Match .product-hero-image's shadow. Small enough (4+12 = 16px extent) to
       fit within the gap to the pagination dots below, so the bottom edge isn't
       clipped by .promotions-gallery-container's overflow:hidden. */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Pagination Container */
.gallery-pagination-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    /* 32px (not 20px) leaves explicit room above the dots for the gallery
       image's drop shadow before they meet — keeps the shadow visible inside
       the container without overlapping pagination. */
    margin-top: 32px;
}

.gallery-pagination {
    position: static !important;
    display: flex;
    gap: 8px;
    width: auto !important;
}

.gallery-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #D9D9D9;
    opacity: 1 !important;
    transition: background 0.2s ease;
    margin: 0 !important;
    border-radius: 50%;
}

.gallery-pagination .swiper-pagination-bullet-active {
    background: #5454D4;
}

.gallery-counter {
    font-size: 16px;
    font-weight: 500;
    color: #46494F;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    /* 8px each side is enough room for the visible portion of the image's
       side shadow — the blur is 12px but its outer ~4px is essentially
       transparent due to gaussian falloff, so clipping there is invisible.
       Trading those 4px on each side gets the image 16px wider, which matters
       on narrow phones. On desktop the slide is narrower than the container
       by design (max-width: 85%) so the shadow has natural room there. */
    .promotions-gallery-container {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Full-width slides (relative to the container's content area, now inset by
       the padding above) — matches how the single-pic branch
       (.product-hero-image) renders edge-to-edge on mobile, so users see the
       same image shape whether the benefit has one picture or many. The
       .gallery-image's aspect-ratio (declared above) drives slide height. */
    .promotions-gallery .swiper-slide {
        width: 100%;
        max-width: 100%;
    }

    .gallery-pagination-container {
        margin-top: 16px;
        gap: 12px;
    }

    .gallery-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }

    .gallery-counter {
        font-size: 14px;
    }
}