/*
Theme Name: Sonnata
Theme URI: https://sonnataposter.com.br
Author: PosterOn — plataforma POD
Author URI: https://lojas.posteron.com.br
Description: Tema de loja de pôster autoral para a rede POD da PosterOn. A interface é preto e branco; toda cor vem da arte do pôster. A moldura é um render 3D com o vão vazado, então dois PNGs servem o catálogo inteiro. Nome, textos, contatos e cor de destaque saem do Personalizar — trocar de parceiro é trocar os campos, não o código.
Version: 1.20.2
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sonnata
Tags: e-commerce, woocommerce, dark, one-column, custom-logo, custom-menu, translation-ready
*/

/* ═══════════════════════════════════════════════════════════════════════════
   A REGRA QUE ORGANIZA ESTE ARQUIVO INTEIRO

   A interface é PRETA E BRANCA. Nenhuma cor decorativa existe aqui dentro.
   Toda cor entra por três variáveis que o PHP escreve por pôster, a partir da
   arte: --p1..--p4 (a faixa), --papel (o fundo da peça) e --arte (o destaque).

   ➜ Consequência prática: catálogo novo repinta o site sozinho. E como o
   cromatismo nunca é digitado, não há como um pôster "sair do padrão".

   Escrito MOBILE-FIRST: o que está fora de media query é o celular. As regras
   de tela grande são adições, nunca correções — foi o pedido explícito dele.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
	/* o breu — não é #000: preto puro em OLED borra o texto branco no scroll */
	--breu:      #08080A;
	--breu-alto: #101015;
	--breu-topo: rgba(8,8,10,.82);

	--tinta:   #FFFFFF;
	--tinta-2: rgba(255,255,255,.66);
	--tinta-3: rgba(255,255,255,.40);
	--linha:   rgba(255,255,255,.13);
	--linha-2: rgba(255,255,255,.07);

	/* o destaque. Branco por padrão: em interface preto e branco, o destaque
	   É o contraste. O Personalizar pode trocar por uma cor da marca. */
	--marca:       #FFFFFF;
	--marca-tinta: #08080A;

	/* a cor da arte em foco — reescrita por card, por herói, por produto */
	--arte:  #FFFFFF;
	--papel: #141418;

	--gut:  clamp(18px, 5.2vw, 56px);
	--larg: 1320px;
	--raio: 2px;   /* quase reto: pôster e moldura são retos, a interface segue */

	--fdisplay: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
	--fcorpo:   "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fdado:    "Martian Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

	--t-rap: .18s cubic-bezier(.4,0,.2,1);
	--t-med: .38s cubic-bezier(.22,1,.36,1);
	--t-len: .72s cubic-bezier(.22,1,.36,1);
}

/* ───────────────────────────────────────────────────────────────── base ── */

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

html{
	-webkit-text-size-adjust:100%;   /* iOS aumenta fonte ao girar; aqui não */
	scroll-behavior:smooth;
	/* 🔴 TRAVA LATERAL DA PÁGINA — a história inteira, porque ela enganou 2×.
	   04/09 manhã (relato do Renato): "se puxar pro lado, o site se move e fica
	   uma tela preta". A trava existia só no body; entrou aqui, como clip.
	   04/09 noite (relato dele, no iPhone): "arrasta pra direita, o site inteiro
	   vai junto; só no Chrome funciona". ➜ o clip era o furo: o CSS só REPASSA
	   ao viewport visible/hidden/scroll/auto — no WebKit, clip na raiz vale
	   como visible e o dedo arrasta a página. O Chromium ignora esse overflow
	   (medido: mesmo com visible, scrollTo(9999,0) deixa scrollX em 0), por
	   isso "só no Chrome funciona".
	   🔑 hidden AQUI, na raiz, que os dois motores repassam ao viewport.
	   ⚠️ hidden só no html, nunca no body: no body viraria caixa de rolagem e
	   o .son-topo{position:sticky} pararia de grudar. No html o valor vai para
	   o viewport e o próprio html segue "visible" — o sticky continua.
	   ⚠️ O fundo vai aqui também: sem ele, o que aparecer além do conteúdo é o
	   branco do navegador — a "tela preta/estranha" do relato. */
	overflow-x:hidden;
	/* 2ª trava, no GESTO e não na caixa: dedo que cai fora de um trilho (título,
	   respiro entre carrosséis) só rola na vertical. Os trilhos continuam
	   deslizando de lado: a regra é lida até o rolador mais próximo, e eles são
	   roladores. pinch-zoom fica, por acessibilidade. */
	touch-action:pan-y pinch-zoom;
	background:var(--breu);
	/* O topo é `sticky`, então uma âncora (#como-chega, no botão do herói)
	   para o alvo EMBAIXO dele — o visitante clica e o título some atrás da
	   barra. `scroll-padding` no <html> resolve para toda âncora de uma vez,
	   inclusive as que o WooCommerce cria sozinho. */
	scroll-padding-top:88px;
}

body{
	margin:0;
	background:var(--breu);
	color:var(--tinta);
	font-family:var(--fcorpo);
	font-size:clamp(15px, 1.02rem, 17px);
	line-height:1.55;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	/* trava contra rolagem lateral: um único filho largo demais estraga a
	   página inteira no celular, e o defeito costuma ser invisível no desktop.
	   ⚠️ Só aqui NÃO BASTA — ver a nota no `html` acima. */
	overflow-x:hidden;
	overflow-x:clip;
	touch-action:pan-y pinch-zoom;
}

img, svg, video{ max-width:100%; height:auto; display:block; }
/* 🔴 04/09 (3a rodada) — o reset ACIMA é regra de AUTOR e por isso vence o
   `[hidden]{display:none}` do navegador, que é regra de agente do usuário.
   Consequência: `img.hidden = true` no JS não escondia NADA neste tema — e foi
   assim que a moldura frontal ficou por cima de todos os mockups compostos.
   🔑 É a mesma armadilha já registrada 2× no CLAUDE.md (`[hidden]` × `display`).
   Curado aqui, na origem, para valer para todo elemento do tema — não só este. */
[hidden]{ display:none !important; }

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.06; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--arte); color:#08080A; }

:focus-visible{
	outline:2px solid var(--marca);
	outline-offset:3px;
	border-radius:var(--raio);
}

/* 🔴 04/09 (2ª rodada) — RELATO DO RENATO, DE NOVO: *"qualquer toque para o
   lado arrasta a tela e fica preta."* A trava de `overflow-x` do <html> não
   foi suficiente no aparelho dele, e a razão é conhecida: no **iOS Safari o
   `overflow-x:hidden` na raiz não impede o pan** quando existe conteúdo
   posicionado FORA da tela — e `overflow:clip`, que impede, só existe do
   iOS 16 para cima. Este link de pular era esse conteúdo: `left:-9999px`
   punha 10.000 px de tela para o lado esquerdo.
   🔑 A correção durável não é cortar melhor — é NÃO TER O QUE CORTAR. A
   receita padrão do WordPress (`clip-path` + 1×1 px) esconde do olho sem
   sair da tela, e continua acessível ao leitor e ao TAB.
   ⚠️ Não voltar para `left:-9999px` nem para `text-indent` negativo. */
.son-pular{
	position:absolute; top:0; left:0; z-index:200;
	width:1px; height:1px; overflow:hidden;
	clip-path:inset(50%); white-space:nowrap;
	background:var(--marca); color:var(--marca-tinta);
	padding:12px 20px; font-weight:700;
}
.son-pular:focus{
	width:auto; height:auto; overflow:visible;
	clip-path:none;
	left:12px; top:12px;
}

.son-largura{
	width:100%; max-width:var(--larg);
	margin-inline:auto;
	padding-inline:var(--gut);
}

/* Página curta (uma política, um 404) não pode deixar o rodapé no meio da
   tela — parece site quebrado. `100svh` e não `vh`: no celular o `vh` conta a
   barra do navegador que some ao rolar, e sobra um buraco embaixo. */
.son-conteudo{
	min-height:calc(100svh - 64px - 220px);
	/* 2ª camada da trava lateral (04/09). A 1ª é `html/body{overflow-x:clip}`.
	   Esta corta no CONTEÚDO, que é onde o estouro nasce — assim a página não
	   depende de o navegador honrar o clip no `<html>`, que é justamente onde
	   os móveis divergem. `clip` e não `hidden`: `hidden` criaria um contêiner
	   de rolagem e quebraria o `position:sticky` (a parede do construtor). */
	overflow-x:clip;
}

.son-chamada__interno{ max-width:34ch; margin-inline:auto; }

.son-sobrancelha{
	font-family:var(--fdado);
	font-size:clamp(9.5px,2.5vw,11px);
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--tinta-3);
	margin:0 0 1.1em;
}

/* ─────────────────────────────────────────────────────── botões e links ── */

.son-botao{
	display:inline-flex; align-items:center; justify-content:center; gap:.6em;
	min-height:52px;                 /* alvo de toque folgado no celular */
	padding:0 1.6em;
	background:var(--marca); color:var(--marca-tinta);
	border:0; border-radius:var(--raio);
	font-family:var(--fdisplay);
	font-size:clamp(17px,4.2vw,19px);
	font-weight:700; letter-spacing:.045em; text-transform:uppercase;
	cursor:pointer;
	transition:transform var(--t-rap), background var(--t-rap), box-shadow var(--t-rap);
}
.son-botao:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.5); }
.son-botao:active{ transform:translateY(0); }

.son-botao--fantasma{
	background:transparent; color:var(--tinta);
	box-shadow:inset 0 0 0 1px var(--linha);
}
.son-botao--fantasma:hover{ background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--tinta-3); }

.son-botao--claro{ background:var(--tinta); color:var(--breu); }

/* Alvo de toque: 44 px é o piso, e ele vem de `min-height`, não de padding.
   Padding a gente ajusta o tamanho da fonte e ele encolhe junto sem ninguém
   perceber — foi assim que 9 links deste tema pararam entre 31 e 39 px. */
.son-link{
	display:inline-flex; align-items:center;
	min-height:44px;
	white-space:nowrap;   /* "Ver tudo" quebrava em 2 linhas no celular */
	font-family:var(--fdado); font-size:11px;
	letter-spacing:.13em; text-transform:uppercase;
	color:var(--tinta-2);
	border-bottom:1px solid var(--linha);
	transition:color var(--t-rap), border-color var(--t-rap);
}
.son-link:hover{ color:var(--tinta); border-color:var(--tinta); }

/* ══════════════════════════════════════════════════════════════════ TOPO ══ */

.son-topo{
	position:sticky; top:0; z-index:60;
	background:var(--breu-topo);
	backdrop-filter:saturate(150%) blur(14px);
	-webkit-backdrop-filter:saturate(150%) blur(14px);
	border-bottom:1px solid var(--linha-2);
}
.son-topo__interno{
	display:flex; align-items:center; gap:16px;
	min-height:64px;
	padding-top:env(safe-area-inset-top);
}

.son-marca{ display:flex; align-items:center; min-height:44px; margin-right:auto; min-width:0; }
/* com logo o container é <div>, não <a>: `the_custom_logo()` já traz o próprio
   link, e envolvê-lo em outro produz <a> dentro de <a> — HTML inválido que o
   navegador desmonta. Foi o que derrubou o topo do site em 24/08. */
.son-marca--logo{ display:flex; align-items:center; }
.son-marca--logo a{ display:flex; align-items:center; }
.son-marca__nome{
	font-family:var(--fdisplay);
	font-size:clamp(20px,5.4vw,25px);
	font-weight:800; letter-spacing:.10em; text-transform:uppercase;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* ⟲ 04/09 — a logo do Renato entrou e ficou PEQUENA: 575×230 (proporção 2,5)
   presa em 38 px de altura virava 95 px de largura, e o letreiro não se lia.
   Os 38 px vinham da defesa de 24/08, quando o arquivo era um QUADRADO de
   1254 px que empurrou o topo para 782 px — teto apertado porque a proporção
   era imprevisível. Agora ela é deitada, como o padrão pede.
   🔑 O teto continua existindo (logo é do parceiro, e o próximo pode mandar
   qualquer coisa); só subiu para o que o topo comporta. */
.son-marca img{ max-height:46px; width:auto; }

/* Trava de segurança: vale MESMO se a imagem escapar do container.
   Em 24/08 uma logo de 1254 px empurrou o topo do site do Renato para 782 px
   de altura porque `the_custom_logo()` imprime o próprio <a> e o seletor de
   dentro parou de alcançá-la. Um seletor que não depende do pai não erra. */
.son-topo img.custom-logo{ max-height:46px; width:auto; object-fit:contain; }

/* 🔴 `> ul` e não `ul`: a regra larga alcançava também o SUBMENU de coleções,
   que virava uma fileira de 12 itens lado a lado — **1.388 px de largura**,
   estourando o documento em 941 px no desktop. E como `.son-submenu` é
   `position:absolute`, ele não empurrava nada: só esticava a barra de rolagem,
   sem nada visível fora do lugar.
   🔑 Seletor de descendente em componente que ANINHA é armadilha: o dia em
   que um nível novo aparece, ele herda o layout do nível de cima. */
.son-menu > ul{
	list-style:none; margin:0; padding:0;
	display:flex; align-items:center; gap:6px;
}
.son-menu ul{ list-style:none; margin:0; padding:0; }
.son-menu a{
	display:block; padding:12px 14px;
	font-family:var(--fdado); font-size:11px;
	letter-spacing:.13em; text-transform:uppercase;
	color:var(--tinta-2);
	border-radius:var(--raio);
	transition:color var(--t-rap), background var(--t-rap);
}
.son-menu a:hover, .son-menu .current-menu-item > a{ color:var(--tinta); background:rgba(255,255,255,.06); }

/* O item do construtor NÃO quebra linha.
   As coleções podem quebrar em duas ("Capas de álbuns", "Monstros do rock") e
   isso é normal num menu com muitos itens. Mas "Crie o seu" quebrava em TRÊS —
   e como o item ativo ganha fundo, a caixa alta desalinhava a barra inteira.
   Duas palavras curtas numa linha só custam menos espaço que três linhas. */
@media (min-width:861px){
	.son-menu li.son-menu__construtor > a{ white-space:nowrap; }
}

.son-topo__acoes{ display:flex; align-items:center; gap:6px; }

.son-carrinho{
	position:relative;
	display:flex; align-items:center; gap:8px;
	min-height:44px; min-width:44px;
	padding:0 12px;
	border-radius:var(--raio);
	color:var(--tinta-2);
	transition:color var(--t-rap), background var(--t-rap);
}
.son-carrinho:hover{ color:var(--tinta); background:rgba(255,255,255,.06); }
.son-carrinho--cheio{ color:var(--tinta); }
.son-carrinho__txt{
	display:none;
	font-family:var(--fdado); font-size:11px;
	letter-spacing:.13em; text-transform:uppercase;
}
.son-carrinho__n{
	position:absolute; top:4px; right:4px;
	min-width:17px; height:17px; padding:0 4px;
	display:grid; place-items:center;
	background:var(--marca); color:var(--marca-tinta);
	border-radius:9px;
	font-family:var(--fdado); font-size:9.5px; font-weight:600; line-height:1;
}

/* o burger — 2 traços que viram X */
.son-burger{
	width:44px; height:44px;
	display:grid; place-content:center; gap:6px;
	background:none; border:0; cursor:pointer; padding:0;
}
.son-burger span{
	display:block; width:22px; height:1.5px;
	background:var(--tinta);
	transition:transform var(--t-med), opacity var(--t-rap);
}
.son-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.75px) rotate(45deg); }
.son-burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.75px) rotate(-45deg); }

/* ── celular: o menu vira painel de tela cheia ─────────────────────────── */
@media (max-width:899px){
	.son-menu{
		position:fixed; inset:0; z-index:70;
		background:var(--breu);
		padding:calc(72px + env(safe-area-inset-top)) var(--gut) var(--gut);
		display:flex; flex-direction:column;
		/* 🔴 04/09 — RELATO DO RENATO: *"quando você clica nos dois pauzinhos,
		   a tela fica toda bugada."* Estava certo, e a regressão é MINHA: o
		   menu de coleções que entrou hoje trouxe 6 mães + 21 séries, e o
		   conteúdo passou a medir **1765 px** de altura. A caixa é
		   `position:fixed; inset:0` — ela tem a altura da TELA e pinta o fundo
		   só até ali; o que sobra **transborda para fora, sem fundo atrás**, e
		   aparece por cima da página. Era exatamente isso na captura.
		   ➜ O painel rola por dentro. `overscroll-behavior:contain` impede que
		   o gesto no fim da lista arraste a página atrás. */
		overflow-y:auto;
		overscroll-behavior:contain;
		-webkit-overflow-scrolling:touch;
		/* 🔴🔴 04/09 (2ª rodada) — A CAUSA REAL, e ontem eu errei o diagnóstico.
		   Relato do Renato: *"clico nos dois pauzinhos e não aparece opção
		   nenhuma; o menu some completamente."*
		   MEDIDO na árvore: o `.son-topo` tem **`backdrop-filter`**, e
		   `backdrop-filter` diferente de `none` **cria bloco-container para
		   descendente `position:fixed`**. ➜ o `inset:0` deste painel não era
		   resolvido contra a TELA e sim contra o HEADER: a caixa media
		   **360 × 92 px**, não 360 × 812.
		   🔑 Isso explica os DOIS relatos, e explica por que a correção de
		   ontem piorou: antes, os 1.765 px de conteúdo transbordavam à VISTA
		   de uma caixa de 92 px ("sobrepõe tudo e mistura as duas partes");
		   com o `overflow-y:auto` que eu acrescentei, o mesmo transbordo virou
		   rolagem DENTRO de 92 px — invisível ("não aparece nada").
		   ⚠️ Eu medi a ALTURA DO CONTEÚDO (1.765) e não medi a CAIXA (92).
		   `height` explícito é rede: se algum ancestral voltar a prender o
		   fixed, o painel ainda tem a altura da tela. A cura é o
		   `backdrop-filter:none` logo abaixo. */
		height:100svh;
		/* fechado: sai de cena sem `display:none` — assim a transição existe
		   e o leitor de tela some junto (visibility), que `opacity` não faz */
		opacity:0; visibility:hidden;
		transform:translateY(-10px);
		transition:opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
	}
	body.son-menu-aberto{ overflow:hidden; }
	body.son-menu-aberto .son-menu{ opacity:1; visibility:visible; transform:none; }

	/* ── A CURA do painel de 92 px (ver o bloco acima) ──────────────────────
	   Enquanto o menu está aberto, o topo abre mão do vidro fosco: sem
	   `backdrop-filter` ele deixa de ser bloco-container, e o `inset:0` do
	   painel volta a ser resolvido contra a TELA.
	   🔑 Não se perde nada: o efeito existe para o conteúdo aparecer por trás
	   do topo, e com um painel OPACO cobrindo a tela não há o que borrar. */
	body.son-menu-aberto .son-topo{
		backdrop-filter:none;
		-webkit-backdrop-filter:none;
	}
	/* ⚠️ Consequência de o painel finalmente cobrir a tela toda: a logo e o
	   botão X ficariam ATRÁS dele (o painel é z-index 70 e eles não tinham
	   z-index nenhum). O `padding-top` do painel já reservava esse espaço —
	   ele só nunca pôde ser usado, porque a caixa terminava em 92 px. */
	body.son-menu-aberto .son-marca,
	body.son-menu-aberto .son-topo__acoes{ position:relative; z-index:80; }

	.son-menu > ul{ flex-direction:column; align-items:stretch; gap:0; }
	.son-menu li{ border-bottom:1px solid var(--linha-2); }
	.son-menu a{
		padding:22px 0;
		font-family:var(--fdisplay);
		font-size:30px; font-weight:600; letter-spacing:.03em;
		color:var(--tinta);
		background:none !important;
	}
}

@media (min-width:900px){
	.son-topo__interno{ min-height:76px; gap:28px; }
	.son-burger{ display:none; }
	.son-carrinho__txt{ display:block; }
	.son-marca img, .son-topo img.custom-logo{ max-height:58px; }
	.son-topo__interno{ min-height:84px; }
}

/* ══════════════════════════════════════════════════════ A FAIXA DE CORES ══
   O elemento de assinatura. O Renato marca toda peça com 4 cores tiradas da
   própria arte; aqui a barra é extraída por código, é a única fonte de cor do
   site e ainda vira o CONTROLE do herói. Decoração que também é mecanismo.  */

.son-faixa{ display:flex; width:100%; height:100%; }
.son-faixa i{ flex:1 1 0; display:block; }

.son-faixa--poster{ width:4.4em; height:.3em; flex:0 0 auto; }

/* ══════════════════════════════════════════════════════════════ O QUADRO ══
   A moldura (PNG com o vão vazado) fica POR CIMA; a arte entra atrás, no
   retângulo medido. O excedente da arte é escondido pela própria moldura —
   por isso o vão gravado é a caixa que ENVOLVE os 4 cantos, com folga: falta
   de arte deixaria uma fresta clara, sobra não aparece. */

.son-quadro{
	position:relative;
	width:100%;
	aspect-ratio:1 / var(--moldura-prop, 1.375);
	filter:drop-shadow(0 26px 44px rgba(0,0,0,.55));
}
.son-quadro__vao{
	position:absolute;
	left:var(--vao-x,7%); top:var(--vao-y,7%);
	width:var(--vao-l,86%); height:var(--vao-a,86%);
	overflow:hidden;
	background:var(--papel);
	container-type:inline-size;      /* o pôster se dimensiona pelo vão */
	z-index:1;
}
.son-quadro__moldura{
	position:absolute; inset:0;
	width:100%; height:100%;
	object-fit:fill;
	z-index:2;
	pointer-events:none;
}

/* Plano B: sem o render, a moldura é desenhada. A loja nunca fica sem mockup
   por causa de um arquivo que faltou no deploy. */
.son-quadro--css{
	aspect-ratio:1 / 1.375;
	padding:6.2% 6.2% 6.2%;
	background:linear-gradient(150deg,#26262b,#121215 46%,#08080a);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), 0 26px 44px rgba(0,0,0,.55);
	filter:none;
}
.son-quadro--css[data-cor="branca"]{
	background:linear-gradient(150deg,#fafafa,#dcdcdd 46%,#b9b9bb);
	box-shadow:inset 0 0 0 1px rgba(0,0,0,.14), 0 26px 44px rgba(0,0,0,.55);
}
.son-quadro--css .son-quadro__vao{
	position:relative; inset:auto;
	width:100%; height:100%;
	box-shadow:0 0 0 1px rgba(0,0,0,.5);
}

/* ═════════════════════════════════════════════════════════════ O PÔSTER ══
   A anatomia lida das peças reais dele: título grande em cima à esquerda, a
   faixa em cima à direita, a ficha, a lista em 2 colunas, e a arte grande
   embaixo sangrando até a borda de baixo.

   Tudo mede em `em`, e o `em` vem da LARGURA DO VÃO (cqi). Assim o mesmo
   componente serve o card de 150 px e o herói de 600 px sem uma linha a mais
   — e sem o título do card sair ilegível, que é o erro clássico aqui. */

.son-poster{
	--pfs:12px;                      /* piso para navegador sem container query */
	font-size:var(--pfs);
	position:relative;
	width:100%; height:100%;
	display:flex; flex-direction:column;
	padding:1.15em 1.15em 0;
	background:var(--papel);
	color:#fff;
	overflow:hidden;
}
@supports (container-type:inline-size){
	.son-poster{ font-size:4.6cqi; }
}

.son-poster__cab{
	display:flex; align-items:flex-start; justify-content:space-between; gap:.8em;
}
.son-poster__id{ display:flex; flex-direction:column; min-width:0; }

.son-poster__nome{
	font-family:var(--fdisplay);
	font-size:2.55em; font-weight:800; line-height:.87;
	letter-spacing:-.005em;
	text-transform:uppercase;
	/* 3 linhas é o teto: acima disso o título come a área da arte */
	display:-webkit-box; -webkit-line-clamp:3; line-clamp:3;
	-webkit-box-orient:vertical; overflow:hidden;
	overflow-wrap:anywhere;
}
.son-poster__sub{
	margin-top:.5em;
	font-family:var(--fdado);
	font-size:.72em; letter-spacing:.18em; text-transform:uppercase;
	color:rgba(255,255,255,.62);
}

.son-poster__ficha{
	margin-top:1.5em; margin-left:auto;
	max-width:58%;
	display:flex; flex-direction:column; align-items:flex-end; gap:.35em;
	text-align:right;
}
.son-poster__fonte{
	font-family:var(--fcorpo);
	font-size:.92em; font-weight:500;
	padding-bottom:.4em;
	border-bottom:1px solid rgba(255,255,255,.28);
}
.son-poster__dado{ font-size:.74em; color:rgba(255,255,255,.74); }
.son-poster__dado i{
	font-style:normal; letter-spacing:.14em; text-transform:uppercase;
	color:rgba(255,255,255,.58); margin-right:.5em;
	font-family:var(--fdado); font-size:.82em;
}
.son-poster__ano{
	font-family:var(--fdado); font-size:.68em;
	letter-spacing:.12em; color:rgba(255,255,255,.5);
}

.son-poster__lista{
	list-style:none; margin:1.4em 0 0; padding:0;
	columns:2; column-gap:1.4em;
	font-size:.62em; line-height:1.75;
	color:rgba(255,255,255,.8);
}
.son-poster__lista li{ break-inside:avoid; }
.son-poster__lista i{
	font-style:normal; font-family:var(--fdado);
	color:rgba(255,255,255,.58); margin-right:.7em;
}

.son-poster__arte{
	margin-top:auto;
	margin-inline:-.0em;
	flex:0 0 57%;
	position:relative;
	overflow:hidden;
	background:rgba(0,0,0,.28);
}
.son-poster__arte img{
	width:100%; height:100%;
	object-fit:cover; object-position:center 42%;
}
.son-poster__vazio{
	position:absolute; inset:0;
	display:grid; place-content:center;
	font-family:var(--fdado); font-size:.7em;
	letter-spacing:.18em; text-transform:uppercase;
	color:rgba(255,255,255,.28);
}

/* card: sem ficha e sem lista, o título respira e a arte cresce */
.son-poster--compacto{ padding:1.05em 1.05em 0; }
.son-poster--compacto .son-poster__nome{ font-size:2.3em; -webkit-line-clamp:2; line-clamp:2; }
.son-poster--compacto .son-poster__arte{ flex:0 0 72%; margin-top:auto; }

/* ══════════════════════════════════════════════════════════════════ HERÓI ══
   A tese: a parede está no escuro e o pôster é a única coisa acesa. Não é
   clima — é a regra do site em forma de imagem. */

.son-heroi{
	position:relative;
	padding-block:clamp(28px,7vw,64px) clamp(24px,5vw,40px);
	overflow:hidden;
}
/* o halo: a luz que a arte joga na parede. A cor é a do pôster em foco, então
   a parede muda de cor junto com o quadro — sem uma linha de JS de cor. */
.son-heroi::before{
	content:""; position:absolute; z-index:0;
	left:50%; top:34%;
	width:min(150vw,1100px); aspect-ratio:1;
	transform:translate(-50%,-50%);
	background:radial-gradient(circle, var(--arte) 0%, transparent 62%);
	opacity:.13;
	filter:blur(40px);
	transition:background var(--t-len), opacity var(--t-len);
	pointer-events:none;
}
.son-heroi__grade{ position:relative; z-index:1; }

/* 🔴 04/09 — RELATO DO RENATO: *"onde está escrito 'como chega até você', a
   parte preta está por cima."* Estava certo, e a regra do CSS explica sozinha:
   o botão é ESTÁTICO e a `.son-heroi__luz` é `absolute` com `z-index:0` —
   dentro do mesmo contexto de empilhamento, **elemento posicionado fica acima
   de elemento em fluxo**, mesmo com z-index 0. E a luz tem `inset:-14% -16%`
   com um gradiente que fecha em `--breu` opaco: é o "bloco preto".
   ⚠️ Só aparece no CELULAR porque no desktop a grade tem duas colunas — texto
   de um lado, parede do outro, sem se tocarem. Ao empilhar, a parede passa
   por cima.
   🔑 E o `elementFromPoint` jurou que o botão estava limpo: a luz tem
   `pointer-events:none`, então ela cobre a VISTA sem aparecer no teste de
   clique. **Medir o que se clica não é medir o que se vê.** */
.son-heroi__texto{ text-align:center; position:relative; z-index:2; }
.son-heroi__titulo{
	font-family:var(--fdisplay);
	font-size:clamp(46px, 13.2vw, 96px);
	font-weight:800; line-height:.9;
	letter-spacing:-.012em;
	text-transform:uppercase;
	text-wrap:balance;
	margin-bottom:.34em;
}
.son-heroi__apoio{
	max-width:46ch; margin-inline:auto;
	color:var(--tinta-2);
	font-size:clamp(15px,3.9vw,17px);
}
.son-heroi__acoes{
	display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
	margin-top:1.9em;
}
.son-heroi__acoes .son-botao{ flex:1 1 auto; min-width:min(100%,240px); }

.son-heroi__parede{
	position:relative;
	margin-top:clamp(30px,8vw,56px);
	display:grid; place-items:center;
}

/* A PAREDE DE VERDADE — o vídeo da luz que raspa o reboco.
   Fica ATRÁS DO QUADRO e em lugar nenhum mais: vídeo por trás de texto é a
   forma mais fácil de estragar contraste, e o texto do herói é o que vende.
   Aqui ele responde a uma pergunta concreta — "em que parede isso vai ficar?"
   A vinheta funde as bordas com o fundo, então não existe "caixa de vídeo". */
.son-heroi__luz{
	position:absolute; z-index:0;
	inset:-14% -16%;
	overflow:hidden;
	pointer-events:none;
}
.son-heroi__luz::after{
	content:""; position:absolute; inset:0;
	background:radial-gradient(ellipse at 50% 46%, transparent 26%, var(--breu) 74%);
}
.son-heroi__luz > video, .son-heroi__luz > img{
	width:100%; height:100%;
	object-fit:cover;
	opacity:.5;
	filter:grayscale(1) contrast(1.08);
}
.son-heroi__pilha, .son-heroi__vazio{ position:relative; z-index:1; }
.son-heroi__pilha{
	position:relative;
	width:min(74vw, 340px);
	/* a pilha empilha quadros no mesmo lugar; a proporção vem do quadro */
	display:grid;
	touch-action:pan-y;              /* o arrasto lateral é nosso, o vertical é da página */
}
.son-heroi__quadro{
	grid-area:1/1;
	opacity:0; transform:scale(.94) translateY(10px);
	transition:opacity var(--t-med), transform var(--t-med);
	pointer-events:none;
}
.son-heroi__quadro.esta-ativo{
	opacity:1; transform:none;
	pointer-events:auto;
	position:relative; z-index:2;
}

.son-heroi__vazio{
	width:min(74vw,340px); aspect-ratio:1/1.375;
	display:grid; place-content:center; gap:.6em; text-align:center;
	border:1px dashed var(--linha);
	color:var(--tinta-3);
	padding:24px;
}
.son-heroi__vazio p{ font-family:var(--fdisplay); font-size:24px; color:var(--tinta-2); margin:0; }
.son-heroi__vazio span{ font-size:13px; }

/* ── o CONTROLE: a faixa vira interface ───────────────────────────────── */

.son-controle{
	position:relative; z-index:1;
	margin-top:clamp(22px,6vw,34px);
	display:flex; flex-direction:column; align-items:center; gap:14px;
}
.son-controle__dica{
	margin:0; display:flex; flex-direction:column; align-items:center; gap:4px;
	text-align:center; min-height:2.6em;
}
.son-controle__nome{
	font-family:var(--fdisplay);
	font-size:clamp(18px,4.6vw,21px);
	font-weight:600; letter-spacing:.04em; text-transform:uppercase;
}
.son-controle__acao{
	font-family:var(--fdado); font-size:10px;
	letter-spacing:.16em; text-transform:uppercase;
	color:var(--tinta-3);
}
.son-controle__trilho{
	display:flex; align-items:center; gap:10px;
	max-width:100%;
	padding:6px 2px 10px;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scrollbar-width:none;
	-ms-overflow-style:none;
}
.son-controle__trilho::-webkit-scrollbar{ display:none; }

.son-controle__item{
	flex:0 0 auto;
	scroll-snap-align:center;
	width:56px; height:44px;          /* 44 de altura = alvo de toque, mesmo com a faixa fina */
	display:grid; align-items:center;
	padding:0; background:none; border:0; cursor:pointer;
	opacity:.42;
	transition:opacity var(--t-rap), width var(--t-med);
}
.son-controle__item .son-faixa{ height:7px; }
.son-controle__item:hover{ opacity:.78; }
.son-controle__item.esta-ativo{ opacity:1; width:88px; }
.son-controle__item.esta-ativo .son-faixa{ height:11px; }

@media (min-width:760px){
	.son-heroi__pilha{ width:min(46vw,400px); }
	.son-heroi__vazio{ width:min(46vw,400px); }
}

@media (min-width:1040px){
	.son-heroi{ padding-block:clamp(40px,4vw,72px) 56px; }
	.son-heroi__grade{
		display:grid;
		grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
		align-items:center; gap:clamp(40px,5vw,88px);
	}
	.son-heroi__texto{ text-align:left; }
	.son-heroi__apoio{ margin-inline:0; }
	.son-heroi__acoes{ justify-content:flex-start; }
	.son-heroi__acoes .son-botao{ flex:0 0 auto; min-width:0; }
	.son-heroi__parede{ margin-top:0; }
	.son-heroi__pilha{ width:100%; max-width:430px; }
	.son-heroi::before{ left:72%; }
	.son-controle{ flex-direction:row; justify-content:space-between; align-items:flex-end; }
	.son-controle__dica{ align-items:flex-start; text-align:left; }
	.son-controle__trilho{ overflow:visible; }
}

/* ═══════════════════════════════════════════════════════ SEÇÕES / VITRINE ══ */

.son-secao__cabeca{
	display:flex; align-items:baseline; justify-content:space-between; gap:20px;
	margin-bottom:clamp(22px,5vw,34px);
	padding-bottom:16px;
	border-bottom:1px solid var(--linha-2);
}
.son-secao__titulo{
	font-family:var(--fdisplay);
	font-size:clamp(30px,7.6vw,52px);
	font-weight:700; letter-spacing:.005em; text-transform:uppercase;
}
.son-secao__titulo--centro{ text-align:center; margin-bottom:clamp(28px,6vw,48px); }

.son-vitrine{ padding-block:clamp(48px,10vw,104px); }

.son-grade{
	list-style:none; margin:0; padding:0;
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap:clamp(26px,5.5vw,44px) clamp(16px,3.4vw,30px);
}
.son-item{ position:relative; }
.son-item > a{ display:block; }
.son-item__quadro{
	transition:transform var(--t-med), filter var(--t-med);
	will-change:transform;
}
.son-item > a:hover .son-item__quadro{ transform:translateY(-8px); }
.son-item__pe{
	margin-top:16px;
	display:flex; align-items:baseline; justify-content:space-between; gap:12px;
	padding-top:12px;
	border-top:1px solid var(--linha-2);
}
.son-item__nome{
	font-family:var(--fdisplay);
	font-size:clamp(17px,4.2vw,20px);
	font-weight:600; letter-spacing:.02em; text-transform:uppercase;
	min-width:0;
}
.son-item__preco{
	font-family:var(--fdado); font-size:12px; white-space:nowrap;
	color:var(--tinta-2);
}
.son-item__preco del{ opacity:.45; margin-right:.4em; }
.son-item__preco ins{ text-decoration:none; color:var(--arte); }

/* a linha viva: o único traço colorido da interface, e ele é da arte */
.son-item > a::after{
	content:""; display:block;
	height:2px; width:0;
	background:var(--arte);
	margin-top:-1px;
	transition:width var(--t-med);
}
.son-item > a:hover::after{ width:100%; }

/* ══════════════════════════════════════════════════════════ O CARROSSEL ══
   Uma faixa de quadros que desliza. O encaixe é `scroll-snap` do navegador —
   nenhuma biblioteca. No celular o dedo é o controle; no desktop entram setas. */

.son-carrossel{ margin-bottom:clamp(30px,6vw,52px); }

.son-carrossel__cabeca{
	display:flex; align-items:center; justify-content:space-between; gap:16px;
	margin-bottom:16px;
	padding-bottom:12px;
	border-bottom:1px solid var(--linha-2);
}
.son-carrossel__titulo{
	font-family:var(--fdisplay);
	font-size:clamp(21px,5.2vw,30px);
	font-weight:700; letter-spacing:.03em; text-transform:uppercase;
	min-width:0;
}
.son-carrossel__acoes{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }

.son-carrossel__setas{ display:none; gap:6px; }
.son-seta-btn{
	width:38px; height:38px;
	display:grid; place-items:center;
	background:var(--breu-alto); color:var(--tinta-2);
	border:1px solid var(--linha-2); border-radius:50%;
	cursor:pointer;
	transition:color var(--t-rap), border-color var(--t-rap), opacity var(--t-rap);
}
.son-seta-btn:hover:not(:disabled){ color:var(--tinta); border-color:var(--linha); }
/* seta que nao faz nada quando clicada e pior que seta nenhuma */
.son-seta-btn:disabled{ opacity:.28; cursor:default; }
.son-carrossel.sem-rolagem .son-carrossel__setas{ display:none !important; }

.son-carrossel__trilho{
	list-style:none; margin:0; padding:0 0 6px;
	display:flex; gap:16px;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scrollbar-width:none; -ms-overflow-style:none;
	/* sangra ate a borda no celular: faixa que "encosta" na lateral avisa que
	   continua, coisa que uma faixa com margem dos dois lados nao faz */
	margin-inline:calc(var(--gut) * -1);
	padding-inline:var(--gut);
	scroll-padding-inline:var(--gut);
}
.son-carrossel__trilho::-webkit-scrollbar{ display:none; }
.son-carrossel__trilho:focus-visible{ outline:2px solid var(--marca); outline-offset:4px; }

.son-carrossel__item{
	flex:0 0 auto;
	width:clamp(168px, 46vw, 236px);
	scroll-snap-align:start;
}
.son-carrossel__item .son-quadro{ transition:transform var(--t-med); }
.son-carrossel__item a:hover .son-quadro{ transform:translateY(-6px); }
.son-carrossel__nome{
	margin-top:14px;
	font-family:var(--fdisplay);
	font-size:16px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
	/* 2 linhas no maximo: titulo comprido nao pode empurrar o preco para baixo
	   e desalinhar os cartoes entre si */
	display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
	-webkit-box-orient:vertical; overflow:hidden;
}
.son-carrossel__preco{
	display:block; margin-top:4px;
	font-family:var(--fdado); font-size:11.5px; color:var(--tinta-2);
}
.son-carrossel__preco del{ opacity:.45; margin-right:.35em; }
.son-carrossel__preco ins{ text-decoration:none; color:var(--arte); }

@media (min-width:900px){
	.son-carrossel__setas{ display:flex; }
	.son-carrossel__trilho{ margin-inline:0; padding-inline:0; scroll-padding-inline:0; }
}

/* ══════════════════════════════════════════════════ COLEÇÕES / CATEGORIAS ══
   A navegação por categoria — o que faltava para 48 pôsteres em 15 coleções
   serem alcançáveis. Tudo aqui é montado da taxonomia, então categoria nova
   entra sozinha e categoria vazia some sozinha. */

.son-universo{ padding-block:clamp(48px,10vw,104px); border-top:1px solid var(--linha-2); }

.son-colecoes-grade{
	list-style:none; margin:0; padding:0;
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap:clamp(16px,3vw,26px);
}
.son-colecao > a{
	display:block;
	background:var(--breu-alto);
	border:1px solid var(--linha-2);
	border-radius:var(--raio);
	overflow:hidden;
	transition:border-color var(--t-med), transform var(--t-med);
}
.son-colecao > a:hover{ border-color:var(--linha); transform:translateY(-4px); }

/* o mosaico: 4 artes da própria coleção. É a promessa do que tem lá dentro —
   contagem é rótulo, imagem é argumento */
.son-colecao__mosaico{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1px;
	background:var(--linha-2);
	aspect-ratio:16/11;
}
.son-colecao__mosaico span{ display:block; overflow:hidden; background:var(--breu); }
.son-colecao__mosaico img{
	width:100%; height:100%;
	object-fit:cover;
	transition:transform var(--t-len);
}
.son-colecao > a:hover .son-colecao__mosaico img{ transform:scale(1.05); }
/* coleção com 1 ou 2 peças não pode virar buraco: o que houver ocupa a linha */
.son-colecao__mosaico span:only-child{ grid-column:1/-1; }
.son-colecao__mosaico span:first-child:nth-last-child(2),
.son-colecao__mosaico span:first-child:nth-last-child(2) ~ span{ grid-row:span 2; }

.son-colecao__pe{
	display:flex; align-items:baseline; justify-content:space-between; gap:12px;
	padding:16px 18px;
}
.son-colecao__pe h3{
	font-family:var(--fdisplay);
	font-size:clamp(19px,4.6vw,23px);
	font-weight:700; letter-spacing:.03em; text-transform:uppercase;
	min-width:0;
}
.son-colecao__pe span{
	font-family:var(--fdado); font-size:11px;
	color:var(--tinta-3); white-space:nowrap;
}

/* ── os atalhos de 2º nível (as séries) ─────────────────────────────────── */

.son-atalhos{ margin-top:clamp(22px,4vw,32px); }
.son-atalhos__rotulo{
	display:block; margin-bottom:12px;
	font-family:var(--fdado); font-size:10px;
	letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-3);
}
.son-atalhos__trilho{
	display:flex; flex-wrap:wrap; gap:8px;
}

/* ── o "chip" de categoria: serve no menu, na loja e nos atalhos ─────────── */

.son-chip{
	display:inline-flex; align-items:center; gap:8px;
	min-height:44px;                       /* alvo de toque, sempre */
	padding:0 16px;
	background:var(--breu-alto);
	border:1px solid var(--linha-2);
	border-radius:999px;
	font-family:var(--fdisplay);
	font-size:15px; font-weight:600;
	letter-spacing:.045em; text-transform:uppercase;
	color:var(--tinta-2);
	white-space:nowrap;
	transition:color var(--t-rap), border-color var(--t-rap), background var(--t-rap);
}
.son-chip i{
	font-style:normal;
	font-family:var(--fdado); font-size:10px;
	color:var(--tinta-3);
}
.son-chip:hover{ color:var(--tinta); border-color:var(--linha); }
.son-chip.esta-ativo{
	background:var(--marca); color:var(--marca-tinta);
	border-color:var(--marca);
}
.son-chip.esta-ativo i{ color:var(--marca-tinta); opacity:.6; }
.son-chip--fino{ min-height:40px; padding:0 14px; font-size:13.5px; }

/* ── a faixa de coleções no topo da vitrine ─────────────────────────────── */

.son-colecoes{
	max-width:var(--larg); margin:0 auto clamp(26px,5vw,40px);
	padding-inline:var(--gut);
	display:grid; gap:10px;
}
.son-colecoes__linha{
	display:flex; gap:8px;
	overflow-x:auto;
	padding-bottom:4px;
	scrollbar-width:none; -ms-overflow-style:none;
	/* o desvanecer na direita avisa que há mais coisa fora da tela — num
	   trilho sem barra de rolagem, nada mais conta isso ao visitante */
	-webkit-mask-image:linear-gradient(to right, #000 calc(100% - 40px), transparent);
	mask-image:linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.son-colecoes__linha::-webkit-scrollbar{ display:none; }
.son-colecoes__linha--filhos{ padding-top:2px; }

@media (min-width:900px){
	.son-colecoes__linha{
		flex-wrap:wrap; overflow:visible;
		-webkit-mask-image:none; mask-image:none;
	}
}

/* ── o cabeçalho da loja e do arquivo de categoria ──────────────────────── */

.son-loja__cabeca{ padding-block:clamp(30px,6vw,56px) clamp(18px,3vw,26px); }
.son-loja__trilha{ margin-bottom:.7em; }
.son-loja__trilha a{ color:var(--tinta-3); border-bottom:1px solid var(--linha-2); }
.son-loja__trilha a:hover{ color:var(--tinta); }
.son-loja__titulo{
	font-family:var(--fdisplay);
	font-size:clamp(36px,9.4vw,68px);
	font-weight:800; letter-spacing:-.005em; text-transform:uppercase;
	text-wrap:balance;
}
.son-loja__conta{
	margin-top:.6em;
	font-family:var(--fdado); font-size:12px;
	letter-spacing:.06em; color:var(--tinta-3);
}
.son-loja__conta strong{ color:var(--tinta); font-weight:400; }
.son-loja__texto{ margin-top:1em; max-width:60ch; color:var(--tinta-2); }

/* ── o submenu de coleções no topo ──────────────────────────────────────── */

.son-menu .son-seta{
	display:inline-block; width:6px; height:6px; margin-left:7px;
	border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
	transform:translateY(-2px) rotate(45deg);
	opacity:.5;
}
.son-submenu{
	list-style:none; margin:0; padding:0;
	display:block;            /* explicito: nunca herdar a fileira do menu de cima */
}
.son-submenu i{
	font-style:normal; font-family:var(--fdado); font-size:9.5px;
	color:var(--tinta-3); margin-left:8px;
}

@media (min-width:900px){
	.son-menu li.son-tem-filhos{ position:relative; }
	.son-submenu{
		position:absolute; top:100%; left:0; z-index:70;
		min-width:230px; max-height:min(70vh, 520px);
		overflow-y:auto;
		padding:8px;
		background:var(--breu-alto);
		border:1px solid var(--linha);
		border-radius:var(--raio);
		box-shadow:0 22px 48px rgba(0,0,0,.6);
		/* fechado sem `display:none`: assim a transição existe e o leitor de
		   tela some junto, que `opacity` sozinho não faz */
		opacity:0; visibility:hidden; transform:translateY(-6px);
		transition:opacity var(--t-rap), transform var(--t-rap), visibility var(--t-rap);
	}
	.son-menu li.son-tem-filhos:hover > .son-submenu,
	.son-menu li.son-tem-filhos:focus-within > .son-submenu{
		opacity:1; visibility:visible; transform:none;
	}
	.son-submenu a{
		display:flex; align-items:center; justify-content:space-between;
		padding:10px 12px; font-size:11px;
	}
}

/* Enquanto uma pose composta está à mostra, o vão deixa de ser "a janela da
   moldura" e passa a ser a moldura inteira: sem recorte, sem fundo de papel. */
/* O composto JÁ traz a moldura desenhada dentro do arquivo: deixar a moldura
   sobreposta do tema resultaria em moldura frontal por cima de mockup em ângulo,
   que foi exatamente o defeito que ele viu. O JS já marca `hidden`; esta regra é
   a segunda tranca, para não depender de um atributo só. */
.son-quadro--composto .son-quadro__moldura{ display:none !important; }
.son-quadro--composto{ aspect-ratio:auto; }
.son-quadro--composto .son-quadro__vao{
	position:static; width:100%; height:auto;
	overflow:visible; background:none; box-shadow:none;
}
.son-quadro--composto .son-quadro__vao img{ width:100%; height:auto; object-fit:contain; }

/* ── A TIRA DE POSES do produto (04/09) ──────────────────────────────────
   Miniaturas dos mesmos renders que o quadro grande usa. Fundo transparente
   (o mockup é RGBA), então o que se vê é a moldura recortada — e é por isso
   que a miniatura precisa de fundo próprio: sem ele, moldura preta sobre
   página preta some, que é a lição da parede do construtor. */
.son-poses{
	display:flex; gap:10px; margin-top:14px;
	overflow-x:auto; scroll-snap-type:x proximity;
	padding-bottom:4px;
	/* 🔴 04/09 — `min-width:0` NÃO É ENFEITE, é o que impede a tira de estourar
	   a coluna no celular. Ela é filha de `.son-produto__arte`, que é ITEM DE
	   GRID, e item de grid nasce com `min-width:auto`: o mínimo dele é o
	   min-content do conteúdo. Os 6 botões de 88 px + 5 vãos de 10 dão
	   **578 px** — e foi exatamente essa a largura que a coluna assumiu num
	   viewport de 375, cortando o pôster pela metade.
	   🔑 `overflow-x:auto` sozinho não resolve: ele permite rolar, mas não
	   autoriza a caixa a ficar menor que o conteúdo. Quem autoriza é isto. */
	min-width:0; max-width:100%;
}
/* ⟲ 04/09 — sem o rótulo embaixo (pedido dele), a miniatura CRESCEU.
   Os 88 px vinham de dividir o espaço com a legenda; sem ela a mesma faixa
   comporta 108, e isso ataca o outro relato dele — *"parece o mockup frontal
   em todas"*. Em 88 px as poses de ângulo realmente lem quase iguais: o que
   as distingue é a perspectiva, e perspectiva precisa de tamanho para
   aparecer. 🔑 Legenda que repete o que a imagem mostra ocupa o espaço que
   faria a imagem se explicar sozinha. */
.son-poses__item{
	flex:none; width:108px; padding:0; cursor:pointer;
	background:#1a1a20; border:1px solid var(--linha); border-radius:var(--raio);
	scroll-snap-align:start;
	display:block; overflow:hidden;
	transition:border-color var(--t-rap);
}
/* A tira ROLA: 6 miniaturas de 108 px dão 698, e a coluna do pôster tem ~554 no
   desktop (menos ainda no celular). Rolar aqui é o comportamento certo —
   encolher a miniatura para caber traria de volta o "parecem todas iguais".
   🔑 O que NÃO pode é a rolagem ser INVISÍVEL: o navegador esconde a barra até
   o mouse chegar, e aí a 6ª pose simplesmente não existe para quem só olha. */
.son-poses{ scrollbar-width:thin; scrollbar-color:var(--tinta-3) transparent; }
.son-poses::-webkit-scrollbar{ height:6px; }
.son-poses::-webkit-scrollbar-track{ background:transparent; }
.son-poses::-webkit-scrollbar-thumb{ background:var(--tinta-3); border-radius:3px; }
.son-poses:hover::-webkit-scrollbar-thumb{ background:var(--tinta); }

.son-poses__item:hover{ border-color:var(--tinta-3); }
.son-poses__item[aria-pressed="true"]{ border-color:var(--tinta); }
.son-poses__item img{ width:100%; height:auto; display:block; }

/* ── COLEÇÕES: um item só, com as 6 coleções em colunas (04/09) ──────────
   Ele pediu para encurtar a barra, que já cobria o nome da loja. As mães
   deixaram de ocupar um lugar cada e viraram COLUNAS de um submenu só.
   🔑 A barra passou a ter tamanho fixo: como o menu vem da taxonomia, antes ela
   crescia a cada coleção nova que o parceiro criasse. */
.son-mega__grupo{ margin-bottom:14px; }
.son-mega__grupo:last-child{ margin-bottom:0; }
.son-mega__grupo ul{ list-style:none; margin:0; padding:0; }
.son-mega__mae{
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	font-family:var(--fdisplay); text-transform:uppercase; letter-spacing:.06em;
	color:var(--tinta);
}
.son-mega__mae.esta-aqui{ color:var(--tinta); }
.son-mega i{
	font-style:normal; font-family:var(--fdado); font-size:11px;
	color:var(--tinta-3); margin-left:8px;
}

@media (min-width:900px){
	/* auto-fit e não um número fixo de colunas: coleção nova reflui sozinha,
	   e a régua é a largura da tela, não um palpite meu */
	.son-mega{
		display:grid;
		grid-template-columns:repeat(auto-fit, minmax(178px, 1fr));
		gap:6px 22px;
		align-items:start;
		width:max-content; max-width:min(86vw, 780px);
		padding:16px 18px;
		/* 🔑 ancorado à DIREITA, não à esquerda: o item "Coleções" fica no fim da
		   barra, e um painel de 780 px começando nele sai da tela — foi o que a
		   captura mostrou, com metade dos nomes cortados na borda. Crescendo para
		   a esquerda há sempre espaço, porque à esquerda está a página inteira. */
		left:auto; right:0;
	}
	.son-mega__grupo{ margin-bottom:4px; break-inside:avoid; }
	.son-mega__mae{ font-size:14px; padding:6px 0 4px; border-bottom:1px solid var(--linha-2); }
	.son-menu .son-mega a{ padding:7px 0; font-size:11px; }
	.son-menu .son-mega .son-mega__mae{ font-size:14px; }
}

/* no celular o submenu é sempre aberto: passar o mouse não existe, e um
   acordeão a mais é um toque a mais para chegar no mesmo lugar */
@media (max-width:899px){
	.son-submenu{
		margin:0 0 10px; padding:0 0 0 14px;
		border-left:1px solid var(--linha-2);
	}
	/* 🔑 No celular o menu mostra só as 6 COLEÇÕES — as 21 séries ficam de
	   fora. Com elas eram 30 links e 1.765 px de rolagem para escolher um
	   pôster; sem elas são 9 itens que cabem na tela.
	   ⟲ Isto revê a decisão de 27/08 ("no celular o submenu é sempre aberto,
	   porque um acordeão a mais é um toque a mais"). Ela valia para 5 itens;
	   com 21, a lista deixou de ser navegação e virou rolagem.
	   ➜ Nada se perde: tocar na coleção abre a página dela, e lá a faixa de
	   categorias já lista as séries. Continua a 2 toques. */
	.son-mega__grupo ul{ display:none; }
	.son-mega__mae{ font-size:16px; padding:14px 0; border-bottom:1px solid var(--linha-2); }
	.son-mega__grupo{ margin-bottom:0; }
	.son-menu .son-submenu a{
		font-family:var(--fcorpo);
		font-size:16px; font-weight:400; letter-spacing:0;
		text-transform:none; color:var(--tinta-2);
		padding:12px 0;
		display:flex; justify-content:space-between; align-items:center;
	}
	.son-menu .son-seta{ display:none; }
}

/* ═══════════════════════════════════════════════════════════ A BANCADA ══
   Foto de largura total com o texto por cima. A imagem é preto e branco de
   propósito — a regra do tema é que a única cor da tela venha da arte. */

.son-bancada{
	position:relative;
	min-height:min(78svh, 560px);
	display:grid; align-items:end;
	overflow:hidden;
	border-top:1px solid var(--linha-2);
}
.son-bancada__foto{
	position:absolute; inset:0;
	width:100%; height:100%;
	object-fit:cover; object-position:center 40%;
	opacity:.5;
}
/* o degradê é o que garante contraste do texto sobre QUALQUER parte da foto —
   sem ele o texto depende do que a imagem tem embaixo, e isso muda por foto */
.son-bancada::after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(to top, var(--breu) 4%, rgba(8,8,10,.72) 46%, rgba(8,8,10,.25) 100%);
}
.son-bancada__texto{
	position:relative; z-index:1;
	padding-block:clamp(36px,7vw,64px);
	max-width:min(100%, 640px);
}
.son-bancada__texto h2{
	font-family:var(--fdisplay);
	font-size:clamp(30px,7.6vw,54px);
	font-weight:800; letter-spacing:-.005em; text-transform:uppercase;
	margin-bottom:.4em; text-wrap:balance;
}
.son-bancada__texto p:last-child{ color:var(--tinta-2); max-width:46ch; }

/* ═════════════════════════════════════════════════════════════ PROCESSO ══ */

.son-processo{
	padding-block:clamp(48px,10vw,104px);
	border-top:1px solid var(--linha-2);
	background:var(--breu-alto);
}
.son-processo__lista{
	list-style:none; margin:0; padding:0;
	display:grid; gap:clamp(28px,5vw,40px);
}
.son-passo{
	padding-top:20px;
	border-top:1px solid var(--linha);
}
.son-passo__n{
	display:block;
	font-family:var(--fdado); font-size:11px;
	letter-spacing:.2em; color:var(--tinta-3);
	margin-bottom:14px;
}
.son-passo h3{
	font-family:var(--fdisplay);
	font-size:clamp(23px,5.6vw,29px);
	font-weight:700; letter-spacing:.03em; text-transform:uppercase;
	margin-bottom:.45em;
}
.son-passo p{ color:var(--tinta-2); font-size:15px; margin:0; }

@media (min-width:760px){
	.son-processo__lista{ grid-template-columns:repeat(3,1fr); }
}

/* ══════════════════════════════════════════════════════════════ CHAMADA ══ */

.son-chamada{
	position:relative;
	padding-block:clamp(56px,12vw,120px);
	border-top:1px solid var(--linha-2);
	text-align:center;
	overflow:hidden;
}
.son-chamada__foto{
	position:absolute; inset:0;
	width:100%; height:100%;
	object-fit:cover;
	opacity:.34;
}
.son-chamada--foto::after{
	content:""; position:absolute; inset:0;
	background:radial-gradient(ellipse at center, rgba(8,8,10,.55) 30%, var(--breu) 82%);
}
.son-chamada__interno{ position:relative; z-index:1; }
.son-chamada h2{
	font-family:var(--fdisplay);
	font-size:clamp(34px,9.4vw,72px);
	font-weight:800; letter-spacing:-.01em; text-transform:uppercase;
	margin-bottom:.5em;
	text-wrap:balance;
}

/* ══════════════════════════════════════════════════════════════ WOOCOMMERCE ══ */

/* 🔴 A largura e a margem ficam AQUI, no próprio `.son-woo`.
   A 1ª versão punha em `.son-woo > .woocommerce` — e `woocommerce_content()`
   NÃO imprime esse wrapper na página de produto. O seletor não casava com
   nada e o conteúdo encostava na borda da janela (medido: x = 0).
   ➜ Regra de layout nunca depende de um wrapper que o plugin talvez imprima. */
.son-woo{
	width:100%; max-width:var(--larg);
	margin-inline:auto;
	padding:clamp(28px,6vw,56px) var(--gut) clamp(48px,10vw,96px);
}

/* Classe padrão do WordPress: some da tela, continua no leitor de tela.
   🔴 Faltava, e o estrago era visível: `get_price_html()` do WooCommerce
   embute um `<span class="screen-reader-text">Faixa de preço: …</span>`, que
   sem esta regra aparecia como texto duplicado e cortado embaixo de cada
   pôster. Tema que não define `.screen-reader-text` sempre acaba mostrando
   algum texto de acessibilidade de plugin no lugar errado. */
.screen-reader-text, .sr-only{
	position:absolute !important;
	width:1px; height:1px;
	margin:-1px; padding:0; border:0;
	overflow:hidden; clip-path:inset(50%);
	white-space:nowrap;
}
.screen-reader-text:focus{
	position:static !important;
	width:auto; height:auto; margin:0;
	clip-path:none; white-space:normal;
}

.woocommerce-products-header{ max-width:var(--larg); margin:0 auto clamp(24px,5vw,40px); padding-inline:var(--gut); }
.woocommerce-products-header__title{
	font-family:var(--fdisplay);
	font-size:clamp(34px,9vw,64px);
	font-weight:800; text-transform:uppercase; letter-spacing:.005em;
}

/* a vitrine do Woo herda a mesma grade da home */
.woocommerce ul.products{
	list-style:none; margin:0; padding:0;
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap:clamp(26px,5.5vw,44px) clamp(16px,3.4vw,30px);
}
.woocommerce ul.products::before, .woocommerce ul.products::after{ content:none; }
.woocommerce ul.products li.product{ width:auto !important; margin:0 !important; float:none !important; text-align:left; }
.woocommerce ul.products li.product a img{ margin:0; box-shadow:none; }

.son-card__quadro{ transition:transform var(--t-med); }
.woocommerce ul.products li.product:hover .son-card__quadro{ transform:translateY(-8px); }
.son-card__legenda{
	margin-top:16px; padding-top:12px;
	border-top:1px solid var(--linha-2);
	display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
}
.son-card__nome{
	font-family:var(--fdisplay);
	font-size:clamp(17px,4.2vw,20px);
	font-weight:600; letter-spacing:.02em; text-transform:uppercase;
	flex:1 1 auto; min-width:0; margin:0;
}
.son-card__cat{
	flex:0 0 100%; order:3;
	font-family:var(--fdado); font-size:10px;
	letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3);
}
.son-card__preco{ font-family:var(--fdado); font-size:12px; color:var(--tinta-2); white-space:nowrap; }
.son-card__preco del{ opacity:.45; margin-right:.35em; }
.son-card__preco ins{ text-decoration:none; color:var(--arte); }

/* ── a página do produto ──────────────────────────────────────────────── */

.woocommerce div.product{ display:grid; gap:clamp(28px,6vw,56px); }
.son-produto__arte{ position:relative; min-width:0; }
.woocommerce div.product .product_title{
	font-family:var(--fdisplay);
	font-size:clamp(32px,8.4vw,58px);
	font-weight:800; line-height:.94; text-transform:uppercase;
	letter-spacing:-.005em;
	margin-bottom:.28em;
	text-wrap:balance;
}
.woocommerce div.product p.price, .woocommerce div.product span.price{
	font-family:var(--fdado);
	font-size:clamp(19px,4.6vw,23px);
	color:var(--tinta);
	margin:0 0 1.1em;
}
.woocommerce div.product p.price del{ opacity:.42; font-size:.72em; margin-right:.5em; }
.woocommerce div.product p.price ins{ text-decoration:none; color:var(--arte); }

.woocommerce div.product .woocommerce-product-details__short-description{
	color:var(--tinta-2); max-width:52ch; margin-bottom:1.6em;
}

.son-aviso{
	padding:14px 16px;
	background:rgba(255,255,255,.05);
	border-left:2px solid var(--arte);
	font-size:14px; color:var(--tinta-2);
	margin-bottom:1.4em;
}

/* variações: os seletores de tamanho e cor. O padrão do Woo é uma tabela com
   <select>; num celular isso vira 2 menus nativos e nenhuma noção de opção.
   Aqui a tabela vira bloco e os campos ficam grandes. */
/* A tabela de variações vira blocos. O espaçamento fica no TBODY, não na
   tabela: com `tbody` em `display:block`, o `gap` da tabela tem um filho só e
   não separa nada — o afastamento que aparecia vinha de margem de navegador,
   somada à margem da própria tabela. Deu ~90 px de vão morto entre o seletor
   de cor e o botão de comprar. ➜ espaçamento explícito, margem zero. */
.woocommerce div.product form.cart .variations{
	width:100%; margin:0; border:0; display:block;
}
.woocommerce div.product form.cart .variations tbody{
	display:grid; gap:18px;
}
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th{ display:block; width:100%; padding:0; border:0; text-align:left; }
.woocommerce div.product form.cart .variations label{
	display:block; margin-bottom:9px;
	font-family:var(--fdado); font-size:10.5px;
	letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-3);
}
.woocommerce div.product form.cart .variations select{
	width:100%; min-height:52px;
	padding:0 42px 0 16px;
	background:var(--breu-alto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center/12px;
	border:1px solid var(--linha);
	border-radius:var(--raio);
	color:var(--tinta);
	font-family:var(--fcorpo); font-size:16px;  /* 16px = o iOS não dá zoom ao focar */
	appearance:none; -webkit-appearance:none;
}
.woocommerce div.product form.cart .variations select:focus{ border-color:var(--tinta-3); outline:none; }
.woocommerce div.product form.cart .reset_variations{
	display:inline-block; margin-top:10px;
	font-family:var(--fdado); font-size:10px; letter-spacing:.14em;
	text-transform:uppercase; color:var(--tinta-3);
}

.woocommerce div.product form.cart{ display:grid; gap:16px; }
.woocommerce div.product form.cart .quantity{ display:flex; align-items:center; }
.woocommerce .quantity input.qty{
	width:88px; min-height:52px;
	padding:0 8px; text-align:center;
	background:var(--breu-alto);
	border:1px solid var(--linha); border-radius:var(--raio);
	color:var(--tinta); font-family:var(--fdado); font-size:16px;
}
.woocommerce div.product form.cart .single_add_to_cart_button{
	display:inline-flex; align-items:center; justify-content:center;
	min-height:56px; padding:0 2em; width:100%;
	background:var(--marca); color:var(--marca-tinta);
	border:0; border-radius:var(--raio);
	font-family:var(--fdisplay); font-size:19px; font-weight:700;
	letter-spacing:.05em; text-transform:uppercase; cursor:pointer;
	transition:transform var(--t-rap), box-shadow var(--t-rap);
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.5); }
.woocommerce div.product form.cart .single_add_to_cart_button.disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.woocommerce div.product .woocommerce-variation-price{ margin-bottom:6px; }

/* ── o que os PLUGINS injetam na página do produto ────────────────────────
   Um tema escuro não pode supor que só existe a marcação do WooCommerce. O
   simulador de frete do Melhor Envio entra com fundo `rgb(242,242,242)` e
   HERDA a cor do texto do tema (branco) — resultado medido: caixa quase branca
   com letra branca dentro, ilegível no celular.

   🔑 O seletor precisa do ID porque é por ID que o plugin pinta o fundo; e o
   `!important` no fundo é o único jeito de vencer sem depender de quem carrega
   por último. É remédio, não cura — mas cobre plugin que eu não escrevo. */

#woocommerce-correios-calculo-de-frete-na-pagina-do-produto,
.containerCalculator{
	background:var(--breu-alto) !important;
	border:1px solid var(--linha);
	border-radius:var(--raio);
	color:var(--tinta-2);
	padding:16px;
}
.containerCalculator p, .containerCalculator label, .containerCalculator span{ color:var(--tinta-2); }
.containerCalculator input[type="text"], .containerCalculator input[type="tel"], .containerCalculator input{
	width:100%; min-height:48px;
	padding:0 14px;
	background:var(--breu); color:var(--tinta);
	border:1px solid var(--linha); border-radius:var(--raio);
	font-family:var(--fdado); font-size:16px;   /* 16px trava o zoom do iOS */
}
.containerCalculator input::placeholder{ color:var(--tinta-3); }
.containerCalculator button, .containerCalculator .button{
	min-height:48px; background:var(--marca); color:var(--marca-tinta);
	border:0; border-radius:var(--raio);
	font-family:var(--fdisplay); text-transform:uppercase; letter-spacing:.05em;
}
.containerCalculator table{ width:100%; color:var(--tinta-2); font-size:14px; }
.containerCalculator table td{ padding:8px 4px; border-bottom:1px solid var(--linha-2); }

/* O bloco da variação nasce vazio e segurava ~90 px de vão morto entre o
   seletor de cor e o botão de comprar. Vazio não ocupa espaço. */
.woocommerce div.product .single_variation_wrap{ display:grid; gap:14px; }
.woocommerce div.product .woocommerce-variation{ margin:0; }
.woocommerce div.product .woocommerce-variation:empty{ display:none; }
.woocommerce div.product .woocommerce-variation-add-to-cart{ display:grid; gap:14px; }

.son-selos{
	list-style:none; margin:clamp(28px,6vw,44px) 0 0; padding:0;
	display:grid; gap:0;
	border-top:1px solid var(--linha-2);
}
.son-selos li{
	display:grid; gap:5px;
	padding:18px 0;
	border-bottom:1px solid var(--linha-2);
}
.son-selos strong{
	font-family:var(--fdado); font-size:10.5px;
	letter-spacing:.16em; text-transform:uppercase; color:var(--tinta);
}
.son-selos span{ font-size:14px; color:var(--tinta-2); }

@media (min-width:900px){
	.woocommerce div.product{
		grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
		align-items:start;
	}
	/* 🔴 `position:sticky` só gruda se o elemento CABE na tela. O quadro tem
	   proporção 1:1,375 — numa coluna de 680 px ele dava 933 px de altura numa
	   janela de 900, e aí o sticky não segura: ele sobe e some, que foi o
	   "quebrando o layout ao rolar". ➜ a altura é limitada PELA TELA, e a
	   largura vem da proporção (`width:auto`), então nada distorce. */
	.son-produto__arte{ position:sticky; top:88px; }
	.son-quadro--produto{
		height:min( calc(100svh - 132px), 660px );
		width:auto;
		max-width:100%;
		margin-inline:auto;
	}
	.son-selos{ grid-column:1/-1; grid-template-columns:repeat(3,1fr); gap:0 32px; border-bottom:1px solid var(--linha-2); }
	.son-selos li{ border-bottom:0; }
	.woocommerce div.product .related, .woocommerce div.product .up-sells{ grid-column:1/-1; }
}

/* relacionados */
.woocommerce .related > h2, .woocommerce .up-sells > h2{
	font-family:var(--fdisplay);
	font-size:clamp(26px,6.4vw,40px);
	font-weight:700; text-transform:uppercase; letter-spacing:.02em;
	margin:clamp(40px,8vw,72px) 0 clamp(20px,4vw,30px);
	padding-bottom:14px; border-bottom:1px solid var(--linha-2);
}

/* ── carrinho, checkout e conta ───────────────────────────────────────── */

.woocommerce table.shop_table{
	width:100%; border-collapse:collapse;
	border:0; margin-bottom:24px;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td{
	padding:16px 10px; border-bottom:1px solid var(--linha-2); text-align:left;
	vertical-align:middle;
}
.woocommerce table.shop_table th{
	font-family:var(--fdado); font-size:10px;
	letter-spacing:.15em; text-transform:uppercase; color:var(--tinta-3);
	font-weight:400;
}
.woocommerce table.shop_table img{ width:64px; border-radius:var(--raio); }

/* celular: a tabela do carrinho vira lista. Tabela de 6 colunas em 360 px
   ou estoura a largura ou fica ilegível — as duas coisas custam venda. */
@media (max-width:719px){
	.woocommerce table.shop_table_responsive thead{ display:none; }
	.woocommerce table.shop_table_responsive tr{
		display:grid; grid-template-columns:auto 1fr;
		gap:2px 14px; align-items:center;
		padding:18px 0; border-bottom:1px solid var(--linha-2);
	}
	.woocommerce table.shop_table_responsive td{
		display:block; padding:2px 0; border:0;
	}
	.woocommerce table.shop_table_responsive td::before{
		content:attr(data-title) " · ";
		font-family:var(--fdado); font-size:10px;
		letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-3);
	}
	.woocommerce table.shop_table_responsive td.product-thumbnail{ grid-row:1/4; }
	.woocommerce table.shop_table_responsive td.product-thumbnail::before{ content:none; }
	.woocommerce table.shop_table_responsive td.product-remove::before{ content:none; }
}

.woocommerce .cart_totals h2, .woocommerce-checkout h3, .woocommerce-account h2,
.woocommerce-order-details h2, .woocommerce-column__title{
	font-family:var(--fdisplay);
	font-size:clamp(22px,5.4vw,30px);
	font-weight:700; text-transform:uppercase; letter-spacing:.03em;
	margin:0 0 18px;
}

.woocommerce .button, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit{
	display:inline-flex; align-items:center; justify-content:center;
	min-height:50px; padding:0 1.5em;
	background:var(--marca); color:var(--marca-tinta);
	border:0; border-radius:var(--raio);
	font-family:var(--fdisplay); font-size:17px; font-weight:700;
	letter-spacing:.05em; text-transform:uppercase; cursor:pointer;
	transition:transform var(--t-rap);
}
.woocommerce .button:hover{ transform:translateY(-2px); }
.woocommerce .button.alt, .woocommerce #place_order{ background:var(--tinta); color:var(--breu); width:100%; }

.woocommerce form .form-row{ display:grid; gap:8px; margin:0 0 18px; padding:0; }
.woocommerce form .form-row label{
	font-family:var(--fdado); font-size:10.5px;
	letter-spacing:.15em; text-transform:uppercase; color:var(--tinta-3);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
	width:100%; min-height:52px;
	padding:12px 16px;
	background:var(--breu-alto);
	border:1px solid var(--linha); border-radius:var(--raio);
	color:var(--tinta);
	font-family:var(--fcorpo); font-size:16px;  /* 16px trava o zoom do iOS */
}
.woocommerce form .form-row textarea{ min-height:120px; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus{ border-color:var(--tinta-3); outline:none; }

.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews{
	list-style:none;
	margin:0 0 24px; padding:16px 18px;
	background:rgba(255,255,255,.05);
	border-left:2px solid var(--marca);
	font-size:14.5px; color:var(--tinta-2);
	display:flex; flex-wrap:wrap; align-items:center; gap:12px;
}
.woocommerce-error{ border-left-color:#ff6b5e; }
.woocommerce-message .button, .woocommerce-info .button{ min-height:42px; font-size:14px; }

.woocommerce .woocommerce-breadcrumb{
	font-family:var(--fdado); font-size:10.5px;
	letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-3);
	margin-bottom:22px;
}

/* "Em breve" e página de loja vazia */
.woocommerce-no-products-found, .woocommerce-info--coming-soon{ text-align:center; padding-block:60px; }

/* ── a barra de compra do celular ─────────────────────────────────────────
   Aparece quando o botão de verdade sai da tela. Some no desktop, onde a
   coluna da direita é sticky e o botão nunca desaparece. */

.son-barra{
	position:fixed; left:0; right:0; bottom:0; z-index:80;
	display:flex; align-items:center; gap:14px;
	padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom));
	background:var(--breu-topo);
	backdrop-filter:saturate(150%) blur(14px);
	-webkit-backdrop-filter:saturate(150%) blur(14px);
	border-top:1px solid var(--linha);
	/* escondido de verdade: sai do Tab e do leitor de tela junto */
	opacity:0; visibility:hidden; transform:translateY(100%);
	transition:opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
}
.son-barra.esta-visivel{ opacity:1; visibility:visible; transform:none; }

.son-barra__id{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.son-barra__nome{
	font-family:var(--fdisplay);
	font-size:16px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.son-barra__preco{ font-family:var(--fdado); font-size:12px; color:var(--tinta-2); }
.son-barra__preco del{ display:none; }        /* na barra só cabe o que se paga */
.son-barra__preco ins{ text-decoration:none; }
.son-barra__botao{
	flex:0 0 auto;
	min-height:48px; padding:0 1.5em;
	background:var(--marca); color:var(--marca-tinta);
	border:0; border-radius:var(--raio);
	font-family:var(--fdisplay); font-size:17px; font-weight:700;
	letter-spacing:.05em; text-transform:uppercase; cursor:pointer;
}

@media (min-width:900px){
	.son-barra{ display:none; }
}

/* ═════════════════════════════════════════════════════ CABEÇA / PROSA / 404 ══ */

.son-cabeca{ padding-block:clamp(40px,9vw,84px) clamp(22px,5vw,40px); }
.son-cabeca__titulo{
	font-family:var(--fdisplay);
	font-size:clamp(36px,9.6vw,72px);
	font-weight:800; text-transform:uppercase; letter-spacing:-.005em;
	text-wrap:balance;
}

/* 🔴 04/09 — o texto ficava 244 px à direita do próprio título.
   `.son-largura` centraliza com `margin-inline:auto`, e como a prosa é estreita
   (72ch, para a linha ser confortável de ler) ela sobrava centralizada enquanto
   o cabeçalho ocupava a largura toda. Só apareceu quando as 5 páginas
   institucionais foram publicadas — antes não havia página de texto no ar.
   ➜ A largura de leitura fica; o que sai é a centralização. */
/* ⟲ 04/09 (2ª correção do dia, e ele tem razão) — A COLUNA VOLTA AO CENTRO.
   De manhã eu tirei a centralização (`margin-inline-start:0`) para o texto
   alinhar com o título. 🔴 Só que `margin-inline-start:0` não alinha ao
   CONTAINER: ele encosta a coluna na borda esquerda da JANELA, enquanto o
   título continua no container centralizado (1320 px). Resultado no desktop
   largo: título a 307 px, texto a 55 px — mais desalinhado do que antes.
   ✅ A coluna volta a `margin-inline:auto` e o TÍTULO passa a ser centralizado
   junto (`son-cabeca--centro`, posto pelo `page.php`). Os dois no mesmo eixo,
   que é o que ele pediu: *"deixe alinhadas ao centro"*.
   🔑 A largura de leitura de 72ch continua — o que muda é onde ela fica, não
   quanto ela mede. Linha longa demais é cansativa de ler. */
.son-prosa{ padding-bottom:clamp(48px,10vw,96px); max-width:min(72ch, var(--larg)); margin-inline:auto; }

/* O cabeçalho das páginas de texto acompanha a coluna. */
.son-cabeca--centro{ text-align:center; }

/* O irmão do `.son-prosa` para o que NÃO é texto: carrinho, checkout e conta.
   Usa o container inteiro (ver o porquê medido em `page.php`). */
.son-app{ padding-bottom:clamp(48px,10vw,96px); }

/* 🔒 Trava contra o defeito da "letra por linha", que apareceu no carrinho:
   quando a grade de blocos do WooCommerce cai num container estreito, cada
   coluna sobra com ~60 px e o botão quebra letra a letra. É a mesma lição da
   coluna do painel (26 e 27/08): corrigir a CLASSE do problema, não a
   instância. Aqui a régua é o `min-width` do item — abaixo dele a grade
   reflui em vez de espremer. */
.wc-block-grid__products,
.wp-block-woocommerce-cart .wc-block-grid__products{
	display:grid !important;
	grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
	gap:clamp(14px,2vw,26px);
}
.wc-block-grid__product{ width:auto !important; max-width:none !important; float:none !important; }
.wc-block-grid__product-title,
.wc-block-grid__product-price{ overflow-wrap:break-word; hyphens:none; }
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .wc-block-grid__product-add-to-cart a{
	display:inline-block; width:100%;
	white-space:normal; word-break:keep-all; overflow-wrap:normal;
	text-align:center;
}

/* Tabela dentro do texto (as medidas do manual de montagem). Rola dentro de si
   no celular: tabela larga é a causa clássica de rolagem lateral na página. */
.son-prosa table{
	width:100%; margin:1.4em 0; border-collapse:collapse;
	font-family:var(--fdado); font-size:12px;
	display:block; overflow-x:auto; white-space:nowrap;
}
.son-prosa th, .son-prosa td{
	padding:9px 12px; text-align:left;
	border-bottom:1px solid var(--linha-2); color:var(--tinta-2);
}
.son-prosa th{ color:var(--tinta); text-transform:uppercase; letter-spacing:.06em; font-size:11px; font-weight:600; }
.son-prosa tr:first-child td{ color:var(--tinta); }
.son-lead{ font-size:clamp(16px,4vw,19px); color:var(--tinta); max-width:60ch; }
.son-prosa h2{ font-family:var(--fdisplay); font-size:clamp(24px,5.8vw,34px); text-transform:uppercase; letter-spacing:.02em; margin:1.8em 0 .5em; }
.son-prosa h3{ font-family:var(--fdisplay); font-size:clamp(20px,4.8vw,26px); text-transform:uppercase; letter-spacing:.03em; margin:1.5em 0 .4em; }
.son-prosa p, .son-prosa li{ color:var(--tinta-2); }
.son-prosa a{ color:var(--tinta); border-bottom:1px solid var(--linha); }
.son-prosa a:hover{ border-color:var(--tinta); }
.son-prosa ul, .son-prosa ol{ padding-left:1.2em; }
.son-prosa li{ margin-bottom:.5em; }
.son-artigo{ padding-bottom:28px; margin-bottom:28px; border-bottom:1px solid var(--linha-2); }
.son-artigo h2{ margin-top:0; }

.son-404{ padding-block:clamp(60px,14vw,140px); }
.son-404__interno{ text-align:center; display:grid; gap:14px; justify-items:center; }
.son-404__num{
	font-family:var(--fdisplay);
	font-size:clamp(84px,26vw,190px);
	font-weight:800; line-height:.8;
	color:transparent;
	-webkit-text-stroke:1px var(--linha);
}
.son-404 h1{ font-family:var(--fdisplay); font-size:clamp(28px,7vw,46px); text-transform:uppercase; }
.son-404 p{ color:var(--tinta-2); max-width:44ch; }
.son-404 .son-botao{ margin-top:12px; }

/* ══════════════════════════════════════════════════════════════════ RODAPÉ ══ */

.son-rodape{
	border-top:1px solid var(--linha-2);
	padding-block:clamp(40px,8vw,72px) calc(clamp(28px,6vw,48px) + env(safe-area-inset-bottom));
	background:var(--breu-alto);
}
.son-rodape__topo{ display:grid; gap:26px; padding-bottom:32px; border-bottom:1px solid var(--linha-2); }
.son-rodape__frase{
	font-family:var(--fdisplay);
	font-size:clamp(24px,6.4vw,40px);
	font-weight:600; line-height:1.02; text-transform:uppercase; letter-spacing:.01em;
	margin:0; max-width:22ch;
}
.son-rodape__contato{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.son-rodape__contato a{
	display:inline-flex; align-items:center; min-height:44px;
	font-family:var(--fdado); font-size:11.5px;
	letter-spacing:.1em; color:var(--tinta-2);
	border-bottom:1px solid transparent;
}
.son-rodape__contato a:hover{ color:var(--tinta); border-color:var(--linha); }

.son-rodape__menu ul{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 22px; }
.son-rodape__menu a{
	display:inline-flex; align-items:center; min-height:44px;
	font-family:var(--fdado); font-size:10.5px;
	letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-3);
}
.son-rodape__menu a:hover{ color:var(--tinta); }

.son-rodape__fim{
	display:flex; flex-wrap:wrap; gap:6px 24px;
	margin:28px 0 0;
	font-family:var(--fdado); font-size:10px;
	letter-spacing:.1em; color:var(--tinta-3);
}

@media (min-width:760px){
	.son-rodape__topo{ grid-template-columns:1fr auto; align-items:end; gap:40px; }
	.son-rodape__contato{ text-align:right; }
	.son-rodape__fim{ justify-content:space-between; }
}

/* ══════════════════════════════════════════════════════ APARIÇÃO NO SCROLL ══
   Só entra quando o JS confirma suporte a IntersectionObserver (classe no
   <html>). Sem isso, um navegador sem suporte deixaria a página INVISÍVEL —
   é o modo de falha clássico de animação de entrada, e ele é silencioso. */

.js-anima .son-surge{
	opacity:0; transform:translateY(22px);
	transition:opacity var(--t-len), transform var(--t-len);
}
.js-anima .son-surge.esta-visivel{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
	html{ scroll-behavior:auto; }
	*, *::before, *::after{
		animation-duration:.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:.01ms !important;
	}
	.js-anima .son-surge{ opacity:1; transform:none; }
}

/* ═══════════════════════════════════════════ AS SETAS DO PRODUTO (10/09) ══
 *
 * Pedido dele: *"a foto passar pro lado, sem as miniaturas de embaixo, com um
 * botão lateral que a pessoa clica e troca (...) alguma seta pros dois lados."*
 *
 * 🔴 `[hidden]` NÃO VENCE `.son-poses{display:flex}` — mesma especificidade, e
 *    quem ganha é quem vier depois na folha. É a armadilha #10 do projeto, que
 *    já custou um `img` que não sumia. ➜ a regra abaixo é explícita.
 */
.son-poses[hidden]{ display:none !important; }

/* 🔴 O PAI PRECISA SER O REFERENCIAL, e ele não era: existe um
   `@media(min-width:900px){ .son-produto__arte{ position:static } }` — resto de
   quando o sticky da foto saiu (27/08). Com o pai estático, o `inset:0` das setas
   subiu até o ancestral posicionado e elas foram parar **1.300 px abaixo da
   foto**, fora da tela. Medido no DOM; nenhum erro apareceu.
   🔑 `relative` NÃO traz o sticky de volta — sticky era o que grudava a foto e
   quebrava o layout; relative só declara "as setas se posicionam por mim".
   ⚠️ **`!important` aqui não é preguiça: a regra concorrente tem `!important`**
      (`position:static !important; top:auto !important`, de quando o sticky foi
      morto em 04/09). Especificidade não vence `!important` — só outro. A classe
      dobrada garante que, entre os dois `!important`, este seja o mais específico.
   ✅ E o `top:auto !important` FICA: é ele que impede o sticky de voltar. */
.son-produto__arte.son-produto__arte{ position:relative !important; }

/* Enquanto a foto do tamanho novo está sendo composta (até ~1,2 s na primeira
   vez), a ANTERIOR continua na tela pulsando de leve. É o oposto do que havia:
   antes o quadro ficava com o ícone de imagem quebrada.
   ⚠️ Pulsar a OPACIDADE, nunca o tamanho: mexer em escala aqui empurraria o
      layout, que é justamente o salto que isto veio corrigir. */
.son-quadro.esta-carregando{ animation:son-esperando 1.1s ease-in-out infinite; cursor:progress; }
@keyframes son-esperando{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }

.son-giro{ position:absolute; inset:0; pointer-events:none; }
.son-giro__seta{
	position:absolute; top:50%; transform:translateY(-50%);
	width:44px; height:44px; padding:0; border-radius:50%;   /* 44 px: alvo de toque */
	display:grid; place-items:center; cursor:pointer; pointer-events:auto;
	background:rgba(10,10,12,.62); color:var(--tinta);
	border:1px solid rgba(255,255,255,.22);
	backdrop-filter:blur(4px);
	transition:background var(--t-rap), border-color var(--t-rap), transform var(--t-rap);
}
.son-giro__seta:hover{ background:rgba(10,10,12,.86); border-color:var(--tinta); }
.son-giro__seta:active{ transform:translateY(-50%) scale(.94); }
.son-giro__seta svg{ width:22px; height:22px; display:block; }
/* Encostadas na borda da foto, não fora dela: fora, a seta pousa no vazio da
   coluna e no celular sai da tela. */
.son-giro__seta--ant{ left:6px; }
.son-giro__seta--prox{ right:6px; }

.son-giro__pontos{
	position:absolute; left:0; right:0; bottom:10px;
	display:flex; gap:7px; justify-content:center; pointer-events:none;
}
.son-giro__pontos i{
	width:7px; height:7px; border-radius:50%;
	background:rgba(255,255,255,.34);
	box-shadow:0 0 0 1px rgba(0,0,0,.45);       /* lê sobre foto clara e escura */
	transition:background var(--t-rap), transform var(--t-rap);
}
.son-giro__pontos i.esta-aqui{ background:var(--tinta); transform:scale(1.25); }

/* O nome do ângulo aparece ao trocar e some — o cliente entende o que está
   vendo sem uma legenda fixa ocupando espaço embaixo da foto. */
.son-giro__legenda{
	position:absolute; left:0; right:0; bottom:26px; margin:0; text-align:center;
	font-family:var(--fdado); text-transform:uppercase; letter-spacing:.14em;
	font-size:11px; color:var(--tinta-2); opacity:0; transition:opacity var(--t-len);
	pointer-events:none;
}
.son-giro__legenda.esta-aqui{ opacity:1; }

/* O dedo arrasta a foto para o lado; o gesto VERTICAL continua sendo da página.
   Sem isto, tentar rolar com o dedo em cima da foto não rola nada — e o
   visitante conclui que o site travou (a lição do herói, 04/09). */
.son-produto__arte .son-quadro{ touch-action:pan-y; }

@media (max-width:760px){
	.son-giro__seta{ width:40px; height:40px; }
	.son-giro__seta--ant{ left:2px; }
	.son-giro__seta--prox{ right:2px; }
}

/* ════════════════════════════════════════════════════════ A RESPIRAÇÃO ══
 *
 * Escolha dele entre 4 movimentos testados (10/09): *"a opção D seria a melhor"*.
 * A peça sobe e desce 9 px em 9 s, sozinha — o site deixa de parecer uma foto.
 *
 * 🔑 **É movimento do QUADRO, e por isso a pergunta certa não é "em que página",
 * é "em quais quadros".** Liga em DOIS lugares e em mais nenhum:
 *   · o quadro do HERÓI (só o que está à mostra)
 *   · o quadro grande da PÁGINA DO PRODUTO
 * ⛔ **Fora dos cards da vitrine e dos carrosséis**: 67 quadros respirando juntos
 *    lê como aquário, e é animação contínua em dezenas de elementos — custo de
 *    bateria no celular por um efeito que ninguém está olhando.
 *
 * ⚠️ Só `transform` (composited): não reflui layout, não pisca texto.
 * ⚠️ Quem pediu "reduzir movimento" no sistema não vê nada disto — o bloco de
 *    `prefers-reduced-motion` logo abaixo já zera toda animação da folha.
 */
@keyframes son-respira{
	0%, 100%{ transform:translateY(0)      scale(1);     }
	50%     { transform:translateY(-9px)   scale(1.012); }
}

.son-heroi__quadro.esta-ativo .son-quadro--heroi,
.son-produto__arte .son-quadro{
	animation:son-respira 9s ease-in-out infinite;
	/* a sombra fica no CONTAINER e não se mexe: sombra que sobe junto com a peça
	   entrega o truque, porque na parede a sombra encurta quando o quadro afasta */
}

/* ═══════════════════════════════════════════════════════════════ IMPRESSÃO ══ */

@media print{
	.son-topo, .son-rodape, .son-controle, .son-heroi__acoes{ display:none; }
	body{ background:#fff; color:#000; }
}

/* ═══════════════════════════════════════════ 27/08 — 2 CORREÇÕES + SWATCHES ══ */

/* 🔴 "A foto do produto desce junto e cobre as abas."
   Não era o sticky quebrado — era o sticky FUNCIONANDO com as abas na coluna
   errada. `.woocommerce div.product` é um grid de 2 colunas, e as abas
   (Descrição / Informação adicional / Avaliações) caíam na coluna 1, EMBAIXO da
   imagem. Enquanto elas rolavam, o quadro continuava grudado por cima.
   🔑 `.son-selos` e `.related` já ocupavam as 2 colunas; as abas ficaram de
      fora. ➜ Ao pôr um bloco novo num grid, decidir a COLUNA dele — o padrão
      "cai na 1" é o que produz sobreposição silenciosa. */
@media (min-width:900px){
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .product_meta,
	.woocommerce div.product #reviews{ grid-column:1/-1; }
	/* e o quadro solta a âncora quando a linha dele acaba */
	.son-produto__arte{ align-self:start; }
}

/* ── botões no lugar dos menus (pedido dele, 27/08) ──────────────────────
   *"em vez de ser uma lista pra selecionar a cor e o tamanho, coloque botões,
   que combine com o tema, vai ficar mais bonito."*
   🔑 O `<select>` NÃO é removido — ele fica escondido e continua sendo a fonte
      da verdade do WooCommerce (é nele que o `found_variation` escuta). Os
      botões só o pilotam. Trocar o select por HTML próprio quebraria a variação
      na primeira atualização do Woo. */
.son-swatches{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 4px; }
.son-swatch{
	appearance:none; cursor:pointer;
	font-family:var(--fdado); font-size:12.5px; letter-spacing:.1em;
	text-transform:uppercase; font-weight:600;
	color:var(--tinta-2);
	background:transparent;
	border:1px solid var(--linha-2);
	border-radius:2px;
	padding:11px 16px; min-height:44px;      /* alvo de toque */
	transition:border-color .15s, color .15s, background .15s;
}
.son-swatch:hover{ color:var(--tinta); border-color:var(--tinta-3); }
.son-swatch:focus-visible{ outline:2px solid var(--arte); outline-offset:2px; }
.son-swatch[aria-pressed="true"]{
	color:var(--fundo); background:var(--tinta); border-color:var(--tinta);
}
/* indisponível: não some — fica visível e explicado, senão o cliente acha que
   o site perdeu a opção */
.son-swatch[disabled]{
	opacity:.34; cursor:not-allowed; text-decoration:line-through;
}
/* a cor da moldura ganha a amostra, que é o que o cliente está escolhendo */
.son-swatch--cor{ display:inline-flex; align-items:center; gap:9px; }
.son-swatch--cor::before{
	content:''; width:15px; height:15px; border-radius:2px;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
	background:var(--amostra,#111);
}
.son-swatch--cor[data-valor="branca"]{ --amostra:#f2f2f2; }
.son-swatch--cor[data-valor="branca"]::before{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.28); }
.son-swatch--cor[data-valor="preta"]{ --amostra:#141416; }

/* o select vira invisível, mas continua no formulário e acessível ao teclado
   por meio dos botões (que carregam o rótulo) */
.woocommerce div.product form.cart .variations select.son-oculto{
	position:absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* 🔴 27/08 (2ª rodada) — "o botão escolhido fica todo branco e não dá para ler".
   A regra usava `var(--fundo)` para o texto, e o `button` do WooCommerce traz
   `color` próprio com peso maior — o texto ficava branco sobre branco.
   🔑 Em cima de componente de plugin, cor de token não basta: **valor explícito
      e `!important` no que precisa ser legível.** Foi a mesma lição das telas
      com cor inline no painel (26/08). */
.son-swatch[aria-pressed="true"],
.woocommerce div.product form.cart .variations .son-swatch[aria-pressed="true"]{
	background:#f2f2f2 !important;
	color:#101014 !important;
	border-color:#f2f2f2 !important;
	box-shadow:0 0 0 1px #f2f2f2;
}
.son-swatch[aria-pressed="true"]:hover{ background:#ffffff !important; color:#101014 !important; }
/* a amostra de cor precisa continuar visível sobre o branco */
.son-swatch--cor[aria-pressed="true"]::before{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.45); }
/* e o não escolhido também é do tema, não do Woo */
.woocommerce div.product form.cart .variations .son-swatch{
	color:var(--tinta-2) !important; background:transparent !important;
}
.woocommerce div.product form.cart .variations .son-swatch:hover{
	color:var(--tinta) !important;
}

/* ═════════════════════════════════ 27/08 — O VÃO RECEBE SÓ A ARTE ══
   O mockup emoldura; não desenha. A arte do parceiro já é a peça pronta.
   `contain` porque CORTAR TAMBÉM É MÁSCARA — e ele pediu a imagem 100%. */
.son-quadro__vao .son-arte-cheia,
.son-quadro__vao > img{
	display:block;
	width:100%; height:100%;
	object-fit:contain;
	object-position:center;
	background:#0c0c0e;      /* a sobra, quando a proporção não bate exatamente */
}
.son-arte-vazia{ width:100%; height:100%; background:#141416; }

/* 🔴 O STICKY SAI. Ele reportou 2×: *"a imagem desce junto quebrando todo o
   layout"*. A 1ª correção (as abas em largura total) tratou a sobreposição,
   e ele continuou vendo o problema.
   🔑 Quando o mesmo relato volta depois da correção, o defeito não é o ajuste
      — é o RECURSO. O sticky rendia pouco (a coluna da direita é curta) e
      custava um layout que se desfaz em janela baixa. Fora. */
@media (min-width:900px){
	.son-produto__arte{ position:static !important; top:auto !important; }
	.son-quadro--produto{
		height:auto !important;
		width:100% !important;
		max-width:min(100%, 560px);
		margin-inline:auto;
	}
}

/* ══════════════════════════════════ AS FAIXAS E AS FOTOS DE APOIO ══
   Acrescentado em 27/08 a pedido dele: mais banners e carrosséis, no mesmo
   preto e branco — a cor continua vindo só da arte. */

.son-faixas{
	padding-block:clamp(10px,2vw,20px) clamp(40px,8vw,80px);
	/* 🔑 `clip`, não `hidden`: os dois escondem, mas `hidden` deixa a área
	   rolável existir (e rolar por script). Medido: com o carrossel na página,
	   o `scrollWidth` do documento ia a 2.525 num viewport de 1.400 mesmo com
	   todos os elementos da cadeia contidos — é o scroller aninhado inflando a
	   conta do documento. `clip` encerra isso sem criar caixa de rolagem. */
	overflow-x:clip;
}

/* A foto da caixa, fechando os 3 passos de "como chega". */
.son-processo__foto{
	margin:clamp(30px,6vw,52px) 0 0;
}
.son-processo__foto img{
	width:100%; height:auto;
	/* ⚠️ 04/09 — a foto virou 2:1 (1600×800), com os 4 volumes EM PÉ. A faixa
	   de 430 px cortava 29% de um 2:1 na largura máxima do container (1208 px
	   → 604 px de altura): decapitava o volume maior em cima e comia o menor
	   embaixo. 604 é exatamente a altura natural ali, então **nada é cortado**.
	   🔑 Assunto cortado é pior que seção alta: o argumento desta foto é a
	   ESCADA de 4 tamanhos, e escada sem o degrau de cima não é escada.
	   ➜ Trocar o arquivo por um 16:9 obriga a refazer esta conta. */
	max-height:604px;
	object-fit:cover; object-position:center 42%;
	border-radius:var(--raio);
	filter:grayscale(1);
}
.son-processo__foto figcaption{
	margin-top:12px;
	font-family:var(--fdado); font-size:11px;
	letter-spacing:.08em; color:var(--tinta-3);
	text-align:center;
}

/* A capa da vitrine: a foto atrás do título, só em /loja/. */
.son-loja__capa{
	position:absolute; inset:0 0 auto;
	height:min(46svh, 380px);
	overflow:hidden;
	z-index:0;
	pointer-events:none;
}
.son-loja__capa img{
	width:100%; height:100%;
	object-fit:cover; object-position:center 58%;
	opacity:.42;
	filter:grayscale(1);
}
/* o degradê garante o contraste do título sobre qualquer parte da foto —
   sem ele a legibilidade dependeria do que a imagem tem embaixo */
.son-loja__capa::after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(to bottom, rgba(8,8,10,.30) 0%, rgba(8,8,10,.72) 62%, var(--breu) 100%);
}
.son-woo{ position:relative; }
.son-loja__cabeca{ position:relative; z-index:1; }
.son-loja__cabeca--capa{ padding-top:clamp(48px,9vw,92px); }

/* ═══════════════════════════════════ A FAIXA COMO FILTRO ("pela cor") ══
   No herói a faixa é assinatura; aqui ela vira busca. Mesma peça, papel novo —
   foi o pedido dele em 27/08. */

.son-cores{
	max-width:var(--larg); margin:0 auto clamp(24px,4vw,34px);
	padding-inline:var(--gut);
}
.son-cores__cabeca{
	display:flex; align-items:baseline; gap:14px;
	margin-bottom:12px;
}
.son-cores__titulo{
	font-family:var(--fdado); font-size:10px;
	letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-3);
}
.son-cores__limpar{
	font-family:var(--fdado); font-size:10px;
	letter-spacing:.12em; text-transform:uppercase;
	color:var(--tinta-2); border-bottom:1px solid var(--linha);
}
.son-cores__limpar:hover{ color:var(--tinta); }

.son-cores__trilho{
	display:flex; gap:8px;
	overflow-x:auto; padding-bottom:4px;
	scrollbar-width:none; -ms-overflow-style:none;
}
.son-cores__trilho::-webkit-scrollbar{ display:none; }

.son-cor{
	flex:0 0 auto;
	display:inline-flex; align-items:center; gap:9px;
	min-height:44px; padding:0 14px 0 10px;
	background:var(--breu-alto);
	border:1px solid var(--linha-2); border-radius:999px;
	color:var(--tinta-2); white-space:nowrap;
	transition:color var(--t-rap), border-color var(--t-rap);
}
.son-cor i{
	width:16px; height:16px; border-radius:50%;
	background:var(--tom);
	/* o anel garante que o tom claro não suma no fundo escuro, e o escuro não
	   suma na borda — sem ele "Preto e cinza" viraria um buraco */
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.son-cor span{
	font-family:var(--fdisplay); font-size:13.5px;
	font-weight:600; letter-spacing:.045em; text-transform:uppercase;
}
.son-cor:hover{ color:var(--tinta); border-color:var(--linha); }
.son-cor.esta-ativo{
	color:var(--tinta);
	border-color:var(--tinta-3);
	background:rgba(255,255,255,.07);
}

/* nada encontrado com o filtro: uma saída, não um beco */
.son-vazio{
	grid-column:1/-1;
	text-align:center; padding-block:clamp(40px,9vw,80px);
	display:grid; gap:12px; justify-items:center;
}
.son-vazio h2{
	font-family:var(--fdisplay);
	font-size:clamp(24px,6vw,36px); text-transform:uppercase; letter-spacing:.02em;
}
.son-vazio p{ color:var(--tinta-2); max-width:44ch; }

/* ── a faixa como ASSINATURA no card e no carrossel ─────────────────────
   Fina, sob o quadro. Não é enfeite: são as 4 cores daquela arte, as mesmas
   que o Renato assina na peça impressa. */
.son-assina{
	display:flex; height:3px; width:100%;
	margin-top:12px;
	opacity:.72;
	transition:opacity var(--t-rap), height var(--t-rap);
}
.son-assina i{ flex:1 1 0; display:block; }
.son-item > a:hover .son-assina,
.son-carrossel__item a:hover .son-assina{ opacity:1; height:5px; }

/* 🔴 A faixa de categorias e a de cores ficavam SOB o degradê da capa da loja
   e apareciam lavadas. A capa é `position:absolute; z-index:0` e só o cabeçalho
   tinha sido levantado — as duas navs ficaram na camada de baixo.
   🔑 Elemento posicionado por cima exige que TODO irmão que deve ficar na
   frente seja levantado, não só o primeiro que a gente lembra. */
.son-colecoes, .son-cores{ position:relative; z-index:1; }

/* O carrossel que substituiu a grade 3×3 da home (pedido dele, 27/08): mesma
   peça, mas com o título no tamanho de SEÇÃO — ele abre um bloco da página,
   não uma fileira dentro de outro bloco. */
.son-carrossel--destaque{ margin-bottom:0; }
.son-carrossel--destaque .son-carrossel__titulo{
	font-size:clamp(30px,7.6vw,52px);
	letter-spacing:.005em;
}
.son-carrossel--destaque .son-carrossel__cabeca{
	margin-bottom:clamp(22px,5vw,34px);
	padding-bottom:16px;
	align-items:baseline;
}

/* ═══════════════════════════════════════════════ AJUSTES DE CELULAR ══
   Auditoria de 29/08 num iPhone emulado (390×844, DPR 3). O site já não
   rolava de lado e não tinha imagem quebrada; o que sobrou foi tamanho —
   de alvo de toque e de letra. */

/* ── 1. a paginação da vitrine ─────────────────────────────────────────
   Não estava estilizada: os links "2" e "→" saíam com 33 px de altura e
   26 px de largura. Com 48 pôsteres e 24 por página, é o controle que leva
   à segunda metade do catálogo — e era o menor alvo da loja. */
.woocommerce nav.woocommerce-pagination{ margin:clamp(34px,6vw,52px) 0 0; }
.woocommerce nav.woocommerce-pagination ul{
	display:flex; flex-wrap:wrap; gap:8px;
	justify-content:center;
	list-style:none; margin:0; padding:0; border:0;
}
.woocommerce nav.woocommerce-pagination ul li{ border:0; margin:0; overflow:visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:48px; min-height:48px;
	padding:0 14px;
	background:var(--breu-alto);
	border:1px solid var(--linha-2); border-radius:999px;
	font-family:var(--fdado); font-size:13px;
	color:var(--tinta-2);
	transition:color var(--t-rap), border-color var(--t-rap);
}
.woocommerce nav.woocommerce-pagination ul li a:hover{ color:var(--tinta); border-color:var(--linha); }
.woocommerce nav.woocommerce-pagination ul li span.current{
	background:var(--marca); color:var(--marca-tinta); border-color:var(--marca);
}

/* ── 2. o que ficou entre 40 e 43 px ───────────────────────────────────
   44 px é o piso, e faltavam 4. Um chip de 40 px erra o toque de quem tem
   o dedo grande ou está andando — e a lista de séries é feita para tocar. */
.son-chip--fino{ min-height:44px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
	display:inline-flex; align-items:center;
	min-height:44px;
}
/* "Ver opções" dos produtos variáveis (relacionados, carrinho vazio) */
.woocommerce ul.products li.product .button,
.woocommerce a.button.product_type_variable,
.woocommerce a.button.add_to_cart_button{ min-height:44px; }

/* ── 3. o piso da letra no celular ─────────────────────────────────────
   As etiquetas em mono (`--fdado`) são maiúsculas e espaçadas — a 10 px
   elas ficam decorativas, não legíveis. No desktop 10 px passa porque a
   tela está longe; no celular, não. */
@media (max-width:899px){
	.son-sobrancelha{ font-size:11px; }
	.son-card__cat,
	.son-cores__titulo,
	.son-cores__limpar,
	.son-atalhos__rotulo,
	.son-controle__acao,
	.son-rodape__menu a,
	.son-rodape__fim,
	.son-selos strong,
	.son-loja__conta,
	.woocommerce div.product form.cart .variations label{ font-size:11.5px; }
	.son-chip i, .son-submenu i{ font-size:10.5px; }
	.son-carrossel__preco, .son-item__preco, .son-card__preco{ font-size:12.5px; }
}

/* ══════════════════════════ O BLOCO "NOVOS PRODUTOS" (WooCommerce Blocks) ══
   🔴 Achado na auditoria de celular: a página de CARRINHO VAZIO traz um bloco
   `wc-block-grid` que o WordPress põe ali por padrão — e ele não passa por
   nenhum hook do tema. Resultado: fundo claro, tipografia de outro site e um
   botão cinza de 40 px, no meio da loja preta. Parecia outra loja.

   🔑 A marcação é OUTRA (`wp-block-button__link`, não `.button`), e foi por
   isso que a regra de alvo de toque não o alcançou. ⚠️ Bloco do editor não
   herda o CSS do WooCommerce clássico — quem tem um tema de loja precisa
   estilizar as duas famílias. */

.wc-block-grid__products{
	list-style:none; margin:0; padding:0;
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(min(100%,230px), 1fr));
	gap:clamp(24px,5vw,40px) clamp(14px,3vw,26px);
}
.wc-block-grid__product{
	max-width:none; padding:0; margin:0;
	text-align:left;
	background:transparent;
}
.wc-block-grid__product-image img{
	width:100%; height:auto;
	border-radius:var(--raio);
}
.wc-block-grid__product-title{
	font-family:var(--fdisplay);
	font-size:clamp(16px,4vw,19px);
	font-weight:600; letter-spacing:.02em; text-transform:uppercase;
	color:var(--tinta);
	margin:14px 0 4px;
	padding-top:12px;
	border-top:1px solid var(--linha-2);
}
.wc-block-grid__product-price{
	font-family:var(--fdado); font-size:12.5px;
	color:var(--tinta-2);
	margin-bottom:12px;
}
.wc-block-grid__product-price del{ opacity:.45; }
.wc-block-grid__product-price ins{ text-decoration:none; color:var(--tinta); }

/* o botão do bloco: mesma forma do resto da loja, e 48 px de alvo */
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .add_to_cart_button,
.wp-block-button__link{
	display:inline-flex; align-items:center; justify-content:center;
	min-height:48px; padding:0 1.5em;
	background:var(--marca); color:var(--marca-tinta);
	border:0; border-radius:var(--raio);
	font-family:var(--fdisplay); font-size:16px; font-weight:700;
	letter-spacing:.05em; text-transform:uppercase;
	transition:transform var(--t-rap);
}
.wp-block-button__link:hover{ transform:translateY(-2px); }

/* o título do bloco ("Novos produtos") no padrão das outras seções */
.wp-block-woocommerce-product-new > h2,
.wc-block-grid__title{
	font-family:var(--fdisplay);
	font-size:clamp(24px,6vw,36px);
	font-weight:700; letter-spacing:.02em; text-transform:uppercase;
	color:var(--tinta);
	margin:clamp(34px,7vw,56px) 0 clamp(18px,4vw,28px);
	padding-bottom:14px;
	border-bottom:1px solid var(--linha-2);
	text-align:left;
}

/* ═══════════════════════════════ O CHECKOUT EM BLOCOS (04/09) ══════════════
   🔴🔴 ACHADO GRAVE: o checkout inteiro estava com os RÓTULOS INVISÍVEIS.

   O checkout do WooCommerce em blocos usa **label flutuante**: o rótulo fica
   POR CIMA do campo, dentro dele. O campo é branco (é o padrão do bloco, e ele
   não herda o tema); o rótulo herdava o branco do tema escuro. Resultado
   medido: **contraste 1,00:1 em todos os campos** — "Nome", "Endereço",
   "Código postal", "Cidade", "País", "Estado". O cliente via caixas vazias e
   não sabia o que preencher.

   🔑 E a minha PRIMEIRA medição disse que estava tudo bem (20:1): ela subia na
   árvore procurando o primeiro fundo opaco e achava o fundo da PÁGINA, não o
   campo que está atrás do rótulo. **A régua errou, e desta vez errou para o
   lado perigoso — aprovando o que estava quebrado.**

   ➜ A regra é a da casa: onde o fundo é branco, o texto é escuro. O par vai
   completo, e vale para todo campo do bloco, não só os que eu vi. */
.wc-block-checkout .wc-block-components-text-input label,
.wc-block-checkout .wc-blocks-components-select__label,
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-blocks-components-select__select,
.wc-block-checkout .wc-block-components-textarea,
.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-blocks-components-select__label,
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-blocks-components-select__select,
.wp-block-woocommerce-checkout .wc-block-components-textarea,
.wp-block-woocommerce-cart .wc-block-components-text-input label,
.wp-block-woocommerce-cart .wc-block-components-text-input input {
	color:#2b2d2f !important;
}
/* o campo em si: branco explícito, para não depender do padrão do bloco */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-blocks-components-select__select,
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-blocks-components-select__select,
.wp-block-woocommerce-cart .wc-block-components-text-input input{
	background-color:#fff !important;
}
/* o rótulo encolhido (campo preenchido ou em foco) continua sobre o branco */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label{ color:#2b2d2f !important; }
/* mensagem de erro do campo: vermelho sobre branco, não sobre o tema */
.wc-block-checkout .wc-block-components-validation-error,
.wp-block-woocommerce-checkout .wc-block-components-validation-error{ color:#b3261e !important; }
/* caixa de aviso do bloco (frete, cupom): fundo próprio claro */
.wc-block-components-notice-banner{ color:#2b2d2f !important; }
.wc-block-components-notice-banner *{ color:inherit !important; }
/* ══════════════════════════ GUIA DE TAMANHOS — janela (04/09) ══════════
   ⟲ 3ª posição, e é a que fica. Em linha, aberto na página, o guia empurrava
   preço, frete e botão de comprar ~700 px para baixo. Guia de tamanhos é
   CONSULTA, não conteúdo: link fino na página, conteúdo numa janela — que não
   custa um pixel de altura. */
.son-guia__link{
	display:inline-flex; align-items:center; gap:7px;
	margin:10px 0 2px; padding:0; border:0; background:none; cursor:pointer;
	font-family:var(--fcorpo); font-size:13px; color:var(--tinta-2);
	text-decoration:underline; text-underline-offset:3px;
	text-decoration-color:var(--tinta-3);
	transition:color var(--t-rap);
}
.son-guia__link:hover{ color:var(--tinta); text-decoration-color:var(--tinta); }
.son-guia__link:focus-visible{ outline:2px solid var(--tinta); outline-offset:3px; }
.son-guia__icone{ display:flex; flex:none; color:var(--tinta-3); }
.son-guia__link:hover .son-guia__icone{ color:var(--tinta-2); }

.son-guia-caixa{
	width:min(560px, calc(100vw - 28px));
	max-height:calc(100vh - 48px);
	padding:0; border:1px solid var(--linha); border-radius:var(--raio);
	background:var(--breu-alto); color:var(--tinta);
	/* `<dialog>` nativo: o navegador cuida de foco, Esc e do fundo escurecido.
	   Sem `overflow:hidden` a barra de rolagem do corpo escapa o canto. */
	overflow:hidden;
}
.son-guia-caixa::backdrop{ background:rgba(8,8,10,.78); backdrop-filter:blur(2px); }
.son-guia-caixa__topo{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:14px 16px; border-bottom:1px solid var(--linha);
	position:sticky; top:0; background:var(--breu-alto); z-index:2;
}
.son-guia-caixa__tit{
	margin:0; font-family:var(--fdisplay); text-transform:uppercase;
	letter-spacing:.05em; font-size:16px; font-weight:400; color:var(--tinta);
}
.son-guia-caixa__x{
	flex:none; width:34px; height:34px; padding:0; cursor:pointer;
	border:1px solid var(--linha); border-radius:var(--raio);
	background:none; color:var(--tinta-2); font-size:22px; line-height:1;
	transition:border-color var(--t-rap), color var(--t-rap);
}
.son-guia-caixa__x:hover{ border-color:var(--tinta-3); color:var(--tinta); }
.son-guia-caixa__corpo{ padding:14px 16px 18px; overflow-y:auto; max-height:calc(100vh - 118px); }

.son-guia__intro,
.son-guia__nota{ color:var(--tinta-2); font-size:13.5px; line-height:1.55; margin:0 0 12px; }
.son-guia__nota{ margin:12px 0 0; font-size:12.5px; color:var(--tinta-3); }

.son-guia__fig{ margin:0; }
.son-guia__svg{ width:100%; height:auto; display:block; overflow:visible; }
.son-guia__chao{ stroke:var(--linha); stroke-width:.6; }
/* o sofá é RÉGUA: precisa ser legível sem virar assunto. */
.son-guia__sofa rect{ fill:rgba(255,255,255,.055); stroke:var(--tinta-3); stroke-width:.7; }
.son-guia__moldura{ fill:var(--tinta); }
.son-guia__arte{ fill:var(--breu); }
.son-guia__rot{
	fill:var(--tinta); font-family:var(--fdisplay); font-size:9px;
	text-anchor:middle; letter-spacing:.04em;
}
.son-guia__escala{
	fill:var(--tinta-3); font-family:var(--fcorpo); font-size:6.4px; text-anchor:middle;
}

.son-guia__rolagem{ overflow-x:auto; min-width:0; margin-top:14px; }
/* 🔴 Estas 5 linhas são a cicatriz de 04/09: com a tabela aninhada dentro do
   `<td>` do atributo, ela herdava `.variations tr, td, th { display:block }` do
   próprio tema e cada célula virava uma linha. A janela no rodapé já resolve na
   estrutura; isto fica como trava para o dia em que alguém a aninhar de novo. */
.son-guia__tab{ display:table; width:100%; border-collapse:collapse; font-size:13px; min-width:296px; }
.son-guia__tab thead{ display:table-header-group; }
.son-guia__tab tbody{ display:table-row-group; }
.son-guia__tab tr{ display:table-row; }
.son-guia__tab th,
.son-guia__tab td{
	display:table-cell; width:auto;
	padding:8px 7px; text-align:left; white-space:nowrap;
	border-bottom:1px solid var(--linha-2);
}
.son-guia__tab th:first-child,
.son-guia__tab td:first-child{ padding-left:0; }
.son-guia__tab th:last-child,
.son-guia__tab td:last-child{ padding-right:0; }
/* o CABEÇALHO pode quebrar em duas linhas; o CORPO não: medida partida no meio
   ("23,6 ×" / "32,3") não se lê. */
.son-guia__tab thead th{
	white-space:normal; vertical-align:bottom; line-height:1.25;
	font-family:var(--fdisplay); text-transform:uppercase; letter-spacing:.04em;
	font-size:11.5px; color:var(--tinta-3); font-weight:400;
	border-bottom:1px solid var(--linha);
}
.son-guia__tab tbody th{ font-family:var(--fdado); color:var(--tinta); font-weight:400; }
.son-guia__tab td{ font-family:var(--fdado); color:var(--tinta-2); font-size:12px; }
.son-guia__tab td strong{ color:var(--tinta); font-weight:400; }
.son-guia__tab tbody tr:last-child th,
.son-guia__tab tbody tr:last-child td{ border-bottom:0; }

/* ══════════════ O ARRASTO NÃO ESCAPA MAIS DO ELEMENTO (04/09) ══════════
   🔴 Relato dele, no celular: *"quando clica e arrasta pro lado, toda a tela se
   movimenta e fica tudo desalinhado; a tela tem que ser travada — às vezes tem
   que rolar pra direita e a página inteira se movimenta em vez de só o elemento"*.

   **A causa não é overflow, é ENCADEAMENTO DE ROLAGEM.** Medido: 7 roladores
   horizontais na home, todos com `overscroll-behavior-x: auto` (o padrão).
   Quando o dedo chega ao FIM do trilho, o navegador repassa o resto do gesto
   para o ancestral — e daí para o documento e para o próprio navegador. É por
   isso que na captura dele aparece o painel de "voltar" na borda direita: o
   gesto vazou até virar navegação.
   🔑 `contain` mantém o efeito de fim de curso DENTRO do elemento e corta a
   passagem para cima. É cirúrgico — e é o que ele pediu: "só o elemento".

   ⚠️ De propósito NÃO se põe `overscroll-behavior-x:none` no `html`: isso
   desliga o gesto de voltar do navegador, que é do sistema e não nosso.
   ⚠️ E de propósito NÃO se põe `touch-action:pan-x` nos trilhos: travaria a
   rolagem VERTICAL de quem começa o gesto em cima do carrossel — trocaria um
   incômodo por um pior. */
.son-controle__trilho,
.son-carrossel__trilho,
.son-colecoes__linha,
.son-poses,
.son-guia__rolagem,
.son-cores__linha,
.woocommerce-tabs .wc-tabs{
	overscroll-behavior-x:contain;
	/* iOS antigo ignora a propriedade acima; o `-webkit-` mantém o embalo
	   suave, que é o que faz o trilho parecer nativo. */
	-webkit-overflow-scrolling:touch;
}

/* `clip` no lugar de `hidden`: o vídeo da luz sangra 16% para cada lado de
   propósito, e o herói já o recortava — mas `hidden` CRIA uma área rolável que
   script (ou gesto, em alguns navegadores) consegue mover. `clip` não cria.
   É a lição de 27/08, aplicada onde ela ainda não estava. */
/* ⟲ 04/09 (madrugada) — o PAR, não só clip: `clip` só existe do iOS 16 (achado da
   sessão do desktop, que eu não tinha lido). Abaixo disso a linha é ignorada e o
   vídeo da luz (`inset:-14% -16%`) volta a sangrar 34 px para fora da tela — e é
   exatamente um conteúdo posicionado fora da tela que faz o Safari deixar arrastar.
   `hidden` primeiro (todo iOS), `clip` depois (moderno, sem caixa rolável). */
.son-heroi{ overflow:hidden; overflow:clip; }

/* ════════════════════════════════════════════════════════════ A LUPA ══
 *
 * Pedido dele (26/09): clicar na foto do produto e aproximar — no celular e
 * no desktop, "sem efeito no desktop que atrapalhe o celular".
 * 🔑 Por isso NADA muda na página ao passar o mouse: só o cursor vira lupa, e
 * só onde há mouse de verdade. Todo zoom acontece DENTRO do visor. */
.son-produto__arte .son-quadro{ cursor:default; }
@media (hover:hover) and (pointer:fine){
	.son-produto__arte .son-quadro{ cursor:zoom-in; }
}

/* o botão de lupa no canto da foto: no celular não há cursor que avise */
.son-lupa-abrir{
	position:absolute; top:10px; right:10px; z-index:3;
	width:40px; height:40px; padding:0; border-radius:50%;
	display:grid; place-items:center; cursor:pointer;
	background:rgba(10,10,12,.62); color:var(--tinta);
	border:1px solid rgba(255,255,255,.22);
	backdrop-filter:blur(4px);
	transition:background var(--t-rap), border-color var(--t-rap);
}
.son-lupa-abrir:hover{ background:rgba(10,10,12,.86); border-color:var(--tinta); }
.son-lupa-abrir svg{ width:20px; height:20px; display:block; }
.son-lupa-abrir:focus-visible, .son-lupa button:focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }

/* o visor */
.son-lupa{
	position:fixed; inset:0; z-index:9999;
	background:var(--breu);        /* opaco: a .97 a página clara vazava por trás */
	display:flex; flex-direction:column;
}
.son-lupa[hidden]{ display:none !important; }
html.son-lupa-aberta, html.son-lupa-aberta body{ overflow:hidden; }

.son-lupa__palco{
	position:relative; flex:1; min-height:0; overflow:hidden;
	touch-action:none;                 /* os gestos são nossos: pinça, arraste, toque duplo */
	user-select:none; -webkit-user-select:none;
	cursor:zoom-in;
}
.son-lupa.esta-ampliado .son-lupa__palco{ cursor:zoom-out; }
.son-lupa__img{
	/* ABSOLUTA e centrada por margin:auto: em grid/flex o max-height:100% não
	   tem altura definida para medir e a foto saía com os 1650 px inteiros. */
	position:absolute; inset:0; margin:auto;
	max-width:100%; max-height:100%; width:auto; height:auto;
	transform-origin:50% 50%; will-change:transform;
	-webkit-user-drag:none; pointer-events:none;
}
.son-lupa.esta-carregando .son-lupa__img{ animation:son-esperando 1.1s ease-in-out infinite; }

.son-lupa__fechar, .son-lupa__seta{
	position:absolute; z-index:2;
	width:46px; height:46px; padding:0; border-radius:50%;
	display:grid; place-items:center; cursor:pointer;
	background:rgba(10,10,12,.7); color:var(--tinta);
	border:1px solid rgba(255,255,255,.22);
	transition:background var(--t-rap), border-color var(--t-rap), opacity var(--t-rap);
}
.son-lupa__fechar:hover, .son-lupa__seta:hover{ background:rgba(10,10,12,.92); border-color:var(--tinta); }
.son-lupa__fechar svg, .son-lupa__seta svg{ width:22px; height:22px; display:block; }
.son-lupa__fechar{ top:max(12px, env(safe-area-inset-top)); right:12px; }
.son-lupa__seta{ top:50%; transform:translateY(-50%); }
.son-lupa__seta--ant{ left:12px; }
.son-lupa__seta--prox{ right:12px; }
/* ampliada, as setas saem do caminho: quem navega é o arraste */
.son-lupa.esta-ampliado .son-lupa__seta{ opacity:0; pointer-events:none; }

.son-lupa__rodape{
	margin:0; padding:10px 16px max(12px, env(safe-area-inset-bottom));
	display:flex; gap:14px; justify-content:center; align-items:baseline;
	font-family:var(--fdado); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
	color:var(--tinta-2); pointer-events:none;
}
.son-lupa__conta{ color:var(--tinta); }
.son-lupa.esta-ampliado .son-lupa__dica{ opacity:0; }

@media (max-width:760px){
	.son-lupa-abrir{ width:38px; height:38px; top:8px; right:8px; }
	/* no celular a seta fica, mas menor e rente à borda — o polegar prefere arrastar */
	.son-lupa__seta{ width:40px; height:40px; }
	.son-lupa__seta--ant{ left:6px; }
	.son-lupa__seta--prox{ right:6px; }
}
@media (prefers-reduced-motion:reduce){
	.son-lupa.esta-carregando .son-lupa__img{ animation:none; }
}
/* o contador não quebra ("1 /" numa linha e "6" na outra) — a dica é quem cede */
.son-lupa__conta{ white-space:nowrap; flex:none; }
.son-lupa__dica{ text-align:center; }