/* ==========================================================================
   1. CONFIGURAÇÃO GERAL E VARIÁVEIS DE COR
   ========================================================================== */
:root {
    --primary-color: #F95484;
    --primary-hover-color: #E63A6E;
    --text-color: #333333;
    --background-color: #F4F4F4;
    --background-light: #FFFFFF;
    --secondary-color: #E9E9E9;
    --headings-font: 'Lora', serif;
    --body-font: 'Poppins', sans-serif;
}
body {
    background-color: var(--background-color);
    font-family: var(--body-font);
    color: var(--text-color);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--headings-font);
    font-weight: 700;
    color: var(--text-color);
}
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: var(--primary-hover-color);
}

/* ==========================================================================
   2. HEADER
   ========================================================================== */
.header-top-bar { background-color: var(--primary-color); }
.header-main { background-color: var(--background-light); border-bottom: 1px solid var(--secondary-color); }
.main-logo { max-height: 60px; width: auto; }
.main-search-bar .form-control:focus { box-shadow: 0 0 0 0.25rem rgba(249, 84, 132, 0.25); border-color: var(--primary-color); }
.main-search-bar .btn { background-color: var(--primary-color); border-color: var(--primary-color); }
.header-icons .cart-count { background-color: var(--primary-color); }
.main-navbar { background-color: var(--background-light); }
.main-navbar .navbar-nav .nav-link:hover, .main-navbar .navbar-nav .dropdown:hover > .nav-link { border-bottom-color: var(--primary-color); color: var(--primary-color); }
.mega-menu-column .nav-link:hover { color: var(--primary-color) !important; }

/* ==========================================================================
   3. CUSTOMIZAÇÃO DE COMPONENTES BOOTSTRAP
   ========================================================================== */
.btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; font-weight: 600; }
.list-group-item.active { background-color: var(--primary-color); border-color: var(--primary-color); }
.pagination .page-item.active .page-link { background-color: var(--primary-color); border-color: var(--primary-color); }
.pagination .page-link { color: var(--primary-color); }
.text-primary { color: var(--primary-color) !important; }

/* ==========================================================================
   4. PÁGINA DE CATEGORIA E CARDS DE PRODUTO
   ========================================================================== */
.product-card { background-color: var(--background-light); border: 1px solid var(--secondary-color) !important; }
.product-image-container { position: relative; }
.oferta-badge {
    position: absolute; top: 15px; left: 15px;
    background-color: var(--primary-hover-color);
    color: white; width: 50px; height: 50px;
    border-radius: 50%; font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; z-index: 10;
    display: flex; justify-content: center; align-items: center; line-height: 1;
}

/* ==========================================================================
   5. PÁGINA DE PRODUTO (GALERIA DE IMAGENS)
   ========================================================================== */
.thumbnail-gallery {
    display: flex;
    gap: 0.5rem;
}
.thumbnail-item img {
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s ease-in-out;
    width: 80px; /* Tamanho fixo para as miniaturas */
    height: 80px;
    object-fit: cover;
}
.thumbnail-item img:hover {
    border-color: var(--secondary-color);
}
.thumbnail-item img.active-thumb {
    border-color: var(--primary-color);
}

/* ==========================================================================
   6. FOOTER E OUTROS
   ========================================================================== */
.main-footer { background-color: var(--text-color); color: rgba(255, 255, 255, 0.75); }
.main-footer p { color: rgba(255, 255, 255, 0.75); }
.main-footer h6 { color: #fff; }
.main-footer .accent-hr { background-color: var(--primary-color); }
.main-footer a { color: rgba(255, 255, 255, 0.75); }
.whatsapp-float-button { position: fixed; width: 60px; height: 60px; bottom: 30px; right: 30px; background-color: #25D366; color: #FFF; border-radius: 50px; text-align: center; font-size: 30px; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25); z-index: 1000; display: flex; justify-content: center; align-items: center; }
.whatsapp-float-button:hover { transform: scale(1.1); color: #FFF; }

/* ==========================================================================
   7. AJUSTES PARA O MENU MOBILE
   ========================================================================== */
@media (max-width: 991.98px) {
    .main-navbar .navbar-collapse { width: 100%; max-height: 80vh; overflow-y: auto; padding: 1rem; }
    .main-navbar .navbar-nav { align-items: flex-start; }
    .main-navbar .nav-link { padding: 0.75rem 0; width: 100%; }
    .main-navbar .dropdown .dropdown-menu { display: none !important; }
    .d-lg-none .dropdown-item { padding: .5rem 0; font-weight: 500; }
}