/* CELULARES (430px para baixo) - Menu hambúrguer */
@media (max-width: 430px) {

/* HEADER E MENU HAMBÚRGUER */
.header {
    padding: 10px 0;
    height: 80px;
    justify-content: center;
}
.logo {
    margin: 0 auto;
}
.logo img {
    max-height: 60px;
}
.menu-toggle {
    display: block;
}

/* ESTADO ATIVO DO MENU */
.menu-toggle.active .hamburger {
    background: transparent;
}
.menu-toggle.active .hamburger::before {
    transform: rotate(45deg);
    top: 0;
}
.menu-toggle.active .hamburger::after {
    transform: rotate(-45deg);
    top: 0;
}

/* NAVEGAÇÃO */
.nav {
    position: fixed;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100vh;
    background-color: #04509c;
    flex-direction: column;
    padding: 70px 16px 16px;
    transition: left 0.3s ease;
    z-index: 1000;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    margin-right: 0;
}
.nav.active {
    left: 0;
}
.nav a {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin: 5px 0;
}

/* Restante do seu CSS para mobile */
.product-grid {
        grid-template-columns: 1fr;
}

.carousel-item img {
        height: 180px;
}
    
    #ajust img {
        width: 40%;
        height: 152px;
    }
#pop img {
    width: 95%;
    height: 100px;
}
#pop1 img {
    width: 60%;
    height: 150px;
}
#pop2 img {
    width: 35%;
    height: 200px;
}
#pop3 img {
    width: 40%;
    height: 200px;
}
#pqp img{
    width: 65%;
    height: 110px;
}

    .categories-section .col-md-6 {
        flex: 1 1 100%;
        max-width: 100%;
    }
    
    .ads-wrapper {
        width: 95%;
        margin-left: 2.5%;
    }
    
    .ad-item img {
        height: 100px;
    }
}

/* CELULARES MUITO PEQUENOS (360px para baixo) */
@media (max-width: 360px) {
    .carousel-item img {
        height: 150px;
    }
    
    .product-card img {
        height: 160px;
    }
    
    #ajust img {
        height: 150px;
    }
    
    .logo img {
        max-height: 60px;
    }
}

@media (min-width: 768px) {
    .categories-section .col-md-6 {
        flex: 1 1 45%; /* Em telas maiores volta para 45% */
        max-width: 38%;
    }
}

@media (min-width: 768px) and (max-width: 890px) {

    /* Mostra o botão do menu hambúrguer em telas menores */
    .menu-toggle {
        display: none;
    }
    .nav a{
    font-size: 15px;
    }
    .product-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas em tablets */
    }
    .carousel-item img {
        height: 220px; /* Ajuste a altura do carrossel */
    }

    /* IMAGEMS DOS PRODUTOS */

    .product-card img {
        width: 70%;
        height: 200px;
    }
#ajust img {
    width: 40%;
    height: 185px;
}
#pop img {
    width: 100%;
    height: 105px;
}
#pop1 img {
    width: 50%;
    height: 155px;
}
#pop2 img {
    width: 40%;
    height: 270px;
}
#pop3 img {
    width: 40%;
    height: 200px;
}
#pqp img{
    width: 95%;
    height: 170px;
}

/* Seção dos Quadrados */

.categories-section .row {

    margin-left: -35px;
    gap: 11vw; /* Espaçamento relativo */
}



}

@media (max-width: 480px) {

    .product-grid {
        grid-template-columns: 1fr; /* 1 coluna em celulares */
    }

    .categories-section .row {
        flex-direction: column; /* Empilha as colunas */
    }

    .carousel-item img {
        height: 120px; /* Ajuste a altura do carrossel */
    }

    .nav a {
        display: block; /* Coloca os links do menu em blocos */
        margin: 10px 0; /* Espaçamento entre os links */
    }

    .header {
        flex-direction: column; /* Empilha logo e menu */
        text-align: center;
    }

    .logo img {
        max-height: 70px; /* Reduz o tamanho da logo */
    }

    .carousel-control {
        font-size: 1rem;
    }

    .category-box {
        padding: 1vw;
        width: 80%;
        margin-left: 80px;
    }

    
}