@charset "UTF-8";

/* ==========================================================================
   Marmocenter — vitrine, carrinho e checkout.
   Usa os tokens de tokens.css: topo branco com o logo colorido, seções claras
   em cinza-claro e faixas grafite, com o vermelho da marca nos destaques.
   ========================================================================== */

:root {
	--container: 1240px;
	--gutter: clamp(20px, 4vw, 48px);
	--section: clamp(56px, 8vw, 112px);
	/* Respiro entre o cabeçalho da página e o conteúdo (listagem, carrinho, checkout, pedido, conta, textos) */
	--respiro-topo: clamp(14px, 1.8vw, 24px);
	/* Altura da parte do topo que gruda ao rolar (ver Cabeçalho): 80 px no desktop, 112 px no celular */
	--header-h: 80px;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 72px);
}

body {
	background: var(--paper);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: hidden;
}

body.sem-rolagem {
	overflow: hidden;
}

.skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 300;
	padding: 10px 16px;
	background: var(--ink);
	color: var(--ivory);
	transform: translateY(-160%);
	transition: transform 0.2s;
}

.skip-link:focus {
	transform: none;
}

/* Layout ------------------------------------------------------------------ */

.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.container--estreito {
	max-width: calc(880px + var(--gutter) * 2);
}

.section {
	padding: var(--section) 0;
}

.section--tight {
	padding: calc(var(--section) * 0.55) 0;
}

.section--ivory {
	background: var(--ivory);
}

/* Cores de contexto: os componentes de texto leem estas variáveis com o padrão para fundo claro
   (--titulo-cor → --ink, --apoio-cor → --muted, --link-cor → --brand, --link-cor-hover → --brand-deep,
   --estrela-cor → --cinza-chapeu). Uma superfície escura redefine as variáveis, e o título da
   .secao-cabeca, o subtítulo, a .lead, o .link, o .link-arrow e as estrelas se ajustam juntos. */
.section--dark {
	--titulo-cor: var(--ivory);
	--apoio-cor: var(--muted-dark);
	--link-cor: var(--ivory);
	--link-cor-hover: var(--ivory);
	background: var(--ink);
	color: var(--ivory);
}

/* Foco sobre o grafite: a cor da marca pura fica abaixo de 3:1 contra --ink; --brand-light tem 4,5:1 */
.section--dark :focus-visible {
	outline-color: var(--brand-light);
}

/* Faixas vinho e vermelha das artes (ofertas, chamadas, base do login), com texto branco (10–11:1
   sobre o vinho). Destaques e estrelas em ouro: 5,9:1 sobre o vinho; sobre o vermelho da marca,
   4,1:1, o ouro só serve para título grande. O contorno de foco --brand some sobre elas e vira branco.
   Sobre .section--marca, o botão --primary se confunde com o fundo: use --ouro ou --ghost. */
.section--vinho,
.section--marca {
	--titulo-cor: #fff;
	--apoio-cor: rgba(255, 255, 255, 0.88);
	--link-cor: #fff;
	--link-cor-hover: #fff;
	--estrela-cor: var(--ouro);
	color: #fff;
}

.section--vinho {
	background: var(--vinho);
}

.section--marca {
	background: var(--brand);
}

.section--vinho :focus-visible,
.section--marca :focus-visible {
	outline-color: #fff;
}

.section--vinho :is(h1, h2, h3) em,
.section--marca :is(h1, h2) em {
	color: var(--ouro);
}

.section--marca h3 em {
	color: inherit;
}

/* Cartão branco dentro de uma faixa escura (o trilho de cartões das ofertas): volta às cores do fundo
   claro. "initial" anula a variável e o componente cai no próprio padrão. Outro bloco branco dentro
   da faixa usa .superficie-clara. */
:is(.section--dark, .section--vinho, .section--marca) :is(.produto, .superficie-clara) {
	--titulo-cor: initial;
	--apoio-cor: initial;
	--link-cor: initial;
	--link-cor-hover: initial;
	--estrela-cor: initial;
	color: var(--text);
}

:is(.section--dark, .section--vinho, .section--marca) :is(.produto, .superficie-clara) :focus-visible {
	outline-color: var(--brand);
}

:is(.section--dark, .section--vinho, .section--marca) :is(.produto, .superficie-clara) :is(h1, h2, h3) em {
	color: var(--brand);
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 32px;
	margin-bottom: clamp(28px, 4vw, 48px);
}

/* Cabeçalho de seção da vitrine (prateleiras, ofertas, marcas): título no letreiro das artes,
   subtítulo curto em Jost e o "Ver tudo" à direita (desce para baixo do título quando não cabe).
   <div class="secao-cabeca"><div><h2>…</h2><p>…</p></div><a class="secao-cabeca-link" href="…">Ver tudo <icone nome="arrow" /></a></div>
   O h2 aceita .estrelado (estrelas das artes dos dois lados). */
.secao-cabeca {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 4px 24px;
	margin-bottom: clamp(16px, 2.4vw, 28px);
}

.secao-cabeca h2,
.secao-cabeca-titulo {
	font-family: var(--letreiro);
	font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem);
	font-weight: 400;
	font-synthesis: none;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--titulo-cor, var(--ink));
}

.secao-cabeca p {
	margin-top: 6px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--apoio-cor, var(--muted));
}

.secao-cabeca-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-size: 15px;
	font-weight: 600;
	color: var(--link-cor, var(--brand));
	white-space: nowrap;
	transition: gap 0.2s var(--ease), color 0.2s;
}

.secao-cabeca-link:hover {
	gap: 10px;
	color: var(--link-cor-hover, var(--brand-deep));
}

/* Celular: como nas grandes lojas, o título à esquerda e o "Ver tudo" à direita na mesma linha, sempre no
   mesmo lugar, e o subtítulo embaixo numa linha só (o resto com "…"). O div do título vira contents para o
   subtítulo ocupar a largura toda. O link mantém 44 px de alvo sem crescer a linha (margem negativa), e o
   .secao-cabeca-link-extra ("as ofertas" de "Ver todas as ofertas") sai da tela, mas não do nome do link. */
@media (max-width: 640px) {
	.secao-cabeca {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 4px 12px;
		margin-bottom: 12px;
	}

	.secao-cabeca > div {
		display: contents;
	}

	.secao-cabeca h2,
	.secao-cabeca-titulo {
		font-size: 1.3rem;
	}

	.secao-cabeca p {
		grid-column: 1 / -1;
		margin-top: 0;
		overflow: hidden;
		font-size: 13.5px;
		line-height: 1.4;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.secao-cabeca-link {
		grid-row: 1;
		grid-column: 2;
		gap: 4px;
		margin-block: -8px;
		font-size: 14px;
	}

	.secao-cabeca-link .icon {
		width: 16px;
		height: 16px;
	}

	.secao-cabeca-link-extra {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* Sobre faixa vinho ou vermelha fora de .section--vinho/.section--marca: título e link brancos,
   destaque e estrelas em ouro (ouro/vinho 5,9:1; sobre o vermelho da marca o ouro só serve para
   texto grande) */
.secao-cabeca--inversa {
	--titulo-cor: #fff;
	--apoio-cor: rgba(255, 255, 255, 0.88);
	--link-cor: #fff;
	--link-cor-hover: #fff;
	--estrela-cor: var(--ouro);
}

.secao-cabeca--inversa h2 em {
	color: var(--ouro);
}

.secao-cabeca--inversa :focus-visible {
	outline-color: #fff;
}

/* Tipografia --------------------------------------------------------------- */

/* Sobretítulo: Jost 600 pequeno, com a estrela rústica das artes na cor da marca
   (.eyebrow--traco troca a estrela pelo traço). O cinza é um pouco mais escuro que --muted
   para manter o contraste AA também sobre o mármore. */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--muted) 70%, var(--ink));
}

.eyebrow::before {
	content: '';
	flex: none;
	width: 14px;
	height: 14px;
	background: var(--brand);
	-webkit-mask: url('../midia/estrela.webp') no-repeat center / contain;
	mask: url('../midia/estrela.webp') no-repeat center / contain;
}

.eyebrow--traco::before {
	width: 28px;
	height: 2px;
	-webkit-mask: none;
	mask: none;
}

.section--dark .eyebrow {
	color: var(--sand);
}

.section--dark .eyebrow::before {
	background: var(--brand-light);
}

.section--vinho .eyebrow,
.section--marca .eyebrow {
	color: rgba(255, 255, 255, 0.9);
}

.section--vinho .eyebrow::before,
.section--marca .eyebrow::before {
	background: var(--ouro);
}

/* Alto contraste: a estrela (máscara) sumiria pintada com a cor do fundo */
@media (forced-colors: active) {
	.eyebrow::before {
		display: none;
	}
}

/* Títulos de página (.title) e de seção (.title-sm) no letreiro das artes: 400, caixa-alta,
   espaçamento nunca negativo. Nome de produto e texto digitado pelo cliente não usam estas
   classes: ficam em Jost (o letreiro não foi feito para frases longas). */
.title,
.title-sm {
	font-family: var(--letreiro);
	font-weight: 400;
	font-synthesis: none;
	line-height: 1.02;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.title {
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem);
}

.title-sm {
	font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem);
}

/* Celular: o letreiro menor deixa o conteúdo subir (o título da seção no mesmo tamanho da .secao-cabeca) */
@media (max-width: 640px) {
	.title {
		font-size: 1.65rem;
	}

	.title-sm {
		font-size: 1.3rem;
	}
}

/* Destaque dos títulos sobre fundo escuro (o vermelho da marca não tem contraste ali) */
.section--dark h2 em {
	color: var(--brand-light);
}

/* Cor pelo contexto (--apoio-cor): --muted no claro, mais escura sobre o mármore (.fundo-marmore),
   clara sobre grafite, vinho e vermelho */
.lead {
	font-size: clamp(16px, 1.3vw, 18px);
	font-weight: 400;
	line-height: 1.55;
	color: var(--apoio-cor, var(--muted));
	max-width: 620px;
}

.rotulo {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Botões ------------------------------------------------------------------- */

/* Mesma linguagem do painel (.botao): cantos levemente arredondados, caixa normal, peso 600,
   44 px de altura (alvo de toque), ícone + texto. O foco usa o contorno global (2 px + afastamento). */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: var(--raio-sm);
	background: none;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.2;
	text-align: center;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s;
}

.btn .icon {
	transition: transform 0.3s var(--ease);
}

.btn:hover .icon-seta {
	transform: translateX(4px);
}

.btn--primary {
	background: var(--brand);
	color: #fff;
}

.btn--primary:hover {
	background: var(--brand-deep);
}

.btn--dark {
	background: var(--ink);
	color: #fff;
}

.btn--dark:hover {
	background: var(--ink-3);
}

/* Contornado: branco com borda, legível sobre qualquer fundo (claro, mármore, vinho ou grafite) */
.btn--ghost {
	background: #fff;
	border-color: var(--line-strong);
	color: var(--text);
}

.btn--ghost:hover {
	background: var(--ivory);
	border-color: var(--ink);
}

.btn--whats {
	background: var(--whats);
	color: #fff;
}

.btn--whats:hover {
	background: #0c5f31;
}

/* Chamada de oferta ("Ver ofertas"): ouro das etiquetas com texto --ink (9,7:1) */
.btn--ouro {
	background: var(--ouro);
	color: var(--ink);
}

.btn--ouro:hover {
	background: var(--ouro-escuro);
}

.btn--sm {
	gap: 6px;
	min-height: 36px;
	padding: 6px 14px;
	font-size: 14px;
}

/* No toque (celular, tablet), o pequeno volta aos 44 px de alvo mínimo: "Ver carrinho" da gaveta,
   "Calcular" e "Aplicar" do checkout */
@media (pointer: coarse) {
	.btn--sm {
		min-height: 44px;
	}
}

.btn--lg {
	gap: 10px;
	min-height: 52px;
	padding: 13px 28px;
	font-size: 16px;
}

.btn--block {
	width: 100%;
}

.btn[disabled],
.btn.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.btn.is-loading::after {
	content: '';
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: girar 0.8s linear infinite;
}

@keyframes girar {
	to {
		transform: rotate(360deg);
	}
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Links na cor da marca sobre fundo claro; sobre grafite, vinho ou vermelho a cor vem de --link-cor
   (ver as superfícies em Layout). Outro fundo escuro (topo, rodapé, menu do celular) define
   --link-cor e --link-cor-hover no próprio componente. */
.link {
	color: var(--link-cor, var(--brand));
	border-bottom: 1px solid currentColor;
	transition: color 0.2s;
}

.link:hover {
	color: var(--link-cor-hover, var(--brand-deep));
}

/* "Ver todos →", "Continuar comprando": link de ação em Jost 600 na cor da marca, sem caixa-alta */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-size: 15px;
	font-weight: 600;
	color: var(--link-cor, var(--brand));
	transition: gap 0.2s var(--ease), color 0.2s;
}

.link-arrow:hover {
	gap: 10px;
	color: var(--link-cor-hover, var(--brand-deep));
}

/* Cabeçalho ---------------------------------------------------------------- */

/* Topo em três níveis no desktop: a faixa vinho com os contatos e a barra de departamentos rolam com a
   página; só a linha principal (logo, busca, atendimento e carrinho) gruda no alto. No celular, a linha do
   menu/logo/carrinho e a linha da busca grudam juntas, e os departamentos viram chips roláveis.
   --header-h é a altura da parte que gruda: a subnav da listagem, a galeria e a caixa de compra do produto
   e os resumos do carrinho e do checkout grudam logo abaixo dela. */

/* Faixa superior ---- */
.faixa-topo {
	background: var(--vinho);
	color: #fff;
	font-size: 13px;
	line-height: 1.2;
}

.faixa-topo-conteudo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 34px;
}

.faixa-topo ul {
	display: flex;
	align-items: center;
	gap: 24px;
	min-width: 0;
}

.faixa-topo li,
.faixa-topo a {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	white-space: nowrap;
}

/* Endereço longo cadastrado no painel: corta com reticências em vez de empurrar os contatos */
.faixa-topo-info span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.faixa-topo .icon,
.faixa-topo .icon-fill {
	width: 15px;
	height: 15px;
	color: var(--ouro);
}

.faixa-topo a {
	min-height: 34px;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color 0.2s;
}

.faixa-topo a:hover {
	text-decoration-color: currentColor;
}

/* Foco sobre o vinho: contorno branco (o vermelho da marca some ali) */
.faixa-topo :focus-visible {
	outline-color: #fff;
	outline-offset: -2px;
}

/* Mensagem da faixa (painel → Identidade da loja → Vitrine): abre a faixa, em 600 e com a estrela das artes
   em ouro; o endereço e o horário vão para a direita, junto dos contatos. Longa demais para a largura, ela
   termina em reticências (o texto inteiro fica no title e no leitor de tela). */
.faixa-topo-mensagem {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-weight: 600;
}

.faixa-topo-mensagem::before {
	content: '';
	flex: none;
	width: 13px;
	height: 13px;
	background: var(--ouro);
	-webkit-mask: url('../midia/estrela.webp') no-repeat center / contain;
	mask: url('../midia/estrela.webp') no-repeat center / contain;
}

.faixa-topo-mensagem span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.faixa-topo-mensagem a .icon {
	flex: none;
	width: 14px;
	height: 14px;
}

.faixa-topo--mensagem .faixa-topo-info {
	margin-left: auto;
}

/* A mensagem tem a prioridade: sem espaço para tudo, o endereço sai antes (continua no rodapé) */
@media (max-width: 1279px) {
	.faixa-topo--mensagem .faixa-topo-endereco {
		display: none;
	}
}

@media (max-width: 991px) {
	.faixa-topo {
		display: none;
	}

	/* Celular: com mensagem, uma faixa fina acima do topo só com ela (até duas linhas, centralizada); os
	   contatos seguem no menu ☰, na barra inferior e no rodapé. Ela rola junto com a página. */
	.faixa-topo--mensagem {
		display: block;
	}

	.faixa-topo--mensagem .faixa-topo-info,
	.faixa-topo--mensagem .faixa-topo-contato {
		display: none;
	}

	.faixa-topo--mensagem .faixa-topo-conteudo {
		justify-content: center;
		height: auto;
		min-height: 36px;
	}

	.faixa-topo-mensagem {
		justify-content: center;
		padding: 7px 0;
		line-height: 1.3;
		text-align: center;
	}

	.faixa-topo-mensagem span {
		display: -webkit-box;
		white-space: normal;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	/* Com link, a faixa inteira é o alvo do toque */
	.faixa-topo-mensagem a {
		min-height: 36px;
		margin: -7px 0;
		white-space: normal;
	}
}

@media (forced-colors: active) {
	.faixa-topo-mensagem::before {
		display: none;
	}
}

/* Linha principal ---- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--header-h);
	/* Mármore das artes clareado: a textura aparece sem disputar com o logo e a busca */
	background:
		linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
		var(--marmore) url('../midia/marmore.webp') repeat;
	background-size: auto, 900px auto;
	color: var(--text);
	border-bottom: 1px solid var(--line);
	transition: box-shadow 0.25s var(--ease);
}

/* Sombra só depois que a linha principal gruda no alto (classe posta pelo loja.js) */
.site-header.is-rolado {
	box-shadow: var(--sombra-2);
}

/* Alto contraste: o mármore (imagem) continuaria claro sob as cores do sistema e apagaria o contorno de
   foco da busca e o texto; fica a cor de fundo do sistema */
@media (forced-colors: active) {
	.site-header {
		background: Canvas;
	}
}

.topo {
	height: 100%;
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.4vw, 36px);
}

/* O botão do menu só existe no celular (no desktop, a barra de departamentos faz esse papel) */
.topo .topo-menu {
	display: none;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: none;
}

/* Logo da identidade da loja: altura fixa e largura limitada, qualquer que seja a proporção enviada.
   Se a imagem não carregar, o texto alternativo (nome da loja) aparece no lugar. */
.brand-logo {
	width: auto;
	height: 48px;
	max-width: 240px;
	object-fit: contain;
	object-position: left center;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 48px;
}

/* Busca protagonista: campo branco com a borda da marca e o botão vermelho "Buscar" colado */
.header-busca {
	flex: 1;
	display: flex;
	max-width: 700px;
	height: 48px;
	margin: 0 auto;
	border: 2px solid var(--brand);
	border-radius: var(--raio-sm);
	background: #fff;
	box-shadow: var(--sombra-1);
	transition: box-shadow 0.2s var(--ease);
}

/* O campo não tem contorno próprio: a caixa inteira mostra o foco com o contorno padrão da loja (2 px da
   cor da marca, afastado da borda). Um halo em box-shadow seria fraco sobre o mármore e some no alto
   contraste (forced-colors), onde o outline ganha a cor do sistema. */
.header-busca:focus-within {
	outline: 2px solid var(--brand);
	outline-offset: 3px;
}

.header-busca input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0 16px;
	border: 0;
	border-radius: var(--raio-sm) 0 0 var(--raio-sm);
	background: none;
	color: var(--text);
	font-size: 16px;
}

.header-busca input:focus {
	outline: none;
}

.header-busca input::placeholder {
	color: var(--muted);
}

.header-busca-botao {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 22px;
	border: 0;
	border-radius: 0 3px 3px 0;
	background: var(--brand);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	transition: background-color 0.2s var(--ease);
}

.header-busca-botao:hover {
	background: var(--brand-deep);
}

.header-busca-botao .icon {
	width: 20px;
	height: 20px;
	stroke-width: 2;
}

/* Contorno branco por dentro do botão (por fora ele cairia sobre a borda vermelha da caixa) */
.header-busca-botao:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -5px;
}

.header-acoes {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: none;
}

/* "Atendimento" (WhatsApp com o número) e "Carrinho": ícone grande e rótulo, alvo de 48 px */
.topo-acao {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 4px 10px;
	border-radius: var(--raio-sm);
	color: var(--text);
	transition: background-color 0.2s;
}

.topo-acao:hover {
	background: rgba(255, 255, 255, 0.8);
}

.topo-acao .icon,
.topo-acao .icon-fill {
	width: 26px;
	height: 26px;
}

.topo-acao--atendimento .icon-fill {
	color: var(--whats);
}

.topo-acao-texto {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

/* Rótulo pequeno sobre o mármore: um pouco mais escuro que --muted para manter o contraste AA */
.topo-acao-texto span {
	font-size: 12.5px;
	color: color-mix(in srgb, var(--muted) 70%, var(--ink));
}

.topo-acao-texto strong,
.topo-acao-rotulo {
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	transition: color 0.2s;
}

.topo-acao-texto strong {
	font-variant-numeric: tabular-nums;
}

.topo-acao:hover strong,
.topo-acao:hover .topo-acao-rotulo {
	color: var(--brand);
}

/* O contador sai 9 px para a direita da sacola: vão maior para ele não encostar em "Carrinho" */
.topo-acao--carrinho {
	gap: 16px;
}

/* O ícone do carrinho vem depois do rótulo no HTML e é posto à esquerda aqui */
.topo-acao-icone {
	position: relative;
	order: -1;
	display: inline-grid;
	place-items: center;
}

.header-icone {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--raio-sm);
	background: none;
	color: var(--text);
	transition: background-color 0.2s;
}

.header-icone:hover {
	background: rgba(20, 20, 20, 0.06);
}

.header-icone .icon {
	width: 24px;
	height: 24px;
}

.contador {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 0 0 2px #fff;
}

.contador:empty,
.contador[data-quantidade='0'] {
	display: none;
}

.contador.pulsa {
	animation: pulsar 0.6s var(--ease);
}

@keyframes pulsar {
	40% {
		transform: scale(1.35);
	}
}

/* Modo checkout: só o logo e o selo "Compra segura" (nada de busca, departamentos ou atalhos) */
.modo-checkout {
	--header-h: 72px;
}

.header-simples {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--text);
}

.header-simples .icon {
	width: 18px;
	height: 18px;
	color: var(--ok);
	stroke-width: 2;
}

/* Sem espaço para o número do WhatsApp ao lado da busca: fica "Atendimento" (o número segue no nome
   acessível do link e na faixa superior) */
@media (max-width: 1180px) {
	.brand-logo {
		height: 40px;
		max-width: 200px;
		line-height: 40px;
	}

	.topo-acao-texto strong {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.topo-acao-texto span {
		font-size: 15px;
		font-weight: 600;
		color: var(--text);
	}

	.topo-acao:hover .topo-acao-texto span {
		color: var(--brand);
	}
}

/* Celular: linha 1 com menu, logo e carrinho; linha 2 com a busca inteira. As duas grudam juntas
   (56 + 44 + 11 de respiro + 1 de borda = 112 px). */
@media (max-width: 991px) {
	:root {
		--header-h: 112px;
	}

	.modo-checkout {
		--header-h: 64px;
	}

	.topo {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr) 44px;
		grid-template-rows: 56px 44px;
		grid-template-areas:
			'menu brand acoes'
			'busca busca busca';
		gap: 0 8px;
		padding-bottom: 11px;
	}

	.topo .topo-menu {
		display: inline-grid;
		grid-area: menu;
		margin-left: -10px;
	}

	.topo .brand {
		grid-area: brand;
		justify-self: center;
	}

	.brand-logo {
		height: 34px;
		max-width: 170px;
		line-height: 34px;
	}

	.header-busca {
		grid-area: busca;
		width: 100%;
		max-width: none;
		height: 44px;
		margin: 0;
	}

	.header-busca-botao {
		padding: 0 16px;
	}

	/* No celular o botão fica só com a lupa; "Buscar" continua como nome acessível */
	.header-busca-rotulo,
	.topo-acao-rotulo {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.header-acoes {
		grid-area: acoes;
		justify-self: end;
	}

	/* No celular o WhatsApp fica no menu ☰ e no rodapé */
	.topo-acao--atendimento {
		display: none;
	}

	.topo-acao--carrinho {
		justify-content: center;
		width: 44px;
		min-height: 44px;
		margin-right: -10px;
		padding: 0;
	}

	.topo-acao--carrinho:hover {
		background: rgba(20, 20, 20, 0.06);
	}

	.modo-checkout .topo {
		display: flex;
		padding-bottom: 0;
	}
}

/* Barra de departamentos ---- */
.departamentos {
	position: relative;
	z-index: 60;
	background: var(--brand);
	color: #fff;
}

.departamentos-barra {
	position: relative;
	display: flex;
	align-items: center;
	height: 44px;
}

.departamentos-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 14px;
	color: #fff;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	transition: background-color 0.2s var(--ease);
}

.departamentos-link .icon {
	width: 18px;
	height: 18px;
}

.departamentos-link:hover,
.departamentos-link[aria-current='page'] {
	background: var(--brand-deep);
}

/* Página atual: além do fundo mais escuro, um filete branco embaixo */
.departamentos-link[aria-current='page'] {
	box-shadow: inset 0 -3px 0 #fff;
}

/* Foco sobre o vermelho: contorno branco, por dentro (a lista rola e cortaria o contorno por fora) */
.departamentos :focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* "Todas as categorias": a porta do megamenu, destacada em vinho */
.departamentos-link--todas {
	padding: 0 16px;
	background: var(--vinho);
	font-weight: 600;
}

.departamentos-todas:hover .departamentos-link--todas,
.departamentos-todas:focus-within .departamentos-link--todas {
	background: var(--vinho-escuro);
}

.departamentos-link .departamentos-seta {
	width: 12px;
	height: 12px;
	transition: transform 0.25s var(--ease);
}

.has-mega:hover .departamentos-seta,
.has-mega:focus-within .departamentos-seta {
	transform: rotate(180deg);
}

/* "Ofertas do mês": pastilha ouro com texto --ink (9,7:1) */
.departamentos-link--ofertas {
	position: relative;
	height: 30px;
	margin: 0 8px 0 12px;
	padding: 0 14px 0 11px;
	border-radius: 999px;
	background: var(--ouro);
	color: var(--ink);
	font-weight: 600;
}

/* A pastilha tem 30 px de altura, mas o toque (tablet) pega a faixa inteira de 44 px */
.departamentos-link--ofertas::after {
	content: '';
	position: absolute;
	inset: -7px -4px;
}

.departamentos-link--ofertas:hover {
	background: var(--ouro-escuro);
}

.departamentos-link--ofertas[aria-current='page'] {
	background: var(--ouro);
	box-shadow: 0 0 0 2px #fff;
}

.departamentos-link--ofertas:focus-visible {
	outline-offset: 2px;
}

/* Categorias em linha, na ordem do painel, só as que cabem INTEIRAS (nunca um rótulo pela metade): a que
   não cabe quebra para uma segunda linha, cortada pela altura da faixa. O loja.js marca essas com
   .is-cortado, que as tira do Tab e do leitor de tela; todas continuam no megamenu "Todas as categorias",
   logo ao lado. Sem JS, o Tab ainda chega a elas (a lista rola até a linha de baixo). */
.departamentos-lista {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	height: 44px;
	overflow: hidden;
}

.departamentos-lista .is-cortado {
	visibility: hidden;
}

.departamentos-link--ajuda {
	border-left: 1px solid rgba(255, 255, 255, 0.24);
}

/* Megamenu: painel branco sob a barra, com as categorias em grade (miniatura, nome e contagem). Abre no
   :hover e no :focus-within (o Tab entra nele logo depois de "Todas as categorias"); o loja.js fecha
   com Esc (.is-fechado). O .has-mega não é posicionado: o painel se alinha à barra inteira. */
.mega {
	position: absolute;
	top: 100%;
	left: var(--gutter);
	right: var(--gutter);
	display: grid;
	gap: 12px;
	padding: 20px 24px 16px;
	background: #fff;
	color: var(--text);
	border-top: 3px solid var(--vinho);
	border-radius: 0 0 var(--raio) var(--raio);
	box-shadow: var(--sombra-3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.has-mega:hover .mega,
.has-mega:focus-within .mega {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.has-mega.is-fechado .mega {
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
}

.mega :focus-visible {
	outline-color: var(--brand);
	outline-offset: 2px;
}

.mega-grade {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px 16px;
}

.mega-grade a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px;
	border-radius: var(--raio-sm);
	transition: background-color 0.2s;
}

.mega-grade a:hover {
	background: var(--ivory);
}

.mega-thumb {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio-sm);
	transition: border-color 0.2s;
}

/* Categoria sem foto: a estrela das artes no lugar (o Razor emite o ornamento no else) */
.mega-thumb .ornamento--estrela {
	width: 55%;
	color: var(--sand);
}

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

.mega-grade a:hover .mega-thumb {
	border-color: var(--brand);
}

.mega-name {
	display: flex;
	flex-direction: column;
	min-width: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	transition: color 0.2s;
}

.mega-name small {
	font-size: 13px;
	font-weight: 400;
	color: var(--muted);
}

.mega-grade a:hover .mega-name {
	color: var(--brand);
}

.mega-todos {
	justify-self: start;
	padding: 0 8px;
}

@media (max-width: 1180px) {
	.mega-grade {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Celular: a barra inteira vira uma faixa de chips roláveis (sem megamenu: o menu ☰ lista as
   categorias). Na listagem ela sai, porque a página já tem os próprios chips de categoria. */
@media (max-width: 991px) {
	.departamentos--listagem {
		display: none;
	}

	/* "Todas as categorias" abriria o mesmo menu do ☰ que está logo acima, e sozinho ocupava metade da
	   faixa: sem ele, as categorias aparecem já na primeira tela */
	.departamentos-todas {
		display: none;
	}

	/* scroll-padding: o chip focado pelo Tab para fora da borda esmaecida */
	.departamentos-barra {
		gap: 6px;
		height: 48px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-padding-inline: 40px;
		scrollbar-width: none;
	}

	.departamentos-barra::-webkit-scrollbar {
		display: none;
	}

	.departamentos-barra.rola-fim {
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
	}

	.departamentos-barra.rola-inicio {
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 40px);
		mask-image: linear-gradient(90deg, transparent, #000 40px);
	}

	.departamentos-barra.rola-inicio.rola-fim {
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
		mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
	}

	.mega,
	.departamentos-link .departamentos-seta {
		display: none;
	}

	/* Aqui a barra inteira rola: a lista fica numa linha só, sem corte */
	.departamentos-lista {
		flex: none;
		flex-wrap: nowrap;
		gap: 6px;
		height: auto;
		overflow: visible;
	}

	.departamentos-lista .is-cortado {
		visibility: visible;
	}

	/* Chips contornados, sem clarear o fundo: o texto branco fica com o contraste da própria cor da marca
	   (o painel só aceita cor com 4,5:1 ou mais contra o branco), qualquer que seja a cor configurada.
	   Compactos como os das grandes lojas (34 px e 13 px), com o toque pegando 44 px de altura (::after). */
	.departamentos-link,
	.departamentos-link--ofertas {
		position: relative;
		gap: 6px;
		height: 34px;
		margin: 0;
		padding: 0 12px;
		border-radius: 999px;
		background: none;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
		font-size: 13px;
	}

	.departamentos-link--ofertas {
		padding-left: 10px;
	}

	.departamentos-link .icon {
		width: 16px;
		height: 16px;
	}

	.departamentos-link::after,
	.departamentos-link--ofertas::after {
		content: '';
		position: absolute;
		inset: -5px 0;
	}

	.departamentos-link:hover {
		background: rgba(0, 0, 0, 0.16);
	}

	.departamentos-link[aria-current='page'] {
		background: #fff;
		color: var(--brand);
		box-shadow: none;
	}

	.departamentos-link--todas {
		background: var(--vinho);
		box-shadow: none;
	}

	.departamentos-link--ofertas,
	.departamentos-link--ofertas[aria-current='page'] {
		background: var(--ouro);
		color: var(--ink);
		box-shadow: none;
	}

	/* O véu escuro do hover acima deixaria o texto --ink sobre fundo escuro */
	.departamentos-link--ofertas:hover {
		background: var(--ouro-escuro);
	}

	.departamentos-link--ajuda {
		border-left: 0;
	}

	.departamentos :focus-visible {
		outline-offset: 2px;
	}
}

/* Menu do celular */
/* Continua escuro, com o logo para fundo escuro: grafite com o mármore escuro das artes bem apagado e
   um filete da marca no alto */
.mobile-menu {
	--link-cor: #fff;
	--link-cor-hover: #fff;
	position: fixed;
	inset: 0;
	z-index: 180;
	display: flex;
	flex-direction: column;
	padding: 8px var(--gutter) calc(28px + env(safe-area-inset-bottom));
	background:
		linear-gradient(rgba(20, 20, 20, 0.6), rgba(20, 20, 20, 0.6)),
		var(--ink) url('../midia/marmore-escuro.webp') repeat;
	background-size: auto, 900px auto;
	border-top: 4px solid var(--brand);
	color: var(--ivory);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s var(--ease), visibility 0.3s;
}

.mobile-menu.is-open {
	opacity: 1;
	visibility: visible;
}

.mobile-menu-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
}

.mobile-menu .brand-logo {
	height: 34px;
	max-width: 170px;
	line-height: 34px;
}

.mobile-menu .header-icone {
	margin-right: -10px;
	color: var(--ivory);
}

.mobile-menu .header-icone:hover {
	background: rgba(255, 255, 255, 0.08);
}

.mobile-menu nav {
	margin: 4px 0 24px;
}

/* "Categorias" e "Ajuda" na linha fina do letreiro (300), como o "A LOJA DO" das artes */
.mobile-menu-titulo {
	margin: 20px 0 4px;
	font-size: 22px;
	color: var(--sand);
}

.mobile-menu nav li {
	border-bottom: 1px solid var(--line-dark);
}

.mobile-menu nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 52px;
	padding: 10px 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.25;
}

.mobile-menu nav a small {
	font-size: 13px;
	color: var(--muted-dark);
	font-variant-numeric: tabular-nums;
}

.mobile-menu nav .icon {
	width: 18px;
	height: 18px;
	color: var(--muted-dark);
}

/* Ofertas em ouro sobre o grafite (9,7:1) */
.mobile-menu .mobile-menu-ofertas {
	color: var(--ouro);
	font-weight: 600;
}

.mobile-menu-ofertas span {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.mobile-menu .mobile-menu-ofertas .icon {
	color: var(--ouro);
}

.mobile-contact {
	margin-top: auto;
	padding-top: 20px;
	display: grid;
	gap: 2px;
	font-size: 14.5px;
	color: var(--muted-dark);
}

.mobile-contact a,
.mobile-contact span {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
}

.mobile-contact .icon {
	color: var(--sand);
}

/* Foco sobre o grafite: contorno branco */
.mobile-menu :focus-visible {
	outline-color: #fff;
}

/* Barra inferior do celular */
/* Branca, com ícone e rótulo; a página atual em --brand com filete no alto e o carrinho como botão
   redondo elevado ao centro, na cor da marca, com o contador em ouro */
.tabbar {
	display: none;
}

@media (max-width: 991px) {
	:root {
		--tabbar-h: calc(62px + env(safe-area-inset-bottom));
	}

	body {
		padding-bottom: var(--tabbar-h);
	}

	.modo-checkout {
		padding-bottom: 0;
	}

	.tabbar {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 95;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		height: var(--tabbar-h);
		padding: 0 4px env(safe-area-inset-bottom);
		background: #fff;
		border-top: 1px solid var(--line);
		box-shadow: 0 -6px 20px rgba(20, 20, 20, 0.07);
	}

	.tabbar a,
	.tabbar button {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-width: 0;
		padding: 6px 2px;
		border: 0;
		background: none;
		color: color-mix(in srgb, var(--muted) 80%, var(--ink));
		font-size: 11.5px;
		font-weight: 500;
		line-height: 1.2;
	}

	.tabbar .icon {
		width: 24px;
		height: 24px;
	}

	.tabbar [aria-current='page'] {
		color: var(--brand);
		font-weight: 600;
	}

	.tabbar [aria-current='page']::before {
		content: '';
		position: absolute;
		top: 0;
		left: 24%;
		right: 24%;
		height: 3px;
		border-radius: 0 0 3px 3px;
		background: var(--brand);
	}

	.tabbar :focus-visible {
		outline-offset: -3px;
	}

	.tabbar .contador {
		top: 3px;
		right: calc(50% - 24px);
	}

	/* O rótulo fica no cinza dos outros (em vermelho, pareceria a página atual); só a bolha leva a cor da
	   marca. A bolha já marca o carrinho: sem o filete da página atual por cima dela */
	.tabbar .tabbar-cta::before {
		display: none;
	}

	.tabbar-cta-bola {
		display: grid;
		place-items: center;
		width: 56px;
		height: 56px;
		margin-top: -30px;
		border: 4px solid #fff;
		border-radius: 50%;
		background: var(--brand);
		color: #fff;
		box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 35%, transparent);
		transition: background-color 0.2s var(--ease);
	}

	.tabbar-cta:hover .tabbar-cta-bola {
		background: var(--brand-deep);
	}

	.tabbar-cta-bola .icon {
		width: 26px;
		height: 26px;
		stroke-width: 1.8;
	}

	/* Sobre a bolha vermelha o contador vermelho sumiria: ouro com texto --ink (9,7:1), no canto dela */
	.tabbar .tabbar-cta .contador {
		top: -24px;
		right: calc(50% - 30px);
		background: var(--ouro);
		color: var(--ink);
	}

	.modo-checkout .tabbar {
		display: none;
	}
}

/* Abertura da loja ----------------------------------------------------------- */

/* Banner em mármore, como as artes: à esquerda o sobretítulo, o letreiro do slogan, o título em Jost, o
   texto de apoio e as chamadas; à direita a foto da loja numa moldura branca inclinada, com o mascote à
   frente. O mascote tem a base cortada reta no cinto: encosta no fim do banner, e a onda vinho da faixa de
   benefícios (logo depois, por cima) esconde o corte. --onda-hero é a altura dessa onda (a mesma da faixa). */
.hero-loja {
	--onda-hero: clamp(18px, 2.6vw, 38px);
	/* Largura do mascote; a altura é 664/560 dela */
	--mascote-l: clamp(250px, 26vw, 350px);
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.hero-loja-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(16px, 3vw, 48px);
	min-height: clamp(500px, 42vw, 600px);
}

.hero-loja-texto {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(28px, 3.2vw, 44px) 0 calc(var(--onda-hero) + clamp(24px, 3vw, 40px));
}

.hero-loja .eyebrow {
	margin-bottom: clamp(12px, 1.4vw, 18px);
}

/* Letreiro do slogan: chapéu de couro, a chamada fina na cor da marca ("A LOJA DO"), a palavra forte em
   preto e a última em vinho entre estrelas. As linhas ficam centradas entre si, como o carimbo das artes,
   e o bloco alinha com o texto. O tamanho da palavra forte (o font-size do bloco) dita o resto, em em. */
.hero-letreiro {
	--chapeu-largura: 1.2em;
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	margin-bottom: clamp(16px, 2vw, 24px);
	font-size: clamp(40px, 1.5rem + 3.4vw, 78px);
	text-align: center;
	overflow-wrap: anywhere;
}

.hero-letreiro.com-chapeu::before {
	margin-bottom: 0.14em;
}

.hero-letreiro > span:not(.ornamento) {
	display: block;
	max-width: 100%;
	line-height: 0.95;
}

.hero-letreiro-chamada {
	margin-bottom: 0.2em;
	font-size: 0.42em;
	color: var(--brand);
}

.hero-letreiro-forte {
	color: var(--ink);
}

.hero-letreiro-final {
	margin-top: 0.1em;
	font-size: 0.72em;
	color: var(--vinho);
}

/* Sol em espiral das artes no alto do letreiro, ao lado do chapéu (só decoração) */
.hero-sol {
	position: absolute;
	top: -0.1em;
	left: calc(100% + 0.2em);
	width: 0.95em;
}

/* Título da loja (TituloDestaque) em Jost, abaixo do letreiro; a última palavra fica na cor da marca */
.hero-titulo {
	max-width: 18em;
	margin-bottom: 12px;
	font-family: var(--sans);
	font-size: clamp(26px, 1.1rem + 1.3vw, 40px);
	font-weight: 600;
	line-height: 1.15;
	color: var(--ink);
	text-wrap: balance;
}

.hero-loja .lead {
	max-width: 34em;
	margin-bottom: clamp(20px, 2.4vw, 28px);
}

.hero-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hero-loja-media {
	position: relative;
	min-height: 420px;
}

/* Foto da loja (a do painel, de qualquer proporção): moldura branca levemente inclinada; a imagem preenche
   a moldura em 16:10 com object-fit, sem distorcer. Presa pela base à altura do mascote: o chapéu e o rosto
   dele passam sempre à frente do canto da foto, seja qual for a altura do banner. */
.hero-foto {
	position: absolute;
	bottom: calc(var(--mascote-l) * 0.73);
	left: 0;
	width: min(80%, 440px);
	padding: clamp(6px, 0.7vw, 10px);
	background: #fff;
	border-radius: var(--raio-lg);
	box-shadow: var(--sombra-3);
	transform: rotate(-2.5deg);
}

.hero-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--raio);
	background: var(--ivory);
}

/* Mascote à frente da foto, com a base no fim do banner (a onda cobre o corte do cinto) */
.hero-mascote {
	position: absolute;
	right: clamp(-48px, -3vw, 0px);
	bottom: 0;
	z-index: 1;
	width: var(--mascote-l);
	height: auto;
	filter: drop-shadow(0 12px 22px rgba(20, 20, 20, 0.2));
}

/* Revoada acima do chapéu do mascote e xique-xique na base, com o lado cortado atrás do mascote */
.hero-passaros {
	position: absolute;
	top: clamp(16px, 2.6vw, 40px);
	right: clamp(0px, 1.4vw, 20px);
	width: clamp(56px, 6vw, 88px);
}

.hero-vegetacao {
	position: absolute;
	left: 6%;
	bottom: 0;
	width: clamp(140px, 16vw, 230px);
}

/* Notebook pequeno: as três chamadas cabem numa linha no tamanho normal */
@media (max-width: 1199px) {
	.hero-acoes .btn--lg {
		gap: 8px;
		min-height: 48px;
		padding: 10px 18px;
		font-size: 15px;
	}
}

/* Celular e tablet: o texto primeiro e, embaixo, a foto como faixa com o mascote ao lado, os dois de pé
   sobre a onda. Tudo compacto para os benefícios e as categorias aparecerem cedo. */
@media (max-width: 991px) {
	.hero-loja-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		min-height: 0;
	}

	.hero-loja-texto {
		padding: 20px 0 16px;
	}

	.hero-loja-media {
		min-height: 0;
		height: calc(clamp(150px, 36vw, 280px) + var(--onda-hero));
	}

	.hero-foto {
		top: 6px;
		bottom: auto;
		width: min(60%, 400px);
	}

	.hero-mascote {
		right: 0;
		width: clamp(124px, 28vw, 220px);
	}

	.hero-passaros {
		top: 4px;
		right: clamp(130px, 30vw, 240px);
		width: clamp(44px, 7vw, 64px);
	}

	.hero-vegetacao {
		display: none;
	}
}

@media (max-width: 640px) {
	.hero-loja .eyebrow {
		margin-bottom: 10px;
		font-size: 12px;
	}

	.hero-letreiro {
		margin-bottom: 14px;
	}

	.hero-titulo {
		margin-bottom: 8px;
		font-size: 24px;
	}

	.hero-loja .lead {
		margin-bottom: 16px;
		font-size: 15px;
		line-height: 1.5;
	}

	/* Duas chamadas lado a lado. Com ofertas, o orçamento sai daqui: o WhatsApp está no meio da barra
	   inferior e no fim da página */
	.hero-acoes {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		width: 100%;
	}

	.hero-acoes .btn {
		min-height: 48px;
		padding: 10px 12px;
		font-size: 15px;
	}

	.hero-acoes:has(.btn--ouro) .hero-orcamento {
		display: none;
	}

	.hero-passaros {
		display: none;
	}
}

/* Telas bem estreitas (320 px): sem a seta, "Ver produtos" cabe numa linha */
@media (max-width: 374px) {
	.hero-acoes .icon-seta {
		display: none;
	}
}

/* Banner das campanhas ---- */
/* No lugar da abertura quando há campanha no ar: as artes do painel, já recortadas (1920 x 600 no computador e
   no tablet; quadradas no celular, quando a campanha tem a versão dela), numa moldura de cantos arredondados
   sobre o mármore. A lista rola na horizontal com scroll-snap (o dedo, a barra e o Tab funcionam sem
   JavaScript); o loja.js põe as setas nas laterais da arte, a pausa e os pontos logo abaixo dela (as artes da
   loja vão até a borda: nada fica por cima delas), e faz o banner passar sozinho. A onda vinho da faixa de
   benefícios sobe por cima do fim do mármore: o respiro de baixo leva a altura dela. */
.banner-campanhas {
	--onda-banner: clamp(18px, 2.6vw, 38px);
	padding: clamp(14px, 1.8vw, 24px) 0 calc(var(--onda-banner) + clamp(14px, 1.8vw, 24px));
}

/* Os controles vêm antes da lista no HTML (no Tab, a pausa antes das artes) e aparecem depois dela */
.banner {
	--controles-altura: 36px;
	position: relative;
	display: flex;
	flex-direction: column;
}

.banner-slides {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	background: var(--ivory);
	border-radius: var(--raio-lg);
	box-shadow: var(--sombra-3);
}

.banner-slides::-webkit-scrollbar {
	display: none;
}

.banner-slide {
	min-width: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.banner-arte {
	display: block;
	aspect-ratio: 1920 / 600;
}

.banner-arte picture,
.banner-arte img {
	display: block;
	width: 100%;
	height: 100%;
}

.banner-arte img {
	object-fit: cover;
}

/* O anel de foco fica por dentro (a lista corta o que passa da borda), escuro com um filete branco: aparece
   sobre qualquer arte */
.banner-arte:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: -3px;
	box-shadow: inset 0 0 0 6px #fff;
}

/* Setas nas laterais da arte, brancas como as dos trilhos, no meio da altura dela (sem a linha dos controles) */
.banner-seta {
	position: absolute;
	top: calc((100% - var(--controles-altura)) / 2 - 22px);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: #fff;
	color: var(--ink);
	box-shadow: var(--sombra-2);
	transition: background-color 0.2s, color 0.2s;
}

.banner-seta--anterior {
	left: 14px;
}

.banner-seta--proxima {
	right: 14px;
}

.banner-seta:hover {
	background: var(--ink);
	color: #fff;
}

.banner-seta .icon {
	width: 22px;
	height: 22px;
	stroke-width: 2;
}

/* Pausa e pontos numa linha logo abaixo da arte, sobre o mármore */
.banner-controles {
	order: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	height: var(--controles-altura);
	padding-top: 8px;
}

.banner-pausa,
.banner-ponto {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--ink);
}

.banner-pausa:hover {
	background: rgba(20, 20, 20, 0.08);
}

.banner-pausa .icon {
	width: 16px;
	height: 16px;
	fill: currentColor;
	stroke-width: 2.4;
}

/* O ponto é o miolo do botão (o alvo continua com 28 px); o da campanha na tela vira um traço na cor da
   marca. O cinza dos outros tem 3:1 sobre o mármore (componente de interface) */
.banner-ponto::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ink) 55%, transparent);
	transition: width 0.25s var(--ease), background-color 0.25s;
}

.banner-ponto[aria-current='true'] {
	width: 36px;
}

.banner-ponto[aria-current='true']::before {
	width: 22px;
	background: var(--brand);
}

.banner-pausa:focus-visible,
.banner-ponto:focus-visible {
	outline-offset: -2px;
}

/* Toque: o dedo já passa as artes; as setas só cobririam a arte */
@media (hover: none), (max-width: 640px) {
	.banner-seta {
		display: none;
	}
}

@media (max-width: 640px) {
	.banner-slides {
		border-radius: var(--raio);
		box-shadow: var(--sombra-2);
	}

	/* Com arte de celular em alguma campanha, o quadro fica quadrado; a campanha sem ela mostra o banner
	   inteiro, reduzido, no meio do mármore */
	.banner--celular .banner-arte {
		aspect-ratio: 1;
	}

	.banner-slide--sem-celular .banner-arte {
		background: var(--marmore) url('../midia/marmore.webp') repeat;
		background-size: 600px auto;
	}

	.banner-slide--sem-celular .banner-arte img {
		object-fit: contain;
	}
}

@media (prefers-reduced-motion: reduce) {
	.banner-ponto::before {
		transition: none;
	}
}

@media (forced-colors: active) {
	.banner-ponto::before {
		background: CanvasText;
	}

	.banner-ponto[aria-current='true']::before {
		background: Highlight;
	}
}

/* Cabeçalho das páginas internas */
/* Compacto e claro (mármore das artes clareado): trilha, título no letreiro com o <em> na cor da marca e
   uma linha de apoio. Baixo de propósito (título de ~34 px no desktop e 22 px no celular, pouca margem):
   o conteúdo da página aparece sem rolar.
   Texto digitado pelo cliente (o termo buscado) vai num <span class="titulo-termo">, em Jost e sem
   caixa-alta (ver Barra de categorias e ferramentas): o letreiro é só para os títulos da loja. */
.page-head {
	--apoio-cor: color-mix(in srgb, var(--muted) 70%, var(--ink));
	position: relative;
	padding: clamp(10px, 1.3vw, 18px) 0 clamp(12px, 1.4vw, 20px);
	background:
		linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)),
		var(--marmore) url('../midia/marmore.webp') repeat;
	background-size: auto, 900px auto;
	border-bottom: 1px solid var(--line);
	color: var(--text);
}

/* Revoada das artes no canto direito do conteúdo (só decoração, e só onde sobra espaço). Presa ao
   container interno, e não à faixa, para acompanhar a largura real: num .container--estreito ela fica
   ao lado do título, e não solta na borda da tela. */
.page-head > .container {
	position: relative;
}

.page-head > .container::after {
	content: '';
	position: absolute;
	top: -2px;
	right: var(--gutter);
	width: clamp(44px, 4vw, 60px);
	aspect-ratio: 469 / 333;
	background: var(--vinho);
	-webkit-mask: url('../midia/passaros.webp') no-repeat center / contain;
	mask: url('../midia/passaros.webp') no-repeat center / contain;
	pointer-events: none;
}

.page-head .title {
	margin-bottom: 2px;
	padding-right: clamp(0px, 6vw, 80px);
	font-size: clamp(1.5rem, 0.95rem + 1.3vw, 2.15rem);
	color: var(--ink);
}

.page-head .lead {
	max-width: 720px;
	font-size: 15px;
	line-height: 1.5;
}

/* A primeira seção depois do cabeçalho começa perto dele (o respiro grande é entre seções da vitrine) */
.page-head + .section {
	padding-top: var(--respiro-topo);
}

/* Trilha em 13 px, sem caixa-alta, com o cinza escurecido para o contraste AA sobre o mármore */
.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 8px;
	margin-bottom: 4px;
	font-size: 13px;
	line-height: 1.4;
	color: color-mix(in srgb, var(--muted) 70%, var(--ink));
}

.breadcrumb li {
	display: inline-flex;
	align-items: center;
}

.breadcrumb li + li::before {
	content: '›';
	margin-right: 8px;
	font-size: 15px;
	color: var(--muted);
}

.breadcrumb a {
	display: inline-block;
	padding: 4px 0;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: color 0.2s, text-decoration-color 0.2s;
}

.breadcrumb a:hover {
	color: var(--brand);
	text-decoration-color: currentColor;
}

.breadcrumb [aria-current='page'] {
	color: var(--text);
	font-weight: 500;
}

/* No toque, o link da trilha ganha 44 px de alvo (18 px de linha + 13 + 13) sem crescer o cabeçalho: a
   margem negativa devolve o espaço extra */
@media (max-width: 991px), (pointer: coarse) {
	.breadcrumb a {
		padding: 13px 0;
		margin: -9px 0;
	}
}

@media (max-width: 767px) {
	.page-head > .container::after {
		display: none;
	}

	.page-head .title {
		padding-right: 0;
	}
}

@media (max-width: 640px) {
	.page-head {
		padding: 8px 0 12px;
	}

	.breadcrumb {
		margin-bottom: 2px;
	}

	.page-head .title {
		font-size: 1.375rem;
	}

	.page-head .lead {
		font-size: 14px;
		line-height: 1.45;
	}
}

@media (forced-colors: active) {
	.page-head > .container::after {
		display: none;
	}
}

/* Categorias (vitrine) ------------------------------------------------------ */

/* "Navegue por categoria": atalhos no losango cinza do logo, com a foto da categoria dentro, o nome e a
   contagem embaixo. Uma linha só, que divide a largura entre as categorias; se não couber (tablet, celular
   ou muitas categorias), rola na horizontal com o dedo, a roda ou o Tab. Vem depois das ofertas e dos
   destaques, com o respiro das prateleiras. */
.vitrine-categorias {
	padding: clamp(32px, 4vw, 52px) 0;
}

.atalhos-categorias {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	/* Respiro para a sombra e o contorno de foco (o overflow corta o que passa) */
	padding: 6px 4px 10px;
	margin: -6px -4px -10px;
	scrollbar-width: thin;
	scrollbar-color: var(--line-strong) transparent;
}

.atalhos-categorias > li {
	flex: 1 0 104px;
	scroll-snap-align: start;
}

.atalho-categoria {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	height: 100%;
	padding: 4px 4px 8px;
	border-radius: var(--raio);
	text-align: center;
	color: var(--text);
}

/* Contorno por dentro: por fora ele seria cortado pela rolagem da linha */
.atalho-categoria:focus-visible {
	outline-offset: -2px;
}

.atalho-categoria-losango {
	position: relative;
	display: grid;
	place-items: center;
	width: min(100%, 128px);
	aspect-ratio: 1;
	margin-bottom: 8px;
}

/* O losango do logo: um quadrado girado 45°, branco e com o contorno cinza, de ponta a ponta do espaço
   (lado = 70,7% da diagonal). A foto fica por cima, sem girar, e o branco dela some no multiply. */
.atalho-categoria-losango::before {
	content: '';
	position: absolute;
	inset: 14.64%;
	border: 2px solid var(--sand);
	border-radius: 8px;
	background: #fff;
	box-shadow: var(--sombra-1);
	transform: rotate(45deg);
	transition: border-color 0.2s, box-shadow 0.3s var(--ease);
}

.atalho-categoria-losango img {
	position: absolute;
	inset: 19%;
	width: 62%;
	height: 62%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.4s var(--ease);
}

/* Categoria sem foto: a estrela das artes no meio do losango */
.atalho-categoria-losango .ornamento {
	position: relative;
	width: 32%;
}

.atalho-categoria:hover .atalho-categoria-losango::before {
	border-color: var(--brand);
	box-shadow: var(--sombra-2);
}

.atalho-categoria:hover .atalho-categoria-losango img {
	transform: scale(1.08);
}

.atalho-categoria-nome {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ink);
	transition: color 0.2s;
}

.atalho-categoria:hover .atalho-categoria-nome {
	color: var(--brand);
}

.atalho-categoria-qtd {
	font-size: 13px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	.atalho-categoria-losango img {
		transition: none;
	}

	.atalho-categoria:hover .atalho-categoria-losango img {
		transform: none;
	}
}

/* Alto contraste: o losango (pseudo com fundo) perderia o contorno; volta a ser uma borda do sistema */
@media (forced-colors: active) {
	.atalho-categoria-losango::before {
		border-color: CanvasText;
	}
}

@media (max-width: 640px) {
	/* A linha vai de borda a borda da tela; o primeiro atalho alinha com o texto da página */
	.atalhos-categorias {
		gap: 4px;
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: calc(var(--gutter) - 4px);
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	.atalhos-categorias::-webkit-scrollbar {
		display: none;
	}

	/* Quatro atalhos e meio por tela: o pedaço do quinto avisa que a linha rola */
	.atalhos-categorias > li {
		flex: 0 0 80px;
	}

	.atalho-categoria-losango {
		margin-bottom: 4px;
	}

	.atalho-categoria-nome {
		font-size: 12.5px;
	}

	.atalho-categoria-qtd {
		font-size: 11.5px;
	}
}

/* Vantagens */
/* A antiga faixa grafite "Por que comprar aqui" deu lugar à Faixa de benefícios, logo abaixo do banner
   (ver a seção própria): os mesmos textos condicionais, sem repetir nada na página. */

/* Faixa de chamada: "Monte o projeto completo" no mármore, que emenda na faixa sertão do rodapé (o
   mandacaru, a revoada e a onda vinho ficam lá, por isso nada de filete nem de cacto aqui). Cartão branco
   com o mascote de busto apoiado na borda de baixo, o texto e o orçamento pelo WhatsApp. */
.cta-band {
	padding: clamp(64px, 7vw, 96px) 0 clamp(8px, 1.6vw, 20px);
	/* O ladrilho do mármore termina rente ao fim da faixa: a faixa sertão começa um ladrilho novo e o
	   desenho continua sem emenda */
	background-position: left bottom;
}

.cta-cartao {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: clamp(20px, 3vw, 44px);
	padding: 0 clamp(20px, 3vw, 44px) 0 clamp(16px, 2.4vw, 36px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio-lg);
	box-shadow: var(--sombra-2);
}

/* O busto passa um pouco do alto do cartão e encosta na borda de baixo (a base é reta) */
.cta-mascote {
	align-self: end;
	width: clamp(120px, 12vw, 176px);
	height: auto;
	margin-top: calc(clamp(28px, 3vw, 44px) * -1);
}

.cta-texto {
	padding: clamp(24px, 3vw, 36px) 0;
}

.cta-texto p {
	max-width: 560px;
	margin-top: 10px;
	color: var(--muted);
}

.cta-acoes {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
}

@media (max-width: 767px) {
	.cta-cartao {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			'texto texto'
			'acoes mascote';
		column-gap: 8px;
		padding: 0 0 0 20px;
	}

	.cta-texto {
		grid-area: texto;
		padding: 24px 20px 14px 0;
	}

	.cta-acoes {
		grid-area: acoes;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		align-self: end;
		padding-bottom: 20px;
	}

	.cta-acoes .btn {
		padding-inline: 16px;
	}

	.cta-mascote {
		grid-area: mascote;
		width: 104px;
		margin: 0 10px 0 0;
	}
}

/* Celular: aqui o busto não passa do alto do cartão, então o respiro de cima não precisa ser o dele */
@media (max-width: 640px) {
	.cta-band {
		padding-top: 32px;
	}

	.cta-texto p {
		margin-top: 6px;
		font-size: 14px;
		line-height: 1.5;
	}
}

/* Faixa de benefícios ---- */
/* Fecha o banner: a onda vinho sobe por cima da base do mascote, e o cartão branco com os benefícios fica
   meio sobre a faixa vinho, meio sobre a página, como os selos de confiança das grandes lojas. Ícone em
   círculo na cor da marca, título curto e uma linha. No celular, 2 × 2 só com os títulos. */
.beneficios {
	--onda-altura: clamp(18px, 2.6vw, 38px);
	--faixa-vinho: 54px;
	position: relative;
	z-index: 1;
	padding-top: 14px;
	background: linear-gradient(var(--vinho) var(--faixa-vinho), transparent var(--faixa-vinho));
}

.beneficios-lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio-lg);
	box-shadow: var(--sombra-2);
}

.beneficio {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	padding: 18px clamp(16px, 1.8vw, 24px);
}

.beneficio + .beneficio {
	border-left: 1px solid var(--line);
}

.beneficio-icone {
	display: grid;
	place-items: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
}

.beneficio-icone .icon,
.beneficio-icone .icon-fill {
	width: 24px;
	height: 24px;
}

.beneficio-texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.beneficio-texto strong {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}

.beneficio-texto span {
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--muted);
}

@media (max-width: 991px) {
	.beneficios-lista {
		grid-template-columns: 1fr 1fr;
	}

	.beneficio:nth-child(odd) {
		border-left: 0;
	}

	.beneficio:nth-child(n + 3) {
		border-top: 1px solid var(--line);
	}

	/* Sem retirada ficam 3: o último ocupa a linha inteira */
	.beneficio:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.beneficios {
		--faixa-vinho: 44px;
		padding-top: 10px;
	}

	.beneficio {
		gap: 8px;
		padding: 10px;
	}

	.beneficio-icone {
		width: 32px;
		height: 32px;
	}

	.beneficio-icone .icon,
	.beneficio-icone .icon-fill {
		width: 17px;
		height: 17px;
	}

	.beneficio-texto strong {
		font-size: 13px;
		line-height: 1.25;
	}

	/* A linha de apoio continua para o leitor de tela */
	.beneficio-texto span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* Ofertas do mês ---- */
/* Faixa vinho com o selo 3D das artes, o título no letreiro com as estrelas em ouro e o trilho de cartões
   (os cartões voltam às cores claras sozinhos, ver .section--vinho em Layout). Só existe com oferta à venda. */
.vitrine-ofertas {
	padding: clamp(36px, 4.4vw, 60px) 0 clamp(40px, 5vw, 64px);
}

.ofertas-cabeca {
	display: flex;
	align-items: center;
	gap: 8px clamp(16px, 2.4vw, 32px);
	margin-bottom: clamp(18px, 2.2vw, 28px);
}

.ofertas-selo {
	flex: none;
	width: clamp(150px, 18vw, 270px);
	height: auto;
	margin: -10px 0 -16px;
	filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.35));
}

.ofertas-cabeca .secao-cabeca {
	flex: 1;
	min-width: 0;
	margin-bottom: 0;
}

@media (max-width: 640px) {
	.ofertas-cabeca {
		flex-wrap: wrap;
	}

	.vitrine-ofertas {
		padding: 24px 0 28px;
	}

	.ofertas-cabeca {
		margin-bottom: 12px;
	}

	.ofertas-selo {
		width: 116px;
		margin: -6px 0 -2px -4px;
	}

	.ofertas-cabeca .secao-cabeca {
		flex-basis: 100%;
	}
}

/* Prateleiras por categoria ---- */
/* Destaques da loja e uma prateleira por categoria: cabeçalho no letreiro, "Ver tudo" e o trilho de
   cartões. Seções compactas e separadas por um fio, para a página não virar uma sequência de vãos. */
.vitrine-trilho {
	padding: clamp(32px, 4vw, 52px) 0;
}

.vitrine-trilho + .vitrine-trilho,
.vitrine-trilho + .vitrine-categorias,
.vitrine-categorias + .vitrine-trilho,
.vitrine-trilho + .vitrine-marcas {
	border-top: 1px solid var(--line);
}

/* Os trilhos fora da home ("Veja também" do produto e os destaques do carrinho vazio) seguem as prateleiras:
   o mesmo fundo claro da página, o mesmo respiro e o fio em cima. O mármore fica para o banner, a chamada
   final e a faixa do rodapé. */
.relacionados,
.carrinho-sugestoes {
	padding: clamp(32px, 4vw, 52px) 0;
	border-top: 1px solid var(--line);
}

/* A descrição da categoria fica em até duas linhas (a completa está na página da categoria) */
.vitrine-prateleira .secao-cabeca p {
	display: -webkit-box;
	max-width: 70ch;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* Celular: seções mais juntas (o fio entre elas já separa), para caber mais prateleira por tela; a
   descrição da categoria cabe numa linha só, como os outros subtítulos (ver .secao-cabeca) */
@media (max-width: 640px) {
	.vitrine-trilho,
	.vitrine-categorias,
	.vitrine-marcas,
	.relacionados,
	.carrinho-sugestoes {
		padding: 24px 0;
	}

	.vitrine-prateleira .secao-cabeca p {
		display: block;
		max-width: none;
	}
}

/* Marcas ---- */
/* Chips com o nome e a contagem, das marcas com mais produtos às demais; cada um abre a listagem daquela
   marca. No celular, duas linhas que rolam na horizontal (23 marcas em pilha seriam uma parede). No fundo
   da página, como as prateleiras (com o fio em cima): um cinza a mais entre elas e o mármore da chamada
   final faria três tons empilhados. */
.vitrine-marcas {
	padding: clamp(32px, 4vw, 52px) 0;
}

.marcas-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* position: o "produto(s)" só para leitor de tela (.sr-only, absoluto) fica preso ao chip; sem isso, na
   linha que rola do celular ele escapava do recorte e alargava a página */
.marca-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 6px 8px 6px 18px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: #fff;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
	transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.marca-chip:hover {
	border-color: var(--brand);
	color: var(--brand);
	box-shadow: var(--sombra-1);
}

/* Contagem numa pastilha cinza (texto 7:1 sobre ela) */
.marca-chip-qtd {
	display: inline-grid;
	place-items: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--ivory);
	font-size: 13px;
	font-weight: 600;
	color: color-mix(in srgb, var(--muted) 70%, var(--ink));
	font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
	.marcas-lista {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(2, auto);
		justify-content: start;
		gap: 8px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		margin-inline: calc(var(--gutter) * -1);
		padding: 6px var(--gutter) 8px;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	.marcas-lista::-webkit-scrollbar {
		display: none;
	}

	/* Chips da mesma coluna com a mesma largura: as duas linhas ficam alinhadas */
	.marcas-lista li {
		display: flex;
	}

	/* Chip de 38 px, com o toque pegando 44 px (::after); a contagem numa pastilha menor */
	.marca-chip {
		flex: 1;
		justify-content: space-between;
		gap: 8px;
		min-height: 38px;
		padding: 4px 6px 4px 14px;
		font-size: 13.5px;
	}

	.marca-chip::after {
		content: '';
		position: absolute;
		inset: -3px 0;
	}

	.marca-chip-qtd {
		min-width: 26px;
		height: 26px;
		padding: 0 6px;
		font-size: 12px;
	}
}

/* Barra de categorias e ferramentas ---------------------------------------- */

/* Chips de categorias da listagem: só no celular e no tablet (no desktop a coluna de filtros já lista as
   categorias). Rolam na horizontal sem barra; a atual fica preenchida na cor da marca. */
.subnav {
	display: none;
	background: #fff;
	border-bottom: 1px solid var(--line);
}

.subnav ul {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	padding: 10px 0;
}

.subnav ul::-webkit-scrollbar {
	display: none;
}

.subnav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: #fff;
	font-size: 14.5px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--text);
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.subnav a:hover {
	border-color: var(--ink);
}

.subnav a[aria-current='page'] {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

/* Cabeça da coluna de produtos: contagem à esquerda, "Ordenar por" à direita. No celular a contagem fica
   em cima e .lista-ferramentas vira a barra fixa abaixo do topo, com "Filtrar (n)" e "Ordenar". */
.lista-cabeca {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
	padding-bottom: 14px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

.resultado {
	font-size: 15px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.resultado strong {
	font-weight: 600;
	color: var(--text);
}

.lista-ferramentas {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* "Filtrar (n)": só existe como botão com JavaScript e até 991 px (sem JS os filtros aparecem na página) */
.lista-filtrar {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--line-strong);
	border-radius: var(--raio-sm);
	background: #fff;
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
}

.lista-filtrar .icon,
.ordenar-botao .icon {
	width: 18px;
	height: 18px;
	color: var(--brand);
}

.ordenar {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ordenar-campo {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--muted);
	white-space: nowrap;
}

.ordenar-botao {
	display: none;
}

.ordenar select {
	min-height: 44px;
	padding: 0 38px 0 14px;
	border: 1px solid var(--line-strong);
	border-radius: var(--raio-sm);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px;
	appearance: none;
	font-size: 15px;
	font-weight: 500;
	color: var(--text);
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.ordenar select:hover {
	border-color: var(--ink);
}

.ordenar select:focus-visible {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--foco);
}

/* Chips dos filtros aplicados (cada um remove o seu) e "Limpar tudo" */
.filtros-ativos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
}

.filtro-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 6px 12px 6px 14px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	font-weight: 500;
	color: var(--text);
	transition: border-color 0.2s, color 0.2s;
}

.filtro-chip:hover {
	border-color: var(--brand);
	color: var(--brand);
}

.filtro-chip .icon {
	width: 14px;
	height: 14px;
}

.filtros-limpar-tudo {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--brand);
}

.filtros-limpar-tudo:hover {
	color: var(--brand-deep);
	text-decoration: underline;
}

/* Termo buscado no título da listagem: em Jost e sem caixa-alta (o letreiro é das palavras da loja,
   não do que o cliente digitou) */
.titulo-termo {
	font-family: var(--sans);
	font-size: 0.78em;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	overflow-wrap: anywhere;
}

@media (pointer: coarse) {
	.filtro-chip,
	.filtros-limpar-tudo {
		min-height: 44px;
	}
}

/* Celular: chips um pouco mais justos para "Limpar tudo" caber na linha dos dois filtros mais comuns
   ("Só disponíveis" e "Em oferta", o atalho de ofertas do topo), em vez de cair sozinho numa linha */
@media (max-width: 640px) {

	.filtros-ativos {
		gap: 6px;
	}

	.filtro-chip {
		gap: 6px;
		padding: 6px 10px 6px 12px;
		font-size: 13.5px;
	}

	.filtros-limpar-tudo {
		padding: 0 4px;
		font-size: 13.5px;
	}
}

@media (max-width: 991px) {
	.subnav {
		display: block;
	}

	/* Chips, contagem e barra mais juntos: o preço do 1º cartão sobe para a primeira dobra */
	.subnav ul {
		padding: 8px 0;
	}

	/* A contagem fica em cima e só a barra de ferramentas acompanha a rolagem (display: contents deixa a
	   barra sticky presa à coluna inteira, não só à cabeça) */
	.lista-cabeca {
		display: contents;
	}

	.resultado {
		margin-bottom: 6px;
		font-size: 14px;
	}

	.lista-ferramentas {
		position: sticky;
		top: var(--header-h);
		z-index: 40;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 8px;
		margin: 0 calc(var(--gutter) * -1) 12px;
		padding: 8px var(--gutter);
		background: rgba(255, 255, 255, 0.97);
		border-top: 1px solid var(--line);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 6px 14px rgba(20, 20, 20, 0.06);
	}

	.js .lista-filtrar {
		display: inline-flex;
	}

	/* "Aplicar" (só sem JS) fica ao lado da face, não embaixo: quando o loja.js o esconde, a barra não muda
	   de altura e a grade não sobe (salto de layout) */
	.ordenar {
		display: flex;
		gap: 8px;
		min-width: 0;
	}

	.ordenar-campo {
		display: flex;
		flex: 1;
		min-width: 0;
	}

	/* Some da tela, mas continua sendo o nome do campo para o leitor de tela */
	.ordenar-rotulo {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.ordenar-botao {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		min-width: 0;
		min-height: 44px;
		padding: 0 12px;
		border: 1px solid var(--line-strong);
		border-radius: var(--raio-sm);
		background: #fff;
		font-size: 15px;
		font-weight: 600;
		color: var(--text);
	}

	.ordenar-botao .icon {
		flex: none;
	}

	/* A face mostra a ordem aplicada ("Menor preço") quando não é a padrão; um rótulo longo corta com "…" */
	.ordenar-texto {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* O select nativo fica por cima da face "Ordenar", transparente: o toque abre a lista do sistema */
	.ordenar select {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		min-height: 0;
		padding: 0;
		opacity: 0;
	}

	.ordenar-campo:has(select:focus-visible) .ordenar-botao {
		outline: 2px solid var(--brand);
		outline-offset: 2px;
	}

	.ordenar .btn {
		flex: none;
		min-height: 44px;
	}
}

/* Celular (depois do bloco de 991 px, que ele ajusta): os chips de categoria ficam como os da faixa do topo,
   com 34 px e 13 px e 44 px de toque (::after) */
@media (max-width: 640px) {
	.subnav ul {
		gap: 6px;
		padding: 7px 0;
	}

	.subnav a {
		position: relative;
		min-height: 34px;
		padding: 0 12px;
		font-size: 13px;
	}

	.subnav a::after {
		content: '';
		position: absolute;
		inset: -5px 0;
	}

	.resultado {
		font-size: 13px;
	}
}

/* Filtros laterais e gaveta de filtros ------------------------------------- */

/* Desktop: 2 colunas, filtros (links, funcionam sem JavaScript) e produtos. Até 991 px os filtros viram a
   gaveta #painel-filtros, aberta por "Filtrar (n)"; sem JavaScript, aparecem antes dos produtos. */
.lista {
	padding: var(--respiro-topo) 0 var(--section);
}

.lista-grid {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.filtros-painel {
	padding: 4px 18px 10px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio);
}

.filtros-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
}

.filtros-titulo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sans);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0;
}

.filtros-titulo .icon {
	width: 20px;
	height: 20px;
	color: var(--brand);
}

.filtros-fechar {
	display: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--text);
}

.filtros-fechar:hover {
	background: var(--ivory);
}

.filtros-fechar .icon {
	width: 22px;
	height: 22px;
}

.filtros-acoes {
	display: none;
}

.filtro-grupo {
	padding: 14px 0 12px;
	border-bottom: 1px solid var(--line);
}

.filtro-grupo:last-child {
	border-bottom: 0;
}

.filtro-grupo-topo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}

.filtro-grupo h3 {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text);
}

.filtro-limpar {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--brand);
}

.filtro-limpar:hover {
	color: var(--brand-deep);
	text-decoration: underline;
}

.filtro-lista {
	display: grid;
	gap: 1px;
}

.filtro-item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 36px;
	margin: 0 -8px;
	padding: 6px 8px;
	border-radius: var(--raio-sm);
	font-size: 14.5px;
	line-height: 1.3;
	color: var(--text);
	transition: background-color 0.15s, color 0.15s;
}

.filtro-item:hover {
	background: var(--ivory);
	color: var(--brand);
}

.filtro-item[aria-current] {
	font-weight: 600;
	color: var(--brand);
}

.filtro-lista .filtro-item[aria-current='page'] {
	background: color-mix(in srgb, var(--brand) 7%, #fff);
}

.filtro-nome {
	flex: 1;
	min-width: 0;
}

.filtro-qtd {
	font-size: 13px;
	font-weight: 400;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* Caixa de marcar desenhada (o filtro é um link): borda --muted (5,7:1, acima do 3:1 de componente) */
.filtro-caixa {
	flex: none;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--muted);
	border-radius: 4px;
	background: #fff;
	color: #fff;
	transition: background-color 0.15s, border-color 0.15s;
}

.filtro-caixa .icon {
	width: 13px;
	height: 13px;
	stroke-width: 2.6;
	opacity: 0;
}

.filtro-item:hover .filtro-caixa {
	border-color: var(--brand);
}

.filtro-item[aria-current] .filtro-caixa {
	background: var(--brand);
	border-color: var(--brand);
}

.filtro-item[aria-current] .filtro-caixa .icon {
	opacity: 1;
}

/* Marcas: escolha única (outra marca troca a atual), então a caixa é de opção, redonda com o miolo cheio */
.filtro-caixa--opcao {
	border-radius: 50%;
}

.filtro-item[aria-current] .filtro-caixa--opcao {
	background: var(--brand);
	box-shadow: inset 0 0 0 3px #fff;
}

.filtro-icone-oferta {
	margin-right: 2px;
	vertical-align: -3px;
	color: var(--brand);
}

.filtro-mais summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	font-size: 14px;
	font-weight: 600;
	color: var(--brand);
	cursor: pointer;
	list-style: none;
}

.filtro-mais summary::-webkit-details-marker {
	display: none;
}

.filtro-mais summary::after {
	content: '';
	width: 7px;
	height: 7px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.filtro-mais[open] summary::after {
	margin-top: 3px;
	transform: rotate(-135deg);
}

.filtro-mais summary:hover {
	color: var(--brand-deep);
}

.filtro-mais-fechar,
.filtro-mais[open] .filtro-mais-abrir {
	display: none;
}

.filtro-mais[open] .filtro-mais-fechar {
	display: inline;
}

/* Preço: depois das faixas, a faixa livre "De R$ __ a R$ __" em dois campos lado a lado e o "Aplicar" na
   largura toda (a coluna tem 224–250 px). Campos no padrão dos formulários da loja, só mais baixos */
.filtro-preco {
	margin-top: 10px;
}

.filtro-lista + .filtro-preco {
	padding-top: 12px;
	border-top: 1px dashed var(--line);
}

.filtro-preco-campos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.filtro-preco-campo {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.filtro-preco-rotulo {
	font-size: 13px;
	color: var(--muted);
}

.filtro-preco-campo input {
	width: 100%;
	min-height: 40px;
	padding: 8px 10px;
	border: 1px solid var(--line-strong);
	border-radius: var(--raio-sm);
	background: #fff;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	appearance: textfield;
	transition: border-color 0.2s, box-shadow 0.2s;
}

/* Sem as setinhas do campo numérico: tomam o espaço do valor num campo estreito */
.filtro-preco-campo input::-webkit-inner-spin-button,
.filtro-preco-campo input::-webkit-outer-spin-button {
	margin: 0;
	appearance: none;
}

.filtro-preco-campo input:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--foco);
}

.filtro-preco-aplicar {
	grid-column: 1 / -1;
}

/* Alto contraste: a caixa marcada perde o fundo da marca; o contorno e o ✓ continuam */
@media (forced-colors: active) {
	.filtro-caixa {
		border-color: CanvasText;
	}

	.filtro-item[aria-current] .filtro-caixa .icon {
		color: CanvasText;
	}
}

@media (pointer: coarse) {
	.filtro-item,
	.filtro-mais summary,
	.filtro-preco-campo input {
		min-height: 44px;
	}

	.filtro-limpar {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin: -11px -10px;
		padding: 0 10px;
	}
}

@media (max-width: 1199px) {
	.lista-grid {
		grid-template-columns: 224px minmax(0, 1fr);
		gap: 24px;
	}
}

@media (max-width: 991px) {
	.lista {
		padding-top: 12px;
	}

	.lista-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	/* Sem JavaScript: bloco comum antes dos produtos */
	.filtros-painel {
		margin-bottom: 20px;
	}

	.filtro-item,
	.filtro-mais summary {
		min-height: 44px;
	}

	/* 16 px: com menos, o Safari do iPhone amplia a página ao tocar no campo */
	.filtro-preco-campo input {
		min-height: 44px;
		font-size: 16px;
	}

	.filtro-preco-aplicar {
		min-height: 44px;
	}

	.filtro-limpar {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin: -11px -10px;
		padding: 0 10px;
	}

	.js .filtros-painel {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 175;
		display: flex;
		flex-direction: column;
		width: min(88vw, 380px);
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0 var(--raio-lg) var(--raio-lg) 0;
		box-shadow: var(--sombra-3);
		transform: translateX(-104%);
		visibility: hidden;
		transition: transform 0.3s var(--ease), visibility 0s linear 0.3s;
	}

	.js .filtros-painel.is-open {
		transform: none;
		visibility: visible;
		transition: transform 0.3s var(--ease);
	}

	.js .filtros-topo {
		padding: 8px 10px 8px 20px;
	}

	.js .filtros-fechar {
		display: inline-grid;
	}

	.js .filtros-corpo {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 20px;
	}

	.js .filtros-acoes {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 10px;
		padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--line);
		background: #fff;
		box-shadow: 0 -6px 14px rgba(20, 20, 20, 0.05);
	}

	.js .filtros-acoes .btn:only-child {
		grid-column: 1 / -1;
	}

	.filtros-fundo {
		position: fixed;
		inset: 0;
		z-index: 170;
		background: rgba(20, 20, 20, 0.5);
		opacity: 0;
		transition: opacity 0.3s var(--ease);
	}

	.filtros-fundo.is-open {
		opacity: 1;
	}
}

/* Com JavaScript ligado, antes de o loja.js (defer) pôr a classe .js: o bloco de filtros empurraria a grade
   para baixo e depois viraria gaveta (salto de layout). Até lá ele fica depois dos produtos, fora da primeira
   dobra; se o script falhar, os filtros continuam na página. Sem JavaScript, seguem antes dos produtos. */
@media (max-width: 991px) and (scripting: enabled) {
	html:not(.js) .filtros-painel {
		order: 1;
		margin: 28px 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.js .filtros-painel,
	.js .filtros-painel.is-open,
	.filtros-fundo {
		transition: none;
	}
}

/* Cartões de produto -------------------------------------------------------- */

/* Grade da vitrine: colunas de pelo menos ~208 px. A listagem fixa 4 colunas (3 no notebook e no tablet,
   2 no celular). */
.produtos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
	gap: 16px;
}

.produtos--lista {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Cartão: foto quadrada sempre sobre branco (o multiply das fotos tingiria sobre outro fundo), marca, nome
   em 2 linhas fixas, preço forte e a ação no pé, alinhada entre os cartões da mesma linha */
.produto {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio);
	color: var(--text);
	transition: border-color 0.25s, box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.produto:hover {
	border-color: var(--line-strong);
	box-shadow: var(--sombra-2);
	transform: translateY(-3px);
}

/* A foto fica posicionada dentro do quadrado: uma foto em pé não estica o cartão */
.produto-media {
	--respiro: 16px;
	position: relative;
	aspect-ratio: 1;
	background: #fff;
	border-radius: var(--raio) var(--raio) 0 0;
}

.produto-media > img,
.produto-media > .produto-sem-foto {
	position: absolute;
	top: var(--respiro);
	left: var(--respiro);
	width: calc(100% - var(--respiro) * 2);
	height: calc(100% - var(--respiro) * 2);
}

.produto-media img {
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.5s var(--ease), opacity 0.25s;
}

.produto:hover .produto-media img {
	transform: scale(1.04);
}

.produto--esgotado .produto-media img {
	opacity: 0.55;
}

.produto-sem-foto {
	display: grid;
	place-items: center;
	border-radius: var(--raio-sm);
	background: var(--paper);
	color: var(--sand);
}

.produto-sem-foto .icon {
	width: 44px;
	height: 44px;
	stroke-width: 1.1;
}

/* Selos no canto da foto: "-N%" (ouro, letreiro) ou "Esgotado", que tem precedência */
.produto-selo,
.produto-etiqueta {
	position: absolute;
	top: 10px;
	left: 10px;
}

.produto-etiqueta {
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.produto-etiqueta--esgotado {
	background: rgba(20, 20, 20, 0.74);
	color: #fff;
}

.produto-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 4px;
	padding: 4px 14px 14px;
}

.produto-marca {
	min-height: 1.3em;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Nome em Jost, 2 linhas no máximo e sempre a altura de 2: os preços ficam na mesma linha */
.produto-nome {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: calc(1.35em * 2);
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0;
	text-wrap: pretty;
	overflow-wrap: anywhere;
	color: var(--text);
}

.produto:hover .produto-nome a {
	color: var(--brand);
}

/* O link do nome cobre o cartão inteiro; ações ficam por cima (z-index 2). O foco desenha o cartão todo. */
.produto-nome a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--raio);
}

.produto-nome a:focus-visible {
	outline: none;
}

/* O anel fica por dentro do cartão, sobre o branco dele (marca/branco 6,4:1), e não sobre o fundo da seção:
   fora do cartão ele sumiria nas faixas vinho e vermelha (vermelho sobre vermelho) e ficaria fraco no grafite.
   Um anel branco por fora também não serve: colado ao cartão branco, só parece um cartão maior. */
.produto-nome a:focus-visible::after {
	outline: 2px solid var(--brand);
	outline-offset: -4px;
}

.produto-categoria {
	font-size: 12.5px;
	line-height: 1.3;
	color: var(--muted);
}

.produto-preco {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 6px;
	margin-top: 6px;
}

/* O preço vem primeiro na tela (fica na mesma altura em todos os cartões); o "de" riscado e as parcelas
   descem para baixo dele. No HTML o "de" vem antes, com "Preço anterior" para o leitor de tela. */
.produto-preco .preco-de {
	order: 1;
	flex-basis: 100%;
}

.produto-preco .preco-parcelas {
	order: 2;
}

.preco {
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.preco-a-partir {
	font-size: 12.5px;
	color: var(--muted);
}

.preco-de {
	font-size: 13px;
	color: var(--muted);
	text-decoration: line-through;
	font-variant-numeric: tabular-nums;
}

.preco-parcelas {
	flex-basis: 100%;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--muted);
}

.preco-consulta {
	margin-top: 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
}

.produto-opcoes {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--muted);
}

.produto-acoes {
	position: relative;
	z-index: 2;
	display: flex;
	margin-top: auto;
	padding-top: 12px;
}

.produto-acoes form {
	flex: 1;
	display: flex;
}

.produto-acoes .btn,
.produto-acoes .produto-cta-whats {
	flex: 1;
	min-height: 44px;
	padding: 8px 12px;
	font-size: 14.5px;
}

/* "Consultar" e "Avise-me": WhatsApp contornado (o verde cheio fica para o botão principal da página) */
.produto-cta-whats {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--whats);
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.produto-cta-whats:hover {
	color: #0c5f31;
}

.produto-acoes .produto-cta-whats {
	border: 1.5px solid var(--whats);
	border-radius: var(--raio-sm);
	background: #fff;
}

.produto-acoes .produto-cta-whats:hover {
	background: var(--whats);
	color: #fff;
}

.vazio {
	padding: clamp(40px, 6vw, 72px) 24px;
	text-align: center;
	border: 1px dashed var(--line-strong);
	background: #fff;
}

.vazio .icon {
	width: 40px;
	height: 40px;
	stroke-width: 1.2;
	color: var(--sand);
	margin: 0 auto 16px;
}

.vazio h2,
.vazio h3 {
	font-size: clamp(21px, 2.2vw, 26px);
	margin-bottom: 10px;
}

.vazio p {
	color: var(--muted);
	max-width: 460px;
	margin: 0 auto 22px;
}

/* Listagem sem resultado: mascote, título no letreiro, saídas e as categorias como sugestão */
.lista-vazia {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 20px 36px;
	padding: clamp(24px, 4vw, 44px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio-lg);
}

.lista-vazia-mascote {
	width: clamp(120px, 15vw, 180px);
	height: auto;
}

.lista-vazia-titulo {
	margin-bottom: 10px;
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	color: var(--ink);
}

.lista-vazia-texto > p {
	max-width: 56ch;
	margin-bottom: 18px;
	color: var(--muted);
}

.lista-vazia-rotulo {
	margin: 24px 0 10px;
}

.lista-vazia-categorias {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Paginação como nas grandes lojas: "‹ Anterior 1 2 3 … 9 Seguinte ›"; no celular, "‹ Anterior 2 de 9 Seguinte ›" */
.paginacao {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 12px;
	margin-top: 36px;
}

.paginacao-numeros {
	display: flex;
	align-items: center;
	gap: 4px;
}

.paginacao-numeros a,
.paginacao-numeros [aria-current='page'] {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	border-radius: var(--raio-sm);
	font-size: 15px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--text);
	transition: background-color 0.2s, color 0.2s;
}

.paginacao-numeros a:hover {
	background: var(--ivory);
	color: var(--brand);
}

.paginacao-numeros [aria-current='page'] {
	background: var(--brand);
	color: #fff;
	font-weight: 600;
}

.paginacao-de {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.paginacao-reticencias {
	display: inline-block;
	min-width: 20px;
	text-align: center;
	color: var(--muted);
}

.paginacao-passo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--raio-sm);
	font-size: 15px;
	font-weight: 600;
	color: var(--brand);
	transition: background-color 0.2s;
}

.paginacao-passo:hover {
	background: var(--ivory);
}

@media (prefers-reduced-motion: reduce) {
	.produto,
	.produto-media img {
		transition: border-color 0.25s, box-shadow 0.25s;
	}

	.produto:hover,
	.produto:hover .produto-media img {
		transform: none;
	}
}

@media (max-width: 1199px) {
	.produtos--lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Celular: cartões compactos, como nas grandes lojas, para caberem mais produtos por tela (na grade, duas
   linhas de cartões inteiras na primeira dobra da listagem). A foto fica mais baixa que larga (5:4): as cubas,
   que são deitadas, quase não perdem tamanho. Nome em 13,5 px (2 linhas), preço em 17 px, apoio em 11,5 px e
   o botão com 36 px de altura, mas com 44 px de alvo de toque (o ::before passa 4 px acima e abaixo dele). */
@media (max-width: 640px) {
	.produtos,
	.produtos--lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.produto-media {
		--respiro: 8px;
		aspect-ratio: 5 / 4;
	}

	.produto-selo,
	.produto-etiqueta {
		top: 6px;
		left: 6px;
	}

	.produto-selo {
		font-size: 1rem;
	}

	.produto-etiqueta {
		padding: 4px 8px;
		font-size: 11px;
	}

	.produto-body {
		gap: 2px;
		padding: 2px 8px 10px;
	}

	.produto-marca {
		font-size: 10.5px;
	}

	.produto-nome {
		min-height: calc(1.3em * 2);
		font-size: 13.5px;
		line-height: 1.3;
	}

	.produto-preco {
		margin-top: 4px;
		gap: 1px 6px;
	}

	.preco {
		font-size: 17px;
	}

	.produto :is(.preco-de, .preco-a-partir, .preco-parcelas, .produto-opcoes, .produto-categoria) {
		font-size: 11.5px;
	}

	.preco-consulta {
		margin-top: 4px;
		font-size: 13.5px;
	}

	/* Em 2 colunas o "a partir de" não cabe na linha do preço e o empurraria para baixo: ele ganha linha
	   própria acima do preço, e o cartão sem ele reserva a mesma linha (os preços ficam na mesma altura) */
	.produto-preco .preco-a-partir {
		order: -1;
		flex-basis: 100%;
		line-height: 1.3;
	}

	.produto-preco:not(:has(.preco-a-partir))::before {
		content: '';
		order: -1;
		flex-basis: 100%;
		height: calc(11.5px * 1.3);
	}

	.produto-acoes {
		padding-top: 8px;
	}

	.produto-acoes .btn,
	.produto-acoes .produto-cta-whats {
		position: relative;
		gap: 6px;
		min-height: 36px;
		padding: 6px 8px;
		font-size: 13px;
	}

	.produto-acoes .btn::before,
	.produto-acoes .produto-cta-whats::before {
		content: '';
		position: absolute;
		inset: -5px -1px;
	}

	.produto-acoes .icon,
	.produto-acoes .icon-fill {
		width: 16px;
		height: 16px;
	}

	.lista-vazia {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
	}

	.lista-vazia-mascote {
		width: 120px;
	}

	.lista-vazia .btn-row,
	.lista-vazia-categorias {
		justify-content: center;
	}

	.paginacao-numeros li:not(:has([aria-current])) {
		display: none;
	}

	.paginacao-numeros [aria-current='page'] {
		padding: 0 14px;
		background: none;
		color: var(--text);
		border: 1px solid var(--line-strong);
	}

	.paginacao-de {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		margin-left: 0.3em;
		font-weight: 400;
		color: var(--muted);
	}
}

/* Trilho de produtos --------------------------------------------------------- */

/* Prateleira que rola na horizontal (home, "Veja também", sugestões):
   <div class="trilho" data-trilho><ul class="produtos produtos--trilho">…cartões…</ul></div>
   Cartões de ~220 px com scroll-snap; rola com o dedo, a roda (shift), a barra e o Tab (os cartões entram na
   tela). O loja.js acrescenta as setas anterior/próxima (só com o mouse; somem quando não há o que rolar e
   ficam inertes nas pontas). Sem rolagem automática. Num fundo escuro, os cartões voltam às cores claras
   (ver .section--vinho em Layout). */
.trilho {
	position: relative;
}

.produtos--trilho {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: var(--trilho-cartao, 220px);
	gap: 16px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 4px;
	/* Respiro para a sombra, a elevação e o contorno de foco dos cartões (o overflow corta o que passa) */
	padding: 8px 4px 20px;
	margin: -8px -4px -12px;
	scrollbar-width: thin;
	scrollbar-color: var(--line-strong) transparent;
}

.produtos--trilho > .produto {
	scroll-snap-align: start;
}

.trilho-seta {
	position: absolute;
	top: calc(var(--trilho-cartao, 220px) / 2 - 22px);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: #fff;
	color: var(--ink);
	box-shadow: var(--sombra-2);
	transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}

.trilho-seta--anterior {
	left: -16px;
}

.trilho-seta--proxima {
	right: -16px;
}

.trilho-seta:hover {
	background: var(--ink);
	color: #fff;
}

.trilho-seta .icon {
	width: 22px;
	height: 22px;
	stroke-width: 2;
}

/* Na ponta, a seta some (continua focável só se já tinha o foco, para não sumir debaixo do teclado) */
.trilho-seta[aria-disabled='true']:not(:focus-visible) {
	opacity: 0;
	pointer-events: none;
}

/* Sobre faixa escura o foco da seta fica branco (o anel do cartão fica por dentro dele, sobre o branco) */
:is(.section--dark, .section--vinho, .section--marca) .trilho-seta:focus-visible {
	outline-color: #fff;
}

/* Toque e celular: o dedo já rola o trilho, as setas só atrapalhariam a foto */
@media (hover: none), (max-width: 640px) {
	.trilho-seta {
		display: none;
	}
}

@media (max-width: 640px) {
	/* O trilho vai de borda a borda da tela, e o primeiro cartão alinha com o texto da página */
	.trilho {
		margin-inline: calc(var(--gutter) * -1);
	}

	/* Dois cartões inteiros e um quarto do terceiro (o pedaço avisa que a linha rola) */
	.produtos--trilho {
		grid-auto-columns: var(--trilho-cartao, calc((100% - 16px) / 2.25));
		gap: 8px;
		margin: -8px 0 -12px;
		padding: 8px var(--gutter) 20px;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	.produtos--trilho::-webkit-scrollbar {
		display: none;
	}
}

/* Página do produto ---------------------------------------------------------- */

.produto-pagina {
	padding: clamp(16px, 2.4vw, 28px) 0 clamp(40px, 6vw, 72px);
}

/* Desktop: galeria e, abaixo dela, descrição e características à esquerda; a caixa de compra à direita
   acompanha a rolagem. Linha 2 em 1fr: a altura da caixa não abre espaço entre a galeria e a descrição. */
.produto-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 440px;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		'galeria compra'
		'info compra';
	gap: 32px 40px;
	align-items: start;
	margin-top: 16px;
}

.galeria {
	grid-area: galeria;
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: 12px;
}

.galeria-principal {
	--respiro: clamp(20px, 3vw, 44px);
	position: relative;
	grid-column: 2;
	aspect-ratio: 5 / 4;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio);
}

.galeria-principal > img,
.galeria-principal > .produto-sem-foto {
	position: absolute;
	top: var(--respiro);
	left: var(--respiro);
	width: calc(100% - var(--respiro) * 2);
	height: calc(100% - var(--respiro) * 2);
}

.galeria-principal img {
	object-fit: contain;
	mix-blend-mode: multiply;
}

.galeria-principal .produto-sem-foto .icon {
	width: 72px;
	height: 72px;
}

.galeria-miniaturas {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.galeria-miniaturas button {
	aspect-ratio: 1;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio-sm);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.galeria-miniaturas button:hover {
	border-color: var(--line-strong);
}

.galeria-miniaturas button[aria-current='true'] {
	border-color: var(--brand);
	box-shadow: inset 0 0 0 1px var(--brand);
}

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

.galeria--unica {
	grid-template-columns: minmax(0, 1fr);
}

.galeria--unica .galeria-principal {
	grid-column: 1;
}

/* Caixa de compra: cartão branco com o filete da marca em cima */
.compra {
	grid-area: compra;
	position: sticky;
	top: calc(var(--header-h) + 16px);
	padding: 22px 24px 24px;
	background: #fff;
	border: 1px solid var(--line);
	border-top: 4px solid var(--brand);
	border-radius: var(--raio);
	box-shadow: var(--sombra-1);
}

.compra-cabeca {
	margin-bottom: 4px;
}

.compra-marca {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	margin-bottom: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand);
}

.compra-marca:hover {
	text-decoration: underline;
}

/* Nome do produto em Jost (o letreiro não serve para nomes longos com medidas) */
.compra-titulo {
	font-family: var(--sans);
	font-size: clamp(22px, 1.4vw + 12px, 28px);
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: 0;
	text-wrap: pretty;
	overflow-wrap: anywhere;
}

.sku {
	margin-top: 6px;
	font-size: 13px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.compra-preco {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 16px 0 18px;
	border-bottom: 1px solid var(--line);
}

.compra-preco-linha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.compra-preco .preco {
	font-size: clamp(30px, 1.6vw + 16px, 36px);
	font-weight: 600;
	line-height: 1.1;
}

.compra-preco .preco-de {
	font-size: 15px;
}

.compra-selo {
	font-size: 1.5rem;
}

.compra-preco .preco-parcelas {
	font-size: 14.5px;
	color: var(--text);
}

.compra-preco .preco-consulta {
	margin: 0;
	font-size: 22px;
}

.compra-bloco {
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
}

.compra-bloco:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.compra-consulta-texto {
	margin-bottom: 16px;
	font-size: 15px;
	color: var(--muted);
}

.compra-rotulo {
	display: block;
	margin-bottom: 10px;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}

fieldset.compra-opcoes {
	margin: 0;
	padding: 18px 0;
	border: 0;
	border-bottom: 1px solid var(--line);
	min-width: 0;
}

fieldset.compra-opcoes legend {
	float: left;
	width: 100%;
}

fieldset.compra-opcoes legend + * {
	clear: both;
}

/* Opções como pílulas; a escolhida ganha o contorno da marca */
.opcoes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.opcao {
	position: relative;
}

.opcao input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.opcao > span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 18px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: #fff;
	font-size: 14.5px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.opcao > span:hover {
	border-color: var(--ink);
}

.opcao input:checked + span {
	border-color: var(--brand);
	box-shadow: inset 0 0 0 1px var(--brand);
	background: color-mix(in srgb, var(--brand) 6%, #fff);
	color: var(--brand);
	font-weight: 600;
}

.opcao input:focus-visible + span {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

.opcao--indisponivel > span {
	border-style: dashed;
	color: var(--muted);
	text-decoration: line-through;
	background: var(--paper);
}

/* "-N%" da opção em oferta dentro da pílula: ouro com texto --ink (9,7:1), como a etiqueta do preço */
.opcao-desconto {
	padding: 1px 6px;
	border-radius: 4px;
	background: var(--ouro);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.compra-quantidade {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-bottom: 16px;
}

.compra-quantidade .compra-rotulo {
	flex-basis: 100%;
	margin-bottom: 0;
}

/* Comprar agora (principal) e Adicionar ao carrinho (contornado escuro), um embaixo do outro */
.compra-acoes {
	display: grid;
	gap: 10px;
}

.compra-adicionar {
	background: #fff;
	border: 1.5px solid var(--ink);
	color: var(--ink);
}

.compra-adicionar:hover {
	background: var(--ink);
	color: #fff;
}

/* Opção sem estoque (os [data-botao-comprar] desativados, pelo servidor ou pelo loja.js na troca de opção):
   saem a quantidade, os botões mortos e as parcelas; ficam o estado em destaque e o "Avise-me" pelo
   WhatsApp. Sem :has(), a caixa continua como antes, com os botões desativados. */
.compra-avise {
	display: none;
}

.compra-avise p {
	margin-bottom: 12px;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--muted);
}

.compra:has([data-botao-comprar]:disabled) .compra-avise {
	display: block;
}

.compra:has([data-botao-comprar]:disabled) :is(.compra-acoes, .qtd, .compra-quantidade .compra-rotulo, [data-parcelas]) {
	display: none;
}

.compra:has([data-botao-comprar]:disabled) .compra-quantidade {
	margin-bottom: 8px;
}

.compra:has([data-botao-comprar]:disabled) .estoque-info--sem {
	font-size: 18px;
	font-weight: 600;
	color: var(--danger);
}

.qtd {
	display: inline-flex;
	align-items: stretch;
	height: 48px;
	border: 1px solid var(--line-strong);
	border-radius: var(--raio-sm);
	background: #fff;
}

.qtd button {
	display: grid;
	place-items: center;
	width: 44px;
	border: 0;
	border-radius: var(--raio-sm);
	background: none;
	color: var(--text);
	transition: background-color 0.2s;
}

.qtd button:hover {
	background: var(--ivory);
}

.qtd button:disabled {
	color: var(--sand);
	pointer-events: none;
}

.qtd .icon {
	width: 16px;
	height: 16px;
}

.qtd input {
	width: 48px;
	border: 0;
	background: none;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;
}

.qtd input::-webkit-outer-spin-button,
.qtd input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.qtd--sm {
	height: 38px;
}

.qtd--sm button {
	width: 34px;
}

.qtd--sm input {
	width: 36px;
	font-size: 14px;
}

/* O loja.js troca o className inteiro deste parágrafo: layout fica no pai (.compra-quantidade) */
.estoque-info {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ok);
}

.estoque-info::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.estoque-info:empty {
	display: none;
}

.estoque-info--pouco {
	color: var(--warn);
}

.estoque-info--sem {
	color: var(--muted);
}

/* Vantagens de compra: lista compacta com ícone na cor da marca */
.vantagens-compra {
	display: grid;
	gap: 12px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.vantagens-compra li {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 10px;
	font-size: 14px;
	line-height: 1.45;
}

.vantagens-compra .icon,
.vantagens-compra .icon-fill {
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: var(--brand);
}

.vantagens-compra strong {
	display: block;
	font-weight: 600;
}

.vantagens-compra span {
	color: var(--muted);
}

/* Ajuda pelo WhatsApp com o mascote (decorativo) */
.compra-ajuda {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	margin-top: 18px;
	padding: 14px 16px 0 10px;
	background: var(--ivory);
	border-radius: var(--raio);
	overflow: hidden;
}

.compra-ajuda-mascote {
	flex: none;
	width: 74px;
	height: auto;
}

.compra-ajuda-texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: 12px;
	font-size: 14px;
	line-height: 1.4;
}

.compra-ajuda-texto span {
	color: var(--muted);
}

.compra-ajuda .produto-cta-whats {
	justify-content: flex-start;
	min-height: 44px;
	margin-top: 0;
}

@media (pointer: coarse) {
	.compra-marca {
		min-height: 44px;
		margin: -8px 0 -4px;
	}
}

/* Descrição e características, abaixo da galeria */
.produto-info {
	grid-area: info;
	display: grid;
	gap: 28px;
}

.produto-secao-titulo {
	margin-bottom: 14px;
	font-family: var(--letreiro);
	font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.9rem);
	font-weight: 400;
	font-synthesis: none;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--ink);
}

.descricao-texto {
	max-width: 70ch;
	font-size: 16px;
	line-height: 1.65;
	color: var(--text);
	white-space: pre-line;
}

.caracteristicas {
	width: 100%;
	max-width: 640px;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio);
	overflow: hidden;
	font-size: 15px;
}

.caracteristicas th,
.caracteristicas td {
	padding: 12px 16px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
}

.caracteristicas tr:last-child th,
.caracteristicas tr:last-child td {
	border-bottom: 0;
}

.caracteristicas th {
	width: 34%;
	background: var(--paper);
	font-weight: 600;
	color: var(--text);
}

.caracteristicas td {
	font-variant-numeric: tabular-nums;
}

.caracteristicas-codigos {
	display: grid;
	gap: 2px;
}

.caracteristicas-codigos span {
	color: var(--muted);
}

.caracteristicas-codigos span::after {
	content: ':';
}

/* "Veja também": como as prateleiras da home (ver Prateleiras por categoria) */

@media (max-width: 1199px) {
	.produto-grid {
		grid-template-columns: minmax(0, 1fr) 380px;
		column-gap: 28px;
	}
}

@media (max-width: 991px) {
	.produto-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas:
			'galeria'
			'compra'
			'info';
		gap: 20px;
	}

	.compra {
		position: static;
	}

	.galeria {
		grid-template-columns: minmax(0, 1fr);
	}

	.galeria-principal {
		grid-column: 1;
		aspect-ratio: 4 / 3;
	}

	.galeria-miniaturas {
		grid-column: 1;
		grid-row: 2;
		flex-direction: row;
		overflow-x: auto;
	}

	.galeria-miniaturas button {
		width: 64px;
		flex: none;
	}

	.produto-info {
		margin-top: 8px;
	}
}

@media (max-width: 640px) {
	/* No celular a foto fica mais baixa e a trilha perde o nome do produto (o h1 logo abaixo já o traz):
	   o preço e o "Comprar agora" sobem para perto da primeira dobra */
	.produto-pagina .breadcrumb li:last-child {
		display: none;
	}

	.galeria-principal {
		--respiro: 12px;
		aspect-ratio: 16 / 10;
	}

	/* Blocos da caixa mais juntos; o rótulo "Quantidade" sai da tela (o campo já se chama Quantidade para o
	   leitor de tela e o seletor − 1 + se explica sozinho) */
	.compra-preco {
		padding: 12px 0 14px;
	}

	.compra-bloco,
	fieldset.compra-opcoes {
		padding: 14px 0;
	}

	.compra-quantidade .compra-rotulo {
		display: none;
	}

	.compra-quantidade {
		margin-bottom: 12px;
	}

	.compra {
		margin: 0 calc(var(--gutter) * -1);
		padding: 18px var(--gutter) 20px;
		border-right: 0;
		border-left: 0;
		border-radius: 0;
	}

	.caracteristicas th,
	.caracteristicas td {
		padding: 10px 12px;
	}
}

/* Calculadora de frete ---- */

/* Na caixa de compra, entre os botões e as vantagens (fora do form[data-compra]): CEP e "Calcular" na mesma
   linha, o resultado logo abaixo (região aria-live que o loja.js preenche). Linhas no padrão das opções de
   entrega do checkout, mais compactas */
.frete-calc {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.frete-calc-titulo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--text);
}

.frete-calc-titulo .icon {
	width: 20px;
	height: 20px;
	color: var(--brand);
}

.frete-calc-gratis {
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--muted);
}

.frete-calc-gratis strong {
	font-weight: 600;
	color: var(--ok);
}

.frete-calc-form {
	margin-top: 12px;
}

.frete-calc-rotulo {
	display: block;
	margin-bottom: 6px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--text);
}

.frete-calc-linha {
	display: flex;
	gap: 8px;
}

.frete-calc-linha input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--line-strong);
	border-radius: var(--raio-sm);
	background: #fff;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.frete-calc-linha input:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--foco);
}

.frete-calc-linha .btn {
	flex: none;
	min-height: 48px;
}

.frete-resultado > :first-child {
	margin-top: 14px;
}

.frete-cep {
	font-size: 13.5px;
	color: var(--muted);
}

.frete-cep strong {
	font-weight: 600;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.frete-opcoes {
	display: grid;
	gap: 8px;
	margin-top: 8px;
}

.frete-opcao {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: start;
	padding: 12px 14px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--raio-sm);
	font-size: 14px;
	line-height: 1.4;
}

.frete-opcao .icon {
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: var(--brand);
}

.frete-opcao strong {
	display: block;
	font-weight: 600;
}

.frete-opcao small {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--muted);
	overflow-wrap: anywhere;
}

.frete-valor {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.frete-valor--gratis {
	color: var(--ok);
}

/* "Faltam R$ X para o frete grátis": o fundo suave de oferta, como um lembrete, sem alarme */
.frete-dica {
	margin-top: 8px;
	padding: 8px 12px;
	background: var(--ouro-claro);
	border-radius: var(--raio-sm);
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--text);
}

/* O valor que falta numa linha só: "R$" sozinho no fim da linha e "350,10" na seguinte não se lê como preço */
.frete-dica strong {
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.frete-aviso {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--text);
}

.frete-aviso--erro {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-weight: 500;
	color: var(--danger);
}

.frete-aviso--erro .icon {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 1px;
}

.frete-nota {
	margin-top: 8px;
	font-size: 13px;
	color: var(--muted);
}

@media (max-width: 640px) {
	.frete-calc {
		margin-top: 14px;
		padding-top: 14px;
	}
}

/* Gaveta do carrinho ------------------------------------------------------- */

/* Painel à direita com o filete da marca no alto (como a caixa de compra do produto), o título no letreiro,
   os itens em linhas compactas e o pé branco com subtotal e ações. O topo (título e fechar) vem do _Layout;
   o conteúdo, da parcial _Gaveta, cuja raiz .gaveta-conteudo o loja.js lê (1º filho de data-gaveta-conteudo). */
.gaveta-fundo {
	position: fixed;
	inset: 0;
	z-index: 190;
	background: rgba(20, 20, 20, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s var(--ease), visibility 0.3s;
}

.gaveta {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	width: min(440px, 100vw);
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border-top: 4px solid var(--brand);
	box-shadow: var(--sombra-3);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.4s var(--ease), visibility 0.4s;
}

.gaveta.is-open {
	transform: none;
	visibility: visible;
}

.gaveta.is-open + .gaveta-fundo,
.gaveta-fundo.is-open {
	opacity: 1;
	visibility: visible;
}

.gaveta-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px 12px 24px;
	background: #fff;
	border-bottom: 1px solid var(--line);
}

/* "SEU CARRINHO" no letreiro das artes (título da gaveta, não texto corrido) */
.gaveta-topo h2 {
	font-family: var(--letreiro);
	font-size: 26px;
	font-weight: 400;
	font-synthesis: none;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--ink);
}

.botao-fechar {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: var(--raio-sm);
	background: #fff;
	color: var(--ink);
	transition: border-color 0.2s, background-color 0.2s;
}

.botao-fechar:hover {
	border-color: var(--ink);
	background: var(--ivory);
}

.gaveta-conteudo {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.gaveta-contagem {
	padding: 14px 24px 0;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--muted) 70%, var(--ink));
}

.gaveta-itens {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 24px 8px;
}

.gaveta-pe {
	display: grid;
	gap: 10px;
	padding: 16px 24px calc(20px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--line);
	background: #fff;
	box-shadow: 0 -8px 20px rgba(20, 20, 20, 0.05);
}

.gaveta-pe .subtotal {
	margin-bottom: 4px;
}

.gaveta-pe .nota {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--muted);
	text-align: center;
}

.gaveta-pe .nota :is(.icon, .icon-fill) {
	color: var(--ok);
}

.gaveta-pe .nota--erro,
.gaveta-pe .nota--erro :is(.icon, .icon-fill) {
	font-weight: 500;
	color: var(--danger);
}

/* Vazia: o mascote em pé sobre um filete, título no letreiro e a saída para a vitrine */
.gaveta-vazia {
	flex: 1;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 12px;
	padding: 32px 24px;
	text-align: center;
	color: var(--muted);
}

.gaveta-vazia-mascote {
	width: 132px;
	height: auto;
	padding: 0 18px;
	border-bottom: 2px solid var(--stone);
	box-sizing: content-box;
}

.gaveta-vazia h3 {
	margin-top: 6px;
	font-size: 26px;
	color: var(--ink);
}

.gaveta-vazia p {
	max-width: 30ch;
	margin-bottom: 6px;
}

.mensagem-gaveta {
	margin: 16px 24px 0;
}

/* Linhas do carrinho ---- */
/* Mesma linha na gaveta, na página do carrinho e nos resumos do checkout: foto, dados, total e, quando dá
   para editar, os controles (quantidade e remover) embaixo dos dados. .linha--resumo é a linha só de
   leitura (quantidade junto dos dados); .linha--pedido (página do pedido) não tem foto. */
.linha {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	grid-template-areas:
		'img info total'
		'img controles controles';
	gap: 10px 14px;
	align-items: start;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
}

.linha:last-child {
	border-bottom: 0;
}

.linha-img {
	grid-area: img;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio-sm);
	overflow: hidden;
}

/* A foto fica sempre sobre branco (o multiply tingiria sobre outro fundo) */
.linha-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.linha-img .ornamento {
	width: 42%;
}

.linha-info {
	grid-area: info;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

/* Nome em Jost, no máximo 2 linhas (o nome inteiro está na página do produto) */
.linha-nome {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--text);
	overflow-wrap: anywhere;
}

a.linha-nome:hover {
	color: var(--brand);
}

.linha-variacao,
.linha-unitario,
.quantidade-selo {
	font-size: 13px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.linha-total {
	grid-area: total;
	font-size: 16px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
	color: var(--ink);
}

.linha-controles {
	grid-area: controles;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

/* Quantidade da linha: um pouco maior que o .qtd--sm do produto; 44 px no toque */
.linha .qtd--sm {
	height: 40px;
}

.linha .qtd--sm button {
	width: 38px;
}

.linha-remover {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 6px;
	border: 0;
	border-radius: var(--raio-sm);
	background: none;
	font-size: 14px;
	font-weight: 500;
	color: var(--muted);
	transition: color 0.2s;
}

.linha-remover .icon {
	width: 17px;
	height: 17px;
}

.linha-remover:hover {
	color: var(--brand);
}

.linha-remover:hover span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (pointer: coarse) {
	.linha .qtd--sm {
		height: 44px;
	}

	.linha .qtd--sm button {
		width: 44px;
	}

	.linha-remover {
		min-height: 44px;
	}
}

.linha-problema {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	margin-top: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.35;
	background: var(--danger-bg);
	color: var(--danger);
}

.linha-problema .icon {
	width: 15px;
	height: 15px;
}

.linha--indisponivel .linha-img,
.linha--indisponivel .linha-nome {
	opacity: 0.55;
}

/* Só leitura (resumo do checkout e do WhatsApp): foto menor e sem a linha dos controles */
.linha--resumo {
	grid-template-columns: 56px minmax(0, 1fr) auto;
	grid-template-areas: 'img info total';
	gap: 12px;
	padding: 12px 0;
}

.linha--resumo .linha-img {
	padding: 4px;
}

.linha--resumo .linha-nome {
	font-size: 14px;
}

.linha--resumo .linha-total {
	font-size: 15px;
}

.gaveta-itens .linha {
	grid-template-columns: 64px minmax(0, 1fr) auto;
}

.subtotal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: 15px;
	font-weight: 500;
}

.subtotal small {
	font-size: 13px;
	font-weight: 400;
	color: var(--muted);
}

.subtotal strong {
	font-size: 24px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

/* Etapas da compra ---- */
/* "1 Carrinho › 2 Entrega e dados › 3 Pagamento" (ou "1 Carrinho › 2 Enviar pelo WhatsApp"): a etapa atual
   no círculo vinho, as feitas com o ✓ em vinho (a do carrinho volta a ser link), as próximas em cinza.
   No celular cada etapa vira uma coluna, com o rótulo embaixo do círculo. */
.etapas-compra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 0;
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.25;
}

.etapas-compra-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	color: color-mix(in srgb, var(--muted) 70%, var(--ink));
}

.etapas-compra-item + .etapas-compra-item::before {
	content: '';
	flex: none;
	width: clamp(20px, 3.4vw, 48px);
	height: 2px;
	margin: 0 6px 0 4px;
	border-radius: 2px;
	background: var(--line-strong);
}

.etapas-compra-item--feita + .etapas-compra-item::before {
	background: var(--vinho);
}

.etapas-compra-num {
	display: grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
	border: 2px solid var(--sand);
	border-radius: 50%;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.etapas-compra-num .icon {
	width: 15px;
	height: 15px;
	stroke-width: 2.6;
}

.etapas-compra-item--atual {
	font-weight: 600;
	color: var(--ink);
}

.etapas-compra-item--atual .etapas-compra-num {
	border-color: var(--vinho);
	background: var(--vinho);
	color: #fff;
}

.etapas-compra-item--feita {
	font-weight: 500;
	color: var(--vinho);
}

.etapas-compra-item--feita .etapas-compra-num {
	border-color: var(--vinho);
	color: var(--vinho);
}

.etapas-compra-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: -8px 0;
	border-radius: var(--raio-sm);
	color: inherit;
}

.etapas-compra-link:hover .etapas-compra-rotulo {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 640px) {
	.etapas-compra {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 0;
		margin-top: 8px;
		font-size: 12.5px;
	}

	.etapas-compra-item,
	.etapas-compra-link {
		flex-direction: column;
		gap: 5px;
		text-align: center;
	}

	.etapas-compra-link {
		min-height: 0;
		margin: 0;
	}

	/* Traço do círculo anterior até este, na altura dos círculos */
	.etapas-compra-item + .etapas-compra-item::before {
		position: absolute;
		top: 13px;
		right: calc(50% + 20px);
		width: calc(100% - 40px);
		margin: 0;
	}
}

/* Página do carrinho ---- */
.carrinho-pagina {
	padding: var(--respiro-topo) 0 var(--section);
}

/* Vazio: os destaques vêm logo abaixo, sem o respiro inteiro de seção */
.carrinho-pagina:not(.carrinho-pagina--itens) {
	padding-bottom: clamp(32px, 4vw, 56px);
}

.carrinho-pagina .alertas {
	margin-bottom: 20px;
}

.carrinho-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
}

.carrinho-lista {
	padding: 4px clamp(16px, 2.4vw, 28px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio);
	box-shadow: var(--sombra-1);
}

.carrinho-lista .linha {
	grid-template-columns: 96px minmax(0, 1fr) auto;
	column-gap: 20px;
	padding: 20px 0;
}

.carrinho-lista .linha-nome {
	font-size: 16px;
}

.carrinho-lista .linha-total {
	font-size: 18px;
}

.carrinho-continuar {
	margin-top: 10px;
}

/* Resumo (carrinho, checkout, WhatsApp e pedido): cartão branco com o filete da marca, fixo ao rolar */
.resumo {
	position: sticky;
	top: calc(var(--header-h) + 24px);
	padding: clamp(20px, 2.4vw, 28px);
	background: #fff;
	border: 1px solid var(--line);
	border-top: 4px solid var(--brand);
	border-radius: var(--raio);
	box-shadow: var(--sombra-1);
}

.resumo h2 {
	margin-bottom: 14px;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--ink);
}

.resumo-linhas {
	display: grid;
	gap: 10px;
	padding: 16px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	font-size: 15px;
}

.resumo-linhas div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.resumo-linhas dt {
	color: var(--muted);
}

.resumo-linhas dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.resumo-linhas .desconto dd {
	font-weight: 600;
	color: var(--ok);
}

.resumo-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 18px 0;
	font-size: 15px;
	font-weight: 500;
}

.resumo-total strong {
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--ink);
}

.resumo-seguro {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--muted);
	text-align: center;
}

.resumo-seguro :is(.icon, .icon-fill) {
	flex: none;
	color: var(--ok);
}

.formas-pagamento {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
}

.formas-pagamento span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 12.5px;
	color: color-mix(in srgb, var(--muted) 70%, var(--ink));
}

/* Barra fixa do celular (total e "Finalizar compra"): só existe até 991 px */
.carrinho-barra {
	display: none;
}

/* Carrinho vazio: o mascote em pé na base do cartão, título no letreiro e as saídas para a vitrine */
.carrinho-vazio {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: end;
	gap: 0 clamp(24px, 4vw, 48px);
	padding: clamp(24px, 4vw, 40px) clamp(24px, 4vw, 48px) 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio-lg);
	box-shadow: var(--sombra-1);
	overflow: hidden;
}

.carrinho-vazio-mascote {
	width: clamp(140px, 15vw, 190px);
	height: auto;
}

.carrinho-vazio-texto {
	align-self: center;
	padding-bottom: clamp(24px, 4vw, 40px);
}

.carrinho-vazio-titulo {
	margin-bottom: 10px;
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	color: var(--ink);
}

.carrinho-vazio-texto > p {
	max-width: 52ch;
	margin-bottom: 20px;
	font-size: 16.5px;
	color: var(--muted);
}

@media (max-width: 991px) {
	.carrinho-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.resumo {
		position: static;
	}

	/* O botão do resumo fica na barra fixa; o resumo continua com o detalhe dos valores */
	.carrinho-resumo-acao {
		display: none;
	}

	/* A barra fixa soma a própria altura ao espaço da barra inferior no fim da página: sem isso ela cobriria
	   os links legais do rodapé inferior */
	body:has(.carrinho-barra) {
		padding-bottom: calc(var(--tabbar-h, 0px) + 73px);
	}

	/* Foco pelo teclado e âncoras param acima das duas barras fixas, nunca atrás delas */
	html:has(.carrinho-barra) {
		scroll-padding-bottom: calc(var(--tabbar-h, 0px) + 73px + 16px);
	}

	.carrinho-pagina--itens {
		padding-bottom: calc(var(--section) * 0.5);
	}

	.carrinho-barra {
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--tabbar-h, 0px);
		z-index: 96;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px var(--gutter);
		background: #fff;
		border-top: 1px solid var(--line);
		box-shadow: 0 -6px 18px rgba(20, 20, 20, 0.08);
	}

	.carrinho-barra-total {
		display: flex;
		flex-direction: column;
		min-width: 0;
		line-height: 1.2;
	}

	.carrinho-barra-total span {
		font-size: 12.5px;
		color: var(--muted);
	}

	.carrinho-barra-total strong {
		font-size: 21px;
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
		color: var(--ink);
	}

	.carrinho-barra .btn {
		flex: none;
		padding-inline: 22px;
	}

	/* A bola elevada do WhatsApp da barra inferior subiria por cima da barra do total: nesta página ela fica
	   no nível dos outros atalhos (contorno na seção do carrinho; a barra inferior é do topo/rodapé) */
	body:has(.carrinho-barra) .tabbar-cta-bola {
		width: 34px;
		height: 34px;
		margin-top: 0;
		border: 0;
		box-shadow: none;
	}

	body:has(.carrinho-barra) .tabbar-cta-bola .icon-fill {
		width: 19px;
		height: 19px;
	}
}

@media (max-width: 640px) {
	/* Foto e dados em cima; quantidade, remover e o total da linha embaixo, de ponta a ponta */
	.carrinho-lista .linha {
		grid-template-columns: 76px minmax(0, 1fr) auto;
		grid-template-areas:
			'img info info'
			'controles controles total';
		column-gap: 14px;
		row-gap: 12px;
		padding: 16px 0;
	}

	.carrinho-lista .linha-nome {
		font-size: 15px;
	}

	.carrinho-lista .linha-total {
		align-self: center;
		font-size: 17px;
	}

	/* "Remover" vira só a lixeira (44 px, o nome continua no aria-label): cabe na linha da quantidade */
	.carrinho-lista .linha-remover {
		justify-content: center;
		width: 44px;
		min-height: 44px;
		padding: 0;
		border: 1px solid var(--line-strong);
	}

	.carrinho-lista .linha-remover span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.carrinho-lista .linha-remover .icon {
		width: 19px;
		height: 19px;
	}

	.carrinho-vazio {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		padding-top: 28px;
		text-align: center;
	}

	.carrinho-vazio-mascote {
		order: 2;
		width: 124px;
	}

	.carrinho-vazio-texto {
		padding-bottom: 16px;
	}

	.carrinho-vazio .btn-row {
		flex-direction: column;
	}
}

/* Formulários --------------------------------------------------------------- */

/* Campos de 48 px com cantos levemente arredondados; no foco, borda na cor da marca e halo --foco */
.campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.campo label,
.campo .rotulo-campo {
	font-size: 14px;
	font-weight: 500;
	color: var(--text);
}

.campo label small {
	font-weight: 400;
	color: var(--muted);
}

.campo input,
.campo select,
.campo textarea {
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	border: 1px solid var(--line-strong);
	border-radius: var(--raio-sm);
	background: #fff;
	font-size: 16px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.campo textarea {
	min-height: 96px;
	resize: vertical;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--foco);
}

.campo input[aria-invalid='true'],
.campo select[aria-invalid='true'] {
	border-color: var(--danger);
}

.campo .erro {
	font-size: 13px;
	font-weight: 500;
	color: var(--danger);
}

.campo .ajuda {
	font-size: 12.5px;
	color: var(--muted);
}

.campos {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}

.campos > .c-6 {
	grid-column: span 6;
}

.campos > .c-4 {
	grid-column: span 4;
}

.campos > .c-3 {
	grid-column: span 3;
}

.campos > .c-2 {
	grid-column: span 2;
}

.check {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 12px;
	align-items: start;
	font-size: 14.5px;
	cursor: pointer;
}

.check input {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--brand);
}

.check a {
	color: var(--brand);
	border-bottom: 1px solid currentColor;
}

.campo-cupom {
	display: flex;
	gap: 8px;
}

.campo-cupom input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--line-strong);
	border-radius: var(--raio-sm);
	font-size: 15px;
	text-transform: uppercase;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.campo-cupom input:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--foco);
}

.campo-cupom .btn {
	min-height: 48px;
}

@media (max-width: 640px) {
	.campos > .c-4,
	.campos > .c-3,
	.campos > .c-2 {
		grid-column: span 6;
	}

	.campos > .c-meia {
		grid-column: span 3;
	}
}

/* Checkout ----------------------------------------------------------------- */

/* Modo checkout (checkout, WhatsApp e pagamento): o cabeçalho claro das páginas internas com o título em
   Jost (o letreiro fica para a vitrine) e as etapas; cartões brancos numerados em círculo vinho e o
   resumo fixo ao rolar com o filete da marca. */
.checkout-titulo {
	margin-bottom: 2px;
	font-size: clamp(22px, 1rem + 0.7vw, 28px);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--ink);
}

.checkout-cabeca .lead {
	font-size: 14.5px;
}

.checkout {
	padding: var(--respiro-topo) 0 var(--section);
}

.checkout-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
}

.etapa {
	padding: clamp(20px, 2.6vw, 32px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio);
	box-shadow: var(--sombra-1);
}

.etapa + .etapa {
	margin-top: 16px;
}

.etapa-titulo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

/* Número da etapa (ou ícone, no WhatsApp) no círculo vinho das artes: branco sobre vinho, 10:1 */
.etapa-num {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--vinho);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.etapa-num :is(.icon, .icon-fill) {
	width: 18px;
	height: 18px;
}

.etapa-titulo h2 {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--ink);
}

.opcoes-entrega {
	display: grid;
	gap: 10px;
}

.opcao-entrega {
	position: relative;
	display: grid;
	grid-template-columns: 22px 1fr auto;
	gap: 14px;
	align-items: start;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--line-strong);
	border-radius: var(--raio-sm);
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.opcao-entrega:hover {
	border-color: var(--ink);
}

.opcao-entrega input {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--brand);
}

/* Escolhida: contorno da marca e um fundo levemente avermelhado */
.opcao-entrega:has(input:checked) {
	border-color: var(--brand);
	background: color-mix(in srgb, var(--brand) 5%, #fff);
	box-shadow: inset 0 0 0 1px var(--brand);
}

.opcao-entrega strong {
	display: block;
	font-weight: 600;
}

.opcao-entrega small {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--muted);
}

.opcao-entrega .valor {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.opcao-entrega .valor--gratis {
	color: var(--ok);
}

.cep-linha {
	display: flex;
	gap: 8px;
	align-items: flex-end;
}

.cep-linha .campo {
	flex: 0 1 220px;
}

/* "Calcular" (só sem JavaScript) com a altura exata do campo ao lado: os dois em 48 px (o campo padrão
   passaria disso pela altura de linha herdada) */
.cep-linha .campo input,
.cep-linha .btn {
	height: 48px;
	min-height: 48px;
}

.cep-linha .btn {
	flex: none;
}

.endereco {
	margin-top: 16px;
}

.pagamento-info {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 16px;
	align-items: start;
	padding: 18px;
	background: var(--ivory);
	border-radius: var(--raio-sm);
}

.pagamento-info > :is(.icon, .icon-fill) {
	width: 32px;
	height: 32px;
	stroke-width: 1.4;
	color: var(--vinho);
}

.pagamento-info p + p {
	margin-top: 6px;
	font-size: 14px;
	color: var(--muted);
}

.metodos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.metodos span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 13px;
}

.checkout-resumo-itens {
	max-height: 320px;
	overflow-y: auto;
	margin-bottom: 8px;
}

.checkout-resumo .campo {
	margin-top: 4px;
}

/* Cupom aceito: verde (o .campo .ajuda dos formulários deixaria cinza) */
.checkout-resumo .cupom-ok {
	font-weight: 600;
	color: var(--ok);
}

/* Finalizar pelo WhatsApp (pagamento online fechado) ---- */
/* No HTML, o resumo com o botão de envio vem antes da explicação e da retirada/entrega (no celular o botão
   aparece logo abaixo das etapas); no desktop fica na coluna da direita, ao lado dos dois cartões, que a
   grade põe nas linhas 1 e 2 da coluna da esquerda. */
.checkout-grid--whats {
	grid-template-rows: auto 1fr;
	row-gap: 16px;
}

.checkout-grid--whats > .etapa {
	grid-column: 1;
}

.checkout-grid--whats > .checkout-resumo {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.passos-whats {
	display: grid;
	gap: 14px;
	margin-top: 20px;
	counter-reset: passo;
}

.passos-whats li {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 14px;
	align-items: start;
	counter-increment: passo;
}

.passos-whats li::before {
	content: counter(passo);
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--vinho);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

.passos-whats p {
	padding-top: 5px;
}

.passos-whats strong {
	font-weight: 600;
}

.etapa .vantagens-compra {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

@media (max-width: 991px) {
	.checkout-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.checkout-grid--whats {
		grid-template-rows: none;
	}

	.checkout-grid--whats > :is(.etapa, .checkout-resumo) {
		grid-column: auto;
		grid-row: auto;
	}
}

@media (max-width: 640px) {
	.cep-linha .campo {
		flex: 1 1 auto;
		min-width: 0;
	}

	.pagamento-info {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 16px;
	}
}

/* Alertas e mensagens ------------------------------------------------------- */

/* Caixa de aviso com cantos arredondados, filete da cor do estado à esquerda e texto em --text */
.alerta {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 12px;
	align-items: start;
	padding: 14px 16px;
	border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	border-left: 4px solid currentColor;
	border-radius: var(--raio-sm);
	font-size: 15px;
	line-height: 1.5;
	background: var(--info-bg);
	color: var(--info);
}

.alerta > * {
	color: var(--text);
}

.alerta > .icon,
.alerta > .icon-fill {
	color: inherit;
	width: 20px;
	height: 20px;
	margin-top: 1px;
}

.alerta + .alerta {
	margin-top: 10px;
}

.alerta--erro {
	background: var(--danger-bg);
	color: var(--danger);
}

.alerta--aviso {
	background: var(--warn-bg);
	color: var(--warn);
}

.alerta--ok {
	background: var(--ok-bg);
	color: var(--ok);
}

.alertas {
	margin-bottom: 24px;
}

/* No celular sobe acima da barra inferior (--tabbar-h só existe até 991 px). O aviso não recebe clique
   (pointer-events): o que estiver embaixo dele continua tocável */
.toast {
	position: fixed;
	left: 50%;
	bottom: calc(var(--tabbar-h, 12px) + 16px);
	z-index: 250;
	pointer-events: none;
	max-width: min(480px, calc(100vw - 32px));
	padding: 14px 20px;
	border-radius: var(--raio);
	background: var(--ink);
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	box-shadow: var(--sombra-3);
	transform: translate(-50%, 20px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}

.toast.is-visivel {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* Com a gaveta, o menu ou os filtros abertos (sem-rolagem), o aviso vai para o alto da tela: embaixo ficam
   "Finalizar compra" e "Ver carrinho" da gaveta */
body.sem-rolagem .toast {
	top: calc(16px + env(safe-area-inset-top));
	bottom: auto;
	transform: translate(-50%, -20px);
}

body.sem-rolagem .toast.is-visivel {
	transform: translate(-50%, 0);
}

.toast--erro {
	background: var(--danger);
}

/* Pedido ------------------------------------------------------------------- */

.pedido-topo {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px 32px;
}

.pedido-topo p {
	margin-top: 6px;
	color: var(--apoio-cor, var(--muted));
}

.pedido-topo .selo {
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
}

/* Situação do pedido na faixa vinho das artes: ícone no círculo ouro, título no letreiro, texto branco
   (10:1) e o sol das artes bem apagado no canto. Pedido encerrado (cancelado, expirado, estornado) vai
   para o grafite. O loja.js acompanha o pagamento por data-acompanhar-pedido e tira o .aguardando. */
.status-destaque {
	position: relative;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
	padding: clamp(22px, 3vw, 34px);
	overflow: hidden;
	border-radius: var(--raio);
	background: var(--vinho);
	color: #fff;
	box-shadow: var(--sombra-2);
}

.status-destaque > :not(.status-destaque-sol) {
	position: relative;
}

.status-destaque-sol {
	position: absolute;
	top: -56px;
	right: -36px;
	width: 230px;
	color: var(--ouro);
	opacity: 0.14;
}

.status-destaque-icone {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--ouro);
	color: var(--ink);
}

.status-destaque-icone .icon {
	width: 28px;
	height: 28px;
	stroke-width: 1.8;
}

.status-destaque h2 {
	margin: 4px 0 10px;
	font-family: var(--letreiro);
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
	font-weight: 400;
	font-synthesis: none;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
}

.status-destaque p {
	max-width: 64ch;
	color: rgba(255, 255, 255, 0.92);
}

.status-destaque .btn-row {
	margin-top: 20px;
}

.status-destaque :focus-visible {
	outline-color: #fff;
}

.status-destaque .aguardando {
	color: rgba(255, 255, 255, 0.88);
}

.status-destaque--alerta {
	background: var(--ink-2);
}

.status-destaque--alerta .status-destaque-icone {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.status-destaque--alerta .status-destaque-sol {
	color: #fff;
	opacity: 0.06;
}

.aguardando {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	font-size: 13.5px;
	color: var(--muted);
}

.aguardando::before {
	content: '';
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: girar 1s linear infinite;
}

/* Linha do tempo num cartão: feitas em vinho com ✓, a atual com o anel da marca, as próximas em cinza */
.linha-tempo {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin-top: 16px;
	padding: 22px 12px 18px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio);
	box-shadow: var(--sombra-1);
}

.linha-tempo li {
	position: relative;
	padding: 34px 4px 0;
	font-size: 13px;
	line-height: 1.35;
	color: var(--muted);
	text-align: center;
}

.linha-tempo li::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 50%;
	z-index: 1;
	width: 24px;
	height: 24px;
	border: 2px solid var(--sand);
	border-radius: 50%;
	background: #fff;
	transform: translateX(-50%);
}

.linha-tempo li::after {
	content: '';
	position: absolute;
	top: 13px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: var(--stone);
}

.linha-tempo li:first-child::after {
	display: none;
}

.linha-tempo li.feito {
	color: var(--text);
}

.linha-tempo li.feito::before {
	border-color: var(--vinho);
	background: var(--vinho) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.linha-tempo li:is(.feito, .atual)::after {
	background: var(--vinho);
}

.linha-tempo li.atual {
	font-weight: 600;
	color: var(--ink);
}

.linha-tempo li.atual::before {
	border: 7px solid var(--brand);
	box-shadow: 0 0 0 4px var(--foco);
}

.pedido-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
}

.cartao {
	padding: clamp(20px, 2.6vw, 28px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio);
	box-shadow: var(--sombra-1);
}

.cartao + .cartao {
	margin-top: 16px;
}

.cartao-titulo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--ink);
}

.cartao-icone {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--vinho) 10%, #fff);
	color: var(--vinho);
}

.cartao-icone .icon {
	width: 18px;
	height: 18px;
}

/* Itens do pedido: sem foto (o pedido guarda nome, opção, código e valores) */
.linha--pedido {
	grid-template-areas: 'info total';
}

.cartao .linha:last-child {
	padding-bottom: 0;
}

.pedido-pagina {
	padding: var(--respiro-topo) 0 var(--section);
}

.dados {
	display: grid;
	gap: 14px;
	font-size: 15px;
}

.dados div {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 12px;
}

.dados dt {
	color: var(--muted);
	font-size: 13.5px;
}

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

.pedido-resumo .dados {
	padding-top: 4px;
}

.pedido-resumo .dados div {
	grid-template-columns: auto 1fr;
}

.eventos {
	display: grid;
	gap: 14px;
}

.eventos li {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 14px;
	font-size: 14.5px;
}

.eventos time {
	font-size: 13px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* Tela de acesso (e-mail e CPF, e as telas de entrar, código e cadastro da conta): cartão branco com o
   filete da marca. Compacto, com o ícone ao lado do título, para o formulário e o botão caberem na tela. */
.acesso-pedido {
	max-width: 560px;
	margin: 0 auto;
	padding: clamp(18px, 2.4vw, 28px);
	background: #fff;
	border: 1px solid var(--line);
	border-top: 4px solid var(--brand);
	border-radius: var(--raio);
	box-shadow: var(--sombra-1);
}

.acesso-pedido-cabeca {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.acesso-pedido-icone {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--vinho);
	color: #fff;
}

.acesso-pedido-icone .icon {
	width: 20px;
	height: 20px;
}

.acesso-pedido h1,
.acesso-pedido h2 {
	margin: 0;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--ink);
}

.acesso-pedido-texto {
	color: var(--muted);
}

@media (max-width: 991px) {
	.pedido-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.status-destaque {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.status-destaque-icone {
		width: 48px;
		height: 48px;
	}

	.status-destaque .btn-row .btn {
		flex: 1 1 auto;
	}

	/* Linha do tempo em pé: círculo à esquerda e o traço descendo até o próximo */
	.linha-tempo {
		grid-template-columns: minmax(0, 1fr);
		padding: 18px 18px 6px;
	}

	.linha-tempo li {
		min-height: 40px;
		padding: 3px 0 14px 38px;
		text-align: left;
	}

	.linha-tempo li::before {
		top: 0;
		left: 0;
		transform: none;
	}

	.linha-tempo li::after {
		top: -100%;
		left: 11px;
		width: 2px;
		height: 100%;
	}

	.dados div,
	.eventos li {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}

/* Pagamento (passagem para o Mercado Pago e pagamento simulado) ---- */
.redirecionando {
	min-height: calc(100vh - var(--header-h) - 61px);
	padding: clamp(24px, 4vw, 48px) 0 var(--section);
	background:
		linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)),
		var(--marmore) url('../midia/marmore.webp') repeat;
	background-size: auto, 900px auto;
}

.redirecionando .etapas-compra {
	justify-content: center;
	margin: 0 0 20px;
}

.redirecionando-cartao {
	max-width: 640px;
	margin: 0 auto;
	padding: clamp(28px, 4vw, 48px);
	background: #fff;
	border: 1px solid var(--line);
	border-top: 4px solid var(--brand);
	border-radius: var(--raio);
	box-shadow: var(--sombra-2);
	text-align: center;
}

.redirecionando-icone {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--vinho);
	color: #fff;
}

.redirecionando-icone .icon {
	width: 30px;
	height: 30px;
	stroke-width: 1.6;
}

.redirecionando-icone--alerta {
	background: var(--danger-bg);
	color: var(--danger);
}

.redirecionando h1 {
	margin-bottom: 12px;
	font-size: clamp(26px, 1.2rem + 1.2vw, 34px);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--ink);
}

.redirecionando-cartao > p:not(.aguardando) {
	max-width: 52ch;
	margin: 0 auto 24px;
	color: var(--muted);
}

.redirecionando .btn-row {
	justify-content: center;
}

@media (max-width: 640px) {
	.redirecionando .btn-row .btn {
		flex: 1 1 100%;
	}
}

.faixa-teste {
	padding: 10px var(--gutter);
	background: var(--warn-bg);
	color: var(--warn);
	font-size: 13.5px;
	font-weight: 600;
	text-align: center;
}

/* Página de erro (404, 400, 429, 500) ---- */
/* Sobre o mármore: cartão branco com o mascote em pé na base, o título no letreiro, a busca (menos no 429,
   em que buscar de novo só estouraria o limite) e as saídas para a loja */
.pagina-erro {
	padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 6vw, 80px);
	background:
		linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)),
		var(--marmore) url('../midia/marmore.webp') repeat;
	background-size: auto, 900px auto;
}

.pagina-erro-cartao {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: end;
	gap: 0 clamp(24px, 4vw, 56px);
	max-width: 1000px;
	margin: 0 auto;
	padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 48px) 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio-lg);
	box-shadow: var(--sombra-2);
	overflow: hidden;
}

.pagina-erro-mascote {
	width: clamp(160px, 18vw, 230px);
	height: auto;
}

/* O sol das artes no alto, acima do mascote (como no canto do banner) */
.pagina-erro-sol {
	position: absolute;
	top: clamp(24px, 3vw, 40px);
	left: clamp(40px, 5vw, 72px);
	width: clamp(64px, 7vw, 96px);
}

.erro-busca-botao .icon {
	width: 21px;
	height: 21px;
}

.pagina-erro-texto {
	align-self: center;
	min-width: 0;
	padding-bottom: clamp(28px, 4vw, 48px);
}

.pagina-erro-titulo {
	margin-bottom: 12px;
	font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
	color: var(--ink);
}

.pagina-erro-descricao {
	max-width: 52ch;
	margin-bottom: 20px;
	font-size: 17px;
	color: var(--muted);
}

/* Busca como a do topo: campo branco com a borda da marca e o botão vermelho colado */
.erro-busca {
	display: flex;
	max-width: 560px;
	height: 52px;
	margin-bottom: 18px;
	background: #fff;
	border: 2px solid var(--brand);
	border-radius: var(--raio-sm);
	overflow: hidden;
}

.erro-busca:focus-within {
	outline: 2px solid var(--brand);
	outline-offset: 3px;
}

.erro-busca input {
	flex: 1;
	min-width: 0;
	padding: 0 16px;
	border: 0;
	background: none;
	font-size: 16px;
}

.erro-busca input:focus {
	outline: none;
}

.erro-busca-botao {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 20px;
	border: 0;
	background: var(--brand);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	transition: background-color 0.2s;
}

.erro-busca-botao:hover {
	background: var(--brand-deep);
}

/* Contorno branco por dentro do botão (por fora ele cairia sobre a borda vermelha da caixa) */
.erro-busca-botao:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -5px;
}

.pagina-erro-rotulo {
	margin: 24px 0 10px;
}

.pagina-erro-categorias {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pagina-erro-categorias a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 14px;
	background: #fff;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	transition: border-color 0.2s, color 0.2s;
}

.pagina-erro-categorias a:hover {
	border-color: var(--brand);
	color: var(--brand);
}

.pagina-erro-ajuda {
	margin-top: 20px;
	font-size: 14.5px;
	color: var(--muted);
}

@media (pointer: coarse) {
	.pagina-erro-categorias a {
		min-height: 44px;
	}
}

@media (max-width: 767px) {
	.pagina-erro-cartao {
		grid-template-columns: minmax(0, 1fr);
	}

	.pagina-erro-mascote {
		order: 2;
		justify-self: center;
		width: 132px;
	}

	.pagina-erro-sol {
		display: none;
	}

	.pagina-erro-texto {
		padding-bottom: 16px;
	}

	.pagina-erro .btn-row .btn {
		flex: 1 1 auto;
	}
}

@media (max-width: 640px) {
	/* Só a lupa na tela estreita; "Buscar" continua como nome do botão */
	.erro-busca-botao span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.erro-busca-botao {
		padding: 0 16px;
	}
}

/* Textos institucionais */
/* Como comprar, trocas, privacidade e termos: o texto num cartão branco (como um documento) abaixo do
   cabeçalho claro, em Jost com medida de ~70 caracteres; subtítulos no letreiro das artes, marcadores com
   a estrela rústica e o passo a passo numerado no círculo vinho (como no checkout). */
.institucional {
	padding-top: var(--respiro-topo);
}

/* Cabeçalho e texto no container padrão, alinhados à esquerda como na listagem, no carrinho e no produto:
   só o cartão do texto é estreito (a linha já fica em ~70 caracteres) */
.prosa {
	max-width: 880px;
	padding: clamp(22px, 5vw, 56px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio);
	box-shadow: var(--sombra-1);
	font-size: 16.5px;
	line-height: 1.75;
}

.prosa > * {
	max-width: 70ch;
}

.prosa h2 {
	margin: 44px 0 14px;
	font-family: var(--letreiro);
	font-size: clamp(26px, 1.4rem + 0.6vw, 30px);
	font-weight: 400;
	font-synthesis: none;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--ink);
}

.prosa > h2:first-child,
.prosa > .alertas + h2 {
	margin-top: 0;
}

.prosa h3 {
	margin: 26px 0 8px;
	font-family: var(--sans);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--ink);
}

.prosa strong {
	font-weight: 600;
}

.prosa p + p,
.prosa ul + p,
.prosa ol + p,
.prosa p + ul {
	margin-top: 14px;
}

.prosa ul {
	display: grid;
	gap: 10px;
}

.prosa ul li {
	position: relative;
	padding-left: 26px;
}

/* Marcador: a estrela das artes na cor da marca */
.prosa ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 13px;
	height: 13px;
	background: var(--brand);
	-webkit-mask: url('../midia/estrela.webp') no-repeat center / contain;
	mask: url('../midia/estrela.webp') no-repeat center / contain;
}

.prosa .passos {
	display: grid;
	gap: 16px;
	counter-reset: passo;
}

.prosa .passos li {
	position: relative;
	min-height: 34px;
	padding: 3px 0 0 50px;
	counter-increment: passo;
}

.prosa .passos li::before {
	content: counter(passo);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--vinho);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
}

.prosa a {
	color: var(--brand);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s;
}

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

.prosa .atualizado {
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-size: 13.5px;
	color: var(--muted);
}

@media (max-width: 640px) {
	/* No celular o cartão vai de borda a borda: a medida do texto ganha os 40 px das margens */
	.prosa {
		margin-inline: calc(var(--gutter) * -1);
		padding: 26px var(--gutter) 30px;
		border-inline: 0;
		border-radius: 0;
		font-size: 16px;
		line-height: 1.7;
	}

	.prosa .passos li {
		padding-left: 46px;
	}

	.prosa h2 {
		margin-top: 36px;
	}
}

/* Alto contraste: a estrela (máscara) sumiria; volta a um marcador sólido */
@media (forced-colors: active) {
	.prosa ul li::before {
		forced-color-adjust: none;
		background: CanvasText;
		-webkit-mask: none;
		mask: none;
		border-radius: 50%;
		width: 7px;
		height: 7px;
		top: 0.75em;
	}
}

/* Página Sobre ---- */
/* "Sobre a loja": a foto da loja e o texto (no cartão branco das páginas institucionais) à esquerda; à
   direita, o cartão da visita com endereço, rota no Google Maps (link externo, sem mapa embutido), horário,
   contatos e dados legais. No celular, um embaixo do outro, de borda a borda como o texto. */
.sobre-grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
}

.sobre-principal {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
	min-width: 0;
}

.sobre-foto {
	margin: 0;
}

.sobre-foto img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border: 1px solid var(--line);
	border-radius: var(--raio-lg);
	background: var(--ivory);
	box-shadow: var(--sombra-2);
}

/* O cartão ocupa a coluna: a medida do texto (~70 caracteres) já vem do .prosa > * */
.sobre-texto {
	max-width: none;
}

.sobre-avaliacoes {
	margin-top: 24px;
}

.sobre-cartao {
	padding: clamp(20px, 2.4vw, 28px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio);
	box-shadow: var(--sombra-1);
}

.sobre-cartao-titulo {
	margin-bottom: 14px;
	font-family: var(--letreiro);
	font-size: 24px;
	font-weight: 400;
	font-synthesis: none;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--ink);
}

.sobre-dados + .sobre-cartao-titulo {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

.sobre-dados {
	display: grid;
	gap: 12px;
}

.sobre-dados li {
	display: flex;
	gap: 12px;
	line-height: 1.5;
}

.sobre-dados li > .icon,
.sobre-dados li > .icon-fill {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--brand);
}

.sobre-dados-linha {
	display: block;
}

.sobre-dados li > a {
	color: var(--text);
	text-decoration: underline;
	text-decoration-color: var(--line-strong);
	text-underline-offset: 3px;
	transition: color 0.2s, text-decoration-color 0.2s;
}

.sobre-dados li > a:hover {
	color: var(--brand);
	text-decoration-color: currentColor;
}

/* "Como chegar": 44 px de alvo, colado ao endereço (a margem negativa devolve a sobra) */
.sobre-rota {
	margin: -6px 0 -10px;
}

.sobre-rota .icon {
	width: 16px;
	height: 16px;
}

.sobre-legal {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--muted);
}

@media (max-width: 991px) {
	.sobre-grade {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Celular: foto, texto e cartão da visita de borda a borda (como o .prosa); a foto vira a capa do texto */
@media (max-width: 640px) {
	.sobre-principal {
		gap: 0;
	}

	.sobre-foto {
		margin-inline: calc(var(--gutter) * -1);
	}

	.sobre-foto img {
		border-inline: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.sobre-cartao {
		margin-inline: calc(var(--gutter) * -1);
		padding: 24px var(--gutter) 26px;
		border-inline: 0;
		border-radius: 0;
	}
}

/* Para marmorarias ---- */
/* "Para marmorarias e profissionais": vantagens em cartões brancos com o ícone no círculo da marca (como a
   faixa de benefícios), atalhos para as categorias de insumos e acessórios e a chamada final com o mascote.
   Também a chamada da página inicial (antes de "Monte o projeto completo") e o link da barra de
   departamentos. */
.profissional-cabeca-acoes {
	margin-top: 16px;
}

.profissional-vantagens {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
}

.profissional-vantagem {
	padding: 22px 20px 24px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio);
	box-shadow: var(--sombra-1);
}

.profissional-vantagem-icone,
.chamada-profissional-icone {
	display: grid;
	place-items: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
}

.profissional-vantagem-icone {
	margin-bottom: 14px;
}

.profissional-vantagem-icone .icon {
	width: 24px;
	height: 24px;
}

.profissional-vantagem h3 {
	margin-bottom: 6px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}

.profissional-vantagem p {
	font-size: 15px;
	line-height: 1.5;
	color: var(--muted);
}

/* Celular: ícone ao lado do texto, para as vantagens não virarem uma coluna de cartões altos */
@media (max-width: 640px) {
	.profissional-vantagens {
		gap: 10px;
	}

	.profissional-vantagem {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 14px;
		padding: 16px;
	}

	.profissional-vantagem-icone {
		grid-row: span 2;
		width: 40px;
		height: 40px;
		margin-bottom: 0;
	}

	.profissional-vantagem-icone .icon {
		width: 20px;
		height: 20px;
	}

	.profissional-vantagem h3 {
		margin-bottom: 2px;
		font-size: 16px;
	}

	.profissional-vantagem p {
		font-size: 14.5px;
	}
}

.profissional-atalhos {
	padding-top: 0;
}

.profissional-categorias {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 12px;
}

.profissional-categoria {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 100%;
	padding: 12px 18px 12px 12px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio);
	box-shadow: var(--sombra-1);
	color: var(--text);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.profissional-categoria:hover {
	border-color: var(--brand);
	box-shadow: var(--sombra-2);
}

.profissional-categoria-foto {
	display: grid;
	place-items: center;
	flex: none;
	width: 72px;
	height: 72px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--raio-sm);
}

.profissional-categoria-foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* Categoria sem foto: a estrela das artes no lugar */
.profissional-categoria-foto .ornamento {
	width: 50%;
}

.profissional-categoria-texto {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.profissional-categoria-texto strong {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
	transition: color 0.2s;
}

.profissional-categoria-texto span {
	font-size: 13.5px;
	color: var(--muted);
}

.profissional-categoria > .icon {
	flex: none;
	color: var(--brand);
	transition: transform 0.2s var(--ease);
}

.profissional-categoria:hover strong {
	color: var(--brand);
}

.profissional-categoria:hover > .icon {
	transform: translateX(3px);
}

/* Chamada da página inicial: no fundo da página, com o fio em cima (como as marcas), antes do mármore da
   chamada final */
.chamada-profissional {
	padding: clamp(32px, 4vw, 52px) 0;
	border-top: 1px solid var(--line);
}

.chamada-profissional-conteudo {
	display: flex;
	align-items: center;
	gap: 16px clamp(20px, 3vw, 36px);
}

.chamada-profissional-icone {
	width: 64px;
	height: 64px;
}

.chamada-profissional-icone .icon {
	width: 30px;
	height: 30px;
}

.chamada-profissional-texto {
	flex: 1;
	min-width: 0;
}

.chamada-profissional-texto p {
	max-width: 640px;
	margin-top: 8px;
	color: var(--muted);
}

.chamada-profissional-botao {
	flex: none;
}

@media (max-width: 767px) {
	.chamada-profissional-conteudo {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.chamada-profissional-icone {
		width: 48px;
		height: 48px;
	}

	.chamada-profissional-icone .icon {
		width: 24px;
		height: 24px;
	}

	.chamada-profissional-botao {
		flex: 1 1 100%;
	}
}

@media (max-width: 640px) {
	.chamada-profissional {
		padding: 24px 0;
	}

	.chamada-profissional-conteudo {
		gap: 12px 14px;
	}

	.chamada-profissional-icone {
		width: 40px;
		height: 40px;
	}

	.chamada-profissional-icone .icon {
		width: 20px;
		height: 20px;
	}

	.chamada-profissional-texto p {
		margin-top: 6px;
		font-size: 14px;
		line-height: 1.5;
	}
}

/* Barra de departamentos: "Para marmorarias" é o último item da lista (sai primeiro quando falta espaço, ver
   Barra de departamentos) e, cabendo, encosta em "Como comprar", com o mesmo fio separador. No celular é
   mais um chip da faixa que rola. */
.departamentos-item--profissional {
	margin-left: auto;
}

.departamentos-link--profissional {
	border-left: 1px solid rgba(255, 255, 255, 0.24);
}

@media (max-width: 991px) {
	.departamentos-item--profissional {
		margin-left: 0;
	}

	.departamentos-link--profissional {
		border-left: 0;
	}
}

/* Rodapé ------------------------------------------------------------------- */

/* Como a base das artes: a faixa "sertão" em mármore (mandacaru à esquerda, xique-xique cortado pela
   borda à direita e a revoada) e, colada nela, a onda vinho que sobe por cima da base dos desenhos.
   Rodapé em --vinho com texto branco (10:1), títulos no letreiro em ouro (5,9:1) e o rodapé inferior
   em --vinho-escuro com a linha legal. No modo checkout só o rodapé inferior aparece. */
.site-footer {
	--link-cor: #fff;
	--link-cor-hover: #fff;
	color: rgba(255, 255, 255, 0.88);
	font-size: 15px;
}

/* Faixa sertão ---- */
.faixa-sertao {
	position: relative;
	height: clamp(92px, 10.5vw, 156px);
	background: var(--marmore) url('../midia/marmore.webp') repeat;
	background-size: 900px auto;
	overflow: hidden;
}

.faixa-sertao .ornamento {
	position: absolute;
	bottom: 0;
}

.faixa-sertao-cacto {
	left: max(8px, calc((100% - var(--container)) / 2 - 24px));
	height: 96%;
}

.faixa-sertao-vegetacao {
	right: 0;
	height: 52%;
}

.faixa-sertao-passaros {
	right: clamp(150px, 22vw, 360px);
	bottom: auto;
	top: 16%;
	width: clamp(52px, 5.6vw, 88px);
}

.footer-corpo {
	--onda-altura: clamp(18px, 2.6vw, 40px);
	padding-top: clamp(36px, 4.6vw, 60px);
	background: var(--vinho);
}

/* Ofertas pelo WhatsApp: no alto do rodapé, antes das colunas, um painel sobre o vinho (contornado como os
   selos de pagamento) com a etiqueta de oferta no círculo ouro, o título no letreiro em ouro e o botão do
   WhatsApp. No celular, empilhado, com o botão na largura toda. */
.footer-ofertas {
	display: flex;
	align-items: center;
	gap: 16px 24px;
	margin-bottom: clamp(32px, 4vw, 48px);
	padding: clamp(18px, 2.2vw, 24px) clamp(18px, 2.6vw, 32px);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: var(--raio-lg);
	background: rgba(0, 0, 0, 0.14);
}

.footer-ofertas-icone {
	display: grid;
	place-items: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--ouro);
	color: var(--ink);
}

.footer-ofertas-icone .icon {
	width: 26px;
	height: 26px;
}

.footer-ofertas-texto {
	flex: 1;
	min-width: 0;
}

.site-footer .footer-ofertas h2 {
	margin-bottom: 4px;
	font-size: clamp(24px, 1.2rem + 0.7vw, 30px);
	line-height: 1.05;
}

.footer-ofertas p {
	line-height: 1.5;
}

/* Botão, e não link do rodapé: sem o sublinhado do hover dos links sobre o vinho */
.site-footer .footer-ofertas-botao {
	flex: none;
	color: #fff;
	text-decoration: none;
}

@media (max-width: 767px) {
	.footer-ofertas {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 14px 16px;
	}

	.footer-ofertas-icone {
		width: 44px;
		height: 44px;
	}

	.footer-ofertas-icone .icon {
		width: 22px;
		height: 22px;
	}

	.site-footer .footer-ofertas-botao {
		flex: 1 1 100%;
	}
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.25fr;
	gap: 40px;
	padding-bottom: clamp(40px, 5vw, 60px);
}

.footer-brand .brand {
	margin-bottom: 16px;
}

.footer-brand .brand-logo {
	height: 44px;
	max-width: 220px;
	line-height: 44px;
	color: #fff;
}

/* Slogan no letreiro, ladeado pelas estrelas em ouro */
.site-footer .footer-slogan {
	--estrela-cor: var(--ouro);
	margin: 0 0 14px;
	font-size: 21px;
	color: #fff;
}

.footer-descricao {
	max-width: 340px;
	margin-bottom: 22px;
	line-height: 1.6;
}

/* Ouro sobre vinho: 24 px (texto grande) para o contraste mínimo ser 3:1 mesmo com a cor do painel no limite */
.site-footer h2 {
	margin-bottom: 14px;
	font-size: 24px;
	color: var(--ouro);
}

.site-footer li + li {
	margin-top: 6px;
}

.site-footer ul a {
	display: inline-block;
	padding: 2px 0;
}

.site-footer a {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: color 0.2s, text-decoration-color 0.2s;
}

.site-footer a:hover {
	color: #fff;
	text-decoration-color: currentColor;
}

.footer-contact li {
	display: flex;
	gap: 12px;
}

.footer-contact .icon,
.footer-contact .icon-fill {
	margin-top: 5px;
	color: var(--ouro);
}

.footer-contact .stack {
	display: flex;
	flex-direction: column;
}

.footer-pagamento {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.footer-pagamento span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 999px;
	font-size: 13px;
	color: #fff;
}

.footer-pagamento .icon {
	color: var(--ouro);
}

.footer-bottom {
	background: var(--vinho-escuro);
	color: rgba(255, 255, 255, 0.84);
	font-size: 13px;
}

.footer-bottom-conteudo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 24px;
	padding-top: 16px;
	padding-bottom: 16px;
}

.footer-bottom nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
}

.footer-bottom nav a {
	display: inline-block;
	padding: 4px 0;
}

/* Foco sobre o vinho: contorno branco */
.site-footer :focus-visible {
	outline-color: #fff;
}

/* O círculo do WhatsApp flutuante (56 px, no canto inferior direito) só alcança os links legais quando a
   margem ao lado do container é menor que ele (até ~1340 px): aí o rodapé inferior recua o necessário para
   "Termos" não ficar embaixo dele (+12 px de folga); nas telas largas os links ficam na borda do container.
   O 100% é a largura do rodapé; o clamp() é o mesmo do right do .whats-float. */
@media (min-width: 992px) {
	.footer-bottom-conteudo {
		padding-right: max(var(--gutter), calc(clamp(16px, 2.4vw, 28px) + 68px - max(0px, (100% - var(--container)) / 2 - var(--gutter))));
	}

	.modo-checkout .footer-bottom-conteudo {
		padding-right: var(--gutter);
	}
}

/* No toque, cada link do rodapé ganha 44 px de alvo: 24 px de linha + 10 + 10 (os itens deixam de ter
   espaço entre si, o respiro passa a ser o próprio alvo). No atendimento, o item inteiro tem 44 px e o
   link ocupa a altura toda sem desalinhar o ícone da primeira linha. */
@media (max-width: 991px), (pointer: coarse) {
	.site-footer li + li {
		margin-top: 0;
	}

	.site-footer ul a {
		padding: 10px 0;
	}

	.footer-contact li {
		padding: 10px 0;
	}

	.footer-contact a {
		margin: -10px 0;
	}

	.footer-bottom nav a {
		padding: 12px 0;
	}
}

/* Celular: a bola do carrinho da barra inferior sobe ~20 px acima dela; o fim do rodapé inferior deixa
   esse respiro para ela não encostar nos links legais (no checkout não há barra inferior) */
@media (max-width: 991px) {
	.footer-bottom-conteudo {
		padding-bottom: 40px;
	}

	.modo-checkout .footer-bottom-conteudo {
		padding-bottom: 16px;
	}
}

/* Tablet: a marca numa linha e as três colunas de links embaixo */
@media (max-width: 1180px) {
	.footer-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px 28px;
	}

	.footer-brand {
		grid-column: 1 / -1;
	}
}

/* Celular: Categorias e Ajuda lado a lado; marca e atendimento na largura toda */
@media (max-width: 767px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 28px 20px;
	}

	.footer-grid > :last-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.faixa-sertao-passaros {
		right: 42%;
	}
}

/* WhatsApp flutuante */
/* Só no desktop: no celular o meio da barra inferior é do carrinho, e o WhatsApp fica no menu ☰. Em repouso, um círculo de 56 px
   só com o ícone: a pílula com o rótulo (~141 px) cobria o 4º benefício da home, o "Adicionar" da última
   coluna e as vantagens do produto; o círculo fica na margem fora do container a partir de ~1340 px e,
   abaixo disso, avança no máximo ~40 px sobre ele. No hover e no foco o rótulo "Dúvidas?" se abre para a
   esquerda. O nome acessível (aria-label) começa pelo mesmo rótulo. */
.whats-float {
	position: fixed;
	right: clamp(16px, 2.4vw, 28px);
	bottom: clamp(16px, 2.4vw, 28px);
	z-index: 90;
	display: flex;
	align-items: center;
	height: 56px;
	min-width: 56px;
	padding: 0 13px;
	border: 3px solid #fff;
	border-radius: 999px;
	background: var(--whats);
	color: #fff;
	box-shadow: 0 14px 32px rgba(16, 120, 63, 0.35);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	transition: transform 0.3s var(--ease), box-shadow 0.3s, padding 0.25s var(--ease);
}

.whats-float .icon-fill {
	flex: none;
	width: 24px;
	height: 24px;
}

.whats-float span {
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-width 0.25s var(--ease), margin 0.25s var(--ease), opacity 0.2s;
}

.whats-float:hover,
.whats-float:focus-visible {
	padding-right: 20px;
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(16, 120, 63, 0.45);
}

.whats-float:hover span,
.whats-float:focus-visible span {
	max-width: 8em;
	margin-left: 8px;
	opacity: 1;
}

.modo-checkout .whats-float {
	display: none;
}

@media (max-width: 991px) {
	.whats-float {
		display: none;
	}
}

/* Animação de entrada */
.js .revelar {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.js .revelar.visivel {
	opacity: 1;
	transform: none;
}

/* Sem movimento: tudo termina na hora, e as animações infinitas (os indicadores de carregamento dos botões)
   rodam uma vez só, em vez de girar a cada 0,01 ms */
@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;
	}

	.js .revelar {
		opacity: 1;
		transform: none;
	}
}

/* Utilitários de página ---------------------------------------------------- */

.btn-row--centro {
	justify-content: center;
}

.js [data-sem-js] {
	display: none;
}

.sem-borda-fieldset {
	margin: 0;
	padding: 20px 0;
	border: 0;
	border-bottom: 1px solid var(--line);
	min-width: 0;
}

.sem-borda-fieldset legend {
	float: left;
	width: 100%;
	margin-bottom: 12px;
	padding: 0;
}

.sem-borda-fieldset legend + * {
	clear: both;
}

.compra-espaco {
	margin-top: 16px;
}

.gaveta-corpo {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.gaveta-carregando {
	flex: 1;
	display: grid;
	place-items: center;
	color: var(--muted);
}

.erro-bloco {
	display: block;
	margin-top: 8px;
	font-size: 13.5px;
	color: var(--danger);
}

.aguardando--claro {
	color: var(--muted);
	justify-content: center;
}

.linha--pedido {
	grid-template-columns: minmax(0, 1fr) auto;
}

.redirecionando .eyebrow {
	justify-content: center;
}

/* Área do cliente ------------------------------------------------------------ */

/* Topo: "Minha conta" entre o atendimento e o carrinho. Na tela estreita fica só "Minha conta" (a saudação
   continua no nome acessível); no celular, só o ícone, ao lado do carrinho, com a coluna da direita mais larga
   e a da esquerda igual, para o logo continuar no centro. */
@media (max-width: 1180px) {
	.topo-acao--conta .topo-acao-texto strong {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
	}

	.topo-acao--conta .topo-acao-texto > span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

@media (max-width: 991px) {
	.topo {
		grid-template-columns: 88px minmax(0, 1fr) 88px;
	}

	.topo .brand,
	.topo .brand-logo {
		min-width: 0;
		max-width: 100%;
	}

	.topo-acao--conta {
		justify-content: center;
		width: 44px;
		min-height: 44px;
		padding: 0;
	}

	.topo-acao--conta:hover {
		background: rgba(20, 20, 20, 0.06);
	}

	.topo-acao--conta .topo-acao-texto {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* Cabeçalho das páginas da conta: saudação, e-mail, "Sair" e as abas em pílula (a atual em vinho) */
.conta-topo {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px 24px;
}

.conta-topo-email {
	margin-top: 2px;
	color: var(--muted);
	overflow-wrap: anywhere;
}

.conta-abas {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	overflow-x: auto;
	scrollbar-width: none;
}

.conta-abas a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 18px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: #fff;
	color: var(--text);
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	transition: border-color 0.2s, background-color 0.2s;
}

.conta-abas a:hover {
	border-color: var(--ink);
}

.conta-abas a[aria-current='page'] {
	border-color: var(--vinho);
	background: var(--vinho);
	color: #fff;
}

.conta-abas .icon {
	width: 18px;
	height: 18px;
}

.conta-aviso {
	margin-top: 14px;
}

.conta-pagina {
	padding: var(--respiro-topo) 0 var(--section);
}

.conta-secao-topo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.conta-secao-titulo {
	margin-bottom: 16px;
	font-size: 21px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--ink);
}

.conta-secao-topo .conta-secao-titulo {
	margin-bottom: 0;
}

.conta-secao-titulo small {
	margin-left: 8px;
	font-size: 14px;
	font-weight: 400;
	color: var(--muted);
}

/* Listas em grade: o espaço vem do gap, não do .cartao + .cartao */
.conta-pedidos,
.conta-enderecos {
	display: grid;
	gap: 14px;
}

.conta-pedidos > .cartao + .cartao,
.conta-enderecos > .cartao + .cartao {
	margin-top: 0;
}

.conta-pedido-topo {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px 16px;
}

.conta-pedido-numero {
	display: block;
	font-size: 18px;
	font-weight: 600;
	color: var(--ink);
}

.conta-pedido-numero:hover {
	color: var(--brand);
}

.conta-pedido-data {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	color: var(--muted);
}

.conta-pedido-itens {
	margin-top: 12px;
	font-size: 15px;
}

.conta-pedido-rodape {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.conta-pedido-total {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.conta-pedido-total span {
	font-size: 14px;
	color: var(--muted);
}

.conta-pedido-total strong {
	font-size: 19px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

.conta-pedido-rodape .btn-row {
	gap: 8px;
}

.conta-paginas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 16px;
	margin-top: 20px;
	font-size: 14px;
	color: var(--muted);
}

.conta-nota {
	margin-top: 20px;
	font-size: 14px;
	color: var(--muted);
}

.conta-vazio {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.conta-vazio p + p {
	margin-top: 6px;
	color: var(--muted);
}

.conta-vazio .btn-row {
	margin-top: 16px;
}

.conta-colunas {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(16px, 2.4vw, 28px);
	align-items: start;
}

.conta-texto {
	font-size: 15px;
	color: var(--muted);
}

/* E-mail da conta em "Meus dados": não é campo (não muda ali), mas fica na mesma altura dos campos */
.conta-email-fixo {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 14px;
	border: 1px dashed var(--line-strong);
	border-radius: var(--raio-sm);
	overflow-wrap: anywhere;
}

.conta-excluir {
	border-color: color-mix(in srgb, var(--danger) 25%, var(--line));
}

/* Ação sem volta (excluir a conta): contorno vermelho, preenchido só no hover */
.btn--perigo {
	background: #fff;
	border-color: var(--danger);
	color: var(--danger);
}

.btn--perigo:hover {
	background: var(--danger);
	color: #fff;
}

.conta-enderecos {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.conta-endereco {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.conta-endereco--principal {
	border-color: color-mix(in srgb, var(--vinho) 45%, var(--line));
}

.conta-endereco-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.conta-endereco-topo strong {
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
}

.conta-endereco p {
	font-size: 15px;
	line-height: 1.5;
}

.conta-endereco-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 6px;
}

.conta-endereco-form {
	margin-top: 20px;
	scroll-margin-top: calc(var(--header-h) + 16px);
}

/* Telas de entrar, código e cadastro (o cartão .acesso-pedido da página do pedido), sem o cabeçalho de
   página: o cartão começa logo abaixo do menu */
.conta-acesso {
	padding: var(--respiro-topo) 0 var(--section);
}

/* Formulários curtos dos cartões de acesso: campos um pouco mais juntos */
.acesso-pedido .campos {
	gap: 12px;
}

/* No celular, entrar, código e cadastro ficam sem a faixa de categorias (o ☰, a busca e a barra inferior
   continuam): o formulário e o botão cabem na tela */
@media (max-width: 991px) {
	.pagina-foco .departamentos {
		display: none;
	}
}

.acesso-pedido--largo {
	max-width: 720px;
}

.acesso-pedido-texto a,
.conta-rodape a,
.conta-texto a,
.conta-nota a {
	color: var(--brand);
	border-bottom: 1px solid currentColor;
}

.conta-email {
	color: var(--ink);
	overflow-wrap: anywhere;
}

.campo .campo-codigo {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.3em;
	font-variant-numeric: tabular-nums;
}

/* Modo vendedor: a pessoa da equipe monta o carrinho de um cliente navegando pela loja (só ela vê a barra) */
.barra-vendedor {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--ink);
	color: #fff;
	font-size: 14px;
}

.barra-vendedor-conteudo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.barra-vendedor-texto {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.barra-vendedor-texto .icon {
	flex: none;
	color: var(--ouro);
}

.barra-vendedor-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.barra-vendedor-acoes form {
	margin: 0;
}

/* Meus dados: contas do Google e do Facebook ligadas à conta da loja */
.conta-entradas {
	display: grid;
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.conta-entradas li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--raio-sm);
}

.conta-entradas form {
	margin: 0;
}

.conta-entradas-nome {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
}

.conta-entradas-nome .icon-fill {
	width: 20px;
	height: 20px;
}

.conta-entradas-nome small {
	color: var(--muted);
}

.conta-social {
	display: grid;
	gap: 10px;
}

.conta-social-btn {
	justify-content: center;
	gap: 10px;
}

.conta-social-btn .icon-fill {
	width: 20px;
	height: 20px;
}

.conta-ou {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0 6px;
	color: var(--muted);
	font-size: 14px;
}

.conta-ou::before,
.conta-ou::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--line);
}

.conta-vantagens {
	display: grid;
	gap: 8px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-size: 14.5px;
}

.conta-vantagens li {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
}

.conta-vantagens .icon {
	width: 20px;
	height: 20px;
	color: var(--vinho);
}

.conta-rodape {
	margin-top: 14px;
	font-size: 13px;
	color: var(--muted);
}

/* Checkout: com a conta, de onde vieram os dados; sem ela, o convite para entrar */
.checkout-conta {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	margin-bottom: 16px;
	padding: 12px 14px;
	border-radius: var(--raio-sm);
	background: var(--info-bg);
	font-size: 14.5px;
}

.checkout-conta .icon {
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: var(--info);
}

.checkout-conta a {
	color: var(--brand);
	font-weight: 600;
	border-bottom: 1px solid currentColor;
}

.enderecos-salvos {
	margin-bottom: 16px;
}

/* Página do pedido sem conta: o convite fica no fim do resumo */
.pedido-conta {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-size: 14.5px;
}

.pedido-conta p + p {
	margin-top: 4px;
	color: var(--muted);
}

.pedido-conta .btn {
	margin-top: 12px;
}

@media (max-width: 991px) {
	.conta-colunas {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.conta-pedido-rodape {
		flex-direction: column;
		align-items: stretch;
	}

	.conta-pedido-rodape .btn-row > * {
		flex: 1 1 auto;
	}

	.conta-pedido-rodape .btn-row form .btn {
		width: 100%;
	}

	.conta-vazio {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Compra rápida nas vitrines ------------------------------------------------- */

/* A foto do produto voando até o carrinho. O loja.js move o .voo-carrinho na horizontal e a peça na vertical
   (com escala), cada eixo com a sua curva, o que desenha o arco. Fica acima do topo e da barra inferior e não
   recebe clique. */
.voo-carrinho {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 300;
	width: 120px;
	height: 120px;
	pointer-events: none;
}

.voo-carrinho-peca {
	display: block;
	width: 120px;
	height: 120px;
	border-radius: 18px;
	background: #fff;
	object-fit: contain;
	box-shadow: var(--sombra-3);
	will-change: transform, opacity;
}

/* Produto sem foto: sai uma bolinha na cor da marca */
span.voo-carrinho-peca {
	border-radius: 50%;
	background: var(--brand);
}

/* O carrinho "recebe" o produto: um balanço curto na sacola do topo ou na bolha da barra inferior */
.recebeu {
	animation: recebeu 0.45s var(--ease);
}

@keyframes recebeu {
	35% {
		transform: scale(1.22);
	}

	65% {
		transform: scale(0.94);
	}
}

/* Botão do cartão logo depois de adicionar: verde com "Adicionado" por um instante */
.btn.is-adicionado,
.btn.is-adicionado:hover {
	border-color: var(--ok);
	background: var(--ok);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.recebeu {
		animation: none;
	}
}

/* Carrinho: cupom que veio no link de resgate (o checkout já o aplica) */
.carrinho-cupom {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 8px;
	align-items: start;
	margin-top: 12px;
	padding: 10px 12px;
	border: 1px dashed var(--brand);
	border-radius: var(--raio-sm);
	font-size: 14px;
}

.carrinho-cupom .icon {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--brand);
}