/* =========================================================
   CANARYMX · HEADER
   Header fijo, estado compacto, submenú y carrito del header.
   ========================================================= */

/* =========================================================
   4. HEADER GLOBAL CANARYMX
   Header fijo, transparente arriba y compacto al hacer scroll.

   Requiere que el snippet JS añada:
   .canarymx-header-scrolled
   ========================================================= */
   
/* TEST-CANARYMX-HEADER-20260927 */

.site-header {
    position: fixed !important;
    top: 0;
    left: 0;

    width: 100%;
    min-height: var(--canarymx-header-height) !important;
    z-index: 9999;

    background: transparent !important;

    transition:
        min-height 0.25s ease,
        background-color 0.25s ease,
        backdrop-filter 0.25s ease,
        box-shadow 0.25s ease;
}

/* Astra: capas internas transparentes. */
.ast-primary-header-bar,
#ast-desktop-header,
#ast-desktop-header .ast-primary-header-bar,
.site-header .ast-builder-grid-row-container,
.site-header .ast-builder-grid-row,
.site-header .site-header-primary-section-left,
.site-header .site-header-primary-section-center,
.site-header .site-header-primary-section-right,
.ast-mobile-header-wrap,
.ast-mobile-header-wrap .ast-primary-header-bar,
#ast-mobile-header {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Altura real del grid del header. */
.site-header .ast-primary-header-bar,
.site-header .ast-builder-grid-row {
    min-height: var(--canarymx-header-height) !important;

    transition:
        min-height 0.25s ease,
        padding 0.25s ease;
}

/* Logo. */
.site-header .site-logo-img img,
.site-header .custom-logo-link img,
.site-header .custom-logo {
    width: var(--canarymx-header-logo-width) !important;
    max-height: 58px !important;

    object-fit: contain;

    transition:
        width 0.25s ease,
        max-height 0.25s ease;
}

/* Menú principal. */
.site-header .main-header-menu > .menu-item > .menu-link {
    min-height: var(--canarymx-header-height) !important;

    padding-left: 16px !important;
    padding-right: 16px !important;

    font-size: 14px !important;
    line-height: 1 !important;

    transition:
        min-height 0.25s ease,
        padding 0.25s ease,
        font-size 0.25s ease;
}

/* Carrito del header. */
.site-header .ast-site-header-cart,
.site-header .ast-site-header-cart .ast-woo-header-cart-info-wrap {
    transition:
        transform 0.25s ease,
        font-size 0.25s ease;
}

/* Estado compacto al desplazarse. */
.site-header.canarymx-header-scrolled {
    min-height: var(--canarymx-header-height-scrolled) !important;

    background: rgba(8, 8, 8, 0.94) !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
}

.site-header.canarymx-header-scrolled .ast-primary-header-bar,
.site-header.canarymx-header-scrolled .ast-builder-grid-row {
    min-height: var(--canarymx-header-height-scrolled) !important;
}

.site-header.canarymx-header-scrolled .ast-builder-grid-row-container,
.site-header.canarymx-header-scrolled .ast-builder-grid-row {
    background: transparent !important;
}

.site-header.canarymx-header-scrolled .site-logo-img img,
.site-header.canarymx-header-scrolled .custom-logo-link img,
.site-header.canarymx-header-scrolled .custom-logo {
    width: var(--canarymx-header-logo-width-scrolled) !important;
    max-height: 42px !important;
}

.site-header.canarymx-header-scrolled .main-header-menu > .menu-item > .menu-link {
    min-height: var(--canarymx-header-height-scrolled) !important;

    padding-left: 13px !important;
    padding-right: 13px !important;

    font-size: 12px !important;
}

.site-header.canarymx-header-scrolled .ast-site-header-cart,
.site-header.canarymx-header-scrolled .ast-site-header-cart .ast-woo-header-cart-info-wrap {
    font-size: 12px !important;
    transform: scale(0.94);
    transform-origin: right center;
}

/* Ajuste cuando la barra de administración está visible. */
body.admin-bar .site-header {
    top: 32px;
}

/* =========================================================
   CANARYMX - SUBMENÚ DEL HEADER
   Dropdown oscuro y coherente con el estilo global
   ========================================================= */

/* Contenedor del submenu */
.main-header-menu .sub-menu {
    min-width: 210px;

    background: rgba(10, 10, 10, 0.94) !important;

    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: 2px solid #e6433a !important;

    border-radius: 0 0 8px 8px;

    padding: 8px 0 !important;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* =========================================================
   ITEMS DEL SUBMENÚ
   ========================================================= */

.main-header-menu .sub-menu .menu-item {
    background: transparent !important;
}


/* Links */
.main-header-menu .sub-menu .menu-link {
    display: block;

    padding: 11px 16px !important;

    color: rgba(255, 255, 255, 0.82) !important;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;

    text-transform: uppercase;

    background: transparent !important;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        padding-left 0.2s ease;
}


/* Hover */
.main-header-menu .sub-menu .menu-link:hover {
    color: #fff !important;

    background: rgba(230, 67, 58, 0.12) !important;

    padding-left: 20px !important;
}


/* =========================================================
   ITEM ACTIVO
   ========================================================= */

.main-header-menu .sub-menu .current-menu-item > .menu-link,
.main-header-menu .sub-menu .current-product_cat-ancestor > .menu-link {
    color: #e6433a !important;
}


/* =========================================================
   EVITA FONDOS BLANCOS DE ASTRA
   ========================================================= */

.ast-desktop .main-header-menu .sub-menu,
.ast-desktop .main-header-menu .sub-menu .menu-item,
.ast-desktop .main-header-menu .sub-menu .menu-link {
    background-color: transparent;
}

/* =========================================================
   HEADER · CARRITO SIN BLOQUE NEGRO
   ========================================================= */

.site-header .ast-site-header-cart,
.site-header .ast-site-header-cart .ast-woo-header-cart-info-wrap,
.site-header .ast-cart-menu-wrap,
.site-header .ast-cart-menu-wrap .count,
.site-header .ast-cart-menu-wrap .amount {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    
/* =========================================================
   CANARYMX · HEADER / NAV
   Lenguaje visual unificado desktop + mobile.
   ========================================================= */

:root {
    --canarymx-header-bg: rgba(10, 10, 10, 0.92);
    --canarymx-header-bg-soft: rgba(20, 20, 20, 0.96);
    --canarymx-header-border: rgba(255, 255, 255, 0.08);
    --canarymx-header-text: rgba(255, 255, 255, 0.92);
    --canarymx-header-text-muted: rgba(255, 255, 255, 0.68);
}

/* ---------------------------------------------------------
   Header principal
   --------------------------------------------------------- */

.site-header {
    background: rgba(8, 8, 8, 0.30) !important;

    border-bottom: 1px solid transparent;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        backdrop-filter 0.25s ease;
}

.site-header.canarymx-header-scrolled {
    background: var(--canarymx-header-bg) !important;

    border-bottom-color: var(--canarymx-header-border);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* ---------------------------------------------------------
   Navegación desktop
   --------------------------------------------------------- */

.main-header-menu,
.ast-desktop .main-header-menu {
    display: flex;
    align-items: center;
}

.main-header-menu > .menu-item > .menu-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center;

    min-height: 58px;

    padding: 0 18px !important;

    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;

    color: var(--canarymx-header-text) !important;

    text-transform: uppercase;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .current-menu-item > .menu-link,
.main-header-menu > .current-menu-parent > .menu-link {
    color: var(--canarymx-red) !important;
}


/* ---------------------------------------------------------
   Submenu desktop
   --------------------------------------------------------- */

.main-header-menu .sub-menu {
    min-width: 220px;

    padding: 8px 0;

    background: var(--canarymx-header-bg-soft) !important;

    border-top: 2px solid var(--canarymx-red) !important;
    border-radius: 0 0 8px 8px;

    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.30);

    overflow: hidden;
}

.main-header-menu .sub-menu .menu-link {
    display: flex !important;
    align-items: center !important;

    min-height: 44px;

    padding: 0 18px !important;

    color: var(--canarymx-header-text-muted) !important;

    font-size: 13px;
    font-weight: 600;

    background: transparent !important;
}

.main-header-menu .sub-menu .menu-link:hover {
    color: #fff !important;

    background: rgba(230, 67, 58, 0.12) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 921px) {

    /* Header */
    .site-header {
        background: var(--canarymx-header-bg) !important;

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    /* Panel desplegable */
    .ast-mobile-header-content,
    .ast-mobile-popup-content,
    .ast-builder-menu-mobile {
        background: var(--canarymx-header-bg-soft) !important;
    }

    /* Lista principal */
    .ast-builder-menu-mobile .main-navigation,
    .ast-builder-menu-mobile .main-header-menu {
        background: transparent !important;
    }

    /* Cada fila */
    .ast-builder-menu-mobile .main-header-menu > .menu-item {
        border-bottom: 1px solid var(--canarymx-header-border);
    }

    .ast-builder-menu-mobile .main-header-menu > .menu-item > .menu-link {
        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        min-height: 52px;

        padding: 0 20px !important;

        color: var(--canarymx-header-text) !important;

        background: transparent !important;

        font-size: 14px;
        font-weight: 700;

        text-transform: uppercase;
    }

    .ast-builder-menu-mobile .main-header-menu > .menu-item > .menu-link:hover,
    .ast-builder-menu-mobile .current-menu-item > .menu-link,
    .ast-builder-menu-mobile .current-menu-parent > .menu-link {
        color: var(--canarymx-red) !important;

        background: rgba(230, 67, 58, 0.08) !important;
    }


    /* -----------------------------------------------------
       Submenu mobile
       ----------------------------------------------------- */

    .ast-builder-menu-mobile .sub-menu {
        padding: 0 !important;

        background: rgba(0, 0, 0, 0.28) !important;

        border-top: 1px solid rgba(230, 67, 58, 0.30);
    }

    .ast-builder-menu-mobile .sub-menu .menu-link {
        min-height: 44px;

        padding: 0 20px 0 34px !important;

        color: var(--canarymx-header-text-muted) !important;

        background: transparent !important;

        font-size: 13px;
    }

    .ast-builder-menu-mobile .sub-menu .menu-link:hover {
        color: #fff !important;

        background: rgba(230, 67, 58, 0.10) !important;
    }


    /* -----------------------------------------------------
       Botón hamburguesa
       ----------------------------------------------------- */

    .menu-toggle,
    .ast-mobile-menu-trigger-minimal {
        color: var(--canarymx-red) !important;

        background: rgba(255, 255, 255, 0.94) !important;

        border-radius: 4px;
    }
}

/* =========================================================
   CANARYMX · MOBILE MENU
   Override específico para Astra.
   ========================================================= */

@media (max-width: 921px) {

    /* Panel completo desplegable */
    .ast-mobile-header-wrap .ast-mobile-header-content,
    .ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
        background: rgba(16, 16, 16, 0.98) !important;

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    /* Navegación */
    .ast-mobile-header-wrap .main-header-bar-navigation,
    .ast-mobile-header-wrap .main-navigation,
    .ast-mobile-header-wrap .main-header-menu {
        background: transparent !important;
    }

    /* Cada item principal */
    .ast-mobile-header-wrap .main-header-menu > .menu-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .ast-mobile-header-wrap .main-header-menu > .menu-item > .menu-link {
        display: flex !important;
        align-items: center !important;

        min-height: 52px !important;

        padding: 0 18px !important;

        color: rgba(255, 255, 255, 0.90) !important;
        background: transparent !important;

        font-size: 13px !important;
        font-weight: 700 !important;

        text-transform: uppercase;
    }

    /* Hover / página activa */
    .ast-mobile-header-wrap .main-header-menu > .menu-item > .menu-link:hover,
    .ast-mobile-header-wrap .main-header-menu > .current-menu-item > .menu-link,
    .ast-mobile-header-wrap .main-header-menu > .current-menu-parent > .menu-link {
        color: var(--canarymx-red) !important;
        background: rgba(230, 67, 58, 0.08) !important;
    }

    /* Submenu */
    .ast-mobile-header-wrap .main-header-menu .sub-menu {
        background: rgba(0, 0, 0, 0.35) !important;

        border-top: 1px solid rgba(230, 67, 58, 0.35) !important;

        padding: 0 !important;
    }

    .ast-mobile-header-wrap .main-header-menu .sub-menu .menu-link {
        display: flex !important;
        align-items: center !important;

        min-height: 44px !important;

        padding: 0 18px 0 32px !important;

        color: rgba(255, 255, 255, 0.70) !important;
        background: transparent !important;

        font-size: 12px !important;
    }

    .ast-mobile-header-wrap .main-header-menu .sub-menu .menu-link:hover {
        color: #ffffff !important;
        background: rgba(230, 67, 58, 0.10) !important;
    }

    /* Flecha del submenu */
    .ast-mobile-header-wrap .ast-menu-toggle {
        color: rgba(255, 255, 255, 0.75) !important;
        background: transparent !important;

        border: none !important;
    }

    /* Botón hamburguesa / cerrar */
    [data-section="section-header-mobile-trigger"]
    .ast-button-wrap
    .ast-mobile-menu-trigger-minimal,

    [data-section="section-header-mobile-trigger"]
    .ast-button-wrap
    .ast-mobile-menu-trigger-fill,

    .ast-mobile-popup-drawer.active .menu-toggle-close {
        color: var(--canarymx-red) !important;

        background: rgba(255, 255, 255, 0.95) !important;

        border-radius: 4px !important;
    }
}