/* ============================================================================
   Loja — Sofia de Castro Fernandes
   ----------------------------------------------------------------------------
   Camada semântica da loja. Os tokens e o vocabulário base são os do site
   (keynote/wp/theme-src/input.css); as classes .loja-* mantêm os nomes do tema
   WordPress para que as duas versões continuem portáveis uma para a outra.
   As utilidades de composição vêm do Tailwind; tudo o que é componente vive
   aqui, com nome próprio.
   ========================================================================= */

:root {
	--ink: #29242C;
	--ink-soft: #4A4350;
	--cream: #FFF8F1;
	--paper: #FAF9F6;
	--azul: #8A6D33;        /* latão — o nome é histórico, ver DESIGN.md */
	--azul-deep: #5F4A22;
	--sky: #D9C08A;
	--powder: #E2DDD3;
	--ice: #F2EDE4;
	--stone: #736D61;
	--brass: #B8955A;

	--shadow-warm-sm: 0 1px 2px rgba(41,36,44,.06), 0 2px 8px rgba(138,109,51,.06);
	--shadow-warm-md: 0 2px 4px rgba(41,36,44,.05), 0 8px 24px rgba(138,109,51,.10), 0 16px 48px rgba(41,36,44,.08);
	--shadow-warm-lg: 0 4px 8px rgba(41,36,44,.06), 0 12px 32px rgba(138,109,51,.12), 0 32px 80px rgba(41,36,44,.14);

	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

html { scroll-behavior: smooth; }

body {
	font-family: 'Open Sans', sans-serif;
	background: var(--cream);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}

::selection { background: var(--sky); color: var(--ink); }

/* O anel de foco usa o latão escuro e nunca o claro: sobre o creme o claro dá
   1,7:1 e falha o mínimo de 3:1 da WCAG 2.2. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--azul);
	outline-offset: 3px;
	border-radius: 2px;
}

[id] { scroll-margin-top: 6rem; }

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

/* ---- Texturas e fundos --------------------------------------------------- */

.noise::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .35;
	z-index: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A primeira camada apaga o brilho contra o creme antes da aresta da secção:
   sem ela, os radiais eram cortados a meio e ficava um risco horizontal visível
   na junta com a secção seguinte. */
.hero-glow {
	background:
		linear-gradient(to bottom, rgba(255,248,241,0) 62%, var(--cream) 100%),
		radial-gradient(1200px 600px at 82% 8%, rgba(217,192,138,.22), transparent 60%),
		radial-gradient(900px 500px at 8% 90%, rgba(226,221,211,.30), transparent 55%),
		var(--cream);
}

.eyebrow {
	font-size: .72rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 600;
}

/* ---- Revelação ao scroll ------------------------------------------------- */

html.js .reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
html.js .reveal.in { opacity: 1; transform: none; }

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

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	border: 0;
	border-radius: 9999px;
	padding: .8125rem 1.625rem;
	font-family: 'Open Sans', sans-serif;
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: transform .25s var(--ease-spring), box-shadow .25s ease,
	            background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }

.btn-brass { background: var(--azul); color: var(--cream); box-shadow: var(--shadow-warm-sm); }
.btn-brass:hover { background: var(--azul-deep); box-shadow: var(--shadow-warm-md); }

.btn-ink { background: var(--ink); color: var(--cream); box-shadow: var(--shadow-warm-sm); }
.btn-ink:hover { background: var(--azul); box-shadow: var(--shadow-warm-md); }

.btn-cream { background: var(--cream); color: var(--azul-deep); box-shadow: var(--shadow-warm-md); }
.btn-cream:hover { box-shadow: var(--shadow-warm-lg); }

.btn-outline {
	background: transparent;
	border: 2px solid var(--ink);
	color: var(--ink);
	padding: .6875rem 1.5rem;
}
.btn-outline:hover { background: var(--ink); color: var(--cream); }

.btn-outline-cream {
	background: transparent;
	border: 2px solid rgba(255,248,241,.5);
	color: var(--cream);
	padding: .6875rem 1.5rem;
}
.btn-outline-cream:hover { border-color: var(--cream); background: rgba(255,248,241,.1); }

.btn-sm { padding: .5625rem 1.125rem; font-size: .8125rem; }
.btn-lg { padding: 1rem 2rem; box-shadow: var(--shadow-warm-md); }
.btn-block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
	background: var(--powder);
	color: var(--stone);
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }

/* ---- Ligações ------------------------------------------------------------ */

.link-underline {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1.5px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size .3s ease, color .3s ease;
	text-decoration: none;
}
.link-underline:hover,
.link-underline:focus-visible { background-size: 100% 1.5px; }

/* Caminho de volta, acima do título de um produto */
.artigo-back { margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; }
.artigo-back a {
	color: var(--stone);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	/* O texto tem 20px de altura; num telemóvel isso é um alvo pequeno para
	   a única ligação de retrocesso da página. O acolchoado leva-o aos 44px
	   sem mexer no desenho — recuado à esquerda para o texto não sair da
	   margem da coluna. */
	min-height: 2.75rem;
	padding: .625rem .75rem .625rem 0;
	margin-left: -.125rem;
	transition: color .3s ease;
}
.artigo-back a::before { content: '←'; transition: transform .35s var(--ease-out); }
.artigo-back a:hover { color: var(--azul); }
.artigo-back a:hover::before { transform: translateX(-3px); }

/* Régua que fecha um cabeçalho: esvai-se para a direita, não corta a página */
.artigo-rule {
	border: 0;
	height: 1px;
	background: linear-gradient(to right, rgba(41,36,44,.22), rgba(41,36,44,0));
	margin: 0;
}

/* ---- Marca do que é provisório ------------------------------------------
   Toda a gente resolve isto com um banner no topo que se lê uma vez e deixa de
   se ver. Aqui a marca vive no próprio valor: um tracejado de latão por baixo
   de cada preço e de cada texto que ainda vem da lista final da Sofia. É a
   diferença entre avisar e mostrar. */

.prov {
	text-decoration: underline dotted var(--brass);
	text-decoration-thickness: 1.5px;
	text-underline-offset: .28em;
}

/* Espaço de texto que ainda não existe — não se inventa, desenha-se. Decalque
   do .programa-por-publicar do tema, que resolve o mesmo problema. */
.por-escrever {
	display: flex;
	align-items: baseline;
	gap: .75rem;
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--ink-soft);
}
.por-escrever::before {
	content: '';
	flex: 0 0 2rem;
	height: 1px;
	border-top: 2px dotted var(--brass);
	transform: translateY(-.35em);
}

/* ---- Avisos -------------------------------------------------------------- */

.loja-aviso {
	padding: 1.375rem 1.625rem 1.5rem;
	border: 1px dashed rgba(41,36,44,.18);
	border-radius: 1rem;
	background: rgba(138,109,51,.05);
	color: var(--ink-soft);
}
.loja-aviso p { margin: 0; font-size: .9375rem; line-height: 1.7; }
.loja-aviso p + p { margin-top: .5rem; }
.loja-aviso-titulo {
	font-size: .72rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--azul-deep);
}

/* Faixa de demonstração da abertura da loja: painel recuado, filete de latão,
   com os três meios de pagamento à vista e desligados. */
.demo-faixa {
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	background: linear-gradient(158deg, var(--ice) 0%, var(--powder) 100%);
	box-shadow: var(--shadow-warm-sm);
}
.demo-faixa::before {
	content: '';
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--brass), rgba(184,149,90,0));
}

/* ---- Meios de pagamento -------------------------------------------------- */

.loja-pag-lista { list-style: none; margin: 0; padding: 0; }
.loja-pag-item {
	display: flex;
	align-items: flex-start;
	gap: .875rem;
	padding: .9375rem 0;
	border-bottom: 1px solid rgba(41,36,44,.10);
}
.loja-pag-item:last-child { border-bottom: 0; }
.loja-pag-marca {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 2rem;
	border: 1px solid var(--brass);
	border-radius: .375rem;
	background: rgba(184,149,90,.08);
	color: var(--azul-deep);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-align: center;
	line-height: 1.1;
}
/* `block` nos três: são <span> e, com uma nota presente, o nome, a nota e o
   estado colavam-se todos na mesma linha — «MB WAY Aprova na aplicação. o POR
   LIGAR». Na página inicial não se via porque lá não há nota. */
.loja-pag-nome { display: block; color: var(--ink); font-size: .9375rem; font-weight: 700; }
.loja-pag-nota { display: block; color: var(--stone); font-size: .8125rem; line-height: 1.6; margin-top: .125rem; }

/* Estado desligado: cinza-quente e sem interacção, mas sempre legível — é o
   ponto que a proposta existe para explicar, não um erro a esconder. */
.loja-pag-item[data-estado="desligado"] .loja-pag-marca {
	border-color: rgba(41,36,44,.20);
	background: rgba(41,36,44,.04);
	color: var(--stone);
}
.loja-pag-estado {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	margin-top: .375rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--stone);
}
.loja-pag-estado::before {
	content: '';
	width: .4375rem;
	height: .4375rem;
	border-radius: 9999px;
	border: 1.5px solid var(--stone);
}

/* ---- Painel de capa ------------------------------------------------------
   `contain` e não `cover`, de propósito: as capas são composições fechadas e
   as margens fazem parte do desenho. O painel quente é a moldura — e é também
   o que se vê num produto digital, que não tem capa nenhuma. */

.loja-capa {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.375rem;
	border-radius: 1.25rem;
	background: linear-gradient(158deg, var(--ice) 0%, var(--powder) 100%);
	/* O anel interior não é ornamento: metade das capas dela é branca e sem ele
	   dissolvem-se no painel claro. */
	box-shadow: inset 0 0 0 1px rgba(41,36,44,.07), var(--shadow-warm-sm);
	overflow: hidden;
	transition: box-shadow .4s ease;
}
.loja-capa::before {
	content: '';
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--brass), rgba(184,149,90,0));
	z-index: 2;
}
.loja-capa img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 14px 30px rgba(41,36,44,.26)) drop-shadow(0 2px 5px rgba(41,36,44,.16));
	transition: transform .55s var(--ease-out);
}

/* Produto digital: não há capa, há um sinal. Uma folha de papel em latão fino,
   desenhada, em vez de um ícone genérico de biblioteca. */
.loja-capa-digital { color: var(--azul); }
.loja-capa-digital svg { width: 54%; height: auto; opacity: .68; }

/* ---- Banda de produto ---------------------------------------------------
   A estrutura da loja: cada título é uma banda de largura inteira, não um
   cartão numa grelha. Nove produtos é exactamente a contagem em que uma
   grelha aperta e um índice respira.

   Três colunas — capa, título, preço e acção — porque é assim que um índice de
   catálogo se lê: a coluna dos preços alinhada à direita dá à página uma
   segunda pauta vertical, e é ela que impede a banda de ficar com metade da
   largura vazia. O primeiro livro é a excepção: abre em duas colunas, com a
   capa ao dobro, como a página de abertura de um caderno. */

.loja-banda {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: 'capa' 'corpo' 'accao' 'nota';
	gap: 1.5rem;
	padding: 2.5rem 0;
	border-top: 1px solid rgba(41,36,44,.10);
}
.loja-banda:first-of-type { border-top: 0; }

.loja-banda > .loja-capa { grid-area: capa; }
.loja-banda-corpo { grid-area: corpo; }
.loja-banda-accao {
	grid-area: accao;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
}

/* Só a abertura a leva. Uma linha do índice não repete a entrega sete vezes. */
.loja-banda-nota {
	grid-area: nota;
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	max-width: 30rem;
	font-size: .875rem;
	line-height: 1.7;
	color: var(--stone);
}
.loja-banda-nota::before {
	content: '';
	flex: 0 0 auto;
	width: .375rem;
	height: .375rem;
	margin-top: .6em;
	border-radius: 9999px;
	background: var(--azul);
}

.loja-banda .loja-capa { aspect-ratio: 3 / 4; max-width: 12rem; }
.loja-banda-lead .loja-capa { max-width: 15rem; }

.loja-banda-titulo {
	margin: 0;
	font-family: 'Playfair Display', serif;
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.03em;
	color: var(--ink);
}
.loja-banda-lead .loja-banda-titulo { font-size: 2.125rem; }
.loja-banda-titulo a {
	color: inherit;
	text-decoration: none;
	transition: color .3s ease;
}
.loja-banda-titulo a::after {
	content: '→';
	display: inline-block;
	margin-left: .4em;
	font-family: 'Open Sans', sans-serif;
	font-size: .55em;
	color: var(--azul);
	transform: translateY(-.15em);
	opacity: 0;
	transition: opacity .3s ease, transform .35s var(--ease-out);
}
.loja-banda:hover .loja-banda-titulo a,
.loja-banda-titulo a:focus-visible { color: var(--azul); }
.loja-banda:hover .loja-banda-titulo a::after,
.loja-banda-titulo a:focus-visible::after { opacity: 1; transform: translate(.2em, -.15em); }

.loja-banda:hover .loja-capa img { transform: translateY(-6px) scale(1.02); }
.loja-banda:hover .loja-capa { box-shadow: var(--shadow-warm-md); }

.loja-preco {
	font-family: 'Playfair Display', serif;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--ink);
}
.loja-preco-lg { font-size: 2rem; }
.loja-preco-sm { font-size: 1.125rem; }

@media (min-width: 768px) {
	.loja-banda {
		grid-template-columns: 14rem minmax(0, 1fr) minmax(8rem, auto);
		grid-template-areas: 'capa corpo accao';
		align-items: center;
		gap: 3rem;
		padding: 3rem 0;
	}
	.loja-banda .loja-capa { max-width: none; }
	.loja-banda-accao {
		flex-direction: column;
		align-items: flex-end;
		gap: 1.125rem;
		text-align: right;
	}

	/* A abertura inverte-se: texto à esquerda, encostado à margem da secção, e
	   a capa grande à direita. Não é uma linha do índice com a capa maior — é a
	   página que o abre, e por isso troca de composição em vez de escala.
	   Invertê-la resolve também o desalinhamento: o título da abertura arranca
	   no mesmo x do cabeçalho «Livros», e não recuado como as linhas. */
	.loja-banda-lead {
		grid-template-columns: minmax(0, 1fr) 20rem;
		grid-template-areas: 'corpo capa' 'accao capa' 'nota capa';
		align-items: start;
		align-content: center;
		gap: 1.75rem 4rem;
		padding: 1.5rem 0 4.5rem;
	}
	.loja-banda-lead .loja-capa { max-width: none; }
	.loja-banda-lead .loja-banda-accao {
		flex-direction: row;
		align-items: center;
		gap: 1.75rem;
		text-align: left;
		margin-top: .5rem;
	}
	.loja-banda-titulo { font-size: 1.875rem; }
	.loja-banda-lead .loja-banda-titulo { font-size: 3rem; }
}

@media (min-width: 1024px) {
	.loja-banda { grid-template-columns: 15rem minmax(0, 1fr) minmax(9rem, auto); gap: 3.5rem; }
	.loja-banda-lead { grid-template-columns: minmax(0, 1fr) 22rem; gap: 2rem 4.5rem; }
	.loja-banda-titulo { font-size: 2rem; }
	.loja-banda-lead .loja-banda-titulo { font-size: 3.5rem; }
}

/* ---- Quantidade ---------------------------------------------------------- */

.qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(41,36,44,.18);
	border-radius: 9999px;
	background: #FFFFFF;
	overflow: hidden;
}
.qty button {
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.qty button:hover { background: rgba(138,109,51,.10); color: var(--azul-deep); }
.qty button:active { background: rgba(138,109,51,.18); }
.qty button:disabled { color: var(--powder); cursor: not-allowed; background: transparent; }
.qty input {
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	text-align: center;
	background: transparent;
	color: var(--ink);
	font-family: 'Open Sans', sans-serif;
	font-size: .9375rem;
	font-weight: 700;
	-moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus-visible { outline-offset: -3px; }

/* ---- Carrinho ------------------------------------------------------------ */

.carrinho-linha {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: 1.25rem 1.5rem;
	padding: 1.75rem 0;
	border-top: 1px solid rgba(41,36,44,.10);
}
.carrinho-linha:first-child { border-top: 0; padding-top: 0; }

/* Em coluna estreita o total da linha caía sozinho por baixo da capa, na
   primeira coluna, descolado do artigo a que pertence. Fica alinhado com o
   título, na segunda. */
.carrinho-linha > :last-child { grid-column: 2; }

.carrinho-capa {
	position: relative;
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .4375rem;
	border-radius: .5rem;
	background: linear-gradient(158deg, var(--ice) 0%, var(--powder) 100%);
	overflow: hidden;
	color: var(--azul);
}
.carrinho-capa::before {
	content: '';
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--brass), rgba(184,149,90,0));
}
.carrinho-capa img { width: 100%; height: 100%; object-fit: contain; }
.carrinho-capa svg { width: 55%; height: auto; opacity: .5; }

@media (min-width: 640px) {
	.carrinho-linha { grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; }
	.carrinho-linha > :last-child { grid-column: auto; }
}

.remover {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	border: 0;
	background: transparent;
	padding: .25rem 0;
	color: var(--stone);
	font-family: 'Open Sans', sans-serif;
	font-size: .8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: color .25s ease;
}
.remover:hover { color: #b3261e; }

.resumo {
	border-radius: 1.5rem;
	border: 1px solid rgba(41,36,44,.08);
	background: var(--paper);
	padding: 1.875rem;
	box-shadow: var(--shadow-warm-sm);
}
.resumo-linha {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: .5625rem 0;
	font-size: .9375rem;
	color: var(--ink-soft);
}
.resumo-total {
	margin-top: .625rem;
	padding-top: 1.125rem;
	border-top: 1px solid rgba(41,36,44,.12);
}

/* ---- Formulários --------------------------------------------------------- */

.campo { display: block; }
/* `:not(.campo-nota)` porque a nota de ajuda também é um <span> filho directo:
   sem isto herdava as maiúsculas e o negrito da etiqueta. */
.campo > span:not(.campo-nota) {
	display: block;
	margin-bottom: .4375rem;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--stone);
}
.campo input,
.campo select,
.campo textarea {
	width: 100%;
	border: 1px solid rgba(41,36,44,.18);
	border-radius: .75rem;
	background: #FFFFFF;
	padding: .8125rem 1rem;
	font-family: 'Open Sans', sans-serif;
	font-size: .9375rem;
	color: var(--ink);
	transition: border-color .25s ease;
}
.campo input::placeholder,
.campo textarea::placeholder { color: var(--stone); opacity: 1; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--azul); }
.campo-nota {
	display: block;
	margin-top: .4375rem;
	font-size: .75rem;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: normal;
	text-transform: none;
	color: var(--stone);
}

.consentimento {
	display: flex;
	align-items: flex-start;
	gap: .625rem;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--ink-soft);
	cursor: pointer;
}
.consentimento input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.0625rem;
	height: 1.0625rem;
	margin: .1875rem 0 0;
	accent-color: var(--azul);
	cursor: pointer;
}
.consentimento a { color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Aviso flutuante de "adicionado" ------------------------------------ */

.toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	z-index: 80;
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: calc(100vw - 2rem);
	padding: .875rem 1.125rem .875rem 1.25rem;
	border-radius: 9999px;
	background: var(--ink);
	color: var(--cream);
	box-shadow: var(--shadow-warm-lg);
	font-size: .875rem;
	transform: translate(-50%, 140%);
	opacity: 0;
	transition: transform .5s var(--ease-out), opacity .3s ease;
}
.toast.in { transform: translate(-50%, 0); opacity: 1; }
.toast a { color: var(--sky); font-weight: 700; text-decoration: none; white-space: nowrap; }
.toast a:hover { color: var(--cream); }
.toast strong { color: #FFFFFF; font-weight: 700; }

/* ---- Menu móvel ---------------------------------------------------------
   Abaixo dos 1024 os cinco links não cabem em linha ao lado do carrinho. O
   painel repete o desenho do menu do tema: creme, links em Playfair grande,
   separados por um filete — não um overlay escuro que nada mais no site usa. */

.menu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 9999px;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.menu-btn:hover { background: rgba(41,36,44,.07); }
.menu-btn:active { transform: scale(.94); }
.menu-btn .fechar { display: none; }
.menu-btn[aria-expanded="true"] .abrir { display: none; }
.menu-btn[aria-expanded="true"] .fechar { display: block; }

.menu-movel { border-top: 1px solid rgba(41,36,44,.10); background: var(--cream); }
.menu-movel a {
	display: block;
	padding: .9375rem 0;
	border-bottom: 1px solid rgba(41,36,44,.10);
	font-family: 'Playfair Display', serif;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.03em;
	color: var(--ink);
	text-decoration: none;
}
.menu-movel a:last-child { border-bottom: 0; }
.menu-movel a[aria-current="page"] { color: var(--azul); }
.menu-movel a:focus-visible { outline-offset: -3px; }

/* ---- Contador do carrinho no cabeçalho ---------------------------------- */

.carrinho-btn { position: relative; }
.carrinho-conta {
	position: absolute;
	top: -.375rem;
	right: -.375rem;
	min-width: 1.375rem;
	height: 1.375rem;
	padding: 0 .3125rem;
	display: none;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: var(--ink);
	color: var(--cream);
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 0 0 2px var(--cream);
}
.carrinho-conta[data-tem="sim"] { display: inline-flex; }

/* ---- Prosa --------------------------------------------------------------- */

.prosa { font-size: 1.0625rem; line-height: 1.8; color: var(--ink-soft); }
.prosa p { margin: 1.25em 0; }
.prosa p:first-child { margin-top: 0; }
.prosa strong { color: var(--ink); }

/* ---- Movimento reduzido -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	html.js .reveal { opacity: 1; transform: none; transition: none; }
	.btn, .loja-capa img, .loja-banda-titulo a::after, .toast { transition: none; }
	.btn:hover, .btn:active { transform: none; }
	.loja-banda:hover .loja-capa img { transform: none; }
	.toast { transform: translate(-50%, 0); }
}

/* ============================================================================
   ACRESCENTOS DO TEMA WORDPRESS
   ----------------------------------------------------------------------------
   Tudo acima veio da demonstração estática, sem alteração — as duas versões
   têm de continuar a ser a mesma linguagem. O que se segue é o que só a loja
   a sério tem: página de livro, cartões, campanhas e as páginas de texto.
   ========================================================================= */

/* ---- Saltar para o conteúdo ----------------------------------------------
   Um atalho de salto escondido que nunca aparece é pior do que não ter
   nenhum: quem navega por teclado carrega em Tab, o foco vai para uma
   ligação de 1px que não se vê, e a primeira tecla da página parece não
   fazer nada. Ao receber foco volta a ser um elemento a sério. */

a.sr-only:focus,
a.sr-only:focus-visible {
	position: fixed;
	top: .75rem;
	left: .75rem;
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	padding: .8125rem 1.5rem;
	overflow: visible;
	clip: auto;
	clip-path: none;
	border-radius: 9999px;
	background: var(--ink);
	color: var(--cream);
	font-size: .875rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--shadow-warm-lg);
}

/* ---- Capas em contexto grande -------------------------------------------- */

.loja-capa-hero,
.loja-capa-produto {
	aspect-ratio: 3 / 4;
	padding: 2rem;
	border-radius: 1.5rem;
}
.loja-capa-hero { box-shadow: inset 0 0 0 1px rgba(41,36,44,.07), var(--shadow-warm-md); }
.loja-capa-produto { position: relative; box-shadow: inset 0 0 0 1px rgba(41,36,44,.07), var(--shadow-warm-lg); }

.loja-capa-hero:hover img { transform: translateY(-6px) scale(1.02); }

/* ---- Selo de campanha ----------------------------------------------------
   Latão sobre creme, nunca vermelho: um preço em promoção neste sistema
   distingue-se pela tinta esbatida do preço antigo, não por um alarme. */

.loja-selo {
	position: absolute;
	top: .875rem;
	left: .875rem;
	z-index: 3;
	padding: .3125rem .75rem;
	border-radius: 9999px;
	background: var(--azul);
	color: var(--cream);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	box-shadow: var(--shadow-warm-sm);
}

.loja-etiqueta-campanha {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--azul-deep);
}
.loja-etiqueta-campanha::before {
	content: '';
	width: .4375rem;
	height: .4375rem;
	border-radius: 9999px;
	background: var(--azul);
}

/* O preço antigo de uma promoção: esbatido e riscado, em pedra e não em
   vermelho. É a prohibition nº 4 do DESIGN.md. */
.loja-preco del,
.loja-preco del .amount {
	color: var(--stone);
	font-size: .7em;
	font-weight: 400;
	margin-right: .4em;
}
.loja-preco ins { text-decoration: none; }

/* ---- Resumo dentro da banda ---------------------------------------------- */

.loja-banda-resumo {
	margin-top: 1rem;
	max-width: 36rem;
	font-size: .9375rem;
	line-height: 1.75;
	color: var(--ink-soft);
}
.loja-banda-resumo p { margin: 0; }
.loja-banda-resumo p + p { margin-top: .75rem; }

/* ---- Grelha de cartões ---------------------------------------------------
   O cartão só aparece onde a banda seria demasiada: «os outros livros». Três
   colunas no máximo — com quatro, a capa fica mais pequena do que o título. */

.loja-grelha {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem 2rem;
}
@media (min-width: 640px) { .loja-grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .loja-grelha { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.loja-cartao { position: relative; display: flex; flex-direction: column; }

.loja-cartao-capa {
	position: relative;
	aspect-ratio: 3 / 4;
	padding: 1.125rem;
	border-radius: 1.25rem;
}
.loja-cartao:hover .loja-capa { box-shadow: inset 0 0 0 1px rgba(41,36,44,.07), var(--shadow-warm-md); }
.loja-cartao:hover .loja-capa img { transform: translateY(-6px) scale(1.02); }

.loja-cartao-titulo {
	margin: 1.25rem 0 0;
	font-family: 'Playfair Display', serif;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.03em;
	color: var(--ink);
}
.loja-cartao-titulo a { color: inherit; text-decoration: none; transition: color .3s ease; }
.loja-cartao:hover .loja-cartao-titulo a { color: var(--azul); }

/* O cartão inteiro é o alvo, por um ::after sobre o único <a> do título —
   nunca uma segunda âncora a envolver tudo, que duplicaria o destino na lista
   de ligações de um leitor de ecrã. */
.loja-cartao-titulo a::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 1.25rem;
}
.loja-cartao-titulo a:focus-visible { outline: none; }
.loja-cartao:has(a:focus-visible) {
	outline: 3px solid var(--azul);
	outline-offset: 6px;
	border-radius: 4px;
}

.loja-cartao-promessa {
	margin: .625rem 0 0;
	font-size: .875rem;
	line-height: 1.65;
	color: var(--ink-soft);
}

/* O preço encosta ao fundo do cartão. Sem isto, um título que quebra para duas
   linhas — «Mereces (Muito) Mais do que Aquilo que Sonhas» quebra sempre —
   empurra o preço para baixo e a linha de preços da fila deixa de alinhar. */
.loja-cartao-preco { margin: .875rem 0 0; padding-top: .25rem; margin-top: auto; }

/* ---- Ficha lateral -------------------------------------------------------
   O painel recuado que acompanha uma secção: «em números» na inicial, «é para
   si se» na página do livro. Superfície ice, filete de latão em cima — o mesmo
   vocabulário do painel de capa, para não introduzir uma terceira superfície. */

.loja-ficha {
	position: relative;
	overflow: hidden;
	padding: 1.75rem;
	border-radius: 1.5rem;
	background: linear-gradient(158deg, var(--ice) 0%, var(--powder) 100%);
	box-shadow: var(--shadow-warm-sm);
}
.loja-ficha::before {
	content: '';
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--brass), rgba(184,149,90,0));
}

.loja-ficha-rotulo {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--azul-deep);
}
.loja-ficha-valor {
	margin: .25rem 0 0;
	font-family: 'Playfair Display', serif;
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--ink);
}

.loja-lista { list-style: none; margin: 0; padding: 0; }
.loja-lista li {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: .625rem 0;
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--ink-soft);
	border-top: 1px solid rgba(41,36,44,.10);
}
.loja-lista li:first-child { border-top: 0; padding-top: 0; }

/* A etiqueta que marca o painel inteiro como demonstração. Marcar cada linha
   com o tracejado do .prov punha um sublinhado por baixo de cada linha
   quebrada e tornava a lista difícil de ler — a marca é uma, no fim. */
.loja-ficha-nota {
	margin: 1.25rem 0 0;
	padding-top: .875rem;
	border-top: 1px dotted var(--brass);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--stone);
}
.loja-lista li::before {
	content: '';
	flex: 0 0 auto;
	width: .375rem;
	height: .375rem;
	margin-top: .62em;
	border-radius: 9999px;
	background: var(--azul);
}

/* ---- A diferença ---------------------------------------------------------
   Uma frase, grande, em Playfair. É a resposta à única pergunta que traz
   alguém a esta página tendo já lido outro livro dela. */

.loja-diferenca {
	margin: 0;
	font-family: 'Playfair Display', serif;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -.02em;
	color: var(--ink);
}
@media (min-width: 768px) { .loja-diferenca { font-size: 1.75rem; } }

/* ---- Excerto de demonstração --------------------------------------------
   Desenhado como página de livro e não como caixa de citação: papel, margem
   generosa, e a régua de latão à esquerda a marcar que é texto citado. */

.loja-excerto {
	position: relative;
	border-radius: 1.5rem;
	border: 1px solid rgba(41,36,44,.08);
	background: var(--paper);
	padding: 2.25rem 2rem;
	box-shadow: var(--shadow-warm-sm);
}
@media (min-width: 768px) { .loja-excerto { padding: 3rem 3.5rem; } }

.loja-excerto-corpo {
	position: relative;
	padding-left: 1.5rem;
	max-width: 38rem;
	font-size: 1.0625rem;
}
.loja-excerto-corpo::before {
	content: '';
	position: absolute;
	inset: .35em auto .35em 0;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(to bottom, var(--brass), rgba(184,149,90,.15));
}
.loja-excerto-corpo p:first-child { margin-top: 0; }
.loja-excerto-corpo p:last-child { margin-bottom: 0; }

.loja-excerto-pe {
	margin: 2rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(41,36,44,.10);
	font-size: .8125rem;
	color: var(--stone);
}

/* ---- Prosa provisória ----------------------------------------------------
   O .prov é um tracejado por baixo de um valor e resolve bem um preço. Não
   resolve três parágrafos: sublinhar prosa inteira torna-a ilegível. Um bloco
   de texto que ainda espera pela Sofia leva antes uma régua de latão à
   esquerda e uma etiqueta no fim — a mesma promessa, à escala certa. */

.prov-bloco {
	position: relative;
	padding-left: 1.375rem;
}
.prov-bloco::before {
	content: '';
	position: absolute;
	inset: .3em auto .3em 0;
	width: 0;
	border-left: 2px dotted var(--brass);
}
.prov-bloco-etiqueta {
	display: block;
	margin-top: .875rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--stone);
}

/* ---- Páginas de texto ----------------------------------------------------
   Perguntas frequentes, pagamento e devoluções, termos. Uma coluna estreita,
   títulos em Playfair, e as perguntas em <details> nativo — sem JavaScript,
   sem biblioteca de acordeão, e funciona com o Ctrl+F do browser. */

.scf-texto h2 {
	margin: 3.5rem 0 1.25rem;
	font-family: 'Playfair Display', serif;
	font-size: 1.875rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.03em;
	color: var(--ink);
}
.scf-texto h2:first-child { margin-top: 0; }

.scf-texto h3 {
	margin: 2.5rem 0 .875rem;
	font-family: 'Playfair Display', serif;
	font-size: 1.3125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--ink);
}

.scf-texto ul, .scf-texto ol { margin: 1.25em 0; padding-left: 1.25rem; }
.scf-texto li { margin: .5em 0; }
.scf-texto a { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
.scf-texto a:hover { color: var(--azul-deep); }

.scf-texto hr {
	border: 0;
	height: 1px;
	margin: 3rem 0;
	background: linear-gradient(to right, rgba(41,36,44,.22), rgba(41,36,44,0));
}

/* A pergunta. `list-style: none` mais o `::-webkit-details-marker` porque o
   Safari ignora o primeiro. O sinal é desenhado à direita, e roda. */
.scf-faq {
	border-top: 1px solid rgba(41,36,44,.12);
	padding: .25rem 0;
}
.scf-faq:last-of-type { border-bottom: 1px solid rgba(41,36,44,.12); }

.scf-faq > summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.375rem 0;
	cursor: pointer;
	list-style: none;
	font-family: 'Playfair Display', serif;
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.02em;
	color: var(--ink);
	transition: color .25s ease;
}
.scf-faq > summary::-webkit-details-marker { display: none; }
.scf-faq > summary:hover { color: var(--azul); }

.scf-faq > summary::after {
	content: '';
	flex: 0 0 auto;
	width: .625rem;
	height: .625rem;
	margin-top: .45em;
	border-right: 2px solid var(--azul);
	border-bottom: 2px solid var(--azul);
	transform: rotate(45deg);
	transition: transform .3s var(--ease-out);
}
.scf-faq[open] > summary::after { transform: rotate(-135deg); }

.scf-faq-corpo {
	padding: 0 0 1.5rem;
	max-width: 34rem;
	font-size: .9375rem;
	line-height: 1.8;
	color: var(--ink-soft);
}
.scf-faq-corpo p { margin: 0 0 .875em; }
.scf-faq-corpo p:last-child { margin-bottom: 0; }
.scf-faq-corpo a { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }

/* Painel destacado dentro de uma página de texto — usado para o ponto legal
   que não pode passar despercebido (a renúncia aos 14 dias). */
.scf-nota {
	margin: 2rem 0;
	padding: 1.5rem 1.75rem;
	border-radius: 1.25rem;
	border: 1px dashed rgba(138,109,51,.35);
	background: rgba(138,109,51,.05);
}
.scf-nota > :first-child { margin-top: 0; }
.scf-nota > :last-child { margin-bottom: 0; }
.scf-nota strong { color: var(--azul-deep); }

@media (prefers-reduced-motion: reduce) {
	.loja-cartao:hover .loja-capa img,
	.loja-capa-hero:hover img { transform: none; }
	.scf-faq > summary::after { transition: none; }
}