/* ═══════════════════════════════════════════════════════════════════════════
   CONSTRUTOR DE PÔSTER — a folha desta página, e só dela.

   A REGRA DO TEMA VALE AQUI TAMBÉM: a interface é preta e branca. A única cor
   da tela é a ARTE que o cliente subiu — é ela que tem de puxar o olho, não o
   editor. Por isso nenhum verde/amarelo/vermelho decorativo: o semáforo de
   resolução usa PESO e TRAÇO (o único lugar em que a cor entra é o aviso, e
   ainda assim como barra lateral, não como fundo).

   Herda os tokens do style.css do tema (--breu, --tinta, --fdisplay, --fcorpo,
   --fdado, --gut, --larg, --raio).

   ⚠️ O REALCE DE SELEÇÃO É `--tinta`, NUNCA `--marca` — e isso custou caro em
   28/08 no painel: a marca da Sonnata é PRETA (#111111), então borda de
   "escolhido" pintada com ela desaparece no fundo escuro. Marca escolhe-se por
   estética; realce é função do fundo. Aqui o destaque é o contraste.

   Mobile-first, como o tema inteiro: o que está fora de media query é o
   celular; tela grande é adição, nunca correção.
   ═══════════════════════════════════════════════════════════════════════════ */

.son-cst__lede{
	max-width:52ch;
	color:var(--tinta-2);
	font-size:clamp(15px,3.8vw,17px);
	margin-top:.6em;
}

/* No celular a ordem é: parede em cima (o cliente vê o que está montando),
   painel embaixo. Em tela grande viram duas colunas com a parede grudada. */
.son-cst{
	display:grid;
	gap:clamp(20px,4vw,36px);
	padding-bottom:clamp(90px,14vw,72px);   /* espaço da barra fixa do celular */
}
@media (min-width:1000px){
	.son-cst{ grid-template-columns:minmax(0,1.2fr) minmax(340px,.85fr); align-items:start; }
	.son-cst{ padding-bottom:clamp(48px,8vw,96px); }
}

/* ───────────────────────────────────────────────────────── a parede ── */

/* 🔑 A parede é mais CLARA que o resto da página, e isso é o oposto do que o
   tema faz em todo lugar. Motivo: a moldura mais vendida é PRETA, e moldura
   preta sobre fundo preto simplesmente não existe na tela — o cliente decide a
   compra olhando um retângulo que ele não consegue ver. Aqui o fundo é o
   serviço, não a estética: ele existe para a peça aparecer. */
.son-cst__parede{
	position:relative;
	display:flex; flex-direction:column; align-items:center;
	gap:14px;
	padding:clamp(18px,5vw,40px) clamp(14px,4vw,40px) clamp(40px,7vw,58px);
	background:
		radial-gradient(115% 85% at 50% 6%, rgba(255,255,255,.13), rgba(255,255,255,.02) 58%, transparent 78%),
		#1a1a20;
	border:1px solid var(--linha);
	border-radius:var(--raio);
	min-height:340px;
}
@media (min-width:1000px){
	/* 🔑 O padding lateral abre espaço para a COLUNA DE FERRAMENTAS, que é
	   `absolute` e ficaria por cima da moldura. Em retrato o quadro é estreito e
	   nada se tocava; em PAISAGEM ele cresce e os 8 botões caíam sobre a arte.
	   E o padding resolve sozinho: o JS lê `paddingLeft/Right` para calcular o
	   tamanho do palco, então o quadro já nasce menor — sem número mágico
	   repetido no JavaScript, que é o que envelhece torto. */
	.son-cst__parede{ position:sticky; top:84px; min-height:460px; padding-inline:clamp(64px,6vw,84px); }
	body.admin-bar .son-cst__parede{ top:116px; }
}

/* A moldura é desenhada, não é o render do catálogo — e isso é decisão, não
   atalho: o render tem UMA proporção (o A3 em pé) e aqui o quadro muda de
   proporção a cada orientação, e engrossa conforme o perfil do tamanho. Um PNG
   esticado entregaria moldura torta na tela em que o cliente decide comprar. */
.son-cst__quadro{
	position:relative;
	line-height:0;
	box-shadow:0 26px 44px rgba(0,0,0,.6), 0 6px 16px rgba(0,0,0,.4);
	transition:padding .3s cubic-bezier(.4,0,.2,1);
}
/* O gradiente da moldura preta é mais claro que o do card do catálogo, pela
   mesma razão da parede: aqui ela precisa ser VISTA, não ser discreta. */
.son-cst__quadro[data-cor="preta"]{ background:linear-gradient(150deg,#4a4a52,#232329 42%,#101014); }
.son-cst__quadro[data-cor="branca"]{ background:linear-gradient(150deg,#fafafa,#dcdcdd 46%,#b9b9bb); }
.son-cst__quadro::before{
	content:""; position:absolute; inset:0; pointer-events:none; z-index:6;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.son-cst__quadro[data-cor="branca"]::before{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.16); }

.son-cst__interno{ position:relative; line-height:0; box-shadow:inset 0 0 14px rgba(0,0,0,.45); }
.son-cst__interno canvas{ display:block; touch-action:none; }

/* A LAMINAÇÃO, não um vidro: é película aplicada a frio sobre a impressão, e o
   reflexo dela é discreto. Brilho forte aqui mentiria sobre o produto. */
.son-cst__brilho{
	position:absolute; inset:0; z-index:5; pointer-events:none;
	background:linear-gradient(118deg,
		rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 30%,
		rgba(255,255,255,0) 46%, rgba(255,255,255,0) 74%, rgba(255,255,255,.035) 100%);
}

.son-cst__vazio{
	position:absolute; inset:0; z-index:4;
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	gap:12px; padding:18px; text-align:center;
	background:#141418; color:var(--tinta-3);
	font-size:13px; line-height:1.45;
}
.son-cst__vazio svg{ width:42px; height:42px; stroke:var(--tinta-3); fill:none; stroke-width:2.4; }
.son-cst__vazio b{ color:var(--tinta); font-weight:700; }

.son-cst__medida{
	position:absolute; left:50%; bottom:clamp(14px,2.6vw,22px); transform:translateX(-50%);
	font-family:var(--fdado); font-size:clamp(11px,2.6vw,12px);
	letter-spacing:.05em; color:var(--tinta-3);
	text-align:center; width:calc(100% - 24px); line-height:1.5;
}

/* ferramentas rápidas: coluna colada na moldura no desktop, fita no celular */
.son-cst__tools{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; order:3; }
.son-cst__tools button{
	width:44px; height:44px; border-radius:50%;
	border:1px solid var(--linha); background:rgba(255,255,255,.04);
	color:var(--tinta-2); cursor:pointer;
	display:flex; align-items:center; justify-content:center;
	transition:border-color var(--t-rap), color var(--t-rap), transform var(--t-rap);
}
.son-cst__tools button:hover{ border-color:var(--tinta-3); color:var(--tinta); transform:scale(1.06); }
.son-cst__tools button svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (min-width:1000px){
	.son-cst__tools{
		position:absolute; left:10px; top:50%; transform:translateY(-50%);
		flex-direction:column; flex-wrap:nowrap; z-index:6; order:0;
	}
	.son-cst__tools button::after{
		content:attr(data-dica);
		position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%);
		background:var(--tinta); color:var(--breu);
		font-family:var(--fdado); font-size:11px; letter-spacing:.04em;
		padding:4px 8px; border-radius:var(--raio); white-space:nowrap;
		opacity:0; pointer-events:none; transition:opacity var(--t-rap);
	}
	.son-cst__tools button:hover::after{ opacity:1; }
}

/* ───────────────────────────────────────────────────── o painel ── */

.son-cst__trilho{ display:grid; gap:14px; }

.son-cst__cartao{
	border:1px solid var(--linha);
	border-radius:var(--raio);
	background:rgba(255,255,255,.025);
	padding:clamp(14px,3.4vw,18px);
}
.son-cst__cartao h2{
	display:flex; align-items:center; gap:10px;
	font-family:var(--fdisplay); font-size:clamp(18px,4.4vw,20px);
	font-weight:700; text-transform:uppercase; letter-spacing:.05em;
	margin:0 0 12px;
}
.son-cst__cartao h2 i{
	font-style:normal; font-family:var(--fdado); font-size:11px;
	width:22px; height:22px; flex:none; border-radius:50%;
	display:inline-flex; align-items:center; justify-content:center;
	background:var(--tinta); color:var(--breu);
}
.son-cst__dica{ font-size:13px; line-height:1.5; color:var(--tinta-3); }
.son-cst__dica b{ color:var(--tinta-2); }

/* ---- 1. imagem ---- */
.son-cst__solta{
	border:1px dashed var(--linha);
	border-radius:var(--raio);
	padding:clamp(16px,4vw,22px);
	text-align:center; cursor:pointer;
	transition:border-color var(--t-rap), background var(--t-rap);
	min-height:88px; display:flex; flex-direction:column; justify-content:center; gap:6px;
}
.son-cst__solta:hover,.son-cst__solta.esta-sobre{ border-color:var(--tinta-3); background:rgba(255,255,255,.05); }
.son-cst__solta strong{ font-size:15px; }
.son-cst__solta span{ font-size:12px; color:var(--tinta-3); }
#son-cst-arquivo{ display:none; }

.son-cst__arquivo{ display:none; align-items:center; gap:10px; flex-wrap:wrap; }
.son-cst__arquivo.esta-visivel{ display:flex; }
.son-cst__arquivo code{
	font-family:var(--fdado); font-size:11px; color:var(--tinta-3);
	overflow-wrap:anywhere;
}

/* O aviso de resolução. A barra à esquerda é o único sinal de cor da tela, e
   ela é semântica: verde/âmbar/vermelho dizem "imprime", "imprime apertado",
   "não imprime". Texto continua legível sem enxergar a cor. */
.son-cst__aviso{
	display:none; margin-top:12px; padding:11px 13px;
	border:1px solid var(--linha); border-left-width:3px;
	border-radius:var(--raio);
	font-size:13px; line-height:1.5; color:var(--tinta-2);
}
.son-cst__aviso.esta-visivel{ display:block; }
.son-cst__aviso[data-nivel="ok"]{ border-left-color:#4CAF7D; }
.son-cst__aviso[data-nivel="meio"]{ border-left-color:#D9A441; }
.son-cst__aviso[data-nivel="ruim"]{ border-left-color:#D2564B; }
.son-cst__aviso b{ color:var(--tinta); }
.son-cst__aviso code{ font-family:var(--fdado); font-size:11.5px; color:var(--tinta); }

/* ---- botões de escolha (orientação, tamanho, cor) ---- */
.son-cst__opcoes{ display:flex; flex-wrap:wrap; gap:8px; }
.son-cst__opcoes button{
	min-height:44px; padding:0 14px;
	border:1px solid var(--linha); border-radius:var(--raio);
	background:transparent; color:var(--tinta-2);
	font-family:var(--fdado); font-size:12.5px; letter-spacing:.03em;
	cursor:pointer; display:inline-flex; align-items:center; gap:8px;
	transition:border-color var(--t-rap), color var(--t-rap), background var(--t-rap);
}
.son-cst__opcoes button:hover{ border-color:var(--tinta-3); color:var(--tinta); }
.son-cst__opcoes button[aria-pressed="true"]{
	border-color:var(--tinta); color:var(--tinta);
	background:rgba(255,255,255,.07);
}
.son-cst__opcoes button b{ font-weight:600; }
.son-cst__opcoes button em{ font-style:normal; color:var(--tinta-3); }
.son-cst__opcoes button[aria-pressed="true"] em{ color:var(--tinta-2); }

/* a bolinha do semáforo de resolução, dentro do botão de tamanho */
.son-cst__ponto{
	width:8px; height:8px; border-radius:50%; flex:none;
	background:var(--linha); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.son-cst__ponto[data-n="v"]{ background:#4CAF7D; }
.son-cst__ponto[data-n="a"]{ background:#D9A441; }
.son-cst__ponto[data-n="r"]{ background:#D2564B; }

/* ---- cor da moldura ---- */
.son-cst__cores{ display:flex; gap:16px; }
.son-cst__cores button{
	width:52px; height:52px; border-radius:var(--raio); cursor:pointer;
	border:1px solid var(--linha); position:relative;
	transition:box-shadow var(--t-rap), border-color var(--t-rap);
}
.son-cst__cores button[data-cor="preta"]{ background:linear-gradient(150deg,#2a2a2f,#0e0e11); }
.son-cst__cores button[data-cor="branca"]{ background:linear-gradient(150deg,#fbfbfb,#c9c9cb); }
.son-cst__cores button[aria-pressed="true"]{ border-color:var(--tinta); box-shadow:0 0 0 3px rgba(255,255,255,.22); }
.son-cst__cores button span{
	position:absolute; left:50%; top:calc(100% + 6px); transform:translateX(-50%);
	font-family:var(--fdado); font-size:11px; letter-spacing:.05em;
	color:var(--tinta-3); white-space:nowrap;
}
.son-cst__cores{ margin-bottom:26px; }

/* ---- ajuste, texto, figuras ---- */
.son-cst__linha{ display:flex; align-items:center; gap:12px; }
.son-cst__linha input[type=range]{ flex:1; accent-color:var(--tinta); }
.son-cst__linha output{ font-family:var(--fdado); font-size:11.5px; color:var(--tinta-3); min-width:44px; text-align:right; }

.son-cst__mini{
	min-height:40px; padding:0 12px;
	border:1px solid var(--linha); border-radius:var(--raio);
	background:transparent; color:var(--tinta-2);
	font-family:var(--fcorpo); font-size:13px; cursor:pointer;
	display:inline-flex; align-items:center; gap:6px;
	transition:border-color var(--t-rap), color var(--t-rap);
}
.son-cst__mini:hover{ border-color:var(--tinta-3); color:var(--tinta); }
.son-cst__mini--perigo:hover{ border-color:#D2564B; color:#E0796F; }
.son-cst__fila{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

.son-cst__campos{ display:grid; gap:10px; }
.son-cst__campos select,
.son-cst__campos input[type=number]{
	width:100%; min-height:44px; padding:0 10px;
	border:1px solid var(--linha); border-radius:var(--raio);
	background:var(--breu-alto); color:var(--tinta);
	font-family:var(--fcorpo); font-size:14px;
}
.son-cst__par{ display:grid; grid-template-columns:1fr 92px; gap:10px; }
.son-cst__seltexto{ display:none; }
.son-cst__seltexto.esta-visivel{ display:block; }

.son-cst__figuras{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.son-cst__figuras button{
	aspect-ratio:1; padding:7px; cursor:pointer;
	border:1px solid var(--linha); border-radius:var(--raio);
	background:transparent;
	display:flex; align-items:center; justify-content:center;
	transition:border-color var(--t-rap), background var(--t-rap);
}
.son-cst__figuras button:hover{ border-color:var(--tinta-3); background:rgba(255,255,255,.05); }
.son-cst__figuras svg{ width:100%; height:100%; fill:var(--tinta-2); }
.son-cst__figuras button:hover svg{ fill:var(--tinta); }

.son-cst__tinta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.son-cst__tinta button{
	width:32px; height:32px; border-radius:50%; cursor:pointer;
	border:1px solid var(--linha);
}
.son-cst__tinta button[aria-pressed="true"]{ border-color:var(--tinta); box-shadow:0 0 0 3px rgba(255,255,255,.22); }
.son-cst__tinta input[type=color]{
	width:32px; height:32px; padding:0; border:0; background:none; cursor:pointer;
}

/* ---- preço e compra ---- */
.son-cst__preco{
	border:1px solid var(--linha); border-radius:var(--raio);
	background:rgba(255,255,255,.04);
	padding:14px 16px; margin-bottom:12px;
}
.son-cst__preco div{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.son-cst__preco span{ font-family:var(--fdado); font-size:11px; letter-spacing:.06em; color:var(--tinta-3); text-transform:uppercase; }
/* O valor em display condensada, como os preços do catálogo — é a mesma peça
   tipográfica da loja, para o cliente ler "isto é o preço", não "isto é UI". */
.son-cst__preco b{
	font-family:var(--fdisplay); font-weight:800;
	font-size:clamp(30px,7.6vw,36px); line-height:1;
	letter-spacing:.01em; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.son-cst__preco p{ margin:8px 0 0; font-size:12px; color:var(--tinta-3); line-height:1.5; }

/* 🔑 O botão de compra leva BORDA branca, copiando o da página de produto —
   medido lá: fundo #111111 (a marca da loja) com `border:1px solid #fff`. A
   marca da Sonnata é PRETA; sem a borda, o botão que fecha a venda some no
   fundo escuro. E a mesma loja não pode ter dois botões de compra diferentes. */
.son-cst__comprar{ width:100%; box-shadow:inset 0 0 0 1px var(--tinta); }
.son-cst__comprar:hover{ box-shadow:inset 0 0 0 1px var(--tinta), 0 10px 30px rgba(0,0,0,.5); }
.son-cst__comprar[disabled]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:inset 0 0 0 1px var(--tinta-3); }
.son-cst__nota{ margin-top:10px; font-size:12.5px; color:var(--tinta-3); line-height:1.5; }
.son-cst__erro{
	display:none; margin-bottom:12px; padding:11px 13px;
	border:1px solid var(--linha); border-left:3px solid #D2564B; border-radius:var(--raio);
	font-size:13px; color:var(--tinta-2);
}
.son-cst__erro.esta-visivel{ display:block; }

/* A barra fixa do celular: decidir a compra não pode exigir rolar de volta.
   É o mesmo recurso da página de produto do tema. */
.son-cst__barra{
	position:fixed; left:0; right:0; bottom:0; z-index:60;
	display:flex; align-items:center; justify-content:space-between; gap:14px;
	padding:10px var(--gut);
	background:rgba(8,8,10,.94);
	border-top:1px solid var(--linha);
	backdrop-filter:blur(8px);
}
.son-cst__barra span{ font-family:var(--fdado); font-size:11px; letter-spacing:.05em; color:var(--tinta-3); text-transform:uppercase; }
.son-cst__barra b{ font-family:var(--fdisplay); font-weight:800; font-size:22px; font-variant-numeric:tabular-nums; }
@media (min-width:1000px){ .son-cst__barra{ display:none; } }

@media (prefers-reduced-motion:reduce){
	.son-cst__quadro,.son-cst__tools button{ transition:none; }
}