/*
 * Petoona · estilos globais.
 *
 * Fiel ao Figma (arquivo rZNGaoljcT62NFVj18ttbj): tokens do Design System,
 * topo, rodapé, botões, chips e cards. As seções da Home ficam em home.css.
 * Pontos de quebra: celular até 767 px, tablet até 1099 px (topo até 1023 px).
 */

/* ---------- Ícones: Material Symbols Rounded (recorte só com os ícones usados) ---------- */
@font-face {
	font-family: "Material Symbols Rounded";
	font-style: normal;
	font-weight: 400;
	font-display: block;
	/* A versão no endereço fura o cache longo quando o recorte de ícones muda (igual ao preload do functions.php). */
	src: url(../fonts/material-symbols-rounded.woff2?v=5) format("woff2");
}

/* ---------- Tokens ---------- */
:root {
	--pt-fundo-pagina: #f7f5f2;
	--pt-fundo-superficie: #ffffff;
	--pt-fundo-sutil: #f3f0eb;
	--pt-fundo-inverso: #1f1b17;
	--pt-fundo-inverso-hover: #3b342e;
	--pt-fundo-acao: #c9431a;
	--pt-fundo-acao-hover: #a8391a;
	--pt-fundo-acao-suave: #fdf3ee;
	--pt-fundo-trilho: #ece7e0;
	--pt-fundo-indicador: #8a8279;
	--pt-fundo-sucesso: #e8f4ed;
	--pt-quente-creme: #fbf4ea;
	--pt-quente-linho: #f2ebe1;
	--pt-quente-areia: #efe7dc;
	--pt-quente-areia-forte: #e9e1d4;
	--pt-quente-pessego: #f5e3d5;
	--pt-quente-pessego-forte: #f6d5c0;
	--pt-texto-principal: #1f1b17;
	--pt-texto-secundario: #4a433c;
	--pt-texto-apoio: #6b635a;
	--pt-texto-acao: #a8391a;
	--pt-texto-destaque: #c9431a;
	--pt-texto-desabilitado: #cdc5ba;
	--pt-texto-economia: #1e7a4e;
	--pt-texto-avaliacao: #b27b0d;
	--pt-marca: #e8501c;
	--pt-borda-sutil: #e3ddd4;
	--pt-borda-interativa: #8a8279;
	--pt-borda-acao: #c9431a;
	/* Modo Invertido (faixas e cards escuros). */
	--pt-inv-texto: #fbf4ea;
	--pt-inv-secundario: #e3ddd4;
	--pt-inv-apoio: #cdc5ba;
	--pt-inv-acao: #f6b899;

	--pt-fonte-titulo: "Newsreader", Georgia, "Times New Roman", serif;
	--pt-fonte-interface: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--pt-fonte-manuscrita: "Caveat", "Comic Sans MS", cursive;
	--pt-fonte-icone: "Material Symbols Rounded";

	--pt-tipo-display: 88px;
	--pt-tipo-display-altura: 88px;
	--pt-tipo-titulo-1: 56px;
	--pt-tipo-titulo-1-altura: 60px;
	--pt-tipo-titulo-2: 48px;
	--pt-tipo-titulo-2-altura: 54px;
	--pt-tipo-titulo-3: 28px;
	--pt-tipo-titulo-3-altura: 32px;
	--pt-tipo-frase: 22px;
	--pt-tipo-frase-altura: 28px;
	--pt-tipo-lead: 18px;
	--pt-tipo-lead-altura: 30px;
	--pt-tipo-preco: 22px;
	--pt-tipo-preco-altura: 28px;
	--pt-tipo-anotacao-g: 28px;
	/* Vão entre as partes de um título (gap do auto layout no Figma). */
	--pt-titulo-vao: 12px;

	--pt-container: 1296px;
	--pt-margem: clamp(24px, 5vw, 72px);
	--pt-calha: 24px;
	--pt-secao: 96px;
	--pt-cabecalho: 40px;
	/* Recuo lateral que centraliza o conteúdo em 1296 px e respeita a margem. */
	--pt-recuo: max(var(--pt-margem), calc((100% - var(--pt-container)) / 2));

	--pt-raio-xs: 4px;
	--pt-raio-sm: 8px;
	--pt-raio-md: 12px;
	--pt-raio-lg: 16px;
	--pt-raio-xl: 20px;
	--pt-raio-2xl: 24px;
	--pt-raio-3xl: 28px;
	--pt-raio-pilula: 999px;

	--pt-sombra-sutil: 0 1px 3px rgba(31, 27, 23, 0.1);
	--pt-sombra-baixa: 0 2px 8px rgba(31, 27, 23, 0.1);
	--pt-sombra-media: 0 6px 16px rgba(31, 27, 23, 0.1);
	--pt-sombra-alta: 0 12px 32px rgba(31, 27, 23, 0.14);

	/* Altura do topo fixo (compacto): o foco e as âncoras não ficam por baixo (WCAG 2.4.11). */
	--pt-altura-topo: 88px;
}

@media (max-width: 767px) {
	:root {
		--pt-tipo-display: 56px;
		--pt-tipo-display-altura: 56px;
		--pt-tipo-titulo-1: 36px;
		--pt-tipo-titulo-1-altura: 40px;
		--pt-tipo-titulo-2: 32px;
		--pt-tipo-titulo-2-altura: 38px;
		--pt-tipo-titulo-3: 22px;
		--pt-tipo-titulo-3-altura: 26px;
		--pt-tipo-frase: 18px;
		--pt-tipo-frase-altura: 24px;
		--pt-tipo-lead: 16px;
		--pt-tipo-lead-altura: 26px;
		--pt-tipo-preco: 18px;
		--pt-tipo-preco-altura: 24px;
		--pt-tipo-anotacao-g: 24px;
		--pt-titulo-vao: 8px;
		--pt-margem: 16px;
		--pt-calha: 12px;
		--pt-secao: 56px;
		--pt-cabecalho: 24px;
		--pt-altura-topo: 72px;
	}
}

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

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

body {
	margin: 0;
	overflow-x: clip;
	background: var(--pt-fundo-pagina);
	color: var(--pt-texto-principal);
	font-family: var(--pt-fonte-interface);
	font-size: 16px;
	line-height: 1.625;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* O tema monta o espaçamento das seções; zera o blockGap do WordPress. */
body .wp-site-blocks {
	padding: 0;
}

body .wp-site-blocks > * {
	margin-block: 0;
}

img {
	max-width: 100%;
	height: auto;
}

/* O atributo hidden sempre esconde, mesmo com display definido no componente. */
[hidden] {
	display: none !important;
}

/* Foco visível (WCAG 2.4.7): anel de 3 px na cor de ação, afastado 2 px. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--pt-fundo-acao);
	outline-offset: 2px;
}

:where(button) {
	font: inherit;
}

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

a.pt-pular {
	position: absolute;
	top: -80px;
	left: 16px;
	z-index: 200;
	padding: 12px 20px;
	border-radius: var(--pt-raio-pilula);
	background: var(--pt-fundo-inverso);
	color: #fff;
	font: 700 14px/20px var(--pt-fonte-interface);
	text-decoration: none;
}

a.pt-pular:focus {
	top: 12px;
}

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

@media (max-width: 767px) {
	.pt-so-desktop {
		display: none !important;
	}
}

.pt-container {
	width: min(var(--pt-container), 100% - 2 * var(--pt-margem));
	margin-inline: auto;
}

.pt-bloco {
	position: relative;
}

/* Conteúdo das páginas comuns (loja, conta, políticas). */
main.pt-principal {
	padding-block: 48px var(--pt-secao);
}

/* ---------- Ícones ---------- */
.pt-icone {
	display: inline-block;
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	overflow: hidden;
	font-family: var(--pt-fonte-icone);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	vertical-align: middle;
	font-feature-settings: "liga";
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
	-webkit-font-smoothing: antialiased;
	user-select: none;
}

.pt-icone--cheio {
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ---------- Tipografia editorial ---------- */
.pt-titulo {
	margin: 0;
	color: var(--pt-texto-principal);
	font-family: var(--pt-fonte-titulo);
	font-size: var(--pt-tipo-titulo-2);
	font-weight: 600;
	line-height: var(--pt-tipo-titulo-2-altura);
	letter-spacing: -0.02em;
}

.pt-titulo--1 {
	font-size: var(--pt-tipo-titulo-1);
	line-height: var(--pt-tipo-titulo-1-altura);
}

.pt-titulo em {
	font-style: italic;
	font-weight: 500;
}

/* Cada parte do título quebra inteira (como os blocos do Figma). */
.pt-titulo__parte {
	white-space: nowrap;
}

/*
 * O espaço entre as partes vira o gap do Figma: o espaço da Newsreader 600
 * mede 0,2215em e o título tem -0,02em entre letras (0,2015em no total).
 */
.pt-titulo:has(> .pt-destaque, > .pt-titulo__parte) {
	word-spacing: calc(var(--pt-titulo-vao) - 0.2015em);
}

.pt-titulo:has(> .pt-destaque, > .pt-titulo__parte) > * {
	word-spacing: normal;
}

/* Palavra em itálico com grafismo desenhado à mão. */
.pt-destaque {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.pt-destaque__grafismo {
	position: absolute;
	max-width: none;
	pointer-events: none;
}

.pt-destaque--sublinhado .pt-destaque__grafismo,
.pt-destaque--sublinhado-momento .pt-destaque__grafismo {
	bottom: -4px;
	left: -7px;
	width: calc(100% + 14px);
	height: 16px;
}

.pt-titulo--1 .pt-destaque--sublinhado .pt-destaque__grafismo {
	height: 18px;
}

/* Sublinhado à mão do título H1 das Políticas (traço de 4 px; 18 px de altura nos dois tamanhos). */
.pt-destaque--sublinhado-g .pt-destaque__grafismo {
	bottom: -4px;
	left: -7px;
	width: calc(100% + 14px);
	height: 18px;
}

.pt-destaque--sublinhado-semana .pt-destaque__grafismo {
	bottom: -3px;
	left: -6px;
	width: calc(100% + 12px);
	height: 13.33px;
}

.pt-destaque--brilho {
	padding-right: 24px;
}

.pt-destaque--brilho .pt-destaque__grafismo {
	top: -4px;
	right: -5px;
	width: 27px;
	height: 27px;
}

.pt-destaque--circulo .pt-destaque__grafismo {
	top: -8px;
	left: -22px;
	width: calc(100% + 44px);
	height: calc(100% + 20px);
}

.pt-destaque--circulo-g .pt-destaque__grafismo {
	top: -15px;
	left: -20px;
	width: calc(100% + 33px);
	height: calc(100% + 38px);
}

.pt-destaque--coracao {
	padding-right: 46px;
}

.pt-destaque--coracao .pt-destaque__grafismo {
	top: 6px;
	right: 0;
	width: 39.6px;
	height: 35.2px;
}

/* Coração do componente "Título de seção" (30 x 27): PDP e Favoritos. */
.pt-destaque--coracao-p {
	padding-right: 27px;
}

.pt-destaque--coracao-p .pt-destaque__grafismo {
	top: calc(50% - 13.5px);
	right: -5px;
	width: 30px;
	height: 27px;
}

@media (max-width: 767px) {
	.pt-destaque--circulo-g .pt-destaque__grafismo {
		top: -8px;
		left: -22px;
		width: calc(100% + 44px);
		height: calc(100% + 20px);
	}

	.pt-destaque--coracao {
		padding-right: 30px;
	}

	.pt-destaque--coracao .pt-destaque__grafismo {
		top: 8px;
		width: 26px;
		height: 23px;
	}
}

/* Anotação manuscrita (Caveat) com seta à mão. */
.pt-anotacao {
	display: inline-flex;
	align-items: flex-end;
	gap: 4px;
	margin: 0;
	color: var(--pt-texto-destaque);
	font-family: var(--pt-fonte-manuscrita);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
}

.pt-anotacao--p {
	font-size: 20px;
}

.pt-anotacao--g {
	font-size: var(--pt-tipo-anotacao-g);
}

.pt-anotacao__seta {
	flex-shrink: 0;
	width: 59.52px;
	height: 44.64px;
}

.pt-anotacao--seta-esquerda .pt-anotacao__seta {
	transform: scaleX(-1);
}

/* ---------- Botões ---------- */
.pt-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid transparent;
	border-radius: var(--pt-raio-pilula);
	font-family: var(--pt-fonte-interface);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pt-botao--g {
	height: 56px;
	padding: 0 32px;
	font-size: 16px;
	line-height: 22px;
}

.pt-botao--m {
	height: 44px;
	padding: 0 20px;
	font-size: 14px;
	line-height: 20px;
}

.pt-botao--primario,
a.pt-botao--primario {
	background: var(--pt-fundo-acao);
	color: #fff;
}

.pt-botao--primario:hover,
a.pt-botao--primario:hover {
	background: var(--pt-fundo-acao-hover);
	color: #fff;
}

.pt-botao--secundario,
a.pt-botao--secundario {
	border-color: var(--pt-borda-interativa);
	background: var(--pt-fundo-superficie);
	color: var(--pt-texto-principal);
}

.pt-botao--secundario:hover,
a.pt-botao--secundario:hover {
	border-color: var(--pt-texto-principal);
	background: var(--pt-fundo-sutil);
	color: var(--pt-texto-principal);
}

.pt-botao--inverso,
a.pt-botao--inverso {
	background: var(--pt-fundo-inverso);
	color: #fff;
}

.pt-botao--inverso:hover,
.pt-botao--inverso[aria-expanded="true"] {
	background: var(--pt-fundo-inverso-hover);
	color: #fff;
}

/* Botão só de ícone (setas de carrossel). */
.pt-botao-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--pt-borda-sutil);
	border-radius: var(--pt-raio-pilula);
	background: var(--pt-fundo-superficie);
	color: var(--pt-texto-principal);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.pt-botao-icone:hover {
	border-color: var(--pt-borda-interativa);
}

.pt-botao-icone[aria-disabled="true"],
.pt-botao-icone:disabled {
	border-color: var(--pt-borda-sutil);
	color: var(--pt-texto-desabilitado);
	cursor: default;
}

/* Link de ação com seta ("Ver todos"); também em <button> que abre painel. */
a.pt-link-acao,
button.pt-link-acao {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pt-texto-principal);
	font-family: var(--pt-fonte-interface);
	font-size: 15px;
	font-weight: 600;
	line-height: 22px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

a.pt-link-acao:hover,
button.pt-link-acao:hover {
	color: var(--pt-fundo-acao);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Tamanho P (14/20 bold, seta de 16). */
.pt-link-acao.pt-link-acao--p {
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
}

.pt-link-acao--p .pt-icone {
	font-size: 16px;
}

/* ---------- Campo de texto (73:542) ---------- */
.pt-campo {
	min-width: 0;
	height: 56px;
	padding: 0 20px;
	border: 1px solid var(--pt-borda-interativa);
	border-radius: var(--pt-raio-pilula);
	background: var(--pt-fundo-superficie);
	color: var(--pt-texto-principal);
	font: 400 15px/24px var(--pt-fonte-interface);
	appearance: none;
}

.pt-campo::placeholder {
	color: var(--pt-texto-apoio);
	opacity: 1;
}

/* Foco: borda escura de 2 px e anel laranja por fora (o vermelho fica só para erro). */
.pt-campo:focus-visible {
	border-color: var(--pt-texto-principal);
	outline: 3px solid var(--pt-fundo-acao);
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px var(--pt-texto-principal);
}

/* Campo com rótulo visível (73:542). */
.pt-campo-grupo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 480px;
	max-width: 100%;
}

.pt-campo-grupo--curto {
	width: 240px;
}

.pt-campo-grupo__rotulo {
	color: var(--pt-texto-principal);
	font: 600 13px/18px var(--pt-fonte-interface);
}

.pt-campo-grupo__ajuda {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	margin: 0;
	color: var(--pt-texto-apoio);
	font: 400 13px/18px var(--pt-fonte-interface);
}

.pt-campo-grupo__ajuda .pt-icone {
	margin-top: 1px;
	font-size: 16px;
}

.pt-campo[aria-invalid="true"] {
	border-color: #b3261e;
	box-shadow: inset 0 0 0 1px #b3261e;
}

/* Campo com ícone à esquerda (e-mail, busca). */
.pt-campo-icone {
	position: relative;
	display: block;
}

.pt-campo-icone > .pt-icone {
	position: absolute;
	top: 50%;
	left: 20px;
	color: var(--pt-texto-apoio);
	transform: translateY(-50%);
	pointer-events: none;
}

.pt-campo-icone .pt-campo {
	width: 100%;
	padding-left: 52px;
}

/* Campo-isca contra robôs: fora da tela, fora da ordem de foco. */
.pt-isca {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Caixa de marcar (DS) ---------- */
.pt-marcar {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--pt-texto-secundario);
	font: 400 14px/20px var(--pt-fonte-interface);
	cursor: pointer;
}

.pt-marcar input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.pt-marcar__caixa {
	display: flex;
	flex: 0 0 22px;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-top: -1px;
	border: 2px solid var(--pt-borda-interativa);
	border-radius: 6px;
	background: var(--pt-fundo-superficie);
	color: transparent;
}

.pt-marcar__caixa .pt-icone {
	font-size: 16px;
}

.pt-marcar input:checked + .pt-marcar__caixa {
	border-color: var(--pt-fundo-acao);
	background: var(--pt-fundo-acao);
	color: #fff;
}

.pt-marcar input:focus-visible + .pt-marcar__caixa {
	outline: 3px solid var(--pt-fundo-acao);
	outline-offset: 2px;
}

/* ---------- Seletor de quantidade (DS) ---------- */
.pt-quantidade {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	height: 52px;
	padding: 0 4px;
	border: 1px solid var(--pt-borda-interativa);
	border-radius: var(--pt-raio-pilula);
	background: var(--pt-fundo-superficie);
}

.pt-quantidade__botao {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--pt-raio-pilula);
	background: none;
	color: var(--pt-texto-principal);
	cursor: pointer;
}

.pt-quantidade__botao:hover {
	background: var(--pt-fundo-sutil);
}

.pt-quantidade__botao[aria-disabled="true"] {
	color: var(--pt-texto-apoio);
	cursor: default;
}

.pt-quantidade__botao[aria-disabled="true"]:hover {
	background: none;
}

.pt-quantidade__valor {
	width: 36px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pt-texto-principal);
	font: 700 16px/22px var(--pt-fonte-interface);
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

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

/* ---------- Flag (etiqueta de destaque) ---------- */
.pt-flag {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 4px 8px;
	border-radius: var(--pt-raio-pilula);
	background: var(--pt-fundo-acao-suave);
	color: var(--pt-texto-acao);
	font: 700 12px/16px var(--pt-fonte-interface);
}

/* Ícone da flag com 16 px, como no Figma (a flag fica com 24 px de altura). */
.pt-flag .pt-icone {
	width: 16px;
	height: 16px;
	font-size: 16px;
	line-height: 16px;
}

/* ---------- Estrelas ---------- */
.pt-estrelas {
	display: inline-flex;
	gap: 2px;
	color: var(--pt-texto-avaliacao);
}

.pt-estrelas .pt-icone {
	font-size: 16px;
}

.pt-estrelas--m .pt-icone {
	font-size: 20px;
}

.pt-estrelas__vazia {
	color: var(--pt-texto-desabilitado);
}

/* ---------- Acordeão (DS) ---------- */
.pt-acordeao {
	border-bottom: 1px solid var(--pt-borda-sutil);
}

.pt-acordeao__titulo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0;
	color: var(--pt-texto-principal);
	font: 700 16px/22px var(--pt-fonte-interface);
	list-style: none;
	cursor: pointer;
}

.pt-acordeao__titulo::-webkit-details-marker {
	display: none;
}

.pt-acordeao__titulo .pt-icone {
	transition: transform 0.2s ease;
}

.pt-acordeao[open] > .pt-acordeao__titulo .pt-icone {
	transform: rotate(180deg);
}

.pt-acordeao__conteudo {
	padding: 0 32px 20px 0;
	color: var(--pt-texto-secundario);
	font: 400 14px/20px var(--pt-fonte-interface);
}

.pt-acordeao__conteudo p {
	margin: 0 0 12px;
}

.pt-acordeao__conteudo p:last-child {
	margin-bottom: 0;
}

.pt-acordeao__conteudo a {
	color: var(--pt-texto-acao);
	font-weight: 600;
}

/* ---------- Chips e badges ---------- */
.pt-chip,
a.pt-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--pt-borda-interativa);
	border-radius: var(--pt-raio-pilula);
	background: var(--pt-fundo-superficie);
	color: var(--pt-texto-principal);
	font-family: var(--pt-fonte-interface);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
	white-space: nowrap;
}

a.pt-chip:hover {
	border-color: var(--pt-texto-principal);
	background: var(--pt-fundo-sutil);
	color: var(--pt-texto-principal);
}

.pt-chip .pt-icone {
	color: var(--pt-texto-secundario);
}

.pt-chip--destaque,
a.pt-chip--destaque,
a.pt-chip--destaque:hover {
	border-color: var(--pt-borda-acao);
	background: var(--pt-fundo-acao-suave);
	color: var(--pt-texto-acao);
	font-weight: 700;
}

.pt-chip--destaque .pt-icone {
	color: inherit;
}

.pt-chip--rede .pt-icone {
	font-size: 16px;
	color: var(--pt-texto-principal);
}

.pt-chip__novo {
	position: absolute;
	top: -13px;
	left: calc(100% - 30px);
	color: var(--pt-texto-acao);
	font-family: var(--pt-fonte-manuscrita);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	transform: rotate(-8deg);
	pointer-events: none;
}

.pt-badge {
	position: absolute;
	top: -8px;
	left: 15px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 4px;
	border: 2px solid var(--pt-fundo-superficie);
	border-radius: var(--pt-raio-pilula);
	color: #fff;
	font: 700 11px/14px var(--pt-fonte-interface);
}

.pt-badge--destaque {
	background: var(--pt-fundo-acao);
}

.pt-badge--neutro {
	background: var(--pt-fundo-inverso);
}

.pt-badge[hidden] {
	display: none;
}

/* ---------- Faixa de garantias (86:293) ---------- */
.pt-faixa-garantias {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	padding: 12px var(--pt-margem);
	background: var(--pt-fundo-inverso);
	color: var(--pt-inv-texto);
}

.pt-faixa-garantias__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--pt-inv-texto);
	font: 600 13px/18px var(--pt-fonte-interface);
	white-space: nowrap;
}

.pt-faixa-garantias__item .pt-icone {
	font-size: 16px;
	color: var(--pt-inv-secundario);
}

.pt-faixa-garantias__sep {
	color: var(--pt-marca);
	font: 400 12px/16px var(--pt-fonte-interface);
}

@media (max-width: 767px) {
	.pt-faixa-garantias {
		padding-block: 9px;
	}
}

/* ---------- Topo (87:401 desktop · 100:1304 celular) ---------- */
.pt-topo-lugar {
	position: relative;
	z-index: 40;
}

.pt-topo {
	position: relative;
	background: var(--pt-fundo-superficie);
	border-bottom: 1px solid var(--pt-borda-sutil);
}

.pt-topo.is-fixo {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 50;
	box-shadow: var(--pt-sombra-sutil);
	animation: pt-topo-entra 0.25s ease-out;
}

/* Header "Rolando" do Figma: sem traço embaixo, só a sombra sutil (72 px; 56 no celular). */
.pt-topo.is-compacto {
	border-bottom: 0;
	box-shadow: var(--pt-sombra-sutil);
}

.admin-bar .pt-topo.is-fixo {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@keyframes pt-topo-entra {
	from {
		transform: translateY(-100%);
	}
}

.pt-topo__principal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 20px var(--pt-recuo);
}

.pt-topo__menu {
	display: none;
}

.pt-topo__logo {
	display: flex;
	flex-shrink: 0;
	align-items: center;
}

.pt-topo__logo-img {
	display: block;
	width: 168px;
	height: auto;
}

.pt-busca {
	display: flex;
	flex: 0 1 620px;
	align-items: center;
	gap: 12px;
	min-width: 0;
	height: 52px;
	margin: 0;
	padding: 0 4px 0 20px;
	border: 1px solid var(--pt-borda-interativa);
	border-radius: var(--pt-raio-pilula);
	background: var(--pt-fundo-sutil);
}

.pt-busca:focus-within {
	border-color: var(--pt-borda-acao);
	box-shadow: inset 0 0 0 1px var(--pt-borda-acao);
}

.pt-busca__campo {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	outline: none;
	background: transparent;
	color: var(--pt-texto-principal);
	font: 400 15px/24px var(--pt-fonte-interface);
	appearance: none;
}

.pt-busca__campo::placeholder {
	color: var(--pt-texto-apoio);
	opacity: 1;
}

.pt-busca__campo:focus-visible {
	outline: none;
}

.pt-busca__botao {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--pt-raio-pilula);
	background: var(--pt-fundo-inverso);
	color: #fff;
	cursor: pointer;
}

.pt-busca__botao:hover {
	background: var(--pt-fundo-inverso-hover);
}

.pt-topo__acoes {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 4px;
}

a.pt-acao {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
	border-radius: var(--pt-raio-md);
	color: var(--pt-texto-principal);
	text-decoration: none;
}

a.pt-acao:hover {
	background: var(--pt-fundo-sutil);
	color: var(--pt-texto-principal);
}

.pt-acao__icone {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
}

.pt-acao__icone > .pt-icone {
	font-size: 24px;
}

.pt-acao__rotulo {
	color: var(--pt-texto-secundario);
	font: 600 12px/16px var(--pt-fonte-interface);
	white-space: nowrap;
}

.pt-topo__navegacao {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 0 var(--pt-recuo);
}

.pt-categorias-todas {
	position: relative;
	margin-right: 12px;
}

.pt-menu__lista {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pt-menu__lista > li {
	position: relative;
}

a.pt-menu__link,
button.pt-menu__link {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 24px 16px 21px;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	background: none;
	color: var(--pt-texto-secundario);
	font: 600 14px/20px var(--pt-fonte-interface);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

a.pt-menu__link:hover,
button.pt-menu__link:hover,
button.pt-menu__link[aria-expanded="true"] {
	color: var(--pt-texto-principal);
}

a.pt-menu__link[aria-current="page"] {
	border-bottom-color: var(--pt-borda-acao);
	color: var(--pt-texto-principal);
	font-weight: 700;
}

.pt-menu__seta {
	width: 18px;
	transition: transform 0.15s ease;
}

[aria-expanded="true"] > .pt-menu__seta {
	transform: rotate(180deg);
}

.pt-submenu,
.pt-painel-categorias {
	position: absolute;
	left: 0;
	z-index: 45;
	margin: 0;
	border: 1px solid var(--pt-borda-sutil);
	background: var(--pt-fundo-superficie);
	box-shadow: var(--pt-sombra-media);
}

.pt-submenu {
	top: calc(100% - 6px);
	min-width: 232px;
	padding: 8px;
	border-radius: var(--pt-raio-lg);
	list-style: none;
}

.pt-painel-categorias {
	top: calc(100% + 12px);
	display: grid;
	grid-template-columns: repeat(3, minmax(190px, 1fr));
	gap: 24px;
	padding: 24px;
	border-radius: var(--pt-raio-xl);
	box-shadow: var(--pt-sombra-alta);
}

.pt-submenu[hidden],
.pt-painel-categorias[hidden] {
	display: none;
}

.pt-painel-categorias ul {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.pt-submenu a,
.pt-painel-categorias a {
	display: block;
	padding: 10px 12px;
	border-radius: var(--pt-raio-sm);
	color: var(--pt-texto-principal);
	font: 500 14px/20px var(--pt-fonte-interface);
	text-decoration: none;
}

.pt-painel-categorias a.pt-painel-categorias__titulo {
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}

.pt-submenu a:hover,
.pt-painel-categorias a:hover {
	background: var(--pt-fundo-sutil);
	color: var(--pt-texto-principal);
}

a.pt-atalho-perfil {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	padding: 12px 8px;
	border-radius: var(--pt-raio-pilula);
	color: var(--pt-texto-acao);
	font: 700 14px/20px var(--pt-fonte-interface);
	text-decoration: none;
	white-space: nowrap;
}

a.pt-atalho-perfil:hover {
	background: var(--pt-fundo-acao-suave);
	color: var(--pt-texto-acao);
}

.pt-atalho-perfil__mascote {
	width: 44px;
	height: 30px;
	object-fit: contain;
}

.pt-atalho-perfil__novo {
	position: absolute;
	top: -1px;
	left: 101px;
	color: var(--pt-texto-acao);
	font-family: var(--pt-fonte-manuscrita);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	transform: rotate(10deg);
	pointer-events: none;
}

.pt-topo__atalhos {
	display: none;
}

/* Topo fixo ao rolar: compacto (72 px) descendo; completo subindo. */
.pt-topo.is-compacto .pt-topo__navegacao {
	display: none;
}

.pt-topo.is-compacto .pt-topo__principal {
	padding-block: 10px;
}

.pt-topo.is-compacto .pt-acao__rotulo {
	display: none;
}

.pt-topo.is-compacto a.pt-acao {
	padding-block: 8px;
}

@media (max-width: 1023px) {
	.pt-topo__principal {
		flex-wrap: wrap;
		gap: 12px 4px;
		padding: 12px 4px;
	}

	.pt-topo__menu {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		border-radius: var(--pt-raio-md);
		background: none;
		color: var(--pt-texto-principal);
		cursor: pointer;
	}

	.pt-topo__menu .pt-icone {
		font-size: 24px;
	}

	.pt-topo__logo {
		height: 48px;
		margin-right: auto;
	}

	.pt-topo__logo-img {
		width: 132px;
	}

	.pt-busca {
		flex: 1 1 100%;
		order: 3;
		margin: 0 12px;
	}

	a.pt-acao {
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
	}

	.pt-acao__rotulo {
		display: none;
	}

	.pt-acao__icone {
		width: 24px;
		height: 24px;
	}

	.pt-acao .pt-badge {
		top: -6px;
		left: 14px;
	}

	.pt-topo__navegacao {
		display: none;
	}

	.pt-topo__atalhos {
		display: flex;
		gap: 8px;
		padding: 16px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.pt-topo__atalhos::-webkit-scrollbar {
		display: none;
	}

	.pt-topo__atalhos .pt-chip {
		flex-shrink: 0;
	}

	.pt-topo.is-compacto .pt-topo__principal {
		padding-block: 4px;
	}

	.pt-topo.is-compacto .pt-busca,
	.pt-topo.is-compacto .pt-topo__atalhos {
		display: none;
	}

	.pt-topo.is-compacto a.pt-acao {
		padding: 0;
	}
}

/* Botão de busca: só no topo compacto do celular (Header Mobile "Rolando"). */
.pt-topo__buscar {
	display: none;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pt-texto-principal);
	cursor: pointer;
}

@media (max-width: 767px) {
	.pt-topo.is-compacto .pt-topo__buscar,
	.pt-topo-compacto-celular .pt-topo .pt-topo__buscar {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
	}

	/* Compacto: menu, logo, busca e carrinho (conta e favoritos ficam na gaveta). */
	.pt-topo.is-compacto a.pt-acao:not([data-carrinho-link]),
	.pt-topo-compacto-celular .pt-topo a.pt-acao:not([data-carrinho-link]) {
		display: none;
	}

	.pt-topo-compacto-celular .pt-topo {
		border-bottom: 0;
		box-shadow: var(--pt-sombra-sutil);
	}

	.pt-topo-compacto-celular .pt-topo .pt-topo__principal {
		padding-block: 4px;
	}

	.pt-topo-compacto-celular .pt-topo .pt-busca,
	.pt-topo-compacto-celular .pt-topo .pt-topo__atalhos {
		display: none;
	}

	/* Busca aberta pelo botão: o campo aparece embaixo, com o foco nele. */
	.pt-topo.is-buscando .pt-busca,
	.pt-topo-compacto-celular .pt-topo.is-buscando .pt-busca {
		display: flex;
		margin-bottom: 8px;
	}

	.pt-topo.is-buscando .pt-topo__buscar {
		color: var(--pt-fundo-acao);
	}
}

/* ---------- Gaveta do menu (celular e tablet) ---------- */
.pt-gaveta {
	position: fixed;
	inset: 0 auto 0 0;
	width: min(360px, 88vw);
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0 0 24px;
	overflow-y: auto;
	border: 0;
	background: var(--pt-fundo-superficie);
	color: var(--pt-texto-principal);
	box-shadow: var(--pt-sombra-alta);
}

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

.pt-gaveta::backdrop {
	background: rgba(31, 27, 23, 0.5);
}

@keyframes pt-gaveta-entra {
	from {
		transform: translateX(-100%);
	}
}

.pt-gaveta__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 12px 12px 20px;
	border-bottom: 1px solid var(--pt-borda-sutil);
}

.pt-gaveta__logo {
	width: 132px;
	height: auto;
}

.pt-gaveta nav {
	padding: 20px;
}

a.pt-gaveta__perfil {
	margin-bottom: 12px;
}

.pt-gaveta__lista,
.pt-gaveta__lista ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pt-gaveta__lista > li {
	border-bottom: 1px solid var(--pt-borda-sutil);
}

.pt-gaveta__lista a,
.pt-gaveta__lista summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 52px;
	color: var(--pt-texto-principal);
	font: 600 16px/22px var(--pt-fonte-interface);
	text-decoration: none;
	list-style: none;
	cursor: pointer;
}

.pt-gaveta__lista summary::-webkit-details-marker {
	display: none;
}

.pt-gaveta__lista details[open] > summary .pt-icone {
	transform: rotate(180deg);
}

.pt-gaveta__lista details ul {
	padding: 0 0 12px 12px;
}

.pt-gaveta__lista details ul a {
	min-height: 44px;
	color: var(--pt-texto-secundario);
	font-size: 15px;
	font-weight: 500;
}

/* ---------- Carrossel (listas que deslizam) ---------- */
.pt-carrossel {
	position: relative;
	width: calc(min(var(--pt-container), 100% - 2 * var(--pt-margem)) + 12px);
	margin: -6px auto -32px;
	padding: 6px 6px 32px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-padding-inline: 6px;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	container-type: inline-size;
}

.pt-carrossel::-webkit-scrollbar {
	display: none;
}

.pt-carrossel__lista {
	display: flex;
	gap: var(--pt-calha);
	width: max-content;
	min-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pt-carrossel__lista > li {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.pt-carrossel__lista--produtos > li {
	width: calc((100cqw - 3 * var(--pt-calha)) / 4);
}

.pt-carrossel__lista--kits > li,
.pt-carrossel__lista--tiles > li {
	width: calc((100cqw - 2 * var(--pt-calha)) / 3);
}

@media (max-width: 1099px) {
	.pt-carrossel__lista--produtos > li {
		width: calc((100cqw - 2 * var(--pt-calha)) / 3);
	}

	.pt-carrossel__lista--kits > li,
	.pt-carrossel__lista--tiles > li {
		width: calc((100cqw - var(--pt-calha)) / 2);
	}
}

@media (max-width: 767px) {
	.pt-carrossel {
		width: 100%;
		margin: -4px 0 -32px;
		padding: 4px 0 32px;
		scroll-padding-inline: 16px;
	}

	.pt-carrossel__lista {
		padding-inline: 16px;
	}

	.pt-carrossel__lista--produtos > li {
		width: 156px;
	}

	.pt-carrossel__lista--kits > li {
		width: 280px;
	}

	.pt-carrossel__lista--tiles > li {
		width: 296px;
	}
}

/* ---------- Cabeçalho de seção (76:548) ---------- */
.pt-secao {
	display: flex;
	flex-direction: column;
	gap: var(--pt-cabecalho);
	padding-top: var(--pt-secao);
}

.pt-cabecalho {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	min-height: 80px;
}

.pt-cabecalho__titulo {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

/*
 * No Figma a anotação girada ocupa a caixa já girada (cerca de 61 px de
 * altura). Girando pelo canto de cima à direita, o topo visual fica no topo
 * da caixa, e a margem de baixo completa a altura que o Figma reserva.
 */
.pt-cabecalho__anotacao {
	flex-shrink: 0;
	margin: 0 0 17px;
	transform: rotate(-4deg);
	transform-origin: 100% 0;
}

/* "Achados": no desktop sem seta e sem giro, 4 px acima do título. */
.pt-cabecalho__anotacao--achados {
	margin: -4px 0 0 26px;
	transform: none;
}

.pt-cabecalho__anotacao--achados .pt-anotacao__seta {
	display: none;
}

.pt-cabecalho__acoes {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 24px;
}

.pt-setas {
	display: flex;
	gap: 8px;
}

@media (max-width: 1099px) {
	.pt-cabecalho {
		flex-wrap: wrap;
	}

	.pt-cabecalho__anotacao {
		display: none;
	}
}

@media (max-width: 767px) {
	.pt-cabecalho {
		flex-direction: column;
		align-items: center;
		gap: 12px;
		min-height: 0;
		text-align: center;
	}

	.pt-cabecalho__titulo {
		flex-direction: column-reverse;
		align-items: center;
		gap: 12px;
	}

	.pt-cabecalho__titulo .pt-titulo {
		text-align: center;
	}

	.pt-cabecalho__anotacao {
		display: inline-flex;
		margin: 0 0 17px;
	}

	/* No celular os "Achados" ganham seta e giro, como os outros cabeçalhos. */
	.pt-cabecalho__anotacao--achados {
		margin: 0 0 15px;
		transform: rotate(-4deg);
	}

	.pt-cabecalho__anotacao--achados .pt-anotacao__seta {
		display: block;
	}

	.pt-cabecalho__acoes {
		flex-direction: column;
		gap: 12px;
	}

	.pt-cabecalho__acoes a.pt-link-acao {
		order: -1;
	}

	.pt-setas {
		display: none;
	}
}

/* ---------- Card de produto (77:807) ---------- */
.pt-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	padding: 12px;
	border: 1px solid var(--pt-borda-sutil);
	border-radius: var(--pt-raio-lg);
	background: var(--pt-fundo-superficie);
	transition: box-shadow 0.2s ease;
}

.pt-card:hover {
	box-shadow: var(--pt-sombra-alta);
}

/* O card inteiro é o link do produto (o anel de foco fica no card). */
.pt-card:has(.pt-card__nome a:focus-visible) {
	outline: 3px solid var(--pt-fundo-acao);
	outline-offset: 2px;
}

.pt-card__midia {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--pt-raio-md);
	background: var(--pt-fundo-sutil);
}

.pt-card__foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
}

.pt-card__info {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 0 4px;
}

.pt-card__nome {
	display: -webkit-box;
	height: 44px;
	margin: 0;
	overflow: hidden;
	color: var(--pt-texto-principal);
	font: 600 15px/22px var(--pt-fonte-interface);
	letter-spacing: 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.pt-card__nome a {
	color: var(--pt-texto-principal);
	text-decoration: none;
}

.pt-card__nome a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--pt-raio-lg);
}

.pt-card__nome a:focus-visible {
	outline: none;
}

.pt-card:hover .pt-card__nome a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Avaliação (67:431). */
.pt-avaliacao {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	font: 400 13px/18px var(--pt-fonte-interface);
	white-space: nowrap;
}

.pt-avaliacao__estrela {
	font-size: 16px;
	color: var(--pt-texto-avaliacao);
}

.pt-avaliacao__nota {
	color: var(--pt-texto-principal);
	font-weight: 600;
}

.pt-avaliacao__qtd {
	color: var(--pt-texto-apoio);
}

.pt-avaliacao--vazia {
	height: 18px;
	visibility: hidden;
}

/* Preço (68:456): só o preço, Pix em verde e parcelas. */
.pt-preco {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pt-preco p {
	margin: 0;
}

.pt-preco__por {
	color: var(--pt-texto-principal);
	font: 700 var(--pt-tipo-preco) / var(--pt-tipo-preco-altura) var(--pt-fonte-interface);
	white-space: nowrap;
}

.pt-preco__pix {
	color: var(--pt-texto-economia);
	font: 600 13px/18px var(--pt-fonte-interface);
}

.pt-preco__parcelas {
	color: var(--pt-texto-apoio);
	font: 400 13px/18px var(--pt-fonte-interface);
}

.pt-preco__parcelas-curto {
	display: none;
}

/* Favoritar (70:574): coração que vira cheio sobre fundo tinta. */
.pt-favoritar {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--pt-raio-pilula);
	background: var(--pt-fundo-superficie);
	color: var(--pt-texto-principal);
	box-shadow: 0 2px 4px rgba(31, 27, 23, 0.1);
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/* Área de toque de 44 px. */
.pt-favoritar::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
}

.pt-favoritar:hover {
	transform: scale(1.06);
}

.pt-favoritar[aria-pressed="true"] {
	background: var(--pt-fundo-acao-suave);
	color: var(--pt-fundo-acao);
}

.pt-favoritar[aria-pressed="true"] .pt-icone {
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Botão de compra (71:513): Padrão, Adicionando… e Adicionado. */
.pt-botao-compra,
a.pt-botao-compra {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--pt-borda-interativa);
	border-radius: var(--pt-raio-pilula);
	background: var(--pt-fundo-superficie);
	color: var(--pt-texto-principal);
	font: 700 14px/20px var(--pt-fonte-interface);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.pt-botao-compra:hover,
a.pt-botao-compra:hover {
	border-color: var(--pt-texto-principal);
	background: var(--pt-fundo-sutil);
	color: var(--pt-texto-principal);
}

.pt-botao-compra__curto {
	display: none;
}

.pt-botao-compra.is-adicionando {
	color: var(--pt-texto-apoio);
	cursor: progress;
}

.pt-botao-compra.is-adicionado,
.pt-botao-compra.is-adicionado:hover {
	border-color: var(--pt-texto-economia);
	background: var(--pt-fundo-sucesso);
	color: var(--pt-texto-economia);
}

/* Card compacto no celular (156 px). */
@media (max-width: 767px) {
	.pt-card {
		gap: 12px;
		padding: 8px;
	}

	.pt-card__info {
		padding: 0;
	}

	.pt-card__nome {
		height: 36px;
		font-size: 13px;
		line-height: 18px;
	}

	.pt-card .pt-favoritar {
		top: 8px;
		right: 8px;
		width: 36px;
		height: 36px;
	}

	.pt-card .pt-favoritar::before {
		inset: -4px;
	}

	.pt-card .pt-preco__parcelas-longo {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.pt-card .pt-preco__parcelas-curto {
		display: inline;
	}

	.pt-botao-compra,
	a.pt-botao-compra {
		gap: 4px;
		padding: 0 12px;
		font-size: 13px;
		font-weight: 600;
		line-height: 18px;
	}

	.pt-botao-compra .pt-icone {
		font-size: 16px;
	}

	.pt-botao-compra__longo {
		display: none;
	}

	.pt-botao-compra__curto {
		display: inline;
	}
}

/* ---------- Card de kit (380:2822) ---------- */
.pt-card-kit {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	padding: 12px;
	border-radius: var(--pt-raio-xl);
	background: var(--pt-quente-creme);
}

.pt-card-kit__midia {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--pt-raio-lg);
	background: var(--pt-quente-pessego);
}

.pt-card-kit__foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.pt-card-kit:hover .pt-card-kit__foto {
	transform: scale(1.03);
}

.pt-card-kit__selo {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border-radius: var(--pt-raio-pilula);
	background: var(--pt-fundo-superficie);
	color: var(--pt-texto-principal);
	font: 700 14px/20px var(--pt-fonte-interface);
}

.pt-card-kit__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 4px;
}

.pt-card-kit__anotacao {
	margin: 0;
	color: var(--pt-texto-acao);
	font-family: var(--pt-fonte-manuscrita);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
}

.pt-card-kit__nome {
	margin: 0;
	font-family: var(--pt-fonte-titulo);
	font-size: var(--pt-tipo-titulo-3);
	font-weight: 600;
	line-height: var(--pt-tipo-titulo-3-altura);
	letter-spacing: -0.015em;
}

.pt-card-kit__nome a {
	color: var(--pt-texto-principal);
	text-decoration: none;
}

.pt-card-kit__nome a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.pt-card-kit__itens {
	margin: 0;
	color: var(--pt-texto-secundario);
	font: 400 14px/20px var(--pt-fonte-interface);
}

.pt-card-kit__compra {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: auto;
	padding: 0 4px;
}

.pt-card-kit__economia {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 10px;
	border-radius: var(--pt-raio-sm);
	background: var(--pt-fundo-sucesso);
	color: var(--pt-texto-economia);
	font: 400 12px/16px var(--pt-fonte-interface);
}

.pt-card-kit__economia .pt-icone {
	font-size: 16px;
}

a.pt-card-kit__botao {
	width: 100%;
}

@media (max-width: 767px) {
	.pt-card-kit {
		gap: 12px;
		padding: 10px;
	}
}

/* ---------- Favoritos (Figma 243:2425 desktop, 251:3811 celular) ---------- */
/* Quem não entrou: trilha e lista na largura do conteúdo, sem a coluna da conta. */
.pt-favoritos-pagina .pt-trilha {
	padding: 20px var(--pt-recuo) 4px;
}

.pt-favoritos-pagina .pt-favoritos {
	width: min(var(--pt-container), 100% - 2 * var(--pt-margem));
	margin: 0 auto;
	padding: 24px 0 var(--pt-secao);
}

.pt-favoritos {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.pt-favoritos__cabecalho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.pt-favoritos__titulo-linha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	min-width: 0;
}

.pt-favoritos__contagem,
.pt-favoritos__status {
	margin: 0;
	color: var(--pt-texto-secundario);
	font: 400 14px/20px var(--pt-fonte-interface);
}

/* Girada 4°: a margem completa a altura da caixa já girada (61 px no Figma). */
.pt-favoritos__anotacao {
	margin: 8px 0;
	transform: rotate(4deg);
}

/* Ordenar (Chip 72:469): o select cobre o chip inteiro, então tocar em qualquer ponto abre a lista. */
.pt-favoritos__ordem {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	height: 44px;
	border: 1px solid var(--pt-borda-interativa);
	border-radius: var(--pt-raio-pilula);
	background: var(--pt-fundo-superficie);
	color: var(--pt-texto-principal);
}

.pt-favoritos__ordem:hover {
	border-color: var(--pt-texto-principal);
}

.pt-favoritos__ordem:has(select:focus-visible) {
	outline: 3px solid var(--pt-fundo-acao);
	outline-offset: 2px;
}

.pt-favoritos__ordem-icone,
.pt-favoritos__ordem-seta {
	position: absolute;
	top: 50%;
	pointer-events: none;
	transform: translateY(-50%);
}

.pt-favoritos__ordem-icone {
	left: 16px;
	color: var(--pt-texto-secundario);
}

.pt-favoritos__ordem-seta {
	right: 16px;
	font-size: 16px;
}

.pt-favoritos__ordem select {
	height: 100%;
	margin: 0;
	padding: 0 36px 0 40px;
	border: 0;
	border-radius: inherit;
	outline: none;
	background: transparent;
	color: var(--pt-texto-principal);
	font: 600 14px/20px var(--pt-fonte-interface);
	cursor: pointer;
	appearance: none;
	field-sizing: content;
}

.pt-favoritos__filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pt-favoritos__filtros .pt-chip {
	cursor: pointer;
}

.pt-favoritos__filtros .pt-chip:hover {
	border-color: var(--pt-texto-principal);
	background: var(--pt-fundo-sutil);
}

.pt-favoritos__filtros .pt-chip[aria-pressed="true"] {
	border: 2px solid var(--pt-borda-acao);
	background: var(--pt-fundo-acao-suave);
	color: var(--pt-texto-acao);
	font-weight: 700;
}

/* Cards de 306 px: 4 por linha na página solta, 3 ao lado da coluna da conta. */
.pt-favoritos__grade {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pt-conta .pt-favoritos__grade {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Remover dos favoritos (275:2828): linha de 44 px abaixo do botão de compra. */
.pt-card__remover {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pt-texto-secundario);
	font: 700 14px/20px var(--pt-fonte-interface);
	cursor: pointer;
}

.pt-card__remover:hover {
	color: var(--pt-fundo-acao);
	text-decoration: underline;
}

/* Card indisponível (Estado=Indisponível): nome e preço em cor de apoio, sem parcelas. */
.pt-card--indisponivel .pt-card__nome a,
.pt-card--indisponivel .pt-preco__por,
.pt-card--indisponivel .pt-preco__pix {
	color: var(--pt-texto-apoio);
}

.pt-favoritos__vazio {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 48px 16px;
	text-align: center;
}

.pt-favoritos__vazio p {
	max-width: 420px;
	margin: 0;
	color: var(--pt-texto-secundario);
}

.pt-favoritos__mascote {
	width: 132px;
	height: auto;
}

/* "Ver mais": 8 px a mais de respiro acima, como no Figma (32 no total). */
.pt-favoritos__mais-linha {
	display: flex;
	justify-content: center;
	padding-top: 8px;
}

.pt-favoritos__mais-linha:has(> [hidden]) {
	display: none;
}

.pt-favoritos__privacidade {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	color: var(--pt-texto-secundario);
	font: 400 12px/16px var(--pt-fonte-interface);
}

.pt-favoritos__privacidade .pt-icone {
	font-size: 16px;
}

/* Aviso com desfazer (~5 s). */
.pt-aviso {
	position: fixed;
	bottom: 24px;
	left: 50%;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: calc(100% - 32px);
	padding: 8px 8px 8px 20px;
	border-radius: var(--pt-raio-pilula);
	background: var(--pt-fundo-inverso);
	color: var(--pt-inv-texto);
	box-shadow: var(--pt-sombra-alta);
	font: 600 14px/20px var(--pt-fonte-interface);
	transform: translateX(-50%);
}

.pt-aviso__desfazer {
	flex-shrink: 0;
	min-height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--pt-raio-pilula);
	background: rgba(251, 244, 234, 0.14);
	color: var(--pt-inv-acao);
	font: 700 14px/20px var(--pt-fonte-interface);
	cursor: pointer;
}

@media (max-width: 1099px) {
	.pt-favoritos__grade {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pt-conta .pt-favoritos__grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.pt-favoritos-pagina .pt-favoritos {
		padding: 24px 0 56px;
	}

	.pt-favoritos {
		gap: 20px;
	}

	/* Título centralizado numa linha; contagem e ordenar na de baixo. */
	.pt-favoritos__cabecalho {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 20px 12px;
	}

	.pt-favoritos__titulo-linha {
		display: contents;
	}

	.pt-favoritos__titulo {
		grid-column: 1 / -1;
		text-align: center;
	}

	.pt-favoritos__ordem {
		grid-column: 2;
	}

	/* Sem seta, girada 3° pelo canto: a margem de baixo completa a caixa girada (39 px). */
	.pt-favoritos__anotacao--celular {
		align-self: flex-start;
		margin: 0 0 9px 9.6px;
		transform: rotate(3deg);
		transform-origin: 0 0;
	}

	.pt-favoritos__grade,
	.pt-conta .pt-favoritos__grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 12px;
	}

	/* Aqui o card tem 173 px: as parcelas vêm por extenso, em duas linhas. */
	.pt-favoritos .pt-card .pt-preco__parcelas-longo {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}

	.pt-favoritos .pt-card .pt-preco__parcelas-curto {
		display: none;
	}

	.pt-favoritos__mais {
		width: 100%;
	}

	.pt-favoritos__mais-linha {
		display: block;
	}
}

/* ---------- Benefícios (86:367) ---------- */
.pt-beneficios {
	padding: 80px var(--pt-recuo) var(--pt-secao);
}

.pt-beneficios__lista {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pt-beneficio {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 280px;
}

/* No Figma a linha tem 56 px; texto de duas linhas transborda centrado. */
@media (min-width: 768px) {
	.pt-beneficio {
		height: 56px;
	}
}

.pt-beneficio__icone {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--pt-raio-pilula);
	background: var(--pt-quente-pessego);
	color: var(--pt-texto-acao);
}

.pt-beneficio__icone .pt-icone {
	font-size: 24px;
}

.pt-beneficio__texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pt-beneficio__texto strong {
	color: var(--pt-texto-principal);
	font: 700 16px/22px var(--pt-fonte-interface);
}

.pt-beneficio__texto span {
	color: var(--pt-texto-apoio);
	font: 400 13px/18px var(--pt-fonte-interface);
}

.pt-beneficios__divisor {
	flex-shrink: 0;
	width: 1px;
	height: 48px;
	background: var(--pt-fundo-indicador);
}

@media (max-width: 1099px) {
	.pt-beneficios__lista {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 16px;
	}

	.pt-beneficios__divisor {
		display: none;
	}

	.pt-beneficio {
		width: auto;
	}
}

@media (max-width: 767px) {
	.pt-beneficios {
		padding: 32px 16px 56px;
	}

	.pt-beneficios__lista {
		align-items: start;
		padding: 20px;
		border: 1px solid var(--pt-borda-sutil);
		border-radius: var(--pt-raio-2xl);
		background: var(--pt-fundo-superficie);
	}

	.pt-beneficio {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.pt-beneficio__icone {
		width: 44px;
		height: 44px;
	}

	.pt-beneficio__icone .pt-icone {
		font-size: 20px;
	}

	/* Benefício Compacto (104:1363): Rótulo/P Forte + Legenda. */
	.pt-beneficio__texto strong {
		font-size: 14px;
		line-height: 20px;
	}

	.pt-beneficio__texto span {
		font-size: 12px;
		line-height: 16px;
	}
}

/* ---------- Rodapé (87:634 desktop · 105:1449 celular) ---------- */
.pt-rodape {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding: 72px var(--pt-recuo) 32px;
	background: var(--pt-quente-areia);
	color: var(--pt-texto-principal);
}

.pt-rodape__assinatura {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.pt-rodape__marca {
	display: flex;
	align-items: center;
	gap: 24px;
}

.pt-rodape__mascote {
	width: 132px;
	height: auto;
}

.pt-rodape__frase {
	margin: 0;
	font-family: var(--pt-fonte-titulo);
	font-size: var(--pt-tipo-titulo-2);
	font-weight: 600;
	line-height: var(--pt-tipo-titulo-2-altura);
	letter-spacing: -0.02em;
}

.pt-rodape__frase em {
	color: var(--pt-texto-destaque);
	font-style: italic;
	font-weight: 500;
}

.pt-rodape__redes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pt-rodape__divisor {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--pt-fundo-indicador);
}

.pt-rodape__colunas {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
}

.pt-rodape__sobre {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 300px;
}

.pt-rodape__logo {
	width: 150px;
	height: auto;
}

.pt-rodape__sobre p {
	margin: 0;
	color: var(--pt-texto-secundario);
	font: 400 14px/20px var(--pt-fonte-interface);
}

.pt-rodape__grupo > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	color: var(--pt-texto-principal);
	font: 700 14px/20px var(--pt-fonte-interface);
	list-style: none;
	cursor: default;
}

.pt-rodape__grupo > summary::-webkit-details-marker {
	display: none;
}

.pt-rodape__grupo > summary .pt-icone {
	display: none;
	transition: transform 0.15s ease;
}

.pt-rodape__grupo ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* O item herdava a entrelinha do corpo (26 px); no Figma cada link tem 20. */
.pt-rodape__grupo li {
	font-size: 14px;
	line-height: 20px;
}

.pt-rodape__grupo a {
	color: var(--pt-texto-secundario);
	font: 400 14px/20px var(--pt-fonte-interface);
	text-decoration: none;
	white-space: nowrap;
}

.pt-rodape__grupo a:hover {
	color: var(--pt-texto-destaque);
	text-decoration: underline;
}

.pt-rodape__contatos li {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--pt-texto-secundario);
	font: 400 14px/20px var(--pt-fonte-interface);
	white-space: nowrap;
}

.pt-rodape__contatos .pt-icone {
	width: 18px;
}

.pt-rodape__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.pt-rodape__legal {
	margin: 0;
	color: var(--pt-texto-apoio);
	font: 400 13px/18px var(--pt-fonte-interface);
}

.pt-rodape__pagamentos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.pt-rodape__pagamentos-titulo {
	color: var(--pt-texto-secundario);
	font: 600 13px/18px var(--pt-fonte-interface);
}

.pt-selo-pagamento {
	padding: 4px 12px;
	border-radius: var(--pt-raio-xs);
	background: var(--pt-fundo-superficie);
	color: var(--pt-texto-secundario);
	font: 600 12px/16px var(--pt-fonte-interface);
}

@media (max-width: 1099px) {
	.pt-rodape__assinatura {
		flex-direction: column;
		align-items: flex-start;
	}

	.pt-rodape__colunas {
		flex-wrap: wrap;
	}

	.pt-rodape__sobre {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.pt-rodape {
		gap: 32px;
		padding: 48px 16px 32px;
	}

	.pt-rodape__assinatura {
		gap: 32px;
	}

	.pt-rodape__marca {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.pt-rodape__mascote {
		width: 109px;
	}

	.pt-rodape__frase em {
		display: block;
	}

	.pt-rodape__divisor {
		display: none;
	}

	.pt-rodape__colunas {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.pt-rodape__sobre {
		gap: 12px;
		margin-bottom: 32px;
	}

	/* Caixa de 132 x 21 do Figma, com a logo encaixada (FIT). */
	.pt-rodape__logo {
		width: 132px;
		height: 21px;
		object-fit: contain;
	}

	.pt-rodape__grupo {
		border-bottom: 1px solid var(--pt-borda-sutil);
	}

	.pt-rodape__grupo > summary {
		min-height: 54px;
		margin: 0;
		font-size: 16px;
		line-height: 22px;
		cursor: pointer;
	}

	.pt-rodape__grupo > summary .pt-icone {
		display: inline-block;
	}

	.pt-rodape__grupo[open] > summary .pt-icone {
		transform: rotate(180deg);
	}

	.pt-rodape__grupo ul {
		gap: 12px;
		padding: 0 0 16px;
	}

	.pt-rodape__contatos .pt-icone {
		display: none;
	}

	.pt-rodape__base {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 12px;
	}

	.pt-rodape__pagamentos {
		row-gap: 12px;
	}

	.pt-rodape__pagamentos-titulo {
		flex-basis: 100%;
	}

	/* No celular o selo de pagamento tem contorno e cantos de 8 px (Figma). */
	.pt-selo-pagamento {
		padding: 4px 8px;
		border: 1px solid var(--pt-borda-sutil);
		border-radius: var(--pt-raio-sm);
		color: var(--pt-texto-principal);
	}

	.pt-rodape__legal {
		font-size: 12px;
		line-height: 16px;
	}
}

/* ---------- Página "em breve" (modo de visibilidade do WooCommerce) ---------- */
.pt-em-breve {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 100vh;
	padding: var(--pt-secao) var(--pt-margem);
	text-align: center;
}

.pt-em-breve h1 {
	margin: 0;
	font-family: var(--pt-fonte-titulo);
	font-size: var(--pt-tipo-display);
	font-weight: 600;
	line-height: var(--pt-tipo-display-altura);
	letter-spacing: -0.03em;
}

.pt-em-breve h1 em {
	color: var(--pt-texto-destaque);
	font-style: italic;
	font-weight: 500;
}

.pt-em-breve .pt-anotacao {
	font-size: var(--pt-tipo-anotacao-g);
	transform: rotate(-3deg);
}

.pt-em-breve p:not(.pt-anotacao) {
	max-width: 520px;
	margin: 0;
	color: var(--pt-texto-secundario);
	font-size: var(--pt-tipo-lead);
	line-height: var(--pt-tipo-lead-altura);
}

/* ---------- Selo circular "feito com carinho" (36:480): Home e listagens ---------- */
.pt-selo {
	position: absolute;
	width: 136px;
	height: 136px;
	pointer-events: none;
}

.pt-selo__disco,
.pt-selo__texto {
	position: absolute;
	inset: 0;
	width: 136px;
	height: 136px;
	overflow: visible;
}

.pt-selo__anel {
	position: absolute;
	top: 26px;
	left: 26px;
	width: 84px;
	height: 84px;
}

.pt-selo__texto text {
	fill: #fff;
	font-family: var(--pt-fonte-interface);
	font-size: 10.5px;
	font-weight: 800;
}

/* Mascote como no Figma: o recorte inteiro da imagem preenche 64 x 58. */
.pt-selo__mascote {
	position: absolute;
	top: 39px;
	left: 36px;
	width: 64px;
	height: 58px;
	object-fit: fill;
}

/* ---------- Alternador Cachorros/Gatos da faixa de categorias (Home e 404) ---------- */
.pt-alternador {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	border-radius: var(--pt-raio-pilula);
	background: var(--pt-fundo-trilho);
}

.pt-alternador__opcao {
	height: 36px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--pt-raio-pilula);
	background: transparent;
	color: var(--pt-texto-secundario);
	font: 600 14px/20px var(--pt-fonte-interface);
	cursor: pointer;
}

.pt-alternador__opcao[aria-checked="true"] {
	background: var(--pt-fundo-superficie);
	color: var(--pt-texto-principal);
	font-weight: 700;
	box-shadow: var(--pt-sombra-sutil);
}

/* ---------- Lista e card de categoria (80:796): Home e listagens ---------- */
.pt-categorias.pt-secao {
	padding-top: 40px;
}

@media (max-width: 767px) {
	.pt-categorias.pt-secao {
		padding-top: 56px;
	}
}

/* 144 px no Figma; entre 1200 e 1279 px os cards encolhem até o círculo (128) pra não cortar o último. */
.pt-categorias__lista {
	display: grid;
	grid-template-columns: repeat(8, minmax(128px, 144px));
	justify-content: space-between;
	width: min(var(--pt-container), 100% - 2 * var(--pt-margem));
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.pt-categorias__lista[hidden] {
	display: none;
}

a.pt-card-categoria {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: var(--pt-texto-principal);
	text-decoration: none;
}

.pt-card-categoria__circulo {
	display: block;
	width: 128px;
	height: 128px;
	overflow: hidden;
	border-radius: var(--pt-raio-pilula);
	background: var(--pt-quente-pessego);
	transition: box-shadow 0.2s ease;
}

.pt-card-categoria__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

a.pt-card-categoria:hover .pt-card-categoria__circulo {
	box-shadow: 0 0 0 3px var(--pt-quente-pessego-forte);
}

a.pt-card-categoria:hover .pt-card-categoria__img {
	transform: scale(1.05);
}

.pt-card-categoria__nome {
	font: 700 15px/22px var(--pt-fonte-interface);
	text-align: center;
}

.pt-card-categoria__qtd {
	margin-top: -10px;
	color: var(--pt-texto-apoio);
	font: 400 12px/16px var(--pt-fonte-interface);
	text-align: center;
}

@media (max-width: 1199px) {
	.pt-categorias__lista {
		display: flex;
		justify-content: flex-start;
		gap: 16px;
		width: 100%;
		padding: 4px var(--pt-margem) 8px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.pt-categorias__lista::-webkit-scrollbar {
		display: none;
	}

	.pt-categorias__lista > li {
		flex: 0 0 auto;
		width: 128px;
	}
}

@media (max-width: 767px) {
	.pt-categorias__lista {
		gap: 8px;
		padding: 4px 16px 8px;
	}

	.pt-categorias__lista > li {
		width: 80px;
	}

	a.pt-card-categoria {
		gap: 8px;
	}

	.pt-card-categoria__circulo {
		width: 72px;
		height: 72px;
	}

	.pt-card-categoria__nome {
		font-size: 13px;
		font-weight: 600;
		line-height: 18px;
	}

	.pt-card-categoria__qtd {
		margin-top: -8px;
	}
}

/* ---------- Trilha (desktop) e voltar (celular): PDP e listagens ---------- */
.pt-trilha {
	padding: 24px var(--pt-recuo);
}

.pt-trilha__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 400 13px/18px var(--pt-fonte-interface);
}

.pt-trilha__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pt-trilha__item a {
	color: var(--pt-texto-secundario);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pt-trilha__item a:hover {
	color: var(--pt-fundo-acao);
}

.pt-trilha__sep {
	font-size: 16px;
	color: var(--pt-texto-apoio);
}

.pt-trilha__item [aria-current] {
	color: var(--pt-texto-apoio);
}

a.pt-voltar {
	display: flex;
	align-items: center;
	gap: 4px;
	min-height: 40px;
	padding: 10px 16px;
	color: var(--pt-texto-secundario);
	font: 700 14px/20px var(--pt-fonte-interface);
	text-decoration: none;
}

a.pt-voltar span {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- Painel (dialog): lateral no desktop, gaveta de baixo no celular ---------- */
html.pt-dialogo-aberto {
	overflow: hidden;
}

dialog.pt-painel {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(480px, 100vw);
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: var(--pt-fundo-superficie);
	color: var(--pt-texto-principal);
	box-shadow: var(--pt-sombra-alta);
}

dialog.pt-painel--largo {
	width: min(640px, 100vw);
}

dialog.pt-painel::backdrop {
	background: rgba(31, 27, 23, 0.5);
}

dialog.pt-painel[open] {
	animation: pt-painel-entra 0.25s ease-out;
}

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

@keyframes pt-painel-sobe {
	from {
		opacity: 0;
		transform: translateY(32px);
	}
}

.pt-painel__caixa {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	padding: 32px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.pt-painel__puxador {
	display: none;
}

.pt-painel__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.pt-painel__titulo {
	margin: 0;
	color: var(--pt-texto-principal);
	font: 600 22px/26px var(--pt-fonte-titulo);
}

.pt-painel__lista {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

@media (max-width: 767px) {
	dialog.pt-painel,
	dialog.pt-painel--largo {
		inset: auto 0 0 0;
		width: 100%;
		height: auto;
		max-height: 92dvh;
		border-radius: 28px 28px 0 0;
	}

	dialog.pt-painel[open] {
		animation-name: pt-painel-sobe;
	}

	.pt-painel__caixa {
		max-height: 92dvh;
		padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
	}

	.pt-painel__puxador {
		display: block;
		flex-shrink: 0;
		align-self: center;
		width: 40px;
		height: 4px;
		margin-bottom: 4px;
		border-radius: var(--pt-raio-pilula);
		background: var(--pt-borda-sutil);
	}
}

/* ---------- Foto ampliada ---------- */
dialog.pt-zoom {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(31, 27, 23, 0.94);
}

dialog.pt-zoom[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

dialog.pt-zoom::backdrop {
	background: transparent;
}

.pt-zoom__foto {
	max-width: min(92vw, 1200px);
	max-height: 86vh;
	object-fit: contain;
	border-radius: var(--pt-raio-lg);
}

.pt-zoom__fechar {
	position: absolute;
	top: 16px;
	right: 16px;
}

.pt-zoom__seta {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.pt-zoom__seta--anterior {
	left: 16px;
}

.pt-zoom__seta--proxima {
	right: 16px;
}

.pt-zoom__contador {
	position: absolute;
	bottom: 16px;
	left: 50%;
	margin: 0;
	padding: 4px 12px;
	border-radius: var(--pt-raio-pilula);
	background: var(--pt-fundo-superficie);
	color: var(--pt-texto-principal);
	font: 600 13px/18px var(--pt-fonte-interface);
	transform: translateX(-50%);
}

.pt-zoom__contador:empty {
	display: none;
}

/* ---------- Aviso de carrinho (DS "Aviso de carrinho") ---------- */
.pt-aviso-carrinho {
	position: fixed;
	top: 112px;
	right: 16px;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 400px;
	max-width: calc(100vw - 32px);
	padding: 12px 8px 12px 12px;
	border-radius: var(--pt-raio-2xl);
	background: var(--pt-fundo-inverso);
	color: var(--pt-inv-texto);
	box-shadow: var(--pt-sombra-alta);
	animation: pt-aviso-entra 0.2s ease-out;
}

@keyframes pt-aviso-entra {
	from {
		transform: translateY(-8px);
	}
}

.pt-aviso-carrinho__foto {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--pt-raio-md);
	background: var(--pt-fundo-superficie);
}

.pt-aviso-carrinho__textos {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pt-aviso-carrinho__titulo {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--pt-inv-texto);
	font: 700 14px/20px var(--pt-fonte-interface);
}

.pt-aviso-carrinho__titulo .pt-icone {
	font-size: 16px;
	color: #7ed3a6;
}

.pt-aviso-carrinho__detalhe {
	margin: 0;
	overflow: hidden;
	color: var(--pt-inv-secundario);
	font: 400 13px/18px var(--pt-fonte-interface);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.pt-aviso-carrinho__detalhe:empty {
	display: none;
}

a.pt-aviso-carrinho__acao {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 4px;
	padding-top: 4px;
	color: var(--pt-inv-acao);
	font: 700 14px/20px var(--pt-fonte-interface);
	text-decoration: none;
}

a.pt-aviso-carrinho__acao:hover {
	color: var(--pt-inv-acao);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pt-aviso-carrinho__acao .pt-icone {
	font-size: 16px;
}

.pt-aviso-carrinho__fechar {
	position: relative;
	display: flex;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--pt-raio-pilula);
	background: none;
	color: var(--pt-inv-apoio);
	cursor: pointer;
}

/* Área de toque de 44 px. */
.pt-aviso-carrinho__fechar::before {
	content: "";
	position: absolute;
	inset: -6px;
}

.pt-aviso-carrinho__fechar:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--pt-inv-texto);
}

.pt-aviso-carrinho :focus-visible {
	outline-color: var(--pt-inv-acao);
}

@media (max-width: 767px) {
	.pt-aviso-carrinho {
		top: auto;
		right: 16px;
		bottom: calc(16px + var(--pt-barra-altura, 0px) + env(safe-area-inset-bottom));
		left: 16px;
		width: auto;
		max-width: none;
		animation-name: pt-aviso-sobe;
	}
}

@keyframes pt-aviso-sobe {
	from {
		transform: translateY(8px);
	}
}

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