/*!
 * maiwell.com – OPC-Portlet "Produktstream-Slider" (Plugin jtl_maiwell)
 *
 * Baut auf den shopweit geladenen Splide-Basisstyles (Templates/A77/css/splide.css)
 * auf und faerbt Pfeile/Karten ins maiwell-Design ("Beere & Rosa", Primaer: #ca506e).
 */

/* ---- Basis ---- */

.mw-stream-slider {
    position: relative;
}

/* Etwad Luft fuer Fokus-Ringe und Pfeile */
.mw-stream-slider .splide {
    padding: 0.25rem 0;
}

/* Karte: Bewusst NUR der Slide als Flex-Container, damit alle Karten
   gleich hoch werden. Das Sizing der quadratischen Produktbilder bleibt
   komplett bei NOVA (.item-slider/.productbox-image/.inner/img) – eigene
   Regeln darauf haben die Kartenhoehe gesprengt und den Preis unter den
   Slide-Rand gedrueckt (dort wird er vom Track abgeschnitten). */
.mw-stream-slider .splide__slide {
    display: flex;
}

.mw-stream-slider .splide__slide .product-wrapper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ---- Pfeile im Beere-Look (Basis: splide.css) ---- */

.mw-stream-slider .splide__arrow {
    background: #ca506e;
    color: #fff;
    opacity: 0.92;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    /* ueber den Rand-Verlaeufen (mw-fade-edges) halten */
    z-index: 3;
}

.mw-stream-slider .splide__arrow svg {
    fill: #fff;
}

.mw-stream-slider .splide__arrow:hover:not(:disabled) {
    background: #a53d57;
    opacity: 1;
}

.mw-stream-slider .splide__arrow:focus-visible {
    outline: 3px solid #a53d57;
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .mw-stream-slider .splide__arrow {
        height: 1.75em;
        width: 1.75em;
    }
}

/* ---- Kontinuierlicher Modus (Laufband, autoWidth) ---- */

.mw-stream-slider[data-mw-mode="continuous"] .splide__slide {
    flex: 0 0 auto;
    width: clamp(200px, 24vw, 300px);
}

@media (max-width: 767px) {
    .mw-stream-slider[data-mw-mode="continuous"] .splide__slide {
        width: 200px;
    }
}

/* ---- Fallback: vor der Initialisierung bzw. ohne JS/ohne Splide
       bleibt eine horizontal scrollbare Kartenreihe ---- */

/* Sicherheitsnetz: Die globale splide.css haelt einen uninitialisierten Slider
   komplett unsichtbar (".splide { visibility: hidden }" bis is-initialized).
   Ohne JS oder bei fehlgeschlagener Initialisierung waere der Slider damit
   komplett weg – wir heben das fuer den Fallback-Zustand auf und zeigen die
   unten stilisierte, horizontal scrollbare Kartenreihe. */
.mw-stream-slider .splide:not(.is-initialized) {
    visibility: visible;
}

.mw-stream-slider .splide:not(.is-initialized) .splide__track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mw-stream-slider .splide:not(.is-initialized) .splide__list {
    gap: 1.25rem;
}

.mw-stream-slider .splide:not(.is-initialized) .splide__slide {
    flex: 0 0 auto;
    width: clamp(200px, 24vw, 300px);
}

/* ---- Preis an/aus (Portlet-Option "Preis anzeigen") ---- */

.mw-stream-slider[data-mw-show-price="0"] .item-slider-price {
    display: none;
}

/* ---- Weiche Raender (Portlet-Option, Default an) ---- */

.mw-stream-slider[data-mw-fade-edges="1"] .splide {
    position: relative;
}

.mw-stream-slider[data-mw-fade-edges="1"] .splide::before,
.mw-stream-slider[data-mw-fade-edges="1"] .splide::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 48px;
    z-index: 2;
    pointer-events: none;
}

.mw-stream-slider[data-mw-fade-edges="1"] .splide::before {
    left: 0;
    background: linear-gradient(90deg, var(--mw-fade-color, #fff) 0%, transparent 100%);
}

.mw-stream-slider[data-mw-fade-edges="1"] .splide::after {
    right: 0;
    background: linear-gradient(270deg, var(--mw-fade-color, #fff) 0%, transparent 100%);
}

@media (max-width: 767px) {
    .mw-stream-slider[data-mw-fade-edges="1"] .splide::before,
    .mw-stream-slider[data-mw-fade-edges="1"] .splide::after {
        width: 32px;
    }
}

/* ---- Interaktion: Hover-Lift + dezenter Bild-Zoom ---- */

.mw-stream-slider .splide__slide .product-wrapper {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mw-stream-slider .splide__slide .product-wrapper:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* Bild-Zoom auf dem .inner-Container: NOVA zentriert das img selbst per
   transform: translate(-50%, -50%) – ein transform auf dem img wuerde diese
   Zentrierung ueberschreiben (Bild springt nach unten rechts). .inner hat
   kein eigenes Transform, skaliert daher sauber; geclippt wird ueber
   .productbox-image. */
.mw-stream-slider .productbox-image {
    overflow: hidden;
}

.mw-stream-slider .productbox-image .inner {
    transition: transform 0.45s ease;
}

.mw-stream-slider .splide__slide:hover .productbox-image .inner {
    transform: scale(1.04);
}

/* ---- Einblenden beim Viewport-Start (Stagger) ----
   Splide setzt .is-initialized im Moment der IntersectionObserver-
   Initialisierung – genau dann fahren die Karten versetzt ein. */

@keyframes mw-card-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mw-stream-slider .splide.is-initialized .splide__slide {
    animation: mw-card-in 0.45s ease both;
}

.mw-stream-slider .splide.is-initialized .splide__slide:nth-child(2) { animation-delay: 0.04s; }
.mw-stream-slider .splide.is-initialized .splide__slide:nth-child(3) { animation-delay: 0.08s; }
.mw-stream-slider .splide.is-initialized .splide__slide:nth-child(4) { animation-delay: 0.12s; }
.mw-stream-slider .splide.is-initialized .splide__slide:nth-child(5) { animation-delay: 0.16s; }
.mw-stream-slider .splide.is-initialized .splide__slide:nth-child(6) { animation-delay: 0.20s; }
.mw-stream-slider .splide.is-initialized .splide__slide:nth-child(7) { animation-delay: 0.24s; }
.mw-stream-slider .splide.is-initialized .splide__slide:nth-child(8) { animation-delay: 0.28s; }

/* ---- Barrierefreiheit: prefers-reduced-motion schaltet alles ab ---- */

@media (prefers-reduced-motion: reduce) {
    .mw-stream-slider .splide.is-initialized .splide__slide,
    .mw-stream-slider .splide.is-initialized .splide__slide:nth-child(n) {
        animation: none;
    }

    .mw-stream-slider .splide__slide .product-wrapper,
    .mw-stream-slider .productbox-image .inner {
        transition: none;
    }

    .mw-stream-slider .splide__slide .product-wrapper:hover {
        transform: none;
    }

    .mw-stream-slider .splide__slide:hover .productbox-image .inner {
        transform: none;
    }
}