/*
 * store-responsive.css — Consistencia entre viewports para la tienda.
 *
 * El CSS de la tienda vive en main-ShOSBjOT.css, que es un build sin fuente en el
 * repo: no se toca. Este archivo se carga DESPUÉS y corrige lo que ese bundle deja
 * roto o distinto según el ancho de pantalla. Lo cargan las dos cáscaras que existen
 * (shop.php y includes/store_top.php) para que las seis páginas se comporten igual.
 *
 * Regla de oro: una acción vive en UN solo lugar conceptual. Si en desktop está en el
 * menú de cuenta, en mobile también — no se duplica en el nav ni en el footer.
 *
 * Todo lo de acá abajo está encerrado en media queries de mobile/tablet salvo los
 * tamaños de área táctil, que son inocuos en desktop. Desktop no cambia.
 */

/* ───────────────────────────────────────────────────────────────────────────
   1. Cajón de navegación mobile: se podía dejar sin salida y perdía ítems
   ---------------------------------------------------------------------------
   El bundle aplica `.hdr-inner{height:70px; align-items:center}` a TODOS los
   .hdr-inner, incluido el que está dentro del cajón lateral. Resultado: el <nav>
   (300px o más con el acordeón de PRODUCTOS abierto) queda centrado dentro de una
   caja de 70px y se desborda hacia ARRIBA — "Inicio" y "Productos" terminan en
   coordenadas negativas, fuera de la pantalla. Y como .header-nav es overflow
   visible, no hay scroll que los recupere.

   Además .header-nav (z-index 10000) tapa a .header-top dentro del mismo contexto
   de apilado de #header, así que con el cajón abierto la ✕ del hamburguesa no
   recibe el clic: no había forma de cerrar el menú sin navegar a otra página.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* La barra superior por encima del cajón: la ✕ vuelve a ser clickeable. */
    .header-top {
        position: relative;
        z-index: 10001;
    }

    /* El cajón scrollea. El padding superior deja libre la altura de la barra
       (dos filas: logo/acciones + buscador) para que nada nazca tapado. */
    .header-nav {
        padding: 132px 22px 28px;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* El .hdr-inner de adentro del cajón deja de ser una fila de 70px. */
    .header-nav .hdr-inner {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        height: auto;
        min-height: 100%;
        max-width: none;
        padding: 0;
        gap: 0;
    }

    .header-nav .main-nav {
        width: 100%;
        flex: 0 0 auto;
    }

    /* Los socials del cajón: el bundle ya los estilaba, pero ningún HTML los
       renderizaba. Sin esto los links sociales existían en desktop (#side-socials)
       y no existían en mobile. */
    .header-nav .mobile-nav-socials {
        flex: 0 0 auto;
    }
}

/* Arriba de 1024px manda #side-socials (la barra vertical): el bundle sólo hace
   `display:flex` de .mobile-nav-socials dentro de su media query, nunca la esconde
   en desktop. Sin esta regla los socials salían dos veces. */
@media (min-width: 1025px) {
    .mobile-nav-socials {
        display: none;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   2. Buscar productos: existía sólo en desktop
   ---------------------------------------------------------------------------
   `.header-top .search-wrap{display:none}` borraba el buscador abajo de 1025px.
   Buscar es parte del camino de compra, no un adorno de escritorio: en mobile pasa
   a una segunda fila del header, a lo ancho.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* padding:0 en la barra: el aire lo pone .hdr-inner, así la altura total
       (dos filas) queda en ~112px y coincide con el padding superior del cajón. */
    .header-top {
        height: auto;
        padding: 0;
    }

    .header-top .hdr-inner {
        height: auto;
        flex-wrap: wrap;
        row-gap: 10px;
        padding: 11px 15px;
    }

    /* order 4: detrás de logo (1), acciones (2) y hamburguesa (3) — segunda fila. */
    .header-top .search-wrap {
        display: flex;
        order: 4;
        flex: 1 0 100%;
        max-width: none;
        padding: 9px 16px;
    }

    .header-top .search-wrap input {
        font-size: 16px; /* < 16px hace que iOS haga zoom al enfocar */
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   3. "Mi Cuenta" también en mobile
   ---------------------------------------------------------------------------
   El bundle escondía .btn-account abajo de 1025px. Consecuencias reales:
     · un visitante sin sesión no tenía NINGUNA puerta de login en mobile;
     · las acciones de cuenta (perfil, mis compras, cerrar sesión, salir del
       acceso anticipado) tenían que emigrar al nav, y quedaban en un lugar
       distinto según el ancho — que es justo lo que se reportó.
   Con el botón visible, el menú de cuenta es el único hogar de esas acciones en
   los tres anchos. El texto sigue oculto (lo esconde el bundle): ícono + caret.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .header-actions .btn-account {
        display: flex !important;
        padding: 9px 12px;
        min-height: 40px;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   4. Menú PRODUCTOS del shell compartido (producto, categoría, faq, contacto,
      nosotros): en mobile no se podía abrir
   ---------------------------------------------------------------------------
   Ese menú abre por :hover. Dentro del cajón lateral no hay hover, y encima el
   trigger tiene la clase .nav-link, sobre la que el bundle engancha "cerrar el
   cajón": tocar PRODUCTOS cerraba el menú en vez de mostrar las categorías.
   store_top.php ya aplanaba el árbol bajo `@media (hover:none)`; acá se aplica por
   ANCHO, que es el criterio con el que aparece el cajón. shop.php no necesita esto:
   tiene su propio acordeón con botón (.dcat-toggle).
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .header-nav .nav-dropdown {
        width: 100%;
    }

    .header-nav .nav-dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        width: 100%;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        padding: 6px 0 0 12px;
        gap: 0;
    }

    .header-nav .nav-submenu-panel {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: 0;
        box-shadow: none;
        background: transparent;
        padding: 0 0 0 14px;
        min-width: 0;
    }

    .header-nav .nav-sub-caret {
        display: none;
    }

    .header-nav .nav-link-sub {
        padding: 9px 0;
        min-height: 40px;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   5. Carrito: se salía de la pantalla en teléfonos angostos
   ---------------------------------------------------------------------------
   #cartDrawer mide 420px fijos. A 375px de viewport, abierto quedaba con su borde
   izquierdo en x=-45: el título "TU PEDIDO" cortado y el campo de código postal
   empezando fuera de pantalla. Es el camino de compra: acá no se negocia.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 460px) {
    #cartDrawer {
        width: 100%;
        right: -100%;
    }

    #cartDrawer.open {
        right: 0;
    }

    .cart-drawer-header,
    .cart-footer {
        padding: 20px;
    }

    .cart-body {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   6. Áreas táctiles
   ---------------------------------------------------------------------------
   Botones de 17x26 o 29x35 son imposibles de acertar con el pulgar. 44px es el
   mínimo recomendado; se aplica sin media query porque en desktop no molesta.
   ─────────────────────────────────────────────────────────────────────────── */
#closeCart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
}

/* El hamburguesa sólo existe abajo de 1025px: acá NO se puede tocar `display`
   fuera de la media query o aparece en desktop. */
@media (max-width: 1024px) {
    #mobileMenuBtn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
    }
}

.btn-cart {
    min-height: 40px;
}

@media (max-width: 1024px) {
    .dcat-toggle {
        min-width: 40px;
        min-height: 40px;
    }

    .header-nav .nav-link {
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    .header-nav .dcat-row .nav-link {
        min-height: 40px;
    }
}