/* ==========================================================
   CASA MIXTECO
   CMX-21C · HEADER MÓVIL · DISEÑO Y MEDIDAS

   CONTROLA:
   - Fondo del Header Mobile
   - Altura
   - Distribución izquierda / centro / derecha
   - Zona del buscador móvil
   - Zona inferior rápida
   - Visibilidad móvil

   NO CONTROLA:
   - Logo móvil
   - Hamburguesa
   - Buscador
   - Carrito
   - Menú lateral
   - Barra inferior
   ========================================================== */


/* ==========================================================
   01 · HEADER MÓVIL GENERAL
   ========================================================== */

#cmx-header-mobile {
    display: none;

    width: 100%;

    margin: 0;
    padding: 0;

    background-color:
        var(--cmx-azul, #0000A6);

    color:
        var(--cmx-blanco, #FFFFFF);

    box-sizing: border-box;
}


/* ==========================================================
   02 · FILA SUPERIOR
   ========================================================== */

#cmx-header-mobile
.cmx-header-mobile__top {

    width: 100%;

    margin: 0;
    padding: 0;

    background-color:
        var(--cmx-azul, #0000A6);
}


/* ==========================================================
   03 · CONTENEDOR INTERIOR
   ========================================================== */

#cmx-header-mobile
.cmx-header-mobile__inner {

    width: 100%;

    min-height: 56px;

    margin: 0 auto;
    padding: 8px 12px;

    display: grid;

    /*
     * IZQUIERDA = hamburguesa
     * CENTRO    = logo
     * DERECHA   = carrito / acceso
     */
    grid-template-columns:
        44px
        1fr
        56px;

    align-items: center;

    column-gap: 8px;

    box-sizing: border-box;
}


/* ==========================================================
   04 · ZONA IZQUIERDA
   ========================================================== */

#cmx-header-mobile
.cmx-header-mobile__left {

    width: 44px;
    min-width: 44px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
}


/* ==========================================================
   05 · ZONA CENTRAL
   ========================================================== */

#cmx-header-mobile
.cmx-header-mobile__center {

    width: 100%;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* ==========================================================
   06 · ZONA DERECHA
   ========================================================== */

#cmx-header-mobile
.cmx-header-mobile__right {

    width: 56px;
    min-width: 56px;

    display: flex;
    align-items: center;
    justify-content: flex-end;
}


/* ==========================================================
   07 · ZONA DEL BUSCADOR
   ========================================================== */

#cmx-header-mobile
.cmx-header-mobile__search {

    width: 100%;

    margin: 0;
    padding: 0 12px 10px 12px;

    background-color:
        var(--cmx-azul, #0000A6);

    box-sizing: border-box;
}


/* ==========================================================
   08 · NAVEGACIÓN RÁPIDA
   ========================================================== */

#cmx-header-mobile
.cmx-header-mobile__quicknav {

    width: 100%;

    margin: 0;
    padding: 0;

    background-color:
        #000080;

    box-sizing: border-box;
}


/* ==========================================================
   09 · SOLO MÓVIL
   ========================================================== */

@media (max-width: 768px) {

    #cmx-header-mobile {
        display: block;

        position: relative;

        z-index:
            var(--cmx-z-header, 1000);
    }

}


/* ==========================================================
   10 · OCULTAR EN PC
   ========================================================== */

@media (min-width: 769px) {

    #cmx-header-mobile {
        display: none !important;
    }

}