/*
 * Layout das partes globais e das seções da home.
 * Regras que só valem no site (não no editor) usam :where(body:not(.editor-styles-wrapper)).
 */

/* ---------- Faixa rolando (estilo de bloco; JS em assets/js/faixa-rolando.js) ---------- */
.is-style-faixa-rolando {
	overflow: hidden;
	white-space: nowrap;
}

/* Antes do JS montar o trilho: cada frase numa linha só (o text-wrap de p em base.css quebraria),
   para a faixa já nascer com a altura final e não empurrar a página (CLS). */
.is-style-faixa-rolando > * {
	flex: none;
	white-space: nowrap;
}

.ds-faixa__trilho,
.ds-faixa__grupo {
	display: flex;
	flex: none;
	align-items: center;
	gap: inherit;
}

.ds-faixa__trilho {
	width: max-content;
	animation: ds-rolar 40s linear infinite;
}

.ds-faixa__grupo {
	padding-inline-end: var(--wp--style--block-gap, 2rem);
}

.is-style-faixa-rolando:hover .ds-faixa__trilho {
	animation-play-state: paused;
}

@keyframes ds-rolar {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-style-faixa-rolando {
		white-space: normal;
	}

	.ds-faixa__trilho {
		width: auto;
		animation: none;
	}

	.ds-faixa__grupo {
		flex-wrap: wrap;
		justify-content: center;
		padding-inline-end: 0;
	}

	.ds-faixa__grupo[aria-hidden="true"],
	.ds-faixa__grupo > [aria-hidden="true"] {
		display: none;
	}
}

/* ---------- Header ---------- */
/* Em telas muito largas, logo e ícones acompanham a largura de 1400 px das seções (D100) */
.ds-header__barra {
	padding-inline: max(var(--wp--custom--gutter), calc((100% - 1400px) / 2)) !important;
}

.ds-header__barra,
.ds-header-checkout {
	z-index: 20;
	padding-inline: var(--wp--custom--gutter);
}

.ds-header-checkout p {
	margin: 0;
}

@media (max-width: 599px) {
	.ds-compra-segura {
		display: none;
	}
}

.ds-menu {
	font-size: var(--wp--preset--font-size--md);
}

.ds-logo {
	flex: none;
	margin: 0;
}

.ds-logo img {
	width: clamp(120px, 1vw + 116px, 130px) !important;
	height: auto;
}

.ds-header__icones {
	flex: none;
}

.ds-header__icones :where(.wp-block-search__button, .wc-block-mini-cart__button, .wc-block-customer-account a) {
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--tinta);
	transform: none;
}

.ds-header__icones .wp-block-search__button svg,
.ds-header__icones .wc-block-mini-cart__icon,
.ds-header__icones .wc-block-customer-account svg {
	width: 26px;
	height: 26px;
}

.ds-header .wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
}

/* Campo da busca sem contorno de foco: o cursor piscando já mostra onde digitar (D144) */
.ds-header .wp-block-search__input:focus {
	outline: none;
}

/* Busca no celular e no tablet (até 1023 px, onde o menu vira sanduíche): a lupa fica na barra e o campo abre numa linha
   própria embaixo dela, com a barra creme crescendo para caber o campo. Antes o campo abria ao lado da lupa e empurrava
   o carrinho e o menu para fora da tela. Abre e fecha com o próprio bloco Busca (fecha ao tocar fora ou com Esc) (D120). */
@media (max-width: 1023px) {
	.ds-header__barra {
		transition: padding-bottom 0.2s ease;
	}

	/* !important vence o padding que o grupo grava no próprio HTML */
	.ds-header__barra:has(.wp-block-search:not(.wp-block-search__searchfield-hidden)) {
		padding-bottom: calc(var(--wp--preset--spacing--20) * 2 + var(--wp--custom--altura-controle)) !important;
	}

	.ds-header .wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		position: absolute;
		right: var(--wp--custom--gutter);
		bottom: var(--wp--preset--spacing--20);
		left: var(--wp--custom--gutter);
		width: auto !important;
		height: var(--wp--custom--altura-controle);
		padding-inline: 1.25rem;
		animation: ds-busca-abre 0.2s ease;
	}

	/* Lupa marcada enquanto o campo está aberto */
	.ds-header__icones .wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button {
		border-radius: 50%;
		background: var(--wp--preset--color--amarelo);
	}
}

@keyframes ds-busca-abre {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

/* Busca rápida do cabeçalho (D141): painel com 2 produtos e "Ver todos", logo abaixo do campo (busca-cabecalho.js).
   No PC fica preso ao campo, alinhado à direita; até 1023 px ocupa a largura do campo aberto, embaixo da barra. */
.ds-busca-rapida {
	position: absolute;
	z-index: 30;
	display: grid;
	gap: 0.75rem;
	box-sizing: border-box;
	padding: 0.75rem;
	border: 2px solid var(--wp--preset--color--tinta);
	border-radius: var(--wp--custom--raio--area);
	background: var(--wp--preset--color--creme);
	box-shadow: 5px 6px 0 var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--tinta);
	text-align: start;
	animation: ds-busca-abre 0.2s ease;
}

/* Sem o × azul do navegador no campo do cabeçalho (fora da paleta); Esc ou tocar fora fecham a busca */
.ds-header .wp-block-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none; /* Safari e WebKit só obedecem a versão com prefixo */
	appearance: none;
	display: none;
}

.ds-busca-rapida[hidden],
.wp-block-search__searchfield-hidden .ds-busca-rapida {
	display: none;
}

.ds-busca-rapida.is-buscando .ds-busca-rapida__lista {
	opacity: 0.55;
}

.ds-busca-rapida__status {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.ds-busca-rapida__lista {
	display: grid;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-busca-rapida__lista:empty {
	display: none;
}

.ds-busca-rapida__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.375rem;
	border-radius: var(--wp--custom--raio--campo);
	color: inherit;
	text-decoration: none;
}

.ds-busca-rapida__item:hover,
.ds-busca-rapida__item:focus-visible {
	background: var(--wp--preset--color--bege);
}

.ds-busca-rapida__item img {
	flex: none;
	width: 56px;
	height: 56px;
	border: 2px solid var(--wp--preset--color--tinta);
	border-radius: var(--wp--custom--raio--campo);
	object-fit: cover;
}

.ds-busca-rapida__texto {
	display: grid;
	gap: 0.125rem;
	min-width: 0;
}

.ds-busca-rapida__nome {
	overflow: hidden;
	font-weight: 600;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ds-busca-rapida__preco {
	font-size: var(--wp--preset--font-size--sm);
}

.ds-busca-rapida .ds-busca-rapida__todos {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	padding-block: 0.5rem;
	background-color: var(--wp--preset--color--amarelo);
	color: var(--wp--preset--color--tinta);
	font-size: var(--wp--preset--font-size--sm);
	text-align: center;
	text-decoration: none;
}

.ds-busca-rapida .ds-busca-rapida__todos[hidden] {
	display: none;
}

@media (min-width: 1024px) {
	.ds-header form.wp-block-search {
		position: relative;
	}

	.ds-busca-rapida {
		top: calc(100% + 0.75rem);
		right: 0;
		width: 360px;
	}
}

@media (max-width: 1023px) {
	.ds-busca-rapida {
		top: calc(100% + 0.5rem);
		right: var(--wp--custom--gutter);
		left: var(--wp--custom--gutter);
	}
}

.ds-menu .wp-block-navigation-item__content {
	padding: 0.5rem 0.25rem;
	text-decoration: none;
}

.ds-menu .wp-block-navigation-item__content:hover {
	text-decoration: underline wavy;
}

/* Áreas de toque de 44 px (Fase 8): botão do menu, seta do submenu, links do rodapé, redes sociais */
.ds-menu .wp-block-navigation__responsive-container-open,
.ds-menu .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

.ds-menu .wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-inline: -14px -10px;
}

.ds-menu .wp-block-navigation-item__content,
.ds-header-checkout a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* "Carrinho" no checkout: pílula amarela pequena (34 px) com seta, ícone do carrinho e sombra sólida (D114).
   A pílula é desenhada no ::after; o link em si continua com 44 px de altura para o toque. */
.ds-voltar-carrinho a {
	position: relative;
	isolation: isolate;
	gap: 0.4rem;
	padding: 0 0.85rem 0 0.6rem;
	color: var(--wp--preset--color--tinta);
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: transform 0.12s ease;
}

.ds-voltar-carrinho a::after {
	content: "";
	position: absolute;
	inset: 5px 0;
	z-index: -1;
	border: var(--wp--custom--borda--fina) solid var(--wp--preset--color--tinta);
	border-radius: var(--wp--custom--raio--pilula);
	background: var(--wp--preset--color--amarelo);
	box-shadow: 3px 3px 0 0 var(--wp--preset--color--tinta);
	transition: box-shadow 0.12s ease;
}

/* Seta e carrinho num elemento só (duas máscaras), para o texto do link continuar editável */
.ds-voltar-carrinho a::before {
	content: "";
	flex: none;
	width: 32px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("../images/icones/seta-voltar.svg") left center / 11px 11px no-repeat, url("../images/icones/carrinho.svg") right center / 20px 20px no-repeat;
	mask: url("../images/icones/seta-voltar.svg") left center / 11px 11px no-repeat, url("../images/icones/carrinho.svg") right center / 20px 20px no-repeat;
}

/* Mouse e clique: afunda no lugar da sombra, como os botões (D77) */
.ds-voltar-carrinho a:is(:hover, :active) {
	transform: translate(3px, 3px);
}

.ds-voltar-carrinho a:is(:hover, :active)::after {
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.ds-voltar-carrinho a,
	.ds-voltar-carrinho a::after {
		transition: none;
	}
}

.ds-rodape__menu .wp-block-navigation__container {
	gap: 0 !important;
}

.ds-rodape__menu .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-width: 44px;
	min-height: 44px;
}

/* Selos-link pequenos (categoria do produto e do post): a pílula continua pequena, a área de toque cresce para 44 px */
:is(.ds-selos-produto, .ds-categorias-post, .ds-card-post__categoria) a {
	position: relative;
}

:is(.ds-selos-produto, .ds-categorias-post, .ds-card-post__categoria) a::after {
	content: "";
	position: absolute;
	inset: -10px -4px;
}

/* Perguntas do FAQ e das páginas de texto com 44 px de altura */
.wp-block-details summary {
	display: flex;
	align-items: center;
	min-height: 44px;
}

.ds-rodape .wp-block-social-link-anchor,
.ds-whatsapp .wp-block-social-link-anchor {
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
}

/* Submenu "Loja": caixa creme com o traço da marca, texto normal */
.ds-menu .wp-block-navigation__submenu-container {
	min-width: 14rem;
	padding: 0.5rem 0;
	border: var(--wp--custom--borda--grossa) solid var(--wp--preset--color--tinta) !important;
	border-radius: var(--wp--custom--raio--card);
	background: var(--wp--preset--color--creme) !important;
	box-shadow: var(--wp--preset--shadow--solida-pequena);
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	text-transform: none;
}

.ds-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1rem;
}

.ds-menu .wp-block-navigation__responsive-container-open svg,
.ds-menu .wp-block-navigation__responsive-container-close svg {
	width: 26px;
	height: 26px;
}

/* O desenho do sanduíche (três riscos no traço da lupa, da conta e do carrinho) vem de inc/icone-menu.php (D145) */

/* Menu sanduíche até o tablet (o WordPress só troca abaixo de 600 px; aqui vale até 1023 px) */
@media (max-width: 1023px) {
	.ds-header__barra .ds-menu {
		order: 3;
	}

	/* Seletor duplo para vencer o "margin: 0" que o WP põe nos filhos de layout flex */
	.ds-header__barra > .ds-header__icones {
		margin-inline-start: auto;
	}

	.ds-menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	/* Menu a 4 px do carrinho, como a lupa, a conta e o carrinho entre si (o espaço da barra deixava 16 px) (D145) */
	.ds-header .ds-header__barra {
		column-gap: 0.25rem;
	}

	.ds-menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Sem contorno ao clicar com o mouse; pelo teclado o foco continua visível (D24) */
.ds-menu a:focus:not(:focus-visible) {
	outline: none;
}

/* Cor de cada item do menu, no PC e no celular. As cores se repetem em ciclo (amarelo, rosa, ciano, verde), então um item
   novo já nasce colorido; o estilo do bloco (is-style-*), escolhido no editor, tem prioridade sobre o ciclo. */
.ds-menu .wp-block-navigation__container > li:nth-child(4n + 1) {
	--ds-menu-cor: var(--wp--preset--color--amarelo);
}

.ds-menu .wp-block-navigation__container > li:nth-child(4n + 2) {
	--ds-menu-cor: var(--wp--preset--color--rosa);
}

.ds-menu .wp-block-navigation__container > li:nth-child(4n + 3) {
	--ds-menu-cor: var(--wp--preset--color--ciano);
}

.ds-menu .wp-block-navigation__container > li:nth-child(4n) {
	--ds-menu-cor: var(--wp--preset--color--verde);
}

/* Depois do ciclo, com a mesma especificidade: a cor escolhida no editor vence */
.ds-menu .wp-block-navigation__container > li.is-style-amarelo {
	--ds-menu-cor: var(--wp--preset--color--amarelo);
}

.ds-menu .wp-block-navigation__container > li.is-style-rosa {
	--ds-menu-cor: var(--wp--preset--color--rosa);
}

.ds-menu .wp-block-navigation__container > li.is-style-ciano {
	--ds-menu-cor: var(--wp--preset--color--ciano);
}

.ds-menu .wp-block-navigation__container > li.is-style-verde {
	--ds-menu-cor: var(--wp--preset--color--verde);
}

.ds-menu .wp-block-navigation__container > li.is-style-marinho {
	--ds-menu-cor: var(--wp--preset--color--marinho);
}


/* Menu do celular em janela (D81): lista com bolinha colorida, categorias em botões coloridos e "Minha conta" em destaque */
@media (max-width: 1023px) {
	.ds-menu .wp-block-navigation__responsive-container.is-menu-open {
		padding: 0;
		background: color-mix(in srgb, var(--wp--preset--color--tinta) 55%, transparent) !important; /* vence a cor escolhida no bloco */
		overflow: hidden;
	}

	.ds-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		max-width: none;
		height: 100%;
		margin: 0;
	}

	.ds-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		position: absolute;
		top: calc(76px + var(--wp-admin--admin-bar--height, 0px));
		right: 12px;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: min(22rem, 100vw - 24px);
		max-height: calc(100dvh - 92px - var(--wp-admin--admin-bar--height, 0px));
		margin: 0 !important;
		overflow: hidden;
		border: var(--wp--custom--borda--grossa) solid var(--wp--preset--color--tinta);
		border-radius: var(--wp--custom--raio--campo);
		background: var(--wp--preset--color--creme);
		box-shadow: var(--wp--preset--shadow--solida-pequena);
	}

	/* Faixa "Menu" com o X: fica fixa; só a lista rola dentro da janela */
	.ds-menu .wp-block-navigation__responsive-dialog::before {
		content: "Menu";
		flex: none;
		display: flex;
		align-items: center;
		height: 52px;
		padding-inline: 1rem;
		border-bottom: var(--wp--custom--borda--grossa) solid var(--wp--preset--color--tinta);
		background: var(--wp--preset--color--amarelo);
		font-family: var(--wp--preset--font-family--titulo);
		font-size: var(--wp--preset--font-size--md);
		text-transform: uppercase;
	}

	.ds-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: 4px;
		right: 4px;
		z-index: 1;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		color: var(--wp--preset--color--tinta);
	}

	.ds-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: block;
		flex: 1 1 auto;
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 0 !important; /* o WordPress reserva espaço para o X no topo */
	}

	.ds-menu .is-menu-open .wp-block-navigation-item__content {
		box-sizing: border-box;
	}

	.ds-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: block;
		margin: 0;
		padding: 0;
	}

	.ds-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		display: block;
		width: 100%;
		border-bottom: 2px solid var(--wp--preset--color--bege);
	}

	.ds-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:is(:last-child, :has(+ .ds-so-mobile)) {
		border-bottom: 0;
	}

	.ds-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 0.75rem;
		width: 100%;
		min-height: 48px;
		padding: 0 1rem;
		color: var(--wp--preset--color--tinta);
		font-family: var(--wp--preset--font-family--titulo);
		font-size: var(--wp--preset--font-size--base);
		text-decoration: none;
		text-transform: uppercase;
	}

	.ds-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
		content: "";
		flex: none;
		width: 1rem;
		height: 1rem;
		border: 2px solid var(--wp--preset--color--tinta);
		border-radius: 50%;
		background: var(--ds-menu-cor);
	}

	.ds-menu .is-menu-open .wp-block-navigation__submenu-icon {
		display: none;
	}

	/* Categorias da Loja: 2 + 2 botões, com as cores dos atalhos do catálogo */
	.ds-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		padding: 0.125rem 1rem 0.75rem;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none;
	}

	.ds-menu .is-menu-open .wp-block-navigation__submenu-container > li {
		--ds-menu-chip: var(--wp--preset--color--verde);
		display: block;
		min-width: 0;
	}

	.ds-menu .is-menu-open .wp-block-navigation__submenu-container > li:nth-child(4n + 2) {
		--ds-menu-chip: var(--wp--preset--color--amarelo);
	}

	.ds-menu .is-menu-open .wp-block-navigation__submenu-container > li:nth-child(4n + 3) {
		--ds-menu-chip: var(--wp--preset--color--ciano);
	}

	.ds-menu .is-menu-open .wp-block-navigation__submenu-container > li:nth-child(4n) {
		--ds-menu-chip: var(--wp--preset--color--rosa);
	}

	.ds-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 44px;
		padding: 0 0.25rem;
		border: var(--wp--custom--borda--fina) solid var(--wp--preset--color--tinta);
		border-radius: var(--wp--custom--raio--pilula);
		background: var(--ds-menu-chip);
		box-shadow: 2px 2px 0 var(--wp--preset--color--tinta);
		color: var(--wp--preset--color--tinta);
		font-family: var(--wp--preset--font-family--texto);
		font-size: 0.875rem;
		font-weight: 600;
		text-decoration: none;
		text-transform: none;
	}

	/* "Minha conta" em destaque (só existe aqui abaixo de 600 px; acima disso o ícone do topo aparece) */
	.ds-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .ds-so-mobile > .wp-block-navigation-item__content {
		justify-content: center;
		width: auto;
		min-height: 44px;
		margin: 0.75rem 1rem 0.875rem;
		border-radius: var(--wp--custom--raio--pilula);
		background: var(--wp--preset--color--tinta);
		color: var(--wp--preset--color--creme);
	}

	.ds-menu .is-menu-open .wp-block-navigation__container > .ds-so-mobile > .wp-block-navigation-item__content::before {
		display: none;
	}
}

/* Menu do PC: cada item tem um sublinhado ondulado na cor do item. */
@media (min-width: 1024px) {
	.ds-menu {
		font-size: var(--wp--preset--font-size--sm);
	}

	.ds-menu .wp-block-navigation__container {
		gap: 1.75rem;
		align-items: center;
	}

	.ds-menu .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		min-height: 44px;
		padding: 0 0.25rem;
		line-height: 1;
		text-decoration: underline wavy var(--ds-menu-cor) 2px;
		text-underline-offset: 6px;
	}

	/* Mouse ou clique: nome e onda na cor do item, com zoom (D87) */
	.ds-menu .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		transition: transform 0.15s ease;
	}

	.ds-menu .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, :focus-visible) {
		transform: scale(1.15);
	}

	.ds-menu .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, :focus, :active) {
		color: var(--ds-menu-cor);
		text-decoration: underline wavy var(--ds-menu-cor) 2px;
		text-underline-offset: 6px;
	}

	/* No PC "Loja" é um link como os outros. As categorias ficam só na janela do celular e nos atalhos do catálogo (D87) */
	.ds-menu .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon,
	.ds-menu .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		display: none !important;
	}
}

@media (max-width: 599px) {
	.ds-header .wp-block-woocommerce-customer-account {
		display: none;
	}
}

@media (min-width: 600px) {
	.ds-so-mobile {
		display: none !important;
	}
}

/* ---------- Rodapé ---------- */
/* Menus do rodapé em texto normal, como na referência (o theme.json deixa menus em títulos caixa alta) */
.ds-rodape__menu {
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	text-transform: none;
}

.ds-rodape__menu .wp-block-navigation__container {
	gap: 0.5rem;
}

.ds-rodape__menu .wp-block-navigation-item__content {
	padding-block: 0.15rem;
	text-decoration: none;
}

.ds-rodape__menu .wp-block-navigation-item__content:hover {
	text-decoration: underline wavy;
}

.ds-rodape__logo {
	display: flex;
	justify-content: flex-end;
}

.ds-rodape .ds-aviso-legal {
	font-weight: 400;
	line-height: var(--wp--custom--entrelinha--longo);
}

@media (max-width: 781px) {
	.ds-rodape__colunas {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
	}

	.ds-rodape__logo {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}

	/* Respiro para o botão do WhatsApp não cobrir o aviso legal */
	.ds-rodape {
		padding-bottom: calc(var(--wp--preset--spacing--40) + 72px) !important;
	}
}

/* ---------- WhatsApp flutuante ---------- */
:where(body:not(.editor-styles-wrapper)) .ds-whatsapp {
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 9990;
	margin: 0;
}

/* Some com o menu aberto (o WordPress marca o <html> com has-modal-open) */
html.has-modal-open .ds-whatsapp {
	display: none;
}

.ds-whatsapp .wp-social-link:is(:hover, :active) {
	box-shadow: none;
	transform: translate(4px, 4px);
}

.ds-whatsapp .wp-social-link {
	border: var(--wp--custom--borda--grossa) solid var(--wp--preset--color--tinta);
	box-shadow: var(--wp--preset--shadow--solida-pequena);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Círculo verde com balão vazado e telefone em creme (D110): usa o mesmo SVG da faixa do grupo */
.ds-whatsapp .wp-block-social-link-anchor {
	padding: 0.6rem;
	background: url("../images/icones/whatsapp.svg") center / 1em no-repeat content-box; /* 1em = 36 px, o tamanho do ícone original do bloco */
}

.ds-whatsapp .wp-block-social-link-anchor svg {
	visibility: hidden;
}

/* ---------- Verificação de idade ---------- */
/* Card com as 8 cores (D121): faixa ciano com onda e mascote, selo +18 rosa no canto, selos de coleção verde e marinho,
   botões amarelo e bege, rodapé bege com os Termos; fundo da página em marinho. */
:where(body:not(.editor-styles-wrapper)) .ds-verificacao-idade {
	display: none;
}

:where(html.ds-idade-aberta) body:not(.editor-styles-wrapper) .ds-verificacao-idade {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	margin: 0;
	/* Em cima, espaço para o selo +18, que sai 18 px do card */
	padding: max(var(--wp--custom--gutter), 1.5rem) var(--wp--custom--gutter) var(--wp--custom--gutter);
	overflow-y: auto;
	background: rgb(45 52 139 / 0.82); /* marinho */
}

html.ds-idade-aberta {
	overflow: hidden;
}

/* A janela recebe o foco ao abrir (verificacao-idade.js), sem contorno: o contorno é dos botões, pelo teclado (D137) */
.ds-verificacao-idade:focus {
	outline: none;
}

.ds-verificacao-idade__caixa {
	position: relative;
	width: min(100%, 460px);
	border-radius: var(--wp--custom--raio--area);
	text-align: center;
}

/* margin auto centraliza e, em tela baixa, deixa rolar sem cortar o topo do card.
   Seletor longo para vencer o "margin-block: 0" que o WordPress dá ao primeiro e ao último filho do grupo. */
:where(html.ds-idade-aberta) body .ds-verificacao-idade > .ds-verificacao-idade__caixa {
	margin: auto;
}

/* Selo +18: bolinha rosa inclinada, saindo pelo canto de cima (como os selos dos cards, D117) */
.ds-verificacao-idade .ds-idade-selo {
	position: absolute;
	top: -18px;
	right: -14px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	margin: 0;
	border: var(--wp--custom--borda--grossa) solid var(--wp--preset--color--tinta);
	border-radius: 50%;
	background: var(--wp--preset--color--rosa);
	box-shadow: var(--wp--preset--shadow--solida-pequena);
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 1.6rem;
	line-height: 1;
	transform: rotate(12deg);
}

/* Faixa do topo: a onda (is-style-onda-base) pende 23 px sobre o corpo */
.ds-verificacao-idade__topo {
	padding: 1.25rem 1.25rem 1rem;
	border-radius: calc(var(--wp--custom--raio--area) - var(--wp--custom--borda--grossa)) calc(var(--wp--custom--raio--area) - var(--wp--custom--borda--grossa)) 0 0;
}

.ds-verificacao-idade__topo .wp-block-image {
	margin: 0;
}

.ds-verificacao-idade__topo img {
	display: block;
	width: 130px !important;
	height: auto;
}

.ds-verificacao-idade__corpo {
	display: grid;
	gap: 0.875rem;
	padding: 2.25rem 1.75rem 1.5rem;
}

.ds-verificacao-idade__corpo > * {
	margin: 0;
}

.ds-verificacao-idade__corpo > p {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	line-height: 1.5;
}

.ds-verificacao-idade #ds-idade-titulo {
	font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
	line-height: 1.05;
	text-wrap: balance;
}

/* Selos de coleção em pílula creme, só com o traçado (D137). A cor vem do próprio parágrafo, escolhida no editor */
.ds-idade-selos {
	gap: 0.5rem;
}

.ds-idade-selos > p {
	margin: 0;
	padding: 0.35rem 0.9rem;
	border: var(--wp--custom--borda--fina) solid var(--wp--preset--color--tinta);
	border-radius: var(--wp--custom--raio--pilula);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.3;
}

.ds-verificacao-idade .wp-block-buttons {
	gap: 0.75rem;
	margin-top: 0.25rem;
}

/* "Ainda não": rosa com o traçado e a sombra dos botões, no lugar do botão vazado padrão (D137) */
.ds-verificacao-idade .is-style-outline .wp-block-button__link {
	background: var(--wp--preset--color--rosa);
	color: var(--wp--preset--color--tinta);
}

.ds-verificacao-idade__rodape {
	padding: 0.75rem 1.5rem 0.875rem;
	border-top: var(--wp--custom--borda--fina) solid var(--wp--preset--color--tinta);
	border-radius: 0 0 calc(var(--wp--custom--raio--area) - var(--wp--custom--borda--grossa)) calc(var(--wp--custom--raio--area) - var(--wp--custom--borda--grossa));
}

.ds-verificacao-idade__rodape p {
	margin: 0;
	line-height: 1.45;
}

.ds-verificacao-idade__rodape a {
	color: var(--wp--preset--color--tinta);
	font-weight: 700;
}

/* No celular os botões ocupam a largura toda, um embaixo do outro */
@media (max-width: 480px) {
	.ds-verificacao-idade__corpo {
		padding-inline: 1.25rem;
	}

	.ds-verificacao-idade .wp-block-button {
		flex: 1 1 100%;
	}

	.ds-verificacao-idade .wp-block-button__link {
		width: 100%;
	}
}

:where(body:not(.editor-styles-wrapper)) .ds-idade-negada {
	display: none;
}

.ds-verificacao-idade.is-negada .ds-idade-negada {
	display: block;
	font-weight: 600;
}

.ds-verificacao-idade.is-negada .wp-block-buttons {
	display: none;
}

/* ---------- Home ---------- */
.ds-beneficios {
	font-size: var(--wp--preset--font-size--sm);
}

.ds-beneficio,
.ds-beneficio p {
	margin: 0;
}

.ds-beneficio figure {
	flex: none;
	margin: 0;
}

.ds-banner-marca__imagem img {
	width: 100%;
	max-width: 300px;
	height: auto;
}

@media (max-width: 599px) {
	.ds-banner-marca .wp-block-heading {
		font-size: var(--wp--preset--font-size--xl) !important;
	}
}

.ds-diferencial__icone {
	flex: none;
	margin: 0;
}

.ds-diferencial h3 {
	margin: 0;
}

/* Cards coloridos da mesma altura, com ícone, título e texto centralizados: um por linha no celular, dois no tablet e quatro no PC (D98) */
.ds-diferenciais__itens {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	width: 100%;
}

@media (min-width: 600px) {
	.ds-diferenciais__itens {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.ds-diferenciais__itens {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ds-diferencial.is-style-card {
	padding: var(--wp--preset--spacing--30);
	text-align: center;
}

.ds-diferencial.is-style-card > * {
	width: 100%;
}

.ds-diferencial.is-style-card {
	justify-content: flex-start !important; /* ícone, título e texto começam na mesma altura em todos os cards */
}

.ds-diferencial__icone img {
	display: block;
	width: 56px !important;
	height: 56px;
	margin-inline: auto;
	object-fit: contain;
}

.ds-diferencial.is-style-card h3 {
	margin-block-end: 0.5rem;
}

/* Lado a lado, o título sempre ocupa duas linhas de altura, para os textos começarem alinhados */
@media (min-width: 600px) {
	.ds-diferencial.is-style-card h3 {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 2em;
	}
}

.ds-diferenciais__itens > * {
	margin: 0; /* o espaço entre blocos do WordPress desalinharia os itens da mesma linha */
}

/* Faixa do grupo do WhatsApp (D104): texto à esquerda e botão à direita; no celular, tudo centralizado */
.ds-grupo-whatsapp__icone {
	flex: none;
	margin: 0;
}

/* Mesmo símbolo, formato e cor do botão flutuante do WhatsApp: círculo verde com traço e sombra, balão vazado e telefone em creme (D110) */
.ds-grupo-whatsapp__icone img {
	box-sizing: border-box;
	width: 4rem !important;
	height: 4rem;
	padding: 0.8rem; /* ícone ocupa cerca de metade do círculo, como no botão flutuante */
	border: var(--wp--custom--borda--grossa) solid var(--wp--preset--color--tinta);
	border-radius: 50%;
	background: var(--wp--preset--color--verde);
	box-shadow: var(--wp--preset--shadow--solida-pequena);
}

.ds-grupo-whatsapp__texto h2,
.ds-grupo-whatsapp__texto p {
	margin: 0;
}

@media (max-width: 1023px) {
	.ds-grupo-whatsapp__conteudo,
	.ds-grupo-whatsapp__texto {
		flex-direction: column;
		flex-wrap: wrap !important;
		justify-content: center !important;
		text-align: center;
	}
}

.ds-como-comprar .wp-block-image img {
	width: auto;
}

/* Sobre: selo inclinado ao lado do título, como o "#1 tasting cookie" da referência */
.ds-sobre__selo.is-style-selo {
	padding: 0.5rem 1rem;
	font-size: var(--wp--preset--font-size--sm);
	transform: rotate(-8deg);
	box-shadow: var(--wp--preset--shadow--solida-pequena);
}

.ds-sobre .wp-block-image img {
	width: 100%;
	height: auto;
}

/* Cards da grade de produtos (home, loja, relacionados e carrinho vazio).
   Espaços explícitos, sem gap nem margens negativas (D116): foto, 14 px, nome, 3 px, preço, 12 px, botão */
.ds-grade-produtos .wc-block-product {
	--ds-card-espaco: 3px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	text-align: center;
}

.ds-grade-produtos .wc-block-components-product-image {
	margin: 0 0 14px !important;
	border: var(--wp--custom--borda--grossa) solid var(--wp--preset--color--tinta);
	box-shadow: var(--wp--preset--shadow--solida);
}

.ds-grade-produtos .wp-block-post-title {
	margin: 0;
	line-height: 1.1;
}

/* Área de toque de 44 px no nome sem empurrar nada: a camada invisível cresce por fora do texto */
.ds-grade-produtos .wp-block-post-title a {
	position: relative;
	display: inline;
	padding: 0;
}

.ds-grade-produtos .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: -12px -4px;
}

.ds-grade-produtos .wp-block-woocommerce-product-price,
.ds-grade-produtos .wc-block-components-product-price {
	margin: 0 !important;
	line-height: 1.1;
}

.ds-grade-produtos .wp-block-woocommerce-product-price {
	margin-top: var(--ds-card-espaco) !important;
}

/* O "auto" mantém os botões alinhados quando o nome ocupa mais linhas */
.ds-grade-produtos .wp-block-woocommerce-product-button {
	margin-top: auto;
	padding-top: 12px;
}

/* Tipo do produto (Foto, Auto...) vira selo no canto direito da foto, no formato do selo "Promo" (D116) */
.ds-grade-produtos .ds-tipo-produto {
	position: absolute;
	z-index: 9;
	top: 7px;
	right: 7px;
	margin: 0;
	padding: 0.25rem 0.75rem;
	border: var(--wp--custom--borda--fina) solid var(--wp--preset--color--tinta);
	border-radius: var(--wp--custom--raio--pilula);
	background: var(--wp--preset--color--bege);
	color: var(--wp--preset--color--tinta);
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
	text-transform: uppercase;
	pointer-events: none;
}

.ds-grade-produtos .ds-tipo-produto--fotoperiodos {
	background: var(--wp--preset--color--amarelo);
}

.ds-grade-produtos .ds-tipo-produto--automaticas {
	background: var(--wp--preset--color--ciano);
}

.ds-grade-produtos .ds-tipo-produto--acessorios {
	background: var(--wp--preset--color--verde);
}

.ds-grade-produtos .ds-tipo-produto--camisetas {
	background: var(--wp--preset--color--rosa);
}

/* Promoção nos cards: selo ondulado rosa com "%", inclinado, saindo pelo canto superior esquerdo da foto (D117).
   A foto deixa de cortar o que passa da borda; o arredondado vai para a própria imagem. Na página do produto, continua a pílula "Promo" */
.ds-grade-produtos .wc-block-components-product-image {
	position: relative;
	overflow: visible;
}

.ds-grade-produtos .wc-block-components-product-image img {
	border-radius: calc(var(--wp--custom--raio--card) - var(--wp--custom--borda--grossa));
}

.ds-grade-produtos .wc-block-components-product-sale-badge:not(.ds-selo-esgotado) {
	--ds-selo-promo: 44px;
	--ds-selo-fora: -0.25; /* no celular passa menos da borda, para não encostar na tela */
	position: absolute;
	z-index: 10;
	top: calc(var(--ds-selo-promo) * var(--ds-selo-fora)) !important;
	left: calc(var(--ds-selo-promo) * var(--ds-selo-fora)) !important;
	box-sizing: border-box;
	width: var(--ds-selo-promo);
	height: var(--ds-selo-promo);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: url("../images/icones/selo-promo.svg") center / contain no-repeat;
	font-size: 0; /* esconde o "Promo" visível; o texto para leitor de tela continua */
	transform: rotate(-14deg);
	pointer-events: none;
}

.ds-grade-produtos .wc-block-components-product-sale-badge:not(.ds-selo-esgotado)::before {
	content: "%";
	/* camada própria do tamanho do selo: os textos escondidos do Woo não empurram o % para fora do centro */
	position: absolute;
	inset: 0 4% 4% 0; /* desconta a sombra do SVG, que fica embaixo e à direita */
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--titulo);
	font-size: calc(var(--ds-selo-promo) * 0.42);
	line-height: 1;
	color: var(--wp--preset--color--tinta);
}

@media (min-width: 768px) {
	.ds-grade-produtos .wc-block-components-product-sale-badge:not(.ds-selo-esgotado) {
		--ds-selo-promo: 52px;
		--ds-selo-fora: -0.3;
	}
}

/* Esgotado: sem selo nos cards; a foto apagada e o botão "Esgotado" já avisam. Na galeria do produto, o selo continua (D117) */
.ds-grade-produtos .ds-selo-esgotado {
	display: none;
}

.ds-grade-produtos .wp-block-woocommerce-product-button .wp-element-button {
	width: 100%;
}

/* Botões de comprar sempre em verde (D107). Esgotado mantém a regra própria em woocommerce.css */
.wp-block-woocommerce-product-button .wp-element-button:not(:disabled, .disabled, [aria-disabled="true"]),
.wp-block-woocommerce-add-to-cart-with-options .wp-element-button:not(:disabled, .disabled, [aria-disabled="true"]) {
	background: var(--wp--preset--color--verde);
	border: var(--wp--custom--borda--fina) solid var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--tinta);
}

/* Vitrine da home: 4 colunas e 8 produtos; no celular, 2 colunas e 4 produtos */
.ds-vitrine .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.ds-vitrine .wc-block-product-template .wc-block-product {
	width: auto;
	max-width: none;
	margin: 0;
}

.ds-vitrine .wp-block-woocommerce-product-button .wp-element-button {
	padding-inline: 0.5rem;
}

@media (max-width: 767px) {
	.ds-vitrine .wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ds-vitrine .wc-block-product-template .wc-block-product:nth-child(n + 5) {
		display: none;
	}
}

/* Contato: a onda da seção não encosta no xadrez que abre o rodapé */
.alignfull.ds-contato.is-style-onda-base {
	margin-block-end: calc(23px + var(--wp--preset--spacing--40));
}

/* Categorias na home: desconta o vão interno do título, para o espaço vazio de cima ficar igual ao de baixo (até a sombra dos cartões) */
.alignfull.ds-categorias {
	padding-top: calc(var(--wp--preset--spacing--60) - 1rem) !important;
}

/* Cartão inteiro clicável, a partir do link do título */
.ds-categorias__grade {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.ds-categorias__cartao {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ds-categorias__cartao > * {
	margin: 0;
}

.ds-categorias__cartao img {
	display: block;
	width: 100%;
	max-width: 180px;
	margin-inline: auto;
}

/* O nome mais longo (Fotoperíodos) cabe inteiro em uma linha, sem quebrar a palavra */
.ds-categorias__cartao h3 {
	font-size: clamp(0.95rem, 1.9vw, var(--wp--preset--font-size--lg));
	overflow-wrap: normal;
}

.ds-categorias__cartao a {
	color: inherit;
	text-decoration: none;
}

.ds-categorias__cartao a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ds-categorias__cartao:hover,
.ds-categorias__cartao:focus-within {
	box-shadow: none;
	transform: translate(8px, 8px);
}

.ds-categorias__cartao a:focus-visible {
	outline: none;
}

.ds-categorias__cartao a:focus-visible::after {
	outline: 3px solid var(--wp--preset--color--creme);
	outline-offset: 4px;
	border-radius: inherit;
}

@media (max-width: 1023px) {
	.ds-categorias__grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ds-categorias__cartao h3 {
		font-size: clamp(0.95rem, 4.2vw, var(--wp--preset--font-size--lg));
	}
}

@media (max-width: 767px) {
	.ds-categorias__cartao {
		padding: var(--wp--preset--spacing--20);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ds-categorias__cartao {
		transition: none;
	}
}

/* Cards de post (home, blog, categoria, busca e fim do post): foto de borda a borda no topo e faixa colorida embaixo
   com título e "Ler post" (D118). A cor é a da categoria do post (D122), escolhida em Posts → Categorias */
.ds-cor-rosa {
	--ds-cor: var(--wp--preset--color--rosa);
}

.ds-cor-ciano {
	--ds-cor: var(--wp--preset--color--ciano);
}

.ds-cor-verde {
	--ds-cor: var(--wp--preset--color--verde);
}

.ds-cor-amarelo {
	--ds-cor: var(--wp--preset--color--amarelo);
}

.ds-cor-marinho {
	--ds-cor: var(--wp--preset--color--marinho);
	--ds-cor-texto: var(--wp--preset--color--creme);
}

.ds-card-post.is-style-card {
	overflow: hidden;
	height: 100%;
	background: var(--ds-cor, var(--wp--preset--color--rosa));
	color: var(--ds-cor-texto, var(--wp--preset--color--tinta));
	text-align: center;
}

.ds-card-post .wp-block-read-more {
	color: var(--wp--preset--color--tinta);
}

.ds-card-post .wp-block-post-title a {
	text-decoration: none;
}

.ds-card-post .wp-block-post-featured-image {
	width: 100%;
	margin: 0;
	border-bottom: var(--wp--custom--borda--grossa) solid var(--wp--preset--color--tinta);
	background: var(--wp--preset--color--bege);
}

.ds-card-post .wp-block-post-featured-image img {
	display: block;
}

/* Post sem foto destacada: o mascote ocupa o lugar da foto, para o card não ficar sem topo */
.ds-card-post:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	aspect-ratio: 4 / 3;
	border-bottom: var(--wp--custom--borda--grossa) solid var(--wp--preset--color--tinta);
	background: var(--wp--preset--color--bege) url("../images/mascote-dente.svg") center / auto 55% no-repeat;
}

/* A faixa de texto cresce e empurra o botão para o fim: botões alinhados mesmo com títulos de tamanhos diferentes */
.ds-card-post__texto {
	flex: 1;
	width: 100%;
	box-sizing: border-box;
}

.ds-card-post__texto .wp-block-read-more {
	margin-top: auto !important;
}

/* A foto vai até a borda do card: sem o arredondado que as imagens ganham no resto do site (deixava os cantos claros) */
.ds-card-post .wp-block-post-featured-image img {
	border-radius: 0;
}

/* Categoria do post (card e post aberto): pílula com traço e sombra, link para a categoria (D119).
   No post aberto ela tem a cor da categoria (D122); no card fica creme, para destacar da faixa que já é dessa cor */
:is(.ds-card-post__categoria, .ds-categorias-post) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	font-size: 0; /* some com a vírgula que o bloco põe entre as categorias */
}

:is(.ds-card-post__categoria, .ds-categorias-post) a {
	padding: 0.2rem 0.7rem;
	border: var(--wp--custom--borda--fina) solid var(--wp--preset--color--tinta);
	border-radius: var(--wp--custom--raio--pilula);
	background: var(--ds-cor, var(--wp--preset--color--creme));
	color: var(--ds-cor-texto, var(--wp--preset--color--tinta));
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: var(--wp--preset--shadow--solida-pequena);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ds-card-post__categoria a {
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--tinta);
}

/* Mesmo esquema dos botões (D77): no hover e no clique a sombra some e a pílula afunda no lugar dela */
:is(.ds-card-post__categoria, .ds-categorias-post) a:is(:hover, :active) {
	box-shadow: none;
	transform: translate(4px, 4px);
}

:is(.ds-card-post__categoria, .ds-categorias-post) .wp-block-post-terms__separator {
	display: none;
}

/* Data · tempo de leitura. No post aberto, fica logo abaixo do título */
.ds-card-post .ds-post-meta {
	margin: 0;
}

.wp-block-post-title + .ds-post-meta {
	margin-top: var(--wp--preset--spacing--10);
}

.ds-post-meta > * {
	margin: 0;
}

.ds-post-meta > * + *::before {
	content: "·";
	margin-inline-end: 0.4rem;
}

/* ---------- Grade de posts (D147) ----------
   Página Blog: 4 cards por linha no PC, 3 no tablet e 2 no celular. Home e fim do post ("Do blog", classe --compacta):
   4 cards menores por linha no PC e 2 no tablet e no celular. O seletor duplo vence as colunas que o layout de grade
   do bloco grava (e o "1 coluna abaixo de 600 px" do WordPress). */
.wp-block-post-template.ds-grade-posts {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1023px) {
	.wp-block-post-template.ds-grade-posts:not(.ds-grade-posts--compacta) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Home no tablet: 2 por linha (com 4 os cards ficavam com 160 px e as palavras quebravam no meio) */
	.wp-block-post-template.ds-grade-posts--compacta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.wp-block-post-template.ds-grade-posts.ds-grade-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--20);
	}
}

/* Data e tempo de leitura um embaixo do outro na grade: lado a lado, a linha quebrava no card estreito e o ponto
   separador ia para o começo da linha de baixo */
.ds-grade-posts .ds-card-post .ds-post-meta {
	flex-direction: column;
	align-items: center;
	row-gap: 0.1rem;
}

.ds-grade-posts .ds-card-post .ds-post-meta > * + *::before {
	content: none;
}

/* Título do card com área de toque de 44 px mesmo quando cabe em uma ou duas linhas curtas */
.ds-grade-posts .ds-card-post .wp-block-post-title a {
	display: block;
	min-height: 44px;
}

/* Card compacto: faixa de texto mais estreita, título menor, pílula e botão menores. Vale para a home sempre e para o
   blog no celular, onde o resumo some para os dois cards da linha caberem */
.ds-grade-posts--compacta .ds-card-post__texto {
	padding: var(--wp--preset--spacing--20) !important; /* vence o padding gravado no HTML do grupo */
	gap: 0.6rem;
}

.ds-grade-posts--compacta .ds-card-post .wp-block-post-title {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.2;
}

.ds-grade-posts--compacta .ds-card-post__categoria a {
	padding: 0.1rem 0.6rem;
	font-size: 0.75rem;
}

.ds-grade-posts--compacta .ds-card-post .ds-post-meta {
	font-size: var(--wp--preset--font-size--xs);
	row-gap: 0;
}

.ds-grade-posts--compacta .ds-botao-contorno.wp-block-read-more {
	padding: 0 1rem;
	font-size: var(--wp--preset--font-size--xs);
}

@media (max-width: 767px) {
	.ds-grade-posts .ds-card-post__texto {
		padding: 0.75rem 0.5rem 1rem !important;
		gap: 0.5rem;
	}

	.ds-grade-posts .ds-card-post .wp-block-post-title {
		font-size: 0.9rem;
		line-height: 1.2;
		overflow-wrap: break-word;
	}

	.ds-grade-posts .ds-card-post .wp-block-post-excerpt {
		display: none;
	}

	.ds-grade-posts .ds-card-post__categoria a {
		padding: 0.1rem 0.5rem;
		font-size: 0.7rem;
	}

	/* Só a data: com o tempo de leitura, a linha quebrava e o ponto separador ia para o começo da linha de baixo */
	.ds-grade-posts .ds-card-post .ds-post-meta .wp-block-post-time-to-read {
		display: none;
	}

	.ds-grade-posts .ds-botao-contorno.wp-block-read-more {
		padding: 0 0.85rem;
		font-size: var(--wp--preset--font-size--xs);
	}
}

/* Cards da página Blog na metade da altura (D149): foto 16:9, categoria numa bolinha no canto direito da foto, e
   embaixo título (Poppins negrito), data e tempo de leitura, tudo alinhado à esquerda; sem resumo e botão menor.
   Vale para Blog, categoria e busca; a home ("--compacta") fica como está */
.ds-grade-posts:not(.ds-grade-posts--compacta) .ds-card-post.is-style-card {
	position: relative;
	text-align: start;
}

.ds-grade-posts:not(.ds-grade-posts--compacta) .ds-card-post .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9 !important; /* vence o 4:3 que o bloco grava no HTML da imagem */
}

.ds-grade-posts:not(.ds-grade-posts--compacta) .ds-card-post:not(:has(.wp-block-post-featured-image))::before {
	aspect-ratio: 16 / 9;
}

.ds-grade-posts:not(.ds-grade-posts--compacta) .ds-card-post__texto {
	align-items: flex-start !important; /* o grupo grava "centralizado" */
	padding: 0.75rem !important; /* vence o padding gravado no HTML do grupo */
	gap: 0.3rem;
}

.ds-grade-posts:not(.ds-grade-posts--compacta) .ds-card-post .wp-block-post-title {
	font-family: var(--wp--preset--font-family--texto);
	font-size: 0.95rem !important; /* vence o has-md-font-size do bloco */
	font-weight: 700;
	line-height: 1.25;
	text-align: start;
	text-transform: none;
}

.ds-grade-posts:not(.ds-grade-posts--compacta) .ds-card-post .wp-block-post-title a {
	display: flex;
	align-items: center;
}

.ds-grade-posts:not(.ds-grade-posts--compacta) .ds-card-post .wp-block-post-excerpt {
	display: none;
}

/* Categoria: bolinha pequena por cima da foto, no canto superior direito (D149) */
.ds-grade-posts:not(.ds-grade-posts--compacta) .ds-card-post__categoria {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 1;
}

/* Sem sombra e sem o "afundar" no hover: a bolinha fica parada no canto, com a mesma folga em cima e do lado */
.ds-grade-posts:not(.ds-grade-posts--compacta) .ds-card-post__categoria a {
	display: block;
	padding: 0 0.45rem;
	font-size: 0.6rem;
	box-shadow: none;
}

.ds-grade-posts:not(.ds-grade-posts--compacta) .ds-card-post__categoria a:is(:hover, :active) {
	transform: none;
}

.ds-grade-posts:not(.ds-grade-posts--compacta) .ds-card-post .ds-post-meta {
	flex-direction: row;
	justify-content: flex-start !important;
	column-gap: 0.4rem;
	font-size: 0.75rem;
}

.ds-grade-posts:not(.ds-grade-posts--compacta) .ds-card-post .ds-post-meta > * {
	font-size: inherit !important;
}

.ds-grade-posts:not(.ds-grade-posts--compacta) .ds-card-post .ds-post-meta > * + *::before {
	content: "·";
	margin-inline-end: 0.4rem;
}

.ds-grade-posts:not(.ds-grade-posts--compacta) .ds-botao-contorno.wp-block-read-more {
	min-height: 44px;
	margin-top: 0.4rem !important;
	padding: 0 1rem;
	font-size: var(--wp--preset--font-size--xs);
}

@media (max-width: 767px) {
	.ds-grade-posts:not(.ds-grade-posts--compacta) .ds-card-post .wp-block-post-title {
		font-size: 0.85rem !important;
	}

	/* Data e tempo de leitura um embaixo do outro: lado a lado não cabem no card de meia tela */
	.ds-grade-posts:not(.ds-grade-posts--compacta) .ds-card-post .ds-post-meta {
		flex-direction: column;
		align-items: flex-start;
		font-size: 0.7rem;
	}

	.ds-grade-posts:not(.ds-grade-posts--compacta) .ds-card-post .ds-post-meta > * + *::before {
		content: none;
	}

	.ds-grade-posts:not(.ds-grade-posts--compacta) .ds-card-post .ds-post-meta .wp-block-post-time-to-read {
		display: block;
	}

	/* No celular, sem "Ler post": título e foto já levam ao post, e o botão era um terço da altura do card */
	.ds-grade-posts:not(.ds-grade-posts--compacta) .ds-card-post .wp-block-read-more {
		display: none;
	}
}

/* Tabelas dentro do post: traço tinta, cabeçalho bege e rolagem própria no celular (D147) */
.is-style-texto-longo .wp-block-table {
	overflow-x: auto;
}

.is-style-texto-longo .wp-block-table table {
	min-width: 640px;
	border-collapse: collapse;
	table-layout: auto; /* com colunas fixas, palavras longas quebravam no meio */
}

.is-style-texto-longo .wp-block-table :is(th, td) {
	padding: 0.6rem 0.75rem;
	border: var(--wp--custom--borda--fina) solid var(--wp--preset--color--tinta);
	text-align: start;
	vertical-align: top;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

.is-style-texto-longo .wp-block-table tbody td:first-child {
	white-space: nowrap;
	font-weight: 600;
}

.is-style-texto-longo .wp-block-table th {
	background: var(--wp--preset--color--bege);
	font-weight: 600;
}

/* ---------- Filtros do blog: pílulas de categoria (D119, D122) ---------- */
.ds-filtros-blog {
	margin-block-end: var(--wp--preset--spacing--20);
}

.ds-filtros-blog__pilulas {
	max-width: 100%;
}

.ds-filtros-blog__todos,
.ds-filtros-blog__categorias {
	margin: 0;
}

.ds-filtros-blog__categorias {
	display: flex;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}

.ds-filtros-blog__todos a,
.ds-filtros-blog__categorias a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1.1rem;
	border: var(--wp--custom--borda--fina) solid var(--wp--preset--color--tinta);
	border-radius: var(--wp--custom--raio--pilula);
	background: var(--ds-cor, var(--wp--preset--color--creme));
	color: var(--ds-cor-texto, var(--wp--preset--color--tinta));
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: var(--wp--preset--shadow--solida-pequena);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Cada pílula tem a cor da categoria (D122); "Todos" fica creme. Hover e clique: afunda no lugar da sombra (D77) */
.ds-filtros-blog__todos a:is(:hover, :active),
.ds-filtros-blog__categorias a:is(:hover, :active) {
	box-shadow: none;
	transform: translate(4px, 4px);
}

/* Filtro ativo: tinta com texto creme, sem sombra. Com o JavaScript (filtro na própria página), vale a classe is-ativo; sem ele, "Todos" */
.ds-filtros-blog a.is-ativo,
.ds-filtros-blog:not(.is-filtro-na-pagina) .ds-filtros-blog__todos a {
	background: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--creme);
	box-shadow: none;
	transform: none;
}

/* "Todos" é amarelo (D149), solto ou ativo; ativo, perde a sombra como as outras pílulas */
.ds-filtros-blog .ds-filtros-blog__todos a {
	background: var(--wp--preset--color--amarelo);
	color: var(--wp--preset--color--tinta);
}

.ds-filtros-blog .ds-filtros-blog__todos a.is-ativo,
.ds-filtros-blog:not(.is-filtro-na-pagina) .ds-filtros-blog__todos a {
	background: var(--wp--preset--color--amarelo);
	color: var(--wp--preset--color--tinta);
}

.ds-filtros-blog__vazio {
	text-align: center;
}

.wp-block-post-template > li[hidden] {
	display: none !important;
}

/* No celular, as pílulas ficam 2 por linha (D149): a lista de categorias some como caixa (display: contents) e
   "Todos" entra na grade com elas. Com 4 pílulas, 2 em cima e 2 embaixo; categoria nova abre outra linha */
@media (max-width: 781px) {
	.ds-filtros-blog__pilulas {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.6rem 0.75rem;
		width: min(100%, 22rem);
		margin-inline: auto;
	}

	.ds-filtros-blog__categorias {
		display: contents;
	}

	.ds-filtros-blog__todos a,
	.ds-filtros-blog__categorias a {
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		padding: 0 0.6rem;
		font-size: var(--wp--preset--font-size--xs);
	}
}

.wp-block-post-time-to-read::after {
	content: " de leitura";
}

.ds-botao-contorno.wp-block-read-more {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--altura-controle);
	padding: 0 1.5rem;
	border: var(--wp--custom--borda--fina) solid var(--wp--preset--color--tinta);
	border-radius: var(--wp--custom--raio--pilula);
	background: var(--wp--preset--color--creme);
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: var(--wp--preset--shadow--solida-pequena);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ds-botao-contorno.wp-block-read-more:is(:hover, :active) {
	box-shadow: none;
	transform: translate(4px, 4px);
}

/* "Mais dúvidas?": formulário que abre o WhatsApp com a mensagem pronta (D126) */
.ds-form-whatsapp {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
	max-width: 520px;
	margin-inline: auto;
}

.ds-form-whatsapp__campo {
	display: grid;
	gap: 0.35rem;
	margin: 0;
}

.ds-form-whatsapp label {
	font-weight: 700;
}

.ds-form-whatsapp :is(input, textarea) {
	width: 100%;
}

.ds-form-whatsapp__botao {
	justify-self: center;
}

.ds-form-whatsapp__aviso {
	margin: 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--xs);
}