/* ============================================================================
   MJB PERSONALIZADOS — mediastyle.css
   Responsividade caprichada para o celular (carrega DEPOIS do style.css).
   ============================================================================ */

/* ---------------- Tablet (≤ 991px) ---------------- */
@media (max-width: 991px) {
    .container { padding-left: 22px; padding-right: 22px; }

    /* Hero empilha e centraliza */
    .hero .hero-inner { grid-template-columns: 1fr !important; gap: 26px !important; }
    .hero-logo-clean { min-height: 200px !important; order: -1; }
    .hero-text { max-width: 100%; text-align: center; margin: 0 auto; }
    .hero-badge { margin-left: auto; margin-right: auto; }
    .hero-btns { justify-content: center; }
    .hero-stats { justify-content: center; }

    .produtos-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 22px !important; }
}

/* ---------------- Celular (≤ 768px) ---------------- */
@media (max-width: 768px) {
    /* Hero: sem altura mínima gigante, logo menor e centralizada */
    .hero { min-height: auto !important; padding: 44px 0 !important; }
    .hero-logo-clean { min-height: 0 !important; padding: 0 !important; margin-bottom: 4px; }
    .hero-logo-clean img { max-height: 120px !important; max-width: 210px !important; }
    .hero-logo-clean::before { width: 220px !important; height: 220px !important; max-width: 220px !important; }
    .hero-text h1 { font-size: 2.15rem !important; line-height: 1.12; }
    .hero-text p { font-size: 1.02rem; }
    .hero-btns { width: 100%; flex-direction: column; }
    .hero-btns .btn-primary, .hero-btns .btn-secondary { width: 100%; flex: 0 0 auto; justify-content: center; }
    .hero-stats { gap: 18px; flex-wrap: wrap; }
    .hero-stats .stat strong { font-size: 1.5rem; }

    /* Seções */
    .section-padding { padding: 44px 0; }
    .section-title { margin-bottom: 34px; }
    .section-title h2 { font-size: 1.8rem; }
    .section-title p { font-size: 0.98rem; }

    /* Faixa de categorias: rolagem horizontal */
    .cats-strip .container { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 16px 20px; }
    .cats-strip .container::-webkit-scrollbar { display: none; }
    .cat-pill { flex: 0 0 auto; }

    /* Destaques: 1 coluna (cartões com foto ficam melhores full-width) */
    .produtos-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .dest-media { height: 220px !important; }

    /* "Personalização é com a MJB": 4 cartões viram 2 colunas iguais */
    .mjb-features { grid-template-columns: repeat(2, 1fr) !important; gap: 13px !important; }
    .feat { min-height: 148px !important; padding: 24px 14px !important; }

    /* Como funciona: 1 coluna */
    .passos { grid-template-columns: 1fr !important; gap: 14px; }

    .cta-faixa { padding: 40px 22px; }
    .cta-faixa h2 { font-size: 1.65rem; }

    /* Páginas da loja */
    .shop-hero { padding: 44px 0 38px !important; }
    .shop-search { max-width: 100%; }
    .shop-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
    .shop-filters::-webkit-scrollbar { display: none; }
    .filter-chip { flex: 0 0 auto; }
    .products-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .pd-grid { grid-template-columns: 1fr !important; gap: 22px !important; padding: 16px !important; }
    .pd-title { font-size: 1.7rem !important; }
    .pd-actions .pd-btn { width: 100%; min-width: 0 !important; }

    /* Rodapé centralizado */
    .footer-content { text-align: center; }
    .footer-col p { justify-content: center; }
    .footer-col .socials { justify-content: center; }
}

/* ---------------- Celular pequeno (≤ 420px) ---------------- */
@media (max-width: 420px) {
    .container { padding-left: 16px; padding-right: 16px; }
    .hero-text h1 { font-size: 1.9rem !important; }
    .hero-logo-clean img { max-height: 104px !important; }
    .feat { min-height: 132px !important; padding: 20px 12px !important; }
    .feat i { font-size: 30px; margin-bottom: 10px; }
    .feat b { font-size: 1.15rem; }
    .btn-primary, .btn-secondary { font-size: 0.95rem; padding: 12px 18px; }
    .fab-btn { width: 52px; height: 52px; font-size: 24px; }
    .fab-stack { bottom: 18px; right: 18px; gap: 12px; }
    .cart-drawer { width: 100% !important; max-width: 100% !important; }
}

/* ---------------- Toque ---------------- */
@media (hover: none) {
    .produto-card:hover { transform: none; }
    .product-card:hover { transform: none; }
    .feat:hover { transform: none; }
    a, button { -webkit-tap-highlight-color: rgba(0,0,0,0.06); }
}