/* BSD New Arrivals — Grid-Layout (theme-agnostic, \u00fcberschreibt Divi). */

.bsdna-wrap {
    width: 100%;
    box-sizing: border-box;
}

.bsdna-wrap ul.products {
    display: grid !important;
    grid-template-columns: repeat(var(--bsdna-cols, 4), minmax(0, 1fr)) !important;
    gap: 24px !important;
    padding: 0 !important;
    margin: 0 0 1.5em 0 !important;
    list-style: none !important;
    width: 100% !important;
}

.bsdna-wrap ul.products::before,
.bsdna-wrap ul.products::after {
    content: none !important;
    display: none !important;
}

.bsdna-wrap ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    box-sizing: border-box !important;
    list-style: none !important;
    position: relative;
}

/* "Neu"-Badge oben links — Overlay ueber Produktbild. Max 65x65 px.
   Hohe Spezifitaet + !important, damit Divi-Theme-Overrides
   (vor allem .et_shop_image img { width:100% }) nicht zertruemmern. */
.bsdna-wrap a.woocommerce-LoopProduct-link,
.bsdna-wrap a.woocommerce-loop-product__link {
    position: relative !important;
    display: block !important;
}
.bsdna-wrap .bsdna-badge {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 10 !important;
    width: 65px !important;
    height: 65px !important;
    max-width: 65px !important;
    max-height: 65px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
    user-select: none;
    display: block !important;
    line-height: 0 !important;
}
.bsdna-wrap .bsdna-badge img {
    width: 65px !important;
    height: 65px !important;
    max-width: 65px !important;
    max-height: 65px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
@media (max-width: 768px) {
    .bsdna-wrap .bsdna-badge,
    .bsdna-wrap .bsdna-badge img {
        width: 48px !important;
        height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
    }
    .bsdna-wrap .bsdna-badge {
        top: 6px !important;
        left: 6px !important;
    }
}
@media (max-width: 480px) {
    .bsdna-wrap .bsdna-badge,
    .bsdna-wrap .bsdna-badge img {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
    }
}

.bsdna-wrap ul.products li.product img {
    width: 100%;
    height: auto;
    display: block;
}

.bsdna-wrap ul.products li.product .woocommerce-loop-product__title,
.bsdna-wrap ul.products li.product h2,
.bsdna-wrap ul.products li.product h3 {
    font-size: 1em;
    line-height: 1.3;
    margin: 0.5em 0 0.25em;
}

.bsdna-wrap ul.products li.product .price {
    display: block;
    margin: 0.25em 0 0.5em;
}

/* Column-Varianten via CSS-Custom-Property. */
.bsdna-cols-1 { --bsdna-cols: 1; }
.bsdna-cols-2 { --bsdna-cols: 2; }
.bsdna-cols-3 { --bsdna-cols: 3; }
.bsdna-cols-4 { --bsdna-cols: 4; }
.bsdna-cols-5 { --bsdna-cols: 5; }
.bsdna-cols-6 { --bsdna-cols: 6; }

/* Responsive Breakpoints. */
@media (max-width: 1200px) {
    .bsdna-cols-5, .bsdna-cols-6 { --bsdna-cols: 4; }
}
@media (max-width: 1024px) {
    .bsdna-cols-4, .bsdna-cols-5, .bsdna-cols-6 { --bsdna-cols: 3; }
}
@media (max-width: 768px) {
    .bsdna-cols-3, .bsdna-cols-4, .bsdna-cols-5, .bsdna-cols-6 { --bsdna-cols: 2; }
}
@media (max-width: 480px) {
    .bsdna-wrap { --bsdna-cols: 1 !important; }
    .bsdna-wrap ul.products { gap: 16px !important; }
}