/**
 * Eva Product Badges – frontend stylesheet.
 *
 * Public CSS API (stable across patch releases):
 *   .eva-product-badge          – all badges
 *   .eva-product-badge--new     – the "New" variant
 *
 * Customization via CSS custom properties on :root or on the card selector.
 */

:root {
    --eva-new-badge-top: 12px;
    --eva-new-badge-left: 12px;
    --eva-new-badge-z-index: 20;
    --eva-new-badge-padding: 4px 10px;
    --eva-new-badge-font-size: 0.75rem;
    --eva-new-badge-font-weight: 600;
    --eva-new-badge-line-height: 1.4;
    --eva-new-badge-color: #ffffff;
    --eva-new-badge-background: #2271b1;
    --eva-new-badge-border-radius: 3px;
}

/**
 * Make the product card a positioning context so the badge can be placed
 * absolutely within it.
 *
 * This rule is scoped to WooCommerce product loop cards to avoid interfering
 * with unrelated elements. The selector targets both the classic storefront
 * layout (.woocommerce ul.products li.product) and the common block-theme
 * equivalent (.wc-block-grid__product).
 */
.woocommerce ul.products li.product,
.wc-block-grid__products .wc-block-grid__product {
    position: relative;
}

.eva-product-badge {
    position: absolute;
    top: var(--eva-new-badge-top);
    left: var(--eva-new-badge-left);
    z-index: var(--eva-new-badge-z-index);
    display: inline-block;
    padding: var(--eva-new-badge-padding);
    font-size: var(--eva-new-badge-font-size);
    font-weight: var(--eva-new-badge-font-weight);
    line-height: var(--eva-new-badge-line-height);
    color: var(--eva-new-badge-color);
    border-radius: var(--eva-new-badge-border-radius);

    /* Prevent badge from intercepting clicks on the product card link. */
    pointer-events: none;
}

.eva-product-badge--new {
    background-color: var(--eva-new-badge-background);
}