/**
 * 🔧 FIX GLOBAL: RESPONSIVIDADE DE BOTÕES
 * 
 * Corrige TODOS os botões das páginas customizadas
 * para não quebrarem o layout no mobile
 * 
 * Aplica-se a TODAS as páginas do tema
 */

/* ========================================
   🎯 FIX UNIVERSAL: BOX-SIZING
   ======================================== */

body *,
body *::before,
body *::after {
    box-sizing: border-box !important;
}

/* ========================================
   🔘 BOTÕES - RESPONSIVIDADE GLOBAL
   ======================================== */

/* Todos os botões em MOBILE devem respeitar a largura da tela */
@media (max-width: 640px) {
    /* Botões principais */
    .btn-principal,
    .btn-primary,
    .btn-cta,
    .loja-card-btn,
    .tracking-search-btn,
    .categoria-btn,
    a[class*="btn"],
    button[class*="btn"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
        text-align: center !important;
        display: block !important;
    }
    
    /* 🔥 BOTÃO DA VITRINE - MENOR */
    .loja-produto-btn {
        padding: 8px 10px !important; /* 🔥 MUITO REDUZIDO */
        font-size: 12px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        border: none !important; /* �� SEM BORDA */
    }
    
    /* Botões inline (devem ser menores) */
    .btn-whatsapp,
    .tracking-correios-copy,
    .btn-secondary {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
}

/* ========================================
   📱 MOBILE PEQUENO (≤ 480px)
   ======================================== */

@media (max-width: 480px) {
    .btn-principal,
    .btn-primary,
    .btn-cta,
    .loja-card-btn,
    .tracking-search-btn,
    .categoria-btn,
    a[class*="btn"],
    button[class*="btn"] {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
}

/* ========================================
   📦 CONTAINERS - OVERFLOW FIX
   ======================================== */

/* Evita que containers causem scroll horizontal */
@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
    }
    
    /* Containers principais */
    .sobre-container,
    .contato-container,
    .como-container,
    .loja-container,
    .politica-container,
    .termos-container,
    .categorias-container,
    .why-artistaria,
    .tracking-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

@media (max-width: 480px) {
    .sobre-container,
    .contato-container,
    .como-container,
    .loja-container,
    .politica-container,
    .termos-container,
    .categorias-container,
    .why-artistaria,
    .tracking-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ========================================
   🖼️ IMAGENS - RESPONSIVIDADE
   ======================================== */

img {
    max-width: 100% !important;
    height: auto !important;
}

/* ========================================
   📋 FORMULÁRIOS - INPUTS RESPONSIVOS
   ======================================== */

@media (max-width: 640px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    textarea,
    select {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 14px !important;
        font-size: 14px !important;
    }
}

/* ========================================
   🎨 CARDS - EVITAR OVERFLOW
   ======================================== */

@media (max-width: 768px) {
    .card,
    .categoria-card,
    .produto-card,
    .loja-card,
    .tipo-card,
    .why-card {
        padding: 20px 16px !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .card,
    .categoria-card,
    .produto-card,
    .loja-card,
    .tipo-card,
    .why-card {
        padding: 16px 12px !important;
    }
}

/* ========================================
   🔤 TEXTOS - QUEBRA DE LINHA
   ======================================== */

h1, h2, h3, h4, h5, h6, p, span, a, li {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* ========================================
   📐 GRID - RESPONSIVIDADE
   ======================================== */

@media (max-width: 768px) {
    .grid-4,
    .grid-3,
    .grid-2,
    .categorias-grid,
    .loja-vitrine-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* ========================================
   🎯 FIX ESPECÍFICO: PÁGINA LOJA - VITRINE
   ======================================== */

/* 🔥 FORÇA 1 COLUNA EM MOBILE/TABLET */
@media (max-width: 992px) {
    .loja-vitrine-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .loja-produto-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ========================================
   🎯 FIX ESPECÍFICO: PÁGINA SOBRE
   ======================================== */

@media (max-width: 640px) {
    .sobre-hero .btn-principal {
        width: 100% !important;
        padding: 14px 20px !important;
    }
}

/* ========================================
   🎯 FIX ESPECÍFICO: PÁGINA CONTATO
   ======================================== */

@media (max-width: 640px) {
    .contato-form .btn-principal {
        width: 100% !important;
        padding: 14px 20px !important;
    }
}

/* ========================================
   🎯 FIX ESPECÍFICO: FAQ
   ======================================== */

@media (max-width: 640px) {
    .faq-cta .btn-whatsapp {
        width: 100% !important;
        padding: 14px 20px !important;
    }
}

/* ========================================
   🎯 FIX ESPECÍFICO: RASTREAMENTO
   ======================================== */

@media (max-width: 640px) {
    .tracking-search-btn,
    .tracking-whatsapp-btn {
        width: 100% !important;
        padding: 14px 20px !important;
        margin-top: 12px !important;
    }
}

/* ========================================
   🎯 FIX ESPECÍFICO: CATEGORIAS
   ======================================== */

@media (max-width: 640px) {
    .categoria-btn {
        width: 100% !important;
        padding: 12px 20px !important;
    }
}

/* ========================================
   🎯 FIX ESPECÍFICO: LOJA ESTRATÉGICA
   ======================================== */

@media (max-width: 640px) {
    .produto-link,
    .linha-btn,
    .cta-btn {
        padding: 14px 20px !important;
        font-size: 15px !important;
    }
}

/* ========================================
   🎯 FIX ESPECÍFICO: POR QUE COMPRAR
   ======================================== */

@media (max-width: 640px) {
    .why-cta .btn-primary {
        width: 100% !important;
        padding: 14px 20px !important;
    }
}

/* ========================================
   ✅ FIM DO FIX GLOBAL
   ======================================== */