/**
 * electric-border.css — Capas de realce del <electric-border>.
 *
 * El canvas dibuja el rayo; estas tres capas ponen la luz alrededor. Son CSS
 * estático, así que sobreviven cuando la animación se apaga por
 * prefers-reduced-motion: el realce sigue leyéndose, sólo deja de moverse.
 *
 * El color se toma de --eb-color, que el elemento setea desde su atributo.
 * El original usaba oklch(from ...) para derivar la variante luminosa; acá se
 * declaran las dos a mano porque oklch() relativo todavía no está en todos los
 * navegadores que la tienda tiene que soportar, y un color que no parsea deja
 * el borde invisible en vez de degradarse.
 */
electric-border {
    --eb-color: #ff8a2b;
    --eb-radius: 16px;
    position: relative;
    display: block;
    border-radius: var(--eb-radius);
    isolation: isolate;
}

/* El canvas se extiende más allá de la tarjeta (BORDER_OFFSET en el JS), así
   que no puede capturar clics ni empujar el layout de la grilla. */
electric-border .eb-canvas-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
}
electric-border .eb-canvas { display: block; }

electric-border .eb-content {
    position: relative;
    border-radius: inherit;
    z-index: 1;
}

electric-border .eb-layers {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

electric-border .eb-glow-1,
electric-border .eb-glow-2,
electric-border .eb-bg-glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-sizing: border-box;
}

/* Contorno nítido, apenas difuminado: es el que define el borde. */
electric-border .eb-glow-1 {
    border: 2px solid color-mix(in srgb, var(--eb-color) 60%, transparent);
    filter: blur(1px);
}

/* Halo cercano: lo que hace que el borde parezca encendido y no dibujado. */
electric-border .eb-glow-2 {
    border: 2px solid var(--eb-color);
    filter: blur(4px);
}

/* Resplandor de fondo, detrás de la tarjeta. Es el que tiñe el aire alrededor. */
electric-border .eb-bg-glow {
    z-index: -1;
    transform: scale(1.08);
    filter: blur(32px);
    opacity: 0.3;
    background: linear-gradient(-30deg, var(--eb-color), transparent, var(--eb-color));
}

/* Sin color-mix (navegadores viejos): un borde sólido igual se ve. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    electric-border .eb-glow-1 { border-color: var(--eb-color); }
}

/* Menos movimiento: el JS ya no dibuja el rayo. Se compensa subiendo un poco
   el halo para que la tarjeta siga destacándose del resto de la grilla. */
@media (prefers-reduced-motion: reduce) {
    electric-border .eb-bg-glow { opacity: 0.45; }
}

/* ── Modo CAPA: destacar algo que ya existe, sin envolverlo ───────────────
 *
 * Para las tarjetas de oferta no se puede usar el modo normal (envolver el
 * contenido): la tarjeta es el ítem del grid, así que meterle un wrapper
 * alrededor rompe el layout, deja el borde brillando solo cuando el filtro por
 * categoría oculta la tarjeta de adentro, y rompe el selector
 * ".product-card > div:last-child" que sostiene el botón "Agregar".
 *
 * En este modo el elemento va DENTRO de la tarjeta, estirado con inset. No hace
 * falta tocar el JS: el componente mide su propio rectángulo, y estirado ese
 * rectángulo sigue el de la tarjeta. Como no lleva contenido, .eb-content queda
 * vacío y no ocupa lugar.
 */
electric-border.eb-overlay {
    position: absolute;
    /* El borde va SOBRE el filo de la tarjeta y el rayo flamea hacia AFUERA
       (la excursión medida del ruido es ~9px con chaos=0.09). Eso sólo
       funciona porque a la tarjeta que lleva borde se le suelta el
       overflow:hidden — ver la regla :has() de abajo. Adentro no invade: la
       primera octava del ruido está anulada, así que el trazo nace pegado al
       perímetro, no cruzando la foto. */
    inset: 0;
    /* Los clics tienen que llegar al link de la tarjeta que está debajo. */
    pointer-events: none;
    /* Por encima de la foto, por debajo de los controles de la tarjeta
       (botón de compartir, flechas del carrusel). */
    z-index: 3;
    /* El modo normal aísla el apilado para que el resplandor de fondo no se
       escape; acá tiene que integrarse al de la tarjeta, no crear uno nuevo. */
    isolation: auto;
}

/* Dentro de la tarjeta el resplandor de fondo se saltea: pintaría por encima de
   la foto (o quedaría tapado, según el apilado) y ensucia más de lo que suma.
   El contorno y el halo cercano alcanzan para que la oferta salte a la vista. */
electric-border.eb-overlay .eb-bg-glow { display: none; }

/* El precio de la ficha de producto (producto.php). Este bloque nunca tuvo
   overflow:hidden, así que el rayo flamea hacia afuera sin más. El padding le
   da al número aire para no quedar pegado al rayo. */
.modal-price.has-offer-glow {
    position: relative;
    /* width:fit-content y no display:inline-block: el contenedor del precio es
       flex, y un ítem flex BLOQUIFICA el inline-block (computa a block), así que
       el marco salía del ancho completo de la columna en vez de abrazar el
       número. fit-content encoge igual en contexto flex y en contexto normal. */
    width: fit-content;
    max-width: 100%;
    padding: 10px 16px;
}

/* La tarjeta con oferta: marco de referencia del posicionamiento absoluto y,
   sobre todo, SIN el overflow:hidden que trae del bundle — con él, todo lo que
   el rayo dibuja fuera del filo se recortaba y el efecto quedaba mordido (o
   había que meterlo adentro, tapando la foto del producto). Soltarlo es seguro
   porque lo único que ese overflow recortaba era la esquina de la foto: la
   imagen y los botones ya se recortan solos (.card-img y .card-add/.odor-btn
   tienen su propio overflow:hidden). */
.product-card:has(> electric-border.eb-overlay) {
    position: relative;
    overflow: visible;
}

/* Al soltar el overflow de la tarjeta, la foto perdería el redondeo de las
   esquinas de arriba (era la tarjeta quien la recortaba). Se lo devuelve acá:
   7px = los 8px del radius de la tarjeta menos su borde de 1px. */
.product-card:has(> electric-border.eb-overlay) .card-img {
    border-radius: 7px 7px 0 0;
}