/* ============================================================================
   Loja — Sofia de Castro Fernandes
   ----------------------------------------------------------------------------
   Camada semântica da loja. Os tokens e o desenho são os do site principal
   (keynote/wp/theme-src/input.css): fundo de cal, cartões em cartão com um
   fio de terracota, colunas de max-w-7xl com px-6 / lg:px-10, títulos de
   secção com sobrolho e itálico em terracota, e em telemóvel as listas
   passam a deslizar com pontos por baixo.

   Revisão de 23 Set 2026: a loja deixou de ter linguagem própria (fundo
   creme, painéis de gelo com filete, bandas de largura inteira) e passou a
   ler-se como mais uma página do site. O pedido foi do João, a partir do que
   a Sofia disse: a loja tem de parecer o site, o retrato dela não deve ser o
   fundo da abertura, e em telemóvel havia cartões grandes de mais e texto
   de mais para percorrer.

   Identidade "Cal e Terracota" (Out 2026): saiu o creme/latão e saíram o
   Playfair Display e o Open Sans. É a segunda troca de paleta deste ficheiro,
   e por isso as opacidades deixaram de ser `rgba()` literais e passaram a
   `rgb(var(--…-rgb) / alpha)`: a terceira troca passa a ser só o `:root`.
   ========================================================================= */

/* As fontes do site, servidas daqui e não do Google (RGPD: um pedido ao
   fonts.gstatic.com manda o IP de quem visita para fora). São os mesmos
   quatro ficheiros variáveis do tema principal, subset `latin`, que cobre
   todos os diacríticos do português. */
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('fonts/fraunces-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Fraunces';
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url('fonts/fraunces-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('fonts/instrument-sans-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Instrument Sans';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url('fonts/instrument-sans-italic.woff2') format('woff2');
}

:root {
	/* Valores amostrados do mockup aprovado. As companheiras -rgb existem
	   porque o ficheiro precisa de opacidades: `rgb(var(--tinta-rgb) / .55)`
	   funciona em todo o lado, ao contrário da sintaxe de cor relativa, que
	   só é Baseline 2024. */
	--cal: #F7F5F2;
	--cal-rgb: 247 245 242;
	--cartao: #FBF9F7;
	--cartao-rgb: 251 249 247;
	--blush: #F1E3DA;
	--blush-rgb: 241 227 218;
	--argila: #D9BFAE;          /* só decorativo: 1,61:1 sobre a cal */
	--argila-rgb: 217 191 174;
	--terracota: #A8482F;       /* a única cor forte. 5,31:1 sobre cal */
	--terracota-rgb: 168 72 47;
	--terracota-fundo: #8A3B28; /* hover. 7,05:1 */
	--terracota-fundo-rgb: 138 59 40;
	--tinta: #2B211C;           /* 14,43:1 */
	--tinta-rgb: 43 33 28;
	--tinta-suave: #4A3F38;     /* 9,37:1 */
	--tinta-suave-rgb: 74 63 56;
	--oliva: #727655;
	--oliva-rgb: 114 118 85;
	--pedra: #6F645B;           /* metadados e legendas. 5,29:1 */
	--pedra-rgb: 111 100 91;
	--cal-quente: #EFEAE4;
	--cal-quente-rgb: 239 234 228;

	--linha: rgb(var(--tinta-rgb) / .09);
	--contorno: rgb(var(--terracota-rgb) / .14);

	/* Os cartões do mockup são quase planos. */
	--shadow-warm-sm: 0 1px 2px rgb(var(--tinta-rgb) / .04), 0 1px 3px rgb(var(--terracota-rgb) / .03);
	--shadow-warm-md: 0 1px 2px rgb(var(--tinta-rgb) / .04), 0 4px 12px rgb(var(--terracota-rgb) / .05), 0 8px 24px rgb(var(--tinta-rgb) / .04);
	--shadow-warm-lg: 0 2px 4px rgb(var(--tinta-rgb) / .04), 0 8px 20px rgb(var(--terracota-rgb) / .06), 0 20px 48px rgb(var(--tinta-rgb) / .07);

	--ease-out: cubic-bezier(.22, 1, .36, 1);
	/* Era `cubic-bezier(.34,1.56,.64,1)`, que passava do destino e voltava. A
	   identidade nova assenta sem ressalto: é a curva dos botões do site. */
	--ease-spring: cubic-bezier(.16, 1, .3, 1);

	--font-display: 'Fraunces', Georgia, serif;
	--font-body: 'Instrument Sans', sans-serif;
}

html { scroll-behavior: smooth; }

/* A cal é o papel e o cartão é a superfície dos cartões: é assim que o site
   principal constrói a profundidade. Era branco com cartões em creme. */
body {
	font-family: var(--font-body);
	background: var(--cal);
	color: var(--tinta);
	-webkit-font-smoothing: antialiased;
}

::selection { background: var(--blush); color: var(--tinta); }
::-moz-selection { background: var(--blush); color: var(--tinta); }

/* As partes que não desenhámos ainda carregam a identidade: o cursor, a barra
   de deslocação, o sublinhado dos links e os algarismos dos preços. */
html { caret-color: var(--terracota); scrollbar-color: var(--argila) var(--cal); }
a { text-underline-offset: .18em; text-decoration-thickness: from-font; }
.loja-preco, .numeros dd, .resumo .amount, .woocommerce .amount { font-variant-numeric: tabular-nums lining-nums; }

/* O anel de foco usa a terracota: 5,31:1 sobre a cal, 4,61:1 sobre o blush e
   3,31:1 sobre a argila — todos acima do 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(--terracota);
	outline-offset: 3px;
	border-radius: 2px;
}

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

.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;
}

/* O hífen é bem-vindo nos parágrafos de telemóvel (o português faz rios de
   espaço em colunas estreitas) e nunca nos títulos, onde se lê como parte do
   desenho da frase. É a regra do site. */
@media (max-width: 1023.98px) {
	p, li, dd { hyphens: auto; }
	.loja-diferenca, .item-titulo, .loja-linha-promessa, .loja-excerto p, .sobre-percurso-marco { hyphens: manual; }
	h1, h2, h3 { overflow-wrap: break-word; }
}

/* ---- 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 abertura era dois radiais quentes de latão sobre branco. Na identidade
   nova é cal lisa — é a mesma decisão do site, onde o `.hero-glow` perdeu os
   gradientes e ficou a cor de fundo. Um brilho a mais por trás do título era
   o que fazia a página antiga parecer de 2014.
   A classe mantém-se porque quatro modelos a usam. */
.hero-luz {
	position: relative;
	background: var(--cal);
}

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

/* ---- Ritmo das secções ---------------------------------------------------
   Os valores são os do site principal depois da revisão de telemóvel de 22
   Set: uma secção não pode gastar um ecrã inteiro só em espaço vazio. O
   filete entre secções atravessa a página toda, como lá. */

/* «Muito mais espaço entre blocos» é o pedido de cabeçalho do briefing, e a
   escala está toda aqui: mexer neste par dá ar à loja inteira sem editar
   secção a secção. Era 3,5rem / 7rem e passa a 4,5rem / 9rem. O telemóvel
   sobe menos do que o desktop de propósito — num ecrã de 390 o espaço que
   arejava o desktop obrigava a percorrer o dobro para ver o livro seguinte. */
.seccao { padding: 4.5rem 0; }
.seccao-linha { border-top: 1px solid var(--linha); }
@media (min-width: 1024px) {
	.seccao { padding: 9rem 0; }
}

.contentor {
	width: 100%;
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}
@media (min-width: 1024px) { .contentor { padding: 0 2.5rem; } }

/* Cabeça de secção: sobrolho, título com a viragem em itálico, e à direita
   uma ligação quando a secção tem continuação noutro sítio. */
.cabeca {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
}
.cabeca > div { min-width: 0; max-width: 46rem; }
.cabeca > div > .titulo-seccao:first-child { margin-top: 0; }

/* O peso é 400 e a entrelinha 1,15, e não 600/1,1. O Playfair tinha altura-de
   -x pequena e aguentava os dois; o Fraunces é largo e de altura-de-x
   generosa, e ao peso antigo os títulos saíam pesados e com as descidas
   («pergunta», «palco») a tocar na linha seguinte. É a escala do mockup. */
.titulo-seccao {
	margin: 1rem 0 0;
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--tinta);
	text-wrap: balance;
}
.titulo-seccao em { font-style: italic; color: var(--terracota); }
@media (min-width: 640px) { .titulo-seccao { font-size: 2.75rem; } }
@media (min-width: 1024px) { .titulo-seccao { margin-top: 1.25rem; font-size: 3rem; } }

.texto {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--tinta-suave);
}

/* «Ver o catálogo →»: ligação de continuação, em terracota, com a seta a andar. */
.link-seta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 2.75rem;
	font-size: .875rem;
	font-weight: 700;
	color: var(--terracota);
	text-decoration: none;
	transition: color .3s ease;
}
.link-seta span[aria-hidden] { transition: transform .35s var(--ease-out); }
.link-seta:hover { color: var(--terracota-fundo); }
.link-seta:hover span[aria-hidden] { transform: translateX(4px); }
.link-seta:active span[aria-hidden] { transform: translateX(1px); }

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

html.js .reveal {
	opacity: 0;
	transform: translateY(20px);
	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: var(--font-body);
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	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-terracota { background: var(--terracota); color: var(--cal); box-shadow: var(--shadow-warm-sm); }
.btn-terracota:hover { background: var(--terracota-fundo); color: var(--cal); box-shadow: var(--shadow-warm-md); }

.btn-tinta { background: var(--tinta); color: var(--cal); box-shadow: var(--shadow-warm-sm); }
.btn-tinta:hover { background: var(--terracota); color: var(--cal); box-shadow: var(--shadow-warm-md); }

/* O blush sobre a cal dá 1,19:1: a etiqueta lê-se bem (12,5:1) mas a FORMA do
   botão desaparece, e a WCAG 2.2 pede 3:1 para o contorno de um controlo. O
   fio de terracota a 70% dá 3,36:1 e passa. Continua a ser o botão secundário:
   o contorno marca a forma, o preenchimento é que fica leve ao lado da
   pílula cheia. É a mesma correcção do site. */
.btn-blush {
	background: var(--blush);
	color: var(--tinta);
	box-shadow: inset 0 0 0 1px rgb(var(--terracota-rgb) / .7), var(--shadow-warm-sm);
}
.btn-blush:hover {
	background: var(--argila);
	color: var(--tinta);
	box-shadow: inset 0 0 0 1px rgb(var(--terracota-rgb) / .9), var(--shadow-warm-md);
}

.btn-cal { background: var(--cal); color: var(--terracota-fundo); box-shadow: var(--shadow-warm-md); }
.btn-cal:hover { box-shadow: var(--shadow-warm-lg); }

/* O secundário do mockup é uma pílula de blush com um fio de terracota, e não
   um contorno de 2px em tinta: ao lado da pílula cheia o contorno grosso
   pesava mais do que a acção principal, que é o contrário do que se quer.
   O fio a 70% dá 3,36:1 sobre a cal, acima dos 3:1 que a WCAG 2.2 pede para a
   forma de um controlo. */
.btn-outline {
	background: var(--blush);
	border: 0;
	color: var(--tinta);
	padding: .8125rem 1.625rem;
	box-shadow: inset 0 0 0 1px rgb(var(--terracota-rgb) / .7);
}
.btn-outline:hover {
	background: var(--argila);
	color: var(--tinta);
	box-shadow: inset 0 0 0 1px rgb(var(--terracota-rgb) / .9);
}

.btn-outline-cal {
	background: transparent;
	border: 2px solid rgb(var(--cal-rgb) / .5);
	color: var(--cal);
	padding: .6875rem 1.5rem;
}
.btn-outline-cal:hover { border-color: var(--cal); background: rgb(var(--cal-rgb) / .1); }

/* 44px de alvo mesmo no botão pequeno: é o que a loja usa nas linhas do
   catálogo, carregado com o polegar. */
.btn-sm { min-height: 2.75rem; padding: .5625rem 1.125rem; font-size: .8125rem; }
.btn-lg { padding: 1rem 2rem; box-shadow: var(--shadow-warm-md); }
/* O `box-shadow` aqui é o fio que desenha a forma do botão, e não uma sombra:
   pô-lo a `none` deixava o secundário grande sem contorno nenhum. Fica o fio,
   e a elevação é que não vem. */
.btn-outline.btn-lg { padding: 1rem 2rem; box-shadow: inset 0 0 0 1px rgb(var(--terracota-rgb) / .7); }
.btn-outline.btn-lg:hover { box-shadow: inset 0 0 0 1px rgb(var(--terracota-rgb) / .9); }
.btn-block { width: 100%; }

/* Desligado tem de continuar legível: é o estado dos meios de pagamento, que
   é o ponto que esta loja existe para explicar, e não um erro a esconder.
   A cal quente e não a argila — sobre argila o rótulo em pedra dá 3,29:1 e
   falha; sobre a cal quente dá 4,81:1 e passa. */
.btn:disabled,
.btn[aria-disabled="true"] {
	background: var(--cal-quente);
	color: var(--pedra);
	box-shadow: inset 0 0 0 1px rgb(var(--tinta-rgb) / .10);
	cursor: not-allowed;
	transform: none;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }

/* «Adicionar» enquanto o pedido vai e vem (loja.js). O Playground, e um
   alojamento partilhado num dia mau, demoram o bastante para um segundo
   toque parecer necessário; o botão diz que já está a tratar disso. */
.btn[aria-busy="true"] { cursor: progress; opacity: .7; transform: 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. 44px de alvo. */
.artigo-back { margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; }
.artigo-back a {
	color: var(--pedra);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 2.75rem;
	padding: .625rem .75rem .625rem 0;
	transition: color .3s ease;
}
.artigo-back a::before { content: '←'; transition: transform .35s var(--ease-out); }
.artigo-back a:hover { color: var(--terracota); }
.artigo-back a:hover::before { transform: translateX(-3px); }

/* ---- Marca do que é provisório ------------------------------------------
   O tracejado de argila vive no próprio valor (os preços) e não num banner no
   topo. A prosa provisória leva uma etiqueta no fim, e só isso: a régua
   tracejada à esquerda saiu na revisão de 23 Set, porque somada ao resto
   punha a página a parecer um rascunho. */

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

.por-escrever {
	display: flex;
	align-items: baseline;
	gap: .75rem;
	font-size: .875rem;
	line-height: 1.7;
	color: var(--pedra);
}
.por-escrever::before {
	content: '';
	flex: 0 0 1.5rem;
	height: 1px;
	border-top: 2px dotted var(--argila);
	transform: translateY(-.35em);
}

.prov-bloco { position: relative; }
.prov-bloco-etiqueta {
	display: block;
	margin-top: .75rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pedra);
}
.prov-bloco-etiqueta::before {
	content: '';
	display: inline-block;
	width: 1.25rem;
	margin-right: .5rem;
	vertical-align: middle;
	border-top: 2px dotted var(--argila);
}

/* ---- Cabeçalho -----------------------------------------------------------
   O desenho do cabeçalho do site: marca à esquerda, navegação ao centro, e à
   direita a pílula de terracota, que aqui é o carrinho em vez do «Contacte-me».
   Em telemóvel fica marca, menu e pílula, pela mesma ordem do site. */

.topo {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgb(var(--cal-rgb) / .92);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s ease;
}
.topo[data-rolou="sim"] { border-bottom-color: var(--linha); }

.topo-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	min-height: 4.5rem;
}
@media (min-width: 1024px) {
	/* Grelha e não flex: as duas pistas laterais repartem a largura por igual e
	   a navegação fica no centro verdadeiro da barra. */
	.topo-barra {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		min-height: 5rem;
	}
}

.topo-marca {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--tinta);
	text-decoration: none;
	white-space: nowrap;
}
.topo-marca em { font-style: italic; }
@media (min-width: 1024px) { .topo-marca { font-size: 1.3125rem; } }

.topo-nav {
	display: none;
	align-items: center;
	gap: 2rem;
	font-size: .875rem;
	font-weight: 600;
	color: var(--tinta);
}
@media (min-width: 1024px) { .topo-nav { display: flex; } }
.topo-nav a { color: inherit; }
.topo-nav a[aria-current="page"] { color: var(--terracota); }

.topo-accoes {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .375rem;
}

.carrinho-btn { position: relative; gap: .5rem; }
.carrinho-icone { display: none; flex: 0 0 auto; }

/* A barra tem de caber a 320px sem transbordar. Medido a 390: marca 189px,
   menu 44, pílula 117, e sobravam -2px. Os degraus são os do site (a marca
   encolhe primeiro) e, abaixo dos 380, a palavra «Carrinho» dá lugar ao
   saco: o número e o rótulo para o leitor de ecrã ficam. */
@media (max-width: 1023.98px) {
	.carrinho-btn.btn-sm { padding: .5rem 1rem; }
	.menu-btn { margin-right: -.25rem; }
}
@media (max-width: 429.98px) {
	.topo-marca { font-size: .9375rem; }
	.topo-accoes { gap: .25rem; }
	.carrinho-btn.btn-sm { padding: .5rem .875rem; gap: .375rem; }
}
@media (max-width: 379.98px) {
	.topo-marca { font-size: .875rem; }
	.carrinho-texto { display: none; }
	.carrinho-icone { display: block; }
	.carrinho-btn.btn-sm { padding: .5rem .75rem; }
}

/* O número dentro da pílula, e não um crachá pendurado na aresta: dentro, lê
   -se como parte do botão; pendurado, como uma notificação. */
.carrinho-conta {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 .3125rem;
	border-radius: 9999px;
	background: var(--cal);
	color: var(--terracota-fundo);
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1;
}
.carrinho-conta[data-tem="sim"] { display: inline-flex; }

.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(--tinta);
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.menu-btn:hover { background: rgb(var(--tinta-rgb) / .06); }
.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; }
@media (min-width: 1024px) { .menu-btn { display: none; } }

.menu-movel { border-top: 1px solid var(--linha); background: var(--cal); }
@media (min-width: 1024px) { .menu-movel { display: none !important; } }
.menu-movel a {
	display: block;
	padding: .9375rem 0;
	border-bottom: 1px solid var(--linha);
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -.03em;
	color: var(--tinta);
	text-decoration: none;
}
.menu-movel a:last-child { border-bottom: 0; }
.menu-movel a[aria-current="page"] { color: var(--terracota); }
.menu-movel a:focus-visible { outline-offset: -3px; }

/* ---- Rodapé -------------------------------------------------------------- */

.rodape { background: var(--tinta); color: rgb(var(--cal-rgb) / .7); padding: 3.5rem 0 2.5rem; }
@media (min-width: 1024px) { .rodape { padding-top: 4.5rem; } }
.rodape a { color: inherit; }
.rodape a:hover { color: var(--cal); }
.rodape .eyebrow { color: var(--blush); }

/* Âncora e não botão flutuante, como no site: o `#topo` está no cabeçalho e
   o `scroll-behavior: smooth` faz o resto sem uma linha de JavaScript. */
.voltar-ao-topo { display: flex; justify-content: center; margin: 0 auto 3rem; padding: 0 1.5rem; }
.voltar-ao-topo__link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 2.75rem;
	padding: .625rem 1.375rem;
	border: 1px solid rgb(var(--cal-rgb) / .25);
	border-radius: 9999px;
	color: var(--cal) !important;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none;
	transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.voltar-ao-topo__link svg { transition: transform .3s var(--ease-out); }
.voltar-ao-topo__link:hover { background: rgb(var(--cal-rgb) / .08); border-color: var(--blush); }
.voltar-ao-topo__link:hover svg { transform: translateY(-3px); }
.voltar-ao-topo__link:focus-visible { outline: 3px solid var(--blush); outline-offset: 3px; }
.voltar-ao-topo__link:active { transform: scale(.97); }

/* ---- Painel de capa ------------------------------------------------------
   Cartão com o fio de terracota dos cartões do site. `contain` e nunca
   `cover`: as capas são composições fechadas e cortá-las come o título. A
   sombra dupla na imagem é o que separa as capas brancas do painel claro. */

.loja-capa {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 4;
	padding: 1rem;
	border-radius: 1.25rem;
	background: var(--cartao);
	box-shadow: inset 0 0 0 1px var(--contorno), var(--shadow-warm-sm);
	overflow: hidden;
	transition: box-shadow .4s ease;
}
.loja-capa img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 12px 22px rgb(var(--tinta-rgb) / .22)) drop-shadow(0 2px 4px rgb(var(--tinta-rgb) / .14));
	transition: transform .55s var(--ease-out);
}

/* Produto digital: não há capa, há um sinal desenhado em terracota fina. */
.loja-capa-digital { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--terracota); }
.loja-capa-digital svg { width: 46%; height: auto; opacity: .6; }

/* ---- Selo e campanhas ----------------------------------------------------
   Latão, nunca vermelho: uma promoção distingue-se pelo preço antigo
   riscado em pedra, não por um alarme. */

.loja-selo {
	position: absolute;
	top: .75rem;
	left: .75rem;
	z-index: 3;
	padding: .25rem .625rem;
	border-radius: 9999px;
	background: var(--terracota);
	color: var(--cal);
	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;
	margin: 0;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--terracota-fundo);
}
.loja-etiqueta-campanha::before {
	content: '';
	width: .4375rem;
	height: .4375rem;
	border-radius: 9999px;
	background: var(--terracota);
}

.loja-preco {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: var(--tinta);
	white-space: nowrap;
}
.loja-preco-lg { font-size: 1.875rem; }
.loja-preco-sm { font-size: 1.0625rem; }
.loja-preco del,
.loja-preco del .amount {
	color: var(--pedra);
	font-size: .7em;
	font-weight: 400;
	margin-right: .35em;
}
.loja-preco ins { text-decoration: none; }

/* Nota de entrega: uma frase, com o ponto de terracota. */
.loja-nota {
	display: flex;
	align-items: flex-start;
	gap: .625rem;
	margin: 0;
	font-size: .8125rem;
	line-height: 1.65;
	color: var(--tinta-suave);
}
.loja-nota::before {
	content: '';
	flex: 0 0 auto;
	width: .375rem;
	height: .375rem;
	margin-top: .6em;
	border-radius: 9999px;
	background: var(--terracota);
}

/* ---- Abertura com livro --------------------------------------------------
   Inicial e página de um livro. Sem fotografia: a Sofia não quer o retrato
   dela como fundo da loja. A capa é a única imagem, e a abertura fica com a
   luz quente do site por trás.

   Em telemóvel a composição é a do site: tudo ao centro, e a capa pequena o
   bastante para o preço e os botões caberem no primeiro ecrã. Do lg para
   cima passa a duas colunas, texto à esquerda e a capa à direita. */

.loja-hero { padding: 2.5rem 0 4rem; }
@media (min-width: 1024px) { .loja-hero { padding: 6.5rem 0 8.5rem; } }

.loja-hero-grelha {
	display: grid;
	justify-items: center;
	gap: 1.75rem;
	text-align: center;
}
@media (min-width: 1024px) {
	.loja-hero-grelha {
		grid-template-columns: minmax(0, 1fr) 24rem;
		justify-items: stretch;
		align-items: center;
		gap: 5rem;
		text-align: left;
	}
	.loja-hero-grelha > .loja-capa { order: 2; }
}

.loja-capa-hero {
	width: 100%;
	max-width: 11rem;
	padding: 1.125rem;
	border-radius: 1.5rem;
	box-shadow: var(--shadow-warm-md);
}
.loja-capa-hero:hover img { transform: translateY(-5px) scale(1.02); }
@media (min-width: 640px) { .loja-capa-hero { max-width: 14rem; } }
@media (min-width: 1024px) { .loja-capa-hero { max-width: none; padding: 2rem; box-shadow: var(--shadow-warm-lg); } }

.loja-hero-texto { min-width: 0; max-width: 36rem; }

.loja-hero-titulo {
	margin: .875rem 0 0;
	font-family: var(--font-display);
	font-size: 2.375rem;
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -.02em;
	color: var(--tinta);
	text-wrap: balance;
}
.loja-hero-titulo em { font-style: italic; color: var(--terracota); }
@media (min-width: 640px) { .loja-hero-titulo { font-size: 3.25rem; } }
@media (min-width: 1024px) { .loja-hero-titulo { margin-top: 1.25rem; font-size: 4rem; } }
@media (max-width: 379.98px) { .loja-hero-titulo { font-size: 2.125rem; } }

.loja-hero-resumo {
	margin-top: 1rem;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--tinta-suave);
}
.loja-hero-resumo p { margin: 0; }
@media (min-width: 1024px) { .loja-hero-resumo { margin-top: 1.5rem; font-size: 1.125rem; } }

.loja-hero-compra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 1.25rem;
	margin-top: 1.5rem;
}
.loja-hero-compra form { margin: 0; }
.loja-hero-compra .loja-preco { flex-basis: 100%; }
@media (min-width: 1024px) {
	.loja-hero-compra { justify-content: flex-start; margin-top: 2.25rem; gap: 1.5rem; }
	.loja-hero-compra .loja-preco { flex-basis: auto; margin-right: .5rem; }
}

.loja-hero-extra { margin-top: 1.25rem; display: grid; gap: .75rem; justify-items: center; }
/* Ao centro o ponto não pode ficar pendurado à esquerda do bloco: passa a
   ir dentro da linha, antes da primeira palavra. */
@media (max-width: 1023.98px) {
	.loja-hero-extra .loja-nota { display: block; max-width: 22rem; text-align: center; }
	.loja-hero-extra .loja-nota::before { display: inline-block; margin: 0 .5rem 0 0; vertical-align: .15em; }
}
@media (min-width: 1024px) { .loja-hero-extra { margin-top: 1.75rem; justify-items: start; } }

/* Em telemóvel os dois botões lado a lado, ao mesmo tamanho: empilhados
   gastavam mais uma linha do primeiro ecrã. */
@media (max-width: 1023.98px) {
	.loja-hero-compra .btn-lg { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (max-width: 379.98px) {
	.loja-hero-compra .btn-lg { padding: .875rem 1.125rem; font-size: .8125rem; }
}

/* ---- Prateleira ----------------------------------------------------------
   A lista de livros que desliza. Em telemóvel e tablet é `scroll-snap`
   puro, com o cartão seguinte a espreitar na aresta (é o que diz que há mais
   para o lado) e os pontos por baixo, escritos pelo loja.js. Sem JavaScript
   continua a deslizar com o dedo, só não há pontos.

   A pista sangra até às duas arestas do ecrã (margem negativa igual ao
   padding do contentor, e o mesmo valor devolvido em padding), para o
   cartão que espreita não ser cortado a 24px da borda. Do lg para cima é uma
   grelha de seis: a fila inteira lê-se como uma estante. */

.prateleira {
	position: relative;
	display: flex;
	gap: 1rem;
	margin: 2rem -1.5rem 0;
	padding: .5rem 1.5rem 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 1.5rem;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	list-style: none;
}
.prateleira::-webkit-scrollbar { display: none; }
.prateleira > * {
	flex: 0 0 42%;
	min-width: 0;
	scroll-snap-align: start;
}
@media (min-width: 640px) { .prateleira > * { flex-basis: 27%; } }
@media (min-width: 1024px) {
	.prateleira {
		display: grid;
		grid-template-columns: repeat(var(--colunas, 6), minmax(0, 1fr));
		gap: 1.75rem 1.5rem;
		margin: 3.5rem 0 0;
		padding: 0;
		overflow: visible;
	}
}

/* Os pontos: um por item, com o nome do livro no rótulo e não «1, 2, 3». */
.pontos {
	display: none;
	justify-content: center;
	align-items: center;
	gap: .125rem;
	color: var(--terracota);
}
@media (max-width: 1023.98px) { html.js .pontos { display: flex; } }
.pontos button {
	appearance: none;
	border: 0;
	padding: 0;
	width: 2.25rem;
	height: 2.75rem;
	background: none;
	color: inherit;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.pontos button::before {
	content: '';
	width: .5rem;
	height: .5rem;
	border-radius: 9999px;
	background: currentColor;
	opacity: .28;
	transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.pontos button:hover::before { opacity: .55; }
.pontos button:active::before { transform: scale(.85); }
.pontos button[aria-current="true"]::before { opacity: 1; transform: scale(1.4); }
.pontos button:focus-visible { outline: 3px solid currentColor; outline-offset: -8px; border-radius: 9999px; }
.cartao-escuro .pontos { color: var(--blush); }

/* ---- Cartão de livro -----------------------------------------------------
   Capa, título, preço. O resumo saiu do cartão: numa prateleira que desliza
   era texto que ninguém lia, e esticava todos os cartões à altura do mais
   comprido. O que o livro é está no catálogo e na página dele.

   O alvo é o cartão inteiro, por um ::after sobre o único <a> do título. */

.loja-cartao { position: relative; display: flex; flex-direction: column; height: 100%; }
.loja-cartao .loja-capa { padding: .875rem; }
@media (min-width: 1024px) { .prateleira[style] .loja-capa { padding: 1.5rem; } }
.loja-cartao:hover .loja-capa { box-shadow: var(--shadow-warm-md); }
.loja-cartao:hover .loja-capa img { transform: translateY(-5px) scale(1.02); }

.loja-cartao-titulo {
	margin: .875rem 0 0;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -.02em;
	color: var(--tinta);
}
@media (min-width: 1024px) { .loja-cartao-titulo { margin-top: 1.125rem; font-size: 1.0625rem; } }
.loja-cartao-titulo a { color: inherit; text-decoration: none; transition: color .3s ease; }
.loja-cartao:hover .loja-cartao-titulo a { color: var(--terracota); }
.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(--terracota); outline-offset: 5px; border-radius: 1.25rem; }

.loja-cartao-promessa {
	display: none;
	margin: .375rem 0 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--pedra);
}
@media (min-width: 1024px) { .loja-cartao-promessa { display: block; } }

/* O preço encosta ao fundo: um título que parte em três linhas não pode
   desalinhar a fila de preços. */
.loja-cartao-preco { margin-top: auto; padding-top: .5rem; }

/* ---- Linha do catálogo ---------------------------------------------------
   O catálogo é um índice de cartões em cartão, o mesmo desenho das listas do
   site (as edições da newsletter, os temas das palestras). A capa entra solta
   no cartão, sem painel próprio: um painel dentro de um cartão seria uma
   caixa dentro de outra.

   Em telemóvel a linha tem capa, título, preço e o botão, e mais nada. O
   resumo só aparece do sm para cima, cortado a duas linhas. Nove produtos
   ficam em pouco mais de um ecrã e meio em vez de nove. */

.loja-linhas {
	display: grid;
	gap: .875rem;
	margin-top: 1.75rem;
}
@media (min-width: 1024px) {
	.loja-linhas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 3rem; }
}

.loja-linha {
	position: relative;
	display: grid;
	grid-template-columns: 4.75rem minmax(0, 1fr);
	align-items: center;
	gap: 1.125rem;
	padding: 1rem 1.125rem 1rem 1rem;
	border-radius: 1.25rem;
	background: var(--cartao);
	/* O fio de terracota a 14% é o que separa o cartão da cal: com as sombras
	   quase planas da identidade nova, sem ele o cartão desaparecia no fundo
	   (cartão sobre cal é 1,02:1). */
	border: 1px solid var(--contorno);
	box-shadow: var(--shadow-warm-sm);
	transition: box-shadow .35s ease, transform .35s var(--ease-out);
}
.loja-linha:hover { box-shadow: var(--shadow-warm-md); transform: translateY(-2px); }
@media (min-width: 640px) {
	.loja-linha { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1.5rem; padding: 1.25rem 1.5rem 1.25rem 1.25rem; }
}

.loja-linha-capa {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 4;
}
.loja-linha-capa img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 3px;
	filter: drop-shadow(0 8px 14px rgb(var(--tinta-rgb) / .22)) drop-shadow(0 1px 3px rgb(var(--tinta-rgb) / .16));
	transition: transform .5s var(--ease-out);
}
.loja-linha:hover .loja-linha-capa img { transform: translateY(-3px) rotate(-1deg); }
.loja-linha-capa .loja-capa-digital {
	border-radius: .75rem;
	background: var(--cal-quente);
	box-shadow: inset 0 0 0 1px var(--contorno);
}
.loja-linha-capa .loja-selo { top: -.375rem; left: -.375rem; }

.loja-linha-corpo { min-width: 0; }

.loja-linha-promessa {
	margin: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: .875rem;
	line-height: 1.35;
	color: var(--terracota-fundo);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.loja-linha-titulo {
	margin: .25rem 0 0;
	font-family: var(--font-display);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--tinta);
	text-wrap: balance;
}
@media (min-width: 640px) { .loja-linha-titulo { font-size: 1.375rem; } }
.loja-linha-titulo a { color: inherit; text-decoration: none; transition: color .3s ease; }
.loja-linha:hover .loja-linha-titulo a { color: var(--terracota); }
.loja-linha-titulo a::after { content: ''; position: absolute; inset: 0; border-radius: 1.25rem; }
.loja-linha-titulo a:focus-visible { outline: none; }
.loja-linha:has(.loja-linha-titulo a:focus-visible) { outline: 3px solid var(--terracota); outline-offset: 3px; }

.loja-linha-resumo {
	display: none;
	margin: .5rem 0 0;
	font-size: .875rem;
	line-height: 1.65;
	color: var(--tinta-suave);
}
@media (min-width: 640px) {
	.loja-linha-resumo {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}
}

.loja-linha .loja-etiqueta-campanha { margin-top: .5rem; font-size: .75rem; }

.loja-linha-compra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin-top: .75rem;
}
.loja-linha-compra form { margin: 0; }
/* O botão fica por cima do ::after do título, senão o toque em «Adicionar»
   abria a página do livro em vez de o pôr no carrinho. */
.loja-linha-compra .btn { position: relative; z-index: 2; }
@media (min-width: 640px) { .loja-linha-compra { margin-top: 1rem; } }

/* ---- Cartão escuro -------------------------------------------------------
   O cartão de tinta do site («Para empresas»): cantos de 1.75rem, grão, e um
   brilho de blush no canto. Aqui leva o que se diz antes de comprar. */

.cartao-escuro {
	position: relative;
	overflow: hidden;
	border-radius: 1.75rem;
	/* Tinta lisa. Era um gradiente para um roxo (#342D38), que vinha da paleta
	   antiga: nesta, qualquer desvio de matiz lê-se como sujidade, porque a
	   tinta já é quente. O brilho do canto chega para dar profundidade. */
	background: var(--tinta);
	color: rgb(var(--cal-rgb) / .74);
	box-shadow: var(--shadow-warm-lg);
	padding: 2rem 1.5rem 1.5rem;
}
@media (min-width: 640px) { .cartao-escuro { padding: 2.75rem 2.5rem 2.5rem; } }
@media (min-width: 1024px) { .cartao-escuro { padding: 3.5rem; } }
.cartao-escuro > * { position: relative; z-index: 2; }
.cartao-escuro::after {
	content: '';
	position: absolute;
	right: -6rem;
	bottom: -8rem;
	width: 22rem;
	height: 22rem;
	border-radius: 9999px;
	/* Terracota e não blush: sobre a tinta o blush a 16% dá um cinzento sujo,
	   e a terracota é a cor que este sistema tem para acender um canto. */
	background: rgb(var(--terracota-rgb) / .30);
	filter: blur(60px);
	z-index: 0;
}
.cartao-escuro .titulo-seccao { color: var(--cal); }
.cartao-escuro .titulo-seccao em { color: var(--blush); }
.cartao-escuro .eyebrow { color: var(--blush); }

/* Os itens numerados. Em telemóvel deslizam um de cada vez, como os três de
   cada percurso na inicial do site; do lg para cima ficam em colunas. */
.itens {
	position: relative;
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.itens::-webkit-scrollbar { display: none; }
.itens > li {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr);
	gap: .875rem;
}
@media (min-width: 1024px) {
	.itens { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3rem; margin-top: 2.75rem; overflow: visible; }
	.itens > li { flex: none; }
}
.item-num {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 9999px;
	background: rgb(var(--terracota-rgb) / .22);
	color: var(--blush);
	font-size: .75rem;
	font-weight: 700;
}
.item-titulo { margin: .125rem 0 0; font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--cal); }
.item-texto { margin: .5rem 0 0; font-size: .9375rem; line-height: 1.7; }
.cartao-escuro-pe {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	margin-top: 1.25rem;
}
@media (min-width: 1024px) { .cartao-escuro-pe { flex-direction: row; justify-content: flex-start; gap: 1.5rem; margin-top: 2.75rem; } }
.cartao-escuro-pe .pontos { margin-top: -.5rem; }

/* ---- Dobras --------------------------------------------------------------
   Os acordeões dos temas de palestra do site: cartão claro, título em
   Fraunces, o «+» em terracota que roda para «×». É onde vai o texto comprido
   (sobre o livro, para quem é, o excerto): em telemóvel fecham-se todos ao
   abrir a página, no desktop o primeiro fica aberto. */

.dobras { display: grid; gap: .75rem; }

.dobra {
	border-radius: 1.125rem;
	border: 1px solid var(--linha);
	background: var(--cal);
	box-shadow: var(--shadow-warm-sm);
	transition: background-color .3s ease;
}
.dobra[open] { background: var(--blush); }
.dobra > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.5rem;
	padding: .875rem 1.25rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--tinta);
	border-radius: 1.125rem;
	transition: color .25s ease;
}
@media (min-width: 640px) { .dobra > summary { padding: 1.125rem 1.5rem; font-size: 1.25rem; } }
.dobra > summary::-webkit-details-marker { display: none; }
.dobra > summary:hover { color: var(--terracota); }
.dobra > summary::after {
	content: '+';
	flex: 0 0 auto;
	font-family: var(--font-body);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
	color: var(--terracota);
	transition: transform .3s var(--ease-out);
}
.dobra[open] > summary::after { transform: rotate(45deg); }
.dobra > summary:focus-visible { outline-offset: -3px; border-radius: 1.125rem; }

.dobra-corpo {
	padding: 0 1.25rem 1.375rem;
	font-size: .9375rem;
	line-height: 1.75;
	color: var(--tinta-suave);
}
@media (min-width: 640px) { .dobra-corpo { padding: 0 1.5rem 1.625rem; } }
.dobra-corpo p { margin: 0; }
.dobra-corpo p + p { margin-top: .875rem; }

/* ---- Prosa e listas ------------------------------------------------------ */

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

.loja-lista { list-style: none; margin: 0; padding: 0; }
.loja-lista li {
	position: relative;
	padding: .5rem 0 .5rem 1.25rem;
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--tinta-suave);
}
.loja-lista li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1.05em;
	width: .375rem;
	height: .375rem;
	border-radius: 9999px;
	background: var(--terracota);
}

/* A diferença: uma frase grande em Fraunces. É a resposta à pergunta que traz
   alguém à página de um livro tendo já lido outro dela. */
.loja-diferenca {
	margin: 1rem 0 0;
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -.02em;
	color: var(--tinta);
	text-wrap: pretty;
}
@media (min-width: 1024px) { .loja-diferenca { margin-top: 1.5rem; font-size: 1.875rem; line-height: 1.35; } }

/* O excerto dentro da sua dobra: itálico, com a régua de argila fina. */
.loja-excerto {
	position: relative;
	padding-left: 1.125rem;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--tinta);
}
.loja-excerto::before {
	content: '';
	position: absolute;
	inset: .3em auto .3em 0;
	width: 1px;
	background: linear-gradient(to bottom, var(--argila), rgb(var(--argila-rgb) / .15));
}

/* ---- Página de um livro -------------------------------------------------- */

.produto-detalhe { display: grid; gap: 2.25rem; }
@media (min-width: 1024px) {
	.produto-detalhe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: start; }
}

.produto-topo { padding-top: .75rem; }
@media (min-width: 1024px) { .produto-topo { padding-top: 1.5rem; } }
.produto-topo .artigo-back { text-align: left; }

/* ---- Abertura interior (catálogo, páginas de texto) ---------------------- */

.hero-interior { padding: 2.5rem 0 2rem; }
@media (min-width: 1024px) { .hero-interior { padding: 6rem 0 4rem; } }
.hero-interior-titulo {
	margin: 1rem 0 0;
	max-width: 48rem;
	font-family: var(--font-display);
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -.02em;
	color: var(--tinta);
	text-wrap: balance;
}
.hero-interior-titulo em { font-style: italic; color: var(--terracota); }
@media (min-width: 640px) { .hero-interior-titulo { font-size: 3.5rem; } }
@media (min-width: 1024px) { .hero-interior-titulo { margin-top: 1.5rem; font-size: 4.25rem; } }
.hero-interior-texto { margin: 1rem 0 0; max-width: 36rem; font-size: 1rem; line-height: 1.7; color: var(--tinta-suave); }
@media (min-width: 1024px) { .hero-interior-texto { margin-top: 1.75rem; font-size: 1.125rem; } }

/* As fichas do site («chip-nav»): saltos para as secções da página. */
.fichas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
@media (min-width: 1024px) { .fichas { margin-top: 2.25rem; gap: .75rem; } }
.ficha {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 2.75rem;
	padding: .5rem 1.125rem;
	border: 1px solid rgb(var(--terracota-rgb) / .28);
	border-radius: 9999px;
	background: var(--cartao);
	color: var(--tinta);
	font-size: .8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .25s ease, border-color .25s ease, transform .25s var(--ease-spring);
}
.ficha:hover { background: var(--cal); border-color: rgb(var(--terracota-rgb) / .6); transform: translateY(-1px); }
.ficha:active { transform: scale(.97); }
.ficha span { color: var(--pedra); font-weight: 400; }

/* ---- Fecho centrado ------------------------------------------------------
   O «Vamos trabalhar juntos?» do site: centrado, sobre a cal, duas pílulas. */

.fecho { text-align: center; }
.fecho .titulo-seccao { margin-top: 0; }
.fecho-texto { margin: 1rem auto 0; max-width: 34rem; font-size: 1rem; line-height: 1.7; color: var(--tinta-suave); }
.fecho-botoes {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .875rem;
	margin-top: 1.75rem;
}
@media (min-width: 640px) { .fecho-botoes { flex-direction: row; justify-content: center; gap: 1rem; margin-top: 2.25rem; } }

/* ---- Quem escreve (inicial) ---------------------------------------------- */

.quem { display: grid; gap: 1.25rem; }
@media (min-width: 1024px) {
	.quem { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 5rem; align-items: start; }
}
.quem-texto p { margin: 0; }
.quem-texto p + p { margin-top: .875rem; }
.quem-texto .btn { margin-top: 1.5rem; }

/* ============================================================================
   CARRINHO, CHECKOUT E PÁGINAS DE TEXTO
   ----------------------------------------------------------------------------
   Sem alterações de desenho na revisão de 23 Set, a não ser as superfícies:
   o que era gelo ou papel passou a cartão, como os cartões do site.
   ========================================================================= */

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

.loja-aviso {
	padding: 1.375rem 1.625rem 1.5rem;
	border: 1px dashed rgb(var(--tinta-rgb) / .18);
	border-radius: 1rem;
	background: rgb(var(--terracota-rgb) / .05);
	color: var(--tinta-suave);
}
.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(--terracota-fundo);
}

/* ---- 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 rgb(var(--tinta-rgb) / .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(--argila);
	border-radius: .375rem;
	background: rgb(var(--argila-rgb) / .08);
	color: var(--terracota-fundo);
	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(--tinta); font-size: .9375rem; font-weight: 700; }
.loja-pag-nota { display: block; color: var(--pedra); 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: rgb(var(--tinta-rgb) / .20);
	background: rgb(var(--tinta-rgb) / .04);
	color: var(--pedra);
}
.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(--pedra);
}
.loja-pag-estado::before {
	content: '';
	width: .4375rem;
	height: .4375rem;
	border-radius: 9999px;
	border: 1.5px solid var(--pedra);
}


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

.qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgb(var(--tinta-rgb) / .18);
	border-radius: 9999px;
	background: var(--cartao);
	overflow: hidden;
}
.qty button {
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	background: transparent;
	color: var(--tinta);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.qty button:hover { background: rgb(var(--terracota-rgb) / .10); color: var(--terracota-fundo); }
.qty button:active { background: rgb(var(--terracota-rgb) / .18); }
/* O «−» no mínimo. A argila sobre o campo dava 1,6:1 e o sinal desaparecia:
   um controlo desligado tem de se ver, só não tem de convidar. */
.qty button:disabled { color: var(--pedra); opacity: .45; cursor: not-allowed; background: transparent; }
.qty input {
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	text-align: center;
	background: transparent;
	color: var(--tinta);
	font-family: var(--font-body);
	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 rgb(var(--tinta-rgb) / .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: var(--cal);
	overflow: hidden;
	color: var(--terracota);
}
.carrinho-capa::before {
	content: '';
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--argila), rgb(var(--argila-rgb) / 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(--pedra);
	font-family: var(--font-body);
	font-size: .8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: color .25s ease;
}
.remover:hover { color: #b3261e; }

.resumo {
	border-radius: 1.5rem;
	border: 1px solid var(--contorno);
	background: var(--cal);
	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(--tinta-suave);
}
.resumo-total {
	margin-top: .625rem;
	padding-top: 1.125rem;
	border-top: 1px solid rgb(var(--tinta-rgb) / .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(--pedra);
}
.campo input,
.campo select,
.campo textarea {
	width: 100%;
	border: 1px solid rgb(var(--tinta-rgb) / .18);
	border-radius: .75rem;
	/* O campo é mais claro do que a cal à volta: é o que diz que se escreve
	   aqui dentro. Era branco puro, que nesta paleta é uma cor estrangeira. */
	background: var(--cartao);
	padding: .8125rem 1rem;
	font-family: var(--font-body);
	font-size: .9375rem;
	color: var(--tinta);
	transition: border-color .25s ease;
}
.campo input::placeholder,
.campo textarea::placeholder { color: var(--pedra); opacity: 1; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--terracota); }
.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(--pedra);
}

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

/* ---- Avisos do WooCommerce nas páginas do tema ---------------------------
   Por baixo do cabeçalho, antes da abertura da página (`scf_loja_avisos()`).
   Só aparecem sem JavaScript, ou quando o servidor tem alguma coisa a dizer. */

.loja-avisos { padding-top: 1.5rem; }
.loja-avisos .woocommerce-message,
.loja-avisos .woocommerce-info,
.loja-avisos .woocommerce-error { margin-bottom: 0; }

/* ---- 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(--tinta);
	color: var(--cal);
	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; }

/* Com `left: 50%`, a largura «à medida do conteúdo» só conta com a metade
   direita do ecrã: num telemóvel o aviso ficava com 195 px e o nome do livro
   partia-se palavra a palavra numa coluna. `max-content` mede o conteúdo e
   o `max-width` de cima trava-o à largura do ecrã. */
.toast { width: max-content; }

/* Em duas linhas, a pílula passa a bolha; em ecrã estreito fica um
   rectângulo de cantos redondos. */
@media (max-width: 479.98px) {
	.toast { border-radius: 1.25rem; }
}
.toast a { color: var(--blush); font-weight: 700; text-decoration: none; white-space: nowrap; }
.toast a:hover { color: var(--cal); }
.toast strong { color: var(--cal); font-weight: 700; }


/* ---- Páginas de texto ----------------------------------------------------
   Perguntas frequentes, pagamento e devoluções, termos. Uma coluna estreita,
   títulos em Fraunces, 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: var(--font-display);
	font-size: 1.875rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -.03em;
	color: var(--tinta);
}
.scf-texto h2:first-child { margin-top: 0; }

.scf-texto h3 {
	margin: 2.5rem 0 .875rem;
	font-family: var(--font-display);
	font-size: 1.3125rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--tinta);
}

.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(--terracota); text-decoration: underline; text-underline-offset: 3px; }
.scf-texto a:hover { color: var(--terracota-fundo); }

.scf-texto hr {
	border: 0;
	height: 1px;
	margin: 3rem 0;
	background: linear-gradient(to right, rgb(var(--tinta-rgb) / .22), rgb(var(--tinta-rgb) / 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 rgb(var(--tinta-rgb) / .12);
	padding: .25rem 0;
}
.scf-faq:last-of-type { border-bottom: 1px solid rgb(var(--tinta-rgb) / .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: var(--font-display);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -.02em;
	color: var(--tinta);
	transition: color .25s ease;
}
.scf-faq > summary::-webkit-details-marker { display: none; }
.scf-faq > summary:hover { color: var(--terracota); }

.scf-faq > summary::after {
	content: '';
	flex: 0 0 auto;
	width: .625rem;
	height: .625rem;
	margin-top: .45em;
	border-right: 2px solid var(--terracota);
	border-bottom: 2px solid var(--terracota);
	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(--tinta-suave);
}
.scf-faq-corpo p { margin: 0 0 .875em; }
.scf-faq-corpo p:last-child { margin-bottom: 0; }
.scf-faq-corpo a { color: var(--terracota); 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 rgb(var(--terracota-rgb) / .35);
	background: rgb(var(--terracota-rgb) / .05);
}
.scf-nota > :first-child { margin-top: 0; }
.scf-nota > :last-child { margin-bottom: 0; }
.scf-nota strong { color: var(--terracota-fundo); }


/* ---- Saltar para o conteúdo ----------------------------------------------
   Ao receber foco volta a ser um elemento a sério; escondido para sempre, a
   primeira tecla Tab da página parecia não fazer nada. */

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(--tinta);
	color: var(--cal);
	font-size: .875rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--shadow-warm-lg);
}

/* ============================================================================
   SOBRE, a página da autora
   ----------------------------------------------------------------------------
   Revista a 23 Set 2026. A abertura deixou de ter o retrato ao lado do
   título e a banda do palco deixou de ter a fotografia de fundo: a Sofia não
   quer a imagem dela em evidência na loja. O retrato continua, mais pequeno,
   ao lado do percurso, e só do lg para cima.
   ========================================================================= */

/* A abertura centrada, como as do site. */
.sobre-hero { padding: 2.5rem 0 3rem; text-align: center; }
@media (min-width: 1024px) { .sobre-hero { padding: 6rem 0 5rem; } }
.sobre-hero .hero-interior-titulo { margin-left: auto; margin-right: auto; }
.sobre-hero .hero-interior-texto { margin-left: auto; margin-right: auto; }
@media (max-width: 639.98px) {
	.sobre-hero .hero-interior-titulo em { display: block; }
}

/* Os números: a fila do site (etiqueta por cima, número em Fraunces) e não
   um painel. O número mede-se contra a própria célula, como no site, para o
   «+1M» não sair dela a 320px. */
.numeros {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .75rem;
	max-width: 32rem;
	margin: 2rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--linha);
}
@media (min-width: 1024px) { .numeros { margin-top: 3.5rem; padding-top: 2rem; gap: 1.5rem; } }
.numeros > div { container-type: inline-size; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.numeros dt {
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.35;
	color: var(--pedra);
}
.numeros dd {
	margin: .375rem 0 0;
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 7vw, 2.25rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--tinta);
}
@supports (container-type: inline-size) {
	.numeros dd { font-size: min(2.25rem, 26cqw); }
}

/* ---- Percurso ------------------------------------------------------------ */

.sobre-percurso-grelha { display: grid; gap: 2rem; margin-top: 2rem; }
@media (min-width: 1024px) {
	.sobre-percurso-grelha { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 5rem; margin-top: 3.5rem; align-items: start; }
}

/* A pauta: filete em argila, um anel de terracota por etapa. O anel é oco: cheio, a
   esta escala, lia-se como um marcador de lista. */
.sobre-percurso {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1.75rem;
	border-left: 2px solid var(--argila);
}
.sobre-percurso li { position: relative; padding-bottom: 1.75rem; }
.sobre-percurso li:last-child { padding-bottom: 0; }
.sobre-percurso li::before {
	content: '';
	position: absolute;
	left: -2.1875rem;
	top: .25rem;
	width: .8125rem;
	height: .8125rem;
	border-radius: 9999px;
	background: var(--cal);
	box-shadow: inset 0 0 0 2px var(--terracota);
}
.sobre-percurso .eyebrow { margin: 0; color: var(--pedra); font-size: .6875rem; }
.sobre-percurso-marco {
	margin: .375rem 0 0;
	font-family: var(--font-display);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--tinta);
}
@media (min-width: 1024px) { .sobre-percurso-marco { font-size: 1.3125rem; } }
.sobre-percurso-nota { margin: .375rem 0 0; max-width: 30rem; font-size: .9375rem; line-height: 1.65; color: var(--tinta-suave); }

.sobre-lado { display: grid; gap: 1.5rem; align-content: start; }

/* O retrato: pequeno, preto e branco com a terracota em `multiply`, como as
   imagens do site. Só do lg para cima; em telemóvel era mais um ecrã dela
   entre o leitor e os livros. */
.sobre-retrato {
	display: none;
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 15rem;
	aspect-ratio: 4 / 5;
	margin: 0;
	border-radius: 1.5rem;
	box-shadow: var(--shadow-warm-md);
}
@media (min-width: 1024px) { .sobre-retrato { display: block; } }
.sobre-retrato img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 24%; filter: grayscale(1); }
.sobre-retrato::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--terracota);
	mix-blend-mode: multiply;
	opacity: .14;
}

/* ---- Estante dos sete ----------------------------------------------------
   Quatro colunas ao telemóvel (4 + 3 é uma prateleira com uma ponta livre;
   duas deixavam o sétimo sozinho) e sete do lg para cima. */

.sobre-estante {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	gap: .75rem .625rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: 640px) { .sobre-estante { gap: 1.25rem 1rem; } }
@media (min-width: 1024px) { .sobre-estante { gap: 1.25rem; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 3rem; } }

.sobre-estante a { display: block; border-radius: .75rem; }
.sobre-estante .loja-capa { padding: .375rem; border-radius: .625rem; }
@media (min-width: 640px) { .sobre-estante .loja-capa { padding: .75rem; border-radius: 1rem; } }
.sobre-estante a:hover .loja-capa { box-shadow: var(--shadow-warm-md); }
.sobre-estante a:hover .loja-capa img { transform: translateY(-4px) scale(1.03); }
.sobre-estante a:focus-visible { outline: 3px solid var(--terracota); outline-offset: 4px; }

/* ---- 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-linha, .loja-linha-capa img, .toast, .ficha,
	.link-seta span[aria-hidden], .dobra > summary::after, .pontos button::before,
	.voltar-ao-topo__link, .voltar-ao-topo__link svg { transition: none; }
	.btn:hover, .btn:active, .ficha:hover, .loja-linha:hover { transform: none; }
	.loja-cartao:hover .loja-capa img,
	.loja-capa-hero:hover img,
	.loja-linha:hover .loja-linha-capa img,
	.sobre-estante a:hover .loja-capa img,
	.voltar-ao-topo__link:hover svg { transform: none; }
	.toast { transform: translate(-50%, 0); }
	.prateleira, .itens { scroll-behavior: auto; }
}