/* ============================================================================
 * liquidglass.css — Liquid Glass para shomex.com.mx (integracion + acabado)
 * ---------------------------------------------------------------------------
 * Port del tema liquid glass de chismy.com (themes/sunshine-liquidglass):
 *   glassliquid-integration.css  -> superficies (secciones 1-7)
 *   sunshine-liquidglass.css     -> acabado de componentes (secciones 8-15)
 * Adaptado a la maqueta de shomex (Header 0 / Home 0 / AIZ Core).
 *
 * Arquitectura (igual que en chismy, dos capas):
 *  1. CSS puro (este archivo + liquid-glass-effects.css): vidrio en tarjetas,
 *     carruseles, botones, paneles, modales, inputs y barras. Cero JS.
 *  2. Motor de refraccion SVG (liquid-glass.js + liquid-glass-init.js) solo
 *     en superficies fijas curadas (.header0-float-bar, Flash Sale, cat grid,
 *     barra inferior). Al montarse anade .lg-host, que apaga el fondo/blur
 *     CSS de ese elemento (seccion 13) para que la refraccion se vea.
 *
 * El header0 (naranja de marca, texto blanco) NO lleva motor: su cristal es
 * CSS con tinte naranja fuerte para no perder el contraste del texto.
 * El footer NO se toca: puede ser negro (footer1 pinta secciones #000).
 *
 * TODO va prefijado con body.liquidglass-on y, donde hace falta, con
 * !important: los estilos inline del tema (Blade <style> en header0/home0)
 * y .bg-white de Bootstrap 4 son !important o van despues en el cascade.
 * ========================================================================== */

:root {
    --lg-accent: #EE4D2D;          /* naranja Shomex (tinte acento) */
    --lg-blur-mult: 1;          /* intensidad de blur global (slider admin) */
    --lg-radius-card: 20px;
    --lg-radius-field: 12px;

    /* --- Glow de legibilidad (text-glow estilo Aero / 7.css) ----------------
       Receta identica a chismy (sunshine-liquidglass.css:30-38): 8 capas de
       text-shadow apiladas. Una sola capa no alcanza contraste sobre un
       wallpaper saturado; 8 si, y a diferencia del frost NO deforman glifos
       (el aura envuelve al glifo en vez de esmerilar detras de el).
       Regla de uso:
         --lg-glow-white (aura BLANCA) -> texto OSCURO sobre vidrio/fondo claro
         --lg-glow-dark  (aura NEGRA)  -> texto CLARO sobre panel/fondo oscuro */
    --lg-glow-white:
        0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff,
        0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
    /* Aura negra al 50% de la opacidad original (0.85 -> 0.425): el usuario
       pidió reducirla a la mitad; se conservan las 8 capas y el radio 10px. */
    --lg-glow-dark:
        0 0 10px rgba(0, 0, 0, 0.425), 0 0 10px rgba(0, 0, 0, 0.425),
        0 0 10px rgba(0, 0, 0, 0.425), 0 0 10px rgba(0, 0, 0, 0.425),
        0 0 10px rgba(0, 0, 0, 0.425), 0 0 10px rgba(0, 0, 0, 0.425),
        0 0 10px rgba(0, 0, 0, 0.425), 0 0 10px rgba(0, 0, 0, 0.425);
}

/* Wallpaper en video (mp4/webm): capa fija atras de todo, igual que el
   body::before de imagen pero como <video> con loop infinito. No va gated
   por body.liquidglass-on: el fondo de pagina es un setting independiente
   del tema de vidrio. */
.site-bg-video {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
}

/* --- 1. Fondo aurora (sutil) + wrapper translucido ---------------------------
   El aurora vive en body::after fijo a pantalla (misma receta que chismy):
   los blur de las superficies necesitan gradiente sobre el que doblar la luz.
   Los colores son los de marca (naranja) en vez de los pastel de chismy.
   El wrapper principal pasa de #fff solido a velo 0.86 para que el aurora se
   transparente un 14% por debajo de todo. */
body.liquidglass-on::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1200px 700px at 12% -8%, rgba(45, 110, 240, 0.35), transparent 60%),
        radial-gradient(900px 620px at 92% 4%, rgba(90, 160, 255, 0.32), transparent 62%),
        radial-gradient(1000px 800px at 78% 96%, rgba(45, 70, 200, 0.28), transparent 64%),
        radial-gradient(700px 500px at 40% 50%, rgba(238, 77, 45, 0.08), transparent 55%);
}

body.liquidglass-on .aiz-main-wrapper {
    background-color: rgba(255, 255, 255, 0.55) !important;
}

/* La seccion "Products grid" del home se pinto blanca para el look Temu; bajo
   vidrio vuelve al velo del wrapper para que las tarjetas tengan que que
   difuminar. */
body.liquidglass-on [data-studio-block="products_grid"] {
    background: transparent !important;
}

/* --- 2. Header 0: cristal naranja de marca (solo CSS, sin motor) ------------
   El Blade del header pinta background con middle_header_bg_color (#EE4D2D).
   Aqui se vuelve translucido + blur: el contenido que pasa por debajo (si el
   header es sticky) se difumina, pero el tinte 0.82 conserva el texto blanco
   legible. Highlight interior 45 grados (inset 0 1px 0) = borde superior
   brillante del vidrio. */
body.liquidglass-on header.header0-desktop {
    background: rgba(238, 77, 45, 0.55) !important;
    -webkit-backdrop-filter: blur(calc(16px * var(--lg-blur-mult, 1))) saturate(1.6);
    backdrop-filter: blur(calc(16px * var(--lg-blur-mult, 1))) saturate(1.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
        0 8px 32px 0 rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Buscador del header: pastilla blanca del Blade -> pastilla de vidrio. */
body.liquidglass-on .header0-desktop .search-input-box input {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: blur(calc(12px * var(--lg-blur-mult, 1))) saturate(1.5);
    backdrop-filter: blur(calc(12px * var(--lg-blur-mult, 1))) saturate(1.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* --- 3. Header movil + barra flotante -------------------------------------- */
body.liquidglass-on .header0-mobile {
    background: rgba(255, 255, 255, 0.6) !important;
    -webkit-backdrop-filter: blur(calc(14px * var(--lg-blur-mult, 1))) saturate(1.6);
    backdrop-filter: blur(calc(14px * var(--lg-blur-mult, 1))) saturate(1.6);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Estado base de la barra flotante (fallback cuando el motor no monta:
   Firefox sin SVG, reduce-transparency, etc.). Con .lg-host montado, la
   seccion 13 la deja transparente y el vidrio lo pinta el motor. */
body.liquidglass-on .header0-float-bar {
    background: rgba(255, 255, 255, 0.45) !important;
    -webkit-backdrop-filter: blur(calc(14px * var(--lg-blur-mult, 1))) saturate(1.6);
    backdrop-filter: blur(calc(14px * var(--lg-blur-mult, 1))) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        0 8px 28px -8px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* --- 4. Paneles flotantes del header (busqueda, megamenu, locale, etc.) ----
   Opacidad subida de 0.45 a 0.72: con el slider de blur en 0 (o bajo) el
   panel queda casi transparente y el texto oscuro ilegible sobre el
   wallpaper. Un velo mas denso garantiza legibilidad aunque el blur sea 0. */
body.liquidglass-on .typed-search-box,
body.liquidglass-on .header0-locale-panel,
body.liquidglass-on .h0-imgsearch-panel,
body.liquidglass-on .aiz-user-top-menu,
body.liquidglass-on .header0-allcat-panel .aiz-category-menu,
body.liquidglass-on .header0-allcat-panel .sub-cat-menu,
body.liquidglass-on .dropdown-menu {
    background: rgba(255, 255, 255, 0.72) !important;
    -webkit-backdrop-filter: blur(calc(20px * var(--lg-blur-mult, 1))) saturate(1.7);
    backdrop-filter: blur(calc(20px * var(--lg-blur-mult, 1))) saturate(1.7);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--lg-radius-card);
    box-shadow:
        0 16px 44px -12px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Legibilidad del texto dentro de los paneles flotantes: glow blanco en
   texto oscuro (regla general del tema). Funciona aunque el blur del panel
   sea 0 (slider en cero), porque el aura separa el glifo del fondo. */
body.liquidglass-on .header0-allcat-panel .aiz-category-menu,
body.liquidglass-on .header0-allcat-panel .sub-cat-menu,
body.liquidglass-on .dropdown-menu,
body.liquidglass-on .typed-search-box,
body.liquidglass-on .header0-locale-panel,
body.liquidglass-on .h0-imgsearch-panel,
body.liquidglass-on .aiz-user-top-menu {
    text-shadow: var(--lg-glow-white);
}

/* Los subtitulos de seccion del flyout (PC, Laptops, Componentes...) ya son
   oscuros; les va bien el mismo aura. Los enlaces tambien. */
body.liquidglass-on .header0-allcat-panel .sub-cat-menu a,
body.liquidglass-on .header0-allcat-panel .sub-cat-menu .h4,
body.liquidglass-on .header0-allcat-panel .sub-cat-menu h4,
body.liquidglass-on .header0-allcat-panel .aiz-category-menu .cat-name,
body.liquidglass-on .header0-allcat-panel .aiz-category-menu a {
    text-shadow: var(--lg-glow-white);
}

/* Keywords del header (texto blanco sobre naranja): aura negra. */
body.liquidglass-on .header0-keyword {
    text-shadow: var(--lg-glow-dark);
}

/* --- 5. Tarjetas de producto y superficies del home ------------------------
   Fondo base mas ligero que el token original (0.70 -> 0.55): la referencia
   vive del blur + el highlight; el fondo solo es respaldo para cuando el
   motor no esta montado. Las tarjetas NO llevan motor (Slick las clona en
   los carruseles y los clones se romperian), aqui va la capa CSS. */
body.liquidglass-on .aiz-card-box:not(.lg-host),
body.liquidglass-on .flash-product-card:not(.lg-host),
body.liquidglass-on .card.shadow-sm:not(.lg-host),
body.liquidglass-on .product-card-wrap:not(.lg-host),
body.liquidglass-on .home-voucher__item:not(.lg-host) {
    background: rgba(255, 255, 255, 0.22) !important;
    -webkit-backdrop-filter: blur(calc(var(--lg-pblur, 14px) * var(--lg-blur-mult, 1))) saturate(1.6);
    backdrop-filter: blur(calc(var(--lg-pblur, 14px) * var(--lg-blur-mult, 1))) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--lg-radius-card);
    box-shadow:
        0 10px 28px -10px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Secciones contenedoras del home (estado base). El wrapper .home-cat-grid
   SI lleva blur propio (look V2 de vidrio total: el usuario prefiere las
   cards de categoria con fondo CSS definido antes que el motor de
   refraccion sobre tiles pequenos, donde la lente no se veia bien). */
body.liquidglass-on .flash-deal-products-wrap:not(.lg-host),
body.liquidglass-on .home-cat-grid:not(.lg-host),
body.liquidglass-on .home-square-banner-section:not(.lg-host) {
    background: rgba(255, 255, 255, 0.18) !important;
    -webkit-backdrop-filter: blur(calc(var(--lg-pblur, 14px) * var(--lg-blur-mult, 1))) saturate(1.6);
    backdrop-filter: blur(calc(var(--lg-pblur, 14px) * var(--lg-blur-mult, 1))) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--lg-radius-card);
    box-shadow:
        0 10px 28px -10px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* --- 6. Flechas de carrusel (Slick / Owl) ---------------------------------- */
body.liquidglass-on .aiz-carousel button.slick-prev,
body.liquidglass-on .aiz-carousel button.slick-next,
body.liquidglass-on .owl-nav button.owl-prev,
body.liquidglass-on .owl-nav button.owl-next {
    background: rgba(255, 255, 255, 0.4) !important;
    -webkit-backdrop-filter: blur(calc(12px * var(--lg-blur-mult, 1))) saturate(1.5);
    backdrop-filter: blur(calc(12px * var(--lg-blur-mult, 1))) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow:
        0 6px 18px -6px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* --- 7. Barra inferior de navegacion (fixed) -------------------------------
   Solo visible en movil (<992px): en escritorio shomex-custom.css la oculta.
   El fondo/bluro lo pinta aqui con body.liquidglass-on; sin tema, el fondo
   solido lo pinta shomex-custom.css. El highlight interior se suaviza para
   que no se lea como "linea blanca dura" sino como filete de vidrio. */
/* Barra inferior movil (solo <992px; escritorio la oculta shomex-custom). */
body.liquidglass-on .aiz-mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.88) !important;
    -webkit-backdrop-filter: blur(calc(14px * var(--lg-blur-mult, 1))) saturate(1.6);
    backdrop-filter: blur(calc(14px * var(--lg-blur-mult, 1))) saturate(1.6);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 -6px 24px -6px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

body.liquidglass-on .aiz-mobile-bottom-nav a {
    background: transparent !important;
}

/* --- 8. Botones -------------------------------------------------------------
   Los solidos de marca (.btn-primary/.btn-success/...) conservan su color —
   es el "tinte acento" — y solo ganan el acabado de capsula (highlight
   interior + sombra suave). Los neutros pasan a vidrio. */
body.liquidglass-on .btn-primary,
body.liquidglass-on .btn-success,
body.liquidglass-on .btn-warning,
body.liquidglass-on .btn-danger,
body.liquidglass-on .btn-info {
    box-shadow:
        0 6px 18px -6px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -6px 12px rgba(0, 0, 0, 0.10);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

body.liquidglass-on .btn-primary:hover,
body.liquidglass-on .btn-success:hover,
body.liquidglass-on .btn-warning:hover,
body.liquidglass-on .btn-danger:hover,
body.liquidglass-on .btn-info:hover {
    transform: translateY(-1px);
    box-shadow:
        0 10px 24px -8px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -6px 12px rgba(0, 0, 0, 0.12);
}

body.liquidglass-on .btn-light,
body.liquidglass-on .btn-secondary,
body.liquidglass-on .btn-white,
body.liquidglass-on .btn-outline-secondary,
body.liquidglass-on .shomex-vermas {
    background: rgba(255, 255, 255, 0.4) !important;
    -webkit-backdrop-filter: blur(calc(12px * var(--lg-blur-mult, 1))) saturate(1.5);
    backdrop-filter: blur(calc(12px * var(--lg-blur-mult, 1))) saturate(1.5);
    border-color: rgba(255, 255, 255, 0.45) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    color: #222;
}

/* Carrito Temu de la card: circulo blanco -> circulo de vidrio. */
body.liquidglass-on .temu-cart-btn {
    background: rgba(255, 255, 255, 0.45) !important;
    -webkit-backdrop-filter: blur(calc(10px * var(--lg-blur-mult, 1))) saturate(1.5);
    backdrop-filter: blur(calc(10px * var(--lg-blur-mult, 1))) saturate(1.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* --- 9. Campos de texto ------------------------------------------------------ */
body.liquidglass-on .form-control {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--lg-radius-field);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

body.liquidglass-on .form-control:focus {
    background: rgba(255, 255, 255, 0.55);
    border-color: var(--lg-accent);
    box-shadow:
        0 0 0 3px rgba(238, 77, 45, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* --- 10. Modales -------------------------------------------------------------- */
body.liquidglass-on .modal-content {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(calc(26px * var(--lg-blur-mult, 1))) saturate(1.7);
    backdrop-filter: blur(calc(26px * var(--lg-blur-mult, 1))) saturate(1.7);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--lg-radius-card);
    box-shadow: 0 24px 70px -24px rgba(0, 0, 0, 0.45);
}

/* --- 11. Tabs / pills de secciones ------------------------------------------- */
body.liquidglass-on .nav-tabs {
    border-bottom: 1px solid var(--lg-glass-border, rgba(0, 0, 0, 0.05));
}

body.liquidglass-on .nav-tabs > li.active > a,
body.liquidglass-on .nav-tabs > li.active > a:hover,
body.liquidglass-on .nav-tabs > li.active > a:focus {
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(calc(10px * var(--lg-blur-mult, 1))) saturate(1.4);
    backdrop-filter: blur(calc(10px * var(--lg-blur-mult, 1))) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    box-shadow:
        0 4px 14px -6px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* --- 12. Legibilidad sobre vidrio (text-glow) -------------------------------
   Regla general del tema: texto CLARO/blanco -> aura NEGRA;
   texto OSCURO/negro -> aura BLANCA. Receta de 8 capas (ver :root).

   Header naranja: el texto es blanco sobre cristal en movimiento, asi que
   lleva aura NEGRA. La version anterior tenia 1 sola capa de 0.25 de
   opacidad, insuficiente sobre el wallpaper. */
body.liquidglass-on header.header0-desktop .h0-link,
body.liquidglass-on header.header0-desktop .h0-icon-label {
    text-shadow: var(--lg-glow-dark);
}

/* --- 13. Con el motor de refraccion montado -----------------------------------
   El anfitrion queda transparente: el vidrio (refract + chrome) lo dibuja
   liquid-glass.js por debajo del contenido.

   CRITICO: el motor solo anade la clase .lg-host (NO .liquid-glass; eso lo
   dice el init, liquid-glass-init.js:1023, y aqui quedo escrito por error).
   Aun asi, 14b pinta fondo+blur con !important a .liquid-glass:not(.lg-host),
   y las superficies que YA traian .liquid-glass en el blade (wrapper del
   main, secciones del home) pueden heredar backdrop-filter. Ese backdrop
   filter crea una backdrop root que mata la refraccion (el host se ve
   "transparencia basica"): por eso 14b los excluye con :not() y 14j limpia
   los wrappers. Tampoco se fuerza border-radius ni box-shadow !important
   aqui (el motor hereda el radio del CSS y pinta la sombra via
   opts.outerShadow). El "ambient rim" (outline) lo define 14h, al final del
   cascade, para que no compita este bloque. */
body.liquidglass-on .lg-host {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* --- 14. Moviles pequenos ------------------------------------------------------ */
@media (max-width: 575.98px) {
    body.liquidglass-on .header0-float-bar {
        box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.75);
    }
}

/* --- 14b. VIDRIO UNIVERSAL — override global de .bg-white y bordes --------
   Bootstrap .bg-white (vendors.css:15) tiene !important y pinta de blanco
   solido CUALQUIER seccion del home que use la clase (Productos, Marcas,
   Destacados, Shop, Blog, etc.). Bajo liquidglass-on TODA superficie .bg-white
   se vuelve cristal: fondo translucido + blur + rim blanco + radius. Esto
   garantiza que NINGUNA seccion se quede blanca opaca.

   La clase .liquid-glass es el renombre usado en los blades (bg-white ->
   liquid-glass). Su regla BASE (sin body.liquidglass-on) la mantiene blanca
   solida cuando el tema esta OFF. SIN !important a proposito: asi los estilos
   inline del blade (ej: fondo #3d4666 del todays_deal) siguen mandando en
   modo OFF, y con ON el override !important de abajo los pisa. */
.liquid-glass {
    background-color: #fff;
}
/* :not(.lg-host) — el motor anade .liquid-glass al host al montarse; sin el
   :not, esta regla (misma especificidad que .lg-host, pero DESPUES en el
   cascade) le ganaria el fondo/blur y romperia la refraccion. */
body.liquidglass-on .bg-white:not(.lg-host),
body.liquidglass-on .liquid-glass:not(.lg-host) {
    background: rgba(255, 255, 255, 0.22) !important;
    -webkit-backdrop-filter: blur(calc(var(--lg-pblur, 14px) * var(--lg-blur-mult, 1))) saturate(1.6);
    backdrop-filter: blur(calc(var(--lg-pblur, 14px) * var(--lg-blur-mult, 1))) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--lg-radius-card);
    box-shadow:
        0 10px 28px -10px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Excepciones: topbar movil y caja de busqueda no llevan radius de tarjeta
   (son barras full-bleed / pastilla ya estilizada aparte). */
body.liquidglass-on .home-mobile-topbar.bg-white,
body.liquidglass-on .home-mobile-topbar.liquid-glass,
body.liquidglass-on .typed-search-box.bg-white,
body.liquidglass-on .typed-search-box.liquid-glass {
    border-radius: 0;
    border: none;
    box-shadow: none;
}

/* Excepcion critica: .aiz-main-wrapper es el wrapper GENERAL de la pagina
   (antes bg-white). No debe llevar radius/borde de tarjeta, y bajo el tema
   queda transparente para dejar ver la aurora del body (mismo criterio que
   la regla site-bg-on del layout). */
body.liquidglass-on .aiz-main-wrapper.bg-white,
body.liquidglass-on .aiz-main-wrapper.liquid-glass {
    background: transparent !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Offcanvas full-bleed (menu lateral, carrito): vidrio si, pero sin
   radius/borde de tarjeta porque ocupa toda la altura de la pantalla. */
body.liquidglass-on .fullscreen.liquid-glass,
body.liquidglass-on .fullscreen.bg-white {
    border: none;
    border-radius: 0;
}

/* Las utilidades border-* de Bootstrap (#dee2e6) generan las "lineas grises"
   entre tiles (Marcas, Categorias, carruseles, blogs...). El usuario pide
   QUITARLAS por completo: transparente mantiene el layout sin pintar filete. */
body.liquidglass-on .border,
body.liquidglass-on .border-top,
body.liquidglass-on .border-right,
body.liquidglass-on .border-bottom,
body.liquidglass-on .border-left {
    border-color: transparent !important;
}

/* --- 14c. Secciones especificas del home -----------------------------------
   Products grid (shomex-products-grid), Marcas, Destacados y tiles de
   Categorias ya estan cubiertos por el override .bg-white + .home-cat-grid.
   Aqui se refuerzan los bordes internos de los tiles. */

/* Grid de categorias: cada celda es una superficie de vidrio propia (look
   V2 que el usuario prefiere: fondo blanco translucido 0.22 + blur 10px +
   borde blanco definido + shadow suave). El blade pinta border-right/bottom
   #f4f4f4 (lineas separadoras) — se reemplazan por bordes de vidrio. */
body.liquidglass-on .grid-cell:not(.lg-host),
body.liquidglass-on .grid-cell {
    background: rgba(255, 255, 255, 0.22) !important;
    -webkit-backdrop-filter: blur(calc(10px * var(--lg-blur-mult, 1))) saturate(1.5);
    backdrop-filter: blur(calc(10px * var(--lg-blur-mult, 1))) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 14px;
    box-shadow:
        0 4px 14px -4px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    margin: 3px;
}
body.liquidglass-on .home-cat-grid .grid-cell__img,
body.liquidglass-on .home-cat-grid .grid-cell__img:not(.lg-host) {
    background: rgba(255, 255, 255, 0.4) !important;
    -webkit-backdrop-filter: blur(calc(8px * var(--lg-blur-mult, 1)));
    backdrop-filter: blur(calc(8px * var(--lg-blur-mult, 1)));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Con el MOTOR montado en el tile (.lg-host), el hijo .grid-cell__img NO
   debe tener su propio backdrop-filter: crearia un backdrop-root anidado y
   la refraccion del host (.lg-refract) dejaria de ver el wallpaper detras,
   mostrandose lechosa. Solo conserva un fondo blanco sutil para la esfera
   de la imagen. */
body.liquidglass-on .lg-host .grid-cell__img,
body.liquidglass-on .lg-host.grid-cell .grid-cell__img {
    background: rgba(255, 255, 255, 0.30) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* QUITE GLOBAL: lineas grisáceas Bootstrap entre tiles; los bordes de
   vidrio de la regla de arriba mandan. */
body.liquidglass-on .grid-list {
    gap: 0 !important;
    border: none !important;
}
body.liquidglass-on .home-cat-grid .grid-cell {
    border-right-color: rgba(255, 255, 255, 0.35) !important;
    border-bottom-color: rgba(255, 255, 255, 0.35) !important;
}

/* Cajas de carrusel: quitar el borde gris de Bootstrap (linea separadora). */
body.liquidglass-on .carousel-box {
    border: none !important;
}

/* --- 14g. Todays Deal + Products Section -----------------------------------
   El partial todays_deal.blade.php pinta background-color #3d4666 inline
   (opaco, estilo Shopee). Con el tema ON se pisa con un vidrio OSCURO
   translucido: conserva la legibilidad del texto blanco (precios, View All)
   y deja ver el fondo aurora por debajo. La clase .liquid-glass del propio
   panel ya aporta blur + rim (regla 14b); aqui se anula el tinte blanco
   por el oscuro. El wrapper de Products Section (.shomex-products-grid)
   usa ahora .liquid-glass -> cubierto por 14b. */
body.liquidglass-on .todays-deal-panel {
    background: rgba(38, 46, 74, 0.55) !important;
    -webkit-backdrop-filter: blur(calc(var(--lg-pblur, 14px) * var(--lg-blur-mult, 1))) saturate(1.6);
    backdrop-filter: blur(calc(var(--lg-pblur, 14px) * var(--lg-blur-mult, 1))) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: var(--lg-radius-card);
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.25);
}
body.liquidglass-on .todays-deal-panel .carousel-box {
    border: none !important;
}

/* Square banner section: el blade pinta background:#fff en <style> inline.
   Misma tecnica que .home-cat-grid: la especificidad body.liquidglass-on gana. */
body.liquidglass-on .home-square-banner-section {
    background: rgba(255, 255, 255, 0.18) !important;
    -webkit-backdrop-filter: blur(calc(var(--lg-pblur, 14px) * var(--lg-blur-mult, 1))) saturate(1.6);
    backdrop-filter: blur(calc(var(--lg-pblur, 14px) * var(--lg-blur-mult, 1))) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--lg-radius-card);
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.15);
}
body.liquidglass-on .home-square-banner-section .hsb-icon {
    background: rgba(255, 255, 255, 0.35) !important;
    -webkit-backdrop-filter: blur(calc(8px * var(--lg-blur-mult, 1)));
    backdrop-filter: blur(calc(8px * var(--lg-blur-mult, 1)));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* --- 14g. Tarjetas Bootstrap (.card) sin shadow-sm ---------------------------
   Bootstrap .card{background-color:#fff} (vendors.css:15) NO tiene !important,
   asi que body.liquidglass-on .card gana por especificidad. Cubre ~40
   superficies: checkout (accordion panels), cart_summary, blog cards,
   panel de usuario entero, logins, delivery_info, shipping_options, etc.
   Las que ya llevan .shadow-sm estan en la seccion 6; aqui va el resto. */
body.liquidglass-on .card {
    background: rgba(255, 255, 255, 0.22) !important;
    -webkit-backdrop-filter: blur(calc(var(--lg-pblur, 14px) * var(--lg-blur-mult, 1))) saturate(1.6);
    backdrop-filter: blur(calc(var(--lg-pblur, 14px) * var(--lg-blur-mult, 1))) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--lg-radius-card);
    box-shadow:
        0 10px 28px -10px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* --- 14h. Filas de list-group (mini-cart, busqueda, variantes) ------------- */
body.liquidglass-on .list-group-item {
    background: rgba(255, 255, 255, 0.15) !important;
    -webkit-backdrop-filter: blur(calc(10px * var(--lg-blur-mult, 1)));
    backdrop-filter: blur(calc(10px * var(--lg-blur-mult, 1)));
    border-color: rgba(255, 255, 255, 0.3);
}

/* --- 14i. Sidebar del panel de usuario ------------------------------------- */
body.liquidglass-on .aiz-user-sidenav-wrap {
    background: rgba(255, 255, 255, 0.2) !important;
    -webkit-backdrop-filter: blur(calc(var(--lg-pblur, 14px) * var(--lg-blur-mult, 1))) saturate(1.6);
    backdrop-filter: blur(calc(var(--lg-pblur, 14px) * var(--lg-blur-mult, 1))) saturate(1.6);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
}

/* --- 14j. Clases custom de secciones (seller shop, flash, feed) ------------ */
body.liquidglass-on .shop-header-card,
body.liquidglass-on .shop-nav-bar,
body.liquidglass-on .flash-product-detail-card,
body.liquidglass-on .feed-post,
body.liquidglass-on .fd-tabs {
    background: rgba(255, 255, 255, 0.2) !important;
    -webkit-backdrop-filter: blur(calc(var(--lg-pblur, 14px) * var(--lg-blur-mult, 1))) saturate(1.6);
    backdrop-filter: blur(calc(var(--lg-pblur, 14px) * var(--lg-blur-mult, 1))) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--lg-radius-card);
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.15);
}

/* Flash: el backdrop blanco tras la imagen crea un rectangulo solido dentro
   de la card de cristal. */
body.liquidglass-on .flash-img-wrap {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* --- 14k. Elementos con style inline blanco --------------------------------
   Las reglas pierden contra style="..." inline, por eso !important. */
body.liquidglass-on #smart-bar {
    background: rgba(255, 255, 255, 0.35) !important;
    -webkit-backdrop-filter: blur(calc(14px * var(--lg-blur-mult, 1))) saturate(1.6) !important;
    backdrop-filter: blur(calc(14px * var(--lg-blur-mult, 1))) saturate(1.6) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.45) !important;
}
body.liquidglass-on .aiz-quick-view .modal-body .img-container,
body.liquidglass-on .quick-view-modal .img-container {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* --- 14l. Panel gris claro (.bg-light) ------------------------------------
   Bootstrap .bg-light (#f8f9fa opaco) en cajas de vendedor/entrega/promo
   de la pagina de producto y variantes. */
body.liquidglass-on .bg-light {
    background: rgba(255, 255, 255, 0.16) !important;
    -webkit-backdrop-filter: blur(calc(10px * var(--lg-blur-mult, 1))) saturate(1.4);
    backdrop-filter: blur(calc(10px * var(--lg-blur-mult, 1))) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--lg-radius-card);
}

/* --- 14d. Footer ---------------------------------------------------------- */
body.liquidglass-on footer,
body.liquidglass-on .footer,
body.liquidglass-on .aiz-main-footer {
    background: rgba(255, 255, 255, 0.18) !important;
    -webkit-backdrop-filter: blur(calc(var(--lg-pblur, 14px) * var(--lg-blur-mult, 1))) saturate(1.6);
    backdrop-filter: blur(calc(var(--lg-pblur, 14px) * var(--lg-blur-mult, 1))) saturate(1.6);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
}
body.liquidglass-on footer .bg-white,
body.liquidglass-on .footer .bg-white {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* --- 14e. Paginacion ------------------------------------------------------ */
body.liquidglass-on .pagination .page-link {
    background: rgba(255, 255, 255, 0.3) !important;
    -webkit-backdrop-filter: blur(calc(8px * var(--lg-blur-mult, 1)));
    backdrop-filter: blur(calc(8px * var(--lg-blur-mult, 1)));
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #222;
}
body.liquidglass-on .pagination .page-item.active .page-link {
    background: rgba(238, 77, 45, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* --- 14f. Tablas (carrito, checkout, seller) ------------------------------ */
body.liquidglass-on .table {
    background: rgba(255, 255, 255, 0.12);
}
body.liquidglass-on .table > :not(cg) > * {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
}

/* --- 14h. Override definitivo .lg-host (al final del cascade, antes del
   frost de accesibilidad) ----------------------------------------------
   Red de seguridad: aunque alguna regla anterior de .liquid-glass / .bg-white
   / superficie specifica pinte fondo o backdrop-filter con !important, este
   bloque (misma o mayor especificidad, mas tarde en el cascade) deja al host
   transparente para que la refraccion del motor se vea. El box-shadow y el
   border-radius NO se fuerzan aqui: el motor pinta la sombra via
   opts.outerShadow y hereda el radio del CSS de cada superficie.
   El outline ("ambient rim") va en 0.15, no 0.55: con el motor activo el
   brillo del borde lo aporta el specular del propio motor (opts.specular),
   y un rim de 0.55 se leia como "borde blanco grueso" tipico de vidrio falso. */
body.liquidglass-on .lg-host,
body.liquidglass-on .lg-host.liquid-glass,
body.liquidglass-on .lg-host.bg-white {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    outline: 1px solid rgba(255, 255, 255, 0.15);
    outline-offset: -1px;
}

/* --- 14i. Radio RESTAURADO en superficies con motor montado ----------------
   CAUSA RAIZ de que "no se vea el efecto de Apple": 14b/14c dan
   border-radius SOLO con :not(.lg-host). Al montar el motor, el init anade
   .lg-host y la tarjeta se queda con radius 0px. El motor resuelve el radio
   del CSS (liquid-glass.js: getComputedStyle(el).borderTopLeftRadius) y
   CLAMPA el bezel a min(bezelWidth, radius-1, min(w,h)/2):
       clampedBezel = Math.min(60, radius - 1, min(w,h)/2 - 1)
   Con radius 0 eso da 1px de bezel, y con 1px no hay anillo de lente
   (displacement + specular) -> la card se ve como simple transparencia.
   En chismy la regla NO lleva :not (sunshine-liquidglass.css: .post .panel
   { border-radius: 28px }), por eso ahi el bezel efectivo es 27px y la
   lente se ve. Aqui se restaura el radio SIEMPRE, con o sin motor. */
body.liquidglass-on .aiz-card-box,
body.liquidglass-on .flash-product-card,
body.liquidglass-on .card.shadow-sm,
body.liquidglass-on .product-card-wrap,
body.liquidglass-on .home-voucher__item {
    border-radius: var(--lg-radius-card);
}

/* --- 14j. Backdrop roots: los wrappers NO deben filtrar --------------------
   CAUSA RAIZ 2: un elemento con backdrop-filter es un BACKDROP ROOT. La capa
   .lg-refract de cualquier descendiente con motor solo muestrea el interior
   de ese root (un velo blanco plano ya difuminado), NUNCA el wallpaper del
   body::before. El feDisplacementMap desplaza entonces un campo uniforme =
   nada visible = "simple transparencia".
   En shomex dos wrappers eran backdrop root:
     1) .aiz-main-wrapper.liquid-glass (app.blade.php:357): la excepción 14g
        le limpiaba fondo/borde/sombra pero NO el backdrop-filter que 14b le
        pintaba por ser .liquid-glass:not(.lg-host). Backdrop root GLOBAL.
     2) .home-cat-grid y los <div class="liquid-glass"> de seccion del home
        (home0/index.blade.php:799,810,1028,1109), que CONTIENEN a las
        tarjetas y tiles motorizados.
   En chismy no hay ninguno: .header-container quedo expressamente sin filtro.
   :has() requiere Chromium 105+ / Firefox 121+ / Safari 15.4+, y el motor
   SVG ya es Chromium-only, asi que el caso donde importa lo cubre. */
body.liquidglass-on .aiz-main-wrapper.liquid-glass,
body.liquidglass-on .aiz-main-wrapper.bg-white,
body.liquidglass-on .home-cat-grid,
body.liquidglass-on .flash-deal-products-wrap,
body.liquidglass-on .home-square-banner-section,
body.liquidglass-on .liquid-glass:has(.lg-host),
body.liquidglass-on .bg-white:has(.lg-host) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
/* Los wrappers que contienen hosts ademas no deben pintar velo ni borde de
   tarjeta: el vidrio lo aportan sus hijos con motor. */
body.liquidglass-on .liquid-glass:has(.lg-host),
body.liquidglass-on .bg-white:has(.lg-host) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* --- 15. Glow de legibilidad (text-glow estilo Aero / 7.css) ------------------
   Con el motor de refraccion activo el fondo de cada tarjeta es transparente:
   el texto "flota" sobre el wallpaper del usuario, que es saturado y de
   luminancia variable. El blur solo no alcanza (es bajo el glifo, no lo
   contrasta), asi que se usa la receta de text-glow de chismy
   (sunshine-liquidglass.css:30-38 y sus .lg-glow-*).

   REGLA DE COLOR (la pide el usuario):
     texto CLARO/blanco  -> aura NEGRA  (--lg-glow-dark)
     texto OSCURO/negro  -> aura BLANCA (--lg-glow-white)

   Se aplica por HERENCIA en los contenedadores cuyo texto dominante es
   oscuro (text-shadow es heredable), con excepciones puntuales para los
   badges/overlays que llevan texto blanco. */

/* Utilidades para uso manual (equivalente a .lg-glow-light/.lg-glow-dark de
   chismy; aqui el sufijo indica el COLOR DEL AURA, no del texto). */
body.liquidglass-on .lg-glow-white {
    text-shadow: var(--lg-glow-white);
}
body.liquidglass-on .lg-glow-dark {
    text-shadow: var(--lg-glow-dark);
}

/* Texto OSCURO dominante -> aura BLANCA (heredada por todo el bloque). */
body.liquidglass-on .aiz-card-box,
body.liquidglass-on .flash-product-card,
body.liquidglass-on .grid-cell,
body.liquidglass-on .home-cat-grid,
body.liquidglass-on .home-voucher__item,
body.liquidglass-on .aiz-mobile-bottom-nav,
body.liquidglass-on footer,
body.liquidglass-on .footer,
body.liquidglass-on .aiz-main-footer,
body.liquidglass-on h3.fs-md-20 {
    text-shadow: var(--lg-glow-white);
}

/* Excepcion: texto BLANCO sobre naranja/degradado -> aura NEGRA.
   Sin esto el badge de descuento y el overlay AGOTADO quedarian texto
   blanco con halo blanco, ilegibles. */
body.liquidglass-on .flash-discount-badge,
body.liquidglass-on .flash-discount-badge *,
body.liquidglass-on .flash-sold-out-overlay,
body.liquidglass-on .flash-sold-out-overlay * {
    text-shadow: var(--lg-glow-dark);
}

/* Badge de porcentaje de descuento de product_box_1 (absolute-top-left
   bg-primary, texto blanco): hereda el glow-white de .aiz-card-box y el
   halo blanco ensucia la tipografia sobre el naranja. Se apaga. */
body.liquidglass-on .aiz-card-box .absolute-top-left.bg-primary,
body.liquidglass-on .aiz-card-box .bg-primary.absolute-top-left,
body.liquidglass-on .flash-product-card .absolute-top-left.bg-primary,
body.liquidglass-on .flash-product-card .bg-primary.absolute-top-left {
    text-shadow: none !important;
}

/* Panel de ofertas del dia: fondo oscuro translucido + texto blanco. */
body.liquidglass-on .todays-deal-panel,
body.liquidglass-on .todays-deal-panel * {
    text-shadow: var(--lg-glow-dark);
}

/* Enlaces "Ver Todo" (azul #2979FF, texto medio-oscuro) -> aura blanca. */
body.liquidglass-on .text-blue {
    text-shadow: var(--lg-glow-white);
}

/* --- 16. Frost de accesibilidad ------------------------------------------------
   Equivalente web al "Reducir transparencia" del sistema: si el usuario lo
   pide (o exige mas contraste), el vidrio se vuelve casi opaco y el blur
   cae al minimo. Incluye a .lg-host: con fondo opaco la refraccion del hijo
   queda tapada y solo aporta un leve brillo. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    body.liquidglass-on header.header0-desktop,
    body.liquidglass-on .header0-mobile,
    body.liquidglass-on .header0-float-bar,
    body.liquidglass-on .typed-search-box,
    body.liquidglass-on .header0-locale-panel,
    body.liquidglass-on .h0-imgsearch-panel,
    body.liquidglass-on .aiz-user-top-menu,
    body.liquidglass-on .dropdown-menu,
    body.liquidglass-on .aiz-card-box,
    body.liquidglass-on .flash-product-card,
    body.liquidglass-on .card.shadow-sm,
    body.liquidglass-on .product-card-wrap,
    body.liquidglass-on .home-voucher__item,
    body.liquidglass-on .flash-deal-products-wrap,
    body.liquidglass-on .home-cat-grid,
    body.liquidglass-on .home-square-banner-section,
    body.liquidglass-on .aiz-mobile-bottom-nav,
    body.liquidglass-on .modal-content,
    body.liquidglass-on .form-control,
    body.liquidglass-on .bg-white,
    body.liquidglass-on .liquid-glass,
    body.liquidglass-on .grid-cell,
    body.liquidglass-on .card,
    body.liquidglass-on .list-group-item,
    body.liquidglass-on .aiz-user-sidenav-wrap,
    body.liquidglass-on .shop-header-card,
    body.liquidglass-on .shop-nav-bar,
    body.liquidglass-on .flash-product-detail-card,
    body.liquidglass-on .feed-post,
    body.liquidglass-on .fd-tabs,
    body.liquidglass-on .bg-light,
    body.liquidglass-on .carousel-box,
    body.liquidglass-on .pagination .page-link,
    body.liquidglass-on footer,
    body.liquidglass-on .footer,
    body.liquidglass-on .aiz-main-footer,
    body.liquidglass-on .lg-host {
        background: rgba(255, 255, 255, 0.93) !important;
        -webkit-backdrop-filter: blur(calc(4px * var(--lg-blur-mult, 1))) !important;
        backdrop-filter: blur(calc(4px * var(--lg-blur-mult, 1))) !important;
        color: #16283c;
        /* El fondo casi opaco ya garantiza contraste: el glow (seccion 15)
           solo ensuciaria la tipografia, se apaga. */
        text-shadow: none !important;
    }

    /* El header es naranja de marca: en frost conserva el tinte, solo aplana. */
    body.liquidglass-on header.header0-desktop {
        background: #EE4D2D !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* El panel todays-deal lleva texto blanco (precios/View All): en frost se
       mantiene OSCURO para no dejar texto blanco sobre fondo casi blanco. */
    body.liquidglass-on .todays-deal-panel {
        background: rgba(38, 46, 74, 0.93) !important;
        -webkit-backdrop-filter: blur(calc(4px * var(--lg-blur-mult, 1))) !important;
        backdrop-filter: blur(calc(4px * var(--lg-blur-mult, 1))) !important;
        color: #fff;
    }

    /* Las dos superficies anteriores NO estan en la lista general del frost,
       asi que aqui tambien se les apaga el glow de la seccion 15. */
    body.liquidglass-on header.header0-desktop .h0-link,
    body.liquidglass-on header.header0-desktop .h0-icon-label,
    body.liquidglass-on .todays-deal-panel,
    body.liquidglass-on .todays-deal-panel * {
        text-shadow: none !important;
    }
}