/* =========================================================
   SLIDER FIXES
   Paste this at the VERY END of your stylesheet
   (it must come after all your existing slider CSS).
========================================================= */


/* ---------------------------------------------------------
   1. SPEED CONTROLS  (change these two numbers to tune)
   --products-fade : time for one hero slide to fade into the next
   --products-zoom : time for the slow zoom on the hero image
   (autoplay delay and carousel speed are set at the top of sliders.js)
--------------------------------------------------------- */
.products-slider {
    --products-fade: 1.2s;
    --products-zoom: 8s;
    --products-ease: cubic-bezier(.4, 0, .2, 1);
}


/* ---------------------------------------------------------
   2. ARROW CLASH FIX  (main bug)
   The featured-products carousel also uses .products-prev /
   .products-next. Its rules come later in the file, so they
   overwrote the hero arrows: wrong size, wrong position,
   and the arrow jumped up because of two vertical offsets
   (top:50% + translateY(-50%) + margin-top:-25px).
   These rules are scoped to the hero only and restore the
   sizes/positions you originally wrote.
--------------------------------------------------------- */
.products-slider .products-arrow {
    top: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    transform: none;
    background: rgba(4, 49, 78, 0.82);
    color: #ffffff;
    font-size: 18px;
}

.products-slider .products-arrow:hover {
    background: var(--products-yellow);
    color: var(--products-blue);
}

.products-slider .products-arrow.products-prev { left: 18px; }
.products-slider .products-arrow.products-next { right: 18px; }

@media (max-width: 1200px) {
    .products-slider .products-arrow.products-next { right: 185px; }
}

@media (max-width: 991px) {
    .products-slider .products-arrow.products-next { right: 18px; }
}

@media (max-width: 600px) {
    .products-slider .products-arrow {
        width: 42px;
        height: 42px;
        margin-top: -21px;
        font-size: 15px;
    }
    .products-slider .products-arrow.products-prev { left: 10px; }
    .products-slider .products-arrow.products-next { right: 10px; }
}


/* ---------------------------------------------------------
   3. SMOOTH HERO CROSSFADE
   Before: old slide faded out while the new one faded in, so
   the white page background showed through in the middle
   (a "dip" or flash), and the old image zoomed back while
   still visible.
   Now: the old slide stays fully visible underneath until the
   new one has finished fading in on top of it.
--------------------------------------------------------- */
.products-slide {
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0s linear var(--products-fade),
        visibility 0s linear var(--products-fade);
}

.products-slide.products-active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transition:
        opacity var(--products-fade) var(--products-ease),
        visibility 0s;
}

/* Image: slow zoom-out on the active slide, reset only after it is hidden */
.products-image img {
    transform: scale(1.08);
    transition: transform 0s linear var(--products-fade);
}

.products-slide.products-active .products-image img {
    transform: scale(1);
    transition: transform var(--products-zoom) ease-out;
}

/* Text: gentle staggered rise-in on the active slide */
.products-panel > * {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0s linear var(--products-fade),
        transform 0s linear var(--products-fade);
}

.products-slide.products-active .products-panel > * {
    opacity: 1;
    transform: none;
    transition:
        opacity .8s var(--products-ease),
        transform .8s var(--products-ease);
}

.products-slide.products-active .products-panel > :nth-child(1) { transition-delay: .25s; }
.products-slide.products-active .products-panel > :nth-child(2) { transition-delay: .35s; }
.products-slide.products-active .products-panel > :nth-child(3) { transition-delay: .45s; }
.products-slide.products-active .products-panel > :nth-child(4) { transition-delay: .55s; }
.products-slide.products-active .products-panel > :nth-child(5) { transition-delay: .65s; }


/* ---------------------------------------------------------
   4. BOTTOM FEATURE STRIP: fade when the text changes
   (before, the icons and text swapped instantly while the
   slide above was still cross-fading)
--------------------------------------------------------- */
.products-feature > *,
.products-feature-end h3 {
    transition: opacity .35s ease, transform .35s ease;
}

.products-features.products-features-changing .products-feature > *,
.products-features.products-features-changing .products-feature-end h3 {
    opacity: 0;
    transform: translateY(6px);
}


/* ---------------------------------------------------------
   5. FEATURED PRODUCTS CAROUSEL
   sliders.js wraps the track in .products-slider-viewport.
   It clips the cards on the left/right edge of the card area.
   Before, the wrapper's 55px side padding showed slivers of
   the neighbouring cards next to the arrows.
--------------------------------------------------------- */
.products-slider-viewport {
    overflow: hidden;          /* fallback for old browsers */
    overflow-x: clip;
    overflow-y: visible;
}


/* ---------------------------------------------------------
   6. RESPECT "REDUCE MOTION" DEVICE SETTING
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .products-slider {
        --products-fade: .2s;
        --products-zoom: 0s;
    }

    .products-panel > *,
    .products-feature > *,
    .products-feature-end h3 {
        transform: none !important;
    }
}