/*
 * Ajustes das páginas montadas no Elementor (home, produto, loja, gaveta do menu) e do WooCommerce
 * com o tema Hello. Cores, fontes e espaços principais ficam nos widgets; aqui só o que eles não cobrem.
 */
/* ============ Slider da home (2 widgets Carrossel de mídia: computador e celular, classe dd-slider) ============ */
/* O banner passa por baixo do cabeçalho: o bloco com a classe dd-sob-cabecalho sobe a altura da faixa
 * transparente em volta da cápsula (12 + 64 + 12 no computador, 8 + 56 + 8 no celular). Sem fundo nas imagens. */
/* 30/09/2026 (dono): o cabeçalho inteiro fica no topo e o banner começa abaixo dele; a classe fica só por compatibilidade. */
.dd-sob-cabecalho { margin-top: 0 !important; }
@media (max-width: 767px) {
	.dd-sob-cabecalho { --dd-faixa-cabecalho: 72px; }
}
/* Bolinhas (dentro da cápsula branca, ver abaixo): ameixa clarinho; a ativa fica rosa com um anel fino que vai se desenhando até o próximo banner.
 * O anel só mostra a parte já preenchida, com as pontas arredondadas: ::after é o traço (conic-gradient
 * recortado em aro, com a ponta inicial) e ::before gira junto levando a ponta final.
 * O tempo (--dd-tempo) e a espera da troca (--dd-espera) vêm do js/slider.js, lidos do widget. */
.dd-slider .swiper-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; height: calc(var(--dd-bola-ativa) + 2 * var(--dd-anel-raio)); }
.dd-slider .swiper-pagination-bullet {
	position: relative;
	flex: none;
	width: var(--dd-bola) !important;
	height: var(--dd-bola) !important;
	margin: 0 !important;
	border: 0;
	background: rgba(20, 17, 14, 0.2);
	opacity: 1 !important;
	transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
}
.dd-slider .swiper-pagination-bullet:hover { background: rgba(20, 17, 14, 0.4); }
.dd-slider .swiper-pagination-bullet-active, .dd-slider .swiper-pagination-bullet-active:hover { width: var(--dd-bola-ativa) !important; height: var(--dd-bola-ativa) !important; background: var(--dd-slider-rosa); }
@property --dd-anel { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.dd-slider .swiper-pagination-bullet-active::before, .dd-slider .swiper-pagination-bullet-active::after {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--dd-anel-raio));
	border-radius: 50%;
	pointer-events: none;
	--dd-ponta: radial-gradient(circle at 50% calc(var(--dd-traco) / 2), var(--dd-slider-rosa) calc(var(--dd-traco) / 2), transparent calc(var(--dd-traco) / 2 + 0.5px));
}
.dd-slider .swiper-pagination-bullet-active::after {
	background: var(--dd-ponta), conic-gradient(var(--dd-slider-rosa) var(--dd-anel), transparent 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--dd-traco) - 0.25px), #000 calc(100% - var(--dd-traco) + 0.25px));
	mask: radial-gradient(farthest-side, transparent calc(100% - var(--dd-traco) - 0.25px), #000 calc(100% - var(--dd-traco) + 0.25px));
	animation: dd-anel var(--dd-tempo, 5s) linear var(--dd-espera, 0s) both;
}
.dd-slider .swiper-pagination-bullet-active::before { background: var(--dd-ponta); animation: dd-anel-ponta var(--dd-tempo, 5s) linear var(--dd-espera, 0s) both; }
.dd-slider .dd-anel-zera::before, .dd-slider .dd-anel-zera::after { animation: none; }
.dd-slider.dd-sem-anel .swiper-pagination-bullet-active::before, .dd-slider.dd-sem-anel .swiper-pagination-bullet-active::after { content: none; }
@keyframes dd-anel { to { --dd-anel: 100%; } }
@keyframes dd-anel-ponta { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Topo "com tampa" (escolhido em 25/09/2026, docs/marca/topo-rodape.html opção B): o banner termina numa
 * curva, como a base do pote, e setas + bolinhas ficam numa cápsula branca com a tampa rosa por cima,
 * metade para fora do banner. O js/slider.js move setas e paginação para a .dd-capsula. */
.dd-slider {
	--dd-slider-rosa: #7D6A55;
	--dd-bola: 8px;
	/* bolinha parada */
	--dd-bola-ativa: 10px;
	/* bolinha ativa */
	--dd-folga: 4px;
	/* espaço entre a bolinha ativa e o anel */
	--dd-traco: 2px;
	/* espessura do anel */
	--dd-anel-raio: calc(var(--dd-folga) + var(--dd-traco));
	margin-bottom: 30px;
}
.dd-slider, .dd-slider > .elementor-widget-container { position: relative; }
/* 30/09/2026 (dono): base reta (modelo 2 de docs/marca/banner-base.html). Se não agradar, próximo teste é o banner em cartão
 * (modelo 4) e, por último, voltar à curva com raio menor (era `0 0 50% 50% / 0 0 56px 56px`; 28px no celular). */
.dd-slider .swiper { cursor: grab; border-radius: 0; }
/* Altura real do banner (dono, 30/09/2026): o slider acompanha a proporção da arte (1920x656) em vez da altura fixa
 * do widget (560/380/400 px), sem cortar nem ampliar. Trocar a proporção aqui se as artes mudarem de tamanho. */
.dd-slider .elementor-main-swiper { height: auto !important; aspect-ratio: 1920 / 656; }
@media (max-width: 767px) {
	.dd-slider .elementor-main-swiper { aspect-ratio: 1080 / 1350; }
}
/* artes verticais do celular (30/09/2026) */
/* Banner do meio da home ("Pagamento facilitado", 30/09/2026): de ponta a ponta, sem espaço em volta, altura real. */
/* Fundo em degradê do branco para o blush da dobra "Monte sua rotina" (dono, 30/09/2026): o cartão flutua sobre a
 * transição e a dobra de baixo não "quebra" colada nele. */
.dd-banner-meio { padding: 56px 0 !important; background: #fff; }
.dd-banner-meio .elementor-widget-image, .dd-banner-meio .elementor-widget-container { width: 100%; line-height: 0; }
/* Dono (30/09/2026): o banner do meio em cartão igual ao do topo (85% da tela, cantos 28, sombra; celular 100% - 24px, cantos 18),
 * no celular e no computador. */
.dd-banner-meio .elementor-widget-image { width: max(85vw, min(1200px, 100% - 32px)); margin: 0 auto; }
/* Seletor com a classe do widget: a regra `.elementor-widget-image img` do Elementor carrega depois e empatava. */
/* Ginga (02/10/2026): sem sombra, só um fio fino em volta (o banner é papel sobre branco). */
.dd-banner-meio .elementor-widget-image img { display: block; width: 100%; height: auto; border-radius: 8px !important; box-shadow: none; outline: 1px solid #DED5C8; outline-offset: -1px; }
@media (max-width: 767px) {
	.dd-banner-meio { padding: 32px 0 !important; }
	.dd-banner-meio .elementor-widget-image { width: calc(100% - 24px); }
	.dd-banner-meio .elementor-widget-image img { border-radius: 8px !important; }
}
/* Banner em cartão (modelo 4 de docs/marca/banner-base.html): o dono voltou ao cartão em 30/09/2026, com 85% da tela
 * (nunca mais estreito que o conteúdo). Para o banner de ponta a ponta, apague estas 2 regras. */
.dd-slider .elementor-main-swiper {
	width: max(85vw, min(1200px, 100% - 32px));
	max-width: none;
	margin: 16px auto 0;
	border-radius: 8px;
	box-shadow: none;
}
@media (max-width: 767px) {
	.dd-slider .elementor-main-swiper { width: calc(100% - 24px); margin-top: 8px; border-radius: 8px !important; overflow: hidden; }
}
.dd-slider:not(.dd-slider-pronto) :is(.swiper-pagination, .elementor-swiper-button) { opacity: 0; }
/* até a cápsula montar */
.dd-capsula {
	position: absolute;
	z-index: 2;
	top: calc(100% - 21px);
	/* metade da altura: 34 + 2 × 4 */
	left: 50%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 6px;
	border-radius: var(--gk-raio, 6px);
	background: #fff;
	box-shadow: 0 6px 24px rgba(20, 17, 14, 0.16);
	transform: translateX(-50%);
}
.dd-capsula::before {
	/* a tampa do pote */
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	width: 52px;
	height: 7px;
	border-radius: 4px;
	background: var(--dd-slider-rosa);
	transform: translateX(-50%);
}
.dd-capsula .swiper-pagination { position: static !important; width: auto !important; transform: none !important; }
.dd-capsula .elementor-swiper-button {
	position: static !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0 !important;
	border-radius: 50%;
	background: transparent;
	transform: none !important;
	transition: background-color 0.2s;
}
.dd-capsula .elementor-swiper-button:hover { background: #E9E1D6; }
.dd-capsula .elementor-swiper-button :is(svg, i) { width: 14px; height: 14px; font-size: 14px; }
@media (max-width: 767px) {
	.dd-capsula { top: calc(100% - 15px); padding: 4px 14px; }
	.dd-capsula .elementor-swiper-button { display: none; }
}
/* ============ Perguntas frequentes (widget Alternância com classe dd-faq) ============
 * Opção B de docs/marca/faq.html: as perguntas num cartão branco com borda fina (o mesmo da faixa de benefícios),
 * linhas finas entre elas, "+" num círculo blush que vira "−" rosa ao abrir. */
.dd-faq .elementor-toggle { padding: 6px 28px; border: 1px solid #DED5C8; border-radius: 10px; background: #fff; }
.dd-faq .elementor-toggle-item { border: 0 !important; border-radius: 0; }
.dd-faq .elementor-toggle-item + .elementor-toggle-item { border-top: 1px solid #DED5C8 !important; }
.dd-faq .elementor-tab-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 0 !important; }
.dd-faq .elementor-tab-title .elementor-toggle-title { order: 1; flex: 1; }
.dd-faq .elementor-tab-title.elementor-active .elementor-toggle-icon { background: var(--pc-rosa); }
/* + e − desenhados com duas linhas no centro exato do círculo (os ícones do Elementor ficam escondidos):
 * ao abrir, a linha vertical gira até deitar e vira −, no mesmo tempo da animação da resposta. */
.dd-faq .elementor-tab-title .elementor-toggle-icon {
	order: 2;
	flex: none;
	display: grid;
	place-items: center;
	width: 32px !important;
	height: 32px;
	border-radius: 50%;
	background: var(--pc-blush);
	transition: background-color 0.2s;
	position: relative;
}
.dd-faq .elementor-toggle-icon > span { display: none !important; }
.dd-faq .elementor-toggle-icon::before, .dd-faq .elementor-toggle-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	border-radius: 1px;
	background: var(--pc-ameixa);
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.2s;
}
.dd-faq .elementor-toggle-icon::after { transform: rotate(90deg); }
.dd-faq .elementor-tab-title.elementor-active .elementor-toggle-icon::before, .dd-faq .elementor-tab-title.elementor-active .elementor-toggle-icon::after { background: #fff; }
.dd-faq .elementor-tab-title.elementor-active .elementor-toggle-icon::after { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) {
	.dd-faq .elementor-toggle-icon::before, .dd-faq .elementor-toggle-icon::after { transition: none; }
}
.dd-faq .elementor-tab-title:hover .elementor-toggle-icon:not(:is(.elementor-active *)) { background: #E5DED4; }
.dd-faq .elementor-tab-content { border: 0 !important; }
.dd-faq .elementor-tab-content p { margin: 0; max-width: 62ch; }
.dd-faq .elementor-tab-content a { color: var(--pc-ameixa); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.dd-faq .elementor-tab-content a:hover { color: var(--pc-rosa-escuro); }
.dd-faq-atendimento .dd-simbolo-claro img { filter: brightness(0) invert(1); opacity: 0.95; }
/* símbolo do pote em claro sobre o ameixa */
.dd-faq-email p { margin: 0; opacity: 0.85; }
.dd-faq-email a, .dd-faq-email a:hover { color: #F6F2EC !important; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
/* Tablet e celular: o cartão do WhatsApp desce para depois das perguntas (a introdução vira "transparente" para o flex). */
@media (max-width: 989px) {
	.dd-faq-intro { display: contents !important; }
	.dd-faq-intro > .elementor-widget { width: 100%; }
	.dd-faq { order: 1 !important; width: 100%; }
	.dd-faq-atendimento { order: 2 !important; max-width: 520px; margin-inline: auto !important; }
}
@media (max-width: 767px) {
	.dd-faq .elementor-toggle { padding: 2px 18px; border-radius: 10px; }
	.dd-faq .elementor-tab-content { padding-right: 0 !important; }
}
#perguntas-frequentes { scroll-margin-top: 110px; }
/* Computador: o lado esquerdo acompanha a rolagem, logo abaixo da cápsula do cabeçalho (!important: o .e-con do Elementor força relative). */
@media (min-width: 990px) {
	.dd-faq-intro { position: sticky !important; top: 112px; align-self: flex-start; }
	.admin-bar .dd-faq-intro { top: 144px; }
}
/* Abrir e fechar: a animação é do js/cabecalho.js (uma pergunta aberta por vez); aqui só o recorte durante a animação. */
.dd-faq .elementor-tab-content.dd-animando { overflow: hidden; }
/* ============ Gaveta do menu (Popup, classe dd-gaveta-popup) ============ */
/* Menu "com abas" (docs/marca/cabecalho-menu.html, opção C): fecha num círculo blush, abas em cápsula com a
 * tampa rosa na aba aberta, coleções em linhas com miniatura, objetivos em grade 2x2 e o banner no fim. */
.dd-gaveta-popup .dialog-close-button {
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 50%;
	background: var(--pc-blush) !important;
}
.dd-gaveta-popup .dialog-close-button :is(svg, i) { margin: 0; }
.dd-gaveta-popup .dialog-message { overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.dd-gaveta-popup .elementor-location-popup { flex: 1; display: flex; flex-direction: column; }
.dd-gaveta-popup .elementor-location-popup > .e-con:last-child { flex: 1; }
.dd-abas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 4px;
	border-radius: 999px;
	background: var(--pc-blush);
	font-family: var(--gd-fonte);
}
.dd-abas [role="tab"] {
	position: relative;
	height: 40px;
	padding: 0 8px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--pc-ameixa);
	font: 500 14px/1 var(--gd-fonte);
	cursor: pointer;
	transition: background-color 0.2s, box-shadow 0.2s;
}
.dd-abas [role="tab"]:hover { background: rgba(255, 255, 255, 0.6); }
.dd-abas [role="tab"][aria-selected="true"] { background: #fff; box-shadow: 0 2px 8px rgba(20, 17, 14, 0.1); }
.dd-abas [role="tab"][aria-selected="true"]::before {
	/* a tampa do pote */
	content: "";
	position: absolute;
	top: -3px;
	left: 50%;
	width: 22px;
	height: 5px;
	border-radius: 3px;
	background: var(--pc-rosa);
	transform: translateX(-50%);
}
.dd-abas [role="tab"]:focus-visible { outline: 2px solid var(--pc-rosa-escuro); outline-offset: 2px; }
.dd-painel-oculto { display: none !important; }
.dd-menu-lista { margin: 0; padding: 0; list-style: none; font-family: var(--gd-fonte); }
.dd-menu-lista .dd-menu-linha {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: 10px;
	color: var(--pc-ameixa);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s;
}
.dd-menu-lista .dd-menu-linha:hover { background: var(--pc-papel); color: var(--pc-ameixa); }
.dd-menu-lista .dd-menu-linha--oferta, .dd-menu-lista .dd-menu-linha--oferta:hover { color: var(--pc-rosa-escuro); }
.dd-menu-mini {
	flex: none;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--pc-blush);
	overflow: hidden;
}
.dd-menu-mini img { width: 46px; height: 46px; object-fit: contain; }
.dd-menu-inicial { font: 500 20px var(--gd-fonte-marca); color: var(--pc-rosa-escuro); }
.dd-menu-seta { margin-left: auto; color: #6A6157; flex: none; }
.dd-menu-linha:focus-visible { outline: 2px solid var(--pc-rosa-escuro); outline-offset: -2px; }
/* Gaveta (30/09/2026, dono: "somente os nomes"): linhas sem foto nem círculo, na aba Coleções e na aba Menu. */
.dd-menu-lista .dd-menu-linha--so-nome { padding: 12px 8px; }
.dd-menu-lista .dd-menu-linha--so-nome .dd-menu-nome { flex: 1; }
/* Aba "Menu" da gaveta: grupos Conta / Ajuda e, no fim, um bloco como o rodapé (WhatsApp verde + redes). */
.dd-menu-links { display: flex; flex-direction: column; gap: 10px; }
.dd-menu-grupo-titulo { margin: 0 0 2px 8px; font: 500 11px/16px var(--gd-fonte); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pc-rosa-escuro); }
.dd-menu-rodape {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 14px 8px 0;
	padding: 18px 16px;
	border-radius: 10px;
	background: var(--pc-blush);
}
.dd-menu-zap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	padding: 0 18px;
	border-radius: var(--gk-raio, 6px);
	background: #25D366;
	color: #fff;
	font: 500 15px/1 var(--gd-fonte);
	text-decoration: none;
	transition: background-color 0.2s;
}
.dd-menu-zap:hover, .dd-menu-zap:focus-visible, .dd-menu-zap:hover span { background: #25D366; color: #fff !important; }
/* dono (30/09/2026): no hover só o texto fica branco, fundo igual */
.dd-menu-redes { display: flex; gap: 12px; }
.dd-menu-rede {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #fff;
	color: var(--pc-ameixa);
	transition: background-color 0.2s, color 0.2s;
}
.dd-menu-rede:hover, .dd-menu-rede:focus-visible { background: var(--pc-ameixa); color: #fff; }
.dd-gaveta-objetivos .elementor-image-box-wrapper { display: grid; justify-items: center; gap: 8px; }
.dd-gaveta-objetivos .elementor-image-box-img { width: 100% !important; margin: 0 !important; }
.dd-gaveta-objetivos .elementor-image-box-img img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: 8px; }
.dd-gaveta-rotina { margin-top: auto; }
.gd-colecoes { font-family: var(--gd-fonte); color: var(--gd-roxo); }
.gd-colecao { margin-top: 20px; border-radius: 15px; background: var(--gd-fundo); }
.gd-colecao[open] { background: #D7CBBB; }
.gd-colecao summary { position: relative; display: flex; align-items: center; height: 50px; padding: 0 20px; list-style: none; cursor: pointer; }
.gd-colecao summary::-webkit-details-marker { display: none; }
.gd-colecao-nome { font-size: 20px; font-weight: 600; line-height: 20px; letter-spacing: 1px; color: var(--gd-cor); }
.gd-colecao .gd-colecao-img {
	position: absolute;
	right: 7px;
	bottom: 0;
	width: auto;
	max-width: 45%;
	height: 64px;
	object-fit: contain;
	object-position: right bottom;
	pointer-events: none;
}
.gd-colecao[open] .gd-colecao-img { display: none; }
.gd-colecao .gd-produto img { width: 101px; height: 111px; object-fit: contain; }
.gd-colecao-sinal { display: none; }
.gd-colecao[open] .gd-colecao-sinal {
	display: block;
	margin-left: auto;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: #fff linear-gradient(var(--gd-rosa), var(--gd-rosa)) center / 10px 2px no-repeat;
}
.gd-produtos { display: flex; gap: 16px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
.gd-produtos::-webkit-scrollbar { display: none; }
.gd-produto {
	flex: 0 0 150px;
	height: 147px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 8px 8px;
	border-radius: 15px;
	background: #F6F2EC;
	text-decoration: none;
	box-sizing: border-box;
}
.gd-produto img { width: 101px; height: 111px; object-fit: contain; }
.gd-produto span {
	margin-top: 10px;
	max-width: 100%;
	overflow: hidden;
	font-size: 15px;
	font-weight: 500;
	line-height: 18.75px;
	color: var(--gd-roxo);
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.gd-colecao-ver {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 57px;
	padding: 0 20px;
	font-size: 16px;
	font-weight: 600;
	color: var(--gd-rosa);
	text-decoration: none;
}
.gd-colecao:not([open]) .gd-colecao-ver { display: none; }
.gd-colecao :focus-visible { outline: 2px solid var(--gd-rosa); outline-offset: 2px; }
/* ============ Página de produto (modelo Single Product; coluna de compra com a classe dd-compra) ============ */
@media (min-width: 990px) {
	.dd-compra { position: sticky; top: 90px; align-self: flex-start; }
}
.dd-compra form.cart:not(.variations_form), .dd-compra .variations_form .woocommerce-variation-add-to-cart { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; width: 100%; }
.dd-compra .single_add_to_cart_button { width: 100%; }
.dd-compra .containerCalculator { order: 3; width: 100%; max-width: 100%; box-sizing: border-box; }
.dd-compra .woocommerce-product-rating { margin: 0; }
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery img { border-radius: 15px; background: #F6F2EC; }
body .elementor-widget-woocommerce-product-images span.onsale, body.woocommerce span.onsale, body .woocommerce span.onsale {
	min-width: 0;
	min-height: 0;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: var(--gd-badge);
	color: #fff;
	font: 500 13px/1.4 var(--gd-fonte);
}
.woocommerce div.product .stock, .elementor-widget-woocommerce-product-add-to-cart .stock { color: var(--gd-roxo); font: 500 14px var(--gd-fonte); }
.woocommerce-Tabs-panel > h2:first-child { display: none; }
/* "Descrição" repetido embaixo da aba */
/* ============ WooCommerce com o Hello ============ */
/* Sem #respond input#submit dentro do :is(): o id deixaria a regra forte demais e ela venceria os botões dos widgets. */
.woocommerce :is(a.button, button.button, input.button), .woocommerce #respond input#submit, .woocommerce :is(a.button.alt, button.button.alt, input.button.alt) {
	padding: 0.85rem 1.4rem;
	border: 0;
	border-radius: var(--gk-raio, 6px);
	background: var(--gd-roxo);
	color: #fff;
	font: 600 15px/1.2 var(--gd-fonte);
	letter-spacing: 0.02em;
}
.woocommerce :is(a.button, button.button, input.button):hover, .woocommerce #respond input#submit:hover, .woocommerce :is(a.button.alt, button.button.alt, input.button.alt):hover { background: var(--gd-rosa); color: #fff; }
.woocommerce :is(.woocommerce-message, .woocommerce-info) { border-top-color: var(--gd-roxo); }
.woocommerce :is(.woocommerce-message, .woocommerce-info)::before { color: var(--gd-roxo); }
.woocommerce .woocommerce-breadcrumb a { color: var(--gd-roxo); }
.woocommerce-ordering select {
	min-height: 44px;
	padding: 0.55rem 2rem 0.55rem 0.9rem;
	border: 1px solid var(--dd-linha);
	border-radius: var(--gk-raio, 6px);
	background-color: #fff;
	color: var(--gd-roxo);
	font: 500 14px var(--gd-fonte);
}
.woocommerce .star-rating span::before { color: #7D6A55; }
@media (max-width: 781px) {
	.woocommerce-cart-form { overflow-x: auto; }
}
/* Checkout em 2 colunas, resumo do pedido à direita */
@media (min-width: 960px) {
	form.checkout.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: auto 1fr; gap: 0 3rem; align-items: start; }
	form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
	form.checkout #customer_details .col-1, form.checkout #customer_details .col-2 { float: none; width: 100%; }
	form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
	form.checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 7rem; padding: 1.25rem; border-radius: var(--dd-raio-medio); background: #F6F2EC; }
}
/* Campo vazio não parece "validado" */
.woocommerce form .form-row.woocommerce-validated input.input-text:placeholder-shown { border-color: #666; }
/* Carrinho lateral (Side Cart): mais espaço para o nome e botões que cabem */
.xoo-wsc-sm-left { flex: 1 1 auto; }
.xoo-wsc-sm-right { flex: 0 0 auto; }
.xoo-wsc-pname, .xoo-wsc-pname a { word-break: normal; overflow-wrap: normal; hyphens: manual; }
.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn { padding: 0.75rem 0.5rem; font-size: 0.85rem; white-space: normal; text-align: center; }
@media (max-width: 480px) {
	.xoo-wsc-sum-col, .xoo-wsc-sm-info { flex-direction: column !important; align-items: stretch !important; }
	.xoo-wsc-sm-left { width: 100%; }
	.xoo-wsc-sm-right {
		flex: 1 1 auto !important;
		flex-wrap: wrap !important;
		flex-direction: row !important;
		justify-content: space-between;
		align-items: center !important;
		gap: 0.5rem;
		width: 100%;
		margin-top: 0.4rem;
	}
	.xoo-wsc-psavings { display: none !important; }
	.xoo-wsc-ft-buttons-cont { display: grid !important; grid-template-columns: 1fr !important; gap: 0.5rem; }
	.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn { width: 100%; }
}
h1, h2, h3 { text-wrap: balance; }
@media (prefers-reduced-motion: reduce) {
	.dd-slider .swiper-pagination-bullet { transition: none; }
	.dd-slider .swiper-pagination-bullet-active::after { animation: none; --dd-anel: 100%; }
	.dd-slider .swiper-pagination-bullet-active::before { animation: none; }
}
/* Botão de compra da página de produto: rosa da marca com texto grande e negrito (vence a regra geral de botões acima). */
.dd-compra :is(button, a).single_add_to_cart_button, .dd-compra :is(button, a).single_add_to_cart_button.alt { background: var(--pc-rosa); color: #fff; font-size: 19px; font-weight: 500; }
.dd-compra :is(button, a).single_add_to_cart_button:hover { background: var(--pc-ameixa); color: #fff; }
/* ============ Rodapé "com cartões" (docs/elementor/cabecalho-rodape.php) ============ */
/* Topo do rodapé em curva, espelhando a base curva do banner da home (o desenho do pote). */
.dd-rodape { border-radius: 50% 50% 0 0 / 56px 56px 0 0 !important; }
/* !important: o .e-con do Elementor zera o raio */
@media (max-width: 767px) {
	.dd-rodape { border-radius: 50% 50% 0 0 / 28px 28px 0 0 !important; }
}
.dd-rodape-selos img { width: auto !important; }
/* selos e bandeiras seguem a altura, sem esticar */
.dd-rodape-selos > .e-con-inner::before {
	/* linha fina em cima, numa linha própria do flex (o gap dá o respiro) */
	content: "";
	flex: 0 0 100%;
	height: 1px;
	margin-bottom: 4px;
	background: rgba(20, 17, 14, 0.14);
}
.dd-rodape-cartao-texto a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.dd-rodape-cartao-texto a:hover { color: #6F5D49; }
.dd-rodape-cartao-texto p { margin: 0; }
/* ============ Faixa de benefícios da home (classe dd-beneficios, docs/marca/beneficios.html opção C2 em branco) ============ */
.dd-beneficios > .elementor-widget + .elementor-widget { border-left: 1px solid #DED5C8; }
.dd-beneficios .elementor-icon-box-icon { margin-top: 2px; }
.dd-beneficios .elementor-icon-box-title { margin-top: 0; }
@media (max-width: 989px) {
	.dd-beneficios > .elementor-widget:nth-child(3) { border-left: 0; }
}
@media (max-width: 767px) {
	.dd-beneficios > .elementor-widget + .elementor-widget { border-left: 0; border-top: 1px solid #DED5C8; }
}
/* ============ Monte sua rotina (classe dd-rotina): largura total ============
 * O texto também sai da largura padrão (1200px) e fica perto da borda esquerda, com um respiro
 * (sem encostar); o carrossel vai até a borda direita da tela. */
.dd-rotina { padding-left: clamp(24px, 3.5vw, 64px) !important; padding-right: 0 !important; }
.dd-rotina .dd-cd-base { padding-right: clamp(24px, 3.5vw, 64px); }
@media (max-width: 989px) {
	.dd-rotina { padding-left: 16px !important; }
	.dd-rotina .dd-cd-trilho { margin-right: 0; padding-right: 16px; }
}
@media (max-width: 767px) {
	.dd-rotina { padding-left: 12px !important; }
}
/* ===== Padrão mobile (auditoria de 30/09/2026): seções com 48px, botões 16px/48px ===== */
.dd-rodape-cartao .elementor-button, .dd-faq .elementor-button { min-height: 48px; font-size: 16px !important; }
@media (max-width: 767px) {
	.dd-rotina { padding-top: 48px !important; padding-bottom: 48px !important; }
}
/* Botões do Elementor (home, FAQ, rodapé) com a mesma altura de 48px dos botões da loja. */
.elementor-widget-button .elementor-button { min-height: 48px; box-sizing: border-box; }
.dd-faq-atendimento .elementor-button { font-size: 16px !important; }

/* ===== Coleção Ginga (02/10/2026): botões do WooCommerce pretos de cantos 3px, Jost maiúscula espaçada, hover taupe. ===== */
.woocommerce :is(a.button, button.button, input.button), .woocommerce #respond input#submit, .woocommerce :is(a.button.alt, button.button.alt, input.button.alt) {
	font: 500 13px/1.2 var(--gd-fonte);
	letter-spacing: 0.01em;
	text-transform: none;
}
.woocommerce :is(a.button, button.button, input.button):hover, .woocommerce #respond input#submit:hover, .woocommerce :is(a.button.alt, button.button.alt, input.button.alt):hover { background: var(--gk-taupe, #7D6A55); }
/* "Por que escolher": as três frases do moodboard em etiqueta, cada uma com o fio fino na frente. */
.dd-ginga-lista ul { margin: 4px 0 6px; padding: 0; list-style: none; display: grid; gap: 12px; }
.dd-ginga-lista li { display: flex; align-items: center; gap: 14px; font: 400 12px/1.5 var(--gd-fonte); letter-spacing: .28em; text-transform: uppercase; color: var(--gk-preto, #14110E); }
.dd-ginga-lista li::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--gk-taupe, #7D6A55); }
/* Faixa da frase (home): etiquetas em preto sobre a areia forte (o taupe ali ficaria abaixo de 4,5). */
.dd-faixa-ginga .dd-etiqueta .elementor-heading-title { color: var(--gk-preto, #14110E) !important; }
.dd-faixa-ginga .dd-frase .elementor-heading-title { max-width: 18ch; margin-inline: auto; }
/* Botões em maiúscula espaçada não quebram linha (o "Falar no WhatsApp" do rodapé quebrava). */
.dd-rodape-cartao .elementor-button-text, .dd-faq-atendimento .elementor-button-text { white-space: nowrap; }
.dd-rodape-cartao .elementor-button { padding-inline: 16px !important; letter-spacing: 1.2px !important; }

/* Botões do Elementor com texto realmente centralizado (02/10/2026): a Jost tem ascendente alto e o texto
   ficava ~2px acima do centro (ex.: "Chamar no WhatsApp" do FAQ e "Falar no WhatsApp" do rodapé). */
.elementor-button { display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.02em !important; text-transform: none !important; }
.elementor-button .elementor-button-content-wrapper { display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1; }
.elementor-button .elementor-button-text { display: block; line-height: 1; padding-top: 0.12em; }
.elementor-button .elementor-button-icon { display: inline-flex; align-items: center; }

/* Dobra "Nova coleção" da home (dono, 02/10/2026: "texto pequeno, apagado e muito no canto"): o texto começa
   alinhado com o resto do site (container de 1200px), título e descrição maiores e mais escuros. */
@media (min-width: 1025px) {
	.dd-rotina > .e-con:first-child { flex: 0 0 auto !important; width: 440px !important; max-width: none !important; padding-left: 64px !important; padding-right: 40px !important; }
	.dd-rotina > .e-con:first-child .elementor-widget { width: 100%; max-width: 340px; }
}
/* Nessa dobra o fundo é areia: as fotos dos óculos (PNG sem fundo) ficam sem o quadro branco do card. */
.dd-rotina .gd-card-arco { background: transparent !important; }
}
.dd-rotina .elementor-widget-heading .elementor-heading-title { font-size: 58px !important; line-height: 1.05 !important; }
.dd-rotina .elementor-widget-heading:first-child .elementor-heading-title { font-size: 13px !important; line-height: 1.4 !important; color: #6F5D49 !important; }
.dd-rotina .elementor-widget-text-editor, .dd-rotina .elementor-widget-text-editor p { font-size: 19px !important; line-height: 1.55 !important; color: #3A332C !important; max-width: 34ch; }
@media (max-width: 1024px) {
	.dd-rotina .elementor-widget-heading .elementor-heading-title { font-size: 42px !important; }
	.dd-rotina .elementor-widget-text-editor, .dd-rotina .elementor-widget-text-editor p { font-size: 17px !important; }
}

/* Faixa "2 óculos por R$ 199" no topo da loja e das categorias (1920x200). No celular a arte ficaria com ~40px:
   mantém 88px de altura e recorta as laterais (o texto está no centro). */
.dd-loja-topo .elementor-widget-image img { display: block; width: 100%; height: auto; border-radius: 0 !important; }
@media (max-width: 767px) { .dd-loja-topo .elementor-widget-image img { height: 88px; object-fit: cover; object-position: center; } }
/* Faixa Ginga (1920x200) no lugar do banner de pagamento: no celular mantém 88px e recorta as laterais. */
@media (max-width: 767px) { .dd-banner-faixa .elementor-widget-image img { height: 88px; object-fit: cover; object-position: center; } }