/*
Theme Name: Fotógrafo
Theme URI: https://xs733162.xsrv.jp/
Author: Fabiano
Description: Tema personalizado pra plataforma de fotógrafo — portfólio, informações de ensaios, preços, contato/agendamento e integração com a área privada de galerias (plugin Plataforma Fotógrafo). Sem page builder.
Version: 0.1.0
Requires PHP: 7.4
Text Domain: sp-fotografo
*/

/* ========================================================================
   Reset básico
   ======================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* Sem "scroll-behavior:smooth" global de propósito — essa propriedade
   aplicada no html inteiro é conhecida por conflitar com cabeçalho
   position:fixed e causar engasgo justamente no início do gesto de
   rolagem em vários navegadores/celulares (era a causa real do travamento
   relatado, não o JS do tema — confirmado com profiling de CPU real via
   Playwright, o JS do cabeçalho/fade-in usa menos de 1ms). O clique nos
   links âncora (#portfolio, #contato) ainda rola suave, via JS
   (scrollIntoView), sem afetar a física do scroll manual do usuário. */
html { overflow-x: hidden; }
/* "overflow-x:hidden" só no html, não no body: quando os dois têm
   overflow-x definido, o navegador calcula "overflow-y" do body como
   "auto" por baixo dos panos (regra do CSS pra evitar overflow visible+
   hidden misturado) — isso quebra "position:sticky" do cabeçalho (ele
   deixava de grudar no topo ao rolar, saía de tela junto com o resto da
   página). O html sozinho já barra rolagem horizontal indevida. */
body {
	margin: 0;
	background: #0b0b0c;
	color: #f4f0e8;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	/* Rodapé sempre no fim da tela (mesmo em páginas com pouco conteúdo):
	   body vira uma coluna flex de altura mínima igual à tela toda, e
	   ".sp-footer" (último elemento) recebe margin-top:auto — sem precisar
	   de um wrapper novo em volta do conteúdo de cada template. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
/* Campos de formulário no tamanho mínimo de 16px: abaixo disso o Safari
   do iPhone dá zoom automático ao focar o campo (comportamento do
   próprio navegador, não tem como desativar via CSS a não ser garantindo
   que a fonte já nasce grande o suficiente). */
input, textarea, select {
	font-size: 16px;
}
h1, h2, h3, h4 {
	font-family: 'Fraunces', Georgia, "Times New Roman", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 0.5em;
	letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }

:root {
	--sp-bg: #0b0b0c;
	--sp-bg-alt: #1a1918;
	--sp-fg: #f4f0e8;
	--sp-fg-muted: #9b9489;
	--sp-accent: #c9a35d;
	--sp-border: rgba(244, 240, 232, 0.12);
	--sp-max: 1160px;
	--sp-header-h: 84px;
}

.sp-container {
	max-width: var(--sp-max);
	margin: 0 auto;
	padding: 0 24px;
}

/* Sem barra de rolagem visível (a página continua rolando normalmente,
   só a barra não aparece). */
html {
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* Edge legado */
}
::-webkit-scrollbar {
	display: none; /* Chrome, Edge, Safari */
}

/* ========================================================================
   Cabeçalho
   ======================================================================== */
/* Cabeçalho transparente sobre o hero, sólido ao rolar — position:sticky
   (nunca fixed: fixed exige repaint a cada frame de rolagem, sticky é
   resolvido pelo compositor). A causa real do engasgo relatado em
   2026-08-02 era o efeito de fade-in (ver seção "Fade-in ao rolar" mais
   abaixo), não o cabeçalho — confirmado isolando cada peça isoladamente
   (histórico completo no fim deste arquivo). */
.sp-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s ease;
}
/* Fundo sólido ao rolar como camada própria (opacity, acelerado por GPU)
   em vez de transicionar "background" direto — mais barato de repintar. */
.sp-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #0b0b0c;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.sp-header.is-scrolled::before {
	opacity: 1;
}
.sp-header.is-scrolled {
	border-bottom-color: var(--sp-border);
}
/* Compensa o cabeçalho ao rolar pra uma âncora (#portfolio, #contato),
   senão o título da seção fica escondido atrás dele. */
[id] {
	scroll-margin-top: var(--sp-header-h);
}
.sp-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	max-width: var(--sp-max);
	margin: 0 auto;
}
.sp-logo {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 1.4rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.sp-logo img { max-height: 44px; }
.sp-nav ul { display: flex; gap: 32px; }
.sp-nav a {
	font-size: 0.92rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sp-fg-muted);
	transition: color 0.2s;
}
.sp-nav a:hover, .sp-nav a.current { color: var(--sp-accent); }
@media (min-width: 781px) {
	.sp-nav a { color: var(--sp-fg); }
}

.sp-nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--sp-border);
	color: var(--sp-fg);
	padding: 8px 12px;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.sp-nav-close { display: none; }
.sp-nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(11, 11, 12, 0.7);
	backdrop-filter: blur(2px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 199;
}

@media (max-width: 780px) {
	.sp-nav {
		position: fixed;
		top: 0;
		right: 0;
		height: 100vh;
		width: min(320px, 82vw);
		display: flex;
		flex-direction: column;
		background: var(--sp-bg-alt);
		border-left: 1px solid var(--sp-border);
		padding: 90px 32px 32px;
		transform: translateX(100%);
		transition: transform 0.35s ease;
		z-index: 200;
		overflow-y: auto;
	}
	.sp-nav.is-open { transform: translateX(0); }
	.sp-header-inner { flex-wrap: wrap; }
	.sp-nav ul { flex-direction: column; gap: 4px; }
	.sp-nav li { border-bottom: 1px solid var(--sp-border); }
	.sp-nav a { display: block; padding: 16px 0; font-size: 1rem; }
	.sp-nav-toggle { display: block; }
	.sp-nav-close {
		display: block;
		position: absolute;
		top: 24px;
		right: 24px;
		background: none;
		border: 1px solid var(--sp-border);
		color: var(--sp-fg);
		width: 40px;
		height: 40px;
		font-size: 1.1rem;
		cursor: pointer;
	}
	.sp-nav-overlay.is-open { opacity: 1; pointer-events: auto; }
	body.sp-nav-locked { overflow: hidden; }
}

/* ========================================================================
   Hero
   ======================================================================== */
.sp-hero {
	position: relative;
	min-height: 82vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: radial-gradient(circle at 50% 20%, #1a1918 0%, #0b0b0c 70%);
	background-size: cover;
	background-position: center;
	padding: 60px 24px;
	overflow: hidden;
}
/* Só na inicial: puxa o hero pra cima por baixo do cabeçalho — o
   cabeçalho continua sticky normal (ocupando espaço no fluxo), só o fundo
   do hero se estende por baixo dele via margem negativa. Custo zero por
   quadro de rolagem (é só um deslocamento fixo de CSS, não anima nada). */
body.home .sp-hero {
	margin-top: calc(-1 * var(--sp-header-h));
	padding-top: calc(60px + var(--sp-header-h));
}
.sp-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 11, 12, 0.55) 0%, rgba(11, 11, 12, 0.75) 55%, rgba(11, 11, 12, 0.92) 100%);
	z-index: 1;
}
.sp-hero-content { position: relative; z-index: 2; }
.sp-hero-tag {
	display: inline-block;
	color: var(--sp-accent);
	text-transform: uppercase;
	letter-spacing: 0.25em;
	font-size: 0.8rem;
	margin-bottom: 18px;
}
.sp-hero h1 { margin-bottom: 0.3em; }
.sp-hero-subtitle {
	color: var(--sp-fg-muted);
	font-size: 1.15rem;
	max-width: 560px;
	margin: 0 auto 2em;
}
.sp-hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ========================================================================
   Botões
   ======================================================================== */
.sp-btn {
	display: inline-block;
	padding: 14px 32px;
	border: 1px solid var(--sp-accent);
	color: var(--sp-accent);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.85rem;
	transition: background 0.2s, color 0.2s;
}
.sp-btn:hover { background: var(--sp-accent); color: #0b0b0c; }
.sp-btn-solid { background: var(--sp-accent); color: #0b0b0c; }
.sp-btn-solid:hover { background: transparent; color: var(--sp-accent); }

/* ========================================================================
   Seções
   ======================================================================== */
.sp-section { padding: 90px 0; }
.sp-section-alt { background: var(--sp-bg-alt); }
.sp-section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.sp-section-head .sp-eyebrow {
	color: var(--sp-accent);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.8rem;
	display: block;
	margin-bottom: 12px;
}
.sp-section-head p { color: var(--sp-fg-muted); }

.sp-content-area { padding: 90px 0; }
.sp-content-area .sp-container > * :first-child { margin-top: 0; }

/* Galeria nativa do WP (Adicionar Mídia → Criar Galeria) usada no portfólio.
   Numeração "Nº 01, 02..." em cada item, no estilo editorial de referência —
   feita só com contador de CSS, sem precisar tocar no HTML/bloco de galeria. */
.sp-container .gallery {
	counter-reset: sp-portfolio;
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 4px !important;
}
/* O portfólio de hoje na prática usa o bloco de galeria do editor
   (Gutenberg, `wp-block-gallery`), não o shortcode clássico `[gallery]`
   que as regras ".gallery"/".gallery-item" acima miravam — por isso força
   4 colunas iguais direto nesse bloco. No layout padrão dele (flex,
   "columns-default"), a última imagem sobrando sozinha na linha esticava
   pra ocupar a linha toda; virando grid isso não acontece mais. */
@media (min-width: 781px) {
	.sp-container .wp-block-gallery.columns-default {
		display: grid !important;
		grid-template-columns: repeat(4, 1fr);
		gap: 4px;
	}
	.sp-container .wp-block-gallery.columns-default figure.wp-block-image {
		width: auto !important;
		margin: 0 !important;
	}
}
.sp-container .gallery-item {
	counter-increment: sp-portfolio;
	position: relative;
	margin: 0 !important;
	width: auto !important;
	overflow: hidden;
}
.sp-container .gallery img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(15%); transition: filter 0.4s, transform 0.6s; }
.sp-container .gallery-item:hover img { filter: grayscale(0%); transform: scale(1.05); }
.sp-container .gallery-caption { display: none; }
.sp-container .gallery-item::before {
	content: "Nº " counter(sp-portfolio, decimal-leading-zero);
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	font-family: 'Fraunces', Georgia, serif;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	color: var(--sp-fg);
	background: rgba(11, 11, 12, 0.55);
	backdrop-filter: blur(3px);
	padding: 4px 10px;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.3s, transform 0.3s;
}
.sp-container .gallery-item:hover::before { opacity: 1; transform: translateY(0); }

/* ========================================================================
   Preços
   ======================================================================== */
.sp-pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 32px;
}
.sp-pricing-card {
	border: 1px solid var(--sp-border);
	padding: 40px 32px;
	text-align: center;
}
.sp-pricing-card.is-destaque { border-color: var(--sp-accent); }
.sp-pricing-card h3 { margin-bottom: 0.2em; }
.sp-pricing-card .sp-price {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 2.2rem;
	color: var(--sp-accent);
	margin: 16px 0;
}
.sp-pricing-card ul { color: var(--sp-fg-muted); margin-bottom: 24px; }
.sp-pricing-card li { padding: 6px 0; border-bottom: 1px dashed var(--sp-border); }
.sp-pricing-card li:last-child { border-bottom: none; }

/* ========================================================================
   Contato / Agendamento
   ======================================================================== */
.sp-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}
@media (max-width: 780px) { .sp-contact-grid { grid-template-columns: 1fr; } }
/* Sem telefone/e-mail/WhatsApp/endereço preenchidos no Personalizador, não
   existe coluna de informações — o formulário sozinho fica centralizado em
   vez de "sobrar" pro lado direito do grid de 2 colunas. */
.sp-contact-grid-sem-info {
	grid-template-columns: 1fr;
	max-width: 560px;
	margin: 0 auto;
}

.sp-contact-info a { color: var(--sp-accent); }
.sp-contact-info li { padding: 10px 0; border-bottom: 1px solid var(--sp-border); }

.sp-form label { display: block; margin-bottom: 18px; font-size: 0.9rem; color: var(--sp-fg-muted); }
.sp-form input, .sp-form textarea {
	width: 100%;
	margin-top: 6px;
	padding: 12px 14px;
	background: var(--sp-bg-alt);
	border: 1px solid var(--sp-border);
	color: var(--sp-fg);
	font-family: inherit;
	font-size: 1rem;
}
.sp-form input:focus, .sp-form textarea:focus { outline: none; border-color: var(--sp-accent); }
.sp-form textarea { min-height: 130px; resize: vertical; }
.sp-form-hp { position: absolute; left: -9999px; }
.sp-form-msg { padding: 14px 18px; margin-bottom: 24px; }
.sp-form-msg.sucesso { background: #1e2c1e; border: 1px solid #3c5c3c; }
.sp-form-msg.erro { background: #2c1e1e; border: 1px solid #5c3c3c; }

/* ========================================================================
   Rodapé
   ======================================================================== */
.sp-footer {
	border-top: 1px solid var(--sp-border);
	padding: 40px 24px;
	text-align: center;
	color: var(--sp-fg-muted);
	font-size: 0.85rem;
	margin-top: auto;
}
.sp-footer-social { display: flex; justify-content: center; gap: 20px; margin-bottom: 16px; }
.sp-footer-social a { color: var(--sp-fg-muted); }
.sp-footer-social a:hover { color: var(--sp-accent); }

/* Galeria do plugin Plataforma Fotógrafo (área privada) herda a mesma paleta */
.sp-pf-galeria-wrap { color: var(--sp-fg); }
.sp-pf-item { background: var(--sp-bg-alt); border-color: var(--sp-border); }
.sp-pf-acoes .button, .sp-pf-acoes .button-primary { display: inline-block; padding: 10px 20px; border: 1px solid var(--sp-accent); color: var(--sp-accent); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.08em; }
.sp-pf-acoes .button-primary { background: var(--sp-accent); color: #0b0b0c; }
.sp-pf-aviso-sucesso { background: var(--sp-bg-alt); border: 1px solid var(--sp-accent); color: var(--sp-fg); }
.sp-pf-cart-bar {
	background: #0b0b0c;
	border-top: 1px solid var(--sp-border);
	color: var(--sp-fg);
	font-size: 0.9rem;
}
.sp-pf-cart-bar-acoes .button {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid var(--sp-accent);
	color: var(--sp-accent);
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
}
.sp-pf-cart-bar-acoes .button-primary { background: var(--sp-accent); color: #0b0b0c; }
.sp-pf-add-cart-btn.sp-pf-no-carrinho { background: transparent; border-color: var(--sp-border); color: var(--sp-fg-muted); }
.sp-pf-minhas-fotos-item { border-color: var(--sp-border); }
.sp-pf-minhas-fotos-nome { color: var(--sp-fg); }
.sp-pf-cart-bar-progresso { color: var(--sp-fg-muted); }
.sp-pf-cart-bar-progresso--ok { color: var(--sp-accent); }
.sp-pf-tabela-precos { border-color: var(--sp-border); margin-left: auto; margin-right: auto; }
.sp-pf-tabela-precos td { border-color: var(--sp-border); }
.sp-pf-tabela-precos td:last-child { color: var(--sp-accent); }
.sp-pf-tabela-precos-nota { color: var(--sp-fg-muted); }
.sp-pricing-cta { text-align: center; margin-top: 24px; }

/* ========================================================================
   Fade-in ao rolar
   ======================================================================== */
/* Só "opacity" — nada de "transform" (o translateY da 1ª versão pedia
   compositing extra em cima de fotos grandes ainda carregando/decodificando
   ao entrar na tela, provável causa real do engasgo reportado). Também
   dispara bem antes do item aparecer de verdade (ver rootMargin no JS),
   pra animação já ter terminado quando o usuário chega lá — não rodar
   "ao vivo" durante o gesto de rolagem. */
.sp-fade-in {
	opacity: 0;
	transition: opacity 0.5s ease-out;
}
.sp-fade-in.is-visible {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.sp-fade-in { opacity: 1; transition: none; }
}

/* ========================================================================
   WooCommerce — Minha Conta, Carrinho, Checkout
   (classes padrão do WooCommerce, sem alterar HTML/templates)
   ======================================================================== */
.woocommerce {
	color: var(--sp-fg);
}
.woocommerce a { color: inherit; }
.woocommerce a:hover { color: var(--sp-accent); text-decoration: underline; }

/* Botões (Acessar, Atualizar carrinho, Finalizar compra, Fazer pedido...) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #place_order {
	display: inline-block;
	background: var(--sp-accent);
	color: #0b0b0c;
	border: 1px solid var(--sp-accent);
	border-radius: 0;
	padding: 14px 32px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.85rem;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #place_order:hover {
	background: transparent;
	color: var(--sp-accent);
	text-decoration: none;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt { background: var(--sp-accent); color: #0b0b0c; }

/* Campos de formulário (login, endereço, pagamento) */
.woocommerce form .form-row label { color: var(--sp-fg-muted); font-size: 0.9rem; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce table.shop_table td select,
.woocommerce-page input.input-text,
.woocommerce-page textarea {
	background: var(--sp-bg-alt);
	border: 1px solid var(--sp-border);
	color: var(--sp-fg);
	padding: 10px 12px;
	font-family: inherit;
	border-radius: 0;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-page input.input-text:focus { outline: none; border-color: var(--sp-accent); }
.woocommerce ::placeholder { color: var(--sp-fg-muted); opacity: 0.7; }
.select2-container .select2-selection--single {
	background: var(--sp-bg-alt) !important;
	border: 1px solid var(--sp-border) !important;
	border-radius: 0 !important;
}
.select2-container .select2-selection__rendered { color: var(--sp-fg) !important; }
.select2-dropdown { background: var(--sp-bg-alt) !important; border-color: var(--sp-border) !important; }
.select2-results__option { color: var(--sp-fg) !important; }
.select2-results__option--highlighted { background: var(--sp-accent) !important; color: #0b0b0c !important; }

/* Avisos (mensagens de sucesso/erro/info). O WooCommerce usa um ícone
   (::before, fonte própria "WooCommerce") posicionado absoluto à esquerda,
   por isso precisa do padding-left reservando espaço pra ele — sem isso o
   ícone fica sobreposto/por cima do começo do texto. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
.woocommerce-form-login-toggle,
.woocommerce-notice {
	background: var(--sp-bg-alt);
	border-top: 3px solid var(--sp-accent);
	color: var(--sp-fg);
	padding: 1em 20px 1em 3.5em;
	position: relative;
	list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-notice::before { color: var(--sp-accent); }
.woocommerce-error { border-top-color: #a35d5d; }
.woocommerce-error::before { color: #a35d5d; }

/* Formulários de login/cadastro/redefinir senha: centralizados e com
   largura limitada no desktop, senão os campos ficam esticados de ponta a
   ponta da página. Seletor com "form." na frente de propósito — o
   WooCommerce tem uma regra "form.login{margin:2em 0}" com mais
   especificidade que ".woocommerce-form-login" sozinho, que vencia e
   zerava a margem lateral mesmo depois desta regra (carregada depois no
   CSS, mas especificidade sempre ganha de ordem de carregamento). */
@media (min-width: 781px) {
	form.woocommerce-form-login,
	form.woocommerce-form-register,
	form.woocommerce-ResetPassword {
		max-width: 460px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* Minha Conta */
.woocommerce-MyAccount-navigation ul { border-bottom: 1px solid var(--sp-border); margin-bottom: 24px; padding-bottom: 12px; }
.woocommerce-MyAccount-navigation li { display: block; margin: 0 0 12px; }
.woocommerce-MyAccount-navigation a {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.85rem;
	color: var(--sp-fg-muted);
}
.woocommerce-MyAccount-navigation li.is-active a { color: var(--sp-accent); }

/* "Entrar" (heading nativo do form de login do WooCommerce) ficava pesado
   em cima do "Minha Conta" — Fabiano pediu pra tirar só esse (o h1 "Minha
   Conta" voltou a aparecer, ele pediu de volta depois). Escopado só na
   página Minha Conta (body.woocommerce-account), não mexe em h2 de outros
   contextos do WooCommerce. */
body.woocommerce-account .woocommerce h2:has( + form.woocommerce-form-login ) {
	display: none;
}
.woocommerce-MyAccount-content table,
.woocommerce-orders-table { border-color: var(--sp-border); }
.account-orders-table th,
.woocommerce-orders-table__header { color: var(--sp-fg-muted); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.06em; }

/* Carrinho */
.woocommerce table.shop_table {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid var(--sp-border);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-bottom: 1px solid var(--sp-border);
	padding: 14px 12px;
}
.woocommerce table.shop_table th { color: var(--sp-fg-muted); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.06em; text-align: left; }
.woocommerce td.product-name a { color: var(--sp-fg); }
.woocommerce td.actions .coupon .input-text { width: auto; }
.woocommerce .cart_totals { border-top: 1px solid var(--sp-border); padding-top: 16px; }
.woocommerce .cart_totals table { border: none; }
.woocommerce .cart_totals .order-total .amount { color: var(--sp-accent); font-family: 'Fraunces', Georgia, serif; font-size: 1.3rem; }
.woocommerce a.remove { color: var(--sp-fg-muted) !important; }
.woocommerce a.remove:hover { color: #a35d5d !important; background: transparent !important; }

/* Checkout */
.woocommerce-checkout-review-order-table { background: var(--sp-bg-alt); }
.woocommerce-checkout #payment { background: var(--sp-bg-alt); border-top: 1px solid var(--sp-border); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--sp-border); }
.woocommerce-checkout #payment div.payment_box { background: rgba(244, 240, 232, 0.05); color: var(--sp-fg-muted); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: rgba(244, 240, 232, 0.05); }

/* Checkout em blocos do WooCommerce (Store API/React, "Finalizar Compra")
   — usa classes bem diferentes do checkout clássico acima
   (`wc-block-components-*`), o CSS de cima não tinha efeito nenhum aí.
   Campos vinham com fundo branco/texto claro (quase ilegível). */
.wc-block-components-text-input input,
.wc-blocks-components-select__select,
.wc-block-components-textarea {
	background: var(--sp-bg-alt) !important;
	border: 1px solid var(--sp-border) !important;
	color: var(--sp-fg) !important;
	border-radius: 0 !important;
}
.wc-block-components-text-input label,
.wc-blocks-components-select__label {
	color: var(--sp-fg-muted) !important;
}
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
	border-color: var(--sp-accent) !important;
	box-shadow: none !important;
}
.wc-block-components-checkout-place-order-button {
	background: var(--sp-accent) !important;
	color: #0b0b0c !important;
	border: 1px solid var(--sp-accent) !important;
	border-radius: 0 !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.wc-block-components-checkout-place-order-button:hover {
	background: transparent !important;
	color: var(--sp-accent) !important;
}
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-content {
	background: var(--sp-bg-alt) !important;
	border-color: var(--sp-border) !important;
	color: var(--sp-fg) !important;
}
.wc-block-components-radio-control__secondary-label,
.wc-block-components-payment-method-label {
	color: var(--sp-fg) !important;
}
.wc-block-components-checkout-step__title,
.wc-block-components-title { color: var(--sp-fg); }
.wc-block-components-checkbox__label { color: var(--sp-fg-muted); }

/* Campo Prefeitura (state) grudado no campo de cima: os campos de texto
   (.wc-block-components-text-input) do checkout em blocos vêm com
   margin-top de 12px de fábrica, mas o wrapper do campo de estado
   (.wc-block-components-state-input) não tem essa margem — confirmado via
   getComputedStyle ao vivo (margin-top:0 nesse wrapper, 12px nos demais).
   Mesmo ajuste no país por segurança, caso volte a aparecer no futuro. */
.wc-block-components-address-form__state,
.wc-block-components-address-form__country {
	margin-top: 12px;
}

/* Marca de campo obrigatório no checkout em blocos — o WooCommerce só
   sinaliza os OPCIONAIS (sufixo "(opcional)" no texto do label), não tem
   marca nenhuma pros obrigatórios por padrão. IDs fixos (não dá pra achar
   por classe/atributo "required" porque isso só existe no <input>, não no
   <label>, e o CSS não tem :has(sibling-anterior)). */
label[for="email"]::after,
label[for="billing-first_name"]::after,
label[for="billing-last_name"]::after,
label[for="billing-postcode"]::after,
label[for="billing-state"]::after,
label[for="billing-city"]::after,
label[for="billing-address_1"]::after,
label[for="billing-phone"]::after {
	content: " *";
	color: #c0392b;
}

/* Campo País: "Localização de vendas" já restrita só ao Japão (opção
   woocommerce_specific_allowed_countries), então o valor já vem sempre
   "Japão" sozinho — mas o checkout em blocos continua desenhando o
   dropdown mesmo tendo só 1 opção possível (não esconde sozinho como em
   versões antigas do WooCommerce Blocks). Como não há outra opção pra
   escolher, esconder aqui é seguro — não muda o valor enviado. */
.wc-block-components-address-form__country {
	display: none;
}

/* ---------- depoimentos (home) ---------- */
.sp-depoimentos-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--sp-border);
	border: 1px solid var(--sp-border);
}
.sp-depoimento {
	background: var(--sp-bg);
	padding: 40px 32px;
	display: flex;
	flex-direction: column;
}
.sp-depoimento-texto {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 17px;
	line-height: 1.65;
	color: var(--sp-fg);
	margin: 0 0 24px;
	flex: 1;
}
.sp-depoimento-autor {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--sp-accent);
}
.sp-depoimento-tipo {
	font-size: 12.5px;
	color: var(--sp-fg-muted);
	margin-top: 2px;
}
@media (max-width: 860px) {
	.sp-depoimentos-grid { grid-template-columns: 1fr; }
}

/* Tabela da pagina 特定商取引法に基づく表記 (tokushoho) - 2026-08-04, exigida pra aprovacao
   do Stripe. */
.sp-tokushoho-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 30px;
}
.sp-tokushoho-table tr {
	border-top: 1px solid var(--sp-border);
}
.sp-tokushoho-table tr:last-child {
	border-bottom: 1px solid var(--sp-border);
}
.sp-tokushoho-table th,
.sp-tokushoho-table td {
	text-align: left;
	vertical-align: top;
	padding: 16px 0;
	font-weight: 400;
	line-height: 1.7;
}
.sp-tokushoho-table th {
	width: 220px;
	color: var(--sp-accent);
	font-size: 13px;
	letter-spacing: 0.04em;
	padding-right: 24px;
}
.sp-tokushoho-table td {
	color: var(--sp-fg);
	font-size: 14px;
}
@media (max-width: 700px) {
	.sp-tokushoho-table tr {
		display: block;
		padding: 16px 0;
	}
	.sp-tokushoho-table th,
	.sp-tokushoho-table td {
		display: block;
		width: 100%;
		padding: 0;
	}
	.sp-tokushoho-table th {
		margin-bottom: 6px;
	}
}

.sp-footer-legal {
	margin-bottom: 10px;
}
.sp-footer-legal a {
	text-decoration: none;
}
.sp-footer-legal a:hover {
	color: var(--sp-accent);
}

/* Página Contato (CF7) - 2026-08-04, reaproveita a paleta do .sp-form existente */
.sp-form select {
	width: 100%;
	margin-top: 6px;
	padding: 12px 14px;
	background: var(--sp-bg-alt);
	border: 1px solid var(--sp-border);
	color: var(--sp-fg);
	font-family: inherit;
	font-size: 1rem;
}
.sp-form select:focus { outline: none; border-color: var(--sp-accent); }
.wpcf7-form label { display: block; margin-bottom: 18px; }
.wpcf7 form .wpcf7-response-output {
	padding: 14px 18px;
	margin: 20px 0 0;
	border: 1px solid var(--sp-border);
	color: var(--sp-fg);
}
.wpcf7 form.sent .wpcf7-response-output { background: #1e2c1e; border-color: #3c5c3c; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { background: #2c1e1e; border-color: #5c3c3c; }
.wpcf7-not-valid-tip { color: #e08a8a; font-size: 0.8rem; margin-top: 4px; }
/* Botão de envio dos formulários CF7 - mesmo estilo do .sp-btn.sp-btn-solid do resto do site */
.sp-form .wpcf7-submit,
.wpcf7-form input.wpcf7-submit {
	display: inline-block;
	padding: 14px 32px;
	border: 1px solid var(--sp-accent);
	background: var(--sp-accent);
	color: #0b0b0c;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.85rem;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.sp-form .wpcf7-submit:hover,
.wpcf7-form input.wpcf7-submit:hover {
	background: transparent;
	color: var(--sp-accent);
}
/* Seção "Loja" na home - grid de produtos de exemplo (2026-08-04) */
.sp-loja-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.sp-loja-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--sp-fg);
	transition: opacity 0.2s;
}
.sp-loja-item:hover { opacity: 0.8; }
.sp-loja-img {
	aspect-ratio: 3/4;
	overflow: hidden;
	background: var(--sp-bg-alt);
}
.sp-loja-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sp-loja-nome {
	font-size: 0.95rem;
}
.sp-loja-preco {
	color: var(--sp-accent);
	font-size: 0.9rem;
}
@media (max-width: 860px) {
	.sp-loja-grid { grid-template-columns: repeat(2, 1fr); }
}