/* Discount Highlight Plugin Styles */

/* Ensure product-item has relative positioning for badge placement */
.product-item {
    position: relative;
}

/* Ensure picture container has relative positioning for badge */
.product-item .picture {
    position: relative;
}

/* Badge styling - only shows on products with old price (discounts) */
.product-item:has(.old-price) .picture::before {
    content: var(--discount-badge-text);
    position: absolute;
    top: 8px;
    left: 8px;
    background: #ef4444;
    color: #fff;
    padding: 4px 8px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

/* Hide badge when disabled */
body.discount-badge-disabled .product-item:has(.old-price) .picture::before {
    content: none;
}

/* Old price highlighting */
.product-item .price.old-price {
    color: #dc2626;
    text-decoration-color: #ef4444;
    font-weight: 600;
}

/* Reset old price styles when disabled */
body.old-price-highlight-disabled .product-item .price.old-price {
    color: inherit;
    text-decoration-color: inherit;
    font-weight: inherit;
}

/* New price highlighting */
.product-item .price.actual-price {
    font-weight: 700;
    font-size: 1.1em;
}

/* Reset new price styles when disabled */
body.new-price-highlight-disabled .product-item .price.actual-price {
    font-weight: inherit;
    font-size: inherit;
}