/* =============================================================
   Liquid glass para el diseno 2027 (cabecera y barra inferior movil).
   Capa CSS: tinte + borde pulido + fondo ambiental. La refraccion la
   anade js/liquid-glass-2027.js (Chromium); en otros motores queda el
   cristal esmerilado de siempre. Solo tema claro (la tienda no tiene
   tema oscuro). Cargar DESPUES de design-2027.css.
   ============================================================= */
:root {
    --glass-tint-top: rgba(255, 255, 255, .46);
    --glass-tint-bottom: rgba(240, 246, 247, .30);
    --glass-rim-top: rgba(255, 255, 255, .85);
    --glass-rim-hairline: rgba(255, 255, 255, .22);
    --glass-rim-bottom: rgba(255, 255, 255, .10);
    --glass-border: rgba(20, 38, 42, .10);
    --glass-shadow: 0 10px 30px rgba(20, 50, 55, .12);
}

/* Fondo ambiental: el cristal necesita algo que reflejar. Los brillos
   toman el color corporativo del cliente. */
body {
    isolation: isolate;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(40rem 30rem at 15% 8%, color-mix(in srgb, var(--colorCorporativo, #299BA5) 20%, transparent), transparent 62%),
        radial-gradient(36rem 30rem at 85% 30%, color-mix(in srgb, var(--colorCorporativo, #299BA5) 11%, #8b5cf6 9%), transparent 62%),
        radial-gradient(44rem 32rem at 45% 100%, color-mix(in srgb, var(--colorCorporativo, #299BA5) 14%, #06b6d4 10%), transparent 62%);
}

/* ---------- Superficie de cristal (panel) ---------- */
.h27-pill,
.h27-compact .h27-pill {
    background: linear-gradient(180deg, var(--glass-tint-top), var(--glass-tint-bottom));
    border: 1px solid var(--glass-border);
    box-shadow:
        var(--glass-shadow),
        inset 0 1px 0 var(--glass-rim-top),
        inset 0 0 0 1px var(--glass-rim-hairline),
        inset 0 -1px 0 var(--glass-rim-bottom);
    -webkit-backdrop-filter: blur(3px) saturate(150%);
    backdrop-filter: blur(3px) saturate(150%);
}

/* Sin refraccion (no Chromium) el cristal necesita mas esmerilado para
   que el texto siga leyendose sobre el contenido que pasa por debajo. */
html:not(.lg-refract) .h27-pill,
html:not(.lg-refract) .h27-compact .h27-pill {
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
}

@media (max-width: 991px) {
    .h27-dock {
        background: linear-gradient(180deg, var(--glass-tint-top), var(--glass-tint-bottom));
        border: 1px solid var(--glass-border);
        box-shadow:
            var(--glass-shadow),
            inset 0 1px 0 var(--glass-rim-top),
            inset 0 0 0 1px var(--glass-rim-hairline),
            inset 0 -1px 0 var(--glass-rim-bottom);
        -webkit-backdrop-filter: blur(3px) saturate(150%);
        backdrop-filter: blur(3px) saturate(150%);
    }

    html:not(.lg-refract) .h27-dock {
        -webkit-backdrop-filter: blur(16px) saturate(170%);
        backdrop-filter: blur(16px) saturate(170%);
    }

    .h27-dock a,
    .h27-dock button {
        color: var(--h27-muted);
    }

    .h27-dock a.is-active {
        background: color-mix(in srgb, var(--colorCorporativo, #299BA5) 16%, transparent);
        color: var(--colorCorporativo, #299BA5);
    }
}

/* ---------- Desplegables (nivel "menu") ----------
   Viven DENTRO de .h27-pill, que ya tiene backdrop-filter: un backdrop-filter
   anidado solo vería el interior de la píldora, así que aquí no se aplica;
   el nivel menu se resuelve con la capa de lavado casi opaca + borde pulido,
   para que el texto no dependa de lo que haya detrás. */
.h27-menu .main-menu .sub-menu.categorias,
.h27-header .header-top-single-dropdown__dropdown-menu-items {
    background: color-mix(in srgb, #f8fafb 90%, transparent);
    border: 1px solid var(--glass-border);
    box-shadow:
        0 18px 44px rgba(20, 50, 55, .22),
        inset 0 1px 0 var(--glass-rim-top),
        inset 0 0 0 1px var(--glass-rim-hairline);
}

/* ---------- Barra de compra fija del movil ---------- */
@media (max-width: 991px) {
    .quantity-cart-wrapper {
        background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(240, 246, 247, .62));
        border: 1px solid var(--glass-border);
        box-shadow:
            0 12px 30px rgba(20, 50, 55, .2),
            inset 0 1px 0 var(--glass-rim-top),
            inset 0 0 0 1px var(--glass-rim-hairline);
        -webkit-backdrop-filter: blur(14px) saturate(150%);
        backdrop-filter: blur(14px) saturate(150%);
    }
}