/* Arquivo de Media Queries (Responsividade)
*/

/* Força o menu desktop em telas grandes */
@media (min-width: 1025px) {
    .nav-menu {
        display: flex !important;
    }
    .header-mobile-toggle { /* Esconde o container do ícone hambúrguer */
        display: none !important; 
    }
}

/* === CORREÇÃO GERAL DO HEADER (TABLET) ===
   Este bloco garante que em 1024px, o menu de texto suma,
   mas a barra de busca e o carrinho permaneçam visíveis.
*/
@media (max-width: 1024px) {
    
    /* 1. Esconde o menu de navegação de texto (Coleções, etc.) */
    .nav-menu {
        display: none; 
    }

    /* 2. Esconde o ícone de hambúrguer (pois ainda não estamos no mobile) */
    .header-mobile-toggle {
        display: none;
    }
    
    /* 3. Garante que os ícones principais (Busca, Carrinho) fiquem visíveis */
    .header-main-icons {
        display: flex;
        align-items: center;
        gap: 15px; /* Reduz o gap no tablet */
        flex-grow: 1; /* Faz o container crescer */
        justify-content: flex-end; /* Alinha à direita */
    }

    /* 4. Ajusta o layout do header-content */
    .header-content {
        gap: 20px;
    }
    
    /* 5. Ajusta os containers */
    .nav-left {
        gap: 20px; /* Reduz o gap */
        flex-shrink: 0;
    }
    .header-right {
        flex-grow: 1; /* Faz o container da direita crescer */
        justify-content: flex-end; /* Alinha os ícones à direita */
    }
    
    /* 6. Ajusta a barra de busca para ocupar o espaço */
    .search-box-container {
        flex-grow: 1; /* Faz a busca crescer */
        max-width: none; /* Remove o max-width do desktop */
    }
    .search-input {
        width: 100%; /* Faz o input ocupar 100% do container */
        max-width: none; /* Remove o max-width do desktop */
    }
    .search-input:focus {
        max-width: none;
    }

    .logo {
        padding-right: 0;
        border-right: none;
    }
    
    .slider-wrapper {
        padding: 0 10px; 
    }
    
    /* Ajusta o grid de busca para 3 colunas em tablets */
    .search-page .search-results-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Ajusta o grid da Love para 3 colunas em tablets */
    .love-page .love-results-container .search-results-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* === Vão Branco (Overflow) === */
    .partner-arrow {
        font-size: 1.5em; /* Um pouco menor */
        opacity: 0.3;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
    .product-page-header .partner-arrow {
         background-color: rgba(0, 0, 0, 0.05);
    }
    
    .partner-arrow.prev { 
        left: 10px; /* De -55px para 10px */
    } 
    .partner-arrow.next { 
        right: 10px; /* De -55px para 10px */
    }
}


/* === Layout Mobile (Telefone) === */
@media (max-width: 768px) {
    .header-content {
        padding: 10px 0;
        /* Restaura o layout de 3 colunas para mobile */
        display: grid;
        grid-template-columns: auto 1fr auto; /* (Logo) (Busca) (Hambúrguer) */
        gap: 10px; /* Diminui o gap no celular */
    }
    
    /* 1. Esconde logos e ícones do Desktop/Tablet */
    .logo-img.desktop-logo {
        display: none; /* Esconde logo desktop */
    }
    .header-main-icons {
        display: contents; /* Remove o container, liberando os filhos para o grid */
    }
    .header-main-icons .cart-icon-link {
        display: none; /* Esconde o carrinho da barra (vai pro menu mobile) */
    }

    /* 2. Mostra logos e ícones do Mobile */
    .logo-img.mobile-logo {
        display: block; /* Mostra logo mobile */
        height: 20px;
    }
    .header-mobile-toggle {
        display: block; /* Mostra ícone hambúrguer */
        grid-column: 3 / 4; /* Hambúrguer na terceira coluna */
    }
    .menu-toggle {
        display: block;
    }

    /* 3. Posiciona a busca na grid */
    .search-box-container {
        display: block;
        grid-column: 2 / 3; /* Busca na segunda coluna (central) */
        width: 100%;
        max-width: none;
    }
    .search-input {
        max-width: none;
    }

    .nav-left {
        grid-column: 1 / 2; /* Logo na primeira coluna */
        gap: 0;
    }

    .hero-banner-video {
        min-height: 50vh;
        padding-top: 60px;
    }

    .product-slider {
        gap: 20px;
    }
    
    .related-products-section .product-card-link {
        flex: 0 0 45%; 
        min-width: 45%; 
        max-width: 45%;
    }

    .partner-card-link {
        flex: 0 0 100px; 
        min-width: 100px;
    }
    .partner-image-container {
        max-width: 100px;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    .footer-column .social-icons {
        justify-content: center;
    }
    .footer-column.logo-column {
        text-align: center; 
    }
    
    /* Ajusta o grid de busca para 2 colunas em mobile */
    .search-page .search-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .search-hero-banner h1 {
        font-size: 2em;
    }

    /* --- Responsivo da Página de Produto --- */
    .product-detail-grid {
        grid-template-columns: 1fr; /* Coluna única em mobile */
        gap: 40px;
    }
    .search-hero-banner h1 {
        font-size: 1.8em;
    }
    .product-info-details h1 {
        font-size: 1.8em;
    }
    .current-price-detail {
        font-size: 2em;
    }

    /* --- Responsivo do Carrinho --- */
    .cart-content-wrapper {
        grid-template-columns: 1fr; /* Coluna única em tablet/mobile */
        gap: 50px;
    }

    .page-title {
        font-size: 2em;
    }
    
    .cart-table .th-product {
        width: auto;
    }

    .product-info-cell {
        flex-direction: column; /* Empilha imagem e nome */
        align-items: flex-start;
        gap: 10px;
    }

    .cart-table td {
        padding: 10px 5px;
        font-size: 0.9em;
    }
    
    /* --- Responsivo Checkout de Pagamento --- */
    .checkout-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .form-row-grid {
        grid-template-columns: 1fr 1fr; /* 2 colunas em mobile */
        gap: 15px;
    }

    /* --- Responsivo Página Love --- */
    .love-page .love-results-container .search-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}