/**
 * C4mulo5 – WooCommerce Produkt-Karussell
 * Spezifisches Styling für Produktkarten im Slider.
 *
 * Bei v0.16.3+: Die Karten werden direkt vom WC-Shortcode gerendert
 * (als <ul class="products"><li class="product">) und wir wrappen sie
 * in die Slider-Struktur. Deshalb müssen wir mit WC-Defaults arbeiten
 * und nur Überschneidungen fixen.
 */

.c4mulo5-wc-product-carousel {
    padding: 60px 0;
}

/* Original WC-Grid unsichtbar machen (Original bleibt im DOM für Mesmerize-Tracking) */
.c4mulo5-wc-product-carousel .c4m5-wcpc-slot > ul.products {
    display: none !important;
}

/* WC-Produkt-<li> innerhalb unseres Sliders neutralisieren */
.c4mulo5-wc-product-carousel .c4m5-slider__slide ul.products,
.c4mulo5-wc-product-carousel .c4m5-slider__slide .products {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.c4mulo5-wc-product-carousel .c4m5-slider__slide li.product {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: #ffffff;
    border: 1px solid #e5ebf0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    height: 100%;
    display: flex !important;
    flex-direction: column;
}

.c4mulo5-wc-product-carousel .c4m5-slider__slide li.product:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
    border-color: #c8a84b;
}

.c4mulo5-wc-product-carousel .c4m5-slider__slide li.product > a {
    text-decoration: none !important;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0 !important;
}

.c4mulo5-wc-product-carousel .c4m5-slider__slide li.product img {
    margin: 0 !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 12px;
    box-sizing: border-box;
    background: #f5f7fa;
    width: 100%;
    height: auto;
}

.c4mulo5-wc-product-carousel .c4m5-slider__slide li.product h2,
.c4mulo5-wc-product-carousel .c4m5-slider__slide li.product .woocommerce-loop-product__title {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: 12px 16px 4px !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    color: #1d2327 !important;
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.c4mulo5-wc-product-carousel .c4m5-slider__slide li.product .price {
    padding: 0 16px 8px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1a5490 !important;
    margin: 0 !important;
}

.c4mulo5-wc-product-carousel .c4m5-slider__slide li.product .price del {
    color: #9ca3af !important;
    font-size: 0.85rem;
    font-weight: 400;
}

.c4mulo5-wc-product-carousel .c4m5-slider__slide li.product .price ins {
    text-decoration: none !important;
    color: #dc2626 !important;
}

.c4mulo5-wc-product-carousel .c4m5-slider__slide li.product .star-rating {
    margin: 0 16px 8px !important;
    font-size: 0.75rem !important;
}

.c4mulo5-wc-product-carousel .c4m5-slider__slide li.product .onsale {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    background: #dc2626;
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
    min-height: auto;
    min-width: auto;
    line-height: 1.2;
}

.c4mulo5-wc-product-carousel .c4m5-slider__slide li.product .button,
.c4mulo5-wc-product-carousel .c4m5-slider__slide li.product .added_to_cart {
    display: block !important;
    margin: 8px 16px 16px !important;
    padding: 10px 16px !important;
    background: #29aae4 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
}

.c4mulo5-wc-product-carousel .c4m5-slider__slide li.product .button:hover,
.c4mulo5-wc-product-carousel .c4m5-slider__slide li.product .added_to_cart:hover {
    background: #1a5490 !important;
    color: #ffffff !important;
}

/* ═══ Reset Mesmerize ::before/::after ═══════════════════════ */
.c4mulo5-wc-product-carousel::before,
.c4mulo5-wc-product-carousel::after,
.c4m5-wcpc-slot::before,
.c4m5-wcpc-slot::after {
    display: none !important;
    content: none !important;
}

/* ═══ Headline ═══════════════════════════════════════════════ */
.c4mulo5-wc-product-carousel .c4m5-wcpc-headline {
    margin: 0 0 8px;
    color: #1d2327;
    font-weight: 700;
}

.c4mulo5-wc-product-carousel .c4m5-wcpc-subheadline {
    margin: 0 0 32px;
    color: #6b7280;
}

/* ═══ EMPTY STATE ═════════════════════════════════════════════ */
.c4m5-wcpc-empty,
.c4m5-wc-notice {
    padding: 30px 20px;
    background: #f5f7fa;
    border: 1px dashed #c8a84b;
    border-radius: 6px;
    color: #50575e;
    font-size: 14px;
    text-align: center;
}
.c4m5-wc-notice strong { color: #1d2327; font-size: 15px; }

/* ═══ KARTE ═══════════════════════════════════════════════════ */
.c4m5-wcpc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5ebf0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.c4m5-wcpc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
    border-color: #c8a84b;
}

.c4m5-wcpc-card__inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none !important;
    color: inherit;
}

/* ═══ BILD + BADGES ══════════════════════════════════════════ */
.c4m5-wcpc-card__imgwrap {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #f5f7fa;
    overflow: hidden;
}

.c4m5-wcpc-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    box-sizing: border-box;
    transition: transform 0.35s ease;
}

.c4m5-wcpc-card:hover .c4m5-wcpc-card__img {
    transform: scale(1.04);
}

.c4m5-wcpc-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    z-index: 2;
}

.c4m5-wcpc-badge--sale {
    background: #dc2626;
    color: #ffffff;
}

.c4m5-wcpc-badge--new {
    background: #29aae4;
    color: #ffffff;
}

.c4m5-wcpc-badge--bestseller {
    background: #c8a84b;
    color: #1d2327;
}

/* ═══ BODY ═══════════════════════════════════════════════════ */
.c4m5-wcpc-card__body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.c4m5-wcpc-card__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: #1d2327;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.c4m5-wcpc-card__shortdesc {
    margin: 0;
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ═══ RATING (Sterne via CSS-Variable) ═══════════════════════ */
.c4m5-wcpc-card__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
}

.c4m5-wcpc-stars {
    --rating: 0%;
    display: inline-block;
    width: 80px;
    height: 14px;
    background-image: linear-gradient(
        to right,
        #f59e0b 0,
        #f59e0b var(--rating),
        #e5ebf0 var(--rating),
        #e5ebf0 100%
    );
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 16"><path d="M8 0l2.47 4.99L16 5.76l-4 3.82L13.09 15 8 12.42 2.91 15 4 9.58 0 5.76l5.53-.77zm16 0l2.47 4.99L32 5.76l-4 3.82L29.09 15 24 12.42 18.91 15 20 9.58 16 5.76l5.53-.77zm16 0l2.47 4.99L48 5.76l-4 3.82L45.09 15 40 12.42 34.91 15 36 9.58 32 5.76l5.53-.77zm16 0l2.47 4.99L64 5.76l-4 3.82L61.09 15 56 12.42 50.91 15 52 9.58 48 5.76l5.53-.77zm16 0l2.47 4.99L80 5.76l-4 3.82L77.09 15 72 12.42 66.91 15 68 9.58 64 5.76l5.53-.77z" fill="black"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 16"><path d="M8 0l2.47 4.99L16 5.76l-4 3.82L13.09 15 8 12.42 2.91 15 4 9.58 0 5.76l5.53-.77zm16 0l2.47 4.99L32 5.76l-4 3.82L29.09 15 24 12.42 18.91 15 20 9.58 16 5.76l5.53-.77zm16 0l2.47 4.99L48 5.76l-4 3.82L45.09 15 40 12.42 34.91 15 36 9.58 32 5.76l5.53-.77zm16 0l2.47 4.99L64 5.76l-4 3.82L61.09 15 56 12.42 50.91 15 52 9.58 48 5.76l5.53-.77zm16 0l2.47 4.99L80 5.76l-4 3.82L77.09 15 72 12.42 66.91 15 68 9.58 64 5.76l5.53-.77z" fill="black"/></svg>');
}

.c4m5-wcpc-ratingcount {
    color: #9ca3af;
}

/* ═══ PREIS ═══════════════════════════════════════════════════ */
.c4m5-wcpc-card__price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a5490;
    margin-top: auto;
}

.c4m5-wcpc-card__price del {
    color: #9ca3af;
    font-size: 0.85rem;
    font-weight: 400;
    margin-right: 6px;
}

.c4m5-wcpc-card__price ins {
    text-decoration: none;
    color: #dc2626;
}

.c4m5-wcpc-card__grundpreis {
    font-size: 0.72rem;
    color: #6b7280;
    margin-top: -2px;
}

/* ═══ CART-BUTTON ════════════════════════════════════════════ */
.c4m5-wcpc-card__cart {
    padding: 0 16px 16px;
}

.c4m5-wcpc-btn {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: #29aae4;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.c4m5-wcpc-btn:hover {
    background: #1a5490;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.c4m5-wcpc-btn--details {
    background: #ffffff;
    color: #1a5490;
    border: 2px solid #1a5490;
    padding: 8px 16px;
}
.c4m5-wcpc-btn--details:hover {
    background: #1a5490;
    color: #ffffff !important;
}

/* ═══ STIL-VARIANTEN ═══════════════════════════════════════ */

/* Kompakt: kleineres Bild, weniger Padding */
.c4mulo5-wc-product-carousel.c4m5-wcpc-style-compact .c4m5-wcpc-card__imgwrap {
    aspect-ratio: 4 / 3;
}
.c4mulo5-wc-product-carousel.c4m5-wcpc-style-compact .c4m5-wcpc-card__body {
    padding: 12px;
    gap: 4px;
}
.c4mulo5-wc-product-carousel.c4m5-wcpc-style-compact .c4m5-wcpc-card__title {
    font-size: 0.85rem;
    min-height: 2.3em;
}
.c4mulo5-wc-product-carousel.c4m5-wcpc-style-compact .c4m5-wcpc-card__price {
    font-size: 0.95rem;
}

/* Mit-Badges: größere Badges, prominenter Preis */
.c4mulo5-wc-product-carousel.c4m5-wcpc-style-prominent .c4m5-wcpc-badge {
    font-size: 12px;
    padding: 5px 12px;
    top: 12px;
    left: 12px;
}
.c4mulo5-wc-product-carousel.c4m5-wcpc-style-prominent .c4m5-wcpc-card__price {
    font-size: 1.25rem;
    color: #dc2626;
}