/*
 * Estilo do site (layout aprovado em 2026-10-13).
 * Paleta tirada da ilustração Prisma: azul e rosa como cores principais, sobre branco; vermelho e amarelo só em
 * botões e destaques. A arte dá a cor; sem texturas, sem sombras em caixas,
 * cortes retos entre as seções. Fraunces nos títulos e Figtree no texto.
 */
:root {
	--nt-fundo: #ffffff;
	--nt-papel: #fffafd;
	--nt-azul: #3c58a4;
	--nt-rosa: #dc6894;
	--nt-vermelho: #e80000;
	--nt-amarelo: #ffcb2e;
	--nt-tinta: #1d1433;
	--nt-suave: #55556a;
	--nt-acento: #3c58a4;
	--nt-fio: rgba(29, 20, 51, 0.12);
	--nt-fio-forte: rgba(29, 20, 51, 0.3);
	--nt-raio: 16px;
	--nt-margem: clamp(16px, 4vw, 48px);
	--nt-display: "Fraunces", Georgia, serif;
	--nt-texto: "Figtree", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- base do tema ---------- */
html:root { background-color: var(--nt-fundo); }
html body,
html body #wrapper,
html body #main {
	background-color: var(--nt-fundo);
}
html body {
	color: var(--nt-tinta);
	font-family: var(--nt-texto);
	-webkit-font-smoothing: antialiased;
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .heading-font {
	font-family: var(--nt-display);
	font-weight: 600;
	font-variation-settings: "SOFT" 100;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--nt-tinta);
}
html body .nav > li > a,
html body .button,
html body button,
html body input,
html body select,
html body textarea,
html body .mobile-sidebar .nav > li > a {
	font-family: var(--nt-texto);
}
html body a { color: var(--nt-acento); }
html body a:hover { color: var(--nt-tinta); }

/* ---------- cabeçalho: só o nome, sem ícone ---------- */
#top-bar { display: none; }
html body .header-wrapper,
html body .header-main,
html body .header-bg-color {
	background-color: var(--nt-fundo);
}
html body .header-main { border-bottom: 1px solid var(--nt-fio); }
html body .header-wrapper.stuck { box-shadow: none; }
html body #logo { width: auto !important; margin-right: 28px; }
html body #logo a { display: flex; align-items: center; text-decoration: none; }
html body #logo img { display: none; }
html body #logo a::after {
	content: "Noah Tuomi";
	font: 600 1.5rem/1 var(--nt-display);
	font-variation-settings: "SOFT" 100;
	letter-spacing: -0.02em;
	color: var(--nt-tinta);
	white-space: nowrap;
	text-transform: none;
}
html body .header-main .nav > li > a {
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--nt-suave);
}
html body .header-main .nav > li > a:hover,
html body .header-main .nav > li.active > a,
html body .header-main .nav > li.current-menu-item > a {
	color: var(--nt-tinta);
}
html body .header-main .nav > li.active > a,
html body .header-main .nav > li.current-menu-item > a {
	box-shadow: inset 0 -2px 0 var(--nt-acento);
}
html body .header-main .nav > li.header-divider { border-color: var(--nt-fio); }

/* ---------- botões, formulários e loja ---------- */
html body .button,
html body button.button,
html body input[type="submit"] {
	border-radius: 999px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
	box-shadow: none;
}
html body .button.primary:not(.is-outline):not(.is-link):not(.is-underline),
html body .button.alt,
html body .button.checkout,
html body .single_add_to_cart_button,
html body input[type="submit"] {
	background-color: var(--nt-vermelho);
	border-color: var(--nt-vermelho);
	color: #fff;
}
html body .button.is-outline { border-width: 1.5px; }
html body input[type="text"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="password"],
html body input[type="search"],
html body select,
html body textarea {
	border: 1px solid var(--nt-fio-forte);
	border-radius: 10px;
	box-shadow: none;
	background-color: #fff;
}
html body .box-image,
html body .img .img-inner { border-radius: var(--nt-raio); overflow: hidden; }
html body .product-small .name a,
html body .product-title a {
	font-family: var(--nt-texto);
	font-weight: 600;
	color: var(--nt-tinta);
}
html body .price,
html body span.amount { color: var(--nt-tinta); font-weight: 500; }
html body .badge-inner { border-radius: 999px; }

/* ---------- rodapé ---------- */
html body .footer-wrapper { background-color: var(--nt-azul); }
html body .absolute-footer.dark {
	background-color: var(--nt-azul) !important;
	color: #fff;
	padding-block: 34px 26px;
}
html body .absolute-footer.dark a { color: #e3e9f7; }
html body .absolute-footer .payment-icons { display: none; }

/* ---------- home ---------- */
.nt-home { color: var(--nt-tinta); }
.nt-home p { margin: 0; }
.nt-home img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.nt-home a { color: inherit; }
.nt-home a:focus-visible,
.nt-home button:focus-visible { outline: 3px solid var(--nt-amarelo); outline-offset: 3px; border-radius: 6px; }
.nt-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.nt-limite { max-width: 1240px; margin-inline: auto; padding-inline: var(--nt-margem); }
.nt-secao { padding-block: 76px; }
.nt-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: 30px; flex-wrap: wrap; }
html body .nt-titulo h2 { font-size: 2.3rem; line-height: 1.08; margin: 0; width: auto; }
.nt-home .nt-ligacao { font-weight: 600; font-size: 0.95rem; color: var(--nt-acento); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.nt-home .nt-botao { display: inline-block; font: 600 1rem/1 var(--nt-texto); padding: 15px 26px; border-radius: 999px; background: var(--nt-vermelho); color: #fff; text-decoration: none; }
.nt-centro { display: flex; justify-content: center; margin-top: 32px; }
.nt-home .nt-centro .nt-botao { background: var(--nt-azul); color: #fff; }

/* seções coloridas: o azul e o rosa do fundo da Prisma */
.nt-azul { background: var(--nt-azul); color: #fff; }
html body .nt-azul h2,
.nt-home .nt-azul .nt-ligacao { color: #fff; }
/* cor="rosa": fundo branco com uma faixa rosa passando atrás das peças, de ponta a ponta */
.nt-rosa { overflow: hidden; }
.nt-rosa .nt-produtos { position: relative; z-index: 0; }
.nt-rosa .nt-produto .nt-foto { position: relative; }
.nt-rosa .nt-produto .nt-foto::before { content: ""; position: absolute; z-index: -1; left: -100vw; right: -100vw; top: 28%; height: 44%; background: var(--nt-rosa); }

/* abertura de ponta a ponta; não gira sozinha */
.nt-heroi { position: relative; }
.nt-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.nt-trilho::-webkit-scrollbar { display: none; }
.nt-quadro { flex: 0 0 100%; min-width: 0; position: relative; height: clamp(480px, 48vw, 680px); scroll-snap-align: start; }
.nt-home .nt-quadro > img { position: absolute; inset: 0; }
.nt-quadro::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(to top, rgba(20, 10, 45, 0.66), rgba(20, 10, 45, 0)); pointer-events: none; }
/* o texto vai em branco direto sobre a imagem; o degradê embaixo é só para ele ler bem */
.nt-placa { position: absolute; z-index: 1; left: max(var(--nt-margem), calc((100vw - 1240px) / 2 + var(--nt-margem))); bottom: 60px; max-width: 620px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
html body .nt-placa h2 { font-size: clamp(2.3rem, 4.6vw, 4rem); line-height: 1.04; margin: 0; color: #fff; text-shadow: 0 2px 20px rgba(20, 10, 45, 0.5); }
.nt-home .nt-placa p { color: #fff; font-size: 1.25rem; text-shadow: 0 1px 12px rgba(20, 10, 45, 0.6); }
.nt-home .nt-placa .nt-botao,
.nt-home .nt-azul .nt-botao { background: var(--nt-amarelo); color: var(--nt-tinta); }
.nt-home .nt-placa .nt-botao { margin-top: 6px; }
.nt-aviso { font-weight: 700; font-size: 0.8rem; background: var(--nt-amarelo); border-radius: 999px; padding: 4px 12px; }
.nt-pontos { position: absolute; z-index: 1; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; gap: 4px; }
.nt-home .nt-pontos button { all: unset; box-sizing: content-box; width: 10px; height: 10px; padding: 8px 5px; cursor: pointer; transition: width 0.2s; }
.nt-home .nt-pontos button::before { content: ""; display: block; width: 100%; height: 100%; border-radius: 99px; background: rgba(255, 255, 255, 0.6); }
.nt-home .nt-pontos button.nt-ativo { width: 26px; }
.nt-home .nt-pontos button.nt-ativo::before { background: #fff; }
.nt-home .nt-pontos button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* atalhos: ícones grandes, de fundo transparente */
.nt-home ul.nt-atalhos { display: flex; justify-content: space-between; gap: 14px; padding-block: 44px 48px; margin-block: 0; list-style: none; }
.nt-home ul.nt-atalhos li { margin: 0; list-style: none; }
.nt-atalhos a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; font-size: 1rem; text-align: center; line-height: 1.25; width: 140px; }
.nt-atalhos svg { width: 112px; height: 112px; transition: transform 0.15s; }
.nt-atalhos a:hover svg,
.nt-atalhos a:focus-visible svg { transform: rotate(-4deg) scale(1.05); }

/* ilustrações: mosaico de ponta a ponta, sem moldura e sem corte */
.nt-topo-total { padding-top: 76px; }
.nt-mosaico { margin-bottom: 0; }
.nt-fileira,
.nt-par { display: flex; min-width: 0; }
.nt-fileira a { position: relative; display: block; min-width: 0; overflow: hidden; }
.nt-home .nt-fileira img { height: auto; transition: transform 0.3s; }
.nt-fileira a:hover img,
.nt-fileira a:focus-visible img { transform: scale(1.03); }
.nt-fileira span { position: absolute; left: 0; right: 0; bottom: 0; padding: 38px 18px 14px; color: #fff; font-weight: 600; font-size: 0.95rem; background: linear-gradient(to top, rgba(20, 10, 45, 0.6), rgba(20, 10, 45, 0)); opacity: 0; transition: opacity 0.2s; }
.nt-fileira a:hover span,
.nt-fileira a:focus-visible span { opacity: 1; }

/* murais: quatro quadrados */
.nt-quadrados { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.nt-quadrado { text-decoration: none; display: block; }
.nt-quadrado .nt-foto { aspect-ratio: 1; border-radius: var(--nt-raio); overflow: hidden; }
.nt-quadrado b { display: block; margin-top: 12px; font-weight: 600; }
.nt-quadrado small { display: block; font-size: 0.9rem; color: var(--nt-suave); }

/* loja: peças recortadas, direto no fundo */
.nt-produtos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.nt-produto { text-decoration: none; display: block; }
.nt-produto .nt-foto { aspect-ratio: 1 / 1.08; }
.nt-home .nt-produto .nt-foto img { object-fit: contain; object-position: center bottom; filter: drop-shadow(0 14px 16px rgba(29, 20, 51, 0.28)); transition: transform 0.18s; }
.nt-produto:hover .nt-foto img,
.nt-produto:focus-visible .nt-foto img { transform: translateY(-6px) rotate(-1.5deg); }
.nt-home .nt-produto.nt-sem-recorte .nt-foto img { object-fit: cover; filter: none; border-radius: var(--nt-raio); }
.nt-produto .nt-nome { display: block; font-weight: 600; font-size: 1rem; line-height: 1.35; margin-top: 18px; }
.nt-produto .nt-preco { display: block; font-size: 0.92rem; opacity: 0.85; }
.nt-produto .nt-preco span.amount { color: inherit; font-weight: 400; }

/* blog: imagem grande e o texto direto no fundo */
.nt-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.nt-post { text-decoration: none; display: block; }
.nt-post .nt-foto { aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: #f2f2f4; }
.nt-post .nt-texto { padding: 16px 4px 0; }
.nt-post time { font-size: 0.86rem; color: var(--nt-suave); }
html body .nt-post h3 { font-size: 1.7rem; line-height: 1.1; margin: 6px 0 12px; }

@media (max-width: 1000px) {
	.nt-quadro { height: clamp(460px, 118vw, 560px); }
	.nt-placa { left: var(--nt-margem); right: var(--nt-margem); bottom: 52px; max-width: none; gap: 8px; }
	.nt-home ul.nt-atalhos { overflow-x: auto; justify-content: flex-start; gap: 10px; padding: 26px var(--nt-margem) 28px; margin-inline: calc(var(--nt-margem) * -1); scrollbar-width: none; }
	.nt-home ul.nt-atalhos li { flex: none; }
	.nt-atalhos a { width: 96px; font-size: 0.88rem; }
	.nt-atalhos svg { width: 78px; height: 78px; }
	.nt-topo-total { padding-top: 52px; }
	.nt-fileira { flex-direction: column; }
	.nt-fileira span { opacity: 1; padding: 26px 10px 8px; font-size: 0.82rem; }
	.nt-quadrados,
	.nt-produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.nt-centro .nt-botao { width: 100%; text-align: center; }
	.nt-posts { grid-template-columns: 1fr; gap: 18px; }
	html body .nt-post h3 { font-size: 1.4rem; }
	.nt-secao { padding-block: 52px; }
	html body .nt-titulo h2 { font-size: 1.8rem; }
}
@media (max-width: 560px) {
	html body #logo a::after { font-size: 1.25rem; }
	.nt-home .nt-placa .nt-botao { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
	.nt-atalhos svg,
	.nt-home .nt-produto .nt-foto img,
	.nt-home .nt-pontos button,
	.nt-home .nt-fileira img,
	.nt-fileira span { transition: none; }
}