/*
 * 📱 RESPONSIVIDADE — GISOUZA CONFEITARIA
 * Breakpoints:
 *   xs: < 480px  (celular pequeno)
 *   sm: < 640px  (celular)
 *   md: < 768px  (tablet portrait)
 *   lg: < 1024px (tablet landscape / laptop pequeno)
 *   xl: >= 1280px (desktop)
 */

/* ================================================================
   🔧 CORREÇÕES GLOBAIS MOBILE-FIRST & ANTI-OVERFLOW ESTRITO
   ================================================================ */

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

html, body {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    position: relative;
    margin: 0;
    padding: 0;
}

/* Previne transbordamento horizontal sem destruir o max-width de desktop */
.secao-destaque,
.secao-filtros,
.grade-produtos,
.rodape,
.cabecalho-principal,
.checkout-page,
.checkout-container,
.checkout-header-banner,
.checkout-grid,
.checkout-main-col,
.checkout-sidebar {
    max-width: 100%;
    box-sizing: border-box;
}

/* Imagens gerais responsivas; slides do banner preenchem a moldura */
img:not(.carousel-slide img):not(.intro-emblem-img),
video:not(.carousel-slide video) {
    max-width: 100%;
    height: auto;
}

.carousel-slide img,
.carousel-slide video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* ================================================================
   📱 CABEÇALHO (Header)
   ================================================================ */

@media (max-width: 768px) {
    :root {
        --altura-cabecalho: 64px;
    }

    .cabecalho-principal {
        height: var(--altura-cabecalho);
    }

    .conteudo-cabecalho {
        padding: 0 16px;
    }

    .logo {
        font-size: 1.4rem;
    }

    .acoes-cabecalho {
        gap: 6px;
    }

    .botao-icone-circular {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
        border-radius: 12px;
    }

    .botao-menu-trigger {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    /* Badge da cestinha: manter dentro da tela no mobile */
    #contador-carrinho {
        transform: translate(20%, -20%);
        min-width: 18px;
        height: 18px;
        font-size: 0.6rem;
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 1.25rem;
    }

    .botao-icone-circular {
        width: 36px;
        height: 36px;
    }
}

/* ================================================================
   🎠 BANNER / CARROSSEL
   ================================================================ */

@media (max-width: 768px) {
    .banner-carrossel {
        border-radius: 18px;
        margin: 12px auto 8px;
        width: 100%;
        max-width: 100%;
    }

    .carousel-slide {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .carousel-button {
        display: flex !important;
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
        opacity: 0.9;
    }

    .carousel-button.prev { left: 8px; }
    .carousel-button.next { right: 8px; }

    .carousel-dots {
        bottom: 10px;
        padding: 5px 10px;
        gap: 8px;
    }

    .carousel-dot {
        width: 6px;
        height: 6px;
    }

    .carousel-dot.active {
        width: 18px;
    }

    /* Texto interno do banner */
    .conteudo-slide {
        padding: 16px 20px;
    }

    .conteudo-slide h2 {
        font-size: 1.3rem !important;
        line-height: 1.3;
    }

    .conteudo-slide p {
        font-size: 0.85rem !important;
    }

    .botao-slide {
        padding: 8px 18px !important;
        font-size: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    .carousel-slide {
        aspect-ratio: 16 / 9;
    }
}

/* ================================================================
   🗂️ CATEGORIAS E FILTROS
   ================================================================ */

@media (max-width: 768px) {
    .secao-filtros {
        margin-top: -10px;
    }

    .categorias-grid {
        gap: 8px;
        margin: 16px auto;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 0 4px;
    }

    .categoria-card {
        padding: 8px 16px;
        font-size: 0.85rem;
        gap: 8px;
    }

    /* ✅ FIX PRINCIPAL: botões de filtro não esticam mais */
    .controles-filtros {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
    }

    .barra-busca-desktop {
        display: none !important;
    }

    .ordenacao-filtros {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .ordenacao-filtros .select-custom-wrapper {
        flex: 1 1 140px;
        max-width: 100%;
    }

    .ordenacao-filtros select {
        width: 100% !important;
        padding: 10px 14px;
        font-size: 0.85rem;
    }

    /* Botões de filtro de tamanho: ficam em linha, não em bloco */
    .filtro-tamanho-container,
    .filtros-tamanho {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        width: auto;
    }

    .botao-filtro {
        padding: 8px 16px;
        font-size: 0.82rem;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .controles-filtros {
        gap: 8px;
    }

    .categoria-card {
        padding: 7px 12px;
        font-size: 0.8rem;
    }
}

/* ================================================================
   🛍️ GRADE DE PRODUTOS
   ================================================================ */

@media (max-width: 768px) {
    .grade-produtos {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding-bottom: 60px;
    }

    .grade-produtos.layout-shopee {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .grade-produtos {
        gap: 10px;
    }
}

@media (max-width: 360px) {
    .grade-produtos {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .grade-produtos.layout-shopee {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   🃏 CARD DE PRODUTO
   ================================================================ */

@media (max-width: 768px) {
    .card-produto:not(.produto-esgotado):hover {
        transform: none;
        box-shadow: none;
    }

    .nome-produto {
        font-size: 0.82rem;
        line-height: 1.35;
    }

    .preco-produto {
        font-size: 0.95rem;
    }

    .info-produto {
        padding: 10px 10px 12px;
    }

    .selo-promocao {
        font-size: 0.65rem;
        padding: 3px 8px;
    }

    .botao-wishlist {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
        top: 6px;
        right: 6px;
    }
}

/* ================================================================
   🗺️ PÁGINA PRINCIPAL — LAYOUT GERAL
   ================================================================ */

@media (max-width: 768px) {
    .container {
        width: 100%;
        max-width: 100%;
        padding: 0 14px;
        box-sizing: border-box;
    }

    .secao-destaque {
        padding-top: calc(var(--altura-cabecalho) + 12px) !important;
        padding-bottom: 10px;
    }
}

/* ================================================================
   🦶 FOOTER
   ================================================================ */

@media (max-width: 768px) {
    .rodape {
        padding: 40px 0 24px;
    }

    .grade-rodape {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .marca-rodape {
        grid-column: 1 / -1;
    }

    .logo-rodape {
        font-size: 1.5rem;
    }

    .descricao-rodape {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .grade-rodape {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ================================================================
   🛒 PAINEL CARRINHO E MODAIS (MOBILE DE LUXO)
   ================================================================ */

@media (max-width: 640px) {
    .painel-carrinho {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        border-radius: 0 !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        border-left: none !important;
    }

    .painel-menu-mobile {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        border-radius: 0 !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        border-left: none !important;
    }

    .modal-produto {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 24px 24px 0 0;
        margin-top: auto;
        max-height: 92vh;
        max-height: 92dvh;
        overflow-x: hidden !important;
    }

    .overlay-modal {
        align-items: flex-end;
    }

    /* Ajuste de itens do carrinho em telas compactas */
    .cabecalho-carrinho {
        padding: 16px 14px 14px;
    }

    .titulo-carrinho {
        font-size: 1.2rem;
    }

    .item-no-carrinho {
        padding: 10px 12px;
        gap: 10px;
    }

    .item-no-carrinho img {
        width: 52px;
        height: 52px;
        border-radius: 12px;
    }

    .topo-item-carrinho h4 {
        font-size: 0.88rem;
    }

    .rodape-carrinho {
        padding: 14px 14px 20px;
    }

    .total-carrinho .valor-total {
        font-size: 1.3rem;
    }

    .botao-finalizar {
        padding: 14px 16px;
        font-size: 0.92rem;
    }
}

/* ================================================================
   📋 SEÇÕES DIVERSAS E ELEMENTOS FLUTUANTES
   ================================================================ */

@media (max-width: 768px) {
    /* Hero da página sobre */
    .hero-sobre h1 {
        font-size: 2rem;
    }

    .hero-sobre {
        padding: calc(var(--altura-cabecalho) + 20px) 0 20px;
    }

    /* Botão WhatsApp flutuante — nunca vaza a tela nem sobrepõe */
    .whatsapp-float-wrapper {
        bottom: 16px !important;
        right: 16px !important;
        max-width: calc(100vw - 32px) !important;
    }

    .whatsapp-float {
        width: 52px !important;
        height: 52px !important;
        font-size: 1.35rem !important;
    }

    /* Remove tooltips que ultrapassam a tela no mobile */
    .tooltip-whatsapp {
        display: none !important;
    }

    .btn-back-to-top {
        bottom: 80px !important;
        right: 16px !important;
        width: 42px !important;
        height: 42px !important;
    }

    /* Badges de produto não colidem nem vazam */
    .badges-card-container {
        max-width: calc(100% - 44px) !important;
    }
}

/* ================================================================
   ♿ ACESSIBILIDADE: desativa hover transform em touch
   ================================================================ */

@media (hover: none) {
    .card-produto:hover {
        transform: none !important;
    }

    .botao-icone-circular:hover {
        transform: none !important;
    }

    .categoria-card:hover {
        transform: none !important;
    }
}