/* ============================================
   MOBILE CSS - SmartCatálogo AI
   APENAS para telas até 768px
   FONTE PADRÃO: Sistema (Apple/Android)
   ============================================ */

@media (max-width: 768px) {

    /* ==========================================
       FONTE DO SISTEMA - Padrão Mobile
       ========================================== */
    * {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* ==========================================
       HEADER - Compacto
       ========================================== */
    header .max-w-7xl {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    header h1,
    header a.text-2xl {
        font-size: 16px !important;
        line-height: 20px !important;
    }

    header p.text-sm {
        font-size: 10px !important;
        line-height: 14px !important;
    }

    /* ==========================================
       BANNER - Compacto
       ========================================== */
    section.bg-gradient-to-r {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    section.bg-gradient-to-r h1 {
        font-size: 18px !important;
        line-height: 22px !important;
        margin-bottom: 4px !important;
    }

    section.bg-gradient-to-r p {
        font-size: 11px !important;
        line-height: 14px !important;
        margin-bottom: 10px !important;
    }

    section.bg-gradient-to-r .flex-col {
        flex-direction: row !important;
        gap: 8px !important;
    }

    section.bg-gradient-to-r .flex-col a {
        padding: 8px 12px !important;
        font-size: 12px !important;
        flex: 1 !important;
    }

    /* ==========================================
       BUSCA - Compacta
       ========================================== */
    section.-mt-8 {
        margin-top: -10px !important;
    }

    section.-mt-8 .bg-white {
        padding: 10px !important;
    }

    section.-mt-8 form {
        flex-direction: column !important;
        gap: 8px !important;
    }

    section.-mt-8 input {
        width: 100% !important;
        padding: 10px !important;
        font-size: 13px !important;
    }

    section.-mt-8 button[type="submit"] {
        width: 100% !important;
        padding: 10px !important;
        font-size: 13px !important;
    }

    /* ==========================================
       TÍTULOS DE SEÇÃO - Padronizados
       ========================================== */
    section h2,
    section h2.text-3xl,
    section h2.text-4xl,
    h1.text-4xl,
    h2.text-3xl {
        font-size: 16px !important;
        line-height: 20px !important;
        margin-bottom: 12px !important;
    }

    /* ==========================================
       CATEGORIAS - 2 colunas
       ========================================== */
    .grid.lg\:grid-cols-6,
    .grid.md\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .grid.lg\:grid-cols-6 a,
    .grid.md\:grid-cols-3 a {
        padding: 10px !important;
    }

    .grid.lg\:grid-cols-6 .text-5xl {
        font-size: 24px !important;
        margin-bottom: 4px !important;
    }

    .grid.lg\:grid-cols-6 h3 {
        font-size: 11px !important;
        line-height: 14px !important;
    }

    .grid.lg\:grid-cols-6 p {
        font-size: 9px !important;
    }

    /* ==========================================
       TODOS OS GRIDS DE PRODUTOS - 2 COLUNAS
       ========================================== */
    .grid.grid-cols-1,
    .grid.grid-cols-2,
    .grid.sm\:grid-cols-2,
    .grid.sm\:grid-cols-3,
    .grid.lg\:grid-cols-3,
    .grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* ==========================================
       TODOS OS CARDS DE PRODUTO - PADRÃO NOVIDADES
       ========================================== */
    .product-card {
        width: 100% !important;
    }

    /* Imagem do produto - Container */
    .product-card .h-64,
    .product-card .h-48,
    .product-card > div:first-child {
        height: 140px !important;
        background-color: #FFFFFF !important;
    }

    /* Imagem do produto - Forçar fundo branco */
    .product-card .bg-gray-200 {
        background-color: #FFFFFF !important;
    }

    /* Padding do card */
    .product-card .p-6,
    .product-card .p-4 {
        padding: 8px !important;
    }

    /* Título do produto - PADRÃO */
    .product-card h3 {
        font-size: 12px !important;
        line-height: 15px !important;
        margin-bottom: 4px !important;
        font-weight: 600 !important;
    }

    /* Preço - PADRÃO */
    .product-card .text-3xl,
    .product-card .text-2xl,
    .product-card .text-xl,
    .product-card .text-indigo-600,
    .product-card .text-red-600 {
        font-size: 14px !important;
        line-height: 18px !important;
        font-weight: 700 !important;
    }

    /* Preço riscado */
    .product-card .line-through {
        font-size: 10px !important;
    }

    /* Remover margem inferior */
    .product-card .mb-4,
    .product-card .mb-2 {
        margin-bottom: 2px !important;
    }

    /* ==========================================
       PÁGINA CATÁLOGO - Busca e Filtros
       ========================================== */
    section.py-12 {
        padding: 12px !important;
    }

    section.py-12 > h1 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }

    section.py-12 > form {
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    section.py-12 > form input,
    section.py-12 > form select,
    section.py-12 > form button {
        width: 100% !important;
        padding: 10px !important;
        font-size: 13px !important;
    }

    /* ==========================================
       PÁGINA DE DETALHES DO PRODUTO
       ========================================== */
    section.py-12 .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    section.py-12 .aspect-square {
        aspect-ratio: 4/3 !important;
        max-height: 220px !important;
        background-color: #FFFFFF !important;
    }

    /* Forçar fundo branco na imagem da página de detalhes */
    section.py-12 .bg-gray-200 {
        background-color: #FFFFFF !important;
    }

    /* Título do produto */
    section.py-12 > div > div > h1 {
        font-size: 16px !important;
        line-height: 20px !important;
        margin-bottom: 8px !important;
    }

    section.py-12 .bg-gray-50 {
        padding: 10px !important;
        margin-bottom: 10px !important;
    }

    /* Preço na página de detalhes */
    section.py-12 .text-5xl {
        font-size: 24px !important;
        line-height: 28px !important;
        white-space: nowrap !important;
    }

    section.py-12 .line-through {
        font-size: 12px !important;
    }

    /* Botão WhatsApp */
    section.py-12 a.bg-green-500 {
        display: inline-flex !important;
        width: auto !important;
        padding: 10px 20px !important;
        font-size: 13px !important;
        margin: 0 auto !important;
    }

    section.py-12 > div > div:last-child {
        text-align: center !important;
    }

    /* Descrição */
    section.py-12 .border-t {
        padding-top: 10px !important;
    }

    section.py-12 h2 {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    section.py-12 p.text-gray-700 {
        font-size: 12px !important;
        line-height: 18px !important;
    }

    /* Informações Adicionais */
    section.py-12 .mt-12 {
        margin-top: 12px !important;
        padding: 10px !important;
    }

    section.py-12 .mt-12 h2.text-3xl {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    section.py-12 .mt-12 .bg-white {
        padding: 8px !important;
    }

    section.py-12 .mt-12 h4 {
        font-size: 11px !important;
    }

    section.py-12 .mt-12 p {
        font-size: 10px !important;
    }

    /* ==========================================
       FOOTER - Compacto
       ========================================== */
    footer {
        padding: 12px !important;
    }

    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    footer h3, footer h4 {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }

    footer p, footer a {
        font-size: 11px !important;
    }

    /* ==========================================
       PAGINAÇÃO
       ========================================== */
    .flex.justify-center.gap-2 a {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    /* ==========================================
       ESCONDER ELEMENTOS DESNECESSÁRIOS
       ========================================== */
    .hidden.md\:block,
    .product-card a.py-3,
    .product-card a.py-2 {
        display: none !important;
    }
}