/* 
   As variáveis de cores (:root) são definidas dinamicamente no header.php 
   com base no banco de dados. Aqui definimos estilos gerais.
*/

* {
    -webkit-tap-highlight-color: transparent; /* Remove o flash azul ao clicar no mobile */
}

html {
    scroll-behavior: smooth; /* Rolagem suave ao clicar em categorias */
}

body {
    background-color: var(--cor-fundo-principal, #f2f2f2); /* Fundo Cinza */
    color: var(--cor-card-texto, #333); /* Texto Padrão (Usa o mesmo dos cards para consistência) */
    font-family: var(--fonte-principal, 'Montserrat', sans-serif);
}

/* Botões Padrão */
.btn-primary {
    background-color: var(--cor-botoes, #c3281e);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: opacity 0.3s;
    font-weight: bold;
}

.btn-primary:hover {
    opacity: 0.9;
}

/* Layout de Slider Horizontal (Produtos e Categorias) */
.horizontal-scroll {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding: 20px 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* Suavidade no iOS */
    scrollbar-width: none; /* Firefox */
    justify-content: flex-start; /* Garante que itens não estiquem ou centralizem sozinhos */
}

.horizontal-scroll::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Cards de Produtos (Adaptado ao Layout Solicitado) */
.product-card {
    flex: 0 0 220px; /* Mais estreito (fixo independente da qtd) */
    width: 220px;    /* Garante a largura fixa */
    scroll-snap-align: start;
    background-color: var(--cor-card-produto, #ffffff); /* Card Branco */
    border-radius: 8px;
    padding: 0; /* Padding removido para imagem encostar na borda se quiser, ou ajuste */
    overflow: hidden;
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); Removido para ficar mais clean como no exemplo */
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none; /* Remove sublinhado do link */
    color: var(--cor-card-texto, #333);
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-image {
    width: 100%;
    height: 320px; /* Mais alto para dar o aspecto 9:16 */
    object-fit: contain; /* Ajuste para mostrar a camisa inteira */
    background-color: var(--cor-card-produto, #ffffff); /* Mesmo fundo do card */
}

.product-info {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left; /* Alinhamento à esquerda */
}

.product-title {
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: 600; /* Peso solicitado: Medium/SemiBold */
    color: var(--cor-card-texto, #333);
    min-height: 40px; /* Altura mínima para alinhar títulos */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limita a 2 linhas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-price-old {
    text-decoration: line-through;
    color: #999;
    font-size: 0.8rem;
}

.product-price {
    font-size: 1.2rem;
    font-weight: 800; /* Peso solicitado: ExtraBold */
    color: var(--cor-card-texto, #333);
    margin-bottom: 5px;
}

.product-installments {
    font-size: 0.8rem;
    color: #666;
}

/* --- Banners / Slider --- */
.banner-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 400px; /* Ajuste conforme altura das imagens */
    overflow: hidden;
    margin-bottom: 30px;
    background: #000;
}

.banner-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-slide.active {
    opacity: 1;
    z-index: 1;
}

.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .banner-container {
        height: 220px; /* Altura menor para celulares */
        margin-bottom: 20px;
    }
}

/* --- Categorias (Bolinhas) --- */
.categories-section {
    /* Agora usa .horizontal-scroll, mas mantemos ajustes específicos se precisar */
    justify-content: flex-start; /* Alinha a esquerda para rolar */
    padding: 10px 20px;
    margin-bottom: 40px;
}

.category-item {
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s;
    text-decoration: none;
    color: #333;
    flex: 0 0 100px; /* Tamanho fixo no slider */
    scroll-snap-align: center;
}

.category-item:hover {
    transform: scale(1.1);
}

.category-thumb {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--cor-botoes);
    margin-bottom: 10px;
    display: block;
}

.section-title {
    font-size: 1.5rem;
    margin: 30px 0 20px 0;
    padding-bottom: 5px;
    /* border-bottom: 2px solid #eee; Removido para ficar mais limpo */
    color: var(--cor-titulos-secao, #c3281e); /* Cor configurável */
    margin-left: 20px; /* Alinhamento com o padding do container */
    margin-right: 20px;
    font-weight: 800; /* Mais grosso e bonito */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Top Bar --- */
.top-bar {
    width: 100%;
    padding: 8px 20px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
}

/* --- Sidebars (Menu e Carrinho) --- */
.sidebar-panel {
    position: fixed;
    top: 0;
    width: 300px; /* Largura do menu */
    height: 100%;
    background: #fff;
    z-index: 1002;
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

.sidebar-panel.left { left: 0; transform: translateX(-100%); }
.sidebar-panel.right { right: 0; transform: translateX(100%); }
.sidebar-panel.active { transform: translateX(0); }

.sidebar-header { padding: 15px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; background: var(--cor-header-bg); color: var(--cor-header-texto); }
.sidebar-content { flex: 1; overflow-y: auto; padding: 0; }
.btn-close { background: none; border: none; color: inherit; font-size: 1.2rem; cursor: pointer; }

/* Accordion Menu */
.menu-accordion { border-bottom: 1px solid #eee; }
.accordion-btn { width: 100%; padding: 15px; background: none; border: none; text-align: left; font-size: 1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: #333; font-weight: 500; }
.accordion-content { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.3s ease-out; 
    background: #f9f9f9; 
}
.accordion-content.open { border-top: 1px solid #eee; }

.btn-ver-produtos {
    display: inline-block;
    padding: 8px 20px;
    background-color: var(--cor-botoes);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
}

/* Carrinho */
.cart-item { display: flex; gap: 10px; padding: 15px; border-bottom: 1px solid #eee; align-items: center; }
.cart-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; }
.cart-item-info { flex: 1; }
.cart-item-title { font-size: 0.9rem; font-weight: bold; margin-bottom: 5px; display: block; }
.cart-item-meta { font-size: 0.8rem; color: #666; }
.cart-remove { color: #ef4444; cursor: pointer; font-size: 0.9rem; border: none; background: none; padding: 5px; }

.sidebar-footer-cart { padding: 20px; border-top: 1px solid #eee; background: #f9f9f9; }
.btn-checkout {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: var(--cor-botao-carrinho-bg, #c3281e);
    color: var(--cor-botao-carrinho-texto, #ffffff);
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Botão Comprar Agora (Produto) */
.btn-comprar-agora {
    background-color: var(--cor-botao-carrinho-bg, #c3281e);
    color: var(--cor-botao-carrinho-texto, #ffffff);
    border: none;
    cursor: pointer;
    transition: opacity 0.3s;
    width: 100%; 
    padding: 15px; 
    font-size: 1.1rem; 
    text-transform: uppercase; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px; 
    border-radius: 8px;
    margin-top: 10px; /* Espaço entre botões */
}
.btn-comprar-agora:hover { opacity: 0.9; filter: brightness(1.1); }

/* Grid Categoria (Responsivo: 2 por linha Mobile / Auto Desktop) */
.category-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; /* Mobile: 2 colunas fixas */
    gap: 10px; 
    padding: 10px; 
    width: 100%;
}

@media (min-width: 768px) {
    .category-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Desktop: Preenche conforme cabe */
        gap: 20px;
        padding: 20px;
    }
}

/* Ajuste específico para cards dentro da grade (Sobrescreve o fixo do slider) */
.category-grid .product-card {
    width: 100% !important; /* Ocupa a largura da coluna da grid */
    flex: none !important;
    height: 100%; /* Garante altura igual */
}

.category-grid .product-image {
    height: auto !important; /* Altura automática para não distorcer */
    aspect-ratio: 3/4; /* Mantém proporção bonita (Retrato) */
    object-fit: contain;
    background: #fff;
}

/* Auth Pages (Login/Registro) */
.auth-container { width: 100%; max-width: 500px; margin: 0 auto; padding: 40px 20px; }
.auth-title { text-align: center; margin-bottom: 20px; font-size: 1.5rem; color: #333; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; color: var(--cor-card-texto, #666); font-size: 0.9rem; opacity: 0.9; }
.form-control { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; }
.btn-auth { width: 100%; padding: 12px; background-color: var(--cor-botoes); color: #fff; border: none; border-radius: 4px; font-size: 1rem; font-weight: bold; cursor: pointer; }
.btn-auth:hover { opacity: 0.9; }
.auth-link { display: block; text-align: center; margin-top: 15px; font-size: 0.9rem; color: #666; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

/* Header Profile Button */
.header-right a.btn-icon { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Perfil Layout */
.profile-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: calc(100vh - 60px); /* Altura total menos header */
}

@media(min-width: 768px) {
    .profile-wrapper { flex-direction: row; }
}

.profile-sidebar {
    width: 100%;
    background-color: var(--cor-card-produto, #ffffff);
    color: var(--cor-card-texto, #333);
    border-bottom: 1px solid #eee;
    padding: 20px;
}

@media(min-width: 768px) {
    .profile-sidebar { width: 250px; border-bottom: none; border-right: 1px solid #eee; min-height: 100%; }
}

.profile-menu-link {
    display: block;
    padding: 15px 0;
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid #f5f5f5;
    font-weight: 500;
}
.profile-menu-link:hover, .profile-menu-link.active { color: var(--cor-botoes); }
.profile-content { flex: 1; padding: 20px; background-color: var(--cor-card-produto, #ffffff); color: var(--cor-card-texto, #333); }

/* Animação para conteúdo carregado via AJAX (Ex: Abas do Perfil) */
.profile-content {
    transition: opacity 0.2s ease-in-out;
}

/* Pedidos Styles (Frontend) */
.order-tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.order-tab { padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; cursor: pointer; border: 1px solid transparent; background: #f9f9f9; color: #666; transition: 0.3s; }
.order-tab:hover { background: #eee; }
.order-tab.active { background: var(--cor-botoes); color: #fff; font-weight: bold; }

.order-card { border: 1px solid #eee; border-radius: 8px; padding: 15px; margin-bottom: 15px; transition: box-shadow 0.3s; background: #fff; }
.order-card:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

.order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f5f5f5; }
.order-id { font-weight: bold; color: #333; }
.order-date { font-size: 0.85rem; color: #888; }

.order-status { font-size: 0.8rem; font-weight: bold; padding: 4px 10px; border-radius: 12px; text-transform: uppercase; }
.status-pendente { background-color: #fee2e2; color: #ef4444; }
.status-concluido { background-color: #dcfce7; color: #10b981; }
.status-enviado { background-color: #e0f2fe; color: #0284c7; } /* Azul para Enviado */
.status-cancelado { background-color: #f3f4f6; color: #6b7280; }

.order-items { display: flex; flex-direction: column; gap: 10px; }
.order-item { display: flex; gap: 15px; align-items: center; }
.order-item-img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid #eee; }
.order-item-details { flex: 1; }
.order-item-name { font-size: 0.95rem; font-weight: 600; color: #333; display: block; }
.order-item-meta { font-size: 0.85rem; color: #666; }

.order-footer { margin-top: 15px; padding-top: 10px; border-top: 1px solid #f5f5f5; display: flex; justify-content: space-between; align-items: center; }
.order-total { font-size: 1.1rem; font-weight: bold; color: #333; }
.btn-details { color: var(--cor-botoes); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.btn-details:hover { text-decoration: underline; }

/* Search Box */
.search-expandable {
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 5px;
}

.search-input {
    width: 0;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 4px; /* Bordas menos redondas */
    font-size: 0.9rem;
    transition: all 0.3s;
    opacity: 0;
    height: 35px;
}

.search-expandable.active .search-input {
    width: 200px;
    padding: 0 10px;
    border: 1px solid #ddd;
    background: #fff;
    opacity: 1;
    margin-right: 5px;
}

.search-results {
    position: absolute;
    top: 100%;
    right: 0;
    width: 300px;
    background: #fff;
    border-radius: 4px; /* Bordas menos redondas */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-top: 10px;
    display: none;
    z-index: 1100;
    max-height: 400px;
    overflow-y: auto;
}

@media(max-width: 768px) {
    .search-expandable.active .search-input { width: 150px; }
    .search-results { width: 280px; right: -50px; }
}

/* --- Form Styles (Frontend) --- */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 500; color: #333; }
.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    background-color: #fff;
}
.form-control:focus { border-color: var(--cor-botoes); outline: none; }

/* --- Checkout Layout --- */
.checkout-wrapper {
    max-width: 100%; /* Mobile: Ocupa toda a largura */
    margin: 0 auto;
    padding: 20px 15px; /* Mobile: Espaçamento interno seguro */
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media(min-width: 768px) {
    .checkout-wrapper {
        max-width: 95%;
        padding: 40px 20px; /* Desktop: Restaura o espaçamento original */
    }
}

@media(min-width: 992px) {
    .checkout-grid {
        grid-template-columns: 1.5fr 1fr; /* Esquerda maior que direita */
    }
}

.checkout-title {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #333;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

.checkout-card {
    background: var(--cor-card-produto, #ffffff);
    color: var(--cor-card-texto, #333);
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.saved-address {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #eee;
}

.btn-link {
    background: none;
    border: none;
    color: var(--cor-botoes);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    margin-top: 10px;
    font-size: 0.9rem;
}

.btn-secondary {
    background: #333;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

/* Frete Options */
.frete-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: 0.2s;
}
.frete-option:hover { border-color: #ccc; background: #fcfcfc; }
.frete-option input { margin-right: 10px; }

/* Summary Card (Direita) */
.summary-card {
    background: var(--cor-card-produto, #ffffff);
    color: var(--cor-card-texto, #333);
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 25px;
    position: sticky;
    top: 80px; /* Fica fixo ao rolar */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.summary-items {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.summary-item { display: flex; gap: 15px; margin-bottom: 15px; }
.summary-item img { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; border: 1px solid #eee; }
.summary-item-name { font-weight: 600; font-size: 0.9rem; line-height: 1.2; margin-bottom: 3px; }
.summary-item-meta { font-size: 0.8rem; color: #777; }
.summary-item-price { font-weight: bold; font-size: 0.9rem; margin-top: 3px; }

.summary-totals { margin-top: 20px; }
.summary-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.95rem; color: inherit; opacity: 0.8; }
.summary-row.total { font-size: 1.3rem; font-weight: bold; color: #000; border-top: 1px solid #eee; padding-top: 15px; margin-top: 15px; }
.summary-row.discount { color: #10b981; }

.btn-checkout-final {
    width: 100%;
    padding: 15px;
    background-color: var(--cor-botoes); /* Usa cor configurada */
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 20px;
    transition: opacity 0.3s;
}
.btn-checkout-final:hover { opacity: 0.9; }
.btn-checkout-final:disabled { background-color: #ccc; cursor: not-allowed; }

/* Checkout - Card Form Enhancements */
.card-number-wrapper {
    position: relative;
}
.card-brand-logo {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    height: 25px;
    width: auto;
    opacity: 0;
    transition: opacity 0.3s;
}


/* --- Paginação (Bullets) - Estilo Global --- */
.vtex-store-components-3-x-swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.vtex-store-components-3-x-swiperBullet {
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.1);
}

.vtex-store-components-3-x-swiperBullet--active {
    background-color: var(--cor-botoes);
    transform: scale(1.2);
}

/* Ajuste específico para Banners (Overlay no fundo) */
.banner-pagination {
    position: absolute;
    bottom: 20px;
    width: 100%;
}

/* Ajuste de cor para ficar visível em cima da imagem do banner */
.banner-pagination .vtex-store-components-3-x-swiperBullet {
    background-color: rgba(255, 255, 255, 0.6);
    border: none;
}
.banner-pagination .vtex-store-components-3-x-swiperBullet--active {
    background-color: var(--cor-botoes);
    opacity: 1;
}

/* Quantity Controls in Checkout */
.qty-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 5px 0;
    font-size: 0.9rem;
}
.qty-btn { background: #eee; border: none; width: 24px; height: 24px; border-radius: 4px; cursor: pointer; font-weight: bold; }
.qty-btn:hover { background: #ddd; }

/* Toast Notification Global */
.toast-notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background-color: #333;
    color: #fff;
    padding: 15px 25px;
    border-radius: 8px; /* Mais retangular */
    box-shadow: 0 10px 25px rgba(0,0,0,0.3); /* Sombra mais forte */
    font-size: 1rem;
    z-index: 2000;
    opacity: 0;
    transition: all 0.4s ease;
    font-weight: 600;
    min-width: 300px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.1);
}
.toast-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Color Selector Styles */
.color-box {
    cursor: pointer;
    user-select: none;
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: 0.2s;
    font-weight: bold;
    margin-bottom: 5px;
}
.color-selector:checked + .color-box {
    background-color: #333;
    color: #fff;
    border-color: #333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.color-box:hover { border-color: #999; }
}

/* Pagination Styles */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin: 40px 0;
    flex-wrap: wrap;
}
.pagination a, .pagination span {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid #ddd;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: 0.2s;
    margin-bottom: 5px;
}
.pagination a:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}
.pagination span.current {
    background-color: var(--cor-botoes);
    color: #fff;
    border-color: var(--cor-botoes);
    font-weight: bold;
    cursor: default;
}

/* "Show All" Card on Homepage */
.show-all-card {
    flex: 0 0 220px;
    width: 220px;
    scroll-snap-align: start;
    background-color: var(--cor-card-produto, #ffffff);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, background-color 0.2s;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: var(--cor-card-texto, #333);
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--cor-botoes, #c3281e);
}
.show-all-card:hover {
    transform: translateY(-5px);
    background-color: #fcfcfc;
}
.show-all-icon {
    font-size: 2.5rem;
    color: var(--cor-botoes, #c3281e);
    margin-bottom: 15px;
    transition: transform 0.3s;
}
.show-all-card:hover .show-all-icon {
    transform: translateX(5px);
}
.show-all-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cor-botoes, #c3281e);
}

/* Botão Ver Tudo (Estilo Preenchido e Centralizado) */
.btn-ver-tudo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--cor-botoes);
    color: #fff;
    padding: 8px 25px; /* Reduzido o padding */
    border-radius: 50px; /* Formato Pill (Arredondado) */
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem; /* Reduzido o tamanho da fonte */
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.btn-ver-tudo:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    filter: brightness(1.1);
}
.btn-ver-tudo i {
    transition: transform 0.3s;
}
.btn-ver-tudo:hover i {
    transform: translateX(5px);
}

/* WhatsApp Flutuante */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whatsapp-float a {
    width: 60px;
    height: 60px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 35px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.3s;
}

.whatsapp-float a:hover {
    transform: scale(1.1);
}

.btn-close-wa {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Animação Suave de Transição de Página (Global) */
body {
    animation: page-fade-in 0.4s ease-out;
}

@keyframes page-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Rodapé --- */
.site-footer {
    background-color: var(--cor-card-produto, #ffffff);
    color: var(--cor-card-texto, #777);
    text-align: center;
    padding: 15px;
    border-top: 1px solid #eee;
    font-size: 0.9rem;
}

/* Detalhes do Produto - Container */
.product-detail-wrapper {
    background-color: var(--cor-card-produto, #ffffff);
    color: var(--cor-card-texto, #333);
}