/*
GUÍA DE LECTURA DEL CÓDIGO | styles/storefront-header-transparency.css
Responsabilidad: Estilos de transparencias del encabezado público.

Recorrido sugerido: estilos base; componentes; estados; variantes responsivas.
ATENCIÓN: el orden de las reglas forma parte de la cascada CSS y se mantuvo intacto.
Condiciones responsivas detectadas: max-width: 900px; prefers-reduced-motion: reduce

Seguridad: no se movió, eliminó ni reescribió ningún bloque ejecutable.
Este mapa orienta la lectura; el archivo mantiene su orden de ejecución original.
*/
/* Apariencia > Header: superficie realmente transparente, sin glassmorphism.
   La superposición se mantiene en el flujo sticky; no usa position:fixed ni
   separadores, así la navegación conserva su altura y no salta al desplazarse. */
html[data-header-transparency-enabled="true"] .storefront-header-sticky {
    margin-bottom: calc(0px - var(--header-transparent-overlap, 0px));
}

/* La franja de promociones no debe quedar superpuesta sobre la cabecera
   invisible. Se oculta mientras el modo está habilitado sobre una imagen,
   incluso después del punto de cambio, para no introducir saltos al hacer scroll.
   El banner fotográfico principal permanece visible. */
html[data-header-transparency-enabled="true"] .top-red-bar[data-appearance-region="promo"] {
    display: none !important;
}

@media (max-width: 900px) {
    html[data-header-transparency-enabled="true"] body::before {
        display: none !important;
    }
}

html[data-header-transparency-enabled="true"] .storefront-header-sticky,
html[data-header-transparency-enabled="true"] .storefront-header-sticky .header-main,
html[data-header-transparency-enabled="true"] .storefront-header-sticky .storefront-nav {
    transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}

html[data-header-transparency-state="overlay"] .storefront-header-sticky,
html[data-header-transparency-state="overlay"] .storefront-header-sticky header.header-main,
html[data-header-transparency-state="overlay"] .storefront-header-sticky .main-nav.storefront-nav {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Los iconos y sus etiquetas pasan a blanco sobre la foto.
   El logo conserva su color original, tanto si es una imagen como texto. */
html[data-header-transparency-enabled="true"][data-header-transparency-state="overlay"] .storefront-header-sticky header.header-main .header-action,
html[data-header-transparency-enabled="true"][data-header-transparency-state="overlay"] .storefront-header-sticky header.header-main .header-action svg {
    color: #ffffff !important;
}

/* Contorno oscuro compacto + sombra suave: mantiene visibles los trazos finos
   incluso sobre zonas blancas o muy iluminadas de la imagen. */
html[data-header-transparency-state="overlay"]:not([data-header-icon-shadow="off"]) .storefront-header-sticky header.header-main .header-action svg {
    filter: drop-shadow(0 0 1.25px rgba(0, 0, 0, .98))
            drop-shadow(0 1px 3px rgba(0, 0, 0, .85));
}

html[data-header-transparency-state="overlay"]:not([data-header-icon-shadow="off"]) .storefront-header-sticky header.header-main .header-action-label {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 5px rgba(0, 0, 0, .65);
}

@media (prefers-reduced-motion: reduce) {
    html[data-header-transparency-enabled="true"] .storefront-header-sticky,
    html[data-header-transparency-enabled="true"] .storefront-header-sticky .header-main,
    html[data-header-transparency-enabled="true"] .storefront-header-sticky .storefront-nav {
        transition: none;
    }
}