/* Shared by the catalog and Admin preview. Qualification remains unchanged. */
[data-discount-lighting] {
    --discount-border-alpha: 90%;
    --discount-near-blur: 6px;
    --discount-near-spread: 1px;
    --discount-near-alpha: 40%;
    --discount-wide-blur: 16px;
    --discount-wide-alpha: 18%;
    --discount-inset-blur: 6px;
    --discount-inset-alpha: 6%;
    --discount-energy-opacity: .65;
    --discount-border: color-mix(in srgb, var(--discount-light-color) var(--discount-border-alpha), transparent);
    --discount-glow-near: color-mix(in srgb, var(--discount-light-color) var(--discount-near-alpha), transparent);
    --discount-glow-wide: color-mix(in srgb, var(--discount-light-color) var(--discount-wide-alpha), transparent);
    --discount-glow-inset: color-mix(in srgb, var(--discount-light-color) var(--discount-inset-alpha), transparent);
}
[data-discount-lighting="MEDIA"] {
    --discount-border-alpha: 100%;
    --discount-near-blur: 10px;
    --discount-near-alpha: 58%;
    --discount-wide-blur: 22px;
    --discount-wide-alpha: 26%;
    --discount-inset-blur: 8px;
    --discount-inset-alpha: 8%;
    --discount-energy-opacity: .8;
}
[data-discount-lighting="FUERTE"] {
    --discount-border-alpha: 100%;
    --discount-near-blur: 12px;
    --discount-near-spread: 2px;
    --discount-near-alpha: 76%;
    --discount-wide-blur: 26px;
    --discount-wide-alpha: 34%;
    --discount-inset-blur: 10px;
    --discount-inset-alpha: 10%;
    --discount-energy-opacity: .95;
}
:root[data-discount-lighting] .product-card[data-discounted="true"],
.design-product-preview[data-discount-lighting] {
    border-color: var(--discount-border);
    outline: none;
    box-shadow:
        0 0 var(--discount-near-blur) var(--discount-near-spread) var(--discount-glow-near),
        0 0 var(--discount-wide-blur) 0 var(--discount-glow-wide),
        inset 0 0 var(--discount-inset-blur) 0 var(--discount-glow-inset),
        0 10px 30px rgba(0, 0, 0, .18);
}
/* Keep existing decorative edges in the selected hue, including on hover. */
:root[data-discount-lighting] .product-card[data-discounted="true"]::before {
    background: linear-gradient(180deg, var(--discount-glow-near), transparent);
    pointer-events: none;
}
:root[data-discount-lighting] .product-card[data-discounted="true"]::after {
    background: linear-gradient(90deg, transparent, var(--discount-glow-near), transparent);
    pointer-events: none;
}
/* One small light follows the existing edge; no moving blur/shadow or JS loop.
   Unsupported motion paths and reduced motion keep the original static glow. */
@supports (offset-path: inset(1px round 17px)) {
    @media (prefers-reduced-motion: no-preference) {
        :root[data-discount-lighting] .product-card[data-discounted="true"]::after {
            left: 0;
            right: auto;
            top: 0;
            width: 48px;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(90deg, transparent, var(--discount-light-color) 45%, color-mix(in srgb, var(--discount-light-color) 20%, white) 80%, transparent);
            box-shadow: 0 0 6px var(--discount-glow-near);
            opacity: var(--discount-energy-opacity);
            offset-path: inset(1px round 17px);
            offset-anchor: center;
            offset-rotate: auto;
            animation: discount-edge-energy 5s linear infinite;
            z-index: 4;
        }
        :root[data-discount-lighting] .product-card[data-discounted="true"]:hover::after {
            opacity: 1;
        }
        @keyframes discount-edge-energy {
            from { offset-distance: 0%; }
            to { offset-distance: 100%; }
        }
    }
}
@media (max-width: 1199px) {
    /* Existing 97%-wide container leaves only 4–15px at the viewport edges.
       Reserve a small local gutter for the halo; keep grid gaps and clipping intact. */
    :root[data-discount-lighting] .catalog-grid {
        padding-inline: clamp(0px, calc(16px - 1.5vw), 12px);
    }
}