/* ============================================================
   MOBILE / _catalogo.css — Catálogo, grid de productos y filtros
   Afecta: /catalogo, /{slug} (categorías)
   Archivos desktop relacionados: filtros_mejorados.css,
   product-grid-premium.css, figma-inicio.css
   ============================================================ */

/* ── Grid de productos: 2 columnas en móvil ────────────────── */
@media (max-width: 639px) {

    /* Contenedor de sección de grid */
    .product-grid-figma {
        padding: 40px 16px 60px;
    }

    /* Grid de cards: 2 columnas fijas en móvil */
    .product-grid-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Card: imagen más baja para que quepan 2 por fila */
    .product-card-image {
        height: 160px !important;
    }

    .product-card-info {
        padding: 12px !important;
    }

    .product-card-name {
        font-size: 0.78rem !important;
        margin-bottom: 8px !important;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .product-card-brand {
        font-size: 0.58rem !important;
        margin-bottom: 4px !important;
    }

    /* Botón "añadir" más compacto */
    .product-card-add {
        font-size: 0.6rem !important;
        padding: 7px 10px !important;
        letter-spacing: 0.08em !important;
    }

    /* Header del grid */
    .product-grid-header {
        margin-bottom: 24px;
    }

    .product-grid-title {
        font-size: clamp(1.4rem, 6vw, 2rem);
    }

    /* Botón "ver colección" */
    .product-grid-load-more {
        margin-top: 32px !important;
        flex-direction: column;
        gap: 12px;
    }

    .product-grid-load-more::before,
    .product-grid-load-more::after { display: none; }

    .btn-load-more {
        padding: 12px 32px !important;
        font-size: 0.72rem !important;
    }
}

/* ── Tablet (640px – 1023px): 3 columnas ───────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {

    .product-grid-figma {
        padding: 60px 24px 80px;
    }

    .product-grid-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .product-card-image {
        height: 220px !important;
    }
}

/* ── Barra superior del catálogo ───────────────────────────── */
@media (max-width: 991px) {

    .barra-superior-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .controles-superiores {
        width: 100%;
        justify-content: space-between;
    }

    .resultados-info .titulo-resultados {
        font-size: 1.4rem;
    }

    /* Padding del contenedor de catálogo */
    .catalogo-contenedor {
        padding-top: 80px;    /* era 100px — reduce espacio muerto en móvil */
        padding-bottom: 48px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ── Pills de filtro rápido ─────────────────────────────────── */
@media (max-width: 639px) {

    .product-filter-pills {
        gap: 4px;
        margin-bottom: 24px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px;
        scrollbar-width: none;
    }

    .product-filter-pills::-webkit-scrollbar { display: none; }

    .product-filter-btn {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 6px 14px;
        font-size: 0.65rem;
    }
}



/* ══════════════════════════════════════════════════════════════
   TAREA 6 — Paginación: áreas táctiles mínimas en móvil
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {

    .custom-pagination {
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 24px;
    }

    /* Área táctil mínima de 44px (WCAG / Apple HIG) */
    .custom-pagination a,
    .custom-pagination span {
        min-width: 44px;
        height: 44px;
        font-size: 0.9rem;
    }
}