/* ============================================================
   MHDCommerce — Responsividade Departamento & Categoria
   Adicionar ao FINAL do departamento-categoria.css
   ============================================================ */

/* Sheet de categorias — oculto no desktop (vira o flyout normal) */
.cat-sheet { display: none; }

/* ════════════════════════════════════════════
   MOBILE — até 768px
   ════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── PILLS BAR vira scroll horizontal ── */
    .cat-pills-bar-inner {
        padding: 10px 16px;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .cat-pills-bar-inner::-webkit-scrollbar { display: none; }

    /* Botão "Todas as categorias" compacto */
    .cat-all-btn { padding: 7px 14px; font-size: 12px; }
    .cat-all-btn span,
    .cat-all-btn { white-space: nowrap; }

    /* Separador some no mobile */
    .pills-sep { display: none; }

    /* Pills top em linha rolável */
    .cat-pills-list { gap: 8px; }
    .cat-pill { padding: 6px 14px; font-size: 12px; }

    /* ── FLYOUT vira SHEET (sobe de baixo) ── */
    .cat-flyout {
        position: fixed;
        top: auto; left: 0; right: 0; bottom: 0;
        width: 100%;
        max-height: 80vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        transform: translateY(100%);
        transition: transform .3s ease;
        display: flex; flex-direction: column;
    }
    .cat-flyout.open { transform: translateY(0); }
    .cat-flyout-grid {
        grid-template-columns: 1fr; /* 1 coluna no mobile */
        overflow-y: auto;
    }
    .cat-flyout-item { padding: 13px 18px; font-size: 14px; }

    /* O overlay do flyout cobre a tela toda */
    .cat-overlay { z-index: 299; }

    /* ── BARRA DE ORDENAÇÃO vira scroll horizontal ── */
    .sort-bar-inner {
        padding: 10px 16px;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        justify-content: flex-start;
    }
    .sort-bar-inner::-webkit-scrollbar { display: none; }
    .sort-label { font-size: 12px; }
    .sort-pill { padding: 6px 12px; font-size: 12px; }
    /* Contador de produtos some no mobile (já está no hero) */
    .sort-count { display: none; }

    /* ── HERO da categoria ── */
    .dept-hero-inner { padding: 18px 16px; }
    .dept-breadcrumb { font-size: 11px; }
    .dept-hero-count { font-size: 12px; }
}