/* index/index.css (Versão Final Atualizada) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --primary-color: #e74c3c;
    --text-color: #34495e;
    --light-text-color: #7f8c8d;
    --bg-color: #f4f5f7;
    --white-color: #ffffff;
    --border-color: #ecf0f1;
    --nav-height: 60px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    padding-bottom: 70px; /* Espaço para o menu inferior */
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

/* --- Barra de Navegação --- */
.top-nav {
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--nav-height);
    background-color: var(--white-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    z-index: 900;
}
.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
}
.nav-default-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* --- Busca Mobile (In-Nav) --- */
.nav-search-content-mobile {
    display: none; /* Escondido por padrão */
    width: 100%;
    gap: 10px;
}
.top-nav.search-active .nav-default-content {
    display: none; /* Esconde conteúdo padrão quando a busca está ativa */
}
.top-nav.search-active .nav-search-content-mobile {
    display: flex; /* Mostra a busca */
}

/* --- Busca Geral --- */
.search-container-desktop { display: none; }
.search-form { display: flex; width: 100%; }
.search-input {
    flex-grow: 1;
    border: 1px solid var(--border-color);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    background: #f9f9f9;
}
.search-form .search-btn { display: none; }
.search-input:focus { outline: none; border-color: var(--primary-color); }
.nav-search-content-mobile .search-input {
    border-radius: 20px;
}

/* --- Ícones da Navegação --- */
.nav-icons { display: flex; align-items: center; }
.desktop-nav-icons { display: none; }
.mobile-only { display: block; }
.icon-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--text-color);
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}
.icon-btn span { font-size: 0.9rem; font-weight: 500; }
.cart-badge {
    position: absolute; top: 5px; right: 5px; background-color: var(--primary-color);
    color: var(--white-color); font-size: 0.7rem; font-weight: 600;
    border-radius: 50%; width: 18px; height: 18px; display: flex;
    align-items: center; justify-content: center;
}
.profile-menu { position: relative; }
.profile-dropdown {
    display: none; position: absolute; top: 100%; right: 0; background: var(--white-color);
    border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 180px;
    overflow: hidden; z-index: 1000;
}
.profile-menu:hover .profile-dropdown { display: block; }
.profile-dropdown a { display: block; padding: 12px 15px; text-decoration: none; color: var(--text-color); font-size: 0.9rem; }
.profile-dropdown a:hover { background-color: var(--bg-color); }

/* --- Header com Banner (visível apenas em mobile por padrão) --- */
.main-header {
    background-color: var(--white-color);
    text-align: center;
    padding: 15px 0;
}
.banner-image {
    max-height: 120px;
    width: auto;
    max-width: 100%;
}

/* --- Conteúdo Principal e Cards de Produto --- */
.main-content { padding: 20px 15px; display: block; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.product-card {
    background-color: var(--white-color); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer;
}
.product-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.product-image-container { position: relative; width: 100%; padding-top: 100%; }
.product-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.product-info { padding: 12px; text-align: left; flex-grow: 1; }
.product-name {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 5px;
    /* height: 2.7em; */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.product-price { font-size: 1rem; font-weight: 600; color: var(--primary-color); }
.stock-tag {
    position: absolute; top: 10px; left: 10px; background: rgba(231, 76, 60, 0.8);
    color: var(--white-color); padding: 3px 8px; border-radius: 4px;
    font-size: 0.7rem; font-weight: 500;
}

/* --- Estados Vazios, Modais, Carrinho, etc. --- */
.empty-state{text-align:center;padding:50px 20px;color:var(--light-text-color)}.empty-state i{font-size:3rem;margin-bottom:15px;opacity:.5}.empty-state p{font-size:1rem;margin-bottom:5px}.empty-state .search-term{font-size:.9rem;font-style:italic}.btn-primary{background-color:var(--primary-color);color:var(--white-color);padding:10px 20px;border-radius:5px;text-decoration:none;display:inline-block;margin-top:15px}.cart-panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:1098;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}.cart-panel-overlay.open{opacity:1;visibility:visible}.cart-panel{position:fixed;top:0;right:-100%;width:100%;max-width:380px;height:100%;background-color:var(--white-color);box-shadow:-5px 0 15px rgba(0,0,0,.15);z-index:1099;transition:right .4s ease-in-out;display:flex;flex-direction:column}.cart-panel.open{right:0}.cart-header{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid var(--border-color)}.cart-header h3{font-size:1.1rem}.close-btn{background:0 0;border:none;font-size:1.8rem;cursor:pointer;color:var(--light-text-color)}.cart-content{flex-grow:1;overflow-y:auto;padding:15px}.empty-cart-state{text-align:center;padding:50px 0;color:var(--light-text-color)}.empty-cart-state i{font-size:3rem;margin-bottom:15px;opacity:.5}.empty-cart-state p{font-size:1.1rem;margin-bottom:5px;color:var(--text-color)}.cart-item{display:flex;gap:15px;align-items:center;margin-bottom:15px}.cart-item-img{width:70px;height:70px;object-fit:cover;border-radius:8px}.cart-item-details{flex-grow:1}.cart-item-name{display:block;font-size:.9rem;font-weight:500;margin-bottom:5px}.cart-item-price{font-size:.9rem;color:var(--light-text-color)}.cart-item-controls{display:flex;align-items:center;gap:5px;margin-top:5px}.quantity-input{width:50px;text-align:center;border:1px solid var(--border-color);border-radius:4px;padding:3px}.update-qty-btn{padding:3px 8px;font-size:.7rem;border:1px solid var(--border-color);background:var(--bg-color);border-radius:4px;cursor:pointer}.remove-item-btn{color:#c0392b;text-decoration:none;font-size:1.1rem}.cart-footer{padding:15px;border-top:1px solid var(--border-color);background-color:#fafafa}.coupon-form{display:flex;margin-bottom:15px}.coupon-input{flex-grow:1;border:1px solid var(--border-color);padding:8px 10px;border-radius:4px 0 0 4px;text-transform:uppercase}.coupon-btn{border:none;background:var(--text-color);color:var(--white-color);padding:0 15px;border-radius:0 4px 4px 0;cursor:pointer;font-weight:500}.coupon-applied{display:flex;justify-content:space-between;align-items:center;background:#e9f7ef;color:#27ae60;padding:8px 12px;border-radius:4px;font-size:.8rem;margin-bottom:15px}.remove-coupon-btn{background:0 0;border:none;cursor:pointer;color:#27ae60}.coupon-message{padding:8px;border-radius:4px;font-size:.8rem;text-align:center;margin-bottom:10px}.coupon-message.success{background-color:#e9f7ef;color:#27ae60}.coupon-message.error{background-color:#fbe9e7;color:#c0392b}.summary-line{display:flex;justify-content:space-between;margin-bottom:8px;font-size:.9rem}.summary-line.discount{color:#27ae60}.summary-line.total{font-size:1.1rem;font-weight:600;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border-color)}.btn-checkout{width:100%;background-color:#27ae60;color:var(--white-color);padding:12px;border:none;border-radius:5px;font-size:1rem;font-weight:600;cursor:pointer;margin-top:15px}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:2000;display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto}.modal-content{background:var(--white-color);border-radius:12px;box-shadow:0 5px 20px rgba(0,0,0,.2);width:100%;max-width:420px;position:relative;padding:30px;animation:zoomIn .3s ease}@keyframes zoomIn{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.close-modal-btn{position:absolute;top:10px;right:15px;background:0 0;border:none;font-size:1.8rem;color:var(--light-text-color);cursor:pointer}.modal-tabs{display:flex;border-bottom:1px solid var(--border-color);margin-bottom:20px}.tablink{flex:1;padding:12px;border:none;background:0 0;cursor:pointer;font-size:1rem;font-weight:500;color:var(--light-text-color);position:relative}.tablink.active{color:var(--primary-color)}.tablink.active::after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:2px;background-color:var(--primary-color)}.tabcontent{display:none}.modal-title{text-align:center;font-size:1.5rem;margin-bottom:5px}.modal-subtitle{text-align:center;font-size:.9rem;color:var(--light-text-color);margin-bottom:25px}.form-group{margin-bottom:15px}.form-group label{display:block;font-size:.8rem;font-weight:500;margin-bottom:5px}.form-group input[type=password],.form-group input[type=text]{width:100%;padding:10px;border:1px solid var(--border-color);border-radius:5px;font-size:.9rem}.form-group-inline{display:flex;align-items:center;font-size:.9rem}.form-group-inline input{margin-right:8px}.btn-modal-action{width:100%;padding:12px;border:none;border-radius:5px;background:var(--primary-color);color:var(--white-color);font-size:1rem;font-weight:600;cursor:pointer;margin-top:15px}.alert.error{background:#fbe9e7;color:#c0392b;padding:10px;border-radius:5px;text-align:center;margin-bottom:15px;font-size:.9rem}.product-modal-content{max-width:800px}.product-modal-body{display:flex;flex-direction:column;gap:20px}.product-modal-image{width:100%;height:250px;border-radius:8px;overflow:hidden}.product-modal-image img{width:100%;height:100%;object-fit:cover}.product-modal-details h2{font-size:1.8rem;margin-bottom:10px}.product-modal-details p{font-size:.9rem;color:var(--light-text-color);margin-bottom:20px;line-height:1.6}.modal-price-stock{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.stock-info{font-size:.9rem;color:var(--light-text-color)}.add-to-cart-modal{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;padding:12px;font-size:1rem;font-weight:600;background-color:var(--primary-color);color:var(--white-color);border-radius:5px;text-decoration:none}.bottom-nav{position:fixed;bottom:0;left:0;width:100%;height:60px;background-color:var(--white-color);box-shadow:0 -2px 8px rgba(0,0,0,.07);display:flex;justify-content:space-around;z-index:999}.bottom-nav-link{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-grow:1;text-decoration:none;color:var(--light-text-color);background:0 0;border:none;cursor:pointer;position:relative}.bottom-nav-link.active{color:var(--primary-color)}.bottom-nav-link i{font-size:1.2rem;margin-bottom:3px}.bottom-nav-link span{font-size:.7rem}.bottom-nav-link .cart-badge{top:3px;right:calc(50% - 22px)}.profile-menu-mobile{position:relative;flex-grow:1;display:flex}.profile-menu-mobile .bottom-nav-link{width:100%}.profile-dropdown-mobile{position:absolute;bottom:110%;left:50%;transform:translateX(-50%);background:var(--white-color);border-radius:8px;box-shadow:0 -2px 15px rgba(0,0,0,.1);width:200px;visibility:hidden;opacity:0;transition:all .2s}.profile-menu-mobile:focus-within .profile-dropdown-mobile{visibility:visible;opacity:1;bottom:100%}.profile-dropdown-mobile .dropdown-header{padding:12px 15px;font-weight:600;border-bottom:1px solid var(--border-color)}.profile-dropdown-mobile a{display:flex;align-items:center;gap:10px;padding:12px 15px;text-decoration:none;color:var(--text-color);font-size:.9rem}.profile-dropdown-mobile a:hover{background-color:var(--bg-color)}.profile-dropdown-mobile a i{font-size:1rem;color:var(--light-text-color)}

/* --- Estilos para Desktop (a partir de 768px) --- */
@media (min-width: 768px) {
    body { padding-bottom: 0; }
    .logo { margin-right: auto; }
    .nav-default-content { gap: 20px; }
    .mobile-only { display: none; }
    .desktop-nav-icons { display: flex; gap: 15px; }
    .search-container-desktop {
        display: block;
        width: 100%;
        max-width: 450px;
    }
    .search-form .search-input { border-radius: 20px 0 0 20px; }
    .search-form .search-btn { display: block; border: 1px solid var(--primary-color); background: var(--primary-color); color: var(--white-color); cursor: pointer; border-left: none; padding: 0 15px; border-radius: 0 20px 20px 0; }

    /* --- MODIFICAÇÃO: Oculta o header com o banner no desktop --- */
    .main-header {
        display: none;
    }

    .main-content { padding: 40px 15px; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 25px; }
    .bottom-nav { display: none; }
    
    .product-modal-body { flex-direction: row; }
    .product-modal-image { width: 45%; }
    .product-modal-details { width: 55%; }
}