/*
 * Outline Decor: CSS do tema. Tokens e decisões em docs/design.md.
 * Ordem: tokens, base, utilidades, componentes, cabeçalho e navegação, páginas, WooCommerce, rodapé, movimento.
 */

/* ---------- Tokens ---------- */
:root {
	/* Materiais: papel quente, linho, pedra, grafite, um acento de madeira. Contrastes medidos em docs/design.md. */
	--papel: #FAF8F4;
	--branco: #FFFFFF;
	--linho: #F1ECE3;
	--foto: #F3EFE8;
	--linha: #D9D3C9;
	--linha-forte: #8A8378;
	--grafite: #1F1E1C;
	--grafite-2: #5A554E;
	--madeira: #7D5235;
	--alerta: #9A3412;
	--sucesso: #2F5D3A;

	--fonte-titulo: "Jost", "Jost reserva", "Futura", "Century Gothic", sans-serif;
	--fonte-texto: "Figtree", "Figtree reserva", system-ui, -apple-system, "Segoe UI", sans-serif;

	--t-rotulo: 0.75rem;
	--t-pequeno: 0.875rem;
	--t-base: 1rem;
	--t-media: 1.125rem;
	--t-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);
	--t-h2: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
	--t-h1: clamp(2rem, 1.45rem + 2.4vw, 3.25rem);

	--e-1: 0.25rem;
	--e-2: 0.5rem;
	--e-3: 0.75rem;
	--e-4: 1rem;
	--e-5: 1.5rem;
	--e-6: 2rem;
	--e-7: 3rem;
	--e-8: 4rem;
	--e-9: 6rem;

	--raio: 0;
	--traco: 1px;
	--sombra-painel: 0 12px 32px rgba(31, 30, 28, 0.12);
	--largura: 1320px;
	--margem: clamp(1rem, 4vw, 2.5rem);
	--altura-topo: 64px;
	--foco: 2px solid var(--madeira);
}

@media (min-width: 1024px) {
	:root {
		--altura-topo: 76px;
	}
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--altura-topo) + var(--e-4));
}

html:has(dialog[open]) {
	overflow: hidden;
}

body {
	margin: 0;
	background: var(--papel);
	color: var(--grafite);
	font-family: var(--fonte-texto);
	font-size: var(--t-base);
	line-height: 1.6;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
}

@media (min-width: 1024px) {
	body {
		font-size: 1.0625rem;
	}
}

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

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--fonte-titulo);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

p,
ul,
ol,
dl,
figure {
	margin: 0;
}

:where(ul[class], ol[class]) {
	list-style: none;
	padding: 0;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--madeira);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

:focus-visible {
	outline: var(--foco);
	outline-offset: 2px;
}

[hidden] {
	display: none !important;
}

::selection {
	background: var(--grafite);
	color: var(--papel);
}

/* ---------- Utilidades ---------- */
.sr,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.pular {
	position: absolute;
	top: var(--e-2);
	left: var(--e-2);
	z-index: 100;
	padding: var(--e-3) var(--e-4);
	background: var(--grafite);
	color: var(--papel);
	font-weight: 600;
	transform: translateY(-200%);
}

.pular:focus {
	transform: none;
	color: var(--papel);
}

.conteiner {
	width: 100%;
	max-width: var(--largura);
	margin-inline: auto;
	padding-inline: var(--margem);
}

.conteiner--medio {
	max-width: calc(880px + 2 * var(--margem));
}

.conteiner--texto {
	max-width: calc(760px + 2 * var(--margem));
}

.rotulo {
	font-family: var(--fonte-texto);
	font-size: var(--t-rotulo);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--grafite-2);
}

.rotulo a {
	text-decoration: none;
}

.icone {
	width: 24px;
	height: 24px;
	flex: none;
}

/* ---------- Botões e links de ação ---------- */
.botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2);
	min-height: 48px;
	padding: var(--e-3) var(--e-5);
	border: var(--traco) solid var(--grafite);
	border-radius: var(--raio);
	background: var(--grafite);
	color: var(--papel);
	font-family: var(--fonte-texto);
	font-size: var(--t-base);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.botao:hover {
	background: var(--madeira);
	border-color: var(--madeira);
	color: var(--papel);
}

.botao .icone {
	width: 20px;
	height: 20px;
}

.botao--linha {
	background: transparent;
	color: var(--grafite);
	border-color: var(--grafite);
}

.botao--linha:hover {
	background: var(--grafite);
	border-color: var(--grafite);
	color: var(--papel);
}

.botao--claro {
	background: var(--papel);
	border-color: var(--papel);
	color: var(--grafite);
}

.botao--claro:hover {
	background: var(--linho);
	border-color: var(--linho);
	color: var(--grafite);
}

.botao--pequeno {
	min-height: 40px;
	padding: var(--e-2) var(--e-4);
	font-size: var(--t-pequeno);
}

.botao--largo {
	width: 100%;
}

.icone-botao {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--grafite);
	text-decoration: none;
}

.icone-botao:hover {
	color: var(--madeira);
}

.link-seta {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	font-weight: 600;
	text-decoration: none;
	border-bottom: var(--traco) solid currentColor;
	padding-bottom: 2px;
}

.link-seta .icone {
	width: 18px;
	height: 18px;
}

.link-icone {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	text-decoration: none;
}

.link-icone:hover span {
	text-decoration: underline;
}

/* Botão da lista de orçamento (o JS do outline-core alterna aria-pressed). */
.botao-lista__na,
.botao-lista__icone-na {
	display: none;
}

.botao-lista[aria-pressed="true"] {
	background: var(--linho);
	border-color: var(--grafite);
	color: var(--grafite);
}

.botao-lista[aria-pressed="true"] .botao-lista__na,
.botao-lista[aria-pressed="true"] .botao-lista__icone-na {
	display: inline;
}

.botao-lista[aria-pressed="true"] .botao-lista__icone-na {
	display: block;
}

.botao-lista[aria-pressed="true"] .botao-lista__add,
.botao-lista[aria-pressed="true"] .botao-lista__icone-add {
	display: none;
}

.contador {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	background: var(--grafite);
	color: var(--papel);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

/* Lista vazia: o número some da tela, mas o leitor de tela ainda lê "peças: 0". */
.contador[data-oc-lista-contagem="0"] {
	width: 1px;
	min-width: 0;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.gaveta__link .contador[data-oc-lista-contagem="0"] {
	position: absolute;
}

.cabecalho__lista .contador {
	position: absolute;
	top: 3px;
	right: 0;
}

/* Etiquetas (atalhos de categoria) */
.pilula {
	/* Contém o .sr da contagem: sem isso, numa fileira que rola, ele alarga a página no celular. */
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	min-height: 40px;
	padding: var(--e-2) var(--e-4);
	border: var(--traco) solid var(--linha-forte);
	background: var(--branco);
	font-size: var(--t-pequeno);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.pilula:hover {
	border-color: var(--grafite);
	color: var(--grafite);
	background: var(--linho);
}

.pilula__qtd {
	color: var(--grafite-2);
	font-variant-numeric: tabular-nums;
}

.atalhos {
	margin-block: var(--e-5);
}

.atalhos__titulo {
	margin-bottom: var(--e-3);
	font-size: var(--t-h3);
}

.atalhos__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2);
}

.atalhos__lista--grande .pilula {
	min-height: 48px;
	padding-inline: var(--e-5);
	font-size: var(--t-base);
}

/* Selos de estado */
.selo {
	display: inline-block;
	margin-bottom: var(--e-1);
	padding: 1px var(--e-2);
	border: var(--traco) solid currentColor;
	font-size: var(--t-rotulo);
	font-weight: 600;
	letter-spacing: 0.04em;
}

.selo--ultima {
	color: var(--madeira);
}

.selo--indisponivel {
	color: var(--alerta);
}

/* Campos */
.campo,
.prosa input[type="text"],
.prosa input[type="email"],
.prosa input[type="password"],
.prosa input[type="tel"],
.prosa input[type="number"],
.prosa input[type="url"],
.prosa select,
.prosa textarea,
.outline-ai-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="file"]),
.outline-ai-form select,
.outline-ai-form textarea {
	width: 100%;
	min-height: 48px;
	padding: var(--e-3) var(--e-4);
	border: var(--traco) solid var(--linha-forte);
	border-radius: var(--raio);
	background: var(--branco);
	font-size: var(--t-base);
}

.prosa textarea,
.outline-ai-form textarea {
	min-height: 120px;
}

.prosa label,
.outline-ai-form label {
	display: block;
	margin-bottom: var(--e-1);
	font-weight: 600;
}

.prosa button[type="submit"],
.prosa .button,
.outline-ai-form button[type="submit"],
.outline-ai-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--e-3) var(--e-5);
	border: var(--traco) solid var(--grafite);
	border-radius: var(--raio);
	background: var(--grafite);
	color: var(--papel);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.prosa button[type="submit"]:hover,
.prosa .button:hover,
.outline-ai-form button[type="submit"]:hover {
	background: var(--madeira);
	border-color: var(--madeira);
}

/* Busca */
.form-busca {
	position: relative;
	display: flex;
	width: 100%;
}

.form-busca__campo {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: var(--e-3) 52px var(--e-3) var(--e-4);
	border: var(--traco) solid var(--linha-forte);
	border-radius: var(--raio);
	background: var(--branco);
	font-size: var(--t-base);
	-webkit-appearance: none;
	appearance: none;
}

.form-busca__campo::placeholder {
	color: var(--grafite-2);
	opacity: 1;
}

.form-busca__campo::-webkit-search-decoration {
	-webkit-appearance: none;
}

.form-busca__enviar {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 0;
	background: transparent;
	color: var(--grafite);
}

.form-busca__enviar:hover {
	color: var(--madeira);
}

/* Avisos */
.aviso {
	display: flex;
	gap: var(--e-3);
	align-items: flex-start;
	margin-bottom: var(--e-5);
	padding: var(--e-4);
	border: var(--traco) solid var(--linha);
	border-left: 3px solid var(--alerta);
	background: var(--branco);
}

.aviso .icone {
	color: var(--alerta);
}

.aviso-lista {
	position: fixed;
	left: 50%;
	bottom: var(--e-5);
	z-index: 60;
	max-width: calc(100vw - 2rem);
	padding: var(--e-3) var(--e-5);
	background: var(--grafite);
	color: var(--papel);
	font-weight: 600;
	transform: translateX(-50%);
	box-shadow: var(--sombra-painel);
}

.aviso-lista:empty {
	display: none;
}

.tem-barra-acoes .aviso-lista {
	bottom: 92px;
}

/* ---------- Cabeçalho ---------- */
.cabecalho {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--papel);
	border-bottom: var(--traco) solid var(--linha);
}

.cabecalho__barra {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	height: var(--altura-topo);
}

.cabecalho__marca {
	display: inline-flex;
	align-items: center;
	color: var(--grafite);
	margin-right: auto;
}

.cabecalho__logo {
	width: 124px;
	height: auto;
}

.cabecalho__acoes {
	display: flex;
	align-items: center;
	gap: var(--e-1);
}

.cabecalho__whatsapp,
.nav-principal {
	display: none;
}

.busca-topo {
	padding-block: var(--e-4);
	border-top: var(--traco) solid var(--linha);
	background: var(--papel);
}

.busca-topo .form-busca {
	max-width: 720px;
	margin-inline: auto;
}

@media (min-width: 1024px) {
	.cabecalho__menu {
		display: none;
	}

	.cabecalho__marca {
		margin-right: var(--e-6);
	}

	.cabecalho__logo {
		width: 148px;
	}

	.nav-principal {
		display: block;
		margin-right: auto;
	}

	.cabecalho__whatsapp {
		display: inline-flex;
		margin-left: var(--e-3);
	}
}

.nav-principal__lista {
	display: flex;
	align-items: center;
	gap: var(--e-1);
}

.nav-principal__item {
	position: relative;
	display: flex;
	align-items: center;
}

.nav-principal__link {
	display: inline-flex;
	align-items: center;
	height: var(--altura-topo);
	padding-inline: var(--e-3);
	font-weight: 500;
	text-decoration: none;
}

.nav-principal__link[aria-current="page"] {
	box-shadow: inset 0 -2px 0 var(--grafite);
}

.tem-painel .nav-principal__link {
	padding-right: 0;
}

.nav-principal__abrir {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
}

.nav-principal__abrir .icone {
	width: 16px;
	height: 16px;
	transition: transform 0.15s;
}

.nav-principal__abrir[aria-expanded="true"] .icone {
	transform: rotate(180deg);
}

.painel {
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
	width: min(560px, 80vw);
	padding: var(--e-5);
	border: var(--traco) solid var(--linha);
	background: var(--branco);
	box-shadow: var(--sombra-painel);
}

.nav-principal__abrir[aria-expanded="true"] + .painel {
	display: block;
}

@media (hover: hover) {
	.tem-painel:hover .painel {
		display: block;
	}
}

.painel__lista {
	columns: 2;
	column-gap: var(--e-5);
}

.painel__link {
	display: flex;
	justify-content: space-between;
	gap: var(--e-3);
	padding: var(--e-2) 0;
	border-bottom: var(--traco) solid var(--linha);
	text-decoration: none;
	break-inside: avoid;
}

.painel__qtd {
	color: var(--grafite-2);
	font-variant-numeric: tabular-nums;
}

.painel__tudo {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	margin-top: var(--e-4);
	font-weight: 600;
	text-decoration: none;
}

.painel__tudo .icone {
	width: 18px;
	height: 18px;
}

/* Gaveta de menu (dialog nativo: foco preso, Esc fecha, foco volta ao botão) */
.gaveta {
	position: fixed;
	inset: 0 auto 0 0;
	width: min(88vw, 400px);
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--papel);
	color: var(--grafite);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.gaveta::backdrop {
	background: rgba(31, 30, 28, 0.5);
}

.gaveta[open] {
	animation: gaveta-entra 0.2s ease-out;
}

@keyframes gaveta-entra {
	from {
		transform: translateX(-24px);
		opacity: 0;
	}
}

.gaveta__topo {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--altura-topo);
	padding-inline: var(--e-4) var(--e-2);
	background: var(--papel);
	border-bottom: var(--traco) solid var(--linha);
}

.gaveta__logo {
	width: 112px;
}

.gaveta__corpo {
	display: grid;
	gap: var(--e-5);
	padding: var(--e-4);
}

.gaveta__titulo {
	margin: var(--e-5) 0 var(--e-2);
	font-family: var(--fonte-texto);
	font-size: var(--t-rotulo);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--grafite-2);
}

.gaveta__titulo:first-child {
	margin-top: 0;
}

.gaveta__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-3);
	min-height: 48px;
	border-bottom: var(--traco) solid var(--linha);
	font-size: var(--t-media);
	text-decoration: none;
}

.gaveta__qtd {
	color: var(--grafite-2);
	font-size: var(--t-pequeno);
	font-variant-numeric: tabular-nums;
}

.gaveta__contato {
	display: grid;
	gap: var(--e-3);
	padding-top: var(--e-2);
}

.gaveta__atendimento {
	color: var(--grafite-2);
	font-size: var(--t-pequeno);
}

/* ---------- Trilha ---------- */
.trilha {
	padding-block: var(--e-4);
	font-size: 0.8125rem;
	color: var(--grafite-2);
	overflow-x: auto;
	scrollbar-width: none;
}

.trilha__lista {
	display: flex;
	gap: var(--e-2);
	white-space: nowrap;
}

.trilha__item + .trilha__item::before {
	content: "/";
	margin-right: var(--e-2);
	color: var(--linha-forte);
}

.trilha a {
	text-decoration: none;
}

.trilha a:hover {
	text-decoration: underline;
}

/* ---------- Seções e blocos ---------- */
.secao {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.secao--linho {
	background: var(--linho);
}

.secao--colada {
	padding-top: var(--e-4);
}

.secao__topo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--e-3);
	margin-bottom: var(--e-5);
}

.secao__titulo {
	font-size: var(--t-h2);
	font-weight: 300;
}

.secao > .conteiner > .secao__titulo,
.secao__titulo + .grade-produtos {
	margin-bottom: var(--e-5);
}

.duas-colunas {
	display: grid;
	gap: var(--e-5);
}

@media (min-width: 768px) {
	.duas-colunas {
		grid-template-columns: 1fr 1fr;
	}
}

.duas-colunas--compacta {
	margin-block: var(--e-5);
}

.bloco-moldura {
	display: grid;
	gap: var(--e-3);
	align-content: start;
	padding: var(--e-5);
	border: var(--traco) solid var(--grafite);
}

.bloco-moldura__titulo {
	font-size: var(--t-h3);
}

.faixa-moldura {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-4);
	padding: var(--e-5) var(--e-6);
	border: var(--traco) solid var(--grafite);
}

.faixa-moldura__titulo {
	margin-bottom: var(--e-1);
	font-size: var(--t-h3);
}

/* Passos do pedido */
.passos {
	display: grid;
	gap: var(--e-5);
	counter-reset: passo;
}

@media (min-width: 768px) {
	.passos {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--e-6);
	}
}

.passos__item {
	counter-increment: passo;
	padding-top: var(--e-4);
	border-top: var(--traco) solid var(--grafite);
}

.passos__item::before {
	content: counter(passo, decimal-leading-zero);
	display: block;
	margin-bottom: var(--e-2);
	font-family: var(--fonte-titulo);
	font-size: 2rem;
	font-weight: 300;
	line-height: 1;
}

.passos__titulo {
	margin-bottom: var(--e-2);
	font-size: var(--t-h3);
}

.passos__item p {
	color: var(--grafite-2);
}

.passos__acoes {
	margin-top: var(--e-6);
}

/* Estado vazio */
.vazio {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* a fileira de etiquetas que rola não alarga a coluna */
	gap: var(--e-4);
	max-width: 720px;
	padding: var(--e-6) 0;
}

.vazio__titulo {
	font-size: var(--t-h2);
	font-weight: 300;
}

.vazio__texto {
	color: var(--grafite-2);
}

.vazio__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3);
	margin-top: var(--e-5);
}

.vazio__busca {
	max-width: 560px;
}

/* ---------- Página inicial ---------- */
.abertura {
	padding-block: clamp(1.75rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
}

.abertura__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--e-5);
	align-items: end;
}

@media (min-width: 1024px) {
	.abertura__grade {
		grid-template-columns: 7fr 5fr;
		gap: var(--e-8);
	}
}

.abertura__texto {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--e-4);
}

.abertura__titulo {
	font-size: var(--t-h1);
	font-weight: 300;
	line-height: 1.05;
}

.abertura__frase {
	max-width: 36em;
	font-size: var(--t-media);
	color: var(--grafite-2);
}

.abertura__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3);
	margin-top: var(--e-2);
}

.abertura__busca {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--e-3);
}

.abertura__atalhos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2);
}

@media (max-width: 599px) {
	.abertura__acoes .botao {
		flex: 1 1 100%;
	}

	.abertura__atalhos {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-inline: calc(-1 * var(--margem));
		padding-inline: var(--margem);
		scrollbar-width: none;
	}
}

/* Mosaico de categorias */
.mosaico {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--e-4);
}

@media (min-width: 600px) {
	.mosaico {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.mosaico {
		/* Uma fileira só quando houver até 6 categorias (com 5 e 4 colunas fixas, a quinta ficava sozinha). */
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: var(--e-5);
	}
}

.mosaico__link {
	display: grid;
	gap: var(--e-1);
	text-decoration: none;
}

.mosaico__foto {
	display: block;
	aspect-ratio: 1;
	margin-bottom: var(--e-2);
	background: var(--foto);
	border: var(--traco) solid var(--linha);
	overflow: hidden;
}

.mosaico__foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.3s;
}

.mosaico__link:hover .mosaico__foto img {
	transform: scale(1.03);
}

.mosaico__nome {
	font-family: var(--fonte-titulo);
	font-size: var(--t-media);
}

.mosaico__qtd {
	color: var(--grafite-2);
	font-size: var(--t-pequeno);
}

/* ---------- Grade e card de produto ---------- */
.grade-produtos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--e-6) var(--e-3);
}

@media (min-width: 600px) {
	.grade-produtos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--e-6) var(--e-5);
	}
}

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

.card-produto {
	display: flex;
	flex-direction: column;
	gap: var(--e-3);
	min-width: 0;
}

.card-produto__foto {
	display: block;
	aspect-ratio: 4 / 5;
	background: var(--foto);
	border: var(--traco) solid var(--linha);
	overflow: hidden;
}

.card-produto__foto img,
.foto-vazia {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.3s;
}

.card-produto:hover .card-produto__foto img {
	transform: scale(1.03);
}

.card-produto__texto {
	display: grid;
	gap: var(--e-1);
	justify-items: start;
	flex: 1;
	align-content: start;
}

.card-produto__nome {
	font-family: var(--fonte-texto);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-produto__nome a {
	text-decoration: none;
}

.card-produto__nome a:hover {
	text-decoration: underline;
}

.card-produto__lista {
	width: 100%;
}

@media (max-width: 599px) {
	.card-produto__lista {
		padding-inline: var(--e-2);
		font-size: 0.8125rem;
	}

	.card-produto__lista .icone {
		width: 16px;
		height: 16px;
	}
}

/* Preço (o outline-core devolve o HTML do WooCommerce) */
.preco {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.preco del {
	color: var(--grafite-2);
	font-weight: 400;
}

.preco ins {
	text-decoration: none;
}

.card-produto__preco {
	font-size: var(--t-base);
}

/* De/por: preço cadastrado riscado e o percentual da peça na primeira linha, preço com desconto embaixo. */
.oc-preco--de-por {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-1) var(--e-2);
}

.oc-preco--de-por del {
	font-size: 0.875em;
	text-decoration-thickness: 1px;
}

.oc-preco--de-por ins {
	order: 3;
	flex-basis: 100%;
}

.oc-preco__selo {
	order: 2;
	padding: 0.05em 0.4em;
	border: var(--traco) solid var(--madeira);
	color: var(--madeira);
	font-size: var(--t-rotulo);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.produto__preco .oc-preco--de-por del {
	font-size: 0.6em;
}

.produto__nota-preco {
	margin: var(--e-1) 0 0;
	color: var(--grafite-2);
	font-size: var(--t-pequeno);
}

/* ---------- Listagens ---------- */
.listagem {
	padding-bottom: var(--e-8);
}

.listagem__topo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--e-2) var(--e-4);
	padding-block: var(--e-2) var(--e-3);
}

.listagem__topo .rotulo {
	flex-basis: 100%;
}

.listagem__titulo {
	font-size: var(--t-h1);
	font-weight: 300;
}

.listagem__contagem {
	color: var(--grafite-2);
}

.listagem__descricao {
	flex-basis: 100%;
	color: var(--grafite-2);
}

.listagem .atalhos {
	margin-block: var(--e-3) var(--e-4);
}

@media (max-width: 599px) {
	.listagem .atalhos__lista {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-inline: calc(-1 * var(--margem));
		padding-inline: var(--margem);
		scrollbar-width: none;
	}
}

.listagem__barra {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-block: var(--e-3) var(--e-5);
	padding-top: var(--e-3);
	border-top: var(--traco) solid var(--linha);
}

.ordenacao {
	display: flex;
	align-items: center;
	gap: var(--e-2);
}

.ordenacao__rotulo {
	color: var(--grafite-2);
	font-size: var(--t-pequeno);
}

.ordenacao__campo {
	min-height: 40px;
	padding: var(--e-2) var(--e-6) var(--e-2) var(--e-3);
	border: var(--traco) solid var(--linha-forte);
	border-radius: var(--raio);
	background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231F1E1C' stroke-width='1.5'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") no-repeat right 10px center;
	font-size: var(--t-pequeno);
	-webkit-appearance: none;
	appearance: none;
}

.js .ordenacao__enviar {
	display: none;
}

.paginacao {
	display: grid;
	justify-items: center;
	gap: var(--e-3);
	margin-top: var(--e-7);
}

.paginacao__status {
	color: var(--grafite-2);
	font-size: var(--t-pequeno);
}

.paginacao__mais[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

.lista-resultados {
	display: grid;
	gap: var(--e-4);
	margin-top: var(--e-5);
}

.lista-resultados__item {
	padding-bottom: var(--e-4);
	border-bottom: var(--traco) solid var(--linha);
}

.lista-resultados__titulo {
	font-size: var(--t-h3);
}

/* ---------- Página de produto ---------- */
.produto {
	padding-bottom: var(--e-8);
}

.produto__grade {
	display: grid;
	gap: var(--e-5);
	align-items: start;
}

@media (min-width: 900px) {
	.produto__grade {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--e-7);
	}

	.produto__resumo {
		position: sticky;
		top: calc(var(--altura-topo) + var(--e-5));
	}
}

.produto__resumo {
	display: grid;
	gap: var(--e-4);
	align-content: start;
}

.produto__titulo {
	font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.375rem);
	font-weight: 300;
	line-height: 1.12;
}

.produto__preco {
	font-size: 1.5rem;
}

.produto__estado {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	color: var(--sucesso);
	font-weight: 600;
}

.produto__estado .icone {
	width: 20px;
	height: 20px;
}

.produto__estado--ultima_unidade {
	color: var(--madeira);
}

.produto__acoes {
	display: grid;
	gap: var(--e-3);
	margin-top: var(--e-2);
}

.produto__subtitulo {
	margin-bottom: var(--e-3);
	font-size: var(--t-h3);
}

.ficha {
	margin-top: var(--e-3);
	border-top: var(--traco) solid var(--linha);
}

.ficha__linha {
	display: grid;
	grid-template-columns: 8.5rem 1fr;
	gap: var(--e-3);
	padding-block: var(--e-3);
	border-bottom: var(--traco) solid var(--linha);
}

.ficha dt {
	color: var(--grafite-2);
}

.ficha dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.como-pedir {
	padding: var(--e-5);
	background: var(--linho);
}

.como-pedir__passos {
	display: grid;
	gap: var(--e-3);
	padding-left: 1.25rem;
	list-style: decimal;
	color: var(--grafite-2);
}

.como-pedir__passos strong {
	color: var(--grafite);
}

.produto__politicas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2) var(--e-5);
	font-size: var(--t-pequeno);
}

.secao--parecidos {
	padding-bottom: 0;
}

.secao--parecidos .secao__titulo {
	margin-bottom: var(--e-5);
}

/* Barra fixa com as duas ações (celular) */
.barra-acoes {
	position: fixed;
	inset: auto 0 0;
	z-index: 30;
	display: flex;
	gap: var(--e-2);
	padding: var(--e-3) var(--margem) calc(var(--e-3) + env(safe-area-inset-bottom));
	background: var(--papel);
	border-top: var(--traco) solid var(--linha-forte);
}

.barra-acoes > * {
	flex: 1 1 0;
	min-width: 0;
	padding-inline: var(--e-3);
	font-size: 0.9375rem;
}

/* Com JS, a barra só aparece quando os botões da peça saem da tela (o tema.js põe --visivel); sem JS, fica sempre. */
.barra-acoes {
	transition: transform 0.2s ease, visibility 0.2s;
}

.js .barra-acoes:not(.barra-acoes--visivel) {
	transform: translateY(100%);
	visibility: hidden;
}

@media (max-width: 899px) {
	.tem-barra-acoes {
		padding-bottom: 76px;
	}
}

@media (min-width: 900px) {
	.barra-acoes {
		display: none;
	}
}

/* Galeria nativa do WooCommerce (flexslider + zoom + PhotoSwipe) */
/*
 * A altura de cada foto segue a largura da galeria (unidade cqw), não a largura do slide: durante a montagem
 * o flexslider dá larguras provisórias aos slides, e com aspect-ratio a foto crescia e empurrava o texto (CLS).
 */
.woocommerce-product-gallery {
	position: relative;
	container-type: inline-size;
}

/*
 * Espaço das miniaturas reservado antes do flexslider criar a fileira (evita empurrar nome e preço: CLS).
 * Uma fileira de 5 miniaturas quadradas com 8 px entre elas e 8 px acima; duas fileiras a partir da 6ª foto.
 */
.woocommerce-product-gallery:not(:has(.flex-control-thumbs)):has(.woocommerce-product-gallery__image:nth-child(2)) {
	padding-bottom: calc((100% - 4 * var(--e-2)) / 5 + var(--e-2));
}

.woocommerce-product-gallery:not(:has(.flex-control-thumbs)):has(.woocommerce-product-gallery__image:nth-child(6)) {
	padding-bottom: calc(2 * ((100% - 4 * var(--e-2)) / 5 + var(--e-2)));
}

.woocommerce-product-gallery__wrapper {
	margin: 0;
}

/* Na montagem, o flexslider alarga o contêiner antes de pôr os slides lado a lado: por um instante eles
   ficam empilhados. A janela do slider nunca passa da altura de uma foto. */
.woocommerce-product-gallery .flex-viewport {
	max-height: 100cqw;
}

@media (min-width: 900px) {
	.woocommerce-product-gallery .flex-viewport {
		max-height: min(125cqw, 78vh);
	}
}

.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image--placeholder {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100cqw;
	background: var(--foto);
	overflow: hidden;
}

@media (min-width: 900px) {
	.woocommerce-product-gallery__image,
	.woocommerce-product-gallery__image--placeholder {
		height: min(125cqw, 78vh);
	}
}

.woocommerce-product-gallery__image > a {
	display: block;
	width: 100%;
	height: 100%;
}

.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__image--placeholder img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.woocommerce-product-gallery__image .zoomImg {
	mix-blend-mode: normal;
	background: var(--branco);
	object-fit: initial;
	max-width: none;
}

/* Antes do flexslider iniciar, só a primeira foto aparece (sem esconder a galeria inteira). */
.woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__image:not(:first-child) {
	display: none;
}

.flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--e-2);
	margin: var(--e-2) 0 0;
	padding: 0;
	list-style: none;
}

.flex-control-thumbs li {
	background: var(--foto);
}

.flex-control-thumbs img {
	aspect-ratio: 1;
	width: 100%;
	object-fit: cover;
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 0.15s;
}

.flex-control-thumbs img:hover,
.flex-control-thumbs img.flex-active {
	opacity: 1;
}

.flex-control-thumbs img.flex-active {
	outline: var(--traco) solid var(--grafite);
	outline-offset: -1px;
}

.flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.flex-direction-nav a {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	background: rgba(250, 248, 244, 0.92);
	border: var(--traco) solid var(--linha);
	color: transparent;
	font-size: 0;
	text-decoration: none;
}

.flex-direction-nav a::before {
	content: "";
	width: 20px;
	height: 20px;
	background: no-repeat center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1E1C' stroke-width='1.5'%3E%3Cpath d='M19.5 12h-15M10.5 6l-6 6 6 6'/%3E%3C/svg%3E");
}

.flex-direction-nav .flex-prev {
	left: var(--e-2);
}

.flex-direction-nav .flex-next {
	right: var(--e-2);
}

.flex-direction-nav .flex-next::before {
	transform: scaleX(-1);
}

.flex-direction-nav .flex-disabled {
	display: none;
}

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--e-2);
	right: var(--e-2);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: rgba(250, 248, 244, 0.92) no-repeat center / 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1E1C' stroke-width='1.5'%3E%3Ccircle cx='10.5' cy='10.5' r='6.25'/%3E%3Cpath d='m15.2 15.2 5.3 5.3M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
	border: var(--traco) solid var(--linha);
	font-size: 0;
	color: transparent;
	text-decoration: none;
}

.woocommerce-product-gallery__trigger > * {
	display: none;
}

/* ---------- Lista de orçamento ---------- */
.lista {
	padding-bottom: var(--e-8);
}

.lista__titulo {
	font-size: var(--t-h2);
	font-weight: 300;
	margin-bottom: var(--e-3);
}

.lista__titulo--passos {
	margin-top: var(--e-7);
	margin-bottom: var(--e-5);
	font-size: var(--t-h3);
	font-weight: 400;
}

.lista__vazia > p {
	max-width: 40em;
	color: var(--grafite-2);
}

.lista__intro {
	margin-bottom: var(--e-5);
	color: var(--grafite-2);
}

.lista-itens {
	border-top: var(--traco) solid var(--linha);
}

.lista-item {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) 44px;
	gap: var(--e-4);
	align-items: start;
	padding-block: var(--e-4);
	border-bottom: var(--traco) solid var(--linha);
}

@media (min-width: 600px) {
	.lista-item {
		grid-template-columns: 128px minmax(0, 1fr) 44px;
	}
}

.lista-item__foto {
	display: block;
	aspect-ratio: 1;
	background: var(--foto);
	border: var(--traco) solid var(--linha);
}

.lista-item__foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.lista-item__texto {
	display: grid;
	gap: var(--e-1);
}

.lista-item__estado {
	font-size: var(--t-rotulo);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sucesso);
}

.lista-item[data-oc-estado="ultima_unidade"] .lista-item__estado {
	color: var(--madeira);
}

.lista-item[data-oc-estado="indisponivel"] .lista-item__estado {
	color: var(--alerta);
}

.lista-item[data-oc-estado="indisponivel"] .lista-item__foto {
	opacity: 0.5;
}

.lista-item__nome {
	font-family: var(--fonte-texto);
	font-size: var(--t-base);
	font-weight: 500;
	line-height: 1.35;
}

.lista-item__nome a {
	text-decoration: none;
}

.lista-item__nome a[href]:hover {
	text-decoration: underline;
}

.lista-item__codigo {
	color: var(--grafite-2);
	font-size: var(--t-pequeno);
}

.lista-item__codigo:has(span:empty),
.lista-item__preco:empty,
.lista-item__estado:empty {
	display: none;
}

.lista-item__qtd label {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	margin-top: var(--e-2);
	font-size: var(--t-pequeno);
	color: var(--grafite-2);
}

.campo--qtd {
	width: 5.5rem;
	min-height: 40px;
	padding: var(--e-1) var(--e-2);
}

.lista__enviar {
	display: grid;
	gap: var(--e-3);
	justify-items: center;
	max-width: 480px;
	margin: var(--e-6) auto 0;
	text-align: center;
}

.lista__nota {
	color: var(--grafite-2);
	font-size: var(--t-pequeno);
}

.lista__semjs {
	margin-top: var(--e-3);
	padding: var(--e-3) var(--e-4);
	border-left: 3px solid var(--alerta);
	background: var(--branco);
}

.lista[data-oc-lista-estado="carregando"] .lista-itens:empty {
	min-height: 160px;
	background: repeating-linear-gradient(var(--papel) 0 24px, var(--linho) 24px 25px);
}

/* ---------- Páginas de conteúdo ---------- */
.pagina,
.artigo,
.blog {
	padding-bottom: var(--e-8);
}

.pagina__topo,
.artigo__topo {
	display: grid;
	gap: var(--e-3);
	padding-block: var(--e-2) var(--e-6);
}

.pagina__titulo,
.artigo__titulo {
	font-size: var(--t-h1);
	font-weight: 300;
}

.pagina__intro {
	font-size: var(--t-media);
	color: var(--grafite-2);
}

.pagina__nota {
	margin-top: var(--e-5);
	color: var(--grafite-2);
}

.pagina__busca {
	max-width: 560px;
	margin-bottom: var(--e-5);
}

.cartao-contato {
	display: grid;
	gap: var(--e-3);
	justify-items: start;
	padding: var(--e-6);
	border: var(--traco) solid var(--grafite);
	background: var(--branco);
}

.cartao-contato__numero {
	font-family: var(--fonte-titulo);
	font-size: var(--t-h2);
	font-weight: 300;
	font-variant-numeric: tabular-nums;
}

.cartao-contato__dica {
	color: var(--grafite-2);
	font-size: var(--t-pequeno);
}

.cartao-contato--compacto {
	margin-top: var(--e-7);
	padding: var(--e-5);
}

/* Texto corrido (políticas, posts, sobre, FAQ) */
.prosa {
	font-size: var(--t-media);
	line-height: 1.7;
}

.prosa > * + * {
	margin-top: var(--e-4);
}

.prosa h2 {
	margin-top: var(--e-6);
	font-size: var(--t-h2);
	font-weight: 300;
}

.prosa h3 {
	margin-top: var(--e-5);
	font-size: var(--t-h3);
}

.prosa ul,
.prosa ol {
	padding-left: 1.25rem;
}

.prosa li + li {
	margin-top: var(--e-2);
}

.prosa a {
	color: var(--madeira);
}

.prosa a:hover {
	color: var(--grafite);
}

.prosa img {
	height: auto;
}

.prosa table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-base);
}

.prosa th,
.prosa td {
	padding: var(--e-2);
	border-bottom: var(--traco) solid var(--linha);
	text-align: left;
}

.prosa blockquote {
	margin-inline: 0;
	padding-left: var(--e-4);
	border-left: 2px solid var(--grafite);
}

.faq h2 {
	font-size: var(--t-h3);
	font-weight: 400;
	padding-top: var(--e-5);
	border-top: var(--traco) solid var(--linha);
}

.faq h2:first-child {
	margin-top: 0;
}

.artigo__foto {
	margin-bottom: var(--e-6);
	background: var(--foto);
}

.artigo__foto img {
	width: 100%;
	max-height: 520px;
	object-fit: cover;
}

.artigo__rodape {
	display: grid;
	gap: var(--e-4);
	margin-top: var(--e-7);
	padding: var(--e-5);
	border: var(--traco) solid var(--grafite);
}

.artigo__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3);
}

/* Blog */
.grade-posts {
	display: grid;
	gap: var(--e-6) var(--e-5);
}

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

@media (min-width: 1024px) {
	.grade-posts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.card-post {
	display: grid;
	gap: var(--e-2);
	align-content: start;
}

.card-post__foto {
	display: block;
	aspect-ratio: 3 / 2;
	margin-bottom: var(--e-2);
	background: var(--foto);
	overflow: hidden;
}

.card-post__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-post__data {
	color: var(--grafite-2);
	font-size: var(--t-pequeno);
}

.card-post__titulo {
	font-size: var(--t-h3);
}

.card-post__titulo a {
	text-decoration: none;
}

.card-post__titulo a:hover {
	text-decoration: underline;
}

.card-post__resumo {
	color: var(--grafite-2);
}

/* WooCommerce: conta e avisos */
.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 0 0 var(--e-5);
	padding: var(--e-4);
	border: var(--traco) solid var(--linha);
	border-left: 3px solid var(--grafite);
	background: var(--branco);
	list-style: none;
}

.woocommerce-error {
	border-left-color: var(--alerta);
}

.woocommerce-form-row,
.form-row {
	margin-bottom: var(--e-4);
}

.woocommerce-form__label-for-checkbox {
	display: inline-flex !important;
	align-items: center;
	gap: var(--e-2);
	font-weight: 400 !important;
}

/* Login da conta: botão "Mostrar senha" dentro do campo (o CSS do WooCommerce não carrega) e "Acessar" abaixo. */
.password-input {
	position: relative;
	display: block;
}

.password-input input {
	padding-right: 52px !important;
}

.show-password-input {
	position: absolute;
	top: 0;
	right: 0;
	width: 48px;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%231F1E1C' stroke-width='1.5'%3E%3Cpath d='M2.5 12s3.5-6.5 9.5-6.5 9.5 6.5 9.5 6.5-3.5 6.5-9.5 6.5S2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center;
	cursor: pointer;
}

.show-password-input.display-password {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%231F1E1C' stroke-width='1.5'%3E%3Cpath d='M2.5 12s3.5-6.5 9.5-6.5 9.5 6.5 9.5 6.5-3.5 6.5-9.5 6.5S2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 20 20 4'/%3E%3C/svg%3E");
}

.woocommerce-form-login__submit {
	display: flex !important;
	margin-top: var(--e-4);
}

/* Consultoria com IA (formulário do mu-plugin outline-ai-project-assistant) */
.outline-ai-assistant {
	display: grid;
	gap: var(--e-6);
}

.outline-ai-kicker {
	font-size: var(--t-rotulo);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--grafite-2);
}

.outline-ai-assistant__grid {
	display: grid;
	gap: var(--e-5);
}

@media (min-width: 900px) {
	.outline-ai-assistant__grid {
		grid-template-columns: 3fr 2fr;
	}
}

.outline-ai-card {
	padding: var(--e-5);
	border: var(--traco) solid var(--linha);
	background: var(--branco);
}

.outline-ai-form {
	display: grid;
	gap: var(--e-4);
}

/* ---------- Rodapé ---------- */
.rodape {
	margin-top: var(--e-8);
	padding-block: var(--e-8) var(--e-5);
	background: var(--grafite);
	color: var(--papel);
}

.produto + .rodape,
.listagem + .rodape,
.pagina + .rodape,
.artigo + .rodape,
.blog + .rodape {
	margin-top: 0;
}

.inicio + .rodape {
	margin-top: 0;
}

.rodape a:not(.botao) {
	color: var(--papel);
}

.rodape a:not(.botao):hover {
	color: var(--linha);
}

.rodape :focus-visible {
	outline-color: var(--papel);
}

.rodape__grade {
	display: grid;
	gap: var(--e-6);
}

@media (min-width: 768px) {
	.rodape__grade {
		grid-template-columns: 1.4fr repeat(3, 1fr);
	}
}

.rodape__marca {
	display: grid;
	gap: var(--e-4);
	justify-items: start;
	align-content: start;
}

.rodape__logo-link {
	color: var(--papel);
}

.rodape__logo {
	width: 140px;
}

.rodape__texto {
	max-width: 28em;
	color: var(--linha);
}

.rodape__titulo {
	margin-bottom: var(--e-3);
	font-family: var(--fonte-texto);
	font-size: var(--t-rotulo);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--linha);
}

.rodape__lista {
	display: grid;
	gap: var(--e-2);
}

.rodape__lista a {
	text-decoration: none;
}

.rodape__lista a:hover {
	text-decoration: underline;
}

.rodape__base {
	display: grid;
	gap: var(--e-1);
	margin-top: var(--e-7);
	padding-top: var(--e-5);
	border-top: var(--traco) solid rgba(250, 248, 244, 0.25);
	color: var(--linha);
	font-size: var(--t-pequeno);
}

@media (min-width: 768px) {
	.rodape__base {
		display: flex;
		justify-content: space-between;
		gap: var(--e-5);
	}
}

/* ---------- Sem JavaScript ---------- */
/* Gaveta, busca do topo, painéis do menu e lista de orçamento dependem do JS: sem ele, os botões não aparecem
   (a navegação segue pelos links, a busca da página inicial e o WhatsApp de cada peça). */
html:not(.js) .cabecalho__menu,
html:not(.js) [data-od-alternar-busca],
html:not(.js) [data-od-painel],
html:not(.js) [data-oc-lista-add] {
	display: none;
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.card-produto:hover .card-produto__foto img,
	.mosaico__link:hover .mosaico__foto img {
		transform: none;
	}
}