/**
 * WooCommerce Alternativen – Frontend-Stylesheet
 * Version: 18.7.4 (24-Apr-2025)
 * -----------------------------------------------------------------
 *  • Basis-Styles für alle Layouts
 *  • Grid / Slider / Masonry / List / Minimal
 *  • Slider-Pfeile (modernes Glass-Design) + Auto-Kontrast
 *  • Dots, Infinity-Loop, Autoplay-Pause-Overlay
 *  • Focus-Styles & prefers-reduced-motion
 *
 *  Primär-Farben / Schriftgrößen werden im PHP inline überschrieben;
 *  alles hier sind nur Fallback-Werte.
 */

/* ========== BASIS ========== */
.wc-alt-alternatives{
    background:#ffffff;
    color:#000000;
    font-size:14px;                   /* Fallback – wird inline überschrieben */
    --items-per-view:4;               /* per data-attr überschrieben          */
}
.wc-alt-alternatives a{
    color:#0073aa;
    text-decoration:none;
}
.wc-alt-alternatives .alternative-produkt-item{
    border:1px solid #dddddd;
    padding:10px;
    text-align:center;
    transition:box-shadow .2s, transform .2s;
}
.wc-alt-alternatives .alternative-produkt-item:hover{
    box-shadow:0 2px 8px rgba(0,0,0,.1);
    transform:translateY(-2px);
}

/* Bewegungen reduzieren – falls User das OS-Flag gesetzt hat */
@media (prefers-reduced-motion:reduce){
    .wc-alt-alternatives .alternative-produkt-item,
    .wc-alt-alternatives .slider-track{
        transition:none !important;
    }
}

/* ========== GRID-LAYOUT ========== */
.wc-alt-alternatives.grid-mod{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}
@media(max-width:768px){
    .wc-alt-alternatives.grid-mod{
        grid-template-columns:repeat(1,1fr)!important;
    }
}

/* ========== SLIDER-LAYOUT ========== */
.wc-alt-alternatives.slider-layout{
    position:relative;
    overflow:hidden;
    max-width:100%;
    margin:0 auto;
    padding:0 0 42px;                 /* Platz für Dots */
    outline:none;                     /* eigener Focus-Ring */
}
.wc-alt-alternatives.slider-layout:focus-visible{
    outline:3px solid #0073aa;
    outline-offset:4px;
}
.wc-alt-alternatives .slider-track{
    display:flex;
    will-change:transform;
    transition:transform .5s ease;
}

/* ---------- Slider-Arrows – Modern Glass ---------- */
.wc-alt-alternatives .slider-arrow{
    position:absolute;top:50%;transform:translateY(-50%);
    width:56px;height:56px;border-radius:12px;
    backdrop-filter:blur(6px) saturate(160%);
    background:rgba(255,255,255,.20);                /* Glass-Fläche */
    box-shadow:0 8px 18px rgba(0,0,0,.25),
               inset 0 0 0 1px rgba(255,255,255,.35);
    display:flex;justify-content:center;align-items:center;
    cursor:pointer;user-select:none;z-index:20;
    transition:background .25s,transform .25s,box-shadow .25s;
    font-size:0;line-height:0;                       /* Chevron verstecken */
}
.wc-alt-alternatives .slider-arrow::before{
    content:"";display:block;width:0;height:0;border-style:solid;
    border-width:10px 12px 10px 0;
    border-color:transparent #fff transparent transparent;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.wc-alt-alternatives .slider-arrow-next::before{
    border-width:10px 0 10px 12px;
    border-color:transparent transparent transparent #fff;
}
.wc-alt-alternatives .slider-arrow:hover,
.wc-alt-alternatives .slider-arrow:focus-visible{
    background:rgba(255,255,255,.32);
    transform:translateY(-50%) scale(1.07);
    box-shadow:0 12px 22px rgba(0,0,0,.32),
               inset 0 0 0 1px rgba(255,255,255,.45);
}
/* heller Hintergrund => Auto-Kontrast (JS fügt .dark-bg hinzu) */
.wc-alt-alternatives .slider-arrow.dark-bg{
    background:rgba(255,255,255,.80);
}
.wc-alt-alternatives .slider-arrow-prev{left:8px;}
.wc-alt-alternatives .slider-arrow-next{right:8px;}
@media(max-width:640px){
    .wc-alt-alternatives .slider-arrow{
        width:44px;height:44px;border-radius:10px;
    }
    .wc-alt-alternatives .slider-arrow::before{
        border-width:8px 10px 8px 0;
    }
    .wc-alt-alternatives .slider-arrow-next::before{
        border-width:8px 0 8px 10px;
    }
}

/* ---------- Pagination-Dots ---------- */
.wc-alt-alternatives .slider-dots{
    text-align:center;
    margin-top:12px;
}
.wc-alt-alternatives .slider-dots .dot{
    display:inline-block;
    width:11px;height:11px;
    margin:0 5px;
    background:#bbbbbb;
    border-radius:50%;
    cursor:pointer;
    transition:background .3s, transform .3s;
}
.wc-alt-alternatives .slider-dots .dot:hover,
.wc-alt-alternatives .slider-dots .dot:focus-visible{
    transform:scale(1.25);
}
.wc-alt-alternatives .slider-dots .dot.active{
    background:#0073aa;
}

/* Gleich hohe Slider-Items */
.wc-alt-alternatives .slider-track .alternative-produkt-item{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

/* ---------- Autoplay-Pause-Overlay ---------- */
.wc-alt-alternatives.slider-layout.paused::after{
    content:"❚❚";
    position:absolute;
    top:6px;right:10px;
    font-size:22px;line-height:1;
    color:#ffffff;
    background:rgba(0,0,0,.55);
    padding:4px 8px;
    border-radius:4px;
    pointer-events:none;
    z-index:25;
}
.wc-alt-alternatives.slider-layout.paused .slider-arrow{
    opacity:.55;
}

/* ========== MASONRY-LAYOUT ========== */
.wc-alt-alternatives.masonry-layout>div{
    column-count:3;
    column-gap:20px;
}
@media(max-width:768px){
    .wc-alt-alternatives.masonry-layout>div{column-count:1;}
}

/* ========== LIST-LAYOUT ========== */
.wc-alt-alternatives.list-layout ul{
    list-style:none;margin:0;padding:0;
}
.wc-alt-alternatives.list-layout .alternative-produkt-item{
    margin-bottom:15px;
    border-bottom:1px solid #cccccc;
    padding-bottom:10px;
}

/* ========== MINIMAL-LAYOUT ========== */
.wc-alt-alternatives.minimal-layout{
    text-align:center;
}