/* ========== Variáveis e Reset ========== */
/* Variáveis CSS para o Esquema de Cores */
:root {
--color-black: #ffffff;
--color-white: #0e0d0d;
--color-yellow: #ff0000; /* Amarelo Ouro - para destacar */
--color-dark-gray: #ffffff;
--color-light-gray: #f4f4f4;
}
/* Reset Básico e Estilos Globais */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
background-color: var(--color-black);
color: var(--color-white);
line-height: 1.6;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
a {
color: var(--color-yellow);
text-decoration: none;
transition: color 0.3s;
}
a:hover {
color: var(--color-white);
}
/* --- FONTE EXTERNA IMPACTANTE --- */
/* (Recomendado: Adicionar esta fonte no seu do HTML)
*/
/* Aplica a fonte impactante (ex: Bebas Neue ou similar) */
.product-title, .product-price, .buy-now-btn, .add-to-cart-btn-large {
font-family: 'Bebas Neue', Impact, sans-serif;
letter-spacing: 1px; /* Espaçamento para o visual de impacto */
}
/* Título com Destaque */
.product-title {
font-size: 2.5em; /* Aumenta o tamanho */
text-transform: uppercase;
/* Efeito de sombra (deixa o texto mais "vibrante") */
text-shadow:
1px 1px 0 var(--color-yellow), /* Sombra da sua cor primária */
-1px -1px 0 #000; /* Sombra de profundidade escura */
}
/* Preço com Destaque */
.product-price {
font-size: 3.5em; /* Maior ainda! */
color: rgb(255, 57, 84); /* Sua cor de destaque */
text-shadow:
2px 2px 5px rgba(255, 57, 84, 0.5); /* Sombra de brilho */
}
/* ========== Header / Navegação ========== */
header {
/* Define a posição para que o menu mobile absoluto não se mova no scroll */
position: relative;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
}
/* Ajuste do logo */
.logo {
display: flex; /* Para centralizar a imagem dentro do seu container */
justify-content: center;
align-items: center;
max-width: 180px; /* Largura máxima para o container do logo no desktop */
height: 110px; /* Altura para o container do logo no desktop */
}
.logo-img {
max-width: 80%; /* Garante que a imagem não ultrapasse o container */
max-height: 100%; /* Garante que a imagem não ultrapasse o container */
object-fit: contain; /* Redimensiona a imagem para caber sem cortar */
}
/* --- POSICIONAMENTO DA TOCA DE PAPAI NOEL (FIX DESKTOP) --- */
.santa-hat-icon {
position: absolute;
width: 50px; /* Tamanho do ícone */
height: auto;
top: -4px; /* Move para cima do topo da logo */
left:24%; /* Posiciona no canto superior direito da logo */
transform: translateX(-50%) rotate(5deg); /* Ajusta centralização e inclina levemente */
z-index: 100; /* Garante que fique por cima da logo e da navegação */
}
/* Lado esquerdo: hambúrguer (só mobile) */
.header-left-actions {
width: 150px;
visibility: hidden; /* Inicialmente invisível no desktop */
display: flex;
align-items: center;
}
.menu-toggle {
display: none;
background: none;
border: none;
color: var(--color-yellow);
font-size: 1.5em;
cursor: pointer;
}
/* Menu desktop */
.desktop-nav {
flex-grow: 1;
display: flex;
justify-content: center;
}
.desktop-nav .menu {
list-style: none;
display: flex;
gap: 80px;
}
.desktop-nav .menu li a {
color: var(--color-white);
font-weight: bold;
padding: 5px 0;
}
.desktop-nav .menu li a:hover {
color: var(--color-yellow);
}
/* Lado direito: carrinho */
.header-right-actions {
width: 150px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.checkout-link {
font-weight: bold;
display: flex;
align-items: center;
gap: 5px;
}
/* Menu mobile (bandeja) */
.mobile-nav {
display: none;
background-color: var(--color-dark-gray);
width: 100%;
position: absolute;
top: 70px;
left: 0;
padding: 10px 0;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
z-index: 900;
}
.mobile-nav.active {
display: block;
}
.menu-mobile {
list-style: none;
padding: 0;
}
.menu-mobile li a {
display: block;
padding: 15px 20px;
color: var(--color-white);
border-bottom: 1px solid #333;
}
.menu-mobile li a:hover {
background-color: #333;
color: var(--color-yellow);
}
/* ========== Conteúdo / Produtos ========== */
main {
padding-top: 50px;
padding-bottom: 50px;
}
h1 {
color: var(--color-yellow);
text-align: center;
margin-bottom: 10px;
}
.subtitle {
text-align: center;
color: var(--color-light-gray);
margin-bottom: 40px;
}
/* ========== Conteúdo / Produtos ========== */
/* ... (outros estilos de Conteúdo / Produtos) ... */
.product-grid {
/* Regra original, mantendo o Grid 3x3 */
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
/* === CORREÇÃO DE PRIORIDADE: Adicione isto se a grade continuar quebrando! === */
/* Se a quebra de linha persistir, descomente as duas linhas abaixo: */
/* display: grid !important; */
/* grid-template-columns: repeat(3, 1fr) !important; */
}
.product-card {
background-color: var(--color-dark-gray);
border: 1px solid #333;
border-radius: 10px;
overflow: hidden;
text-align: center;
transition: transform 0.3s;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(255, 215, 0, 0.2);
}
.product-media-container {
position: relative;
overflow: hidden;
}
.product-image {
width: 100%;
height: 300px;
object-fit: cover;
transition: opacity 0.3s;
}
.add-to-cart-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--color-yellow);
color: var(--color-black);
border: none;
padding: 15px 30px;
border-radius: 5px;
font-weight: bold;
font-size: 1.1em;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}
.product-card:hover .add-to-cart-btn {
opacity: 1;
transform: translate(-50%, -50%);
}
.product-info {
padding: 20px;
}
.product-info h3 {
color: var(--color-white);
margin-bottom: 5px;
}
.product-info .category {
color: var(--color-yellow);
font-size: 0.9em;
margin-bottom: 10px;
}
.product-info .price {
font-size: 1.5em;
font-weight: bold;
color: var(--color-white);
margin-bottom: 15px;
}
.btn-product-checkout {
display: block;
padding: 10px;
background-color: var(--color-black);
border: 1px solid var(--color-yellow);
color: var(--color-yellow) !important;
border-radius: 5px;
font-weight: bold;
}
.btn-product-checkout:hover {
background-color: var(--color-yellow);
color: var(--color-black) !important;
}
/* Checkout styles */
.checkout-section {
margin-top: 80px;
padding: 40px;
background-color: var(--color-dark-gray);
border-radius: 10px;
}
.checkout-section h2 {
text-align: center;
color: var(--color-yellow);
margin-bottom: 30px;
}
.checkout-form-container input {
width: 100%;
padding: 15px;
margin-bottom: 15px;
border: 1px solid #555;
background-color: #333;
color: var(--color-white);
border-radius: 5px;
}
.checkout-form-container label {
display: block;
margin-bottom: 5px;
color: var(--color-light-gray);
font-weight: bold;
}
.btn-finalizar {
width: 100%;
padding: 15px;
background-color: var(--color-yellow);
color: var(--color-black);
border: none;
border-radius: 5px;
font-size: 1.2em;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
}
.btn-finalizar:hover {
background-color: var(--color-white);
}
/* ========== Popup ========== */
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}
.popup-content {
width: 90%;
height: 90%;
display: flex;
background-color: var(--color-black);
position: relative;
overflow: hidden;
}
.popup-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 2em;
color: var(--color-yellow);
background: none;
border: none;
cursor: pointer;
z-index: 1002;
padding: 5px 10px;
}
.popup-imagem-container {
width: 60%;
position: relative;
}
.popup-imagem {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0.8) 70%, transparent);
-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0.8) 70%, transparent);
}
/* Hide mobile popup image on desktop */
.popup-imagem.mobile-img {
display: none;
}
.popup-menu-container {
width: 40%;
background-color: var(--color-dark-gray);
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
border-left: 5px solid var(--color-yellow);
border-image: linear-gradient(to bottom, var(--color-yellow), var(--color-dark-gray));
border-image-slice: 1;
}
.popup-menu-content h2 {
font-size: 2.5em;
color: var(--color-yellow);
margin-bottom: 15px;
}
.popup-menu-content p {
color: var(--color-white);
font-size: 1.1em;
margin-bottom: 30px;
}
.btn-popup {
display: inline-block;
padding: 15px 30px;
background-color: var(--color-yellow);
color: var(--color-black) !important;
font-weight: bold;
border-radius: 5px;
}
/* Se você tiver links de ações extras (que não são o Ver Produtos) no seu HTML, esconda-os aqui */
/* EXEMPLO: Se você usou uma classe como .popup-action-link para os botões desnecessários */
.popup-menu-content a:not(.btn-popup) {
display: none !important;
}
/* --- FIX DE ROLAGEM E POSICIONAMENTO FINAL --- */
/* 1. O OVERLAY DEVE SER FIXO E COBRIR TUDO */
.popup-overlay {
position: fixed !important; /* FORÇA O POP-UP A FICAR FIXO E NÃO ROLAR */
top: 0 !important;
left: 0 !important;
width: 100vw !important; /* 100% da LARGURA da viewport */
height: 100vh !important; /* 100% da ALTURA da viewport */
overflow: hidden !important; /* Impede que o próprio overlay role */
z-index: 99999 !important; /* Z-index EXTREMAMENTE alto */
display: none; /* Por padrão, deve estar oculto */
}
/* 2. BLOQUEIA A ROLAGEM DO BODY quando o pop-up está ativo */
body.popup-active {
overflow: hidden !important;
/* Adiciona posição fixa ao body para resolver bugs de rolagem em iOS */
position: fixed !important;
width: 100vw !important;
height: 100vh !important;
}
/* 3. IMPEDE ROLAGEM E GARANTE EXIBIÇÃO CORRETA DOS CONTAINERS INTERNOS */
.popup-content, .popup-menu-container {
overflow: hidden !important;
width: 100% !important;
height: 100% !important;
}
/* ========== Footer e Natal ========== */
footer {
background-color: var(--color-black);
padding: 50px 0 20px; /* Mantém o padding desktop */
border-top: 3px solid var(--color-yellow);
position: relative;
overflow: hidden;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #333;
margin-bottom: 20px;
}
.payment-methods {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 20px;
}
.payment-icon {
height: 40px;
width: auto;
object-fit: contain;
border-radius: 4px;
opacity: 0.9;
transition: opacity 0.3s;
background-color: var(--color-dark-gray);
padding: 5px;
}
.footer-column h3 {
color: var(--color-yellow);
margin-bottom: 20px;
font-size: 1.2em;
}
.footer-column ul {
list-style: none;
}
.footer-column ul li {
margin-bottom: 10px;
}
.footer-column ul li a {
color: var(--color-white);
font-size: 0.95em;
transition: color 0.3s;
}
.footer-column ul li a:hover {
color: var(--color-yellow);
}
.newsletter-form {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.newsletter-form input {
padding: 12px;
border: 1px solid var(--color-yellow);
background-color: #333;
color: var(--color-white);
border-radius: 5px;
font-size: 1em;
}
.newsletter-form input::placeholder {
color: #bbb;
}
.newsletter-form button {
padding: 12px;
background-color: var(--color-yellow);
color: var(--color-black);
border: none;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
font-size: 1em;
transition: background-color 0.3s;
}
.newsletter-form button:hover {
background-color: var(--color-white);
}
.security-seals {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 20px;
justify-content: flex-start;
}
.security-seals img {
height: 45px;
opacity: 0.8;
transition: opacity 0.3s;
}
.security-seals img:hover {
opacity: 1;
}
.social-media-footer {
text-align: center;
margin: 20px 0 30px;
}
.social-media-footer a {
font-size: 2.2em;
margin: 0 15px;
color: var(--color-white);
transition: color 0.3s;
}
.social-media-footer a:hover {
color: var(--color-yellow);
}
.copyright {
text-align: center;
padding-top: 15px;
border-top: 1px solid #333;
color: #888;
font-size: 0.85em;
margin-top: 20px;
}
/* Barra de neve (fundo do footer) */
.footer-snow-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background-image: url('img/neve.png');
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
z-index: 1;
}
/* Árvore e presente (desktop) */
.christmas-tree {
position: relative;
bottom: 20px; /* MUDANÇA: Usar bottom em vez de top */
left: 5%;
width: 180px;
height: auto;
z-index: 2; /* Garante que fique acima da barra de neve */
/* top: auto; <--- Remova ou comente o 'top: 190px;' antigo! */
}
.christmas-gift {
position: absolute;
bottom: 25px; /* MUDANÇA: Usar bottom em vez de top */
right: -200px;
width: 250px;
height: auto;
z-index: 2; /* Garante que fique acima da barra de neve */
animation: moveGift 25s linear infinite;
/* top: auto; <--- Remova ou comente o 'top: 370px;' antigo! */
}
/* =======================================================
ESTILOS PARA PÁGINA DE DETALHES DE PRODUTO (PDP)
======================================================= */
/* No seu style.css, na seção PDP */
.product-info-section {
display: flex;
gap: 50px;
padding: 60px 0;
}
.product-gallery {
/* MUDANÇA: Aumenta a proporção da galeria de 2 para 3 */
flex: 3; /* Garante que a galeria ocupe ~75% do espaço total */
display: flex;
flex-direction: row;
gap: 15px;
}
.product-checkout {
/* MUDANÇA: Mantém a proporção do checkout em 1 */
flex: 1; /* Ocupa ~25% do espaço total */
padding-left: 20px;
}
.main-product-image, .secondary-product-image {
width: calc(50% - 7.5px);
max-width: none; /* ESSENCIAL para permitir o crescimento */
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* ... (O restante do CSS PDP permanece o mesmo) ... */
.product-checkout {
flex: 1; /* Ocupa os outros 50% do espaço */
padding-left: 20px;
}
.product-title {
font-size: 2.2em;
margin-bottom: 10px;
}
.product-price {
font-size: 2.8em;
color: rgb(255, 57, 84); /* Sua cor de destaque */
font-weight: bold;
display: block;
margin-bottom: 15px;
}
.add-to-cart-btn-large, .buy-now-btn {
display: block;
width: 100%;
padding: 15px;
margin-bottom: 10px;
border: none;
border-radius: 5px;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.3s;
}
.add-to-cart-btn-large {
background-color: var(--color-yellow); /* Sua cor principal */
color: var(--color-white);
}
.buy-now-btn {
background-color: #555; /* Cor secundária, como Preto/Cinza */
color: white;
}
.product-description-section {
padding: 40px 0;
border-top: 1px solid #444; /* Linha divisória */
}
.nutritional-list {
list-style: disc;
margin-left: 20px;
}
/* No seu style.css */
.product-description-section {
/* MANTENHA: Aumenta o padding vertical */
padding: 60px 0;
/* NOVIDADE: Fundo com Gradiente Vibrante */
background-image: linear-gradient(
to right,
rgba(255, 57, 84, 0.2), /* Cor 1: Vermelho/Rosa (Sua cor de destaque) */
rgba(255, 255, 0, 0.1), /* Cor 2: Amarelo/Neon (Sua outra cor de destaque) */
rgba(0, 255, 255, 0.1) /* Cor 3: Ciano/Azul (Para profundidade) */
);
/* MANTENHA: A linha divisória no topo (agora integrada ao fundo) */
border-top: 1px solid rgba(255, 255, 255, 0.1);
/* NOVIDADE: Centraliza o texto e aumenta a margem do topo */
text-align: center;
margin-top: 30px;
}
/* NOVIDADE: Ajusta a cor do título principal da seção para destacar no fundo */
.product-description-section h2 {
color: rgb(255, 57, 84); /* Usa sua cor de destaque */
font-size: 2em;
padding-bottom: 20px;
}
/* ==== CORREÇÃO DO BOTÃO NO MOBILE (DETALHES DO PRODUTO) ==== */
.product-media-container {
position: relative; /* trava o botão dentro do container */
}
/* botão não pode mais “andar” sozinho */
.product-media-container .add-to-cart-btn {
position: absolute;
bottom: 10px; /* distância da parte de baixo */
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 100px;
z-index: 10;
}
/* impede a imagem de empurrar o botão */
.product-media-container img {
width: 100%;
display: block;
}
/* === BOTÃO DE + VERMELHO NEON NO CARD === */
.add-to-cart-icon-btn {
position: absolute;
top: 10px;
right: 10px;
width: 50px;
height: 50px;
background: #ff2e2e; /* vermelho neon */
color: white;
border-radius: 10px; /* quadradão premium */
border: none;
font-size: 28px; /* tamanho grande do "+" */
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 20;
/* brilho neon */
box-shadow: 0 0 15px rgba(255, 20, 20, 0.7);
/* animação suave */
transition: 0.12s ease-in-out;
}
.add-to-cart-icon-btn:hover {
transform: scale(1.15);
box-shadow: 0 0 22px rgba(255, 40, 40, 1); /* brilho mais forte no hover */
background: #d60000;
}
.add-to-cart-icon-btn i {
pointer-events: none;
}
/* === BOTÃO DE + VERMELHO NEON NO CARD === */
.add-to-cart-icon-btn {
position: absolute;
top: 10px;
right: 10px;
width: 50px;
height: 50px;
background: #ff2e2e;
color: white;
border-radius: 10px;
border: none;
font-size: 28px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 20;
box-shadow: 0 0 15px rgba(255, 20, 20, 0.7);
transition: 0.12s ease-in-out;
}
.cart-item-card {
display: flex;
background-color: #fff;
border-radius: 10px;
padding: 15px;
margin-bottom: 15px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.cart-item-img {
width: 120px;
height: 120px;
object-fit: contain;
margin-right: 15px;
}
.cart-item-info h3 {
margin: 0;
font-size: 1.1rem;
}
.cart-item-info p {
margin: 5px 0;
}
.remove-item-btn {
margin-top: 10px;
background-color: red;
color: #fff;
border: none;
padding: 8px 12px;
cursor: pointer;
border-radius: 5px;
}
.checkout-btn {
background-color: red;
color: #fff;
font-size: 1.2rem;
padding: 15px 25px;
border: none;
border-radius: 10px;
cursor: pointer;
}
/* 1. Garanta que o contêiner está usando a grade corretamente */
.container-produtos {
display: grid;
/* Cria 3 colunas de largura igual */
grid-template-columns: repeat(3, 1fr);
/* Adiciona espaçamento entre os cards */
gap: 20px;
}
/* 2. Aplique a mesma altura a todos os cards (Filhos) */
.card-produto {
/* No CSS Grid, o height geralmente é tratado automaticamente, */
/* mas se não funcionar, adicione um height mínimo */
min-height: 500px; /* <--- AJUSTE ESTE VALOR: Defina uma altura fixa ou mínima que caiba no card mais alto. */
/* Use Flexbox dentro do card para empurrar o botão para o fundo */
display: flex;
flex-direction: column;
}
/* 3. Empurre o botão para baixo (Alinhamento do Conteúdo) */
.card-produto-conteudo {
/* Isso garante que a seção de conteúdo (imagem/texto/preço) ocupe */
/* todo o espaço restante e o botão seja empurrado para o final. */
flex-grow: 1;
margin-bottom: 15px; /* Espaço entre o conteúdo e o botão */
}
.botao-ver-detalhes {
/* O botão ficará sempre na parte inferior do card */
margin-top: auto;
}
/* --- Responsividade (para dispositivos móveis) --- */
@media (max-width: 992px) {
.product-info-section {
flex-direction: column; /* Coloca Imagens e Checkout em coluna no mobile */
}
.product-checkout {
padding-left: 0;
padding-top: 20px;
}
.main-product-image, .secondary-product-image {
max-width: 100%;
}
}
/* Animação do presente (desktop: atravessa a tela) */
@keyframes moveGift {
0% {
right: -200px;
}
100% {
right: calc(100% + 200px);
}
}
/* Animação mobile do presente (ajustada) */
@keyframes moveGiftMobile {
0% {
right: -120px;
}
100% {
right: calc(100% + 120px);
}
}
/* ========== Snowflakes ========== */
.snowflake {
position: fixed;
top: -10px;
z-index: 9999;
color: #fff;
font-size: 1.2em;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
animation: fall linear infinite;
pointer-events: none;
}
@keyframes fall {
to {
transform: translateY(100vh);
}
}
/* ========== Responsividade (Mobile) ========== */
@media (max-width: 992px) {
/* Header / Nav */
.logo {
max-width: 130px;
height: 80px;
}
@media (max-width: 992px) {
/* ... outros estilos de mobile ... */
/* --- POSICIONAMENTO DA TOCA DE PAPAI NOEL (FIX MOBILE) --- */
.santa-hat-icon {
width: 36px; /* Toca menor no mobile */
top: 1px; /* Ajusta posição para cima */
left: 42%; /* Ajusta para o canto */
transform: translateX(-50%) rotate(5deg);
}
/* ... outros estilos de mobile ... */
}
@media (max-width: 992px) {
/* ... outros estilos de mobile ... */
/* --- CORREÇÃO DO BANNER PRINCIPAL: TROCAR .main-hero-banner POR .hero-banner --- */
.hero-banner {
width: 100%;
height: auto;
overflow: hidden;
}
/* O elemento da imagem dentro do .hero-banner */
.hero-banner img { /* Ou use a classe .hero-img, se for mais específica */
width: 100%;
height: auto;
object-fit: cover;
display: block;
}
/* ... restante dos estilos de mobile ... */
}
.desktop-nav {
display: none;
}
.header-left-actions {
visibility: visible;
width: auto;
}
.menu-toggle {
display: block;
}
.header-right-actions {
width: auto;
}
.checkout-link {
font-size: 1.5em;
padding: 5px;
color: var(--color-yellow) !important;
}
.checkout-link span {
display: none;
}
.mobile-nav.active {
display: block;
}
/* Produtos - grid responsivo */
.product-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
/* Botão add-to-cart fixa visibilidade no mobile */
.add-to-cart-btn {
opacity: 1;
position: static;
transform: none;
margin: 10px auto;
width: 90%;
display: block;
}
.product-media-container {
padding-bottom: 0;
margin-bottom: 0;
}
/* Footer: reduz o padding-top para mobile (evita espaços grandes) */
footer {
padding-top: 60px; /* reduzido para mobile */
}
.footer-grid {
grid-template-columns: 1fr;
text-align: center;
}
.footer-column {
margin-bottom: 30px;
}
.newsletter-form {
flex-direction: column;
align-items: center;
}
.newsletter-form input,
.newsletter-form button {
width: 80%;
max-width: 300px;
}
.security-seals {
justify-content: center;
margin-top: 15px;
}
.social-media-footer {
margin: 15px 0 20px;
}
.social-media-footer a {
font-size: 1.8em;
margin: 0 10px;
}
@media (max-width: 992px) {
/* --- CONTAINER PRINCIPAL DO POP-UP (Tela Cheia com Imagem de Fundo) --- */
.popup-content {
width: 100vw !important; /* Ocupa 100% da largura da tela */
height: 100vh !important; /* Ocupa 100% da altura da tela */
margin: 0 !important;
/* Remove o background-color preto do conteúdo do pop-up */
background-color: transparent !important;
/* Define a imagem mobile como fundo de TODO o pop-up */
background-image: url('img/popmobile.png') !important; /* CAMINHO DA SUA IMAGEM MOBILE */
background-size: cover !important; /* Faz a imagem cobrir toda a área */
background-position: center !important; /* Centraliza a imagem */
background-repeat: no-repeat !important; /* Evita repetição da imagem */
/* O conteúdo do menu será centralizado acima */
display: flex !important;
flex-direction: column !important; /* Empilha os elementos verticalmente */
justify-content: center !important; /* Centraliza verticalmente */
align-items: center !important; /* Centraliza horizontalmente */
position: fixed !important; /* Garante que fique sobre tudo */
top: 0 !important;
left: 0 !important;
z-index: 1000 !important; /* Z-index base do pop-up */
}
/* --- ESCONDE OS CONTAINERS DE IMAGEM/MENU ANTIGOS --- */
/* Como a imagem agora é background do popup-content, este container não é mais necessário */
.popup-imagem-container {
display: none !important;
}
/* O popup-menu-container agora será o único container visível, centralizado */
.popup-menu-container {
width: 90% !important; /* Largura para o conteúdo (ajuste se precisar) */
height: auto !important; /* Altura automática */
/* Remove qualquer background-color aqui para que a imagem de fundo apareça */
background-color: transparent !important;
/* Remove bordas e padding que poderiam atrapalhar a centralização */
border: none !important;
border-image: none !important;
padding: 0 !important;
/* Garante que o conteúdo dentro do menu-content esteja centralizado */
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important; /* Centraliza o texto */
z-index: 1001 !important; /* Fica acima do background do pop-up */
}
/* --- CONTEÚDO DE TEXTO E BOTÃO --- */
.popup-menu-content {
/* Garante que o texto e o botão fiquem centralizados */
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
padding: 20px !important; /* Adiciona um padding interno para o texto */
/* Se você quiser um fundo para o texto, adicione aqui (ex: rgba(0,0,0,0.5)) */
/* background-color: rgba(0, 0, 0, 0.5); */
/* border-radius: 10px; */
}
.popup-menu-content h2 {
font-size: 2em !important;
color: var(--color-yellow) !important; /* Garante que a cor seja visível */
margin-bottom: 15px !important;
/* Adicione text-shadow se precisar de mais contraste */
/* text-shadow: 2px 2px 4px rgba(0,0,0,0.7); */
}
.popup-menu-content p {
color: var(--color-white) !important; /* Garante que a cor seja visível */
font-size: 1.2em !important;
margin-bottom: 30px !important;
/* Adicione text-shadow se precisar de mais contraste */
/* text-shadow: 2px 2px 4px rgba(0,0,0,0.7); */
}
.btn-popup {
background-color: var(--color-yellow) !important;
color: var(--color-black) !important;
padding: 15px 30px !important;
font-size: 1.1em !important;
display: inline-block !important; /* Garante que ele apareça */
}
/* --- BOTÃO DE FECHAR ('X') --- */
.popup-close {
position: fixed !important; /* Fixa o X na tela, independente do scroll */
top: 15px !important;
right: 15px !important;
font-size: 2.5em !important; /* Aumenta um pouco para mobile */
color: var(--color-white) !important; /* Cor branca para contraste com a imagem */
background-color: rgba(0, 0, 0, 0.5) !important; /* Pequeno fundo para o X */
border-radius: 50% !important; /* Fundo circular para o X */
padding: 5px 10px !important;
z-index: 1002 !important; /* Fica acima de tudo */
box-shadow: 0 0 5px rgba(0,0,0,0.5) !important;
}
} }
/* Ajustes específicos para os elementos natalinos no mobile:
mantemos o visual do desktop, mas posicionamos usando bottom
e tamanhos menores para evitar sobreposição do conteúdo. */
.footer-snow-bar {
height: 80px; /* um pouco menor no mobile */
}
.christmas-tree {
width: 140px;
/* usar bottom em vez de top para garantir que "cole" ao final do footer */
bottom: 10px;
top: auto;
left: 10%;
transform: none;
}
.christmas-gift {
width: 90px;
/* usar bottom para ficar sobre a barra de neve e não empurrar conteúdo */
bottom: 20px;
top: auto;
right: -80px;
animation: moveGiftMobile 12s linear infinite;
}
/* caso precise que a árvore fique centralizada no mobile (opcional):
.christmas-tree {
left: 50%;
transform: translateX(-50%);
} */
/* ============================================
FIX: ÍCONES DE PAGAMENTO CENTRALIZADOS
============================================= */
.payment-methods {
display: flex;
flex-wrap: wrap;
justify-content: center !important; /* força centralização */
gap: 15px;
}
/* No mobile o título + ícones ficam alinhados */
@media (max-width: 992px) {
.payment-column {
text-align: center;
}
.payment-column h3 {
text-align: center;
width: 100%;
}
.payment-methods {
justify-content: center !important;
}
}
/* ============================================
AJUSTE DA ÁRVORE E DO GIFT NO MOBILE
(para ficarem ACIMA da barra de neve)
============================================= */
.christmas-tree,
.christmas-gift {
z-index: 2; /* abaixo do header mas acima do footer-snow-bar */
}
/* DESKTOP — mantém como estava */
.christmas-tree {
bottom: auto;
}
.christmas-gift {
bottom: auto;
}
/* MOBILE — posicionamento correto */
@media (max-width: 992px) {
/* === ÁRVORE no canto no mobile === */
@media (max-width: 992px) {
.christmas-tree {
width: 130px;
position: absolute;
bottom: 30px; /* fica acima da barra de neve */
left: 10px; /* no canto esquerdo */
transform: none; /* remove centralização */
}
}
/* === TAMANHO DO GIFT NO MOBILE === */
@media (max-width: 992px) {
.christmas-gift {
width: 130px !important; /* ou o tamanho que quiser */
bottom: 35px !important;
}
}
}
/* ================================
CARRINHO — VISUAL MOBILE MELHORADO
================================ */
/* some o texto "Carrinho (0)" no mobile */
@media (max-width: 768px) {
.checkout-link span {
display: none;
}
}
/* posiciona o número dentro de uma bolinha vermelha */
#cart-count {
background: red;
color: white;
padding: 2px 7px;
border-radius: 50%;
font-size: 13px;
font-weight: bold;
margin-left: 4px;
}
/* no mobile aumenta e destaca mais */
@media (max-width: 768px) {
#cart-count {
position: absolute;
top: -6px;
right: -10px;
background: red;
color: white;
font-size: 14px;
padding: 3px 8px;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 0 8px rgba(255,0,0,0.7);
}
.checkout-link {
position: relative;
}
.checkout-link i {
font-size: 26px; /* aumenta o ícone da sacola */
}
}
/* ============================================
ANIMAÇÃO DO PRESENTE SEM VOLTAR (sempre pra frente)
============================================= */
@keyframes moveGiftMobile {
0% { right: -120px; }
100% { right: calc(100% + 120px); }
}
/* === FIXAR TAMANHO DO GIFT NO DESKTOP === */
.christmas-gift {
width: 250px !important; /* tamanho fixo do desktop */
bottom: 0; /* fica na base da neve */
}
/* === MODO MOBILE (somente abaixo de 768px) === */
@media (max-width: 768px) {
/* Esconde o texto "Carrinho (0)" */
.checkout-link span {
display: none !important;
}
/* Ajusta o container do carrinho */
.header-right-actions {
width: auto !important;
justify-content: flex-end !important;
}
.checkout-link {
position: relative !important;
padding-right: 10px;
}
/* Ícone da sacola maior e visível */
.checkout-link i {
font-size: 30px !important;
color: var(--color-yellow) !important;
}
/* Bolinha do contador */
#cart-count {
position: absolute !important;
top: -10px !important;
right: -12px !important;
background: #ff0000 !important;
color: #fff !important;
padding: 3px 8px !important;
font-size: 15px !important;
font-weight: bold !important;
border-radius: 50% !important;
border: 2px solid #fff !important;
display: inline-block !important;
min-width: 20px !important;
text-align: center !important;
}
}
/* === BOTÃO DE + DESATIVADO NO DESKTOP === */
.add-to-cart-icon-btn {
display: none !important;
}
/* === ATIVAR O BOTÃO DE + APENAS NO MOBILE === */
@media (max-width: 992px) {
.add-to-cart-icon-btn {
display: flex !important;
}
}