/* WooCommerce Product Badges - Frontend Styles */

.wc-product-badges {
    position: absolute;
    z-index: 10;
    display: flex;
    pointer-events: none;
}

.wc-badge {
    display: inline-block;
    line-height: 1.2;
    white-space: nowrap;
    /* All other styles are applied dynamically from admin settings */
}

/* Ensure badges work on product images */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    position: relative;
}

.woocommerce ul.products li.product a,
.woocommerce-page ul.products li.product a {
    display: block;
    position: relative;
}

/* Single product page positioning */
.woocommerce div.product div.images,
.woocommerce-page div.product div.images {
    position: relative;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce-page div.product div.images .woocommerce-product-gallery__wrapper {
    position: relative;
}

/* Animation for badges (optional) */
@keyframes badgeFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wc-badge {
    animation: badgeFadeIn 0.3s ease-out;
}

/* Ensure badges appear above images but below overlays */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
    position: relative;
    z-index: 1;
}

/* For themes that wrap product images */
.product-image-wrapper,
.product-thumbnail {
    position: relative;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wc-product-badges {
        /* Mobile adjustments can be added here if needed */
    }
}

/* Print styles */
@media print {
    .wc-product-badges {
        display: none;
    }
}