/* ==========================================================================
   HOJA DE ESTILOS MÓVIL (mobile.css)
   Capa responsive unificada del tema. Se carga para todos los anchos
   y aplica mediante sus propias media queries:
     - <= 992px : tablets (footer, tienda, producto se apilan)
     - <= 768px : móviles y tablets pequeñas (base de la versión móvil)
     - <= 480px : smartphones pequeños (ajustes finos)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. MENÚ HAMBURGUESA (base: oculto en escritorio)
   -------------------------------------------------------------------------- */
.menu-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 8px auto;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    touch-action: manipulation;
}

.menu-toggle-bar {
    display: block;
    width: 22px;
    height: 2.5px;
    background-color: var(--color-primary);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* --------------------------------------------------------------------------
   1. BREAKPOINT <= 992px (TABLETS) - Media queries migradas desde main.css
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {

    /* Footer */
    .footer-newsletter {
        flex-direction: column;
    }

    .footer-main-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Tienda / catálogo */
    .woocommerce-page-wrapper {
        grid-template-columns: 1fr;
    }

    /* Ficha de producto individual */
    .single-product div.product {
        grid-template-columns: 1fr;
    }

    .product-trust-badges-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --------------------------------------------------------------------------
   2. BREAKPOINT <= 768px (MÓVILES Y TABLETS PEQUEÑAS)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* 2.1 ENCABEZADO Y NAVEGACIÓN */
    .header-main-container {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 0 15px;
    }

    .site-branding img,
    .site-branding .custom-logo {
        max-width: 140px;
    }

    .header-search-bar {
        width: 100%;
        max-width: 100%;
    }

    .header-user-actions {
        width: 100%;
        justify-content: space-around;
        gap: 10px;
    }

    /* Menú hamburguesa: botón visible y menú colapsado */
    .menu-toggle {
        display: flex;
    }

    .site-navigation .main-nav-menu {
        display: none;
    }

    .site-navigation.is-open .main-nav-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 0;
        padding: 5px 0 15px;
    }

    /* Transformación del botón en "X" al abrir */
    .site-navigation.is-open .menu-toggle-bar:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .site-navigation.is-open .menu-toggle-bar:nth-child(2) {
        opacity: 0;
    }

    .site-navigation.is-open .menu-toggle-bar:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .main-nav-menu a {
        padding: 14px 0;
    }

    .main-nav-menu > .menu-item-has-children {
        padding: 0;
    }

    /* Sub-menús accesibles en táctil: se muestran expandidos y estáticos */
    .main-nav-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        min-width: 0;
        width: 100%;
        padding: 8px 0 8px 15px;
        margin-top: 4px;
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--color-border);
        border-radius: 0;
        background: var(--color-bg-light);
    }

    /* Mega-menú de categorías: una sola columna apilada en móvil */
    .delachacra-categorias-item > .sub-menu {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        padding: 5px 0 10px;
    }

    .delachacra-categorias-item .sub-menu .sub-menu {
        width: 100%;
        padding: 4px 0 4px 15px;
    }

    .main-nav-menu > .menu-item-has-children:hover > a::after {
        transform: none;
    }

    /* Targets táctiles cómodos en listas de filtros */
    .filter-btn {
        white-space: nowrap;
        padding: 10px 18px;
    }

    /* Evita el zoom automático de iOS al enfocar inputs */
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px;
    }

    /* 2.2 HERO SLIDER Y NOTIFICACIONES */
    .hero-slider-section {
        padding: 30px 0;
    }

    .slide-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .slide-content {
        max-width: 100%;
    }

    .slide-badge-wrapper {
        justify-content: center;
    }

    .slide-title {
        font-size: 1.8rem;
    }

    .slide-actions {
        flex-direction: column;
        gap: 15px;
        justify-content: center;
    }

    .notification-slider {
        max-width: 100%;
    }

    /* 2.3 BENEFICIOS Y MÁS VENDIDOS */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .category-filters {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    /* 2.4 PREGUNTAS FRECUENTES (FAQ) */
    .faq-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .faq-title {
        font-size: 0.95rem;
    }

    /* 2.5 FOOTER */
    .footer-newsletter {
        flex-direction: column;
        gap: 20px;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form input[type="email"] {
        border-radius: 6px;
        border-right: 1px solid #dcdcdc;
        margin-bottom: 8px;
    }

    .btn-subscribe {
        border-radius: 6px;
        width: 100%;
    }

    .footer-main-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    /* 2.6 TIENDA, CATÁLOGO Y BARRA LATERAL */
    .woocommerce-page-wrapper {
        grid-template-columns: 1fr;
        margin: 20px auto;
    }

    .shop-sidebar {
        order: 2; /* La barra lateral pasa al final en móviles */
    }

    /* 2.7 FICHA DE PRODUCTO INDIVIDUAL (SINGLE PRODUCT) */
    .single-product div.product {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .product-title {
        font-size: 1.4rem;
    }

    .single-product form.cart {
        flex-direction: column;
        align-items: stretch;
    }

    .single-product form.cart .quantity input.qty {
        width: 100%;
    }

    .product-trust-badges-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 2.8 CARRITO Y CHECKOUT EN MÓVIL (corregido el antiguo "!inner") */
    .woocommerce-checkout form.checkout {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #order_review {
        width: 100% !important;
    }

    /* 2.9 PÁGINA DE MI CUENTA (MY ACCOUNT) */
    .woocommerce-account .woocommerce {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 100% !important;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        padding: 20px !important;
    }
}

/* --------------------------------------------------------------------------
   3. BREAKPOINT <= 480px (SMARTPHONES PEQUEÑOS) - Ajustes finos
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {

    .header-main-container {
        padding: 0 10px;
        gap: 12px;
    }

    .site-branding img,
    .site-branding .custom-logo {
        max-width: 120px;
    }

    .secondary-nav-menu {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .top-secondary-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    .cart-contents-wrapper {
        padding: 8px 12px;
        gap: 8px;
    }

    .slide-title {
        font-size: 1.5rem;
    }

    .slide-discount-badge {
        font-size: 2rem;
    }

    .btn-shop-now {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    .section-title {
        font-size: 1.4rem;
    }

    .newsletter-title {
        font-size: 1.4rem;
    }

    .features-grid {
        gap: 15px;
    }

    .product-card {
        padding: 15px;
    }

    .filter-btn {
        padding: 8px 14px;
        font-size: 0.8rem;
    }

    .category-image-box {
        height: 90px;
    }

    .best-sellers-slider .swiper-button-prev,
    .best-sellers-slider .swiper-button-next {
        width: 32px;
        height: 32px;
    }

    .faq-header {
        padding: 16px 0;
    }

    .footer-main-grid {
        gap: 20px;
    }

    .single-product form.cart .single_add_to_cart_button {
        font-size: 0.95rem;
    }

    .product-trust-badges-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* --------------------------------------------------------------------------
   4. PÁGINAS INTERIORES, FORMULARIOS Y AVISO DE COOKIES (móvil)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    .page-content-area {
        padding: 25px 15px 40px;
    }

    .page-header .page-title {
        font-size: 1.5rem;
    }

    .delachacra-form {
        padding: 18px;
    }

    .delachacra-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .delachacra-form .btn-submit {
        width: 100%;
    }

    .cookie-consent-inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 16px;
        gap: 12px;
    }

    .cookie-consent-actions {
        justify-content: center;
    }

    .footer-legal-links {
        gap: 8px 14px;
    }
}

@media (max-width: 480px) {

    .cookie-consent-actions {
        flex-direction: column;
        gap: 8px;
    }

    .cookie-btn {
        width: 100%;
    }

    .faq-accordion-page .faq-header {
        padding: 15px 0;
    }
}