/* #####################################
########################################

	Theme Name: White Ceramic House
	Theme URI: https://whiteceramichouse.com.br
	Description: Este tema foi desenvolvido de forma exclusiva.
	Author: Gabriel Amarante e Caroline Santos
	Author URI: https://gabrielfreelancer.com.br
	Version: MK.08.2026
	Requires at least: 6.0
	License: GNU General Public License v2 or later
	License URI: https://www.gnu.org/licenses/gpl-2.0.html
	Text Domain: custom-theme
	Domain Path: /languages
	Tags: custom-theme

	Code: Gabriel Amarante | https://gabrielfreelancer.com.br

########################################
##################################### */

@charset "UTF-8";

/* ######
   Fonte
############ */

/* Fustat servida pelo próprio site (antes vinha do Google Fonts, que recebia
   o IP de todo visitante). Arquivo variável, pesos 200 a 800, em dois
   recortes: o latino cobre o português; o estendido só baixa se a página
   usar um caractere dele. Licença em assets/fonts/OFL.txt. */
@font-face {
	font-family: 'Fustat';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('assets/fonts/fustat-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Fustat';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('assets/fonts/fustat-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ######
   Variáveis
############ */

:root {
	/* font family */
	--font-display: 'Fustat', ui-sans-serif, system-ui, sans-serif;
	--font-primary: 'Fustat', ui-sans-serif, system-ui, sans-serif;

	/* Raio de borda base do design system */
	--radius: 0.125rem;

	/* Neutros quentes */
	--background: oklch(0.984 0.005 85);
	--foreground: oklch(0.26 0.012 45);
	--card: oklch(0.995 0.003 85);

	/* Terracota da marca (#946B59) */
	--primary: oklch(0.552 0.055 45.5);
	--primary-foreground: oklch(0.985 0.006 85);
	--primary-soft: oklch(0.895 0.028 55);
	--primary-deep: oklch(0.43 0.05 42);

	--secondary: oklch(0.955 0.011 80);
	--muted: oklch(0.958 0.008 82);
	--muted-foreground: oklch(0.55 0.014 60);
	--accent: oklch(0.93 0.018 70);
	--accent-foreground: oklch(0.32 0.015 45);

	--cream: oklch(0.968 0.012 82);
	--clay: oklch(0.79 0.035 55);
	--charcoal: oklch(0.24 0.008 45);

	--border: oklch(0.9 0.012 75);
	--input: oklch(0.885 0.014 75);
	--ring: oklch(0.552 0.055 45.5);

	/* Elevação + movimento */
	--shadow-soft: 0 1px 2px oklch(0.26 0.012 45 / 0.04), 0 12px 32px -18px oklch(0.26 0.012 45 / 0.22);
	--shadow-lift: 0 2px 6px oklch(0.26 0.012 45 / 0.06), 0 26px 60px -28px oklch(0.26 0.012 45 / 0.3);
	--ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
	--transition-base: 400ms var(--ease-soft);

	/* Ritmo de espaçamento */
	--space-section: clamp(4rem, 9vw, 9rem);
	--space-gutter: clamp(1.25rem, 5vw, 4.5rem);

	/* Altura do cabeçalho fixo */
	--altura-header: 4.5rem;
}

@media (min-width:1024px) {
	:root {
		--altura-header: 5.5rem;
	}
}

/* ######
   Básicos
############ */

*, *::before, *::after {
	box-sizing: border-box;
	border: 0 solid var(--border);
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	line-height: 1.5;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ######
   Animação de entrada (scroll-reveal) + microinterações
   Ativada por scripts.js via IntersectionObserver. Sem JS ou com
   prefers-reduced-motion, o conteúdo já nasce visível — nunca some.
############ */

[data-revelar] {
	opacity: 0;
	transform: translateY(24px);
}
[data-revelar].visivel {
	opacity: 1;
	transform: none;
	transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
}
@media (prefers-reduced-motion: reduce) {
	[data-revelar] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@keyframes selecionar {
	0%   { transform: scale(1); }
	40%  { transform: scale(.82); }
	100% { transform: scale(1); }
}
.pop {
	animation: selecionar .35s var(--ease-soft);
}
@media (prefers-reduced-motion: reduce) {
	.pop { animation: none; }
}

body {
	color: var(--foreground);
	font-family: var(--font-primary);
	font-size: 1rem;
	background: var(--background);
	-webkit-font-smoothing: antialiased;
}

/* Títulos herdam tamanho/peso: quem define a escala é sempre uma classe. */
h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
	font-weight: inherit;
}
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: -0.015em;
}

a {
	color: inherit;
	text-decoration: none;
}

ul, ol {
	list-style: none;
}

img, svg, video, iframe {
	display: block;
	max-width: 100%;
}
img, video {
	height: auto;
}

button, input, select, textarea {
	font: inherit;
	color: inherit;
	background: transparent;
	border-radius: 0;
}
button {
	cursor: pointer;
}
button:disabled {
	pointer-events: none;
	opacity: .5;
}

select {
	appearance: none;
}

:focus:not(:focus-visible) { outline: none; }
:focus-visible {
	outline: 1px solid var(--ring);
	outline-offset: 2px;
}

[hidden] { display: none !important; }

/* ######
   Classes gerais
############ */

/* site */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: clip;
}

#conteudo {
	flex: 1;
	padding-top: var(--altura-header);
}

/* container */

.container {
	width: 100%;
	max-width: 90rem;
	margin-inline: auto;
	padding-inline: var(--space-gutter);
}

/* espaçamento vertical de seção */

.section-y {
	padding-block: var(--space-section);
}

/* fundos */

.fundo-creme {
	background: var(--cream);
}

/* utilitários pontuais */

.largura-total { width: 100%; }
.cinza { filter: grayscale(1); }

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* ######
   Textos
############ */

/* eyebrow */

.eyebrow {
	color: var(--muted-foreground);
	font-size: 0.6875rem;
	line-height: 1.5;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* display */

.display-xl {
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 6vw, 4.5rem);
	font-weight: 300;
	line-height: 1.03;
	letter-spacing: -0.03em;
}

.display-lg {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 3.6vw, 2.75rem);
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.display-sm {
	font-family: var(--font-display);
}

/* espaço entre o eyebrow e o título que vem logo abaixo */

.com-eyebrow {
	margin-top: 1rem;
}

/* box-titulo (componente section-header) */

.box-titulo {
	max-width: 42rem;
}
.box-titulo.centro {
	margin-inline: auto;
	text-align: center;
}
.box-titulo-texto {
	color: var(--muted-foreground);
	font-size: 1rem;
	line-height: 1.625;
	margin-top: 1rem;
}

/* link-underline */

.link-underline {
	position: relative;
}
.link-underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.25rem;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition-base);
}
.link-underline:hover::after {
	transform: scaleX(1);
}

/* link-leia (chamada "Leia mais") */

.link-leia {
	color: var(--primary);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
}
.link-leia svg {
	width: 0.875rem;
	height: 0.875rem;
	transition: transform .3s;
}
a:hover .link-leia svg ,
.link-leia:hover svg {
	transform: translateX(0.25rem);
}

/* ######
   Botões
############ */

/* botao */

.botao {
	color: var(--primary-foreground);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 2.75rem;
	padding: 0.5rem 1.5rem;
	cursor: pointer;
	transition: all .3s ease-out;
	background: var(--primary);
}
.botao:hover {
	background: var(--primary-deep);
}
.botao:active {
	transform: scale(.96);
}
.botao svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	pointer-events: none;
}
.botao:disabled {
	pointer-events: none;
	opacity: .5;
}

/* variações */

.botao.primary {
	color: var(--primary-foreground);
	background: var(--primary);
}
.botao.primary:hover {
	background: var(--primary-deep);
}

.botao.secondary ,
.botao.outline {
	color: var(--primary);
	border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent);
	background: transparent;
}
.botao.secondary:hover ,
.botao.outline:hover {
	color: var(--primary-foreground);
	background: var(--primary);
}

.botao.quiet {
	color: var(--foreground);
	background: var(--cream);
}
.botao.quiet:hover {
	background: var(--accent);
}

/* botão de contorno claro (sobre fundo terracota) */

.botao.outline.claro {
	color: var(--primary-foreground);
	border-color: color-mix(in oklab, var(--primary-foreground) 40%, transparent);
}
.botao.outline.claro:hover {
	color: var(--primary);
	background: var(--primary-foreground);
}

/* tamanhos */

.botao.sm {
	font-size: 0.6875rem;
	height: 2.25rem;
	padding-inline: 1rem;
}
.botao.lg {
	height: 3.25rem;
	padding-inline: 2.5rem;
}
.botao.xl {
	font-size: 0.875rem;
	height: 3.5rem;
	padding-inline: 3rem;
}

/* ######
   Formulários
############ */

/* campo (input com linha inferior) */

.campo {
	color: var(--foreground);
	font-size: 1rem;
	display: flex;
	width: 100%;
	height: 3rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--input);
	background: transparent;
	transition: border-color .3s;
}
@media (min-width:768px) {
	.campo {
		font-size: 0.875rem;
	}
}
.campo::placeholder {
	color: var(--muted-foreground);
}
.campo:focus-visible {
	outline: none;
	border-color: var(--primary);
}
.campo:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* campo-area (textarea) */

.campo-area {
	min-height: 60px;
	height: auto;
	display: block;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--input);
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
	resize: vertical;
}
.campo-area:focus-visible {
	outline: 1px solid var(--ring);
	outline-offset: 0;
	border-color: var(--input);
}

/* campo-select */

.campo-select {
	color: var(--foreground);
	font-size: 0.875rem;
	height: 2.25rem;
	padding: 0.5rem 2rem 0.5rem 0.75rem;
	border: 1px solid var(--input);
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
	background-size: 1rem;
}

/* formulario */

.formulario {
	display: grid;
	gap: 1.5rem;
}
.formulario-duplo {
	display: grid;
	gap: 1.5rem;
}
@media (min-width:640px) {
	.formulario-duplo {
		grid-template-columns: repeat(2,minmax(0,1fr));
	}
}
.formulario-campo {
	display: grid;
	gap: 0.5rem;
}
.formulario-campo label {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
}
.formulario-aviso {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	text-align: center;
}

/* ######
   Notificações (toaster)
############ */

/* Sobe o suficiente para não cair em cima do botão de voltar ao topo, que
   ocupa o mesmo canto. */
.box-toaster {
	position: fixed;
	right: 1rem;
	bottom: 5.5rem;
	z-index: 100;
	display: flex;
	flex-direction: column-reverse;
	gap: 0.75rem;
	width: min(21rem, calc(100vw - 2rem));
	pointer-events: none;
}

.box-toaster-item {
	color: var(--foreground);
	font-size: 0.8125rem;
	line-height: 1.4;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	box-shadow: var(--shadow-soft);
	background: var(--card);
	transform: translateY(0.75rem);
	opacity: 0;
	transition: all .3s var(--ease-soft);
	pointer-events: auto;
}
.box-toaster-item.ativo {
	transform: translateY(0);
	opacity: 1;
}
.box-toaster-item svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	color: var(--primary);
}

/* ######
   Voltar ao topo
############ */

/* Fica fora do fluxo e só entra em cena depois que a página rola. Divide o
   canto inferior direito com o toaster (z-index 100), o aviso de cookies (60)
   e, no lançamento VIP, a pílula de WhatsApp (50) — daí o 55 e o desvio
   abaixo. */
.box-topo {
	color: var(--primary-foreground);
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 55;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 9999px;
	box-shadow: var(--shadow-lift);
	background: var(--primary);
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition: opacity .3s var(--ease-soft), transform .3s var(--ease-soft), visibility .3s;
}
.box-topo.ativo {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.box-topo:hover { opacity: .9; }
.box-topo svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* A pílula do lançamento VIP é condicional (depende do WhatsApp preenchido e
   do acesso liberado), então o desvio segue a presença dela na página — não a
   classe do body. Sem suporte a :has() o pior caso é a sobreposição antiga. */
body:has(.box-vip-flutuante) .box-topo { bottom: 5rem; }
body:has(.box-vip-flutuante) .box-toaster { bottom: 9.25rem; }

@media (prefers-reduced-motion: reduce) {
	.box-topo { transition: opacity .3s, visibility .3s; transform: none; }
}

/* ######
   Cabeçalho
############ */

#header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 50;
	background: var(--background);
	transition: all .5s;
}
#header.rolado {
	border-bottom: 1px solid var(--border);
	backdrop-filter: blur(12px);
	background: color-mix(in oklab, var(--background) 92%, transparent);
}

.box-header-grid {
	display: grid;
	grid-template-columns: auto minmax(0,1fr) auto;
	align-items: center;
	gap: 1rem;
	height: 4.5rem;
}
@media (min-width:1024px) {
	.box-header-grid {
		height: 5.5rem;
	}
}

/* marca */

.box-header-grid-marca {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.btn-menu {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	flex-shrink: 0;
	margin-left: -0.5rem;
	color: var(--foreground);
}
@media (min-width:1024px) {
	.btn-menu { display: none; }
}
.btn-menu svg {
	width: 1.25rem;
	height: 1.25rem;
}

.box-header-grid-marca-logo {
	min-width: 0;
}

.logo-nome {
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@media (min-width:1024px) {
	.box-header-grid-marca-logo .logo-nome { font-size: 1rem; }
}

.logo-complemento {
	color: var(--primary);
	font-size: 0.55rem;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	display: block;
	margin-top: 0.25rem;
}

/* menu */

.box-header-grid-menu {
	display: none;
}
@media (min-width:1024px) {
	.box-header-grid-menu {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 2.25rem;
	}
}
.box-header-grid-menu a {
	color: var(--muted-foreground);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transition: color .3s;
}
.box-header-grid-menu a:hover {
	color: var(--foreground);
}

/* ações */

.box-header-grid-acoes {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.125rem;
	flex-shrink: 0;
}
@media (min-width:640px) {
	.box-header-grid-acoes { gap: 0.25rem; }
}

.btn-icone {
	color: var(--foreground);
	position: relative;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	transition: color .3s;
}
.btn-icone:hover {
	color: var(--primary);
}
.btn-icone svg {
	width: 1.05rem;
	height: 1.05rem;
}
.btn-icone.somente-sm {
	display: none;
}
@media (min-width:640px) {
	.btn-icone.somente-sm { display: grid; }
}

.btn-icone .contador {
	color: var(--primary-foreground);
	font-size: 0.6rem;
	font-weight: 500;
	line-height: 1;
	position: absolute;
	top: 0.375rem;
	right: 0.25rem;
	display: grid;
	place-items: center;
	min-width: 1rem;
	height: 1rem;
	padding-inline: 0.25rem;
	border-radius: 9999px;
	background: var(--primary);
}

/* ######
   Mobile (drawer)
############ */

#mobile {
	position: fixed;
	inset: 0;
	z-index: 50;
	pointer-events: none;
}
@media (min-width:1024px) {
	#mobile { display: none; }
}
#mobile.ativo {
	pointer-events: auto;
}

.box-mobile-fundo {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .5s;
	background: color-mix(in oklab, var(--charcoal) 35%, transparent);
}
#mobile.ativo .box-mobile-fundo {
	opacity: 1;
}

.box-mobile-contain {
	position: absolute;
	inset-block: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: 86%;
	max-width: 24rem;
	padding: 1.75rem 2rem 2.5rem;
	transform: translateX(-100%);
	transition: transform .5s var(--ease-soft);
	background: var(--background);
}
#mobile.ativo .box-mobile-contain {
	transform: translateX(0);
}

.box-mobile-contain-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.box-mobile-contain-head span {
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 300;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}
.btn-mobile {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: -0.5rem;
}
.btn-mobile svg {
	width: 1.25rem;
	height: 1.25rem;
}

.box-mobile-contain-menu {
	display: flex;
	flex-direction: column;
	margin-top: 3rem;
}
.box-mobile-contain-menu a {
	font-size: 1.125rem;
	font-weight: 300;
	letter-spacing: 0.025em;
	display: block;
	padding-block: 1.25rem;
	border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
	transform: translateY(0.75rem);
	opacity: 0;
	transition: all .5s;
}
#mobile.ativo .box-mobile-contain-menu a {
	transform: translateY(0);
	opacity: 1;
	transition-delay: var(--atraso, 0ms);
}

.box-mobile-contain-info {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-top: auto;
}
.box-mobile-contain-info p + p {
	margin-top: 0.5rem;
}

/* ######
   Rodapé
############ */

#footer {
	margin-top: 1px;
	background: var(--cream);
}

.box-footer-grid {
	display: grid;
	gap: 3.5rem;
	padding-block: 5rem;
}
@media (min-width:1024px) {
	.box-footer-grid {
		grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);
		gap: 3rem;
		padding-block: 7rem;
	}
}

.box-footer-grid-marca {
	max-width: 24rem;
}
.box-footer-grid-marca .logo-nome {
	font-size: 1.125rem;
	letter-spacing: 0.24em;
}
.box-footer-grid-marca .logo-complemento {
	font-size: 0.6rem;
}
.box-footer-grid-marca-texto {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	line-height: 1.625;
	margin-top: 1.5rem;
}
.box-footer-grid-marca-social {
	color: var(--primary);
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-top: 2rem;
	border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
	border-radius: 9999px;
	transition: all .3s;
}
.box-footer-grid-marca-social:hover {
	color: var(--primary-foreground);
	background: var(--primary);
}
.box-footer-grid-marca-social svg {
	width: 1rem;
	height: 1rem;
}

.box-footer-grid-coluna ul {
	margin-top: 1.5rem;
}
.box-footer-grid-coluna li + li {
	margin-top: 0.75rem;
}
.box-footer-grid-coluna a {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	transition: color .3s;
}
.box-footer-grid-coluna a:hover {
	color: var(--foreground);
}

.box-footer-grid-news-contato {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	margin-top: 2.25rem;
}
.box-footer-grid-news-contato li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.box-footer-grid-news-contato li + li {
	margin-top: 0.75rem;
}
.box-footer-grid-news-contato svg {
	color: var(--primary);
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.box-footer-base {
	border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
}
.box-footer-base-grid {
	font-size: 0.75rem;
	display: grid;
	gap: 1.25rem;
	padding-block: 1.75rem;
}
@media (min-width:640px) {
	.box-footer-base-grid {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
.box-footer-base-grid p {
	color: var(--muted-foreground);
}
.box-footer-base-grid ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.box-footer-base-grid li {
	color: var(--muted-foreground);
	font-size: 0.65rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--border);
}



/* ######
   [ Componente ] Card de produto
############ */

.box-card-image {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--cream);
}
.box-card-image > a {
	display: block;
	width: 100%;
	height: 100%;
}
.box-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--ease-soft);
}
.box-card:hover .box-card-image img {
	transform: scale(1.05);
}

.box-card-image-selo {
	font-size: 0.6rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 0.25rem 0.75rem;
	background: color-mix(in oklab, var(--background) 90%, transparent);
}
.box-card-image-selo.esgotado {
	color: #FFFFFF;
	background: #DC2626;
}

.btn-desejo {
	color: var(--foreground);
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	backdrop-filter: blur(4px);
	background: color-mix(in oklab, var(--background) 85%, transparent);
	transition: color .3s;
}
.btn-desejo:hover {
	color: var(--primary);
}
.btn-desejo svg {
	width: 1rem;
	height: 1rem;
}
.btn-desejo[aria-pressed="true"] svg {
	color: var(--primary);
	fill: var(--primary);
}

.box-card-image-acao {
	position: absolute;
	inset-inline: 0.75rem;
	bottom: 0.75rem;
	transition: all .5s;
}
.box-card-image-acao .botao {
	width: 100%;
}
@media (min-width:1024px) {
	.box-card-image-acao {
		transform: translateY(0.75rem);
		opacity: 0;
	}
	.box-card:hover .box-card-image-acao ,
	.box-catalogo-card:hover .box-card-image-acao {
		transform: translateY(0);
		opacity: 1;
	}
}

.box-card-info {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin: 1rem 0 .5rem;
}
.box-card-info-nome {
	min-width: 0;
}
.box-card-info-nome h2 ,
.box-card-info-nome h3 {
	font-size: 0.875rem;
	font-weight: 400;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.box-card-info-nome p {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-top: 0.25rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.box-card-info-preco {
	font-size: 0.875rem;
	flex-shrink: 0;
}
.box-card-info-valores {
	text-align: right;
	flex-shrink: 0;
}
.box-card-info-valores .preco-antigo {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	text-decoration: line-through;
}
.box-card-info-valores .preco {
	font-size: 0.875rem;
}
.box-card-info-valores .preco.promocao {
	color: var(--primary);
}

/* ######
   [ Componente ] Ícone em círculo
############ */

.icone-circulo {
	color: var(--primary);
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	flex-shrink: 0;
	border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
	border-radius: 9999px;
}
.icone-circulo svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* ######
   [ Componente ] Grade de cards com ícone
############ */

.box-cards-grid {
	display: grid;
	gap: 1.25rem;
	margin-top: 3.5rem;
}
@media (min-width:640px) {
	.box-cards-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px) {
	.box-cards-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

.box-cards-grid-item {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 2rem;
	border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
	background: var(--card);
}
@media (min-width:1024px) {
	.box-cards-grid-item { padding: 2.5rem; }
}
.box-cards-grid.sem-borda .box-cards-grid-item {
	border: 0;
	background: var(--background);
}
.box-cards-grid-item-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.box-cards-grid-item-head .numero ,
.box-etapas-lista-item-info-head .numero {
	color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
	font-family: var(--font-display);
	font-size: 1.875rem;
	font-weight: 300;
}
.box-cards-grid-item h3 {
	font-size: 1rem;
	margin-top: 2rem;
}
.box-cards-grid-item p {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	line-height: 1.625;
	margin-top: 0.75rem;
}

/* ######
   [ Componente ] Instagram
############ */

.box-instagram {
	margin-top: 3rem;
}
.box-instagram-grid {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 0.25rem;
}
@media (min-width:640px) {
	.box-instagram-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (min-width:1024px) {
	.box-instagram-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
}
.box-instagram-grid a {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--cream);
}
.box-instagram-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--ease-soft);
}
.box-instagram-grid a:hover img {
	transform: scale(1.05);
}
.box-instagram-grid-hover {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	opacity: 0;
	transition: opacity .5s;
	background: color-mix(in oklab, var(--charcoal) 25%, transparent);
}
.box-instagram-grid a:hover .box-instagram-grid-hover {
	opacity: 1;
}
.box-instagram-grid-hover svg {
	color: var(--primary-foreground);
	width: 1.25rem;
	height: 1.25rem;
}
.box-instagram-handle {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
	margin-top: 1.5rem;
}
.box-instagram-botao {
	text-align: center;
	margin-top: 2.5rem;
}

/* ######
   [ Componente ] Breadcrumb
############ */

.box-breadcrumb {
	color: var(--muted-foreground);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.box-breadcrumb svg {
	width: 0.875rem;
	height: 0.875rem;
}
.box-breadcrumb a {
	transition: color .3s;
}
.box-breadcrumb a:hover ,
.box-breadcrumb [aria-current] {
	color: var(--foreground);
}

/* ######
   [ Componente ] Acordeão
############ */

.box-acordeao.com-topo {
	border-top: 1px solid var(--border);
}
.box-acordeao-item {
	border-bottom: 1px solid var(--border);
}
.box-acordeao-item-pergunta {
	font-size: 0.875rem;
	font-weight: 500;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding-block: 1rem;
	transition: all .2s;
}
.box-acordeao-item-pergunta:hover > span:first-child {
	text-decoration: underline;
}
.box-acordeao-item-pergunta > svg {
	color: var(--muted-foreground);
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	transition: transform .2s;
}
.box-acordeao-item-pergunta[aria-expanded="true"] > svg {
	transform: rotate(180deg);
}
.box-acordeao-item-pergunta.destaque {
	font-size: 1rem;
	font-weight: 400;
}
.box-acordeao-item-pergunta.filtros {
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.box-acordeao-item-pergunta.filtros span:first-child {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.box-acordeao-item-pergunta.filtros span:first-child svg {
	width: 1rem;
	height: 1rem;
}

.box-acordeao-item-resposta {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s var(--ease-soft);
}
.box-acordeao-item.ativo .box-acordeao-item-resposta {
	grid-template-rows: 1fr;
}
/* O respiro embaixo da resposta é um espaçador interno, nunca padding: com a
   linha em 0fr o content box zera, mas o padding box continua de pé e o
   overflow recorta nele — o que deixava a primeira linha da resposta à mostra
   com o item fechado. Dentro da caixa recortada, o espaçador some junto. */
.box-acordeao-item-resposta > .conteudo {
	font-size: 0.875rem;
	overflow: hidden;
}
.box-acordeao-item-resposta > .conteudo::after {
	content: "";
	display: block;
	height: 1rem;
}

/* ######
   Home | Hero
############ */

/* Proporção das artes pedidas no painel: 1920×780 no computador e 800×1200
   no celular. O piso de altura só existe para o texto sobreposto caber em
   tela estreita. */
#hero {
	position: relative;
	width: 100%;
	aspect-ratio: 1920 / 780;
	min-height: 30rem;
	overflow: hidden;
	background: var(--cream);
}
@media (max-width: 767px) {
	#hero {
		aspect-ratio: 800 / 1200;
		min-height: 0;
	}
}
/* Um slide ou vários: todos empilhados no mesmo lugar. Com um só, ele é o
   próprio .ativo e nada muda. */
.box-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 900ms var(--ease-soft), visibility 0s linear 900ms;
}
.box-hero-slide.ativo {
	opacity: 1;
	visibility: visible;
	transition: opacity 900ms var(--ease-soft), visibility 0s;
}
.box-hero-slide picture,
.box-hero-slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.box-hero-slide img {
	object-fit: cover;
}
/* Slide sem texto é arte pronta (texto na própria imagem): aparece inteira,
   nunca cortada, mesmo fora da proporção ideal. */
.box-hero-slide.sem-texto img {
	object-fit: contain;
}
.box-hero-veu {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right,
		color-mix(in oklab, var(--charcoal) 60%, transparent),
		color-mix(in oklab, var(--charcoal) 25%, transparent),
		transparent);
}
/* Slide com destino e sem texto do botão: a imagem inteira é o link. */
.box-hero-link {
	position: absolute;
	inset: 0;
}
.box-hero-link:focus-visible {
	outline: 2px solid var(--primary-foreground);
	outline-offset: -6px;
}
#hero .container {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}
.box-hero-contain-info {
	max-width: 36rem;
}
.box-hero-contain-info-marca {
	color: color-mix(in oklab, var(--primary-foreground) 80%, transparent);
	font-size: 0.6875rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}
.box-hero-contain-info h1 {
	color: var(--primary-foreground);
	margin-top: 1.5rem;
}
.box-hero-contain-info-texto {
	color: color-mix(in oklab, var(--primary-foreground) 85%, transparent);
	font-size: 1rem;
	line-height: 1.625;
	max-width: 28rem;
	margin-top: 1.5rem;
}
.box-hero-contain-info .botao {
	margin-top: 2.5rem;
}

.box-hero-scroll {
	color: color-mix(in oklab, var(--primary-foreground) 80%, transparent);
	position: absolute;
	bottom: 2rem;
	left: 50%;
	translate: -50% 0;
	animation: pulo 1s infinite;
	transition: color .3s;
}
.box-hero-scroll:hover {
	color: var(--primary-foreground);
}
.box-hero-scroll svg {
	width: 1.5rem;
	height: 1.5rem;
}

@keyframes pulo {
	0% , 100% {
		transform: translateY(-25%);
		animation-timing-function: cubic-bezier(.8,0,1,1);
	}
	50% {
		transform: none;
		animation-timing-function: cubic-bezier(0,0,.2,1);
	}
}

/* Sombra saindo do canto inferior direito: os controles brancos continuam
   legíveis sobre arte clara. */
[data-hero-carrossel]::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: min(36rem, 75%);
	height: 13rem;
	background: radial-gradient(ellipse 100% 100% at 100% 100%,
		color-mix(in oklab, var(--charcoal) 72%, transparent),
		color-mix(in oklab, var(--charcoal) 38%, transparent) 40%,
		transparent 78%);
	pointer-events: none;
}

.box-hero-controles {
	position: absolute;
	right: var(--space-gutter);
	bottom: 2rem;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--primary-foreground);
}
.box-hero-controles button {
	display: grid;
	place-items: center;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}
.box-hero-controles-seta,
.box-hero-controles-pausa {
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid color-mix(in oklab, var(--primary-foreground) 40%, transparent) !important;
	border-radius: 9999px;
	transition: background-color .3s, border-color .3s;
}
.box-hero-controles-seta:hover,
.box-hero-controles-pausa:hover {
	background: color-mix(in oklab, var(--primary-foreground) 15%, transparent);
	border-color: var(--primary-foreground) !important;
}
.box-hero-controles svg {
	width: 1.125rem;
	height: 1.125rem;
}
.box-hero-controles-pausa svg {
	width: 0.875rem;
	height: 0.875rem;
}
.box-hero-controles-pausa .icone-tocar,
.box-hero-controles-pausa.pausado .icone-pausar { display: none; }
.box-hero-controles-pausa.pausado .icone-tocar { display: grid; }
.box-hero-controles-pontos {
	display: flex;
	gap: 0.25rem;
}
/* Área de toque de 24px com o traço fino desenhado dentro. */
.box-hero-controles-pontos button {
	width: 1.5rem;
	height: 1.5rem;
}
.box-hero-controles-pontos button::before {
	content: "";
	width: 0.75rem;
	height: 2px;
	background: color-mix(in oklab, var(--primary-foreground) 45%, transparent);
	transition: width var(--transition-base), background-color var(--transition-base);
}
.box-hero-controles-pontos button[aria-current="true"]::before {
	width: 1.25rem;
	background: var(--primary-foreground);
}
.box-hero-controles button:focus-visible {
	outline: 2px solid var(--primary-foreground);
	outline-offset: 2px;
}

/* No celular a seta de rolagem sai do centro para não disputar espaço. */
@media (max-width: 767px) {
	[data-hero-carrossel] .box-hero-scroll { display: none; }
	/* Controles centralizados: a sombra sobe da borda inferior inteira. */
	[data-hero-carrossel]::after {
		width: 100%;
		height: 8rem;
		background: linear-gradient(to top,
			color-mix(in oklab, var(--charcoal) 65%, transparent),
			transparent);
	}
	.box-hero-controles {
		left: 50%;
		right: auto;
		translate: -50% 0;
		bottom: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.box-hero-scroll { animation: none; }
	.box-hero-slide,
	.box-hero-slide.ativo { transition: none; }
}

/* ######
   Home | Categorias
############ */

.box-categorias-grid {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 0.75rem;
	margin-top: 3rem;
}
@media (min-width:640px) {
	.box-categorias-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (min-width:1024px) {
	.box-categorias-grid { gap: 1.25rem; }
}
.box-categorias-grid-item {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--cream);
}
.box-categorias-grid-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--ease-soft);
}
.box-categorias-grid-item:hover img {
	transform: scale(1.05);
}
.box-categorias-grid-item-veu {
	position: absolute;
	inset: 0;
	opacity: .7;
	transition: opacity .5s;
	background: linear-gradient(to top, color-mix(in oklab, var(--charcoal) 70%, transparent), transparent 50%);
}
.box-categorias-grid-item:hover .box-categorias-grid-item-veu {
	opacity: 1;
}
.box-categorias-grid-item-nome {
	color: var(--primary-foreground);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 1rem;
}
@media (min-width:1024px) {
	.box-categorias-grid-item-nome {
		font-size: 0.875rem;
		padding: 1.5rem;
	}
}

/* ######
   Home | Seções de produtos
############ */

.secao-produtos {
	padding-bottom: 6rem;
}
@media (min-width:1024px) {
	.secao-produtos { padding-bottom: 8rem; }
}

.box-produtos-head {
	display: grid;
	gap: 1.5rem;
}
.box-produtos-head .botao {
	width: 100%;
}
@media (min-width:640px) {
	.box-produtos-head {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}
	.box-produtos-head .botao { width: auto; }
}

.box-produtos-grid {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	column-gap: 1.25rem;
	row-gap: 3rem;
	margin-top: 3rem;
}
@media (min-width:1024px) {
	.box-produtos-grid {
		grid-template-columns: repeat(4,minmax(0,1fr));
		column-gap: 2rem;
	}
}

/* variante em carrossel (scroll-snap horizontal até o desktop) */

.box-produtos-grid.carrossel {
	display: flex;
	gap: 1.25rem;
	margin-inline: calc(var(--space-gutter) * -1);
	padding-inline: var(--space-gutter);
	padding-bottom: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}
.box-produtos-grid.carrossel > .box-card {
	width: 70vw;
	flex-shrink: 0;
	scroll-snap-align: start;
}
@media (min-width:640px) {
	.box-produtos-grid.carrossel > .box-card { width: 42vw; }
}
@media (min-width:1024px) {
	.box-produtos-grid.carrossel {
		display: grid;
		grid-template-columns: repeat(4,minmax(0,1fr));
		gap: 2rem;
		margin-inline: 0;
		padding-inline: 0;
		padding-bottom: 0;
		overflow: visible;
	}
	.box-produtos-grid.carrossel > .box-card { width: auto; }
}

/* ######
   Home | Coleções
############ */

.box-colecoes-lista {
	display: grid;
	gap: 4rem;
	margin-top: 4rem;
}
@media (min-width:1024px) {
	.box-colecoes-lista { gap: 6rem; }
}
.box-colecoes-lista-item {
	display: grid;
	align-items: center;
	gap: 2rem;
}
@media (min-width:1024px) {
	.box-colecoes-lista-item {
		grid-template-columns: repeat(2,minmax(0,1fr));
		gap: 4rem;
	}
	.box-colecoes-lista-item.invertido .box-colecoes-lista-item-image { order: 2; }
	.box-colecoes-lista-item.invertido .box-colecoes-lista-item-info {
		order: 1;
		margin-left: auto;
	}
}
.box-colecoes-lista-item-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--background);
}
.box-colecoes-lista-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--ease-soft);
}
.box-colecoes-lista-item-image img:hover {
	transform: scale(1.05);
}
.box-colecoes-lista-item-info {
	max-width: 28rem;
}
.box-colecoes-lista-item-info h3 {
	margin-top: 1rem;
}
.box-colecoes-lista-item-info p {
	color: var(--muted-foreground);
	font-size: 1rem;
	line-height: 1.625;
	margin-top: 1.25rem;
}
.box-colecoes-lista-item-info .botao {
	margin-top: 2rem;
}

/* ######
   Home | História
############ */

.box-historia-grid {
	display: grid;
	align-items: center;
	gap: 2.5rem;
}
@media (min-width:1024px) {
	.box-historia-grid {
		grid-template-columns: repeat(2,minmax(0,1fr));
		gap: 5rem;
	}
}
.box-historia-grid-image {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--cream);
}
.box-historia-grid-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.box-historia-grid-info {
	max-width: 36rem;
}
.box-historia-grid-info p {
	color: var(--muted-foreground);
	font-size: 1rem;
	line-height: 1.625;
	margin-top: 1.5rem;
}
.box-historia-grid-info p + p {
	margin-top: 1rem;
}
.box-historia-grid-info .botao {
	margin-top: 2.5rem;
}

/* ######
   Home | Processo
############ */

#processo {
	padding-bottom: 6rem;
}
@media (min-width:1024px) {
	#processo { padding-bottom: 8rem; }
}

/* ######
   Home | Depoimentos
############ */

.box-depoimentos-grid {
	display: flex;
	gap: 1.25rem;
	margin-top: 3.5rem;
	margin-inline: calc(var(--space-gutter) * -1);
	padding-inline: var(--space-gutter);
	padding-bottom: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}
.box-depoimentos-grid-item {
	display: flex;
	flex-direction: column;
	width: 78vw;
	flex-shrink: 0;
	scroll-snap-align: start;
	padding: 2rem;
	border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
	background: var(--background);
}
@media (min-width:640px) {
	.box-depoimentos-grid-item { width: 45vw; }
}
@media (min-width:1024px) {
	.box-depoimentos-grid {
		display: grid;
		grid-template-columns: repeat(4,minmax(0,1fr));
		margin-inline: 0;
		padding-inline: 0;
		padding-bottom: 0;
		overflow: visible;
	}
	.box-depoimentos-grid-item { width: auto; }
}
.box-depoimentos-grid-item-nota {
	color: var(--primary);
	display: flex;
	gap: 0.25rem;
}
.box-depoimentos-grid-item-nota svg {
	width: 0.875rem;
	height: 0.875rem;
	fill: var(--primary);
}
.box-depoimentos-grid-item blockquote {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.625;
	flex: 1;
	margin-top: 1.5rem;
}
.box-depoimentos-grid-item figcaption {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
}
.box-depoimentos-grid-item .avatar {
	color: var(--accent-foreground);
	font-size: 0.875rem;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	flex-shrink: 0;
	border-radius: 9999px;
	background: var(--accent);
}
.box-depoimentos-grid-item .dados {
	min-width: 0;
}
.box-depoimentos-grid-item .nome {
	font-size: 0.875rem;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.box-depoimentos-grid-item .local {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ######
   Home | Blog
############ */

.box-blog-grid {
	display: grid;
	gap: 2rem;
	margin-top: 3rem;
}
@media (min-width:1024px) {
	.box-blog-grid {
		grid-template-columns: repeat(3,minmax(0,1fr));
		gap: 2.5rem;
	}
}
.box-blog-grid-item-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cream);
}
.box-blog-grid-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--ease-soft);
}
.box-blog-grid-item:hover .box-blog-grid-item-image img {
	transform: scale(1.05);
}
.box-blog-grid-item .eyebrow {
	margin-top: 1.5rem;
}
.box-blog-grid-item h3 {
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.375;
	margin-top: 0.75rem;
}

/* ######
   Home | Instagram
############ */

#instagram {
	padding-bottom: 6rem;
}
@media (min-width:1024px) {
	#instagram { padding-bottom: 8rem; }
}
#instagram.com-espaco {
	padding-block: 5rem;
}
@media (min-width:1024px) {
	#instagram.com-espaco { padding-block: 7rem; }
}


/* ######
   Loja
############ */

#loja {
	padding-top: 2rem;
	padding-bottom: 6rem;
}
@media (min-width:1024px) {
	#loja { padding-bottom: 8rem; }
}

.box-loja-head {
	text-align: center;
	max-width: 480px;
	margin: 2rem auto 0;
}
.box-loja-head p {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	line-height: 1.625;
	margin-top: 1.25rem;
}

.box-loja-grid {
	display: grid;
	gap: 2.5rem;
	margin-top: 3.5rem;
}
@media (min-width:1024px) {
	.box-loja-grid {
		grid-template-columns: 260px minmax(0,1fr);
		gap: 3.5rem;
	}
}

.box-loja-grid-filtros {
	display: none;
}
@media (min-width:1024px) {
	.box-loja-grid-filtros { display: block; }
}
.box-loja-grid-filtros .sticky {
	position: sticky;
	top: 7rem;
}

.box-loja-grid-contain-topo {
	display: grid;
	gap: 1rem;
}
@media (min-width:640px) {
	.box-loja-grid-contain-topo {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
.box-loja-grid-contain-topo .contagem {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.box-loja-grid-contain-topo .ordenar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.box-loja-grid-contain-topo .ordenar > span {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	display: none;
}
.box-loja-grid-contain-topo select {
	color: var(--foreground);
	font-size: 0.875rem;
	width: 100%;
	height: 2.25rem;
	padding: 0.5rem 2rem 0.5rem 0.75rem;
	border: 1px solid var(--input);
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
	background-size: 1rem;
}
@media (min-width:640px) {
	.box-loja-grid-contain-topo .ordenar > span { display: block; }
	.box-loja-grid-contain-topo select { width: 13rem; }
}

.box-loja-grid-contain-mobile {
	margin-top: 1.5rem;
}
.box-loja-grid-contain-mobile .box-acordeao {
	border-top: 1px solid var(--border);
}
.box-loja-grid-contain-mobile .conteudo::after {
	height: 2rem;
}
@media (min-width:1024px) {
	.box-loja-grid-contain-mobile { display: none; }
}

.box-loja-grid-contain-lista {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	column-gap: 1.25rem;
	row-gap: 3rem;
	margin-top: 2.5rem;
}
@media (min-width:1024px) {
	.box-loja-grid-contain-lista {
		grid-template-columns: repeat(3,minmax(0,1fr));
		column-gap: 2rem;
	}
}

.box-loja-grid-contain-vazio {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	margin-top: 4rem;
}
.box-loja-grid-contain-mais {
	display: flex;
	justify-content: center;
	margin-top: 4rem;
}

.box-loja-paginacao {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 4rem;
}
.box-loja-paginacao .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	color: var(--muted-foreground);
	font-size: 0.875rem;
	transition: all .3s;
}
.box-loja-paginacao .page-numbers:hover { color: var(--primary); }
.box-loja-paginacao .page-numbers.dots { pointer-events: none; }
.box-loja-paginacao .page-numbers.current {
	color: var(--primary-foreground);
	background: var(--primary);
}
.box-loja-paginacao .page-numbers.prev,
.box-loja-paginacao .page-numbers.next {
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* filtros */

.box-filtros {
	display: grid;
	gap: 1.5rem;
}
.box-filtros-grupo {
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}
.box-filtros-grupo:first-child {
	padding-top: 0;
	border-top: 0;
}
.box-filtros-grupo ul {
	display: grid;
	gap: 0.75rem;
	margin-top: 1rem;
}
.box-filtros-grupo li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.box-filtros-grupo li label {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	flex: 1;
	cursor: pointer;
	transition: color .3s;
}
.box-filtros-grupo li label:hover {
	color: var(--foreground);
}
.box-filtros-grupo li > span {
	color: var(--muted-foreground);
	font-size: 0.75rem;
}

.box-filtros-grupo input[type="checkbox"] {
	appearance: none;
	position: relative;
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	border: 1px solid var(--input);
	cursor: pointer;
	transition: all .2s;
}
.box-filtros-grupo input[type="checkbox"]:checked {
	border-color: var(--primary);
	background: var(--primary);
}
.box-filtros-grupo input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 4px;
	width: 4px;
	height: 8px;
	border: solid var(--primary-foreground);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.box-filtros-grupo-cores {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}
.box-filtros-grupo-cores button {
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--border);
	border-radius: 9999px;
	transition: all .3s;
}
.box-filtros-grupo-cores button[aria-pressed="true"] {
	box-shadow: 0 0 0 2px var(--background), 0 0 0 3px var(--primary);
}
.box-filtros-grupo-cores button.cor-multipla {
	background: conic-gradient(from 180deg, #FFD1DC, #FFDFBA, #FFF5BA, #C1F0C1, #BAE1FF, #D7C1F9, #FFD1DC);
}

.box-filtros-grupo-faixa {
	position: relative;
	display: flex;
	align-items: center;
	height: 1.25rem;
	margin-top: 1rem;
}
.box-filtros-grupo-faixa .trilha {
	position: absolute;
	inset-inline: 0;
	height: 0.375rem;
	border-radius: 9999px;
	background: var(--muted);
}
.box-filtros-grupo-faixa .trilha-ativa {
	position: absolute;
	height: 100%;
	border-radius: 9999px;
	background: var(--primary);
}
.box-filtros-grupo-faixa input[type="range"] {
	appearance: none;
	position: absolute;
	inset-inline: 0;
	width: 100%;
	height: 1.25rem;
	margin: 0;
	background: transparent;
	pointer-events: none;
}
.box-filtros-grupo-faixa input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 1rem;
	height: 1rem;
	border: 1px solid var(--primary);
	border-radius: 9999px;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
	background: var(--background);
	cursor: pointer;
	pointer-events: auto;
}
.box-filtros-grupo-faixa input[type="range"]::-moz-range-thumb {
	width: 1rem;
	height: 1rem;
	border: 1px solid var(--primary);
	border-radius: 9999px;
	background: var(--background);
	cursor: pointer;
	pointer-events: auto;
}
.box-filtros-grupo-valores {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	display: flex;
	justify-content: space-between;
	margin-top: 0.75rem;
}

.limpar-filtros {
	justify-content: center;
	width: 100%;
	padding-inline: 1.5rem;
}

/* card do catálogo */

.box-catalogo-card-image {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--cream);
}
.box-catalogo-card-image > a {
	display: block;
	width: 100%;
	height: 100%;
}
.box-catalogo-card-image .imagem-principal {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all .9s var(--ease-soft);
}
.box-catalogo-card:hover .imagem-principal.com-troca {
	opacity: 0;
}
.box-catalogo-card-image .imagem-hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	opacity: 0;
	transition: opacity .9s var(--ease-soft);
}
.box-catalogo-card:hover .imagem-hover {
	opacity: 1;
}

.box-catalogo-card-image-selos {
	position: absolute;
	top: 1rem;
	left: 1rem;
	display: grid;
	gap: 0.375rem;
	pointer-events: none;
}
.box-catalogo-card-image-selos span {
	font-size: 0.6rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	width: fit-content;
	padding: 0.25rem 0.75rem;
	background: color-mix(in oklab, var(--background) 90%, transparent);
}
.box-catalogo-card-image-selos .esgotado {
	color: #FFFFFF;
	background: #DC2626;
}
.box-catalogo-card-image-selos .desconto {
	color: var(--primary-foreground);
	background: var(--primary);
}

.box-catalogo-card-image-botoes {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: grid;
	gap: 0.5rem;
}
.box-catalogo-card-image-botoes .btn-desejo {
	position: static;
}

/* visualização rápida */

.box-quick-view {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: grid;
	place-items: center;
	padding: 1rem;
}
.box-quick-view-fundo {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / .5);
}
.box-quick-view-contain {
	position: relative;
	display: grid;
	width: 100%;
	max-width: 48rem;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--shadow-lift);
	background: var(--background);
}
@media (min-width:768px) {
	.box-quick-view-contain { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.box-quick-view-contain-fechar {
	color: var(--foreground);
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 9999px;
	opacity: .7;
	background: color-mix(in oklab, var(--background) 80%, transparent);
	transition: opacity .3s;
}
.box-quick-view-contain-fechar:hover { opacity: 1; }
.box-quick-view-contain-fechar svg {
	width: 1rem;
	height: 1rem;
}

.box-quick-view-contain-image {
	height: 100%;
	aspect-ratio: initial;
	background: var(--cream);
}
.box-quick-view-contain-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.box-quick-view-contain-info {
	padding: 1.75rem;
}
@media (min-width:1024px) {
	.box-quick-view-contain-info { padding: 2.25rem; }
}
.box-quick-view-contain-info h2 {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 300;
	margin-top: 0.75rem;
}
.box-quick-view-contain-info .precos {
	display: flex;
	align-items: flex-end;
	gap: 0.75rem;
	margin-top: 1rem;
}
.box-quick-view-contain-info .antigo {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	text-decoration: line-through;
}
.box-quick-view-contain-info .antigo:empty { display: none; }
.box-quick-view-contain-info .atual {
	font-size: 1.25rem;
}
.box-quick-view-contain-info .parcela {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	margin-top: 0.25rem;
}
.box-quick-view-contain-info .descricao {
	font-size: 0.875rem;
	line-height: 1.625;
	margin-top: 1.25rem;
}
.box-quick-view-contain-info dl {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	display: grid;
	gap: 0.25rem;
	margin-top: 1.25rem;
}
.box-quick-view-contain-info dl > div {
	display: flex;
	gap: 0.5rem;
}
.box-quick-view-contain-info dt {
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.box-quick-view-contain-info .acoes {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

/* selo de estoque */

.selo-estoque {
	font-size: 0.6rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.75rem;
}
.box-quick-view-contain-info .selo-estoque {
	margin-top: 1.25rem;
}
.selo-estoque.disponivel {
	color: var(--primary-deep);
	background: color-mix(in oklab, var(--primary-soft) 40%, transparent);
}
.selo-estoque.esgotado {
	color: #FFFFFF;
	background: #DC2626;
}
.selo-estoque .ponto {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 9999px;
}
.selo-estoque.disponivel .ponto { background: #15803D; }
.selo-estoque.esgotado .ponto { background: #FFFFFF; }

/* ######
   Produto
############ */

#produto {
	padding-top: 2rem;
	padding-bottom: 6rem;
}
@media (min-width:1024px) {
	#produto { padding-bottom: 8rem; }
}

.box-produto-grid {
	display: grid;
	gap: 3rem;
	margin-top: 2rem;
}
@media (min-width:1024px) {
	.box-produto-grid {
		grid-template-columns: minmax(0,3fr) minmax(0,2fr);
		gap: 4rem;
	}
}

/* galeria */

.box-galeria {
	display: flex;
	flex-direction: column-reverse;
	gap: 1rem;
}
@media (min-width:1024px) {
	.box-galeria {
		flex-direction: row;
		gap: 1.5rem;
	}
}
.box-galeria-thumbs {
	display: flex;
	gap: 0.75rem;
	padding-bottom: 0.25rem;
	overflow-x: auto;
}
@media (min-width:1024px) {
	.box-galeria-thumbs {
		flex-direction: column;
		width: 5rem;
		padding-bottom: 0;
		overflow: visible;
	}
}
.box-galeria-thumbs li { flex-shrink: 0; }
.box-galeria-thumbs button {
	position: relative;
	display: block;
	width: 4rem;
	height: 5rem;
	overflow: hidden;
	border: 1px solid transparent;
	background: var(--cream);
	transition: border-color .3s;
}
@media (min-width:1024px) {
	.box-galeria-thumbs button {
		width: 5rem;
		height: 6rem;
	}
}
.box-galeria-thumbs button:hover { border-color: var(--border); }
.box-galeria-thumbs button.ativo { border-color: var(--primary); }
.box-galeria-thumbs img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.box-galeria-thumbs .video span {
	color: var(--primary);
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--cream);
}
.box-galeria-thumbs .video svg {
	width: 1rem;
	height: 1rem;
}

.box-galeria-palco { flex: 1; }
.box-galeria-palco-image {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--cream);
}
.box-galeria-palco-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease-out;
}
.box-galeria-palco-image img.ampliado {
	transform: scale(1.8);
}
.box-galeria-palco-image-video {
	color: var(--muted-foreground);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 100%;
	height: 100%;
}
.box-galeria-palco-image-video span {
	color: var(--primary);
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent);
	border-radius: 9999px;
}
.box-galeria-palco-image-video span svg {
	width: 1.5rem;
	height: 1.5rem;
}
.box-galeria-palco-image-video p {
	font-size: 0.65rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.box-galeria-palco-image .seta {
	color: var(--foreground);
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	backdrop-filter: blur(4px);
	background: color-mix(in oklab, var(--background) 85%, transparent);
	transition: color .3s;
}
.box-galeria-palco-image .seta:hover { color: var(--primary); }
.box-galeria-palco-image .seta svg {
	width: 1rem;
	height: 1rem;
}
.box-galeria-palco-image .anterior { left: 0.75rem; }
.box-galeria-palco-image .proxima { right: 0.75rem; }
.box-galeria-palco-dica {
	color: var(--muted-foreground);
	font-size: 0.65rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	display: none;
	margin-top: 0.75rem;
}
@media (min-width:1024px) {
	.box-galeria-palco-dica { display: block; }
}

/* coluna de informações */

@media (min-width:1024px) {
	.box-produto-grid-info { padding-top: 0.5rem; }
}
.box-produto-grid-info-preco {
	margin-top: 1.25rem;
}
.box-produto-grid-info-preco .valor {
	font-size: 1.5rem;
}
.box-produto-grid-info-preco .parcela {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	margin-top: 0.25rem;
}
.box-produto-grid-info-estoque {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1.25rem;
}
.box-produto-grid-info-estoque .sku {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.box-produto-grid-info-resumo {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	line-height: 1.625;
	margin-top: 1.5rem;
}
/* Produto variável: um botão por tamanho, antes da quantidade. */
.box-produto-grid-info-variacoes {
	margin: 2rem 0 0;
	padding: 0;
	border: 0;
}
.box-produto-grid-info-variacoes legend { margin-bottom: 0.75rem; padding: 0; }
.box-produto-grid-info-variacoes .opcoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.box-produto-grid-info-variacoes .opcao { position: relative; cursor: pointer; }
.box-produto-grid-info-variacoes .opcao input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: inherit;
}
.box-produto-grid-info-variacoes .opcao span {
	display: grid;
	place-items: center;
	min-width: 3rem;
	height: 2.75rem;
	padding: 0 1rem;
	border: 1px solid var(--border);
	font-size: 0.875rem;
	transition: border-color .3s, background .3s, color .3s;
}
.box-produto-grid-info-variacoes .opcao:hover span { border-color: var(--primary); }
.box-produto-grid-info-variacoes .opcao input:checked + span {
	border-color: var(--foreground);
	background: var(--foreground);
	color: var(--background);
}
.box-produto-grid-info-variacoes .opcao input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.box-produto-grid-info-variacoes .opcao input:disabled + span {
	color: var(--muted-foreground);
	text-decoration: line-through;
	cursor: not-allowed;
	opacity: 0.6;
}
/* O seletor já abre o bloco; a quantidade fica mais perto. */
.box-produto-grid-info-variacoes + .box-produto-grid-info-quantidade { margin-top: 1.5rem; }

.box-produto-grid-info-quantidade {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-top: 2rem;
}
.box-produto-grid-info-quantidade .contador {
	display: flex;
	align-items: center;
	border: 1px solid var(--border);
}
.box-produto-grid-info-quantidade .contador button {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	transition: color .3s;
}
.box-produto-grid-info-quantidade .contador button:hover { color: var(--primary); }
.box-produto-grid-info-quantidade .contador button svg {
	width: 0.875rem;
	height: 0.875rem;
}
.box-produto-grid-info-quantidade .contador > span {
	font-size: 0.875rem;
	text-align: center;
	width: 2.5rem;
}
.box-produto-grid-info-acoes {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.5rem;
}
.box-produto-grid-info-acoes .botao { width: 100%; }

/* abas */

.box-abas { margin-top: 3rem; }
.box-abas-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 1.5rem;
	border-bottom: 1px solid var(--border);
}
.box-abas-nav button {
	color: var(--muted-foreground);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: -1px;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid transparent;
	transition: all .3s;
}
.box-abas-nav button.ativo {
	color: var(--foreground);
	border-color: var(--primary);
}
.box-abas-painel {
	font-size: 0.875rem;
	line-height: 1.625;
	padding-top: 2rem;
}
.box-abas-painel .texto { color: var(--muted-foreground); }
.box-abas-painel .medidas {
	margin-top: 2rem;
}
.box-abas-painel .medidas dd { margin-top: 0.25rem; }
.box-abas-painel .cuidados { margin-top: 2rem; }
.box-abas-painel .cuidados p {
	color: var(--muted-foreground);
	margin-top: 0.75rem;
}
.box-abas-painel .cuidados ul {
	color: var(--muted-foreground);
	margin-top: 0.75rem;
}
.box-abas-painel .cuidados li {
	display: flex;
	gap: 0.75rem;
}
.box-abas-painel .cuidados li + li { margin-top: 0.5rem; }
.box-abas-painel .cuidados li::before {
	content: "";
	width: 0.25rem;
	height: 0.25rem;
	flex-shrink: 0;
	margin-top: 0.5rem;
	border-radius: 9999px;
	background: var(--primary);
}
.box-abas-painel .historia {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.box-abas-painel .historia p + p {
	color: var(--muted-foreground);
	margin-top: 0.75rem;
}
.box-abas-painel .nota {
	font-size: 1rem;
	font-style: italic;
	line-height: 1.625;
	margin-top: 2rem;
	padding: 1.5rem;
	background: var(--cream);
}
.box-abas-painel .frete {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 28rem;
	margin-top: 0.75rem;
}
@media (min-width:640px) {
	.box-abas-painel .frete { flex-direction: row; }
}
.box-abas-painel .frete .botao { flex-shrink: 0; }
.box-abas-painel .frete-resultado {
	max-width: 28rem;
	margin-top: 1.5rem;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.box-abas-painel .frete-resultado li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1rem;
}
.box-abas-painel .frete-resultado li + li { border-top: 1px solid var(--border); }
.box-abas-painel .frete-resultado .dados {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}
.box-abas-painel .frete-resultado .dados > svg {
	color: var(--primary);
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}
.box-abas-painel .frete-resultado .nome {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.box-abas-painel .frete-resultado .prazo {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	display: block;
}
.box-abas-painel .frete-resultado .valor { flex-shrink: 0; }
.box-abas-painel .prazo-envio {
	color: var(--muted-foreground);
	margin-top: 1.5rem;
}

/* compartilhar */

.box-compartilhar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 1.25rem;
	row-gap: 0.75rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}
.box-compartilhar button {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition: color .3s;
}
.box-compartilhar button:hover { color: var(--primary); }
.box-compartilhar button svg {
	width: 1rem;
	height: 1rem;
}

.box-produto-relacionados {
	margin-top: 6rem;
}
@media (min-width:1024px) {
	.box-produto-relacionados { margin-top: 8rem; }
}

/* ######
   Nossa História
############ */

#capa-historia {
	padding-top: 2.5rem;
}
@media (min-width:1024px) {
	#capa-historia { padding-top: 4rem; }
}
.box-capa-historia-grid {
	display: grid;
	align-items: flex-end;
	gap: 2.5rem;
}
@media (min-width:1024px) {
	.box-capa-historia-grid {
		grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
		gap: 4rem;
	}
}
.box-capa-historia-grid-info {
	max-width: 36rem;
}
.box-capa-historia-grid-info h1 {
	margin-top: 1.25rem;
}
.box-capa-historia-grid-info p {
	color: var(--muted-foreground);
	font-size: 1rem;
	line-height: 1.625;
	margin-top: 1.75rem;
}
.box-capa-historia-grid-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cream);
}
.box-capa-historia-grid-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.box-karina-grid {
	display: grid;
	align-items: center;
	gap: 2.5rem;
}
@media (min-width:1024px) {
	.box-karina-grid {
		grid-template-columns: repeat(2,minmax(0,1fr));
		gap: 5rem;
	}
	.box-karina-grid-image { order: 2; }
}
.box-karina-grid-image {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--cream);
}
.box-karina-grid-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.box-karina-grid-info {
	max-width: 36rem;
}
.box-karina-grid-info p {
	color: var(--muted-foreground);
	font-size: 1rem;
	line-height: 1.625;
	margin-top: 1.5rem;
}
.box-karina-grid-info p + p {
	margin-top: 1rem;
}

.box-manifesto {
	max-width: 48rem;
	margin-inline: auto;
	text-align: center;
}
.box-manifesto p {
	color: var(--muted-foreground);
	font-size: 1.125rem;
	line-height: 1.625;
	margin-top: 1.5rem;
}

.box-etapas-lista {
	display: grid;
	gap: 4rem;
	margin-top: 4rem;
}
@media (min-width:1024px) {
	.box-etapas-lista { gap: 6rem; }
}
.box-etapas-lista-item {
	display: grid;
	align-items: center;
	gap: 2rem;
}
@media (min-width:1024px) {
	.box-etapas-lista-item {
		grid-template-columns: repeat(2,minmax(0,1fr));
		gap: 4rem;
	}
	.box-etapas-lista-item.invertido .box-etapas-lista-item-image { order: 2; }
}
.box-etapas-lista-item-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cream);
}
.box-etapas-lista-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.box-etapas-lista-item-info {
	max-width: 36rem;
}
.box-etapas-lista-item-info-head {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.box-etapas-lista-item-info h3 {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 300;
	margin-top: 1.5rem;
}
.box-etapas-lista-item-info p {
	color: var(--muted-foreground);
	font-size: 1rem;
	line-height: 1.625;
	margin-top: 1rem;
}

#atelie {
	padding-bottom: 6rem;
}
@media (min-width:1024px) {
	#atelie { padding-bottom: 8rem; }
}
.box-atelie-mosaico {
	columns: 2;
	column-gap: 1.25rem;
	margin-top: 3.5rem;
}
@media (min-width:1024px) {
	.box-atelie-mosaico {
		columns: 4;
		column-gap: 1.5rem;
	}
}
.box-atelie-mosaico-item {
	margin-bottom: 1.25rem;
	overflow: hidden;
	break-inside: avoid;
	background: var(--cream);
}
@media (min-width:1024px) {
	.box-atelie-mosaico-item { margin-bottom: 1.5rem; }
}
.box-atelie-mosaico-item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.box-atelie-mosaico-item img.alta {
	aspect-ratio: 3 / 4;
}

.box-valores-botao {
	text-align: center;
	margin-top: 4rem;
}

/* ######
   Encomendas
############ */

#capa-encomendas {
	padding-top: 2.5rem;
}
@media (min-width:1024px) {
	#capa-encomendas { padding-top: 4rem; }
}
.box-capa-encomendas {
	max-width: 48rem;
}
.box-capa-encomendas h1 {
	margin-top: 1.25rem;
}
.box-capa-encomendas-texto {
	color: var(--muted-foreground);
	font-size: 1.125rem;
	line-height: 1.625;
	margin-top: 1.5rem;
}
.box-capa-encomendas-botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2rem;
}

.box-passos {
	position: relative;
	display: grid;
	gap: 2.5rem;
	margin-top: 3.5rem;
}
@media (min-width:768px) {
	.box-passos {
		grid-template-columns: repeat(5,minmax(0,1fr));
		gap: 1.5rem;
	}
}
.box-passos-linha {
	display: none;
}
@media (min-width:768px) {
	.box-passos-linha {
		display: block;
		position: absolute;
		top: 2rem;
		left: 0;
		width: 100%;
		height: 1px;
		background: var(--border);
	}
}
.box-passos-item {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.box-passos-item .numero {
	color: var(--primary);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 300;
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
	border-radius: 9999px;
	background: var(--background);
}
.box-passos-item h3 {
	font-size: 1rem;
	margin-top: 1.5rem;
}
.box-passos-item p {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	line-height: 1.625;
	max-width: 14rem;
	margin-top: 0.75rem;
}

.box-galeria-b2b {
	display: grid;
	gap: 1.25rem;
	margin-top: 3.5rem;
}
@media (min-width:640px) {
	.box-galeria-b2b { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px) {
	.box-galeria-b2b { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
.box-galeria-b2b-item {
	overflow: hidden;
	background: var(--background);
}
.box-galeria-b2b-item img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.box-proposta-grid {
	display: grid;
	gap: 3rem;
}
@media (min-width:1024px) {
	.box-proposta-grid {
		grid-template-columns: minmax(0,1fr) minmax(0,1.3fr);
		gap: 5rem;
	}
}
.box-proposta-grid-info {
	max-width: 28rem;
}
.box-proposta-grid-info > p {
	color: var(--muted-foreground);
	line-height: 1.625;
	margin-top: 1.5rem;
}
.box-proposta-grid-info ul {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	display: grid;
	gap: 1rem;
	margin-top: 2rem;
}
.box-proposta-grid-info li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}
.box-proposta-grid-info li svg {
	color: var(--primary);
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	margin-top: 0.125rem;
}
.box-proposta-grid-form {
	padding: 2rem;
	border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
	background: var(--card);
}
@media (min-width:1024px) {
	.box-proposta-grid-form { padding: 3rem; }
}

.formulario-sucesso {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-block: 3rem;
	text-align: center;
}
.icone-preenchido {
	color: var(--primary);
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	border-radius: 9999px;
	background: color-mix(in oklab, var(--primary) 10%, transparent);
}
.icone-preenchido svg {
	width: 1.75rem;
	height: 1.75rem;
}
.formulario-sucesso h3 {
	font-size: 1.25rem;
	margin-top: 1.5rem;
}
.formulario-sucesso p {
	color: var(--muted-foreground);
	line-height: 1.625;
	max-width: 24rem;
	margin-top: 0.75rem;
}
.formulario-sucesso .botao {
	margin-top: 2rem;
}

.box-faq-encomendas {
	max-width: 48rem;
	margin-inline: auto;
}
.box-faq-encomendas .box-acordeao {
	margin-top: 3rem;
}

.box-cta-whatsapp {
	color: var(--primary-foreground);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4rem 1.5rem;
	text-align: center;
	background: var(--primary);
}
@media (min-width:1024px) {
	.box-cta-whatsapp { padding-block: 5rem; }
}
.box-cta-whatsapp > svg {
	width: 2rem;
	height: 2rem;
}
.box-cta-whatsapp h2 {
	font-size: 1.5rem;
	font-weight: 300;
	margin-top: 1.25rem;
}
.box-cta-whatsapp p {
	line-height: 1.625;
	max-width: 32rem;
	margin-top: 0.75rem;
	opacity: .9;
}
.box-cta-whatsapp .botao {
	margin-top: 2rem;
}

/* ######
   FAQ
############ */

#faq {
	padding-top: 2rem;
	padding-bottom: 6rem;
}
@media (min-width:1024px) {
	#faq { padding-bottom: 8rem; }
}
.box-faq-head {
	max-width: 42rem;
	padding-top: 2rem;
}
.box-faq-head p {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	line-height: 1.625;
	margin-top: 1.25rem;
}
.box-faq-lista {
	display: grid;
	gap: 3.5rem;
	margin-top: 4rem;
}
.box-faq-lista-grupo {
	display: grid;
	gap: 1.5rem;
}
@media (min-width:1024px) {
	.box-faq-lista-grupo {
		grid-template-columns: 220px minmax(0,1fr);
		gap: 3.5rem;
	}
	.box-faq-lista-grupo > h2 { padding-top: 1.25rem; }
}
.box-faq-lista-grupo .conteudo {
	color: var(--muted-foreground);
	line-height: 1.625;
	max-width: 42rem;
}

/* O <h3> em volta do botão da pergunta só existe pela hierarquia semântica
   (H1 > H2 categoria > H3 pergunta) — herda a tipografia normal em vez do
   font-display de título que os outros h1-h4 do tema usam. */
.box-faq-lista-grupo h3 {
	margin: 0;
	font-family: inherit;
	font-weight: inherit;
	letter-spacing: normal;
}
.box-faq-duvida {
	padding: 4rem 2rem;
	margin-top: 6rem;
	text-align: center;
}
@media (min-width:1024px) {
	.box-faq-duvida { padding-inline: 4rem; }
}
.box-faq-duvida h2 {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 300;
}
.box-faq-duvida p {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	line-height: 1.625;
	max-width: 28rem;
	margin-inline: auto;
	margin-top: 1rem;
}
.box-faq-duvida .botao {
	margin-top: 2rem;
}

/* ######
   Contato
############ */

#capa-contato {
	padding-top: 2.5rem;
	padding-bottom: 4rem;
}
@media (min-width:1024px) {
	#capa-contato {
		padding-top: 4rem;
		padding-bottom: 6rem;
	}
}
.box-capa-contato {
	max-width: 42rem;
}
.box-capa-contato p {
	color: var(--muted-foreground);
	font-size: 1rem;
	line-height: 1.625;
	margin-top: 1.5rem;
}

#canais {
	padding-bottom: 5rem;
}
@media (min-width:1024px) {
	#canais { padding-bottom: 7rem; }
}
.box-canais-grid {
	display: grid;
	gap: 10px;
}
@media (min-width:640px) {
	.box-canais-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px) {
	.box-canais-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
.box-canais-grid-item {
	padding: 2rem;
	border: 1px solid var(--border);
	transition: background .3s;
}
.box-canais-grid-item:hover {
	background: var(--cream);
}
.box-canais-grid-item > svg {
	color: var(--primary);
	width: 1.25rem;
	height: 1.25rem;
}
.box-canais-grid-item h2 {
	margin-top: 1.5rem;
}
.box-canais-grid-item .valor {
	font-size: 0.875rem;
	font-weight: 300;
	margin-top: 0.75rem;
	transition: color .3s;
}
.box-canais-grid-item:hover .valor {
	color: var(--primary);
}
.box-canais-grid-item .dica {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	line-height: 1.625;
	margin-top: 0.5rem;
}
.box-canais-horario {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2rem;
}
.box-canais-horario svg {
	color: var(--primary);
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.box-contato-grid {
	display: grid;
	gap: 3.5rem;
	padding-block: 5rem;
}
@media (min-width:1024px) {
	.box-contato-grid {
		grid-template-columns: repeat(2,minmax(0,1fr));
		gap: 5rem;
		padding-block: 7rem;
	}
}
.box-contato-grid-form .formulario {
	margin-top: 2.5rem;
}
.box-contato-grid-form-sucesso {
	margin-top: 2.5rem;
	padding: 2.5rem;
	text-align: center;
	border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
	background: var(--background);
}
.box-contato-grid-form-sucesso .icone-circulo {
	margin-inline: auto;
}
.box-contato-grid-form-sucesso h3 {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 300;
	margin-top: 1.5rem;
}
.box-contato-grid-form-sucesso p {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	line-height: 1.625;
	margin-top: 0.75rem;
}
.box-contato-grid-form-sucesso .botao {
	margin-top: 2rem;
}

.box-contato-grid-mapa-quadro {
	margin-top: 2.5rem;
	border: 1px solid var(--border);
	background: var(--background);
}
.box-contato-grid-mapa-quadro iframe {
	width: 100%;
	height: 320px;
	filter: grayscale(1);
}
@media (min-width:1024px) {
	.box-contato-grid-mapa-quadro iframe { height: 420px; }
}
.box-contato-grid-mapa-quadro-rodape {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border-top: 1px solid var(--border);
}
.box-contato-grid-mapa-quadro-rodape p {
	font-size: 0.875rem;
	line-height: 1.625;
}
.box-contato-grid-mapa-quadro-rodape span {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	display: block;
}

/* ######
   Quiz
############ */

.box-quiz-intro {
	max-width: 36rem;
	margin-inline: auto;
	text-align: center;
}
.box-quiz-intro > p {
	color: var(--muted-foreground);
	font-size: 1rem;
	line-height: 1.625;
	margin-top: 1.25rem;
}
.box-quiz-intro .botao {
	width: 100%;
	margin-top: 2.5rem;
}
@media (min-width:640px) {
	.box-quiz-intro .botao { width: auto; }
}

.box-quiz-perguntas {
	max-width: 42rem;
	margin-inline: auto;
}
.box-quiz-perguntas-progresso {
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.box-quiz-perguntas-progresso .contador { color: var(--muted-foreground); }
.box-quiz-perguntas-progresso .percentual { color: var(--primary); }
.box-quiz-perguntas-barra {
	width: 100%;
	height: 1px;
	margin-top: 0.75rem;
	background: var(--border);
}
.box-quiz-perguntas-barra span {
	display: block;
	height: 1px;
	background: var(--primary);
	transition: width .5s;
}
.box-quiz-perguntas-item h2 {
	text-align: center;
	margin-top: 3rem;
}
.box-quiz-perguntas-item-opcoes {
	display: grid;
	gap: 0.75rem;
	margin-top: 2.5rem;
}
@media (min-width:640px) {
	.box-quiz-perguntas-item-opcoes { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.box-quiz-perguntas-item-opcoes button {
	font-size: 0.875rem;
	text-align: left;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--border);
	transition: all .3s;
}
.box-quiz-perguntas-item-opcoes button:hover ,
.box-quiz-perguntas-item-opcoes button.ativo {
	color: var(--primary);
	border-color: var(--primary);
}
.box-quiz-perguntas-voltar {
	margin-top: 2rem;
}

.box-quiz-resultado > header {
	max-width: 36rem;
	margin-inline: auto;
	text-align: center;
}
.box-quiz-resultado > header p:last-child {
	color: var(--muted-foreground);
	font-size: 1rem;
	line-height: 1.625;
	margin-top: 1.25rem;
}
.box-quiz-resultado-grid {
	display: grid;
	column-gap: 1.5rem;
	row-gap: 3rem;
	margin-top: 3.5rem;
}
@media (min-width:640px) {
	.box-quiz-resultado-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px) {
	.box-quiz-resultado-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
.box-quiz-card-image {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--cream);
}
.box-quiz-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--ease-soft);
}
.box-quiz-card-image:hover img {
	transform: scale(1.05);
}
.box-quiz-card h2 {
	font-size: 0.875rem;
	font-weight: 400;
	margin-top: 1rem;
}
.box-quiz-card > p {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	margin-top: 0.25rem;
}
.box-quiz-card .botao {
	margin-top: 1rem;
}
.box-quiz-resultado-acoes {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin-top: 4rem;
}
.box-quiz-resultado-acoes .link-whatsapp {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: color .3s;
}
.box-quiz-resultado-acoes .link-whatsapp:hover { color: var(--primary); }
.box-quiz-resultado-acoes .link-whatsapp svg {
	width: 1rem;
	height: 1rem;
}

/* ######
   Área VIP
############ */

.box-vip-senha {
	max-width: 28rem;
	margin-inline: auto;
	text-align: center;
}
.box-vip-senha .icone-circulo {
	width: 3.5rem;
	height: 3.5rem;
	margin-inline: auto;
	border: 0;
	background: var(--cream);
}
.box-vip-senha .eyebrow {
	margin-top: 2rem;
}
.box-vip-senha-texto {
	color: var(--muted-foreground);
	font-size: 1rem;
	line-height: 1.625;
	margin-top: 1.25rem;
}
.box-vip-senha-form {
	display: grid;
	gap: 1.25rem;
	margin-top: 2.5rem;
	text-align: left;
}
.box-vip-senha-erro {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	line-height: 1.625;
	margin-top: 1.5rem;
}
.box-vip-senha-erro a { color: var(--primary); }

.box-vip-head {
	max-width: 42rem;
	margin-inline: auto;
	text-align: center;
}
.box-vip-head > p {
	color: var(--muted-foreground);
	font-size: 1rem;
	line-height: 1.625;
	margin-top: 1.25rem;
}
.box-vip-head-contagem {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	margin-top: 2rem;
	padding: 1.25rem 2rem;
	background: var(--cream);
}
.box-vip-head-contagem .tempo {
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
	margin-top: 0.5rem;
}

.box-vip-grid {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	column-gap: 1.25rem;
	row-gap: 3rem;
	margin-top: 4rem;
}
@media (min-width:1024px) {
	.box-vip-grid {
		grid-template-columns: repeat(4,minmax(0,1fr));
		column-gap: 2rem;
	}
}
/* O card da fornada usa a mesma marcação do card da loja
   (.box-catalogo-card): proporção, troca de imagem no hover e selos vêm de
   lá. Aqui sobra só o espaçamento do botão de compra. */

.box-vip-grid-item-botao ,
.box-vip-grid-item-aviso {
	margin-top: 1rem;
}
.box-vip-grid-item-aviso form {
	display: grid;
	gap: 0.5rem;
	margin-top: 0.75rem;
}
.box-vip-grid-item-aviso label {
	color: var(--muted-foreground);
	font-size: 0.75rem;
}
.box-vip-grid-item-aviso .confirmado {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	margin-top: 0.75rem;
}

.box-vip-flutuante {
	color: var(--primary-foreground);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 50;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border-radius: 9999px;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
	background: var(--primary);
	transition: opacity .3s;
}
.box-vip-flutuante:hover { opacity: .9; }
.box-vip-flutuante svg {
	width: 1rem;
	height: 1rem;
}

/* ######
   Blog | Listagem
############ */

/* O respiro do topo é o mesmo das Encomendas — o .section-y sozinho abria um
   vão grande demais logo abaixo do cabeçalho. O de baixo segue pela seção. */
#blog {
	padding-top: 2.5rem;
}
@media (min-width:1024px) {
	#blog { padding-top: 4rem; }
}

.box-blog-filtros {
	display: grid;
	gap: 1.5rem;
	margin-top: 3rem;
}
@media (min-width:1024px) {
	.box-blog-filtros {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
.box-blog-filtros-categorias {
	display: flex;
	column-gap: 1.5rem;
	row-gap: 0.75rem;
	margin-inline: calc(var(--space-gutter) * -1);
	padding-inline: var(--space-gutter);
	overflow-x: auto;
}
@media (min-width:1024px) {
	.box-blog-filtros-categorias {
		flex-wrap: wrap;
		margin-inline: 0;
		padding-inline: 0;
	}
}
.box-blog-filtros-categorias button,
.box-blog-filtros-categorias a {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	flex-shrink: 0;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid transparent;
	transition: color .3s;
}
.box-blog-filtros-categorias button:hover,
.box-blog-filtros-categorias a:hover {
	color: var(--foreground);
}
.box-blog-filtros-categorias button.ativo,
.box-blog-filtros-categorias a.ativo {
	color: var(--primary);
	border-color: var(--primary);
}
.box-blog-filtros-busca {
	position: relative;
	width: 100%;
}
@media (min-width:1024px) {
	.box-blog-filtros-busca { width: 18rem; }
}
.box-blog-filtros-busca .campo {
	padding-right: 2rem;
}
.box-blog-filtros-busca svg {
	color: var(--muted-foreground);
	position: absolute;
	top: 50%;
	right: 0;
	translate: 0 -50%;
	width: 1rem;
	height: 1rem;
	pointer-events: none;
}

.box-blog-lista {
	display: grid;
	column-gap: 2rem;
	row-gap: 3.5rem;
	margin-top: 3.5rem;
}
@media (min-width:640px) {
	.box-blog-lista { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.box-blog-lista-item-image {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cream);
}
.box-blog-lista-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--ease-soft);
}
.box-blog-lista-item:hover .box-blog-lista-item-image img {
	transform: scale(1.05);
}
.box-blog-lista-item-meta ,
.box-artigo-head-meta {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}
.box-blog-lista-item-meta .categoria ,
.box-artigo-head-meta .categoria { color: var(--primary); }
.box-blog-lista-item-meta .traco ,
.box-artigo-head-meta .traco {
	width: 1.5rem;
	height: 1px;
	background: var(--border);
}
.box-blog-lista-item-meta .data ,
.box-artigo-head-meta .data { color: var(--muted-foreground); }
.box-blog-lista-item h2 {
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1.375;
	margin-top: 0.75rem;
}
.box-blog-lista-item-resumo {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	line-height: 1.625;
	margin-top: 0.75rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.box-blog-lista-item .link-leia {
	margin-top: 1.25rem;
}

.box-blog-vazio {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	text-align: center;
	margin-top: 5rem;
}

.box-blog-paginacao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 5rem;
}
.box-blog-paginacao > button {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: color .3s;
}
.box-blog-paginacao > button:hover { color: var(--primary); }
.box-blog-paginacao > button:disabled {
	pointer-events: none;
	opacity: .4;
}
.box-blog-paginacao .paginas {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.box-blog-paginacao .paginas button {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	transition: all .3s;
}
.box-blog-paginacao .paginas button:hover { color: var(--primary); }
.box-blog-paginacao .paginas button.ativo {
	color: var(--primary-foreground);
	background: var(--primary);
}

/* ######
   Blog | Artigo
############ */

/* O artigo é uma coluna só: breadcrumb, cabeçalho e texto compartilham a mesma
   medida de leitura. Só os relacionados voltam à largura cheia do container. */
#artigo {
	--medida-artigo: 1000px;
}

#artigo > .container:first-child {
	max-width: var(--medida-artigo);
	padding-top: 2.5rem;
}
@media (min-width:1024px) {
	#artigo > .container:first-child { padding-top: 4rem; }
}
.box-artigo-breadcrumb {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.box-artigo-breadcrumb a { transition: color .3s; }
.box-artigo-breadcrumb a:hover { color: var(--primary); }
.box-artigo-breadcrumb svg {
	width: 0.75rem;
	height: 0.75rem;
}
.box-artigo-breadcrumb .titulo {
	color: var(--foreground);
	text-transform: none;
	max-width: 16rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.box-artigo-head {
	max-width: var(--medida-artigo);
	margin-top: 2rem;
}
/* Filete como pseudo-elemento, e não borda do container: assim ele nasce
   dentro do gutter e fica na mesma medida do texto. */
.box-artigo-head::after {
	content: "";
	display: block;
	height: 1px;
	margin-top: 2.5rem;
	background: var(--border);
}
.box-artigo-head-meta {
	margin-top: 0;
}
.box-artigo-head h1 {
	margin-top: 1rem;
}
.box-artigo-head-autor {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	margin-top: 1.25rem;
}
.box-artigo-head-autor span { color: var(--foreground); }

.box-artigo-conteudo {
	max-width: var(--medida-artigo);
	margin-top: 2.5rem;
}
/* O espaço depois do filete quem dá é o container: o primeiro bloco do editor
   entra colado, seja parágrafo, título ou imagem. */
.box-artigo-conteudo > *:first-child {
	margin-top: 0;
}
.box-artigo-conteudo > p {
	color: var(--muted-foreground);
	font-size: 1rem;
	line-height: 1.625;
	margin-top: 1.5rem;
}
.box-artigo-conteudo > h2,
.box-artigo-conteudo > .wp-block-heading:is(h2) {
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.375;
	margin-top: 3.5rem;
}
.box-artigo-conteudo > h3,
.box-artigo-conteudo > .wp-block-heading:is(h3) {
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.375;
	margin-top: 2.5rem;
}
.box-artigo-conteudo blockquote {
	margin-top: 3rem;
	padding-left: 1.5rem;
	border-left: 1px solid color-mix(in oklab, var(--primary) 40%, transparent);
}
.box-artigo-conteudo blockquote p {
	color: var(--foreground);
	font-size: 1.25rem;
	font-style: italic;
	font-weight: 300;
	line-height: 1.625;
	margin-top: 0;
}
.box-artigo-conteudo blockquote footer,
.box-artigo-conteudo blockquote cite {
	display: block;
	font-style: normal;
	color: var(--muted-foreground);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-top: 1rem;
}
.box-artigo-conteudo figure {
	margin-top: 3rem;
}
.box-artigo-conteudo figure .imagem,
.box-artigo-conteudo figure.wp-block-image {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--cream);
}

.box-artigo-conteudo figure.wp-block-image { aspect-ratio: auto; }
.box-artigo-conteudo figure.wp-block-image img {
	aspect-ratio: 3 / 2;
	background: var(--cream);
}
.box-artigo-conteudo figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.box-artigo-conteudo figcaption {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	margin-top: 0.75rem;
	padding: 0 10px;
}
.box-artigo-conteudo .lista,
.box-artigo-conteudo > ul,
.box-artigo-conteudo > ol {
	color: var(--muted-foreground);
	font-size: 1rem;
	line-height: 1.625;
	display: grid;
	gap: 0.75rem;
	margin-top: 1.5rem;
}
.box-artigo-conteudo .lista li,
.box-artigo-conteudo > ul li,
.box-artigo-conteudo > ol li {
	display: flex;
	gap: 0.75rem;
}
.box-artigo-conteudo .lista li::before {
	content: "";
	width: 0.25rem;
	height: 0.25rem;
	flex-shrink: 0;
	margin-top: 0.625rem;
	border-radius: 9999px;
	background: color-mix(in oklab, var(--primary) 50%, transparent);
}

/* Link no meio do texto precisa se destacar do corpo cinza. primary-deep, e
   não primary, para passar de 4.5:1 sobre o fundo. Botões, tags e imagens
   com link ficam de fora. */
.box-artigo-conteudo :is(p, li, blockquote, figcaption, td, h2, h3, h4, h5, h6) a:not(.wp-block-button__link) {
	color: var(--primary-deep);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: color-mix(in oklab, var(--primary-deep) 45%, transparent);
	transition: color var(--transition-base), text-decoration-color var(--transition-base);
}
.box-artigo-conteudo :is(p, li, blockquote, figcaption, td, h2, h3, h4, h5, h6) a:not(.wp-block-button__link):hover {
	color: var(--primary);
	text-decoration-color: currentColor;
}

.box-artigo-conteudo-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 3.5rem;
}
.box-artigo-conteudo-tags span,
.box-artigo-conteudo-tags a {
	color: var(--muted-foreground);
	font-size: 0.65rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.375rem 0.75rem;
	background: var(--cream);
	transition: color .3s;
}

.box-artigo-conteudo-tags a:hover { color: var(--primary); }


.box-artigo-relacionados .box-blog-grid {
	margin-top: 2.5rem;
}

/* ######
   Erro 404
############ */

#erro-404 {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding-inline: 1rem;
}
.box-erro {
	max-width: 28rem;
	text-align: center;
}
.box-erro h1 {
	font-size: 4.5rem;
	font-weight: 700;
	line-height: 1;
}
.box-erro h2 {
	font-size: 1.25rem;
	font-weight: 600;
	margin-top: 1rem;
}
.box-erro p {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	margin-top: 0.5rem;
}
.box-erro-botao {
	margin-top: 1.5rem;
}
.box-erro-botao a {
	color: var(--primary-foreground);
	font-size: 0.875rem;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1rem;
	background: var(--primary);
	transition: background .3s;
}
.box-erro-botao a:hover {
	background: color-mix(in oklab, var(--primary) 90%, transparent);
}

/* ######
   Padrão (Conteúdo)
############ */

/* Medida de leitura para texto corrido, centrada no container — encostada à
   esquerda num container de 90rem, a coluna parecia um erro de layout. */
.box-conteudo-padrao {
	max-width: 52rem;
	margin-inline: auto;
}

/* O limite acima é medida de leitura, boa para texto corrido. As telas da
   loja são tabelas e formulários em duas colunas: precisam do container
   inteiro. */
.woocommerce-cart .box-conteudo-padrao,
.woocommerce-checkout .box-conteudo-padrao,
.woocommerce-account .box-conteudo-padrao,
.woocommerce-order-received .box-conteudo-padrao {
	max-width: none;
}
.box-conteudo-padrao-texto {
	color: var(--muted-foreground);
	font-size: 1rem;
	line-height: 1.625;
	margin-top: 1.5rem;
}
.box-conteudo-padrao-texto p + p ,
.box-conteudo-padrao-texto ul ,
.box-conteudo-padrao-texto ol {
	margin-top: 1rem;
}
.box-conteudo-padrao-texto ul { list-style: disc inside; }
.box-conteudo-padrao-texto ol { list-style: decimal inside; }
.box-conteudo-padrao-texto a { color: var(--primary); }
.box-conteudo-padrao-lista {
	display: grid;
	gap: 2.5rem;
	margin-top: 2.5rem;
}
.box-conteudo-padrao-lista h2 {
	font-size: 1.25rem;
	font-weight: 300;
}

/* ######
   Busca de peças no cabeçalho
############ */

.box-busca {
	border-top: 1px solid var(--border);
	background: var(--card);
}

.box-busca[hidden] { display: none; }

.box-busca-form {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 0;
}

.box-busca-form > svg {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--muted-foreground);
}

.box-busca-form .campo {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 0.25rem 0;
	font-size: 1rem;
}

.box-busca-form .campo:focus { outline: none; }

@media (max-width: 640px) {
	.box-busca-form { flex-wrap: wrap; }
	.box-busca-form .campo { flex-basis: 100%; order: 3; }
}

/* ######
   WooCommerce | Carrinho, checkout e minha conta
############ */

/* O plugin traz a própria folha de estilos; aqui só reconduzimos os
   componentes dele aos tokens do tema. */

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	border-radius: var(--radius);
	background: var(--primary);
	color: var(--primary-foreground);
	font-family: var(--font-primary);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 0.875rem 1.5rem;
	border: 1px solid var(--primary);
	transition: background var(--transition-base), color var(--transition-base);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--primary-deep);
	border-color: var(--primary-deep);
	color: var(--primary-foreground);
}

/* O plugin pinta os botões "alt" com o roxo da marca dele (#7f54b3). Os
   seletores usam :where(), que não soma especificidade, então a regra efetiva é
   `.woocommerce a.button.alt` — empata com a nossa e vence pela ordem das
   folhas. Por isso aqui repetimos o elemento e cobrimos também o hover. */
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button,
.woocommerce #respond input#submit.alt {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--primary-foreground);
}

.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #respond input#submit.alt:hover {
	background: var(--primary-deep);
	border-color: var(--primary-deep);
	color: var(--primary-foreground);
}

.woocommerce .button:disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: var(--muted);
	border-color: var(--border);
	color: var(--muted-foreground);
	cursor: not-allowed;
}

/* --- Campos de formulário --- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce .select2-container .select2-selection--single {
	border: 1px solid var(--input);
	border-radius: var(--radius);
	background: var(--card);
	color: var(--foreground);
	font-family: var(--font-primary);
	font-size: 0.9375rem;
	padding: 0.75rem 0.875rem;
	height: auto;
	line-height: 1.4;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: 2px solid var(--ring);
	outline-offset: 1px;
	border-color: var(--ring);
}

.woocommerce form .form-row label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted-foreground);
	margin-bottom: 0.375rem;
}

.woocommerce form .form-row .required { color: var(--primary); text-decoration: none; }

/* --- Tabelas --- */

.woocommerce table.shop_table {
	border: none;
	border-radius: 0;
	border-collapse: collapse;
	width: 100%;
}

.woocommerce table.shop_table th {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted-foreground);
	border-bottom: 1px solid var(--foreground);
	padding: 0.875rem 0.75rem;
}

.woocommerce table.shop_table td {
	border-top: none;
	border-bottom: 1px solid var(--border);
	padding: 1.25rem 0.75rem;
	vertical-align: middle;
}

.woocommerce table.shop_table img { width: 4.5rem; border-radius: var(--radius); }

.woocommerce table.shop_table .product-name a {
	color: var(--foreground);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce table.shop_table .product-name a:hover { color: var(--primary); }

.woocommerce a.remove {
	color: var(--muted-foreground) !important;
	font-weight: 400;
}

.woocommerce a.remove:hover {
	background: transparent;
	color: var(--primary) !important;
}

/* --- Totais e cupom --- */

.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-bottom: 1rem;
}

.woocommerce .cart_totals table.shop_table,
.woocommerce-checkout #order_review {
	background: var(--cream);
	padding: 1.5rem;
	border-radius: var(--radius);
}

.woocommerce .cart_totals .order-total .amount { font-size: 1.25rem; }

.woocommerce .cart .actions .coupon input.input-text {
	border: 1px solid var(--input);
	border-radius: var(--radius);
	padding: 0.75rem 0.875rem;
	margin-right: 0.5rem;
}

/* --- Avisos --- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: none;
	border-left: 3px solid var(--primary);
	background: var(--cream);
	border-radius: 0 var(--radius) var(--radius) 0;
	color: var(--foreground);
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-error { border-left-color: #B3261E; }

.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }

/* --- Brinde --- */

.aviso-brinde {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	max-width: 800px;
	margin: 0 auto 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--cream);
	border: 1px dashed color-mix(in oklab, var(--primary) 45%, transparent);
	border-radius: var(--radius);
	color: var(--foreground);
}
.aviso-brinde.ganhou {
	border-style: solid;
	border-color: var(--primary);
	background: color-mix(in oklab, var(--primary-soft) 45%, var(--cream));
}
.aviso-brinde svg {
	width: 1.375rem;
	height: 1.375rem;
	flex-shrink: 0;
	color: var(--primary-deep);
}
.aviso-brinde p { margin: 0; font-size: 0.9375rem; }
.aviso-brinde.ganhou p { font-weight: 500; }

/* Oferta de embalagem no carrinho: a linha inteira é o link. */
.woocommerce table.shop_table tr.linha-embalagem td { padding: 1rem 12px 0; border: 0; background: transparent; }
/* No celular a tabela vira blocos: sem este respiro o aviso encosta no cupom. */
@media (max-width: 768px) {
	.woocommerce table.shop_table tr.linha-embalagem td { padding-bottom: 0.75rem; }
}
.woocommerce table.shop_table tr.linha-embalagem td::before { display: none; }
.woocommerce table.shop_table .aviso-embalagem,
.aviso-embalagem {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	max-width: 600px;
	margin: 0 auto;
	padding: 1rem 1.25rem;
	background: var(--cream);
	border: 1px dashed color-mix(in oklab, var(--primary) 45%, transparent);
	border-radius: var(--radius);
	color: var(--foreground);
	font-size: 0.9375rem;
	text-decoration: none;
	transition: border-color .3s, color .3s;
}
.aviso-embalagem:hover,
.aviso-embalagem:focus-visible { border-color: var(--primary); color: var(--primary-deep); }
.aviso-embalagem span { flex: 1; text-align: left; }
.aviso-embalagem svg {
	width: 1.375rem;
	height: 1.375rem;
	flex-shrink: 0;
	color: var(--primary-deep);
}
.aviso-embalagem svg:last-child { width: 1rem; height: 1rem; }

.selo-brinde {
	display: inline-block;
	margin-right: 0.375rem;
	padding: 0.125rem 0.5rem;
	border-radius: var(--radius);
	background: var(--primary);
	color: var(--primary-foreground);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	vertical-align: middle;
}
.preco-brinde {
	color: var(--primary-deep);
	font-weight: 500;
}
/* Sem link (a página do brinde é privada), mas com o mesmo peso dos outros nomes. */
.woocommerce table.shop_table .nome-brinde {
	color: var(--foreground);
	font-weight: 600;
}

/* --- Checkout --- */

/* O WooCommerce só mostra a descrição do campo com ele em foco; o aviso de
   que a conta nasce no checkout precisa estar sempre à vista. */
.woocommerce-checkout #billing_email_field .description {
	display: block !important;
	margin-top: 0.5rem;
	padding: 0;
	background: none;
	color: var(--muted-foreground);
	font-size: 0.8125rem;
	line-height: 1.5;
}
.woocommerce-checkout #billing_email_field .description::before { content: none; }

.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; }

@media (min-width: 62rem) {
	.woocommerce-checkout .col2-set { grid-template-columns: 1fr 1fr; }
}

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: var(--radius);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--border);
	padding: 0 0 1rem;
}

.woocommerce-checkout #payment div.form-row { padding: 1rem 0 0; }

.woocommerce-checkout #payment #place_order { width: 100%; padding: 1rem; font-size: 1rem; }

/* WooCommerce pinta o payment_box (e a seta acima dele) de roxo (#dcd7e2)
   por padrão; troca pros neutros do tema. Campos do cartão também ficam
   mais compactos aqui: menos padding, linha mais baixa, menos gap. */
.woocommerce-checkout #payment div.payment_box {
	background: var(--muted);
	border-radius: var(--radius);
	padding: 1rem;
	margin: 1rem 0 0;
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--muted); }
.woocommerce-checkout #payment div.payment_box > p { margin: 0 0 0.875rem; }
.woocommerce-checkout #payment div.asaas-cc-form-wrapper div.form-row { padding-top: 0; margin-bottom: 0.5rem; }
.woocommerce-checkout #payment div.asaas-cc-form-wrapper div.form-row:last-child,
.woocommerce-checkout #payment div.asaas-cc-form-wrapper div.form-row.asaas-cc-form-field-no-margin { margin-bottom: 0; }
.woocommerce-checkout #payment div.asaas-cc-form-wrapper div.form-row label { margin-bottom: 0.25rem; }
.woocommerce-checkout #payment div.asaas-cc-form-wrapper div.form-row input.input-text { padding: 0.625rem 0.75rem; }

/* --- Minha conta --- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--border);
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.875rem 0;
	color: var(--muted-foreground);
	text-decoration: none;
	font-weight: 500;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	color: var(--primary);
}

/* --- Preços --- */

.woocommerce .amount,
.woocommerce-Price-amount { font-variant-numeric: tabular-nums; }

.woocommerce del { color: var(--muted-foreground); font-weight: 400; }
.woocommerce ins { text-decoration: none; }

.box-abas-painel .frete-erro {
	margin-top: 0.75rem;
	color: var(--primary-deep);
	font-size: 0.875rem;
}

.box-abas-painel .frete-erro[hidden] { display: none; }

/* ######
   Contact Form 7
############ */

/* Os formulários vivem no CF7; aqui reconduzimos a saída dele ao tema. */

.wpcf7-form .wpcf7-not-valid-tip {
	color: #B3261E;
	font-size: 0.8125rem;
	margin-top: 0.375rem;
}

.wpcf7-form .campo.wpcf7-not-valid { border-color: #B3261E; }

.wpcf7-form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 0.875rem 1.25rem;
	border: none;
	border-left: 3px solid var(--primary);
	background: var(--cream);
	color: var(--foreground);
	font-size: 0.9375rem;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output { border-left-color: #B3261E; }

.wpcf7-form.sent .wpcf7-response-output { border-left-color: var(--primary); }

.wpcf7-spinner { margin-left: 0.75rem; }

/* O CF7 embrulha cada campo num <span>; ele não pode quebrar o grid. */
.wpcf7-form-control-wrap { display: block; }

.wpcf7-form .formulario-campo .wpcf7-form-control-wrap + .wpcf7-not-valid-tip { display: block; }


/* Aviso de peça na Área VIP. */
.formulario-aviso .wpcf7-response-output {
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	padding: 0.625rem 0.875rem;
}

.box-vip-grid-item-aviso .rotulo-aviso {
	color: var(--muted-foreground);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-top: 0.75rem;
}

/* ######
   Favoritos
############ */

/* Mesmo respiro de topo das Encomendas; o de baixo continua vindo do .section-y. */
#favoritos {
	padding-top: 2.5rem;
}
@media (min-width:1024px) {
	#favoritos { padding-top: 4rem; }
}

#favoritos .contagem {
	color: var(--muted-foreground);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 2rem;
}

#favoritos .contagem[hidden] { display: none; }

.box-favoritos-vazio {
	display: grid;
	justify-items: center;
	gap: 1rem;
	text-align: center;
	padding: 4rem 1.5rem;
	background: var(--cream);
}

.box-favoritos-vazio[hidden] { display: none; }

.box-favoritos-vazio h2 {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 300;
}

.box-favoritos-vazio p {
	color: var(--muted-foreground);
	max-width: 32rem;
}

.box-favoritos-vazio .botao { margin-top: 0.5rem; }

/* O contador do coração acompanha o da sacola. */
.btn-icone .contador[hidden] { display: none; }

/* ######
   Minha Conta
############ */

#minha-conta {
	padding-top: 2.5rem;
}
@media (min-width:1024px) {
	#minha-conta { padding-top: 4rem; }
}

#minha-conta .box-conta { max-width: 480px; margin: 2.5rem auto 0; }
.logged-in #minha-conta .box-conta { max-width: initial; }

/* Com cadastro ligado o WooCommerce entrega login e cadastro em duas colunas
   (#customer_login, dentro do .col2-set com clearfix — ver nota abaixo). A
   caixa alarga e as colunas viram grid; no celular empilham. */
#minha-conta .box-conta:has(#customer_login) { max-width: 62rem; }
#minha-conta:has(#customer_login) .box-loja-head { max-width: 62rem; }
#minha-conta #customer_login::before,
#minha-conta #customer_login::after { content: none; }
#minha-conta #customer_login {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
@media (min-width: 48rem) {
	#minha-conta #customer_login { grid-template-columns: 1fr 1fr; align-items: start; }
}
#minha-conta #customer_login > .u-column1,
#minha-conta #customer_login > .u-column2 {
	float: none;
	width: auto;
}
#minha-conta #customer_login h2 {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 300;
	margin: 0 0 1.25rem;
}
#minha-conta #customer_login .woocommerce-form-login,
#minha-conta #customer_login .woocommerce-form-register {
	max-width: none;
	margin: 0;
}

/* Campo-armadilha do cadastro: fora da tela — escondido por display:none,
   robô esperto pula. */
.campo-armadilha {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
#minha-conta .woocommerce-form-register .woocommerce-privacy-policy-text { margin: 0.5rem 0 1.25rem; }
#minha-conta .woocommerce-form-register .woocommerce-privacy-policy-text p {
	margin: 0;
	color: var(--muted-foreground);
	font-size: 0.8125rem;
	line-height: 1.5;
}
#minha-conta .woocommerce-form-register .woocommerce-privacy-policy-text a { color: inherit; text-decoration: underline; }

/* Quem comprou antes já tem conta (criada no checkout) e tentava se cadastrar
   de novo. */
#minha-conta .aviso-conta-existente {
	margin: 0 0 2.5rem;
	padding: 1rem 1.25rem;
	background: var(--cream);
	border: 1px solid var(--border);
	border-left: 3px solid var(--primary);
	border-radius: var(--radius);
	line-height: 1.6;
}
#minha-conta .aviso-conta-existente p { margin: 0; }
#minha-conta .aviso-conta-existente strong { display: block; margin-bottom: 0.25rem; }

#minha-conta .woocommerce-MyAccount-navigation ul { margin: 0; }

/* O WooCommerce declara um clearfix em .woocommerce e em .col2-set — inofensivo
   num layout de float, mas num container em grid o ::before e o ::after viram
   itens de verdade e empurram o conteúdo para a coluna errada. Por isso os
   containers que viram grid precisam anular os dois. */

#minha-conta .woocommerce::before,
#minha-conta .woocommerce::after,
.woocommerce-checkout .col2-set::before,
.woocommerce-checkout .col2-set::after { content: none; }

/* O grid de duas colunas só existe quando o painel da conta está na tela.
   Deslogado o WooCommerce entrega só o aviso, o título e o formulário — sem
   a navegação — e o auto-placement jogava o formulário na coluna de 14rem,
   espremendo o login. Por isso o grid segue a presença da navegação. */
@media (min-width: 48rem) {
	#minha-conta .woocommerce:has(.woocommerce-MyAccount-navigation) {
		display: grid;
		grid-template-columns: 14rem 1fr;
		gap: 3rem;
		align-items: start;
	}

	/* Colocação explícita: não depende da ordem de auto-placement. */
	#minha-conta .woocommerce-MyAccount-navigation {
		grid-column: 1;
		width: auto;
		float: none;
	}

	#minha-conta .woocommerce-MyAccount-content {
		grid-column: 2;
		width: auto;
		float: none;
		min-width: 0;
	}
}

/* Abaixo do ponto de quebra as colunas empilham, sem os floats do plugin. */
@media (max-width: 47.99rem) {
	#minha-conta .woocommerce-MyAccount-navigation,
	#minha-conta .woocommerce-MyAccount-content {
		width: auto;
		float: none;
	}

	#minha-conta .woocommerce-MyAccount-content { margin-top: 2rem; }
}

#minha-conta .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }

/* Sem navegação (deslogado) o formulário fica sozinho na página — melhor
   centralizado do que grudado à esquerda no vazio, com uma leve elevação
   pra destacar do fundo em vez do contorno quase invisível de antes. O h2
   filho direto de .woocommerce só existe nesse estado (nas telas logadas o
   título de cada aba vem dentro de .woocommerce-MyAccount-content), então
   o combinador de filho já restringe o escopo sem precisar de :not(:has()).
   Cada seletor com sua própria regra, sem agrupar por vírgula — evita que
   um seletor problemático numa lista longa derrube o resto da regra. */
@media (min-width: 48rem) {
	#minha-conta .woocommerce > h2 { margin-inline: auto; max-width: 30rem; }
	#minha-conta .woocommerce-form-login { margin-inline: auto; }
	#minha-conta .woocommerce-form-register { margin-inline: auto; }
	#minha-conta .woocommerce-ResetPassword { margin-inline: auto; }
}

#minha-conta .woocommerce-form-login {
	max-width: 30rem;
	width: 100%;
	background: var(--card);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-soft);
	padding: 2.5rem;
	border-radius: var(--radius);
}
#minha-conta .woocommerce-form-register {
	max-width: 30rem;
	width: 100%;
	background: var(--card);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-soft);
	padding: 2.5rem;
	border-radius: var(--radius);
}
#minha-conta .woocommerce-ResetPassword {
	max-width: 30rem;
	width: 100%;
	background: var(--card);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-soft);
	padding: 2.5rem;
	border-radius: var(--radius);
}

/* Acabamento do acesso: o WooCommerce entrega o título e a linha do
   "lembre-me" com a cara do plugin — aqui eles seguem a tipografia do tema. */

#minha-conta .woocommerce > h2 {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 300;
	display: none;
	margin-bottom: 1.25rem;
}

/* O plugin junta lembre-me, nonce e botão num único parágrafo. Vale a mesma
   ressalva do clearfix lá de cima: virando flex, o ::before e o ::after do
   WooCommerce entram como itens e empurram o botão para longe da coluna. */
#minha-conta .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0;
}
#minha-conta .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit)::before,
#minha-conta .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit)::after {
	content: none;
}

#minha-conta .woocommerce-form-login__rememberme {
	color: var(--muted-foreground);
	font-size: 0.8125rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	order: 2;
	cursor: pointer;
}

#minha-conta .woocommerce-form-login__rememberme input[type="checkbox"] {
	appearance: none;
	position: relative;
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	border: 1px solid var(--input);
	cursor: pointer;
	transition: all .2s;
}
#minha-conta .woocommerce-form-login__rememberme input[type="checkbox"]:checked {
	border-color: var(--primary);
	background: var(--primary);
}
#minha-conta .woocommerce-form-login__rememberme input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 4px;
	width: 4px;
	height: 8px;
	border: solid var(--primary-foreground);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

#minha-conta .woocommerce-form-login__submit { order: 1; }

#minha-conta .woocommerce-LostPassword {
	font-size: 0.8125rem;
	margin: 1.5rem 0 0;
}
#minha-conta .woocommerce-LostPassword a {
	color: var(--muted-foreground);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: color .3s;
}
#minha-conta .woocommerce-LostPassword a:hover { color: var(--primary); }

/* O botão de desejo da página da peça também reflete o estado guardado. */
.botao[data-desejo][aria-pressed="true"] svg {
	color: var(--primary);
	fill: var(--primary);
}

/* ######
   WooCommerce | Largura dos campos no carrinho e no checkout
############ */

/* O plugin usa float e larguras em porcentagem; o tema resolve em grid,
   para os campos ocuparem o espaço disponível de fato. */

.woocommerce form .form-row {
	display: block;
	width: 100%;
	margin: 0 0 1.25rem;
	padding: 0;
	float: none;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container {
	width: 100%;
	box-sizing: border-box;
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper,
.woocommerce-EditAccountForm,
.asaas-cc-form-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 1.25rem;
}

@media (min-width: 40rem) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-address-fields__field-wrapper,
	.woocommerce-EditAccountForm,
	.asaas-cc-form-wrapper {
		grid-template-columns: 1fr 1fr;
	}

	.woocommerce form .form-row-first { grid-column: 1; }
	.woocommerce form .form-row-last { grid-column: 2; }
	.woocommerce form .form-row-wide,
	.woocommerce form .form-row:not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; }
}

/* Cupom com até 600px, centralizado e alinhado ao aviso de embalagem;
   "Atualizar carrinho" desce para a linha de baixo, também centralizado.
   Os seletores com table.cart vencem o float e o text-align do WooCommerce.
   A célula continua table-cell: com display flex ela perdia o
   colspan e ficava presa à largura da primeira coluna. */
.woocommerce table.cart td.actions { text-align: center; }
.woocommerce table.cart td.actions .coupon { display: flex; gap: 0.5rem; width: 100%; max-width: 600px; float: none; margin: 0 auto 1rem; }
.woocommerce .cart .actions .coupon input.input-text { flex: 1; width: auto; min-width: 0; margin: 0; }
.woocommerce .cart .actions .coupon .button { flex: none; width: auto; float: none; }
.woocommerce .cart .actions > .button { float: none; }

/* Totais do carrinho: a tabela ocupa a largura toda; o resumo fica numa
   coluna à direita, abaixo dela, sem os floats do plugin. */
.woocommerce .cart-collaterals { width: 100%; float: none; display: flex; justify-content: flex-end; }
.woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; }
.woocommerce .cart_totals table.shop_table { width: 100%; }

/* Checkout: resumo e pagamento ocupam a coluna inteira. */
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading { width: 100%; float: none; }
.woocommerce-checkout table.shop_table { width: 100%; }

/* ######
   Área VIP | Lista de fornadas
############ */

.box-vip-fornadas {
	display: grid;
	gap: 1rem;
	margin-top: 3rem;
}

.box-vip-fornadas-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.75rem;
	background: var(--cream);
	border-radius: var(--radius);
}

.box-vip-fornadas-item-info h2 {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 300;
	line-height: 1.25;
	margin-top: 0.375rem;
}

.box-vip-fornadas-item-info .prazo {
	color: var(--muted-foreground);
	font-size: 0.8125rem;
	margin-top: 0.5rem;
}

.box-vip-vazio {
	display: grid;
	justify-items: center;
	gap: 1.25rem;
	text-align: center;
	padding: 4rem 1.5rem;
	margin-top: 3rem;
	background: var(--cream);
}

.box-vip-vazio p { color: var(--muted-foreground); }

/* ######
   Marca | Ícone opcional ao lado do texto
############ */

.box-header-grid-marca-logo,
.box-footer-grid-marca-logo {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
}

/* O WooCommerce aplica `.woocommerce-page img { height: auto }` — e a classe
   vai no <body>, então alcança também o cabeçalho e o rodapé. Sem um seletor
   mais específico, o ícone volta ao tamanho intrínseco do arquivo nas telas da
   loja. Por isso o seletor inclui o container. */
.box-header-grid-marca-logo .logo-icone,
.box-footer-grid-marca-logo .logo-icone {
	flex: none;
	width: auto;
	height: 1.75rem;
	max-width: none;
	object-fit: contain;
}

@media (min-width: 1024px) {
	.box-header-grid-marca-logo .logo-icone,
	.box-footer-grid-marca-logo .logo-icone { height: 2.125rem; }
}

.logo-texto { min-width: 0; }

/* No rodapé o texto da marca segue abaixo do bloco do logo. */
.box-footer-grid-marca-logo { margin-bottom: 1rem; }

/* ######
   Cabeçalho no mobile
############ */

/* O tracking largo da marca é do desenho, mas em telas estreitas ele empurrava
   os ícones para menos de 70px. Abaixo de 1024px o texto encolhe e cede espaço
   às ações, sem mudar a proporção no desktop. */

@media (max-width: 1023.98px) {
	.box-header-grid { gap: 0.5rem; }

	.box-header-grid-marca { gap: 0.375rem; }

	.box-header-grid-marca-logo .logo-nome {
		font-size: 0.8rem;
		letter-spacing: 0.16em;
	}

	.box-header-grid-marca-logo .logo-complemento {
		font-size: 0.5rem;
		letter-spacing: 0.24em;
		margin-top: 0.15rem;
	}

	.box-header-grid-acoes { gap: 0.125rem; }
}

/* Em telas bem estreitas a marca continua inteira — nome e complemento. O que
   cede é o tamanho e o tracking, não a palavra. */
@media (max-width: 400px) {
	.box-header-grid-marca-logo .logo-nome {
		font-size: 0.72rem;
		letter-spacing: 0.1em;
	}

	.box-header-grid-marca-logo .logo-complemento {
		font-size: 0.44rem;
		letter-spacing: 0.16em;
		margin-top: 0.125rem;
	}
}

/* ######
   Páginas de texto longo (políticas, termos)
############ */

/* Estes documentos vêm do editor em blocos e são longos: precisam de
   hierarquia e respiro que o parágrafo solto não dá. */

.box-conteudo-padrao-texto > h2,
.box-conteudo-padrao-texto > .wp-block-heading:is(h2) {
	color: var(--foreground);
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 300;
	line-height: 1.3;
	margin-top: 3rem;
	margin-bottom: 0.75rem;
}

.box-conteudo-padrao-texto > h3,
.box-conteudo-padrao-texto > .wp-block-heading:is(h3) {
	color: var(--foreground);
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 500;
	margin-top: 2rem;
	margin-bottom: 0.5rem;
}

.box-conteudo-padrao-texto > h2:first-child,
.box-conteudo-padrao-texto > .wp-block-heading:first-child { margin-top: 0; }

.box-conteudo-padrao-texto strong { color: var(--foreground); font-weight: 600; }

.box-conteudo-padrao-texto a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.box-conteudo-padrao-texto ul,
.box-conteudo-padrao-texto ol {
	list-style-position: outside;
	padding-left: 1.25rem;
	display: grid;
	gap: 0.5rem;
}

.box-conteudo-padrao-texto li { padding-left: 0.25rem; }

/* Data de atualização ao pé do documento. */
.box-conteudo-padrao-texto .atualizado {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
	font-size: 0.8125rem;
}

/* ######
   Aviso de cookies
############ */

.box-cookies {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 60;
	background: var(--card);
	border-top: 1px solid var(--border);
	box-shadow: var(--shadow-lift);
	padding: 1.25rem var(--space-gutter);
}

.box-cookies[hidden] { display: none; }

.box-cookies-contain {
	max-width: 90rem;
	margin-inline: auto;
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 60rem) {
	.box-cookies-contain {
		grid-template-columns: 1fr auto;
		align-items: center;
	}
}

.box-cookies-contain-texto h2 {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 0.375rem;
}

.box-cookies-contain-texto p {
	color: var(--muted-foreground);
	font-size: 0.875rem;
	line-height: 1.55;
	max-width: 62ch;
}

.box-cookies-contain-texto a { color: var(--primary); text-decoration: underline; }

.box-cookies-contain-texto-opcoes {
	display: grid;
	gap: 0.75rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
}

.box-cookies-contain-texto-opcoes[hidden] { display: none; }

.box-cookies-opcao {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	cursor: pointer;
}

.box-cookies-opcao input { margin-top: 0.2rem; flex: none; }
.box-cookies-opcao input:disabled { cursor: not-allowed; }

.box-cookies-opcao strong {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
}

.box-cookies-opcao em {
	display: block;
	color: var(--muted-foreground);
	font-size: 0.8125rem;
	font-style: normal;
	line-height: 1.5;
	max-width: 62ch;
}

.box-cookies-contain-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

@media (max-width: 59.99rem) {
	.box-cookies-contain-acoes .botao { flex: 1 1 auto; }
}

.box-footer-base-grid a[data-cookies-abrir],
.box-footer-base-grid a[data-credito] {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.box-footer-base-grid a[data-cookies-abrir]:hover,
.box-footer-base-grid a[data-credito]:hover { color: var(--primary); }
.box-footer-base-grid a[data-credito] { white-space: nowrap; }

/* Consentimento nos formulários. */
.formulario-consentimento {
	font-size: 0.8125rem;
	line-height: 1.5;
}

.formulario-consentimento .wpcf7-list-item { margin: 0; }

.formulario-consentimento label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	color: var(--muted-foreground);
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
	font-size: 0.8125rem;
	font-weight: 400;
}

.formulario-consentimento input[type="checkbox"] { margin-top: 0.15rem; flex: none; }
.formulario-consentimento a { color: var(--primary); text-decoration: underline; }

.woocommerce-privacy-policy-text {
	margin: 0 0 20px;
}