/**
 * responsive.css
 * Fase 9 — breakpoints de tablet (≤991px) y móvil (≤767px/≤480px).
 * El menú nunca se rompe: en escritorio es el mega menú horizontal
 * (menu.css); aquí abajo de 991px se convierte en un cajón lateral
 * con acordeón, con el mismo patrón de "panel + fondo oscuro" que ya
 * usa el carrito (header.css) — así toda la navegación queda
 * consistente en cualquier tamaño de pantalla.
 */

/* ============================== Tablet (≤991px) ============================== */
@media (max-width: 991px) {
    .ap-container {
        padding: 0 20px;
    }

    /* --- Cabecera: logo/buscador/acciones pasan a dos filas --- */
    .ap-header__row {
        flex-wrap: wrap;
        row-gap: 12px;
    }
    .ap-header__menu-toggle {
        display: flex;
    }
    .ap-header__logo-wrap img {
        max-height: 56px;
    }
    .ap-header__search {
        order: 3;
        flex-basis: 100%;
    }

    /* --- Menú: de barra horizontal a pantalla completa con scroll ---
       Antes era un cajón lateral estrecho (320px/85vw) con fondo oscuro
       detrás; ahora el botón hamburguesa abre una pantalla propia a
       100% de ancho/alto (mismo patrón que la vista de "Categorías" de
       una app), con scroll vertical por la rejilla de familias. Al
       cubrir toda la pantalla no hay "fuera" sobre el que tocar para
       cerrar (por eso el botón X de la barra superior, ver header.tpl
       y theme.js), así que ya no hace falta el fondo oscuro (::before)
       que sí seguía usando el carrito. */
    .ap-header__menu {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        background-color: var(--color-background);
        border: none;
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        transition: opacity var(--transition-slow), transform var(--transition-slow), visibility var(--transition-slow);
        z-index: 250;
    }
    .ap-header__menu--open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .ap-header__menu-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 18px 20px;
        position: sticky;
        top: 0;
        background-color: var(--color-background);
        border-bottom: 1px solid var(--color-border);
        z-index: 1;
    }
    .ap-header__menu-title {
        font-family: var(--font-family-menu);
        font-size: 16px;
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--color-primary);
    }
    .ap-header__menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex: 0 0 auto;
        padding: 0;
        border: none;
        border-radius: var(--radius-base);
        background: transparent;
        color: var(--color-primary);
        cursor: pointer;
    }
    .ap-header__menu-close:hover,
    .ap-header__menu-close:focus-visible {
        background-color: var(--color-background-alt, rgba(0, 0, 0, 0.05));
    }

    /* Por debajo de 991px el menú deja de ser el mega menú de escritorio
       (paneles al pasar el ratón, que en táctil no tiene "hover") y pasa
       a ser el drilldown por iconos (ps_mainmenu.tpl > .ap-drilldown,
       comportamiento en menu.js > initDrilldown()). Con !important a
       propósito: si el hosting tiene activado "Combinar/comprimir CSS"
       en Rendimiento, PrestaShop puede fusionar los archivos en un orden
       distinto al que declaramos en theme.yml, y entonces ni igualar la
       especificidad del selector de escritorio garantiza ganar el
       cascade. */
    .ap-mega-menu {
        display: none !important;
    }
    .ap-drilldown {
        display: block !important;
    }

    /* --- Filtros de listado (categoría/búsqueda/marca): mismo
       patrón de cajón lateral que el menú. --- */
    .ap-listing__filters-toggle {
        display: inline-block;
    }
    .ap-page-row__col--left {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: min(320px, 85vw);
        background-color: var(--color-background);
        padding: 24px;
        overflow-y: auto;
        box-shadow: var(--shadow-hover);
        transform: translateX(-100%);
        transition: transform var(--transition-slow);
        z-index: 250;
    }
    .ap-page-row__col--left.ap-page-row__col--open {
        transform: translateX(0);
    }
    .ap-page-row__col--left::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        background: rgba(26, 26, 26, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition-slow);
    }
    .ap-page-row__col--left.ap-page-row__col--open::before {
        opacity: 1;
        visibility: visible;
    }

    /* --- Ficha de producto: la galería pasa encima de la info --- */
    .ap-product__top {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .ap-gallery {
        flex-direction: column-reverse;
    }
    .ap-gallery__thumbs {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
    }
    .ap-gallery__thumb {
        width: 64px;
        height: 64px;
    }
    .ap-gallery__cover {
        height: 380px;
    }
}

/* ============================== Móvil (≤767px) ============================== */
@media (max-width: 767px) {
    .ap-container {
        padding: 0 16px;
    }

    .ap-header__actions {
        gap: 14px;
    }

    /* Logo distinto en móvil (icono/isotipo en vez del logo completo) */
    .ap-header__logo-wrap--desktop {
        display: none;
    }
    .ap-header__logo-wrap--mobile {
        display: flex;
    }
    .ap-header__logo-wrap--mobile img {
        max-height: 40px;
    }

    /* Filas de página (con o sin columna lateral) apiladas */
    .ap-page-row {
        flex-direction: column;
    }
    .ap-page-row__col--left,
    .ap-page-row__col--right {
        flex-basis: auto;
    }

    /* Rejillas: menos columnas mínimas para que no queden apretadas */
    .ap-product-grid,
    .ap-featured-categories,
    .ap-subcategories,
    .ap-account__links,
    .ap-address-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .ap-hero__caption {
        left: 20px;
        bottom: 20px;
        max-width: 80%;
    }
    .ap-hero__caption h2 {
        font-size: 22px;
    }

    /* Barra de resultados del listado: resumen y controles apilados */
    .ap-listing__top {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Cabecera de carrito lateral: ancho casi completo en pantallas
       pequeñas (ya usa min(400px, 90vw), esto lo ajusta un poco más) */
    #blockcart-wrapper .blockcart > .body {
        width: 92vw;
        padding: 20px;
    }

    /* Tablas (cuenta de cliente, pedidos...) con scroll horizontal
       en vez de romper el layout */
    .ap-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .ap-cart-detailed__item .ap-cart-line {
        padding: 16px 0;
    }

    .ap-product-tabs__nav {
        gap: 16px;
        overflow-x: auto;
    }
}

/* ============================== Móvil pequeño (≤480px) ============================== */
@media (max-width: 480px) {
    .ap-home-section {
        padding: 40px 0;
    }
    .ap-product__price--current {
        font-size: 24px;
    }
    .ap-cart__summary-card,
    .ap-newsletter {
        padding: 20px;
    }
    .ap-footer__columns {
        gap: 32px;
    }
}