Shop

@import url(‘https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&display=swap’);

.dm-container {
font-family: ‘Plus Jakarta Sans’, sans-serif;
color: #1e293b;
max-width: 1200px;
margin: 0 auto;
padding: 20px 10px;
overflow-x: hidden;
}

/* Animações de Entrada */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}

.dm-animate {
animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
opacity: 0;
}
.dm-delay-1 { animation-delay: 0.1s; }
.dm-delay-2 { animation-delay: 0.2s; }
.dm-delay-3 { animation-delay: 0.3s; }
.dm-delay-4 { animation-delay: 0.4s; }

/* Cabeçalho / Hero Banner */
.dm-hero-banner {
width: 100%;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 30px -10px rgba(16, 185, 129, 0.3);
transition: transform 0.3s ease;
}
.dm-hero-banner:hover { transform: translateY(-3px); }
.dm-hero-banner img { width: 100%; height: auto; display: block; object-fit: cover; }

/* Títulos das Seções */
.dm-section-title {
font-size: 1.8rem;
font-weight: 800;
margin-bottom: 20px;
background: linear-gradient(90deg, #0369a1, #047857);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: flex;
justify-content: center;

letter-spacing: -0.5px;
}

/* CATEGORIAS */
.dm-custom-categories {
display: flex;
gap: 15px;
overflow-x: auto;
scroll-behavior: smooth;
padding-bottom: 12px;
border-radius: 12px;
justify-content: center;

}

.dm-custom-categories::-webkit-scrollbar { height: 6px; }
.dm-custom-categories::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 10px; }
.dm-custom-categories::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, #0284c7, #10b981);
border-radius: 10px;
border: 1px solid #ffffff;
}

.dm-cat-card {
flex: 0 0 220px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 12px 15px;
text-decoration: none;
color: #1e293b;
display: flex;
align-items: center;
gap: 2px;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.03);
cursor: pointer;
justify-content: center;
}

.dm-cat-card:hover {
transform: translateY(-3px);
border-color: #0284c7;
box-shadow: 0 8px 20px -5px rgba(2, 132, 199, 0.2);
}

.dm-cat-icon { font-size: 1.8rem; line-height: 1; }
.dm-cat-info h4 { margin: 0 0 2px 0; font-size: 0.95rem; font-weight: 800; color: #0f172a; }
.dm-cat-info span { font-size: 0.75rem; color: #64748b; display: block; line-height: 1.2; }

/* ESTRUTURA DOS MODAIS */
.dm-modal-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(5px);
z-index: 99999;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
padding: 15px;
text-align: center;

}

.dm-modal-overlay.active { opacity: 1; visibility: visible; }

.dm-popup-banner {
background: #ffffff;
border-top: 6px solid #10b981;
border-radius: 20px;
padding: 30px 25px;
max-width: 450px;
width: 100%;
text-align: center;
position: relative;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
transform: scale(0.8);
transition: transform 0.3s ease;
}

.dm-modal-overlay.active .dm-popup-banner { transform: scale(1); }

.dm-close-popup {
position: absolute;
top: 12px; right: 15px;
background: #f1f5f9;
border: none;
width: 32px; height: 32px;
border-radius: 50%;
font-size: 1.2rem;
cursor: pointer;
color: #64748b;
z-index: 10;
}

/* MODAL DE PRODUTO EXPANDIDO */
.dm-product-modal-box {
background: #ffffff;
border-radius: 20px;
padding: 25px;
max-width: 550px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
}

.dm-modal-main-img {
width: 100%;
height: auto;
max-height: 300px;
object-fit: cover;
border-radius: 12px;
border: 1px solid #e2e8f0;
margin-bottom: 10px;
}

.dm-modal-thumbs {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 8px;
margin-bottom: 15px;
}

.dm-modal-thumb-img {
width: 55px;
height: 55px;
object-fit: cover;
border-radius: 8px;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.2s ease;
}

.dm-modal-thumb-img:hover, .dm-modal-thumb-img.active {
border-color: #10b981;
}

.dm-modal-product-title {
font-size: 1.3rem;
font-weight: 800;
color: #0f172a;
margin: 0 0 8px 0;
line-height: 1.3;
}

/* DESCRIÇÃO EXPANSÍVEL */
.dm-desc-toggle-btn {
background: transparent;
border: none;
color: #0284c7;
font-weight: 700;
font-size: 0.85rem;
padding: 0;
cursor: pointer;
margin-bottom: 12px;
display: inline-flex;
align-items: center;
gap: 4px;
}

.dm-modal-description {
display: none;
font-size: 0.85rem;
color: #475569;
line-height: 1.5;
background: #f8fafc;
padding: 12px;
border-radius: 10px;
margin-bottom: 12px;
border: 1px solid #e2e8f0;
}

.dm-modal-description.open {
display: block;
}

.dm-modal-product-price {
font-size: 1.4rem;
font-weight: 800;
color: #047857;
margin-bottom: 15px;
}

.dm-modal-product-price del {
color: #94a3b8;
font-size: 1rem;
margin-right: 8px;
}

.dm-modal-product-price ins {
text-decoration: none;
}

/* REMOVE RÓTULOS LATERAIS DA TABELA DE VARIAÇÕES (COMO “COR”) */
#dmQuickViewContent table.variations th.label,
#dmQuickViewContent table.variations td.label {
display: none !important;
}

#dmQuickViewContent table.variations td.value {
padding: 0 !important;
width: 100%;
}

#dmQuickViewContent table.variations select {
width: 100%;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid #cbd5e1;
background-color: #f8fafc;
font-size: 0.9rem;
color: #334155;
font-weight: 600;
outline: none;
margin-bottom: 8px;
}

/* SELETOR DE QUANTIDADE COM BOTÕES (+ / -) */
.dm-qty-wrapper {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 15px;
justify-content: center;

}

.dm-qty-btn {
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid #cbd5e1;
background: #f1f5f9;
font-size: 1.1rem;
font-weight: 700;
color: #334155;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}

.dm-qty-btn:hover { background: #e2e8f0; }

#dmQuickViewContent .quantity input.qty {
width: 50px !important;
height: 36px !important;
text-align: center !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
font-weight: 700 !important;
font-size: 0.95rem !important;
}

/* MENSAGENS NO MODAL */
.dm-modal-notice {
padding: 10px 14px;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
margin-top: 10px;
display: none;
}
.dm-modal-notice.success { background: #d1fae5; color: #065f46; display: block; }
.dm-modal-notice.error { background: #fee2e2; color: #991b1b; display: block; }

/* VITRINE DE PRODUTOS E SEÇÕES */
.dm-container .woocommerce ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px !important;
padding: 0 !important;
margin: 0 !important;
}

.dm-container .woocommerce ul.products li.product {
background: #fff !important;
border-radius: 16px !important;
border: 1px solid #f1f5f9 !important;
padding: 12px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
margin: 0 !important;
width: 100% !important;
}

.dm-container .woocommerce ul.products li.product:hover {
transform: translateY(-5px) !important;
box-shadow: 0 12px 24px -5px rgba(2, 132, 199, 0.15) !important;
border-color: #cbd5e1 !important;
}

.dm-container .woocommerce ul.products li.product img {
border-radius: 12px !important;
margin-bottom: 12px !important;
width: 100% !important;
height: auto !important;
object-fit: cover !important;
cursor: pointer;
}

.dm-container .woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 0.95rem !important;
font-weight: 700 !important;
color: #1e293b !important;
margin: 0 0 8px 0 !important;
line-height: 1.3 !important;
cursor: pointer;
}

.dm-container .woocommerce ul.products li.product .price {
display: block !important;
font-size: 1.1rem !important;
font-weight: 800 !important;
color: #047857 !important;
margin-bottom: 12px !important;
}

/* OCULTAR BOTÃO PADRÃO */
.dm-container .woocommerce ul.products li.product .button:not(.dm-custom-modal-btn) {
display: none !important;
}

/* BOTÃO CUSTOMIZADO DA VITRINE */
.dm-custom-modal-btn {
background: linear-gradient(90deg, #10b981, #047857) !important;
color: #ffffff !important;
border-radius: 10px !important;
padding: 10px 14px !important;
text-align: center !important;
font-weight: 800 !important;
font-size: 0.85rem !important;
border: none !important;
width: 100% !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2) !important;
}

.dm-custom-modal-btn:hover {
opacity: 0.95;
transform: scale(1.02);
}

/* FORMULÁRIO E BOTÃO COMPRAR NO MODAL */
#dmQuickViewContent form.cart {
margin-top: 10px;
}

#dmQuickViewContent .single_add_to_cart_button, #dmQuickViewContent button[type=”submit”] {
background: #10b981 !important;
color: #fff !important;
border-radius: 12px !important;
padding: 14px 20px !important;
font-weight: 800 !important;
font-size: 1rem !important;
border: none !important;
cursor: pointer !important;
width: 100% !important;
margin-top: 10px !important;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
}

#dmQuickViewContent .single_add_to_cart_button:hover {
background: #059669 !important;
}

/* SEÇÕES AUXILIARES */
.dm-card-section {
background: #ffffff;
border-radius: 20px;
padding: 30px;
margin-bottom: 40px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
border: 1px solid #f1f5f9;
}

.dm-about-banner {
background: linear-gradient(135deg, #10b981 0%, #0369a1 100%);
color: #ffffff;
border-radius: 20px;
padding: 40px 30px;
margin-bottom: 40px;
text-align: center;
}
.dm-about-banner h2 { color: #fff; font-weight: 800; margin-bottom: 15px; }

@media (max-width: 768px) {
.dm-container .woocommerce ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.dm-cat-card { flex: 0 0 180px; }
}

// 1. Popup de Ofertas
setTimeout(function() {
const modal = document.getElementById(‘dmOfferModal’);
if(modal) modal.classList.add(‘active’);
}, 2000);

function closeDmModal() {
document.getElementById(‘dmOfferModal’).classList.remove(‘active’);
}

document.getElementById(‘dmOfferModal’).addEventListener(‘click’, function(e) {
if (e.target === this) closeDmModal();
});

// 2. Auto-Scroll das Categorias
const catContainer = document.getElementById(‘dmCategoryScroll’);
let autoScrollSpeed = 1;
let scrollDirection = 1;
let isHovered = false;

if (catContainer) {
catContainer.addEventListener(‘mouseenter’, () => isHovered = true);
catContainer.addEventListener(‘mouseleave’, () => isHovered = false);

setInterval(() => {
if (!isHovered) {
catContainer.scrollLeft += autoScrollSpeed * scrollDirection;
if (catContainer.scrollLeft + catContainer.clientWidth >= catContainer.scrollWidth – 1) {
scrollDirection = -1;
} else if (catContainer.scrollLeft {
card.addEventListener(‘click’, function(e) {
e.preventDefault();
const slug = this.getAttribute(‘data-slug’);
const title = this.getAttribute(‘data-title’);
const catSection = document.getElementById(‘produtos-categoria’);
const catTitle = document.getElementById(‘dmSelectedCatTitle’);
const catContent = document.getElementById(‘dmSelectedCatContent’);

if (!slug) return;

catTitle.innerText = title;
catSection.style.display = ‘block’;
catContent.innerHTML = ‘

Buscando produtos…

‘;

// Rola a tela até a seção da categoria
catSection.scrollIntoView({ behavior: ‘smooth’, block: ‘start’ });

// Busca os produtos via página da categoria
fetch(‘/categoria-produto/’ + slug)
.then(response => response.text())
.then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, ‘text/html’);
const productsUl = doc.querySelector(‘ul.products’);

if (productsUl && productsUl.children.length > 0) {
catContent.innerHTML = productsUl.outerHTML;
// Vincula os botões do modal para os novos produtos carregados
initModalButtons(catContent);
} else {
catContent.innerHTML = ‘

Nenhum produto encontrado nesta categoria no momento.

‘;
}
})
.catch(() => {
catContent.innerHTML = ‘

Erro ao carregar os produtos. Tente novamente.

‘;
});
});
});

// 4. Inicializador dos Botões de Quick View do Modal e Interceptação nos Links
function initModalButtons(container = document) {
const products = container.querySelectorAll(‘.dm-container .woocommerce ul.products li.product’);

products.forEach(prod => {
let modalBtn = prod.querySelector(‘.dm-custom-modal-btn’);

if (!modalBtn) {
const productLink = prod.querySelector(‘a.woocommerce-LoopProduct-link, a.woocommerce-loop-product__link’)?.href || prod.querySelector(‘a’)?.href;

if (productLink) {
modalBtn = document.createElement(‘button’);
modalBtn.className = ‘dm-custom-modal-btn’;
modalBtn.type = ‘button’;
modalBtn.innerText = ‘Ver Opções e Comprar’;

modalBtn.addEventListener(‘click’, function(e) {
e.preventDefault();
e.stopPropagation();

const modal = document.getElementById(‘dmQuickViewModal’);
const contentContainer = document.getElementById(‘dmQuickViewContent’);
contentContainer.innerHTML = ‘

Carregando produto…

‘;
modal.classList.add(‘active’);

fetch(productLink)
.then(response => response.text())
.then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, ‘text/html’);

const titleEl = doc.querySelector(‘.product_title, h1.entry-title’);
const titleText = titleEl ? titleEl.innerHTML : ‘Detalhes do Produto’;

const priceEl = doc.querySelector(‘.summary .price, p.price’);
const priceText = priceEl ? priceEl.innerHTML : ”;

const descEl = doc.querySelector(‘.woocommerce-product-details__short-description, #tab-description’);
const descText = descEl ? descEl.innerHTML : ‘Sem descrição disponível para este produto.’;

const cartForm = doc.querySelector(‘form.cart’);

let variationsData = [];
if (cartForm && cartForm.getAttribute(‘data-product_variations’)) {
try {
variationsData = JSON.parse(cartForm.getAttribute(‘data-product_variations’));
} catch(err){}
}

// Galeria
let images = [];
const galleryImgs = doc.querySelectorAll(‘.woocommerce-product-gallery__image img, .images img’);
galleryImgs.forEach(img => {
const src = img.getAttribute(‘data-large_image’) || img.getAttribute(‘data-src’) || img.src;
if (src && !images.includes(src)) images.push(src);
});

if (images.length === 0) {
const cardImg = prod.querySelector(‘img’)?.src;
if (cardImg) images.push(cardImg);
}

let galleryHtml = ”;
if (images.length > 0) {
let thumbsHtml = ”;
if (images.length > 1) {
thumbsHtml = `

`;
}

galleryHtml = `

`;
}

const infoHtml = `

`;

contentContainer.innerHTML = galleryHtml + infoHtml;

if (cartForm) {
const formArea = document.getElementById(‘dmModalFormArea’);
formArea.appendChild(cartForm);

// Botões de Quantidade (+ e -)
const qtyInput = cartForm.querySelector(‘.quantity input.qty’);
if (qtyInput) {
const qtyContainer = qtyInput.closest(‘.quantity’);
if (qtyContainer) {
const wrapper = document.createElement(‘div’);
wrapper.className = ‘dm-qty-wrapper’;

const minusBtn = document.createElement(‘button’);
minusBtn.type = ‘button’;
minusBtn.className = ‘dm-qty-btn’;
minusBtn.innerText = ‘-‘;
minusBtn.onclick = () => {
let val = parseInt(qtyInput.value) || 1;
if (val > 1) qtyInput.value = val – 1;
};

const plusBtn = document.createElement(‘button’);
plusBtn.type = ‘button’;
plusBtn.className = ‘dm-qty-btn’;
plusBtn.innerText = ‘+’;
plusBtn.onclick = () => {
let val = parseInt(qtyInput.value) || 1;
qtyInput.value = val + 1;
};

qtyContainer.parentNode.insertBefore(wrapper, qtyContainer);
wrapper.appendChild(minusBtn);
wrapper.appendChild(qtyContainer);
wrapper.appendChild(plusBtn);
}
}

// Re-inicializa jQuery e WooCommerce Variation Form
if (window.jQuery && jQuery.fn.wc_variation_form) {
const $form = jQuery(cartForm);
$form.wc_variation_form();

$form.on(‘found_variation’, function(e, variation) {
if (variation && variation.price_html) {
document.getElementById(‘dmModalPriceHeader’).innerHTML = variation.price_html;
}
});

$form.on(‘reset_data’, function() {
document.getElementById(‘dmModalPriceHeader’).innerHTML = priceText;
});
}

// Lógica JS de atualização manual de preço via JSON
const selects = cartForm.querySelectorAll(‘select’);
selects.forEach(select => {
select.addEventListener(‘change’, function() {
if (variationsData.length > 0) {
const selectedAttributes = {};
selects.forEach(sel => {
selectedAttributes[sel.name] = sel.value;
});

const matched = variationsData.find(v => {
return Object.keys(v.attributes).every(attrKey => {
return !v.attributes[attrKey] || v.attributes[attrKey] === selectedAttributes[attrKey];
});
});

if (matched && matched.price_html) {
document.getElementById(‘dmModalPriceHeader’).innerHTML = matched.price_html;
const varIdInput = cartForm.querySelector(‘input[name=”variation_id”]’);
if (varIdInput) varIdInput.value = matched.variation_id;
}
}
});
});

// Envio via AJAX sem recarregar
cartForm.addEventListener(‘submit’, function(evt) {
evt.preventDefault();
const notice = document.getElementById(‘dmModalNotice’);
notice.className = ‘dm-modal-notice’;
notice.style.display = ‘none’;

if (cartForm.classList.contains(‘variations_form’)) {
const varId = cartForm.querySelector(‘input[name=”variation_id”]’)?.value;
if (!varId || varId === “0” || varId === “”) {
notice.innerText = ‘Por favor, selecione as opções do produto.’;
notice.classList.add(‘error’);
return;
}
}

const formData = new FormData(cartForm);
const submitBtn = cartForm.querySelector(‘button[type=”submit”], .single_add_to_cart_button’);
const originalBtnText = submitBtn ? submitBtn.innerText : ‘Adicionar ao carrinho’;

if (submitBtn) {
submitBtn.disabled = true;
submitBtn.innerText = ‘Adicionando…’;
}

fetch(cartForm.action || window.location.href, {
method: ‘POST’,
body: formData,
headers: { ‘X-Requested-With’: ‘XMLHttpRequest’ }
})
.then(res => {
if (submitBtn) {
submitBtn.disabled = false;
submitBtn.innerText = originalBtnText;
}
notice.innerText = ‘✅ Produto adicionado ao carrinho com sucesso!’;
notice.classList.add(‘success’);

if (window.jQuery) {
jQuery(document.body).trigger(‘wc_fragment_refresh’);
}
})
.catch(() => {
if (submitBtn) {
submitBtn.disabled = false;
submitBtn.innerText = originalBtnText;
}
notice.innerText = ‘Ocorreu um erro ao adicionar. Tente novamente.’;
notice.classList.add(‘error’);
});
});
}

})
.catch(() => {
contentContainer.innerHTML = ‘

Erro ao carregar o produto. Tente novamente.

‘;
});
});

prod.appendChild(modalBtn);
}
}

// Adiciona interatividade aos links da imagem e do título para abrir o modal
const links = prod.querySelectorAll(‘a, .woocommerce-loop-product__title, img’);
links.forEach(link => {
if (!link.classList.contains(‘dm-custom-modal-btn’)) {
link.addEventListener(‘click’, function(e) {
e.preventDefault();
e.stopPropagation();
if (modalBtn) {
modalBtn.click();
}
});
}
});

});
}

document.addEventListener(‘DOMContentLoaded’, function() {
initModalButtons();
});

// Expansão / Recolhimento da Descrição
function toggleDmDesc() {
const descBox = document.getElementById(‘dmModalDesc’);
const arrow = document.getElementById(‘dmDescArrow’);
if (descBox.classList.contains(‘open’)) {
descBox.classList.remove(‘open’);
arrow.innerText = ‘▾’;
} else {
descBox.classList.add(‘open’);
arrow.innerText = ‘▴’;
}
}

// Galeria de Imagens
function changeModalImage(src, element) {
document.getElementById(‘dmMainModalImg’).src = src;
document.querySelectorAll(‘.dm-modal-thumb-img’).forEach(el => el.classList.remove(‘active’));
element.classList.add(‘active’);
}

function closeQuickView() {
document.getElementById(‘dmQuickViewModal’).classList.remove(‘active’);
}

document.getElementById(‘dmQuickViewModal’).addEventListener(‘click’, function(e) {
if (e.target === this) closeQuickView();
});