/*
* Base da loja (plugin mandala-loja): fontes, cores e o visual do que o plugin gera
* (preço no Pix e parcelas, barra de frete grátis, seletor de potes, resumo do produto).
* Não depende do tema: os tokens abaixo substituem as variáveis do theme.json.
*/
/* Fontes da coleção Ginga (02/10/2026; antes Marcellus e Hanken Grotesk), arquivos locais, sem Google Fonts:
títulos em Cormorant Garamond (400/500 e itálico 400 para a ênfase), texto e etiquetas em Jost (300-600).
Pedidos de 600+ na Cormorant caem numa cópia fixa em 500 (o título nunca fica pesado). docs/marca/trocar-para-ginga.py */
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-var.woff2") format("woff2"); font-weight: 300 550; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-500.woff2") format("woff2"); font-weight: 551 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-italico.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
/* Coleção Ginga (docs/marca.md, 02/10/2026). Os nomes --pc-* ficaram do código de origem (Pump Cream):
--pc-ameixa = preto Ginga, --pc-rosa = taupe (destaque em fundo claro), --pc-rosa-escuro = taupe escuro
(texto pequeno e selos), --pc-blush = areia, --pc-papel = papel. */
--pc-rosa: #7D6A55;
--pc-rosa-escuro: #6F5D49;
--pc-ameixa: #14110E;
--pc-blush: #E9E1D6;
--pc-papel: #F6F2EC;
--pc-azul: #2451D6;
--pc-vermelho: #D22F3C;
/* Nomes da coleção Ginga (use estes em código novo). */
--gk-preto: #14110E;
--gk-champanhe: #C9B79C; /* destaque em fundo escuro */
--gk-taupe: #7D6A55; /* destaque e hover em fundo claro */
--gk-taupe-escuro: #6F5D49; /* texto pequeno e selos (AA no branco e na areia) */
--gk-areia: #E9E1D6;
--gk-areia-forte: #D7CBBB;
--gk-papel: #F6F2EC;
--gk-suave: #6A6157;
--gk-linha: #DED5C8;
--gk-raio: 6px; /* cantos de botão e campo (arredondado discreto; nada de cápsula no botão principal) */
/* Nomes antigos (--gd-*, do layout de referência) apontam para a marca. */
--gd-lima: var(--pc-rosa);
--gd-roxo: var(--pc-ameixa);
--gd-lavanda: var(--pc-blush);
--gd-texto: var(--pc-ameixa);
--gd-rosa: var(--pc-rosa-escuro);
--gd-badge: var(--pc-rosa-escuro);
--gd-fonte: "Jost", system-ui, sans-serif;
--gd-fonte-marca: "Cormorant Garamond", Georgia, serif;
--dd-framboesa: #6F5D49;
--dd-anil: #14110E;
--dd-suave: #6A6157;
--dd-linha: #DED5C8;
--dd-blush: #E9E1D6;
--dd-petala: #D7CBBB;
--dd-oferta: #6F5D49;
--dd-texto-pequeno: 0.875rem;
--dd-texto-grande: 1.75rem;
--dd-raio-pequeno: 6px;
--dd-raio-medio: 10px;
--dd-raio-pilula: 999px;
}
/* O WhatsApp do plugin Click to Chat fica escondido em todo o site: ele aparece dentro do botão de ajuda
(inc/flutuante.php), que não aparece no checkout para não cobrir os campos. */
.ht-ctc, #ht-ctc-chat { display: none !important; }
/* ---------- Preço, Pix e parcelas (inc/precos.php) ---------- */
.dd-preco-principal { display: block; }
.dd-preco-principal del { color: var(--dd-suave); font-weight: 400; font-size: 0.8em; margin-right: 0.35rem; }
.dd-preco-principal ins { text-decoration: none; }
.dd-apartir { font-size: 0.7em; font-weight: 500; color: var(--dd-suave); }
.dd-pix, .dd-parcela { display: block; font-size: var(--dd-texto-pequeno); font-weight: 500; line-height: 1.4; }
.dd-pix { color: var(--dd-anil); font-weight: 500; text-wrap: balance; }
.dd-parcela { color: var(--dd-anil); opacity: 0.8; }
/* O carrinho lateral nunca mostra Pix/parcela. */
.xoo-wsc-modal .dd-pix,
.xoo-wsc-modal .dd-parcela { display: none; }
/* Preço do topo da página de produto que acompanha os cartões de potes. */
.dd-preco-escolhido { margin: 0; font-size: var(--dd-texto-grande); font-weight: 500; color: var(--dd-framboesa); }
.dd-preco-escolhido .dd-pix, .dd-preco-escolhido .dd-parcela { font-size: var(--dd-texto-pequeno); }
/* ---------- Resumo do produto [dd_resumo] ---------- */
.dd-beneficios ul { padding-left: 1.1rem; }
.dd-beneficios li::marker { color: var(--dd-framboesa); }
/* ---------- Seletor "Leve 1 / 2 / 3 potes" (assets/js/quantidade.js) ---------- */
.dd-oculto { display: none !important; }
.dd-qtd { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.6rem; }
.dd-qtd-titulo { font-weight: 500; margin-bottom: 0.5rem; padding: 0; }
.dd-qtd-item input { position: absolute; opacity: 0; pointer-events: none; }
.dd-qtd-item label {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "nome preco" "cada economia";
align-items: center;
gap: 0.1rem 1rem;
padding: 0.9rem 1.1rem;
border: 2px solid var(--dd-linha);
border-radius: var(--dd-raio-medio);
cursor: pointer;
background: #fff;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.dd-qtd-item label:hover { border-color: var(--dd-petala); }
.dd-qtd-item input:checked + label { border-color: var(--dd-framboesa); background: var(--dd-blush); }
.dd-qtd-item input:focus-visible + label { outline: 2px solid var(--dd-anil); outline-offset: 3px; }
.dd-qtd-item input:disabled + label { opacity: 0.5; cursor: not-allowed; }
.dd-qtd-nome { grid-area: nome; font-weight: 500; }
.dd-qtd-cada { grid-area: cada; font-size: var(--dd-texto-pequeno); color: var(--dd-suave); }
.dd-qtd-preco { grid-area: preco; text-align: right; }
.dd-qtd-preco s { color: var(--dd-suave); font-size: 0.85em; }
.dd-qtd-preco strong { color: var(--dd-framboesa); font-size: 1.15rem; }
.dd-qtd-economia { grid-area: economia; justify-self: end; font-size: 0.8rem; font-weight: 500; color: var(--dd-oferta); }
.dd-qtd-selo {
position: absolute;
top: -0.7rem;
left: 1rem;
background: var(--dd-framboesa);
color: #fff;
font-size: 0.72rem;
font-weight: 500;
padding: 0.1rem 0.6rem;
border-radius: var(--dd-raio-pilula);
}
.dd-qtd-esgotado { grid-column: 1 / -1; font-size: 0.8rem; color: var(--dd-oferta); }
/* A quantidade é escolhida nos cartões: o campo nativo e o preço da variação somem. */
form.variations_form:has(.dd-qtd) .quantity,
form.variations_form:has(.dd-qtd) .woocommerce-variation-price { display: none !important; }
/* ---------- Barra de frete grátis (inc/frete.php) ---------- */
.dd-frete-barra { padding: 0.75rem 1rem; background: var(--dd-blush); border-radius: var(--dd-raio-pequeno); margin: 0.75rem; }
.woocommerce-cart .dd-frete-barra { margin: 0 0 1.25rem; }
.dd-frete-barra p { margin: 0 0 0.45rem; font-size: var(--dd-texto-pequeno); font-weight: 600; color: var(--dd-anil); }
.dd-frete-trilho { height: 8px; border-radius: 999px; background: var(--dd-petala); overflow: hidden; }
.dd-frete-trilho span { display: block; height: 100%; background: var(--dd-framboesa); border-radius: inherit; transition: width 0.3s ease; }
@media (prefers-reduced-motion: reduce) {
.dd-qtd-item label, .dd-frete-trilho span { transition: none; }
}
/* ============ Títulos e descrições de seção: UMA regra para o site todo (25/09/2026) ============
* Referência: "Os mais vendidos". Toda seção usa estas duas classes, nenhuma tem tamanho próprio:
* dd-secao-titulo -> no (shortcodes) ou no widget Título do Elementor (Avançado > Classes CSS)
* dd-secao-descricao -> no
(shortcodes) ou no widget Editor de texto do Elementor
* As classes cuidam só de fonte, tamanho, peso e cor; espaçamento e alinhamento continuam com cada seção.
* O !important é de propósito: vence a tipografia que o Elementor grava em cada widget, para o tamanho
* não voltar a variar se alguém mexer num widget. O alinhamento (centro/esquerda) continua por seção. */
h2.dd-secao-titulo,
.dd-secao-titulo .elementor-heading-title {
font-family: var(--gd-fonte-marca) !important;
font-size: 46px !important;
font-weight: 400 !important;
line-height: 1.1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--pc-ameixa) !important;
}
p.dd-secao-descricao,
.dd-secao-descricao p,
.dd-secao-descricao .elementor-widget-container {
font-family: var(--gd-fonte) !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.55 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: #6A6157 !important;
}
@media (max-width: 989px) {
h2.dd-secao-titulo,
.dd-secao-titulo .elementor-heading-title { font-size: 34px !important; }
}
.dd-secao-descricao p:last-child { margin-bottom: 0; }
/* Carrossel padrão (assets/js/carrossel.js), comum a todos os carrosséis de cards. O encaixe é feito pelo js:
* o scroll-snap nativo desfaz o pulo do loop e trava o arraste, por isso fica desligado aqui. */
[data-dd-trilho] { position: relative; scroll-snap-type: none !important; scroll-behavior: auto !important; }
[data-dd-trilho]:not(.is-cabe) { cursor: grab; touch-action: pan-y; } /* o dedo na horizontal vai para o js; na vertical, rola a página */
[data-dd-trilho].is-arrastando { cursor: grabbing; -webkit-user-select: none; user-select: none; }
[data-dd-trilho].is-arrastando > * { pointer-events: none; } /* sem hover dos cards (sobe, zoom na foto) enquanto arrasta: redesenhava imagens a cada quadro */
[data-dd-trilho] img { -webkit-user-drag: none; }
/* ============ Coleção Ginga: etiqueta, fio e frase (02/10/2026) ============
* .dd-etiqueta: rótulo em Jost fina MAIÚSCULA com espaçamento largo (ex.: "TEXTURAS QUE CONTAM HISTÓRIAS.").
* Use com moderação: acima de um título ou numa foto. No Elementor: Avançado > Classes CSS.
* .dd-fio: o fio fino curto do moodboard (40px x 1px), como divisor.
* .dd-frase: frase da marca em Cormorant; o dentro dela vira o itálico de ênfase. */
.dd-etiqueta,
.dd-etiqueta .elementor-heading-title,
.dd-etiqueta p {
font-family: var(--gd-fonte) !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
letter-spacing: 0.32em !important;
text-transform: uppercase !important;
color: var(--gk-taupe-escuro);
}
.dd-etiqueta p { margin: 0; }
.dd-fio { display: block; width: 40px; height: 1px; background: currentColor; border: 0; margin: 0; }
.dd-fio .elementor-divider-separator { width: 40px !important; }
.dd-frase .elementor-heading-title,
p.dd-frase {
font-family: var(--gd-fonte-marca) !important;
font-weight: 400 !important;
font-size: 44px !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
color: var(--gk-preto);
}
.dd-frase em { display: block; font-style: italic; }
@media (max-width: 767px) {
.dd-frase .elementor-heading-title, p.dd-frase { font-size: 31px !important; }
}