/**
 * Ajustes finos de responsividade que não são específicos de um único
 * componente (cada componente já cuida do seu próprio breakpoint em
 * header.css, footer.css, home.css, produtos.css, woocommerce.css).
 * Breakpoints oficiais: 320-374 (mobile compacto), 375-767 (mobile),
 * 768-1023 (tablet), 1024-1439 (desktop), 1440+ (desktop amplo).
 */

@media (max-width: 767px) {
    .site-main {
        padding-block: var(--df-space-4);
    }

    .section-categorias,
    .section-destaques,
    .section-inspiracao,
    .footer-infos,
    .footer-newsletter {
        padding-block: var(--df-space-4);
    }

    .carousel-nav {
        display: none !important;
    }
}

@media (max-width: 374px) {
    .hero-title {
        font-size: 2rem;
    }

    .btn {
        width: 100%;
    }
}