/* ============================================================
   RESPONSIVE-VINHOS.CSS
   Ficheiro exclusivo para a responsividade da página vinhos.html.
   Não altera nenhuma regra do style-vinhos.css nem do
   style-principal.css — apenas ajusta valores dentro de
   media queries.
   Esta página não tem cabeçalho/menu, por isso não há
   hambúrguer a tratar aqui.
   ============================================================ */


/* ============================================================
   1200px e abaixo
   ============================================================ */
@media (max-width: 1200px) {

    .banner-produtos {
        padding: 40px 5% 150px;
    }

    .zona-filtros {
        padding: 28px 5% 12px;
    }

    .grelha-vinhos {
        grid-template-columns: repeat(3, 1fr);
        padding: 20px 5% 10px;
    }

    .grelha-vinhoss {
        grid-template-columns: repeat(3, 1fr);
        padding: 20px 5% 10px;
    }

    .grelha-vinhossss {
        padding: 20px 5% 10px;
    }

    .paginacao {
        padding: 36px 5% 60px;
    }
}


/* ============================================================
   992px e abaixo — tablets
   ============================================================ */
@media (max-width: 992px) {

    .banner-produtos {
        padding: 36px 5% 120px;
    }

    .banner-produtos h1 {
        font-size: 38px;
    }

    .zona-filtros {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .abas-filtro {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .aba {
        flex-shrink: 0;
        padding: 8px 16px;
        font-size: 12.5px;
    }

    .grelha-vinhos,
    .grelha-vinhoss {
        grid-template-columns: repeat(2, 1fr);
    }

    .imagem-vinho {
        height: 210px;
    }
}


/* ============================================================
   768px e abaixo — telemóveis grandes
   ============================================================ */
@media (max-width: 768px) {

    .banner-produtos {
        padding: 30px 6% 90px;
    }

    .banner-produtos h1 {
        font-size: 30px;
    }

    .banner-produtos p {
        font-size: 13.5px;
        max-width: 100%;
    }

    .zona-filtros {
        padding: 24px 6% 10px;
    }

    .contagem-resultados {
        font-size: 13px;
    }

    .grelha-vinhos,
    .grelha-vinhoss,
    .grelha-vinhossss,
    .grelha-vinhosss {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 16px 6% 10px;
    }

    .imagem-vinho {
        height: 170px;
    }

    .info-vinho {
        padding: 14px 12px 18px;
    }

    .nome-vinho {
        font-size: 16px;
    }

    .preco-vinho {
        font-size: 16px;
    }

    .botao-detalhes {
        padding: 9px;
        font-size: 12.5px;
    }

    .txxxx {
        padding: 36px 24px;
        max-width: 90%;
    }

    .txxxx h1 {
        font-size: 22px;
    }

    .paginacao {
        padding: 30px 6% 50px;
        gap: 6px;
    }

    .pagina {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}


/* ============================================================
   480px e abaixo — telemóveis pequenos
   ============================================================ */
@media (max-width: 480px) {

    .banner-produtos {
        padding: 26px 6% 70px;
    }

    .banner-produtos h1 {
        font-size: 24px;
    }

    .trilho {
        font-size: 11.5px;
    }

    .zona-filtros {
        padding: 20px 6% 8px;
    }

    .aba {
        padding: 7px 14px;
        font-size: 12px;
    }

    .grelha-vinhos,
    .grelha-vinhoss,
    .grelha-vinhossss,
    .grelha-vinhosss {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .imagem-vinho {
        height: 220px;
    }

    .txxxx {
        padding: 28px 18px;
    }

    .txxxx span {
        width: 46px;
        height: 46px;
        font-size: 28px;
    }
}