/* --- VARIÁVEIS E BASE --- */
:root {
    --primary: #333333;
    --accent: #Cca43b; 
    --bg-fundo: #FDFBF7; 
    --cor-loja: #333333; 
    --texto-principal: #333333;
    --texto-secundario: #757575;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body { 
    background-color: var(--bg-fundo); 
    color: var(--texto-principal); 
    font-family: 'Montserrat', sans-serif; 
    padding-bottom: 160px; 
    overflow-x: hidden;
    transition: background-color 0.3s, color 0.3s;
}

.hidden { display: none !important; }
.container { max-width: 800px; margin: 0 auto; padding: 0 15px; }

/* --- HEADER --- */
.red-line-aviso {
    background: #ff3b30; color: white; text-align: center;
    padding: 10px; font-weight: 700; font-size: 0.85rem;
    text-transform: uppercase; letter-spacing: 1px;
}
header { 
    background: white; padding: 30px 15px; text-align: center; 
    border-bottom: 3px solid var(--cor-loja); 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: 0.3s;
}
.cms-logo { max-height: 80px; margin: 0 auto 10px; display: block; }
header h1 { font-size: 1.2rem; font-weight: 700; text-transform: uppercase; }
.slogan-loja { font-size: 0.85rem; opacity: 0.7; margin-top: 5px; }
.status-container { 
    display: flex; align-items: center; justify-content: center; gap: 8px; 
    margin-top: 10px; font-size: 0.75rem; font-weight: 600; 
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; }

/* --- BANNERS --- */
.mySwiper { width: 100%; height: auto; aspect-ratio: 16/8; background: #eee; }
.banner-img { width: 100%; height: 100%; object-fit: cover; }
.swiper-pagination-bullet-active { background: var(--cor-loja) !important; }

/* --- BARRA DE BUSCA --- */
.search-box-container {
    position: relative;
    background: white;
    border-radius: 50px;
    padding: 12px 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}
.search-box-container:focus-within { border-color: var(--cor-loja); box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.search-icon { color: #9ca3af; font-size: 1.1rem; margin-right: 12px; }
#campo-busca { border: none; outline: none; width: 100%; font-family: 'Montserrat', sans-serif; font-size: 0.95rem; color: var(--texto-principal); background: transparent; }

/* Ajustes Busca Temas */
body.tema-dark .search-box-container, body.tema-luxo .search-box-container, body.tema-neon .search-box-container { background: #1e1e1e; border-color: #333; }
body.tema-dark #campo-busca, body.tema-luxo #campo-busca, body.tema-neon #campo-busca { color: white; }
body.tema-retro .search-box-container { border: 3px solid black; border-radius: 0; box-shadow: 4px 4px 0 black; }
body.tema-neon .search-box-container { border-color: #00ffea; box-shadow: 0 0 5px #00ffea44; }

/* --- MENU CATEGORIAS --- */
.menu-categorias { display: flex; gap: 10px; overflow-x: auto; padding: 5px 0 20px; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.menu-categorias::-webkit-scrollbar { display: none; }
.btn-categoria { padding: 10px 20px; background: white; border: 1px solid #eee; border-radius: 50px; font-size: 0.85rem; font-weight: 600; color: var(--texto-secundario); cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.03); }
.btn-categoria:active { transform: scale(0.95); }
.btn-categoria.ativo { background: var(--cor-loja); color: white; border-color: var(--cor-loja); box-shadow: 0 4px 10px rgba(0,0,0,0.15); }

body.tema-dark .btn-categoria, body.tema-luxo .btn-categoria, body.tema-neon .btn-categoria { background: #1e1e1e; border-color: #333; color: #aaa; }
body.tema-dark .btn-categoria.ativo, body.tema-luxo .btn-categoria.ativo, body.tema-neon .btn-categoria.ativo { color: white; }

/* --- PRODUTOS --- */
.grid-produtos { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 10px 0 20px; }
.modo-lista { display: flex; flex-direction: column; width: 100%; padding: 10px 0 20px; align-items: center; }

.produto-card { background: white; overflow: hidden; transition: transform 0.2s; cursor: pointer; }
.card-img-wrapper { width: 100%; height: 160px; background: #f9f9f9; position: relative; }
.produto-img { width: 100%; height: 100%; object-fit: cover; }
.produto-info { padding: 12px; text-align: center; }
.produto-info h3 { font-size: 0.85rem; font-weight: 600; margin-bottom: 5px; height: 38px; overflow: hidden; }
.preco { font-weight: 700; color: var(--cor-loja); font-size: 1.1rem; }
.desc-curta { display: none; }

/* Temas Visuais */
body.tema-clean { --bg-fundo: #FDFBF7; }
body.tema-clean .produto-card { border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); border: none; }
body.tema-dark { --bg-fundo: #121212; color: #fff; }
body.tema-dark header { background: #1e1e1e; border-color: #333; }
body.tema-dark .produto-card { background: #1e1e1e; border: 1px solid #333; border-radius: 12px; }
body.tema-dark .card-img-wrapper { opacity: 0.9; }

/* Amazon Style */
body.tema-amazon { --bg-fundo: #f3f4f6; }
body.tema-amazon .container { max-width: 600px; }
body.tema-amazon .modo-lista { gap: 10px; } 
body.tema-amazon .produto-card { width: 100%; display: flex !important; flex-direction: row !important; align-items: start !important; border-radius: 12px; padding: 15px; height: auto; box-shadow: 0 2px 8px rgba(0,0,0,0.06); background: white; }
body.tema-amazon .card-img-wrapper { width: 110px; height: 110px; border-radius: 8px; flex-shrink: 0; margin-right: 15px; }
body.tema-amazon .produto-info { text-align: left; padding: 0; flex: 1; display: flex; flex-direction: column; justify-content: flex-start; }
body.tema-amazon .produto-info h3 { height: auto; margin-bottom: 4px; font-size: 1rem; font-weight: 700; }
body.tema-amazon .desc-curta { display: block; font-size: 0.8rem; color: #666; margin-bottom: 8px; line-height: 1.3; }
body.tema-amazon .preco { font-size: 1.2rem; color: #b12704; }

/* Outros Temas */
body.tema-market { --bg-fundo: #eaeded; }
body.tema-market .grid-produtos { gap: 1px; padding: 0; background: #ddd; border: 1px solid #ddd; }
body.tema-market .produto-card { border-radius: 0; box-shadow: none; padding-bottom: 10px; }
body.tema-market .card-img-wrapper { height: 140px; background: white; padding: 10px; }
body.tema-market .produto-img { object-fit: contain; }
body.tema-market .preco { color: #B12704; }
/* CORREÇÃO DO JAPÃO AQUI EMBAIXO: */
body.tema-market .preco::before { content: '¥ '; font-size: 0.7rem; color: #555; }

body.tema-insta { --bg-fundo: #fafafa; }
body.tema-insta .container { max-width: 500px; }
body.tema-insta .modo-lista { gap: 0 !important; padding-top: 10px !important; }
body.tema-insta .produto-card { width: 100% !important; margin: 0 auto 30px auto !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; border-bottom: 1px solid #dbdbdb !important; padding-bottom: 20px !important; display: flex !important; flex-direction: column !important; }
body.tema-insta .produto-card:last-child { border-bottom: none !important; margin-bottom: 0 !important; }
body.tema-insta .card-img-wrapper { width: 100% !important; height: auto !important; aspect-ratio: 1/1 !important; border-radius: 3px; border: 1px solid #efefef; margin-bottom: 12px; }
body.tema-insta .produto-info { text-align: left !important; padding: 0 4px !important; width: 100% !important; }

body.tema-luxo { --bg-fundo: #000; color: #d4af37; }
body.tema-luxo header { background: #000; border-bottom: 1px solid #d4af37; }
body.tema-luxo h1, body.tema-luxo .preco { color: #d4af37; font-family: 'Times New Roman', serif; }
body.tema-luxo .produto-card { background: #111; border: 1px solid #333; }
body.tema-retro { --bg-fundo: #ff00ff; background-image: linear-gradient(45deg, #ff00ff 25%, #00ffff 25%, #00ffff 50%, #ff00ff 50%, #ff00ff 75%, #00ffff 75%, #00ffff 100%); background-size: 40px 40px; }
body.tema-retro .container { background: white; border: 4px solid black; padding: 20px; margin-top: 20px; box-shadow: 10px 10px 0 black; }
body.tema-retro .produto-card { border: 3px solid black; box-shadow: 5px 5px 0 black; }
body.tema-neon { --bg-fundo: #050510; color: #fff; }
body.tema-neon header { background: #050510; border-bottom: 2px solid #00ffea; box-shadow: 0 0 15px #00ffea; }
body.tema-neon .produto-card { background: #0a0a20; border: 1px solid #00ffea; border-radius: 8px; box-shadow: 0 0 5px #00ffea44; }
body.tema-soft { --bg-fundo: #fff0f5; }
body.tema-soft header { background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); border-bottom: none; }
body.tema-soft .produto-card { border-radius: 25px; background: white; box-shadow: 0 8px 20px rgba(255,182,193, 0.3); }

/* --- MODAIS & EXTRAS --- */
.modal-detalhes, .carrinho-overlay { position: fixed; inset: 0; background: white; z-index: 9999; display: flex; flex-direction: column; }
.carrinho-overlay { background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); justify-content: flex-end; }
.carrinho-painel { width: 100%; background: white; border-radius: 20px 20px 0 0; max-height: 85vh; display: flex; flex-direction: column; }
.btn-fechar-modal { position: absolute; top: 20px; left: 15px; padding: 10px 15px; background: var(--primary); color: white; border: none; border-radius: 8px; font-weight: 700; font-size: 0.7rem; z-index: 10; }
.carousel-container { width: 100%; height: 35vh; background: #f4f4f4; }
.carousel-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; }
.carousel-img { min-width: 100%; height: 100%; object-fit: contain; scroll-snap-align: start; }
.product-info-sheet, .carrinho-body { padding: 20px; flex: 1; overflow-y: auto; }

/* MODAL FOOTER REFORMULADO PARA VARIAÇÕES */
.sheet-footer { padding: 15px; border-top: 1px solid #eee; background: white; display: flex; flex-direction: column; gap: 15px; }
.total-preview-modal { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 1.1rem; color: var(--cor-loja); }
.controls-row { display: flex; gap: 15px; }
.qty-selector { display: flex; align-items: center; justify-content: center; gap: 10px; background: #f9f9f9; padding: 5px 10px; border-radius: 8px; }
.qty-selector button { width: 30px; height: 30px; border-radius: 50%; border: none; background: #eee; font-weight: bold; font-size: 1.1rem; cursor: pointer; }
#btn-confirmar-add { flex: 1; height: 50px; border: none; border-radius: 10px; color: white; font-weight: 700; text-transform: uppercase; font-size: 0.9rem; background: var(--cor-loja); }

/* ESTILOS DAS VARIAÇÕES (NOVO) */
.grupo-variacao-titulo { font-size: 0.9rem; font-weight: 700; margin: 20px 0 10px; color: var(--texto-principal); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
.lista-opcoes-modal { display: flex; flex-direction: column; gap: 8px; }
.item-opcao-modal { display: flex; justify-content: space-between; align-items: center; padding: 12px; border: 1px solid #eee; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.item-opcao-modal:hover { background: #f9f9f9; }
.item-opcao-modal.selecionado { border-color: var(--cor-loja); background: rgba(59, 130, 246, 0.05); }

/* Checkbox e Radio Customizados */
.check-custom { width: 20px; height: 20px; border: 2px solid #ddd; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px; position: relative; }
.check-multi { border-radius: 4px; } /* Quadrado para multipla */
.item-opcao-modal.selecionado .check-custom { border-color: var(--cor-loja); background: var(--cor-loja); }
.item-opcao-modal.selecionado .check-custom::after { content: '✔'; font-size: 12px; color: white; }

/* Dark Mode Modal */
body.tema-dark .carrinho-painel, body.tema-luxo .carrinho-painel, body.tema-neon .carrinho-painel,
body.tema-dark .modal-detalhes, body.tema-luxo .modal-detalhes, body.tema-neon .modal-detalhes { background: #1a1a1a; color: white; }
body.tema-dark .sheet-footer, body.tema-luxo .sheet-footer, body.tema-neon .sheet-footer { background: #1a1a1a; border-top: 1px solid #333; }
body.tema-dark .qty-selector { background: #333; } 
body.tema-dark .qty-selector button { background: #444; color: white; }
body.tema-dark .item-opcao-modal { border-color: #333; }
body.tema-dark .item-opcao-modal:hover { background: #222; }

/* Carrinho */
.carrinho-header { padding: 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; }
.close-btn-cart { background: none; border: none; font-size: 1.5rem; color: #999; }
.item-carrinho-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f4f4f4; }
.btn-remover { color: #ff3b30; background: none; border: none; font-size: 1.1rem; padding: 5px; }
.carrinho-footer { padding: 15px; border-top: 1px solid #eee; background: white; }
.total-row { display: flex; justify-content: space-between; font-weight: 800; font-size: 1.2rem; margin-bottom: 15px; }
.footer-loja { padding: 40px 15px 120px; text-align: center; opacity: 0.5; font-size: 0.7rem; }
.footer-action { position: fixed; bottom: 30px; right: 20px; z-index: 9000; }
#btn-carrinho-float { background: #25d366; color: white; width: 65px; height: 65px; border-radius: 50%; border: none; font-size: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.25); position: relative; }
#contador-carrinho { position: absolute; top: 0; right: 0; background: var(--cor-loja); color: white; min-width: 24px; height: 24px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; border: 2px solid white; display: flex; align-items: center; justify-content: center; }
#btn-finalizar { background: #25d366; width: 100%; height: 55px; border: none; border-radius: 10px; color: white; font-weight: 700; text-transform: uppercase; font-size: 0.9rem; }