/**
 * Home — seções.
 *
 * Medidas vindas do contrato (DESIGNS/prompt_stitch_home.md), não do olho.
 * Desktop: artboard 1440, container 1280, padding de seção 80px.
 * Mobile:  390, margens 16px, padding de seção 48px, alvo de toque 44px.
 */

/* ==========================================================================
   Barra de aviso
   ========================================================================== */

.coe-topbar {
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.coe-topbar__link {
	color: var(--paper);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

.coe-topbar__link:hover {
	color: var(--paper);
	text-decoration: underline;
}

.coe-topbar__texto--mobile {
	display: none;
}

/* ==========================================================================
   Cabeçalho
   ========================================================================== */

/*
 * Quem gruda no topo é o `.site-header`, wrapper do Storefront — ver
 * `style.css`, seção 6. Aqui o `position: relative` existe por outro motivo:
 * é ele que faz o painel do menu mobile, que é `absolute`, ancorar na base do
 * cabeçalho sem precisar de um `top` em pixels.
 */
.coe-header {
	position: relative;
	background-color: var(--paper);
	border-bottom: 1px solid var(--line);
}

.coe-header__inner {
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gutter);
}

.coe-header__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.coe-header__logo-completo {
	width: 150px;
	height: auto;
	display: block;
}

.coe-header__logo-marca {
	display: none;
	width: 40px;
	height: 40px;
}

/* Busca */

.coe-busca {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 480px;
	max-width: 480px;
}

.coe-busca__icone {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink-muted);
	display: flex;
	pointer-events: none;
}

.coe-busca input.coe-busca__campo {
	flex: 1 1 auto;
	width: 100%;
	height: var(--input-h);
	padding: 0 var(--sp-4) 0 40px;
	margin: 0;
	box-shadow: none;
	background-color: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: var(--radius) 0 0 var(--radius);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: 14px;
}

.coe-busca__campo::placeholder {
	color: var(--ink-muted);
	opacity: 1;
}

.coe-busca button.coe-busca__submit {
	height: var(--input-h);
	padding: 0 var(--sp-6);
	margin: 0;
	background-color: var(--navy);
	color: var(--paper);
	border: 0;
	border-radius: 0 var(--radius) var(--radius) 0;
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.coe-busca__submit:hover {
	background-color: var(--navy-hover);
}

/* Ações */

.coe-header__acoes {
	display: flex;
	align-items: center;
	gap: var(--sp-8);
	flex: 0 0 auto;
}

.coe-header__conta {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
}

.coe-header__carrinho {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--ink);
}

.coe-header__badge {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	border-radius: 999px;
	background-color: var(--orange);
	color: var(--ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.coe-header__menu-btn {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: var(--ink);
	cursor: pointer;
}

/* Navegação */

.coe-nav {
	height: 48px;
	border-top: 1px solid var(--line);
}

.coe-nav .coe-nav__lista {
	display: flex;
	align-items: center;
	gap: var(--sp-8);
	height: 48px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.coe-nav__lista a {
	display: inline-flex;
	align-items: center;
	height: 100%;
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	border-bottom: 2px solid transparent;
}

.coe-nav__lista a:hover {
	color: var(--ink);
	border-bottom-color: var(--orange);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.coe-hero {
	position: relative;
	overflow: hidden;
}

.coe-hero__trilho {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.coe-hero__trilho::-webkit-scrollbar {
	display: none;
}

.coe-hero__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	position: relative;
}

/*
 * Banner fechado, com a copy cravada na arte. A proporção é 3:1 e vale em
 * todo breakpoint — recortar a imagem para caber numa altura fixa cortaria
 * texto desenhado, que é justamente o que não pode sumir.
 */
.coe-hero__arte {
	display: block;
}

.coe-hero__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 1;
	object-fit: cover;
}

/*
 * O link cobre o slide inteiro. O botão está desenhado dentro do banner, e
 * recortar a área dele por coordenada quebraria em qualquer largura que a arte
 * não previu — o alvo é o banner todo.
 */
.coe-hero__link {
	position: absolute;
	inset: 0;
}

.coe-hero__link:focus-visible {
	outline: 3px solid var(--paper);
	outline-offset: -6px;
}

/* Setas e dots */

.coe-hero__seta {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background-color: rgba(246, 246, 236, 0.15);
	color: var(--paper);
	cursor: pointer;
}

.coe-hero__seta:disabled {
	opacity: 0.35;
	cursor: default;
}

.coe-hero__seta--ant {
	left: max(var(--sp-4), calc((100% - var(--container)) / 2 - 64px));
}

.coe-hero__seta--prox {
	right: max(var(--sp-4), calc((100% - var(--container)) / 2 - 64px));
}

.coe-hero__dots {
	position: absolute;
	left: 50%;
	bottom: var(--sp-6);
	transform: translateX(-50%);
	display: flex;
	gap: var(--sp-2);
}

.coe-hero__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: rgba(246, 246, 236, 0.4);
	cursor: pointer;
}

.coe-hero__dot.is-ativo {
	background-color: var(--amber);
}

/* ==========================================================================
   Vitrines
   ========================================================================== */

.coe-vitrine--branco {
	background-color: #fff;
	border-block: 1px solid var(--line);
}

.coe-vitrine__wrap {
	position: relative;
}

.coe-vitrine__viewport {
	overflow: visible;
}

.coe-vitrine__trilho {
	display: flex;
	gap: var(--gutter);
	margin: 0;
	padding: 0 0 var(--sp-2);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.coe-vitrine__trilho::-webkit-scrollbar {
	display: none;
}

.coe-vitrine__seta {
	position: absolute;
	top: 177px; /* metade da altura da capa, alinha com o centro da imagem */
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: 999px;
	background-color: var(--paper);
	color: var(--navy);
	cursor: pointer;
}

.coe-vitrine__seta:disabled {
	opacity: 0.35;
	cursor: default;
}

.coe-vitrine__seta--ant {
	left: max(var(--sp-2), calc((100% - var(--container)) / 2 - 48px));
}

.coe-vitrine__seta--prox {
	right: max(var(--sp-2), calc((100% - var(--container)) / 2 - 48px));
}

/* ==========================================================================
   Gêneros
   ========================================================================== */

.coe-generos__grade {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ==========================================================================
   Curadoria
   ========================================================================== */

/*
 * Reaproveita o `.coe-tile` do grid de gêneros, que vem logo abaixo na
 * página. O que separa as duas seções não é o desenho do card, é a escala:
 * até três peças largas e altas contra oito pequenas. Card diferente para o
 * mesmo gesto — clicar e cair numa listagem — só ensinaria duas gramáticas
 * para a mesma coisa.
 *
 * Três colunas fixas, e não `auto-fit`: o card precisa manter a proporção,
 * não preencher a linha. `--radius-arch` é 999px nos cantos de cima, então a
 * curva que fecha o arco depende da razão entre largura e altura — o tile de
 * gênero é 302×201, cerca de 1,5:1. Deixar uma coleção sozinha esticar até os
 * 1233px do container dá 4,7:1 e o arco vira meia-lua deitada.
 *
 * A 1/3 de linha o card sai com 395×260, a mesma proporção do tile de gênero
 * logo abaixo, e a linha incompleta lê como o que é: slot vago esperando a
 * próxima coleção.
 */
.coe-curadoria__grade {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

.coe-curadoria .coe-tile {
	height: 260px;
}

.coe-curadoria .coe-tile__rotulo {
	font-size: 21px;
}

.coe-tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 201px;
	overflow: hidden;
	border-radius: var(--radius-arch);
	background-color: var(--navy);
	text-align: center;
	/*
	 * Fio de luz na aresta de baixo. Sozinho não faz nada; junto com a sombra
	 * interna do ::before é o que vende a ideia de vão aberto no papel — a
	 * borda inferior é a única que a luz de cima alcançaria.
	 */
	box-shadow: 0 2px 0 rgba(255, 255, 255, 0.9);
}

/*
 * Sombra interna do arco: o tile deve parecer um buraco recortado na página,
 * não um cartão pousado sobre ela.
 *
 * Vai num ::before próprio e não no .coe-tile__overlay porque o overlay tem
 * opacity: a sombra seria desenhada e depois esmaecida junto com ele.
 *
 * Três camadas: a de cima larga e escura (a boca do vão), a de baixo curta e
 * fraca (luz que ricocheteia no fundo) e um fio de 1px que fecha o contorno.
 */
.coe-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	box-shadow:
		/* boca do vão: a aresta de cima é a que projeta sombra para dentro */
		inset 0 24px 38px -10px rgba(0, 4, 20, 0.95),
		/* vinheta nas quatro bordas — é ela que dá a sensação de fundo longe */
		inset 0 0 44px 10px rgba(0, 4, 20, 0.55),
		/* devolução fraca de luz no fundo do vão */
		inset 0 -12px 24px -14px rgba(120, 150, 210, 0.28),
		/* fio que fecha o contorno do recorte */
		inset 0 0 0 1px rgba(0, 4, 20, 0.55);
}

.coe-tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.coe-tile__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--navy);
	opacity: 0.55;
}

.coe-tile:hover .coe-tile__overlay {
	opacity: 0.7;
}

/* Sem foto própria da categoria, o tile cai na capa do título mais recente.
   A 55% a arte da capa disputa com o rótulo e a tipografia do livro continua
   legível — o tile passa a parecer um anúncio daquele título. A 82% a capa
   vira textura e o rótulo volta a mandar. */
.coe-tile--capa .coe-tile__overlay {
	opacity: 0.82;
}

.coe-tile--capa:hover .coe-tile__overlay {
	opacity: 0.88;
}

.coe-tile--capa .coe-tile__img {
	filter: saturate(0.75);
}

.coe-tile:hover::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--amber);
	border-radius: var(--radius-arch);
}

.coe-tile__conteudo {
	position: relative;
	/* 2, não 1: precisa ficar acima da sombra interna do ::before. */
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	padding-inline: var(--sp-4);
}

/*
 * Sombra sob o rótulo e a contagem dos oito tiles.
 *
 * A imagem de fundo é capa de livro, e capa tem tipografia própria: quando o
 * título do livro passa atrás do rótulo, as duas letras se misturam e a
 * leitura trava. O overlay a 82% ajuda, mas não resolve nas capas claras.
 *
 * Duas camadas: uma larga e difusa que separa o texto do fundo, e uma curta
 * que dá contorno. Em navy, não em preto — preto puro abre um halo cinza
 * fora da paleta.
 *
 * É desvio deliberado do "sem sombras" do contrato, que fala de sombra de
 * caixa. Aqui é legibilidade de texto sobre imagem, não decoração.
 */
.coe-tile__rotulo {
	text-shadow:
		0 8px 20px rgba(0, 8, 30, 0.9),
		0 3px 8px rgba(0, 8, 30, 0.75),
		0 1px 2px rgba(0, 8, 30, 0.6);
}

/* A contagem é informação secundária: sombra mais discreta, senão os dois
   textos disputam o mesmo plano e o efeito de flutuar se perde. */
.coe-tile__contagem {
	text-shadow:
		0 4px 12px rgba(0, 8, 30, 0.8),
		0 1px 3px rgba(0, 8, 30, 0.6);
}

.coe-tile__rotulo {
	font-family: var(--font-ui);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--paper);
}

.coe-tile__contagem {
	font-size: 13px;
	color: rgba(246, 246, 236, 0.7);
}

/* ==========================================================================
   Banda de confiança
   ========================================================================== */

.coe-confianca {
	padding-block: var(--sp-12);
}

.coe-confianca__grade {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.coe-confianca__item {
	padding-inline: var(--sp-6);
	border-left: 1px solid rgba(246, 246, 236, 0.2);
}

.coe-confianca__item:first-child {
	border-left: 0;
	padding-left: 0;
}

.coe-confianca__icone {
	display: block;
	color: var(--amber);
	margin-bottom: var(--sp-3);
}

.coe-confianca__titulo {
	font-family: var(--font-ui);
	font-size: 16px;
	font-weight: 700;
	color: var(--paper);
	margin: 0 0 var(--sp-1);
}

.coe-confianca__texto {
	font-size: 14px;
	line-height: 1.5;
	color: rgba(246, 246, 236, 0.7);
	margin: 0;
}

/* ==========================================================================
   Manifesto
   ========================================================================== */

.coe-manifesto__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-16);
	align-items: center;
}

.coe-manifesto__midia {
	position: relative;
	height: 380px;
	overflow: hidden;
	border-radius: var(--radius-arch);
	background-color: var(--paper-2);
}

.coe-manifesto__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.coe-manifesto__arcos {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: var(--sp-3);
	padding-bottom: 0;
}

.coe-manifesto__arcos span {
	display: block;
	width: 64px;
	border-radius: 999px 999px 0 0;
}

.coe-manifesto__arcos span:nth-child(1) {
	height: 180px;
	background-color: var(--orange);
}

.coe-manifesto__arcos span:nth-child(2) {
	height: 260px;
	background-color: var(--amber);
}

.coe-manifesto__arcos span:nth-child(3) {
	height: 140px;
	background-color: var(--navy);
}

.coe-manifesto__eyebrow {
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink);
	margin: 0 0 var(--sp-3);
}

.coe-manifesto__corpo {
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
	margin: var(--sp-4) 0 var(--sp-6);
}

.coe-manifesto__acao {
	margin: 0;
}

/* ==========================================================================
   Autores
   ========================================================================== */

.coe-autores__wrap {
	position: relative;
}

.coe-autores__trilho {
	display: flex;
	gap: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.coe-autores__trilho::-webkit-scrollbar {
	display: none;
}

.coe-autores__item {
	flex: 0 0 128px;
	scroll-snap-align: start;
}

.coe-autor {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-3);
	text-align: center;
}

.coe-autor__foto {
	display: block;
	width: 128px;
	height: 128px;
	border-radius: 999px;
	overflow: hidden;
	background-color: var(--paper-2);
	box-shadow: 0 0 0 1.5px var(--line);
}

.coe-autor__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.coe-autor__nome {
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 128px;
}

.coe-autores__seta {
	position: absolute;
	top: 46px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: 999px;
	background-color: var(--paper);
	color: var(--navy);
	cursor: pointer;
}

.coe-autores__seta--ant {
	left: max(var(--sp-2), calc((100% - var(--container)) / 2 - 48px));
}

.coe-autores__seta--prox {
	right: max(var(--sp-2), calc((100% - var(--container)) / 2 - 48px));
}

/* ==========================================================================
   Blog
   ========================================================================== */

.coe-blog__grade {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

.coe-post {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background-color: #fff;
}

.coe-post:hover {
	border-color: var(--navy);
}

.coe-post__capa {
	display: block;
	aspect-ratio: 410 / 231;
	background-color: var(--paper-2);
}

.coe-post__capa img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.coe-post__corpo {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-4);
}

.coe-post__titulo {
	font-family: var(--font-ui);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}

.coe-post__data {
	font-size: 13px;
	color: var(--ink-muted);
}

.coe-post__resumo {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-muted);
}

/* ==========================================================================
   Faixa Publique
   ========================================================================== */

.coe-publique {
	background-color: var(--amber);
	color: var(--ink);
}

.coe-publique__inner {
	min-height: 140px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-8);
	padding-block: var(--sp-6);
}

.coe-publique__titulo {
	font-family: var(--font-display);
	font-size: 24px;
	line-height: 1.2;
	color: var(--ink);
	margin: 0 0 var(--sp-2);
}

.coe-publique__linha {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink);
	margin: 0;
	max-width: 46rem;
}

.coe-publique__acao {
	margin: 0;
	flex: 0 0 auto;
}

/* ==========================================================================
   Rodapé
   ========================================================================== */

.coe-footer {
	padding-top: var(--sp-16);
	padding-bottom: var(--sp-8);
}

.coe-footer__colunas {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gutter);
	padding-bottom: var(--sp-12);
}

.coe-footer__coluna {
	min-width: 0;
}

.coe-footer__titulo {
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--amber);
	margin-bottom: var(--sp-4);
	list-style: none;
	cursor: default;
}

.coe-footer__titulo::-webkit-details-marker {
	display: none;
}

.coe-footer .coe-footer__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

/*
 * O Storefront injeta CSS inline do personalizador com
 * `.site-footer a:not(.button):not(.components-button) { color: #333 }` —
 * especificidade (0,3,1) e carregado depois das folhas do tema. Sem chegar a
 * (0,4,1) o link do rodapé fica cinza-escuro sobre navy, ilegível.
 *
 * Medido no CSSOM, não suposto: a cor final era rgb(51,51,51).
 */
.coe-footer.coe-band-navy a:not(.button):not(.components-button) {
	color: rgba(246, 246, 236, 0.85);
	text-decoration: none;
}

.coe-footer.coe-band-navy a:not(.button):not(.components-button):hover {
	color: var(--paper);
	text-decoration: underline;
}

.coe-footer__lista a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: 14px;
}

.coe-footer.coe-band-navy .coe-footer__social a,
.coe-footer.coe-band-navy .coe-footer__grupo {
	color: var(--paper);
}

.coe-footer__nota {
	font-size: 14px;
	color: rgba(246, 246, 236, 0.7);
}

.coe-footer__strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
	padding-block: var(--sp-6);
	border-top: 1px solid rgba(246, 246, 236, 0.2);
}

.coe-footer__grupo img {
	width: 120px;
	height: auto;
	display: block;
}

.coe-footer__pagamento {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	color: var(--paper);
}

.coe-footer__pagamento-texto {
	font-size: 13px;
	color: rgba(246, 246, 236, 0.85);
}

.coe-footer__social {
	display: flex;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.coe-footer__social a {
	color: var(--paper);
	display: inline-flex;
}

.coe-footer__seguranca,
.coe-footer__cookies,
.coe-footer__legal {
	text-align: center;
	margin: 0 0 var(--sp-4);
	color: rgba(246, 246, 236, 0.6);
	font-size: 12px;
	line-height: 1.6;
}

.coe-footer__legal {
	margin-bottom: 0;
}

/*
 * O controle de cookies é `button`, e o Storefront dá a ele altura, fundo e
 * padding de botão de formulário. Aqui ele é um link do rodapé — a regra
 * desfaz a herança em vez de acrescentar aparência.
 */
.coe-footer__cookies-btn {
	background: none;
	border: 0;
	padding: 0;
	height: auto;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.coe-footer__cookies-btn:hover,
.coe-footer__cookies-btn:focus-visible {
	background: none;
	color: var(--paper);
}

/* ==========================================================================
   Mobile — 390px de referência
   ========================================================================== */

@media (max-width: 767px) {

	.coe-topbar {
		height: auto;
		padding-block: var(--sp-2);
	}

	.coe-topbar__texto--desktop {
		display: none;
	}

	.coe-topbar__texto--mobile {
		display: inline;
		font-size: 13px;
		font-weight: 600;
		/*
		 * Sem caixa alta e sem letter-spacing largo. Com `uppercase` e 0.1em a
		 * faixa media 58px a 375px — duas linhas, com o "42" órfão na segunda.
		 * A caixa alta sozinha alarga o texto em cerca de 12%, e a entrelinha
		 * some junto com ela.
		 */
		line-height: 1.2;
		text-wrap: balance;
	}

	.coe-topbar {
		min-height: 40px;
		padding: var(--sp-2) var(--sp-4);
	}

	/* Cabeçalho: 56px, marca isolada, busca em linha própria. */

	/*
	 * Altura automática, não fixa. Com `height: 56px` a busca envolvia para a
	 * terceira linha mas a caixa não crescia: o campo transbordava para fora
	 * do bloco papel do header e ia parar em cima do navy, colado na linha do
	 * logo. O mockup mantém a busca dentro do header.
	 *
	 * O `row-gap: 0` é proposital: quem controla o respiro vertical é a
	 * margem da busca, logo abaixo, e não o gap — senão os dois somam.
	 */
	.coe-header__inner {
		height: auto;
		min-height: 56px;
		flex-wrap: wrap;
		column-gap: var(--sp-3);
		/*
		 * O respiro vertical mora aqui, no contêiner, e não na margem da
		 * busca: `.coe-header form` zera margem de formulário para conter o
		 * Storefront, e vence `.coe-busca` por especificidade. Row-gap e
		 * padding não entram nessa disputa.
		 *
		 * 8px acima separa a busca dos alvos de toque da linha do logo — o
		 * hambúrguer fica logo acima do campo (Material pede 8dp entre alvos
		 * distintos; proximidade de Gestalt diz o mesmo pela leitura: busca é
		 * outra função, não pertence ao grupo marca/sacola/menu).
		 * 12px abaixo é o respiro do mockup.
		 */
		row-gap: var(--sp-2);
		padding-bottom: var(--sp-3);
	}

	/* Mantém a primeira linha em 56px e centra o logo nela: antes sobravam
	   6px acima e 19px abaixo, porque a caixa travada empurrava o conteúdo. */
	.coe-header__logo,
	.coe-header__acoes {
		min-height: 56px;
		align-items: center;
	}

	.coe-header__logo-completo {
		display: block;
		width: 115px;
	}

	.coe-header__logo-marca {
		display: none;
	}

	.coe-busca {
		order: 3;
		flex: 1 0 100%;
		max-width: none;
	}

	.coe-busca button.coe-busca__submit {
		display: none;
	}

	.coe-busca input.coe-busca__campo {
		border-radius: var(--radius);
		background-color: #fff;
		/* Escala mobile do contrato: corpo em 15px. */
		font-size: 15px;
	}

	/*
	 * O contrato mobile pedia "logo on the left, cart icon on the right,
	 * hamburger next to it", sem link de conta — ele viveria dentro do menu.
	 * Só que essa segunda metade nunca foi escrita: o menu do celular é o
	 * `wp_nav_menu` cru, e nada injetava a conta nele. Resultado: no celular
	 * não havia caminho nenhum para /minha-conta/.
	 *
	 * Decisão de 04/09/2026: o ícone volta para o header, ao lado da sacola.
	 * Sai só o rótulo — "Minha conta" por extenso não cabe na linha de 375px
	 * junto com logo, sacola e hambúrguer.
	 */
	.coe-header__conta-texto {
		display: none;
	}

	.coe-header__acoes {
		gap: var(--sp-4);
	}

	/*
	 * O botão do menu é uma caixa de 44px para um ícone de 24 — os 44px são o
	 * alvo de toque do contrato e não se mexe neles. O efeito colateral é que
	 * o traço do hambúrguer parava 10px antes da borda do conteúdo: à
	 * esquerda o logo encostava no gutter de 16px, à direita os ícones ficavam
	 * recuados, e a linha lia como torta.
	 *
	 * Medido a 375px em 07/09/2026 — logo 16→131, hambúrguer 325→349, campo de
	 * busca 16→359. A margem negativa é exatamente o respiro interno do botão,
	 * (44-24)/2: o traço passa a terminar em 359, alinhado com o campo de
	 * busca logo abaixo e espelhando os 16px do logo. De quebra os vãos entre
	 * os três ícones ficam iguais em 16px — antes o último era 26px, porque a
	 * caixa do botão somava ao `gap`.
	 *
	 * O alvo de toque não encolhe; ele passa a avançar 10px sobre a margem, o
	 * que num canto de tela é ganho, não perda.
	 */
	.coe-header__menu-btn {
		display: inline-flex;
		margin-inline: -10px;
	}

	/*
	 * Menu mobile: painel sobreposto, não empilhado.
	 *
	 * Antes o `.coe-nav` era `display: block` no fluxo, e abrir o menu
	 * empurrava a página inteira para baixo — o conteúdo que a pessoa estava
	 * lendo saía do lugar ao abrir e voltava deslocado ao fechar.
	 *
	 * Agora é `position: absolute` ancorado no próprio `.coe-header`, que é
	 * `position: relative`. Isso evita o número mágico: `top: 100%` é sempre a
	 * base do cabeçalho, seja qual for a altura dele — e ela varia, porque a
	 * primeira linha tem `min-height: 56px` e cresce com a busca embaixo.
	 * Como o cabeçalho é fixado no topo pelo `.site-header`, o painel
	 * acompanha.
	 */
	.coe-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 99;
		height: auto;
		/* Menu longo rola dentro do painel em vez de passar da tela. */
		max-height: 70dvh;
		overflow-y: auto;
		background-color: var(--paper);
		border-top: 1px solid var(--line);
		border-bottom: 1px solid var(--line);
		/*
		 * `visibility` junto de `display: none` seria redundante, mas
		 * `display` mata a transição. Aqui não há transição de entrada — o
		 * contrato proíbe —, então o par é `display` mesmo, que também tira o
		 * painel da ordem de tabulação quando fechado.
		 */
		display: none;
	}

	.coe-nav.is-aberto {
		display: block;
	}

	.coe-nav .coe-container {
		padding-inline: 0;
	}

	.coe-nav .coe-nav__lista {
		flex-direction: column;
		align-items: stretch;
		height: auto;
		gap: 0;
		padding-block: 0;
	}

	.coe-nav__lista li {
		border-bottom: 1px solid var(--line);
	}

	.coe-nav__lista li:last-child {
		border-bottom: 0;
	}

	/*
	 * O item inteiro é o alvo, não só o texto: `display: flex` no <a> com
	 * largura total resolve o "cliquei no botão e não aconteceu nada" de quem
	 * toca na faixa ao lado da palavra.
	 *
	 * 52px de altura, acima dos 44px mínimos do contrato — em lista vertical
	 * a folga entre alvos vale mais que em barra horizontal, e ainda dá o
	 * respiro que o menu empilhado não tinha.
	 */
	.coe-nav__lista a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 52px;
		padding-inline: var(--sp-4);
		border-bottom: 0;
		text-align: center;
		font-size: 16px;
	}

	.coe-nav__lista a:hover,
	.coe-nav__lista a:focus-visible {
		background-color: var(--paper-2);
		border-bottom-color: transparent;
	}

	/* Véu: escurece o resto e vira a área de fechar. */
	.coe-menu-veu {
		position: fixed;
		inset: 0;
		z-index: 98;
		display: none;
		background-color: rgba(49, 48, 54, 0.45);
	}

	.coe-menu-aberto .coe-menu-veu {
		display: block;
	}

	/*
	 * Trava a rolagem da página com o menu aberto. `overflow: hidden` sozinho
	 * não segura no iOS; `position: fixed` segura, mas zera o scroll — por
	 * isso o JS guarda a posição em `top` e devolve no fechamento.
	 */
	.coe-menu-aberto {
		position: fixed;
		width: 100%;
		overflow: hidden;
	}

	/*
	 * No celular o `<picture>` serve a arte 1080 × 1080 entregue em 02/09/2026,
	 * uma para cada banner, com a copy recomposta para o quadrado. A caixa toma
	 * a forma da imagem e não há recorte nenhum.
	 *
	 * Antes disso a arte 3:1 era recortada aqui na horizontal, com um
	 * `object-position` por slide, porque mantê-la em 3:1 deixava o hero com
	 * 125px de altura a 375px — uma tarja onde não se via o dragão nem o botão
	 * desenhado. Os três recortes saíram com a chegada da arte.
	 */
	.coe-hero__img {
		aspect-ratio: 1 / 1;
	}

	.coe-hero__dots {
		bottom: var(--sp-2);
	}

	/* Sem setas no mobile: o carrossel é por swipe. */

	.coe-hero__seta,
	.coe-vitrine__seta,
	.coe-autores__seta {
		display: none;
	}

	.coe-generos__grade {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-4);
	}

	.coe-tile {
		height: 173px;
	}

	.coe-tile__rotulo {
		font-size: 15px;
	}

	/*
	 * Os seletores da curadoria carregam a seção e pesam (0,2,0), então
	 * ganhariam das duas regras acima e manteriam 260px e 24px no celular.
	 * Precisam ser repetidos com o mesmo peso para valer o ajuste mobile.
	 *
	 * Uma coluna: a 375px, duas coleções lado a lado dariam 170px de largura
	 * cada, e o rótulo de coleção é mais longo que o de gênero — "Até R$ 45"
	 * ainda cabe, "Coleção do mês" não.
	 */
	.coe-curadoria__grade {
		grid-template-columns: 1fr;
		gap: var(--sp-4);
	}

	.coe-curadoria .coe-tile {
		height: 200px;
	}

	.coe-curadoria .coe-tile__rotulo {
		font-size: 19px;
	}

	.coe-confianca__grade {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-8) var(--sp-4);
		background-color: #fff;
		border-radius: var(--radius);
		padding: var(--sp-6);
	}

	.coe-confianca {
		background-color: var(--paper);
	}

	.coe-confianca__item {
		border-left: 0;
		padding-inline: 0;
		text-align: center;
	}

	.coe-confianca__icone {
		color: var(--orange);
	}

	/*
	 * A banda nasce navy e vira cartão branco no mobile, então o texto tem de
	 * inverter junto. Só que `.coe-band-navy h3` do style.css pesa (0,1,1) e
	 * ganhava de `.coe-confianca__titulo` (0,1,0): o título ficava #f6f6ec
	 * sobre branco e sumia da tela — o texto estava lá, ilegível.
	 *
	 * Os dois seletores abaixo carregam a própria banda para pesar (0,2,0) e
	 * vencer. Precisam andar juntos: subir só o do título faria o `__texto`
	 * perder o `--ink-muted` para esta mesma regra.
	 */
	.coe-band-navy .coe-confianca__titulo {
		color: var(--ink);
		font-size: 15px;
	}

	.coe-band-navy .coe-confianca__texto {
		color: var(--ink-muted);
		font-size: 13px;
	}

	.coe-manifesto__inner {
		grid-template-columns: 1fr;
		gap: var(--sp-6);
	}

	.coe-manifesto__midia {
		height: 260px;
		border-radius: var(--radius);
	}

	.coe-manifesto__acao .coe-btn {
		width: 100%;
		text-transform: uppercase;
	}

	.coe-autores__item {
		flex: 0 0 88px;
	}

	.coe-autor__foto {
		width: 88px;
		height: 88px;
	}

	.coe-autor__nome {
		max-width: 88px;
		font-size: 13px;
	}

	.coe-autores__trilho {
		gap: var(--sp-6);
	}

	/* Blog vira carrossel com 1,2 card visível. */

	.coe-blog__grade {
		display: flex;
		gap: var(--sp-4);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.coe-blog__grade::-webkit-scrollbar {
		display: none;
	}

	.coe-blog__item {
		flex: 0 0 83%;
		scroll-snap-align: start;
	}

	.coe-publique__inner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		gap: var(--sp-4);
		padding-block: var(--sp-6);
		min-height: 0;
	}

	.coe-publique__acao .coe-btn {
		width: 100%;
		text-transform: uppercase;
	}

	.coe-footer {
		padding-top: var(--sp-12);
		padding-bottom: var(--sp-6);
	}

	.coe-footer__colunas {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.coe-footer__coluna {
		border-bottom: 1px solid rgba(246, 246, 236, 0.2);
	}

	.coe-footer__titulo {
		display: flex;
		align-items: center;
		min-height: 44px;
		margin-bottom: 0;
		cursor: pointer;
	}

	.coe-footer__coluna[open] .coe-footer__lista {
		padding-bottom: var(--sp-4);
	}

	.coe-footer__strip {
		flex-direction: column;
		gap: var(--sp-4);
		text-align: center;
	}

	.coe-footer__pagamento {
		flex-wrap: wrap;
		justify-content: center;
	}
}