/* =====================================================
   RESPONSIVE FIX - Breakpoints intermediários
   Corrige sobreposição e deformação ao redimensionar
   ===================================================== */

/* ---- Fluido: header-search adapta ao espaço disponível ---- */
.header-search {
    flex: 1 1 0;
    min-width: 0;
}

/* ---- 1200px: Tablets grandes / janela parcialmente reduzida ---- */
@media (max-width: 1200px) {
    .header-container {
        gap: 12px;
        padding: 0 15px;
    }

    .header-search {
        max-width: 380px;
    }

    .header-actions {
        gap: 12px;
    }

    .login-btn-header {
        padding: 10px 14px;
        font-size: 13px;
    }

    .login-btn-header-elaborate .login-btn-text .login-cta {
        font-size: 11px;
    }

    .user-info-header {
        max-width: 160px !important;
    }

    .user-info-content {
        max-width: 110px !important;
    }

    .whatsapp-btn-header {
        padding: 10px 14px;
    }

    .logo-img {
        height: 52px;
    }

    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* ---- 1100px: Continua encolhendo ---- */
@media (max-width: 1100px) {
    .header-search {
        max-width: 320px;
    }

    .header-actions {
        gap: 10px;
    }

    .login-btn-header span,
    .whatsapp-btn-header .whatsapp-text {
        display: none;
    }

    .login-btn-header,
    .whatsapp-btn-header {
        padding: 10px 12px;
    }

    .login-btn-header-elaborate .login-btn-text {
        display: none;
    }

    .login-btn-header-elaborate {
        padding: 8px 12px;
    }

    .user-info-header {
        max-width: 140px !important;
    }

    .user-info-content {
        max-width: 90px !important;
    }

    .user-razao {
        display: none !important;
    }
}

/* ---- 992px: Tablets ---- */
@media (max-width: 992px) {
    .header-container {
        gap: 10px;
        padding: 0 12px;
    }

    .header-search {
        max-width: 280px;
    }

    .header-search .search-btn span {
        display: none;
    }

    .header-actions {
        gap: 8px;
    }

    .favoritos-btn-header span {
        display: none;
    }

    .logo-img {
        height: 48px;
    }

    .user-info-header {
        max-width: 120px !important;
        padding: 5px 8px !important;
    }

    .user-greeting {
        font-size: 11px !important;
    }

    .categories-nav a {
        padding: 8px 10px;
        font-size: 12px;
    }

    .categories-nav li {
        max-width: 130px;
    }

    /* Product grid: 3 colunas em tablet */
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

/* ---- Categorias: overflow horizontal em telas médias ---- */
@media (max-width: 1200px) {
    .categories-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .categories-nav::-webkit-scrollbar {
        display: none;
    }

    .categories-nav a {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ---- Banner responsivo ---- */
@media (max-width: 1200px) {
    .banners-home .banner-slide img,
    .banner-slide img {
        object-fit: cover;
        width: 100%;
        height: auto;
    }
}

/* ---- Footer: 2 colunas em tablet, 1 em mobile ---- */
@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 30px 20px;
    }
}

/* ---- Segurança geral anti-overflow ---- */

.footer-container,
.banners-home,
.vitrines-home,
.products-section {
    overflow-x: hidden;
}

/* categories-container precisa de overflow visible para o dropdown */
.categories-container {
    overflow: visible;
}

.categories-bar {
    overflow: visible;
}

img {
    max-width: 100%;
    height: auto;
}

/* ---- Vitrine cards: transição suave de tamanho ---- */
@media (max-width: 1200px) {
    .vitrine-card-image {
        min-height: 240px;
        height: 240px;
    }
}

@media (max-width: 992px) {
    .vitrine-card-image {
        min-height: 220px;
        height: 220px;
    }
}

/* ---- Search suggestions: não exceder tela ---- */
.search-suggestions,
.header-search-results {
    max-width: calc(100vw - 30px);
}

/* ---- Modal: não exceder viewport ---- */
.modal-content {
    max-width: calc(100vw - 20px);
}

/* ---- Cart sidebar: não exceder em tablets ---- */
@media (max-width: 992px) {
    .cart-sidebar {
        width: 85vw;
        max-width: 400px;
    }
}

.modal-content.modal-login { max-width: 420px; }
.modal-content.modal-sm { max-width: 500px; }
.modal-content.modal-cadastro { max-width: 520px; }

/* header-container needs overflow visible for user dropdown */
.header-container {
    overflow: visible !important;
}