/*
Theme Name: Mi tienda Nazatec
Theme URI: https://nazatec.pe
Description: Tema hijo de Storefront para mi tienda de componentes de PC, accesorios, impresoras y cámaras de vigilancia.
Author: LNG
Author URI: https://nazatec.pe
Template: storefront
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: storefront-child
*/

/* ============================================================
   AQUÍ EMPIEZA TU PERSONALIZACIÓN CSS
   ============================================================ */

/* ============================================================
   1. VARIABLES GLOBALES DE DISEÑO
   ============================================================ */
:root {
    --color-principal: #005A9C;      /* Azul tecnológico */
    --color-secundario: #1a1a1a;     /* Gris oscuro */
    --color-acento: #FF6B00;         /* Naranja vibrante */
    --color-fondo: #F5F5F5;          /* Blanco humo */
    --color-texto: #333333;          /* Texto principal */
    --color-texto-suave: #777777;    /* Texto secundario */
    --color-blanco: #FFFFFF;
    --color-borde: #E0E0E0;

    --fuente-titulos: 'Montserrat', sans-serif;
    --fuente-cuerpo: 'Open Sans', sans-serif;

    --radio-borde: 6px;
    --sombra-suave: 0 2px 8px rgba(0, 0, 0, 0.08);
    --sombra-hover: 0 4px 16px rgba(0, 90, 156, 0.15);
}

/* ============================================================
   2. TIPOGRAFÍA GLOBAL
   ============================================================ */
body,
button,
input,
select,
textarea {
    font-family: var(--fuente-cuerpo);
    color: var(--color-texto);
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    color: var(--color-secundario);
    line-height: 1.3;
}

a {
    color: var(--color-principal);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--color-acento);
}



/* ============================================================
   4. BOTONES
   ============================================================ */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button__link {
    background-color: var(--color-principal);
    color: var(--color-blanco);
    border: none;
    border-radius: var(--radio-borde);
    padding: 12px 24px;
    font-family: var(--fuente-titulos);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

button:hover,
input[type="submit"]:hover,
.button:hover {
    background-color: var(--color-acento);
    transform: translateY(-2px);
    box-shadow: var(--sombra-hover);
}

/* Botones de "Añadir al carrito" de WooCommerce */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background-color: var(--color-principal);
    color: var(--color-blanco);
    border-radius: var(--radio-borde);
    font-family: var(--fuente-titulos);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background-color: var(--color-acento);
}

/* Botón de "Comprar ahora" / "Finalizar compra" (más destacado) */
.woocommerce-checkout .checkout-button,
.woocommerce .single_add_to_cart_button {
    background-color: var(--color-acento) !important;
    font-size: 15px;
    padding: 14px 28px;
}

.woocommerce-checkout .checkout-button:hover,
.woocommerce .single_add_to_cart_button:hover {
    background-color: var(--color-principal) !important;
}

/* ============================================================
   5. PRODUCTOS (CATÁLOGO Y FICHA)
   ============================================================ */
.woocommerce ul.products li.product {
    background-color: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: 15px;
    transition: all 0.3s ease;
}

.woocommerce ul.products li.product:hover {
    box-shadow: var(--sombra-hover);
    transform: translateY(-4px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--fuente-titulos);
    font-weight: 600;
    font-size: 16px;
    color: var(--color-secundario);
    min-height: 48px;
}

.woocommerce ul.products li.product .price {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    color: var(--color-principal);
    font-size: 18px;
}

.woocommerce ul.products li.product .price del {
    color: var(--color-texto-suave);
    font-size: 14px;
    font-weight: 400;
}

.woocommerce ul.products li.product .price ins {
    color: var(--color-acento);
    text-decoration: none;
}

/* Etiqueta de "Oferta" */
.woocommerce span.onsale {
    background-color: var(--color-acento);
    color: var(--color-blanco);
    border-radius: 50%;
    font-family: var(--fuente-titulos);
    font-weight: 700;
    padding: 8px 12px;
}

/* Ficha de producto */
.woocommerce div.product .product_title {
    font-size: 32px;
    color: var(--color-secundario);
}

.woocommerce div.product p.price {
    color: var(--color-principal);
    font-size: 28px;
    font-family: var(--fuente-titulos);
    font-weight: 700;
}

/* ============================================================
   6. PIE DE PÁGINA (FOOTER) - FONDO BLANCO
   ============================================================ */
.site-footer {
    background-color: var(--color-blanco) !important;
    color: var(--color-texto) !important;
    border-top: 1px solid var(--color-borde) !important;
}

.site-footer a {
    color: var(--color-texto) !important;
}

.site-footer a:hover {
    color: var(--color-principal) !important;
}

.site-footer h1, .site-footer h2, .site-footer h3 {
    color: var(--color-secundario) !important;
}
/* ============================================================
   7. BARRA DE BÚSQUEDA
   ============================================================ */
.site-search input[type="search"] {
    border: 2px solid var(--color-principal);
    border-radius: var(--radio-borde);
    padding: 10px 15px;
}

/* ============================================================
   8. RESPONSIVE (MÓVIL)
   ============================================================ */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }

    h1 { font-size: 26px; }
    h2 { font-size: 22px; }
    h3 { font-size: 19px; }

    .woocommerce div.product .product_title {
        font-size: 24px;
    }

    .woocommerce div.product p.price {
        font-size: 22px;
    }
}

/* Fuerza el ancho completo SOLO en las fichas de producto individuales */
body.single-product #primary {
    width: 100% !important;
}

/* ============================================================
   9. BLOQUE DE CONFIANZA EN FICHA DE PRODUCTO
   ============================================================ */
.bloque-confianza {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 25px;
    padding: 18px;
    background-color: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
}

.bloque-confianza .confianza-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    gap: 8px;
}

.bloque-confianza .confianza-item svg {
    width: 28px;
    height: 28px;
    color: var(--color-principal);
    flex-shrink: 0;
}

.bloque-confianza .confianza-item span {
    font-family: var(--fuente-titulos);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-secundario);
    line-height: 1.3;
}

/* Responsive: en móvil se apilan en vertical */
@media (max-width: 600px) {
    .bloque-confianza {
        flex-direction: column;
        gap: 12px;
    }
    .bloque-confianza .confianza-item {
        flex-direction: row;
        text-align: left;
        justify-content: flex-start;
    }
}

/* Aviso de stock bajo */
.aviso-stock-bajo {
    color: #FF6B00;
    font-family: var(--fuente-titulos);
    font-weight: 600;
    font-size: 14px;
    margin: 8px 0 15px 0;
    padding: 8px 12px;
    background-color: rgba(255, 107, 0, 0.1);
    border-left: 3px solid #FF6B00;
    border-radius: 4px;
}
/* ============================================================
   10. PESTAÑAS DE LA FICHA DE PRODUCTO
   ============================================================ */
.woocommerce-tabs ul.tabs {
    border-bottom: 2px solid var(--color-borde);
    padding: 0;
    margin-bottom: 25px;
}

.woocommerce-tabs ul.tabs li a {
    font-family: var(--fuente-titulos);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-texto);
    padding: 12px 20px;
    border: none;
    background: transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.woocommerce-tabs ul.tabs li a:hover {
    color: var(--color-principal);
}

.woocommerce-tabs ul.tabs li.active a {
    color: var(--color-principal);
    border-bottom: 3px solid var(--color-principal);
    background: transparent;
}

.woocommerce-tabs .panel {
    padding: 20px 0;
    font-family: var(--fuente-cuerpo);
    line-height: 1.7;
}

.woocommerce-tabs .panel h3 {
    font-family: var(--fuente-titulos);
    color: var(--color-secundario);
    margin-bottom: 15px;
}

.woocommerce-tabs .panel ul {
    padding-left: 20px;
}

.woocommerce-tabs .panel ul li {
    margin-bottom: 8px;
}

.checkout-confianza {
    background-color: #F5F5F5;
    border-left: 4px solid #005A9C;
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.6;
}
.checkout-confianza p {
    margin: 5px 0;
}

/* ============================================================
   11. PÁGINA DE AGRADECIMIENTO
   ============================================================ */
.gracias-personalizado {
    background: var(--color-fondo);
    border-left: 4px solid var(--color-principal);
    padding: 25px 30px;
    margin-bottom: 30px;
    border-radius: var(--radio-borde);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-texto);
}

.gracias-personalizado h2 {
    color: var(--color-principal);
    margin-top: 0;
    font-family: var(--fuente-titulos);
}

.gracias-personalizado ol {
    margin-left: 20px;
    padding-left: 10px;
}

.gracias-personalizado ol li {
    margin-bottom: 8px;
}

.gracias-personalizado .button.alt {
    transition: background 0.2s ease, transform 0.2s ease;
}

.gracias-personalizado .button.alt:hover {
    background-color: #1ebe5d !important; /* Un verde un poco más oscuro */
    transform: translateY(-2px);
}

/* ============================================================
  12 BOTÓN DE CONSULTA POR WHATSAPP EN PÁGINA DE PRODUCTO
   ============================================================ */
.consulta-whatsapp-wrapper {
    margin: 12px 0 0 0;
    padding: 0;
}

.consulta-whatsapp.button {
    display: inline-block;
    background-color: #25D366; /* Verde oficial de WhatsApp */
    color: #ffffff !important;
    padding: 12px 20px;
    border-radius: var(--radio-borde);
    font-family: var(--fuente-titulos);
    font-weight: 600;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0.3px;
    transition: background 0.2s ease, transform 0.2s ease;
    border: none;
}

.consulta-whatsapp.button:hover {
    background-color: #1ebe5d; /* Un verde ligeramente más oscuro */
    transform: translateY(-1px);
    color: #ffffff !important;
}

/* ============================================================
   1. HEADER BASE
   ============================================================ */
.site-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

/* ============================================================
   2. ESCRITORIO (≥ 768px) — Logo + Buscador + Cuenta + Carrito
   ============================================================ */
@media (min-width: 768px) {

    /* Contenedor principal: Flex con wrap para que el menú baje */
    .site-header > .col-full {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 15px !important;
        padding-top: 18px !important;
        padding-bottom: 12px !important;
    }

    /* --- LOGO --- */
    .site-header .site-branding {
        flex: 0 0 auto !important;
        order: 1 !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        float: none !important;
    }
    .site-header .site-branding img {
        max-width: 200px !important;
        height: auto !important;
    }

    /* --- BUSCADOR --- */
    .site-header .site-search {
        flex: 1 1 0% !important;
        order: 2 !important;
        min-width: 200px !important;
        max-width: none !important;
        margin: 0 !important;
        float: none !important;
    }
    .site-header .site-search .widget_product_search,
    .site-header .site-search form {
        width: 100% !important;
        margin: 0 !important;
        display: flex !important;
    }
    .site-header .site-search input[type="search"] {
        flex: 1 1 0% !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 12px 16px !important;
        font-size: 15px !important;
        border: 2px solid #005A9C !important;
        border-right: none !important;
        border-radius: 4px 0 0 4px !important;
        background-color: #ffffff !important;
        background-image: none !important;
        box-shadow: none !important;
        margin: 0 !important;
    }
    .site-header .site-search button {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        clip: auto !important;
        clip-path: none !important;
        width: auto !important;
        height: auto !important;
        position: static !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 18px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        background-color: #005A9C !important;
        color: #ffffff !important;
        border: 2px solid #005A9C !important;
        border-left: none !important;
        border-radius: 0 4px 4px 0 !important;
        cursor: pointer !important;
        margin: 0 !important;
        min-height: 46px !important;
    }
    .site-header .site-search button:hover {
        background-color: #004a80 !important;
        border-color: #004a80 !important;
    }

    /* --- BOTÓN CUENTA --- */
    .header-account-cart {
        flex: 0 0 auto !important;
        order: 3 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
    }
    .header-account {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 12px 18px !important;
        background-color: #005A9C !important;
        color: #ffffff !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        line-height: 1 !important;
        min-height: 46px !important;
        transition: background-color 0.2s ease !important;
        white-space: nowrap !important;
    }
    .header-account:hover {
        background-color: #004a80 !important;
        color: #ffffff !important;
    }
    .header-account svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #ffffff !important;
    }

    /* --- BOTÓN CARRITO --- */
    .header-cart {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 16px !important;
        background-color: #005A9C !important;
        color: #ffffff !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        min-height: 46px !important;
        transition: background-color 0.2s ease !important;
        line-height: 1 !important;
    }
    .header-cart:hover {
        background-color: #004a80 !important;
        color: #ffffff !important;
    }
    .header-cart svg {
        width: 22px !important;
        height: 22px !important;
        stroke: #ffffff !important;
    }
    .header-cart .cart-count {
        position: absolute !important;
        top: -7px !important;
        right: -7px !important;
        background-color: #FF9900 !important;
        color: #111111 !important;
        border-radius: 50% !important;
        padding: 2px 7px !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        min-width: 18px !important;
        text-align: center !important;
        line-height: 1.3 !important;
        border: 2px solid #ffffff !important;
    }

    /* --- MENÚ: SEGUNDA FILA --- */
    .site-header .storefront-primary-navigation {
        flex: 0 0 100% !important;
        order: 10 !important;
        width: 100% !important;
        margin-top: 12px !important;
        padding-top: 10px !important;
        border-top: 1px solid #e0e0e0 !important;
    }
}

/* ============================================================
   3. QUITAR LA LUPA DEL BUSCADOR
   ============================================================ */
.site-search .widget_product_search form::before,
.site-search .widget_product_search form::after,
.site-search form.woocommerce-product-search::before,
.site-search form.woocommerce-product-search::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
}
.site-search input[type="search"],
.site-search .search-field,
.site-search input.woocommerce-product-search-field {
    background-image: none !important;
    padding-left: 16px !important;
    text-indent: 0 !important;
}



/* ============================================================
   5. MENÚ DE NAVEGACIÓN (todos los tamaños)
   ============================================================ */
.site-header .main-navigation ul li a {
    color: #333333 !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
}
.site-header .main-navigation ul li a:hover,
.site-header .main-navigation ul li.current-menu-item > a {
    color: #005A9C !important;
}

/* ============================================================
   FOOTER PERSONALIZADO NAZATEC
   ============================================================ */
.site-info {
    text-align: center !important;
    padding: 25px 20px !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
    background-color: #f5f5f5 !important;
    border-top: 1px solid #e0e0e0 !important;
}

.site-info .nazatec-copyright {
    margin: 0 0 8px 0 !important;
    color: #333333 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.site-info .nazatec-enlaces {
    margin: 0 !important;
    color: #777777 !important;
}

.site-info .nazatec-enlaces a {
    color: #555555 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.site-info .nazatec-enlaces a:hover {
    color: #005A9C !important;
    text-decoration: underline !important;
}

.site-info .nazatec-enlaces .separador {
    color: #cccccc !important;
    margin: 0 8px !important;
}

.site-info a[href*="woocommerce.com"] {
    display: none !important;
}

/* ============================================================
   OCULTAR BOTÓN "AÑADIR AL CARRITO" EN BLOQUES ESPECÍFICOS
   ============================================================ */
.productos-sin-carrito ul.products li.product .add_to_cart_button,
.productos-sin-carrito ul.products li.product a.button,
.productos-sin-carrito ul.products li.product .button,
.productos-sin-carrito ul.products li.product .added_to_cart {
    display: none !important;
}

/* ============================================================
   ESPACIADO COMPACTO DEL HEADER EN TODAS LAS PÁGINAS
   ============================================================ */
.site-header,
#masthead.site-header,
body .site-header {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
}

.site-header > .col-full {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    margin-bottom: 0 !important;
}

.site-header::after {
    display: none !important;
    content: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-header .storefront-primary-navigation {
    margin-top: 6px !important;
    padding-top: 6px !important;
}


/* ============================================================
   MEGAMENÚ — ESCRITORIO (≥ 768px)
   ============================================================ */
@media (min-width: 768px) {

    /* === Contexto de posicionamiento: el panel se ancla al header completo === */
    .site-header,
    #masthead.site-header {
        position: relative !important;
    }

    .storefront-primary-navigation,
    .storefront-primary-navigation > .col-full,
    .main-navigation,
    .main-navigation ul,
    .main-navigation ul li,
    .main-navigation ul li.mega-menu {
        position: static !important;
    }

    /* Panel del megamenú: ancho completo del header */
    html body .main-navigation ul li.mega-menu > ul.sub-menu {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 30px 40px !important;

        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;

        background: #ffffff !important;
        border-top: 3px solid #005A9C !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
        padding: 30px 40px !important;
        margin: 0 !important;
        z-index: 9999 !important;
        overflow: visible !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    }

    html body .main-navigation ul li.mega-menu.mega-open > ul.sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    /* Columnas del megamenú (títulos) */
    html body .main-navigation ul li.mega-menu > ul.sub-menu > li {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        position: static !important;
        float: none !important;
        width: auto !important;
        border: none !important;
    }

    html body .main-navigation ul li.mega-menu > ul.sub-menu > li > a {
        display: block !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #1a1a1a !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        padding: 0 0 10px 12px !important;
        border-left: 3px solid #005A9C !important;
        border-bottom: none !important;
        margin: 0 0 15px 0 !important;
        line-height: 1.3 !important;
        width: auto !important;
    }

    /* Subcategorías dentro de cada columna */
    html body .main-navigation ul li.mega-menu > ul.sub-menu > li > ul.sub-menu {
        position: static !important;
        display: block !important;
        box-shadow: none !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        width: auto !important;
        grid: none !important;
        grid-template-columns: none !important;
    }

    html body .main-navigation ul li.mega-menu > ul.sub-menu > li > ul.sub-menu > li {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        position: static !important;
        float: none !important;
        width: auto !important;
        border: none !important;
    }

    html body .main-navigation ul li.mega-menu > ul.sub-menu > li > ul.sub-menu > li > a {
        display: block !important;
        font-family: 'Open Sans', sans-serif !important;
        font-size: 13.5px !important;
        font-weight: 400 !important;
        color: #555555 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        padding: 6px 0 !important;
        line-height: 1.4 !important;
        transition: color 0.2s ease, padding-left 0.2s ease !important;
        width: auto !important;
        background: transparent !important;
        border: none !important;
    }

    html body .main-navigation ul li.mega-menu > ul.sub-menu > li > ul.sub-menu > li > a:hover {
        color: #005A9C !important;
        padding-left: 6px !important;
    }

    /* Tercer nivel (sub-subcategorías) */
    html body .main-navigation ul li.mega-menu > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu {
        position: static !important;
        padding-left: 10px !important;
        margin: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        border: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }

    /* Ocultar flechas chevron del menú móvil en escritorio */
    html body .main-navigation li.menu-item-has-children > a::after,
    html body .main-navigation li.mega-menu > a::after {
        display: none !important;
        content: none !important;
    }
}

/* ============================================================
   MENÚ MÓVIL — PANEL LATERAL + ACORDEÓN (≤ 767px)
   ============================================================ */
@media (max-width: 767px) {

    /* ---------- 1. OVERLAY ---------- */
    .nazatec-menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 99998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .nazatec-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* ---------- 2. BLOQUEAR SCROLL DEL BODY ---------- */
    body.nazatec-menu-open {
        overflow: hidden !important;
    }

    /* ---------- 3. ORDEN DE CAPAS ---------- */
    .site-header,
    #masthead.site-header {
        z-index: 99999 !important;
    }
    .storefront-primary-navigation,
    .storefront-primary-navigation > .col-full {
        z-index: auto !important;
        overflow: visible !important;
        position: static !important;
    }

    /* ---------- 4. OCULTAR HANDHELD ---------- */
    .main-navigation .handheld-navigation,
    .main-navigation .handheld-navigation * {
        display: none !important;
        visibility: hidden !important;
    }

    /* ---------- 5. PANEL LATERAL (PRIMARY NAVIGATION) ---------- */
    .main-navigation .primary-navigation {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        right: auto !important;
        width: 80% !important;
        max-width: 340px !important;
        height: 100vh !important;
        float: none !important;
        display: block !important;
        background: #ffffff !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15) !important;
        z-index: 99999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 70px 0 30px 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        transition: left 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    }

    .main-navigation.toggled .primary-navigation {
        left: 0 !important;
        right: auto !important;
    }

    /* ---------- 6. BOTÓN X DE CERRAR ---------- */
    .main-navigation.toggled .primary-navigation::before {
        content: "✕";
        position: fixed !important;
        top: 15px !important;
        right: calc(100% - 80%) !important;
        margin-right: 15px !important;
        width: 40px !important;
        height: 40px !important;
        background: #005A9C !important;
        color: #ffffff !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        text-align: center !important;
        line-height: 40px !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        z-index: 100001 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }

    @media (min-width: 400px) {
        .main-navigation.toggled .primary-navigation::before {
            right: calc(100% - 340px) !important;
        }
    }

       /* ---------- 7. BOTÓN HAMBURGUESA (en el flujo, no absoluto) ---------- */
    .main-navigation .menu-toggle {
        position: static !important;      /* 👈 ya no está flotando */
        order: 1 !important;              /* 👈 primero en la fila */
        flex: 0 0 auto !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        cursor: pointer !important;
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
    }

    /* Ícono hamburguesa dentro del botón */
    .main-navigation .menu-toggle span {
        display: none !important;
        font-size: 0 !important;
    }

    .main-navigation .menu-toggle::before {
        content: "" !important;
        display: block !important;
        width: 22px !important;
        height: 2.5px !important;
        background-color: #005A9C !important;
        border-radius: 2px !important;
        box-shadow:
            0 -7px 0 #005A9C,
            0 7px 0 #005A9C !important;
    }

    .main-navigation.toggled .menu-toggle {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* ---------- 8. RESET DE LISTAS (UL) ---------- */
    html body .main-navigation .primary-navigation,
    html body .main-navigation .primary-navigation * {
        box-sizing: border-box !important;
    }

    html body .main-navigation .primary-navigation ul {
        position: static !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        list-style-type: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        grid-template-columns: none !important;
        grid: none !important;
        gap: 0 !important;
        column-count: auto !important;
    }

    /* ---------- 9. RESET DE ITEMS (LI) ---------- */
    html body .main-navigation .primary-navigation ul li {
        position: static !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        list-style-type: none !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        min-height: 0 !important;
        line-height: normal !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    /* ---------- 10. RESET DE ENLACES (A) ---------- */
    html body .main-navigation .primary-navigation ul li a {
        position: static !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 14px 50px 14px 25px !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #333333 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        text-decoration: none !important;
        background: transparent !important;
        border: none !important;
        line-height: 1.4 !important;
        text-align: left !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        transition: background-color 0.2s ease, color 0.2s ease !important;
    }

    html body .main-navigation .primary-navigation ul li a:hover {
        background-color: #f5f5f5 !important;
        color: #005A9C !important;
    }

    /* ---------- 11. SUBMENÚS: OCULTOS POR DEFECTO ---------- */
    html body .main-navigation .primary-navigation ul ul,
    html body .main-navigation .primary-navigation ul ul ul,
    html body .main-navigation .primary-navigation .sub-menu,
    html body .main-navigation .primary-navigation .sub-menu .sub-menu {
        position: static !important;
        display: none !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        background: #fafafa !important;
        box-shadow: none !important;
        border: none !important;
        border-top: 1px solid #ececec !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        grid-template-columns: none !important;
        grid: none !important;
        gap: 0 !important;
    }

    /* Mostrar submenú con .nz-open */
    html body .main-navigation .primary-navigation ul li.mega-menu.nz-open > ul.sub-menu,
    html body .main-navigation .primary-navigation ul li.menu-item-has-children.nz-open > ul.sub-menu {
        display: block !important;
    }

    /* ---------- 12. ITEMS Y ENLACES DEL SUBMENÚ ---------- */
    html body .main-navigation .primary-navigation ul ul li,
    html body .main-navigation .primary-navigation .sub-menu > li {
        position: static !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        border-bottom: 1px solid #ececec !important;
        background: transparent !important;
    }

    html body .main-navigation .primary-navigation ul ul li a,
    html body .main-navigation .primary-navigation .sub-menu > li > a {
        padding: 12px 45px 12px 40px !important;
        font-family: 'Open Sans', sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #555555 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        background: transparent !important;
        border: none !important;
        line-height: 1.4 !important;
    }

    html body .main-navigation .primary-navigation ul ul ul li a,
    html body .main-navigation .primary-navigation .sub-menu .sub-menu li a {
        padding-left: 55px !important;
        font-size: 12.5px !important;
        color: #666666 !important;
    }

    html body .main-navigation .primary-navigation ul ul li a:hover,
    html body .main-navigation .primary-navigation .sub-menu > li > a:hover {
        background-color: #f0f0f0 !important;
        color: #005A9C !important;
    }

    /* ---------- 13. FLECHAS CHEVRON (NIVEL 1) ---------- */
    /* ✅ CAMBIO: ahora el contexto de posicionamiento es el <a>, no el <li> */
    html body .main-navigation .primary-navigation ul li.menu-item-has-children > a,
    html body .main-navigation .primary-navigation ul li.mega-menu > a {
        position: relative !important;
    }

    html body .main-navigation .primary-navigation ul li.menu-item-has-children > a::after,
    html body .main-navigation .primary-navigation ul li.mega-menu > a::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        right: 22px !important;
        top: 50% !important;
        width: 9px !important;
        height: 9px !important;
        border-right: 2.5px solid #333333 !important;
        border-bottom: 2.5px solid #333333 !important;
        transform: translateY(-50%) rotate(45deg) !important;
        transition: transform 0.3s ease, border-color 0.3s ease !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none !important;
    }

    html body .main-navigation .primary-navigation ul li.menu-item-has-children.nz-open > a::after,
    html body .main-navigation .primary-navigation ul li.mega-menu.nz-open > a::after {
        transform: translateY(-50%) rotate(-135deg) !important;
        border-color: #005A9C !important;
    }

    /* ---------- 14. FLECHAS CHEVRON (NIVEL 2) ---------- */
    /* ✅ CAMBIO: la flecha también se ancla al <a> */
    html body .main-navigation .primary-navigation ul ul li.menu-item-has-children > a,
    html body .main-navigation .primary-navigation ul ul li.mega-menu > a {
        padding-right: 45px !important;
        position: relative !important;
    }

    html body .main-navigation .primary-navigation ul ul li.menu-item-has-children > a::after,
    html body .main-navigation .primary-navigation ul ul li.mega-menu > a::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        right: 20px !important;
        top: 50% !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2.5px solid #555555 !important;
        border-bottom: 2.5px solid #555555 !important;
        transform: translateY(-50%) rotate(45deg) !important;
        transition: transform 0.3s ease, border-color 0.3s ease !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none !important;
    }

    html body .main-navigation .primary-navigation ul ul li.menu-item-has-children.nz-open > a::after,
    html body .main-navigation .primary-navigation ul ul li.mega-menu.nz-open > a::after {
        transform: translateY(-50%) rotate(-135deg) !important;
        border-color: #005A9C !important;
    }

    /* ---------- 15. FLECHAS CHEVRON (NIVEL 3) ---------- */
    /* ✅ CAMBIO: la flecha también se ancla al <a> */
    html body .main-navigation .primary-navigation ul ul ul li.menu-item-has-children > a {
        padding-right: 40px !important;
        position: relative !important;
    }

    html body .main-navigation .primary-navigation ul ul ul li.menu-item-has-children > a::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        right: 20px !important;
        top: 50% !important;
        width: 7px !important;
        height: 7px !important;
        border-right: 2px solid #666666 !important;
        border-bottom: 2px solid #666666 !important;
        transform: translateY(-50%) rotate(45deg) !important;
        transition: transform 0.3s ease, border-color 0.3s ease !important;
        background: transparent !important;
        pointer-events: none !important;
    }

    html body .main-navigation .primary-navigation ul ul ul li.menu-item-has-children.nz-open > a::after {
        transform: translateY(-50%) rotate(-135deg) !important;
        border-color: #005A9C !important;
    }

    /* ---------- 16. ESTADO ABIERTO DEL PADRE ---------- */
    html body .main-navigation .primary-navigation ul li.menu-item-has-children.nz-open > a,
    html body .main-navigation .primary-navigation ul li.mega-menu.nz-open > a {
        background-color: #f0f5fa !important;
        color: #005A9C !important;
    }

    /* ---------- 17. EL PADRE NO NAVEGA ---------- */
    html body .main-navigation .primary-navigation ul li.menu-item-has-children > a,
    html body .main-navigation .primary-navigation ul li.mega-menu > a {
        cursor: pointer !important;
    }
    
    	    /* ---------- 18. HEADER MÓVIL — [☰] [LOGO] [👤] [🛒] / [BUSCADOR] ---------- */

    /* Contenedor del header */
    .site-header,
    #masthead.site-header,
    body .site-header {
        padding: 5px 0 !important;
        margin-bottom: 0 !important;
        display: block !important;         /* 👈 block, no flex (evita aplastar) */
        min-height: auto !important;        /* 👈 sin altura mínima forzada */
    }

    /* Fila de contenido (col-full): aquí va el flex de una línea con wrap */
    .site-header > .col-full,
    #masthead .col-full {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 6px 12px !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* 1. Hamburguesa (order 1) */
    .main-navigation,
    .main-navigation .menu-toggle {
        order: 1 !important;
        flex: 0 0 auto !important;
    }

    /* 2. Logo (order 2) */
    .site-header .site-branding,
    #masthead .site-branding,
    .site-header .site-branding .custom-logo-link {
        order: 2 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        text-align: left !important;
        float: none !important;
    }

    .site-header .site-branding img,
    .site-header .site-branding .custom-logo {
        max-height: 36px !important;
        max-width: 130px !important;
        height: auto !important;
        width: auto !important;
        display: block !important;
    }

    /* 3. Cuenta + Carrito (order 3, empujados a la derecha) */
    html body .site-header .header-account-cart,
    html body #masthead .header-account-cart {
        order: 3 !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 4. Buscador (order 10, segunda fila, ancho completo) */
    .site-header .site-search,
    #masthead .site-search {
        order: 10 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 6px 0 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .site-header .site-search form {
        display: flex !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .site-header .site-search input[type="search"] {
        flex: 1 1 0% !important;
        width: auto !important;
        padding: 11px 14px !important;
        font-size: 14px !important;
        border: 2px solid #005A9C !important;
        border-right: none !important;
        border-radius: 4px 0 0 4px !important;
        background: #ffffff !important;
        background-image: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .site-header .site-search button {
        flex: 0 0 auto !important;
        padding: 11px 16px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        background-color: #005A9C !important;
        color: #ffffff !important;
        border: 2px solid #005A9C !important;
        border-left: none !important;
        border-radius: 0 4px 4px 0 !important;
        margin: 0 !important;
    } 		
  
      /* ---------- 19. HEADER MÓVIL: LAYOUT DEFINITIVO ---------- */
    /* [☰] [LOGO]              [👤] [🛒] */
    /* [========== BUSCADOR ==========] */

    /* Header como contexto de posicionamiento */
    html body .site-header,
    html body #masthead.site-header {
        position: relative !important;
        display: block !important;
        min-height: 95px !important;
        padding: 0 !important;
    }

    /* Contenedor interno: FLEX con wrap */
    html body .site-header > .col-full,
    html body #masthead .col-full {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px 10px !important;
        padding: 10px 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        position: static !important;
    }

    /* --- 1. HAMBURGUESA (anclada al top-left del header) --- */
    html body .main-navigation .menu-toggle {
        position: absolute !important;
        top: 12px !important;
        left: 12px !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        z-index: 100001 !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: 1 !important;
        flex: 0 0 auto !important;
    }

    html body .main-navigation .menu-toggle span {
        display: none !important;
        font-size: 0 !important;
    }

    html body .main-navigation .menu-toggle::before {
        content: "" !important;
        display: block !important;
        width: 22px !important;
        height: 2.5px !important;
        background-color: #005A9C !important;
        border-radius: 2px !important;
        box-shadow:
            0 -7px 0 #005A9C,
            0 7px 0 #005A9C !important;
    }

    /* Neutralizar el contenedor padre del ☰ para que no ocupe espacio */
    html body .site-header .storefront-primary-navigation {
        position: static !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        overflow: visible !important;
        z-index: auto !important;
    }

    html body .site-header .storefront-primary-navigation > .col-full {
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: visible !important;
    }

    html body .site-header .main-navigation {
        position: static !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    /* --- 2. LOGO (order 2, dejando espacio al ☰) --- */
    html body .site-header .site-branding,
    html body #masthead .site-branding,
    html body .site-header .site-branding .custom-logo-link {
        order: 2 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 0 0 0 55px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        float: none !important;
    }

    html body .site-header .site-branding img,
    html body .site-header .site-branding .custom-logo {
        max-height: 36px !important;
        max-width: 130px !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
    }

    /* --- 3. CUENTA + CARRITO (order 3, a la derecha) --- */
    html body .site-header .header-account-cart,
    html body #masthead .header-account-cart {
        order: 3 !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        float: none !important;
    }

    html body .site-header .header-account-cart *,
    html body #masthead .header-account-cart * {
        visibility: visible !important;
        opacity: 1 !important;
    }

    html body .header-account-cart .header-account {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        padding: 0 !important;
        background-color: #005A9C !important;
        border-radius: 4px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    html body .header-account-cart .header-account .label {
        display: none !important;
    }

    html body .header-account-cart .header-account svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #ffffff !important;
    }

    html body .header-account-cart .header-cart {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        padding: 0 !important;
        background-color: #005A9C !important;
        border-radius: 4px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }

    html body .header-account-cart .header-cart svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #ffffff !important;
    }

    html body .header-account-cart .header-cart .cart-count {
        position: absolute !important;
        top: -6px !important;
        right: -6px !important;
        background-color: #FF9900 !important;
        color: #111111 !important;
        border-radius: 50% !important;
        padding: 1px 6px !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        min-width: 16px !important;
        text-align: center !important;
        line-height: 1.4 !important;
        border: 2px solid #ffffff !important;
    }

    /* --- 4. BUSCADOR (order 10, segunda fila ancho completo) --- */
    html body .site-header .site-search,
    html body #masthead .site-search {
        order: 10 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 8px 0 0 0 !important;
        padding: 0 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
        float: none !important;
        position: static !important;
    }

    html body .site-header .site-search form {
        display: flex !important;
        width: 100% !important;
        margin: 0 !important;
        flex-direction: row !important;
    }

    html body .site-header .site-search input[type="search"] {
        flex: 1 1 0% !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 11px 14px !important;
        font-size: 14px !important;
        border: 2px solid #005A9C !important;
        border-right: none !important;
        border-radius: 4px 0 0 4px !important;
        background: #ffffff !important;
        background-image: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html body .site-header .site-search button {
        flex: 0 0 auto !important;
        padding: 11px 16px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        background-color: #005A9C !important;
        color: #ffffff !important;
        border: 2px solid #005A9C !important;
        border-left: none !important;
        border-radius: 0 4px 4px 0 !important;
        margin: 0 !important;
        min-height: auto !important;
    }
  
 /* ---------- 20. FORZAR ANCHO COMPLETO DEL BUSCADOR ---------- */

    /* El div .site-search y TODOS sus hijos deben ocupar 100% */
    html body .site-header .site-search,
    html body #masthead .site-search,
    html body .site-header .site-search .widget,
    html body .site-header .site-search .widget_product_search,
    html body .site-header .site-search .widget_search,
    html body .site-header .site-search form,
    html body .site-header .site-search form.woocommerce-product-search {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* El form debe ser flex para alinear input + botón */
    html body .site-header .site-search form,
    html body .site-header .site-search form.woocommerce-product-search {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 0 !important;
    }

    /* El input de búsqueda: crece para llenar el espacio */
    html body .site-header .site-search input[type="search"],
    html body .site-header .site-search input.search-field,
    html body .site-header .site-search #woocommerce-product-search-field-0 {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 11px 14px !important;
        font-size: 14px !important;
        border: 2px solid #005A9C !important;
        border-right: none !important;
        border-radius: 4px 0 0 4px !important;
        background: #ffffff !important;
        background-image: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* El botón de búsqueda */
    html body .site-header .site-search button,
    html body .site-header .site-search button[type="submit"] {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 11px 16px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        background-color: #005A9C !important;
        color: #ffffff !important;
        border: 2px solid #005A9C !important;
        border-left: none !important;
        border-radius: 0 4px 4px 0 !important;
        margin: 0 !important;
        min-height: auto !important;
        box-sizing: border-box !important;
    }
  
        /* ---------- 21. FORZAR VISIBILIDAD DEL BOTÓN BUSCAR ---------- */

    html body .site-header .site-search button,
    html body .site-header .site-search button[type="submit"],
    html body .site-header .site-search input[type="submit"],
    html body .site-header .site-search .search-submit,
    html body .site-header .site-search form button {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        /* Anular la técnica screen-reader-text */
        clip: auto !important;
        clip-path: none !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        white-space: nowrap !important;

        /* Estilo visual del botón */
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 11px 16px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        font-family: 'Montserrat', sans-serif !important;
        text-transform: uppercase !important;
        background-color: #005A9C !important;
        color: #ffffff !important;
        border: 2px solid #005A9C !important;
        border-left: none !important;
        border-radius: 0 4px 4px 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    html body .site-header .site-search button:hover,
    html body .site-header .site-search button[type="submit"]:hover {
        background-color: #004a80 !important;
        border-color: #004a80 !important;
    }
      /* ---------- 22. AJUSTE FINAL: padding y alineación del header móvil ---------- */

    /* Padding del contenedor para que nada toque los bordes */
    html body .site-header > .col-full,
    html body #masthead .col-full {
        padding-left: 0px !important;
        padding-right: 40px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Los botones Cuenta + Carrito: no llegar al borde */
    html body .site-header .header-account-cart,
    html body #masthead .header-account-cart {
        margin-right: 0 !important;
        padding-right: 0 !important;
        flex: 0 0 auto !important;
        gap: 6px !important;
    }

    /* Botones individuales: tamaño exacto */
    html body .header-account-cart .header-account,
    html body .header-account-cart .header-cart {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        flex: 0 0 38px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* El buscador: padding interno para que no se salga */
    html body .site-header .site-search {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* El botón BUSCAR: ajustar borde derecho */
    html body .site-header .site-search button,
    html body .site-header .site-search button[type="submit"] {
        border-radius: 0 4px 4px 0 !important;
        margin-right: 0 !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* El input del buscador: ajustar borde derecho */
    html body .site-header .site-search input[type="search"] {
        border-radius: 4px 0 0 4px !important;
        box-sizing: border-box !important;
    }
 
    
}

 /* ============================================================
   DISEÑO MI CUENTA — VERSIÓN FULL WIDTH FORZADA
   ============================================================ */

/* 1. Contenedor principal: Grid de 2 columnas y ancho máximo */
@media (min-width: 768px) {
    body.woocommerce-account .woocommerce {
        display: grid !important;
        grid-template-columns: 280px 1fr !important; /* Menú de 280px, contenido el resto */
        gap: 40px !important;
        align-items: start !important;
        max-width: 1200px !important; /* Evita que se estire demasiado en pantallas gigantes */
        margin: 0 auto !important; /* Centra todo el bloque */
        padding-top: 20px !important;
    }
}

/* 2. Caja del Menú */
body.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
    overflow: hidden !important;
    padding: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid #f0f0f0 !important;
    margin: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none !important;
}

/* 3. Enlaces del menú */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block !important;
    padding: 15px 20px !important;
    color: #333333 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border-left: 4px solid transparent !important;
    transition: all 0.2s ease !important;
}

/* Ocultar los íconos por defecto de WooCommerce */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a::after {
    display: none !important;
    content: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background-color: #f9f9f9 !important;
    color: #005A9C !important;
}

/* Pestaña activa (Azul Nazatec) */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #f0f5fa !important;
    color: #005A9C !important;
    border-left: 4px solid #005A9C !important;
    font-weight: 700 !important;
}

/* 4. Caja del Contenido */
body.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 30px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
}

/* 5. Botones dentro del contenido */
body.woocommerce-account .woocommerce-MyAccount-content .button {
    background-color: #005A9C !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
}