/*
Theme Name: Circo Astro
Theme URI: https://circoastrooficial.com.br
Author: Circo Astro
Description: Tema próprio (clássico, em PHP) para a bilheteria online do Circo Astro — venda de ingressos com WooCommerce. Fork do tema do Circo de Roma; regras comerciais do circo de origem nascem desligadas (ver CLAUDE.md).
Version: 0.9.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: circo-astro
*/

/* ============================================================
   1. VARIÁVEIS — Paleta de cores e tipografia
   ============================================================

   Paleta roxo/dourado equilibrada: elegante sem ser pesada,
   familiar sem ser infantil.
   ============================================================ */
:root {
	/* --- PALETA DO CIRCO ASTRO — derivada da logo (04/09/2026) ---
	   A logo é um letreiro de lâmpadas douradas sobre azul-marinho
	   profundo, com holofotes vermelhos e o chão em brasa. Pedido da
	   Isa: "na cor desse fundo... degradê azul e vermelho". Então:
	   fundo = azul-marinho; o vermelho entra como degradê no pé da
	   página e nos holofotes, nunca como cor de bloco; o dourado do
	   letreiro fica para CTAs, títulos e lâmpadas.

	   Os NOMES dos tokens (--ast-roxo…) são herança do tema de origem
	   e valem pelo PAPEL (cor de destaque, fundo do header…), não pela
	   cor. Renomear tudo custaria um passe na folha inteira. */

	/* --- Vermelho da logo — destaque quente (holofotes, erro, selo) --- */
	--ast-roxo:          #D7263D; /* vermelho do letreiro; elementos de destaque */
	--ast-roxo-escuro:   #0F1B4D; /* fundo do header (papel herdado do nome) */
	--ast-roxo-profundo: #08103A; /* tons mais densos */

	/* --- Dourado do letreiro --- */
	--ast-dourado:       #F2B400; /* botões, títulos em fundo escuro */
	--ast-dourado-hover: #FFC93C; /* estado hover do dourado */

	/* --- Noite de circo — paleta escura ---
	   Azul-marinho da logo + dourado de lâmpada. Estes tokens alimentam
	   a camada de redesign no fim do arquivo. */
	--ast-fundo-base:       #0A1238; /* background geral das páginas */
	--ast-fundo-secao:      rgba(14, 26, 79, 0.82); /* seções alternadas; translúcido para o degradê do body aparecer */
	--ast-card-grad:        linear-gradient(180deg, #172866, #0F1B4D); /* cards */
	--ast-header-grad:      linear-gradient(180deg, #12205A, #0A1238); /* header */
	--ast-footer-bg:        #060C28;
	--ast-dourado-claro:    #FFE08A;                  /* borda dos CTAs, lâmpadas */
	--ast-texto-claro:      #FFF6E5;                  /* títulos sobre escuro */
	--ast-texto-suave-esc:  rgba(255, 255, 255, 0.6); /* secundários no escuro */
	--ast-borda-ouro:       rgba(242, 180, 0, 0.45);  /* borda 1px dos cards */
	--ast-borda-ouro-fraca: rgba(242, 180, 0, 0.3);   /* separadores */
	--ast-sucesso:          #7FD98A;                  /* disponibilidade, check */
	--ast-erro:             #FF6B6B;                  /* esgotado, remover item */
	--ast-cta-grad:         linear-gradient(180deg, #FFC93C, #E09A00); /* CTA dourado */
	--ast-cta-glow:         0 0 34px rgba(242, 180, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	--ast-cta-glow-hover:   0 0 50px rgba(255, 201, 60, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	--ast-tinta-escura:     #101A45; /* texto sobre dourado: azul-marinho */

	/* --- Degradê azul → vermelho da logo (usado no body, seção 15) --- */
	--ast-degrade-topo:     #0A1238;
	--ast-degrade-meio:     #0F1B4D;
	--ast-degrade-brasa:    #6E0F24;
	--ast-degrade-chao:     #A8142B;

	/* --- Neutros quentes --- */
	--ast-creme:         #F8F2E8; /* fundo geral — mármore aquecido */
	--ast-branco:        #FFFFFF;
	--ast-texto:         #1E0E08; /* texto principal — quase preto, tom quente */
	--ast-texto-suave:   #6B5040; /* legendas, textos secundários */
	--ast-borda:         #E8D8C8; /* bordas sutis — tom terracota claro */

	/* --- Tipografia ---
	   Duas variáveis controlam todo o sistema de fontes do tema.
	   Para trocar as fontes no futuro, basta alterar aqui — todos os
	   elementos herdam automaticamente.

	   --fonte-titulo → Playfair Display (Google Fonts)
	     Serifada, elegante, teatral. Usada em h1–h3, títulos de sessão,
	     nome do circo no footer e outros elementos de destaque.
	     Carregada com normal + itálico, pesos 400 e 700.

	   --fonte-corpo → Lato (Google Fonts)
	     Sem serifa, limpa e altamente legível em telas pequenas.
	     Usada no body, parágrafos, preços, botões e labels.
	     Carregada com pesos 400 e 700.

	   Ambas carregadas em functions.php com preconnect + display=swap. */
	--fonte-titulo: 'Playfair Display', Georgia, serif;
	--fonte-corpo:  'Lato', system-ui, -apple-system, sans-serif;

	/* --- Layout --- */
	--container-max: 1140px;
	--gap:           1.5rem;
	--raio:          6px;

	/* --- Transições --- */
	--trans: 0.2s ease;
}

/* ============================================================
   1b. OVERRIDE DAS VARIÁVEIS DO WOOCOMMERCE
   ============================================================
   O WooCommerce define --wc-primary em :root (especificidade 0-1-0).
   Se usarmos :root aqui, o CSS do WooCommerce (que carrega por último)
   ganha o empate de especificidade e o botão volta a ser roxo.
   Solução: declarar em `body` (especificidade 0-0-1). Embora `body` seja
   menos específico que :root, como elemento ele é FILHO do html/:root —
   então qualquer elemento dentro de body herda PRIMEIRO o valor de body
   (vizinho mais próximo), sobrepondo o valor herdado de :root.
   ============================================================ */
body {
	--woocommerce:      var(--ast-dourado);    /* cor de destaque WC → dourado */
	--wc-primary:       var(--ast-dourado);    /* botões primários WC → dourado */
	--wc-primary-text:  var(--ast-roxo-profundo); /* texto sobre botão primário */
	--wc-highlight:     var(--ast-roxo);       /* links e destaques WC → vermelho */
}

/* ============================================================
   2. RESET E BASE
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

html {
	height: 100%;
}

body {
	margin: 0;
	font-family: var(--fonte-corpo);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ast-texto);
	background-color: var(--ast-creme);

	/* Sticky footer: o body ocupa a altura total da janela como coluna flex.
	   O <main class="site-content"> cresce (flex: 1) e empurra o footer
	   para o fundo — mesmo quando o conteúdo é curto. */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* O <main> cresce para preencher o espaço disponível entre header e footer */
.site-content {
	flex: 1;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--ast-roxo);
	text-decoration: none;
	transition: color var(--trans);
}
a:hover {
	color: var(--ast-roxo-escuro);
}

/* ============================================================
   3. TIPOGRAFIA
   ============================================================

   Hierarquia de fontes:
     h1, h2, h3  → Playfair Display (display/título) — peso visual alto
     h4, h5, h6  → Lato (corpo) — para subtítulos e labels menores
     body, p, li → Lato (herança do body)
   ============================================================ */

/* Títulos principais — Playfair Display */
h1, h2, h3 {
	font-family: var(--fonte-titulo);
	font-weight: 700;
	line-height: 1.25;
	color: var(--ast-roxo-profundo);
	margin-top: 0;
}

/* Subtítulos — Lato (mesmo peso visual do corpo, mas maior) */
h4, h5, h6 {
	font-family: var(--fonte-corpo);
	font-weight: 700;
	line-height: 1.3;
	color: var(--ast-roxo-profundo);
	margin-top: 0;
}

/* ============================================================
   4. CONTAINER / LAYOUT
   ============================================================

   CONCEITO: usamos uma div.container dentro de cada seção para
   limitar a largura do conteúdo ao centro e adicionar padding
   lateral nas telas menores. */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gap);
}

/* Páginas comuns do tema (ex.: "Sobre", "Contato") renderizadas por page.php.
   O .container já centraliza e dá padding lateral; aqui só damos respiro
   vertical para o conteúdo não colar no header/footer. */
.pagina-conteudo {
	padding-block: 3rem 4rem;
}

/* ============================================================
   5. ACESSIBILIDADE
   ============================================================ */

/* Link "pular para o conteúdo" — invisível até receber foco
   (Tab). Essencial para usuários de teclado e leitores de tela. */
.skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	padding: 0.5rem 1rem;
	background: var(--ast-dourado);
	color: var(--ast-roxo-profundo);
	font-weight: 700;
	border-radius: var(--raio);
	z-index: 9999;
}
.skip-link:focus {
	top: 1rem;
}

/* ============================================================
   6. BOTÕES
   ============================================================ */
.btn {
	display: inline-block;
	padding: 0.65rem 1.5rem;
	border-radius: var(--raio);
	font-family: var(--fonte-corpo);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	border: none;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--trans), color var(--trans), transform var(--trans);
}

/* Botão principal: dourado com texto roxo escuro */
.btn-primario {
	background-color: var(--ast-dourado);
	color: var(--ast-roxo-profundo);
}
.btn-primario:hover {
	background-color: var(--ast-dourado-hover);
	color: var(--ast-roxo-profundo);
	transform: translateY(-1px);
}

/* ============================================================
   7. HEADER
   ============================================================ */
.site-header {
	background-color: var(--ast-roxo-escuro);
	position: sticky; /* fica fixo no topo ao rolar a página */
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-left: 0;        /* logo rente à borda esquerda */
	position: relative;
}

/* --- Logo --- */
.site-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}
.site-header .logo-img {
	/* Seletor .site-header .logo-img (especificidade 0-2-0) bate o
	   .woocommerce img do WooCommerce (0-1-1) que forçava width:100%
	   e height:auto, tornando a logo enorme nas páginas de produto. */
	height: 72px;   /* altura fixa; largura escala proporcionalmente */
	width: auto;
	max-width: none; /* cancela o max-width:100% do reset do WC */
	display: block;
}

/* Fork sem imagem de marca ainda: o cabecalho mostra o nome em texto.
   Some sozinho assim que images/logo.png existir (ver secao 42 do
   functions.php). */
.site-logo--texto .logo-texto {
	font-family: var(--fonte-titulo);
	font-weight: 900;
	font-size: clamp(1.25rem, 4vw, 1.9rem);
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--ast-dourado-claro, #FFDE8A);
	text-transform: uppercase;
	white-space: nowrap;
}

/* --- Nav desktop --- */
.site-nav {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

/* O WordPress gera um <ul> para o menu; zeramos o estilo de lista. */
.site-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0.1rem;
}
.site-menu a {
	display: block;
	padding: 0.4rem 0.8rem;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9rem;
	border-radius: var(--raio);
	transition: color var(--trans), background-color var(--trans);
}
.site-menu a:hover,
.site-menu .current-menu-item > a {
	color: var(--ast-dourado);
	background-color: rgba(255, 255, 255, 0.07);
}

/* --- Grupo direito: ícone carrinho + CTA + hambúrguer --- */
.header-direita {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex-shrink: 0;
}

/* --- Botão CTA no header (desktop) --- */
.header-cta {
	flex-shrink: 0;
}

/* --- Ícone de carrinho --- */
.ast-cart-link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	border-radius: var(--raio);
	flex-shrink: 0;
	transition: color var(--trans), background-color var(--trans);
}
.ast-cart-link:hover {
	color: var(--ast-dourado);
	background-color: rgba(255, 255, 255, 0.08);
}
.ast-cart-link svg {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
	flex-shrink: 0;
}

/* Bolinha com o número de itens */
.ast-cart-count {
	position: absolute;
	top: 0.1rem;
	right: 0.05rem;
	min-width: 1.1rem;
	height: 1.1rem;
	padding: 0 0.22rem;
	border-radius: 999px;
	background-color: var(--ast-dourado);
	color: var(--ast-roxo-profundo);
	font-size: 0.6rem;
	font-weight: 700;
	line-height: 1.1rem;
	text-align: center;
	font-family: var(--fonte-corpo);
	pointer-events: none;
	/* Aparece suave quando o contador muda */
	transition: transform 0.15s ease, opacity 0.15s ease;
}
/* Oculto quando o carrinho está vazio */
.ast-cart-count--zero {
	opacity: 0;
	transform: scale(0.5);
	pointer-events: none;
}

/* --- Botão hambúrguer (mobile) --- */
.menu-toggle {
	display: none; /* escondido no desktop */
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--raio);
	padding: 0.35rem 0.65rem;
	cursor: pointer;
	color: white;
	font-size: 1.25rem;
	line-height: 1;
	transition: border-color var(--trans);
}
.menu-toggle:hover {
	border-color: var(--ast-dourado);
	color: var(--ast-dourado);
}

/* --- Mobile: comportamento do menu --- */
@media (max-width: 768px) {
	.menu-toggle {
		display: block;
	}
	.header-cta {
		display: none; /* CTA some da barra; aparece dentro do menu */
	}
	.site-nav {
		/* Menu "dropdown" saindo abaixo do header */
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--ast-roxo-profundo);
		flex-direction: column;
		align-items: stretch;
		padding: 1rem var(--gap);
		gap: 0.25rem;
		display: none; /* JS adiciona .is-aberto para mostrar */
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
	}
	.site-nav.is-aberto {
		display: flex;
	}
	.site-menu {
		flex-direction: column;
		width: 100%;
	}
	.site-menu a {
		padding: 0.75rem 1rem;
		font-size: 1rem;
	}
	/* CTA visível dentro do menu mobile */
	.nav-cta-mobile {
		display: block;
		margin-top: 0.75rem;
		text-align: center;
	}
}

@media (min-width: 769px) {
	.nav-cta-mobile {
		display: none; /* só aparece no mobile */
	}
}

/* ============================================================
   8. FOOTER
   ============================================================ */
.site-footer {
	background-color: var(--ast-roxo-profundo);
	color: rgba(255, 255, 255, 0.8);
	padding-top: 3rem;
}

/* Grid de 3 colunas no desktop, 1 coluna no mobile */
.footer-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 2rem;
	padding-bottom: 2.5rem;
}
@media (max-width: 768px) {
	.footer-grid {
		grid-template-columns: 1fr;
	}
}

/* Títulos das colunas do footer */
.footer-titulo {
	font-family: var(--fonte-corpo);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ast-dourado);
	margin: 0 0 0.85rem;
}

/* Coluna 1 — Marca */
.footer-logo-nome {
	font-family: var(--fonte-titulo);
	font-size: 1.4rem;
	color: var(--ast-dourado);
	display: block;
	margin-bottom: 0.5rem;
	text-decoration: none;
}
.footer-descricao {
	font-size: 0.88rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
}

/* Coluna 2 — Localização */
.footer-endereco p {
	margin: 0 0 0.2rem;
	font-size: 0.9rem;
}
.footer-maps-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.85rem;
	color: var(--ast-dourado);
	font-size: 0.88rem;
	font-weight: 700;
	transition: color var(--trans);
}
.footer-maps-link:hover {
	color: var(--ast-dourado-hover);
}

/* Coluna 3 — Redes Sociais */
.footer-social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.footer-social a {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.9rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: color var(--trans);
	text-decoration: none;
}
.footer-social a:hover {
	color: var(--ast-dourado);
}

/* Linha inferior do footer */
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 1.25rem 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.4);
}
.footer-bottom p {
	margin: 0;
}
.footer-bottom a {
	color: rgba(255, 255, 255, 0.4);
	transition: color var(--trans);
}
.footer-bottom a:hover {
	color: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   9. HOME PAGE — SEÇÕES
   ============================================================ */

/* --- Hero: imagem (cartaz) --- */
.hero-visual {
	width: 100%;
	height: 65vh;        /* 65% da altura da tela — grande mas não ocupa tudo */
	min-height: 320px;   /* piso mínimo em telas pequenas */
	position: relative;
	overflow: hidden;
	line-height: 0;
}

.hero-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;          /* preenche sem distorcer — corta bordas se precisar */
	object-position: center 50%;
}

/* Gradiente no rodapé da imagem para transição suave com a faixa abaixo. */
.hero-visual-fade {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 20%;
	background: linear-gradient( to top, var(--ast-roxo-escuro) 0%, transparent 100% );
}

/* --- Hero: faixa de chamada para ação --- */
.hero-strip {
	background-color: var(--ast-roxo-escuro);
	padding: 2rem 0 2.5rem;
}

.hero-strip-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

@media (max-width: 768px) {
	.hero-strip-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

.hero-strip-texto {
	flex: 1;
}

.hero-supra {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ast-dourado);
	margin: 0 0 0.5rem;
}

.hero-titulo {
	font-family: var(--fonte-titulo);
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 700;
	color: white;
	margin: 0 0 0.5rem;
	line-height: 1.2;
}

.hero-descricao {
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
}

.hero-cta {
	flex-shrink: 0;
}

.btn-grande {
	padding: 0.9rem 2.25rem;
	font-size: 1.05rem;
}

/* --- Layout genérico das seções --- */
.secao-sessoes,
.secao-local {
	padding: 4.5rem 0;
}

.secao-setores {
	padding: 4.5rem 0;
	background-color: var(--ast-roxo-escuro);
}

.secao-titulo {
	font-size: clamp(1.5rem, 3vw, 2rem);
	text-align: center;
	margin-bottom: 0.5rem;
}

.secao-titulo--claro {
	color: white;
}

.secao-subtitulo {
	text-align: center;
	color: var(--ast-texto-suave);
	margin: 0 auto 2.75rem;
	max-width: 520px;
}

.secao-subtitulo--claro {
	color: rgba(255, 255, 255, 0.65);
}

/* --- Cards de sessões --- */
.sessoes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.25rem;
}

/* Card — estilo "bilhete de ingresso" */
.sessao-card {
	background: white;
	border-radius: var(--raio);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.09);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--trans), box-shadow var(--trans);
}
.sessao-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
}

/* Cabeçalho do card: data em destaque com fundo vermelho */
.sessao-data-header {
	background-color: var(--ast-roxo-escuro);
	color: white;
	text-align: center;
	padding: 1.1rem 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1rem;
}
.sessao-dia-semana {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ast-dourado);
}
.sessao-numero-dia {
	font-family: var(--fonte-titulo);
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1;
	color: white;
}
.sessao-mes-ano {
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}
/* Fallback quando não há meta de data: mostra nome do produto */
.sessao-nome-fallback {
	font-family: var(--fonte-titulo);
	font-size: 1rem;
	color: white;
	line-height: 1.3;
}

/* Corpo do card */
.sessao-card-body {
	padding: 1.1rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1;
}
.sessao-horario {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ast-texto);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.sessao-preco-label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ast-texto-suave);
	margin: 0;
}
.sessao-preco {
	font-size: 0.95rem;
	margin: 0;
}
/* WooCommerce injeta <span class="price"> */
.sessao-preco .price,
.sessao-preco .amount {
	color: var(--ast-roxo-escuro);
	font-weight: 700;
}
.sessao-card-body .btn {
	margin-top: auto;
	text-align: center;
}

/* Estado vazio */
.sessoes-vazio {
	text-align: center;
	padding: 3rem;
	color: var(--ast-texto-suave);
	background: white;
	border-radius: var(--raio);
	border: 2px dashed var(--ast-borda);
	grid-column: 1 / -1;
}
.admin-hint {
	font-size: 0.83rem;
	color: var(--ast-texto-suave);
	font-style: italic;
	margin-top: 0.5rem;
}

/* --- Cards de setores --- */
/* A quantidade de setores vem de ast_setores() e muda de circo para
   circo (o Astro tem tres: Lateral, Central, VIP). Coluna fixa 1fr 1fr
   espremia o terceiro card numa segunda linha sozinho; auto-fit resolve
   para 2, 3 ou 4 sem tocar no CSS de novo.

   NOTA DE NOME: os modificadores --ouro/--prata daqui para baixo sao
   ESTILOS, nao setores. --ouro = o setor em destaque (o mais caro),
   --prata = os demais. Nomes herdados do Circo de Roma, mantidos para
   nao reescrever a folha inteira. */
.setores-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.5rem;
	max-width: 1000px;
	margin-inline: auto;
}

@media (max-width: 580px) {
	.setores-grid {
		grid-template-columns: 1fr;
	}
}

.setor-card {
	position: relative;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--raio);
	padding: 2.25rem 1.5rem 1.75rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	transition: transform var(--trans);
}

.setor-card:hover {
	transform: translateY(-3px);
}

/* Ouro: borda dourada e fundo levemente diferente */
.setor-card--ouro {
	background: rgba(242, 180, 0, 0.1);
	border-color: var(--ast-dourado);
}

/* Badge "Premium" no topo do card Ouro */
.setor-badge {
	position: absolute;
	top: -0.8rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--ast-dourado);
	color: var(--ast-roxo-profundo);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.2rem 0.85rem;
	border-radius: 99px;
	white-space: nowrap;
}

.setor-icone {
	font-size: 2.5rem;
	line-height: 1;
}

.setor-nome {
	font-family: var(--fonte-titulo);
	font-size: 1.3rem;
	color: white;
	margin: 0;
}

.setor-descricao {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.6;
	margin: 0;
	flex-grow: 1;
}

/* Botão do setor Prata: contorno branco (sem preenchimento) */
.btn-setor-prata {
	display: inline-block;
	padding: 0.65rem 1.5rem;
	border-radius: var(--raio);
	font-size: 0.95rem;
	font-weight: 700;
	border: 2px solid rgba(255, 255, 255, 0.45);
	color: white;
	background: transparent;
	text-decoration: none;
	transition: border-color var(--trans), background-color var(--trans), color var(--trans);
}

.btn-setor-prata:hover {
	border-color: white;
	background: rgba(255, 255, 255, 0.1);
	color: white;
}

/* --- Seção Localização --- */
.secao-local {
	background-color: var(--ast-creme);
}

.secao-local .secao-titulo {
	text-align: left;
}

.local-cidade {
	font-family: var(--fonte-titulo);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ast-roxo-profundo);
	margin: 0.5rem 0 0.35rem;
}

.local-endereco {
	color: var(--ast-texto-suave);
	font-size: 1rem;
	margin: 0 0 1.5rem;
}

/* ============================================================
   PÁGINA DE PRODUTO — SESSÃO DO CIRCO
   ============================================================

   Layout geral:
   [Banner vermelho: nome + data + horário]
   [container.sessao-corpo]
     [aside.sessao-info]    [div.sessao-form-compra]
   ============================================================ */

/* ---- Banner da sessão ---- */
.sessao-banner {
	background-color: var(--ast-roxo-escuro);
	padding: 1.25rem 0 1rem;
	border-bottom: 4px solid var(--ast-dourado);
}

.sessao-banner-titulo {
	font-family: var(--fonte-titulo);
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	color: var(--ast-branco);
	margin: 0 0 1rem;
	line-height: 1.2;
}

.sessao-banner-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

/* Chips de data e hora no banner */
.sessao-banner-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 1rem;
	border-radius: 2rem;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.sessao-banner-chip--data {
	background-color: rgba(255,255,255,0.12);
	color: var(--ast-branco);
	border: 1px solid rgba(255,255,255,0.2);
}

.sessao-banner-chip--hora {
	background-color: var(--ast-dourado);
	color: var(--ast-roxo-profundo);
}

/* ---- Corpo: info + formulário ---- */
.sessao-corpo {
	display: grid;
	grid-template-columns: 1fr 1.6fr; /* info | formulário */
	gap: 2.5rem;
	align-items: start;
	padding-top: 2.5rem;
	padding-bottom: 3rem;
}

/* Quando não há dados de info (nenhum campo de meta preenchido), o PHP
   adiciona a classe --full e o formulário ocupa a largura total. */
.sessao-corpo--full {
	grid-template-columns: 1fr;
	max-width: 44rem; /* limita a largura para o formulário não ficar esticado demais */
}

/* No mobile: empilha o formulário acima das informações */
@media (max-width: 700px) {
	.sessao-corpo {
		grid-template-columns: 1fr;
	}
	.sessao-info {
		order: 2;
	}
	.sessao-form-compra {
		order: 1;
	}
}

/* ---- Card de informações da sessão (coluna esquerda) ---- */
.sessao-info-card {
	background-color: var(--ast-branco);
	border: 1px solid var(--ast-borda);
	border-radius: var(--raio);
	padding: 1.5rem;
}

.sessao-info-titulo {
	font-family: var(--fonte-titulo);
	font-size: 1rem;
	font-weight: 700;
	color: var(--ast-roxo-profundo);
	margin: 0 0 1.2rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--ast-borda);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.sessao-info-item {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
	margin-bottom: 1.1rem;
}

.sessao-info-icone {
	font-size: 1.2rem;
	flex-shrink: 0;
	margin-top: 0.1rem;
}

.sessao-info-rotulo {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: var(--ast-texto);
}

.sessao-info-label {
	display: block;
	font-size: 0.85rem;
	color: var(--ast-texto-suave);
	margin-top: 0.15rem;
}

.sessao-maps-link {
	display: inline-block;
	margin-top: 0.4rem;
	font-size: 0.85rem;
	color: var(--ast-roxo);
	font-weight: 700;
	text-decoration: none;
}

.sessao-maps-link:hover {
	text-decoration: underline;
}

/* ---- Formulário de compra (coluna direita) ---- */
.sessao-form-compra {
	background-color: var(--ast-branco);
	border: 1px solid var(--ast-borda);
	border-radius: var(--raio);
	padding: 2rem;
}

/* ---- Grupos de variação (Setor / Tipo) ---- */
.ast-var-grupo {
	margin-bottom: 2rem;
}

/* Rótulo do grupo: "Setor" ou "Tipo de ingresso" */
.ast-var-label {
	font-family: var(--fonte-titulo);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--ast-roxo-profundo);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 0.8rem;
}

/* Container dos botões */
.ast-var-opcoes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
}

/* ---- Botão de variação (label estilizado) ---- */
.ast-var-btn {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 7rem;
	padding: 0.9rem 1.2rem 0.8rem;
	border: 2px solid var(--ast-borda);
	border-radius: var(--raio);
	background-color: var(--ast-branco);
	cursor: pointer;
	transition: border-color var(--trans), background-color var(--trans), box-shadow var(--trans);
	user-select: none;
	text-align: center;
}

.ast-var-btn:hover {
	border-color: var(--ast-roxo);
}

/* Estado ativo (selecionado) */
.ast-var-btn.is-ativo {
	border-color: var(--ast-roxo);
	background-color: #FDF0F0; /* vermelho muito claro */
	box-shadow: 0 0 0 3px rgba(160, 32, 32, 0.15);
}

/* Variação Ouro: estilo dourado */
.ast-var-btn--ouro {
	border-color: #C8981A;
}

.ast-var-btn--ouro:hover {
	border-color: var(--ast-dourado-hover);
	background-color: #FFFBF0;
}

.ast-var-btn--ouro.is-ativo {
	border-color: var(--ast-dourado);
	background-color: #FFFBF0;
	box-shadow: 0 0 0 3px rgba(242, 180, 0, 0.25);
}

/* Badge "★ Premium" dentro do botão Ouro */
.ast-var-badge {
	display: block;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ast-dourado-hover);
	margin-bottom: 0.25rem;
}

/* Nome da opção dentro do botão */
.ast-var-nome {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ast-texto);
}

/* Esconde o radio button de verdade — só o label é visível */
.ast-var-radio {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Select oculto — usado pelo WooCommerce JS, não pelo usuário */
.ast-select-oculto {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Wrapper .variations obrigatório para a delegação jQuery do WooCommerce.
   O wc-add-to-cart-variation.js escuta: $form.on('change', '.variations select').
   O select precisa ser descendente de .variations para o evento ser capturado.
   Posicionamos absolute para retirar do fluxo sem sumir do DOM. */
.ast-var-grupo .variations {
	position: absolute;
	overflow: hidden;
	pointer-events: none;
	width: 0;
	height: 0;
}

/* Link "Limpar seleção" */
.ast-reset-link {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.8rem;
	color: var(--ast-texto-suave);
	text-decoration: underline;
}

/* ---- Área de preço dinâmico (WooCommerce injeta aqui) ---- */

/* Caixa que aparece com o preço da variação escolhida */
.single_variation_wrap .woocommerce-variation {
	margin: 1.5rem 0 1rem;
}

.single_variation_wrap .woocommerce-variation-price {
	padding: 1rem 1.2rem;
	background-color: var(--ast-creme);
	border-radius: var(--raio);
	margin-bottom: 1rem;
}

.single_variation_wrap .woocommerce-variation-price .price {
	font-family: var(--fonte-corpo); /* Lato — preços usam a fonte de texto */
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--ast-roxo-profundo);
}

.single_variation_wrap .woocommerce-variation-price .price ins {
	text-decoration: none;
}

/* Preços em qualquer contexto WooCommerce → sempre Lato.
   O body já usa Lato por herança, mas sendo explícito aqui garantimos que
   nenhum reset de plugin quebre a tipografia de preço. */
.woocommerce .price,
.woocommerce-page .price,
.woocommerce .woocommerce-Price-amount,
.woocommerce-page .woocommerce-Price-amount {
	font-family: var(--fonte-corpo);
	font-weight: 700;
}

/* Aviso de disponibilidade de estoque */
.single_variation_wrap .woocommerce-variation-availability .stock {
	font-size: 0.85rem;
	font-weight: 700;
	padding: 0.4rem 0.8rem;
	border-radius: var(--raio);
}

.single_variation_wrap .in-stock {
	color: #166534;
	background-color: #DCFCE7;
}

.single_variation_wrap .out-of-stock {
	color: #991B1B;
	background-color: #FEE2E2;
}

/* ---- Linha de quantidade + botão Comprar ---- */
.woocommerce-variation-add-to-cart {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
}

/* Input de quantidade */
.woocommerce-variation-add-to-cart .quantity {
	display: flex;
	align-items: center;
}

.woocommerce-variation-add-to-cart input.qty {
	width: 4rem;
	height: 3.2rem;
	text-align: center;
	font-size: 1.1rem;
	font-weight: 700;
	border: 2px solid var(--ast-borda);
	border-radius: var(--raio);
	color: var(--ast-texto);
	background: var(--ast-branco);
	-moz-appearance: textfield; /* Firefox: remove setas */
}

.woocommerce-variation-add-to-cart input.qty::-webkit-outer-spin-button,
.woocommerce-variation-add-to-cart input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none; /* Chrome/Safari: remove setas */
}

/* Botão principal "Comprar"
   O WooCommerce usa ".woocommerce button.button.alt" (especificidade 0-3-1).
   Nosso seletor abaixo tem especificidade 0-3-2 (vence por 1 ponto) e ainda
   usa !important nas cores para eliminar qualquer dúvida sobre a cascata. */
body.woocommerce button.single_add_to_cart_button.button,
body.woocommerce-page button.single_add_to_cart_button.button {
	flex: 1;
	min-width: 10rem;
	padding: 0.9rem 1.5rem;
	background-color: var(--ast-dourado) !important;
	color: var(--ast-roxo-profundo) !important;
	border: none;
	border-radius: var(--raio);
	font-family: var(--fonte-corpo);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background-color var(--trans), transform var(--trans);
	text-align: center;
	display: block;
}

body.woocommerce button.single_add_to_cart_button.button:hover,
body.woocommerce-page button.single_add_to_cart_button.button:hover {
	background-color: var(--ast-dourado-hover) !important;
	color: var(--ast-roxo-profundo) !important;
	transform: translateY(-1px);
}

body.woocommerce button.single_add_to_cart_button.button:active,
body.woocommerce-page button.single_add_to_cart_button.button:active {
	transform: translateY(0);
}

/* Estado desabilitado — quando nenhuma variação foi selecionada ainda */
body.woocommerce button.single_add_to_cart_button.button.disabled,
body.woocommerce button.single_add_to_cart_button.button:disabled,
body.woocommerce-page button.single_add_to_cart_button.button.disabled,
body.woocommerce-page button.single_add_to_cart_button.button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

/* Aviso de produto esgotado */
.ast-esgotado {
	padding: 1rem 1.2rem;
	background-color: #FEE2E2;
	color: #991B1B;
	border-radius: var(--raio);
	font-weight: 700;
}

/* ---- Aba "Informações adicionais" — atributos do produto ----
   O WooCommerce gera uma <table> com os atributos (Setor, Tipo).
   Estilizamos para combinar com a identidade visual do circo. */

/* Wrapper das abas — espaçamento acima */
.woocommerce-tabs {
	margin-top: 3rem;
}

/* Lista de abas (as "orelhas" clicáveis) */
.woocommerce-tabs .tabs {
	display: flex;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--ast-borda);
}

/* Cada aba */
.woocommerce-tabs .tabs li {
	margin: 0;
}

.woocommerce-tabs .tabs a {
	display: block;
	padding: 0.65rem 1.4rem;
	background-color: transparent;
	border: none;
	color: var(--ast-texto-suave);
	font-family: var(--fonte-corpo);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: color var(--trans);
	position: relative;
}

.woocommerce-tabs .tabs a:hover {
	color: var(--ast-roxo);
}

/* Aba ativa: indicador vermelho embaixo via pseudo-elemento.
   Evita bordas em U que deixam o visual pesado. */
.woocommerce-tabs .tabs li.active a {
	color: var(--ast-roxo);
}

.woocommerce-tabs .tabs li.active a::after {
	content: '';
	position: absolute;
	bottom: -1px; /* sobrepõe a borda do .tabs para ficar contíguo */
	left: 0;
	right: 0;
	height: 2px;
	background-color: var(--ast-roxo);
}

/* Painel de conteúdo de cada aba */
.woocommerce-tabs .panel {
	padding: 1.75rem;
	background-color: var(--ast-branco);
	border: 1px solid var(--ast-borda);
	border-top: none;
	border-radius: 0 0 var(--raio) var(--raio);
}

/* Título dentro do painel (WooCommerce insere um <h2> com o nome da aba) */
.woocommerce-tabs .panel h2 {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ast-roxo-escuro);
	margin: 0 0 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--ast-borda);
}

/* Tabela de atributos (Setor: Prata | Ouro; Tipo: Inteira | Meia…) */
.woocommerce-product-attributes {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	padding: 0.7rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--ast-borda);
	font-size: 0.95rem;
	vertical-align: top;
}

/* Cabeçalho da linha (nome do atributo: Setor, Tipo) */
.woocommerce-product-attributes th {
	font-family: var(--fonte-corpo);
	font-weight: 700;
	color: var(--ast-roxo-profundo);
	width: 35%;
	background-color: var(--ast-creme);
}

/* Valor do atributo (Prata, Ouro | Inteira, Meia, Infantil) */
.woocommerce-product-attributes td p {
	margin: 0;
	color: var(--ast-texto);
}

/* ---- Aba "Detalhes" customizada ---- */
.ast-tab-detalhes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.ast-tab-detalhes li {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	font-size: 0.95rem;
	color: var(--ast-texto);
}

.ast-td-icone {
	font-size: 1.1rem;
	flex-shrink: 0;
}

.ast-td-texto strong {
	color: var(--ast-roxo-profundo);
}

.ast-td-texto a {
	color: var(--ast-roxo);
	margin-left: 0.5rem;
	font-size: 0.85rem;
}

/* ---- Breadcrumb do WooCommerce ---- */
.woocommerce-breadcrumb {
	font-size: 0.85rem;
	color: var(--ast-texto-suave);
	padding: 1rem 0 0;
}

.woocommerce-breadcrumb a {
	color: var(--ast-roxo);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	text-decoration: underline;
}

/* ============================================================
   PÁGINAS DE LOJA — WooCommerce sem sidebar
   ============================================================

   O wrapper .wc-pagina é gerado por nosso woocommerce.php.
   A sidebar foi removida via remove_action em functions.php.
   ============================================================ */

/* Espaçamento para todas as páginas WooCommerce.
   O padding-inline aqui (não no .container interno) garante que o conteúdo
   nunca toque as bordas da tela, independente de overrides do WooCommerce. */
.wc-pagina {
	padding: 2rem var(--gap) 4rem;
	min-height: 50vh;
}

/* Cancela o padding-inline do .container direto dentro de .wc-pagina
   para evitar espaçamento duplo (o pai já provê o espaçamento lateral). */
.wc-pagina > .container {
	padding-inline: 0;
}

/* ---- Botões do WooCommerce — override global da cor roxa padrão ----
   O WooCommerce define seus botões como roxo/lilás (#7f54b3) via:
     .woocommerce a.button.alt  (especificidade 0-2-0)
     .woocommerce button.button.alt (especificidade 0-2-1)
   Nosso prefixo body.woocommerce eleva nossa especificidade para garantir
   que nossos estilos dourados sempre ganhem, independente da ordem de CSS. */

body.woocommerce a.button,
body.woocommerce button.button,
body.woocommerce a.button.alt,
body.woocommerce button.button.alt,
body.woocommerce #respond input#submit,
body.woocommerce #respond input#submit.alt,
body.woocommerce-page a.button,
body.woocommerce-page button.button,
body.woocommerce-page a.button.alt,
body.woocommerce-page button.button.alt {
	background-color: var(--ast-dourado);
	color: var(--ast-roxo-profundo);
	font-family: var(--fonte-corpo);
	font-weight: 700;
	border-radius: var(--raio);
	border: none;
	padding: 0.65rem 1.4rem;
	cursor: pointer;
	transition: background-color var(--trans), transform var(--trans);
	text-decoration: none;
}

body.woocommerce a.button:hover,
body.woocommerce button.button:hover,
body.woocommerce a.button.alt:hover,
body.woocommerce button.button.alt:hover,
body.woocommerce-page a.button:hover,
body.woocommerce-page button.button:hover,
body.woocommerce-page a.button.alt:hover,
body.woocommerce-page button.button.alt:hover {
	background-color: var(--ast-dourado-hover);
	color: var(--ast-roxo-profundo);
	transform: translateY(-1px);
}

/* ---- Grade de produtos (página da loja) ---- */

/* Título da loja ("Shop" / "Loja") */
.woocommerce-products-header__title.page-title,
.woocommerce-loop-product__title,
h1.woocommerce-page-title {
	font-family: var(--fonte-titulo);
	color: var(--ast-roxo-profundo);
}

/* Contador de resultados e ordenação */
.woocommerce-result-count {
	font-size: 0.85rem;
	color: var(--ast-texto-suave);
	margin: 0.5rem 0 1rem;
}

.woocommerce-ordering select {
	border: 1px solid var(--ast-borda);
	border-radius: var(--raio);
	padding: 0.4rem 0.8rem;
	font-family: var(--fonte-corpo);
	font-size: 0.875rem;
	color: var(--ast-texto);
	background-color: var(--ast-branco);
}

/* ---- Grade de produtos — ul.products e li.product ----

   PROBLEMA: O WooCommerce define seu próprio layout via floats:
     .woocommerce ul.products li.product { float: left; width: 22.05%; }  → especificidade 0-3-2
   O nosso prefixo "body." eleva para 0-3-3 e garante que nosso CSS ganhe
   independente da ordem de carregamento.

   ESTRATÉGIA: Flexbox no ul (derruba os floats do WC) + largura explícita
   no li (derruba o width: 22.05% do WC). */

/* Contentor da grade: flexbox com quebra de linha */
body.woocommerce ul.products,
body.woocommerce-page ul.products {
	display: flex !important;   /* !important como segurança extra contra WC */
	flex-wrap: wrap;
	gap: 1.5rem;
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	clear: both;
}

/* Remove o pseudo-elemento clearfix que o WC adiciona (desnecessário no flex) */
body.woocommerce ul.products::before,
body.woocommerce ul.products::after,
body.woocommerce-page ul.products::before,
body.woocommerce-page ul.products::after {
	display: none;
}

/* Card individual — 3 colunas no desktop
   calc(33.333% - 1rem): divide a linha em 3 descontando 2/3 do gap (1.5rem × 2 ÷ 3) */
body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product {
	float: none !important;           /* cancela o float: left do WooCommerce */
	width: calc(33.333% - 1rem) !important; /* cancela o width: 22.05% do WooCommerce */
	margin: 0 !important;             /* cancela margin-right do WooCommerce */
	box-sizing: border-box;
	background-color: var(--ast-branco);
	border: 1px solid var(--ast-borda);
	border-radius: var(--raio);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	transition: box-shadow var(--trans);
}

body.woocommerce ul.products li.product:hover,
body.woocommerce-page ul.products li.product:hover {
	box-shadow: 0 4px 16px rgba(61, 8, 8, 0.12);
}

/* Tablet: 2 colunas */
@media (max-width: 900px) {
	body.woocommerce ul.products li.product,
	body.woocommerce-page ul.products li.product {
		width: calc(50% - 0.75rem) !important;
	}
}

/* Mobile: 1 coluna */
@media (max-width: 600px) {
	body.woocommerce ul.products li.product,
	body.woocommerce-page ul.products li.product {
		width: 100% !important;
	}
}

/* Imagem do produto no card */
body.woocommerce ul.products li.product img,
body.woocommerce-page ul.products li.product img {
	width: 100%;
	height: auto;
	border-radius: calc(var(--raio) - 2px);
}

/* Nome do produto (sessão) no card */
body.woocommerce ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--fonte-titulo);
	font-size: 1rem;
	font-weight: 700;
	color: var(--ast-roxo-profundo);
	margin: 0;
	word-break: normal;    /* evita quebrar palavra por palavra */
	overflow-wrap: anywhere;
}

/* Preço no card */
body.woocommerce ul.products li.product .price,
body.woocommerce-page ul.products li.product .price {
	font-size: 0.9rem;
	color: var(--ast-texto-suave);
}

body.woocommerce ul.products li.product .price .amount,
body.woocommerce-page ul.products li.product .price .amount {
	font-weight: 700;
	color: var(--ast-roxo);
}

/* Botão "Ver opções" / "Comprar" no card — empurra para baixo do card */
body.woocommerce ul.products li.product .button,
body.woocommerce-page ul.products li.product .button {
	margin-top: auto;
	display: block;
	text-align: center;
	width: 100%;
}

/* ---- Mensagens de notificação do WooCommerce ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: 1rem 1.25rem;
	border-radius: var(--raio);
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
	font-weight: 500;
	list-style: none;
}

/* O WooCommerce insere um ícone via ::before com position: absolute.
   Nosso padding não reserva espaço para ele, então sobrepõe o texto.
   Ocultamos o ::before — a borda colorida à esquerda já indica o tipo. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none !important;
}

.woocommerce-message {
	background-color: #DCFCE7;
	color: #166534;
	border-left: 4px solid #16a34a;
}

.woocommerce-info {
	background-color: #EFF6FF;
	color: #1e40af;
	border-left: 4px solid #3b82f6;
}

.woocommerce-error {
	background-color: #FEE2E2;
	color: #991B1B;
	border-left: 4px solid #dc2626;
}

/* Botão dentro da mensagem (ex: "Ver carrinho" após adicionar ingresso) */
.woocommerce-message .button,
.woocommerce-info .button {
	float: right;
	margin-left: 1rem;
	font-size: 0.85rem;
	padding: 0.4rem 1rem;
}

/* ============================================================
   CARRINHO (Cart)
   ============================================================

   Nosso cart.php remove a coluna de thumbnail e o campo de cupom.
   O layout é uma tabela responsiva: no desktop mostra colunas;
   no mobile empilha cada campo com rótulo (via data-title + ::before).
   ============================================================ */

/* ---- Página do carrinho: padding lateral e topo ----
   Espelha o mesmo tratamento dado ao checkout (abaixo, seção 10c).
   padding-inline garante que o conteúdo nunca toque as bordas. */
.woocommerce-cart .wc-pagina {
	padding-top: 2.5rem;
	padding-inline: clamp(1.5rem, 8vw, 5rem);
}

/* ---- Bloco Gutenberg de Carrinho (WC 8+): impede expansão borda a borda ----
   Enquanto a migração para shortcode clássico não ocorre (requer visita ao
   painel), o bloco usa alignfull com margin negativo que ignora qualquer
   padding do container pai. Anulamos esse efeito aqui. */
.wp-block-woocommerce-cart.alignfull,
.wp-block-woocommerce-cart {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Título da página carrinho */
.woocommerce-cart h1.page-title,
.woocommerce-cart h1.woocommerce-page-title {
	font-family: var(--fonte-titulo);
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--ast-roxo-profundo);
	margin-bottom: 2rem;
}

/* ---- Tabela do carrinho ---- */
.woocommerce-cart-form .shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 2rem;
}

/* Cabeçalho da tabela */
.woocommerce-cart-form thead th {
	padding: 0.75rem 1rem;
	font-family: var(--fonte-corpo);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ast-texto-suave);
	border-bottom: 2px solid var(--ast-borda);
	text-align: left;
	background: transparent;
}

.woocommerce-cart-form thead .product-price,
.woocommerce-cart-form thead .product-quantity,
.woocommerce-cart-form thead .product-subtotal {
	text-align: right;
}

/* Células das linhas de produto */
.woocommerce-cart-form tbody td {
	padding: 1.2rem 1rem;
	border-bottom: 1px solid var(--ast-borda);
	vertical-align: middle;
}

/* Botão × de remover */
.woocommerce-cart-form .product-remove a.remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: var(--ast-borda);
	color: var(--ast-texto-suave) !important;
	font-size: 1.1rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--trans), color var(--trans);
}

.woocommerce-cart-form .product-remove a.remove:hover {
	background-color: #FEE2E2;
	color: #991B1B !important;
}

/* Nome do ingresso */
.ast-cart-nome {
	display: block;
	font-family: var(--fonte-titulo);
	font-size: 1rem;
	font-weight: 700;
	color: var(--ast-roxo-profundo);
	text-decoration: none;
	margin-bottom: 0.3rem;
}

.ast-cart-nome:hover {
	color: var(--ast-roxo);
}

/* Variações: Setor / Tipo — geradas por wc_get_formatted_cart_item_data() */
.woocommerce-cart-form .product-name .variation {
	margin: 0.35rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.8rem;
}

.woocommerce-cart-form .product-name .variation dt {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--ast-roxo);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0;
}

.woocommerce-cart-form .product-name .variation dd {
	font-size: 0.8rem;
	color: var(--ast-texto);
	margin: 0;
}

/* Colunas de preço e subtotal */
.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-subtotal {
	text-align: right;
	font-weight: 700;
	color: var(--ast-roxo-profundo);
}

.woocommerce-cart-form .product-subtotal {
	font-size: 1.05rem;
}

/* Input de quantidade */
.woocommerce-cart-form .product-quantity {
	text-align: right;
}

.woocommerce-cart-form .product-quantity .qty {
	width: 4.5rem;
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--ast-borda);
	border-radius: var(--raio);
	font-family: var(--fonte-corpo);
	font-size: 0.95rem;
	font-weight: 700;
	text-align: center;
	color: var(--ast-texto);
	background-color: var(--ast-branco);
}

/* Linha de ações (atualizar carrinho) */
.woocommerce-cart-form td.actions {
	padding: 1rem;
	border-bottom: none;
}

.ast-btn-atualizar {
	background: transparent !important;
	color: var(--ast-texto-suave) !important;
	border: 1px solid var(--ast-borda) !important;
	font-size: 0.85rem !important;
	padding: 0.45rem 1rem !important;
	transition: border-color var(--trans), color var(--trans) !important;
}

.ast-btn-atualizar:hover {
	color: var(--ast-roxo-profundo) !important;
	border-color: var(--ast-roxo-profundo) !important;
	background: transparent !important;
	transform: none !important;
}

/* ---- Totais do carrinho ---- */

/* O WooCommerce coloca os totais dentro de .cart-collaterals.
   Garantimos que o box de totais fique alinhado à direita. */
.cart-collaterals {
	display: flex;
	justify-content: flex-end;
}

.cart_totals {
	width: 100%;
	max-width: 26rem;
	background-color: var(--ast-branco);
	border: 1px solid var(--ast-borda);
	border-radius: var(--raio);
	padding: 1.5rem;
}

.cart_totals h2 {
	font-family: var(--fonte-titulo);
	font-size: 1.2rem;
	color: var(--ast-roxo-profundo);
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--ast-borda);
}

.cart_totals .shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.25rem;
}

.cart_totals .shop_table tr th,
.cart_totals .shop_table tr td {
	padding: 0.6rem 0;
	text-align: left;
	font-size: 0.95rem;
	border: none;
	background: transparent;
}

.cart_totals .shop_table tr td {
	text-align: right;
	font-weight: 700;
}

/* Linha de Total — destaque visual */
.cart_totals .order-total th,
.cart_totals .order-total td {
	padding-top: 0.85rem;
	border-top: 2px solid var(--ast-borda);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--ast-roxo-profundo);
}

.cart_totals .order-total td .woocommerce-Price-amount {
	font-family: var(--fonte-corpo);
	font-size: 1.4rem;
	color: var(--ast-roxo);
}

/* ---- Botão "Finalizar compra" ---- */
.wc-proceed-to-checkout {
	margin-top: 0.5rem;
}

.wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	padding: 1rem 1.5rem;
	background-color: var(--ast-roxo) !important;
	color: var(--ast-branco) !important;
	font-family: var(--fonte-corpo);
	font-size: 1.05rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	border-radius: var(--raio);
	border: none;
	cursor: pointer;
	transition: background-color var(--trans), transform var(--trans);
	letter-spacing: 0.03em;
}

.wc-proceed-to-checkout a.checkout-button:hover {
	background-color: var(--ast-roxo-escuro) !important;
	color: var(--ast-branco) !important;
	transform: translateY(-1px);
}

/* Nota de segurança opcional abaixo do botão */
.wc-proceed-to-checkout::after {
	content: '🔒 Pagamento 100% seguro';
	display: block;
	text-align: center;
	font-size: 0.78rem;
	color: var(--ast-texto-suave);
	margin-top: 0.6rem;
}

/* ---- Carrinho vazio ---- */
.cart-empty.woocommerce-info {
	text-align: center;
	padding: 2.5rem;
}

.return-to-shop {
	text-align: center;
	margin-top: 1rem;
}

/* ---- Responsivo do carrinho ---- */
@media (max-width: 680px) {
	/* WC transforma a tabela em lista com rótulos via data-title + ::before */
	.woocommerce-cart-form .shop_table thead {
		display: none;
	}

	.woocommerce-cart-form .shop_table tbody td {
		display: block;
		text-align: right;
		padding: 0.6rem 1rem;
		border-bottom: none;
	}

	.woocommerce-cart-form .shop_table tbody td::before {
		content: attr(data-title) ': ';
		float: left;
		font-weight: 700;
		font-size: 0.82rem;
		color: var(--ast-texto-suave);
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.woocommerce-cart-form .shop_table tbody tr {
		display: block;
		border: 1px solid var(--ast-borda);
		border-radius: var(--raio);
		margin-bottom: 1rem;
		padding: 0.5rem 0;
	}

	.woocommerce-cart-form .product-name::before {
		display: none; /* nome já visível, não precisa de rótulo */
	}

	.woocommerce-cart-form .product-name,
	.woocommerce-cart-form .product-remove {
		text-align: left;
	}

	.cart-collaterals {
		justify-content: center;
	}

	.cart_totals {
		max-width: 100%;
	}
}

/* ============================================================
   CHECKOUT
   ============================================================

   Layout de dois colunas:
     Esquerda (mais estreita): "Seus dados" — nome, e-mail, telefone
     Direita (mais larga):     "Resumo do pedido" — itens + pagamento

   A coluna direita é sticky em desktop para que o cliente sempre
   veja o total e o botão "Confirmar" enquanto preenche os dados.
   ============================================================ */

.woocommerce-checkout .wc-pagina {
	padding-top: 2.5rem;
	/* Afasta o conteúdo das bordas da tela. clamp() garante mínimo de 1.5rem
	   em telas pequenas, mas usa 8% da largura em telas grandes. */
	padding-inline: clamp(1.5rem, 8vw, 5rem);
}

/* ---- Bloco Gutenberg de Checkout (WC 8+): impede expansão borda a borda ----
   O bloco usa alignfull que aplica margin negativo para sair do container.
   Anulamos esse comportamento enquanto a migração para shortcode não ocorre. */
.wp-block-woocommerce-checkout.alignfull,
.wp-block-woocommerce-checkout {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Título da página "Checkout" gerado pelo WP dentro do bloco */
.woocommerce-checkout .entry-title,
.woocommerce-checkout .page-title {
	font-family: var(--fonte-titulo);
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--ast-roxo-profundo);
	margin: 0 0 1.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 3px solid var(--ast-dourado);
}

/* ---- Grid principal ---- */
.ast-checkout-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

/* Título de cada coluna */
.ast-checkout-titulo {
	font-family: var(--fonte-titulo);
	font-size: 1.4rem;
	color: var(--ast-roxo-profundo);
	margin: 0 0 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--ast-dourado);
}

/* Oculta o h3 que form-billing.php insere (temos nosso próprio h2) */
.ast-checkout-esquerda .woocommerce-billing-fields > h3 {
	display: none;
}

/* Sticky na coluna direita (mantém o resumo + botão visível ao rolar) */
.ast-checkout-direita {
	position: sticky;
	top: 1.5rem;
}

/* ---- Formulário de dados do comprador ---- */

/* Cada campo (row) */
.woocommerce-checkout .form-row {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1.1rem;
}

/* Dois campos lado a lado (nome + sobrenome) */
.woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1rem;
}

/* Nome e sobrenome ficam na mesma linha; e-mail e telefone ocupam linha inteira */
.woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce-billing-fields__field-wrapper .form-row-last {
	grid-column: span 1;
}

.woocommerce-billing-fields__field-wrapper .form-row-wide {
	grid-column: 1 / -1;
}

/* Label */
.woocommerce-checkout label {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ast-texto-suave);
}

/* Indicador de campo obrigatório (*) */
.woocommerce-checkout .required {
	color: var(--ast-roxo);
	font-weight: 700;
}

/* Inputs de texto */
.woocommerce-checkout .input-text,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"] {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1.5px solid var(--ast-borda);
	border-radius: var(--raio);
	font-family: var(--fonte-corpo);
	font-size: 1rem;
	color: var(--ast-texto);
	background-color: var(--ast-branco);
	transition: border-color var(--trans);
	box-sizing: border-box;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout input[type="tel"]:focus {
	outline: none;
	border-color: var(--ast-roxo);
	box-shadow: 0 0 0 3px rgba(160, 32, 32, 0.1);
}

/* Campo com erro */
.woocommerce-checkout .woocommerce-invalid .input-text {
	border-color: #dc2626;
}

.woocommerce-checkout .woocommerce-validated .input-text {
	border-color: #16a34a;
}

/* Mensagem de erro abaixo do campo */
.woocommerce-checkout .woocommerce-error {
	font-size: 0.82rem;
	padding: 0.5rem 0.75rem;
}

/* ---- Resumo do pedido (coluna direita) ---- */

.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.25rem;
	background-color: var(--ast-branco);
	border: 1px solid var(--ast-borda);
	border-radius: var(--raio);
	overflow: hidden;
}

.woocommerce-checkout-review-order-table thead th {
	padding: 0.75rem 1rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ast-texto-suave);
	background-color: var(--ast-creme);
	border-bottom: 1px solid var(--ast-borda);
	text-align: left;
}

.woocommerce-checkout-review-order-table thead .product-total {
	text-align: right;
}

.woocommerce-checkout-review-order-table tbody td {
	padding: 1rem;
	border-bottom: 1px solid var(--ast-borda);
	font-size: 0.95rem;
	vertical-align: top;
}

.woocommerce-checkout-review-order-table tbody .product-name {
	color: var(--ast-roxo-profundo);
	font-weight: 600;
}

/* Variações: Setor / Tipo no resumo */
.woocommerce-checkout-review-order-table .variation {
	margin: 0.3rem 0 0;
}

.woocommerce-checkout-review-order-table .variation dt,
.woocommerce-checkout-review-order-table .variation dd {
	font-size: 0.8rem;
	display: inline;
}

.woocommerce-checkout-review-order-table .variation dt {
	font-weight: 700;
	color: var(--ast-roxo);
}

.woocommerce-checkout-review-order-table .variation dd::after {
	content: ' ';
}

/* Quantidade (×2) */
.woocommerce-checkout-review-order-table .product-quantity {
	color: var(--ast-roxo);
	font-size: 0.85rem;
}

.woocommerce-checkout-review-order-table .product-total {
	text-align: right;
	font-weight: 700;
	color: var(--ast-roxo-profundo);
}

/* tfoot: subtotal + total */
.woocommerce-checkout-review-order-table tfoot tr th,
.woocommerce-checkout-review-order-table tfoot tr td {
	padding: 0.6rem 1rem;
	font-size: 0.9rem;
	border-bottom: 1px solid var(--ast-borda);
	background: transparent;
}

.woocommerce-checkout-review-order-table tfoot tr td {
	text-align: right;
	font-weight: 700;
}

/* Linha de total: destaque */
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
	font-size: 1.05rem;
	color: var(--ast-roxo-profundo);
	border-bottom: none;
	padding-top: 0.85rem;
}

.woocommerce-checkout-review-order-table tfoot .order-total td .woocommerce-Price-amount {
	font-size: 1.25rem;
	color: var(--ast-roxo);
}

/* ---- Seção de pagamento ---- */

#payment {
	background-color: var(--ast-branco);
	border: 1px solid var(--ast-borda);
	border-radius: var(--raio);
	overflow: hidden;
}

/* Lista de métodos de pagamento */
#payment ul.payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--ast-borda);
}

#payment ul.payment_methods li {
	padding: 0.9rem 1.25rem;
	border-bottom: 1px solid var(--ast-borda);
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.95rem;
	cursor: pointer;
}

#payment ul.payment_methods li:last-child {
	border-bottom: none;
}

#payment ul.payment_methods li label {
	font-weight: 600;
	color: var(--ast-texto);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.95rem;
}

#payment ul.payment_methods li input[type="radio"] {
	accent-color: var(--ast-roxo);
}

/* Descrição/formulário do método de pagamento */
.payment_box {
	padding: 1rem 1.25rem;
	background-color: var(--ast-creme);
	font-size: 0.9rem;
	color: var(--ast-texto-suave);
	border-bottom: 1px solid var(--ast-borda);
}

/* Termos e condições */
.woocommerce-terms-and-conditions-wrapper {
	padding: 0.9rem 1.25rem;
	font-size: 0.85rem;
	color: var(--ast-texto-suave);
}

/* Área do botão "Confirmar pedido" */
#payment .place-order {
	padding: 1.25rem;
}

/* Botão de confirmar — mais importante da jornada */
#place_order {
	display: block !important;
	width: 100% !important;
	padding: 1rem 1.5rem !important;
	background-color: var(--ast-roxo) !important;
	color: var(--ast-branco) !important;
	font-family: var(--fonte-corpo) !important;
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	text-align: center !important;
	border: none !important;
	border-radius: var(--raio) !important;
	cursor: pointer !important;
	letter-spacing: 0.03em !important;
	transition: background-color var(--trans), transform var(--trans) !important;
}

#place_order:hover {
	background-color: var(--ast-roxo-escuro) !important;
	transform: translateY(-1px) !important;
}

/* Spinner de carregamento durante envio do pedido */
.blockOverlay {
	background: rgba(255, 255, 255, 0.8) !important;
}

/* ---- Página de confirmação (Thank You) ---- */

.woocommerce-order-received .entry-title,
.woocommerce-order-received h1.page-title {
	font-family: var(--fonte-titulo);
	color: var(--ast-roxo-profundo);
}

.woocommerce-thankyou-order-received {
	padding: 1.25rem;
	background-color: #DCFCE7;
	color: #166534;
	border-left: 4px solid #16a34a;
	border-radius: var(--raio);
	font-weight: 700;
	margin-bottom: 2rem;
}

.woocommerce-order-details table.woocommerce-table,
.woocommerce-customer-details .addresses .woocommerce-column__title {
	font-family: var(--fonte-titulo);
	color: var(--ast-roxo-profundo);
}

/* ---- Responsivo do checkout ---- */

@media (max-width: 860px) {
	.ast-checkout-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	/* Em mobile: dados do comprador primeiro, resumo abaixo */
	.ast-checkout-esquerda { order: 1; }
	.ast-checkout-direita  { order: 2; position: static; }

	.woocommerce-billing-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	.woocommerce-billing-fields__field-wrapper .form-row-first,
	.woocommerce-billing-fields__field-wrapper .form-row-last {
		grid-column: 1 / -1;
	}
}

/* ============================================================
   10. REFINAMENTO VISUAL
   ============================================================

   Melhorias de design aplicadas como overrides no final do
   arquivo para não afetar a estrutura já existente.
   Objetivos:
     – Hero com mais impacto e dramaticidade
     – Títulos de seção com ornamento dourado
     – Cards com mais personalidade e caráter
     – Setor Ouro com brilho premium
     – Detalhes de acabamento (footer, separadores, espaço)
   ============================================================ */

/* ---- Hero: imagem mais alta e fade mais dramático ---- */
.hero-visual {
	height: 78vh;
}

.hero-visual-fade {
	height: 55%;
	background: linear-gradient(
		to top,
		var(--ast-roxo-escuro) 0%,
		rgba(107, 16, 16, 0.55) 50%,
		transparent 100%
	);
}

/* ---- Hero strip: gradiente rico com brilhos laterais ---- */
.hero-strip {
	background: linear-gradient(150deg, var(--ast-roxo-profundo) 0%, var(--ast-roxo-escuro) 70%);
	padding: 3rem 0 4.5rem;
	position: relative;
	overflow: hidden;
}

/* Brilhos dourados sutis nos cantos do strip */
.hero-strip::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 80% at 5% 80%, rgba(242, 180, 0, 0.10) 0%, transparent 60%),
		radial-gradient(ellipse 40% 60% at 95% 20%, rgba(242, 180, 0, 0.07) 0%, transparent 60%);
	pointer-events: none;
}

/* "Temporada 2026" com linhas decorativas flanqueando o texto */
.hero-supra {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 0.73rem;
	letter-spacing: 0.28em;
	margin-bottom: 0.75rem;
}

.hero-supra::before,
.hero-supra::after {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.5rem;
	height: 1px;
	background: var(--ast-dourado);
	opacity: 0.65;
}

/* Título maior e com mais presença */
.hero-titulo {
	font-size: clamp(2rem, 4vw, 3rem);
	letter-spacing: -0.02em;
	margin-bottom: 0.75rem;
}

/* Botão CTA: pill shape — mais luxuoso que o retangular padrão */
.btn-grande {
	border-radius: 99px;
	letter-spacing: 0.06em;
	padding: 1rem 2.5rem;
	box-shadow: 0 4px 20px rgba(242, 180, 0, 0.30);
}

.btn-grande:hover {
	box-shadow: 0 6px 28px rgba(242, 180, 0, 0.45);
	transform: translateY(-2px);
}

/* ---- Títulos de seção: ornamento dourado embaixo ---- */
.secao-titulo {
	letter-spacing: -0.01em;
}

.secao-titulo::after {
	content: '';
	display: block;
	width: 2.5rem;
	height: 3px;
	background: var(--ast-dourado);
	margin: 0.9rem auto 0;
	border-radius: 2px;
}

/* Na seção "Onde estamos" (título à esquerda), ornamento alinhado à esquerda */
.secao-local .secao-titulo::after {
	margin-left: 0;
}

/* ---- Seção sessões: mais respiro ---- */
.secao-sessoes {
	padding: 5.5rem 0;
}

/* ---- Cards de sessão: borda dourada e sombra mais rica ---- */
.sessao-card {
	border-top: 4px solid var(--ast-dourado);
	box-shadow: 0 4px 24px rgba(61, 8, 8, 0.08);
}

.sessao-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 44px rgba(61, 8, 8, 0.18);
}

/* Header do card: gradiente em vez de cor sólida */
.sessao-data-header {
	background: linear-gradient(145deg, var(--ast-roxo-profundo) 0%, var(--ast-roxo-escuro) 100%);
	padding: 1.5rem 1rem 1.3rem;
	position: relative;
	overflow: hidden;
}

/* Círculo dourado decorativo no canto superior direito do header */
.sessao-data-header::after {
	content: '';
	position: absolute;
	top: -20px;
	right: -20px;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: rgba(242, 180, 0, 0.07);
	pointer-events: none;
}

/* Número do dia: maior, mais impactante */
.sessao-numero-dia {
	font-size: 3.5rem;
	letter-spacing: -0.03em;
}

/* ---- Seção setores: gradiente e brilhos ambiente ---- */
.secao-setores {
	background: linear-gradient(
		155deg,
		var(--ast-roxo-profundo) 0%,
		var(--ast-roxo-escuro) 50%,
		var(--ast-roxo-profundo) 100%
	);
	position: relative;
	overflow: hidden;
}

/* Brilhos dourados nos cantos opostos da seção */
.secao-setores::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 70% 80% at -10% 110%, rgba(242, 180, 0, 0.09) 0%, transparent 60%),
		radial-gradient(ellipse 50% 60% at 110% -10%, rgba(242, 180, 0, 0.07) 0%, transparent 60%);
	pointer-events: none;
}

/* Card Prata: fundo um pouco mais visível */
.setor-card {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.13);
	transition: transform var(--trans), box-shadow var(--trans), background-color var(--trans);
}

.setor-card:hover {
	transform: translateY(-5px);
	background: rgba(255, 255, 255, 0.09);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.30);
}

/* Card Ouro: brilho premium com múltiplas camadas de sombra */
.setor-card--ouro {
	background: rgba(242, 180, 0, 0.13);
	border-color: rgba(242, 180, 0, 0.55);
	box-shadow:
		0 0 0 1px rgba(242, 180, 0, 0.12),
		0 8px 32px rgba(0, 0, 0, 0.20),
		inset 0 1px 0 rgba(242, 180, 0, 0.18);
}

.setor-card--ouro:hover {
	background: rgba(242, 180, 0, 0.18);
	box-shadow:
		0 0 0 1px rgba(242, 180, 0, 0.22),
		0 20px 50px rgba(242, 180, 0, 0.18),
		inset 0 1px 0 rgba(242, 180, 0, 0.30);
}

.setor-nome {
	font-size: 1.5rem;
	letter-spacing: -0.01em;
}

.setor-icone {
	font-size: 2.75rem;
}

/* ---- Seção localização: linha dourada no topo ---- */
.secao-local {
	position: relative;
}

.secao-local::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ast-dourado), transparent);
	opacity: 0.35;
}

.local-cidade {
	font-size: 1.9rem;
	letter-spacing: -0.02em;
}

/* ---- Footer: borda dourada sutil no topo ---- */
.site-footer {
	border-top: 3px solid rgba(242, 180, 0, 0.35);
}

/* ============================================================
   10b. PÁGINA PÓS-COMPRA (thankyou / order-received)
   ============================================================ */

/* ---- Container e espaçamento lateral (igual ao checkout) ---- */
.woocommerce-order-received .wc-pagina {
	padding-top: 2.5rem;
	padding-inline: clamp(1.5rem, 8vw, 5rem);
}

/* ---- Wrapper geral ---- */
.ast-order-received {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

/* ---- 1. Banner de confirmação ---- */
.ast-thankyou-banner {
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border: 1.5px solid #86efac;
	border-radius: var(--raio);
	padding: 2rem 2rem 1.5rem;
}

/* Mensagem "Pedido confirmado!" */
.ast-thankyou-banner .woocommerce-thankyou-order-received {
	font-family: var(--fonte-titulo);
	font-size: clamp(1.3rem, 3vw, 1.8rem);
	color: #166534;
	font-weight: 700;
	margin: 0 0 1.5rem;
	padding: 0;
	background: none;
	border: none;
}

/* Lista de metadados do pedido (número, data, e-mail, total) */
.ast-thankyou-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid #bbf7d0;
	padding-top: 1rem;
}

.ast-thankyou-overview li {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	font-size: 0.88rem;
	color: #166534;
	padding: 0.4rem 0;
	border: none;
	background: none;
}

.ast-thankyou-overview .ast-ov-label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.75;
}

.ast-thankyou-overview li strong {
	font-size: 0.95rem;
	font-weight: 700;
	color: #14532d;
}

/* ---- Títulos de seção (Pague com Pix / Detalhes do pedido) ---- */
.ast-thankyou-section-title {
	font-family: var(--fonte-titulo);
	font-size: 1.3rem;
	color: var(--ast-roxo-profundo);
	margin: 0 0 1.25rem;
	padding-bottom: 0.5rem;
	border-bottom: 3px solid var(--ast-dourado);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* ---- 2. Bloco Pix do Mercado Pago ---- */
.ast-thankyou-pix {
	background: var(--ast-creme);
	border: 1.5px solid rgba(242, 180, 0, 0.3);
	border-radius: var(--raio);
	padding: 1.75rem 2rem;
}

/* Botão "Copiar código" — substitui o azul padrão do Mercado Pago */
.mp-details-pix-button,
.ast-thankyou-pix button,
.ast-thankyou-pix [class*="mp-"][class*="button"],
.ast-thankyou-pix [class*="mp-"][class*="btn"] {
	background-color: var(--ast-roxo) !important;
	color: var(--ast-branco) !important;
	border: none !important;
	border-radius: var(--raio) !important;
	padding: 0.75rem 1.5rem !important;
	font-family: var(--fonte-corpo) !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: background-color var(--trans) !important;
	display: inline-block !important;
}

.mp-details-pix-button:hover,
.ast-thankyou-pix button:hover,
.ast-thankyou-pix [class*="mp-"][class*="button"]:hover {
	background-color: var(--ast-roxo-escuro) !important;
}

/* QR code: centraliza a imagem */
.mp-details-pix-container {
	text-align: center;
}

.mp-details-pix-container img {
	max-width: 200px;
	border-radius: 4px;
}

/* Campo de texto com o código Pix */
.mp-qr-input,
.mp-details-pix-qr-value {
	word-break: break-all;
	font-size: 0.78rem;
	background: #fff;
	border: 1px solid var(--ast-borda);
	border-radius: var(--raio);
	padding: 0.5rem 0.75rem;
	color: var(--ast-texto);
}

/* ---- 3. Tabela de detalhes do pedido ---- */
.ast-thankyou-detalhes {
	background: #fff;
	border: 1.5px solid var(--ast-borda);
	border-radius: var(--raio);
	padding: 1.75rem 2rem;
}

/* Esconde o h2 "Order details" que o WooCommerce injeta dentro
   de woocommerce_order_details_table — nosso template já tem o título */
.ast-thankyou-detalhes .woocommerce-order-details__title {
	display: none;
}

/* Tabela de itens */
.ast-thankyou-detalhes .woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.ast-thankyou-detalhes .woocommerce-table--order-details th,
.ast-thankyou-detalhes .woocommerce-table--order-details td {
	padding: 0.65rem 0.5rem;
	border-bottom: 1px solid var(--ast-borda);
	text-align: left;
	vertical-align: middle;
}

.ast-thankyou-detalhes .woocommerce-table--order-details thead th {
	font-family: var(--fonte-titulo);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ast-roxo-profundo);
	border-bottom: 2px solid var(--ast-dourado);
}

.ast-thankyou-detalhes .woocommerce-table--order-details tfoot td,
.ast-thankyou-detalhes .woocommerce-table--order-details tfoot th {
	font-weight: 700;
	color: var(--ast-roxo-profundo);
}

.ast-thankyou-detalhes .woocommerce-table--order-details tfoot .order-total td,
.ast-thankyou-detalhes .woocommerce-table--order-details tfoot .order-total th {
	font-size: 1.05rem;
	color: var(--ast-roxo);
}

/* Variações (Setor: Prata | Tipo: Infantil) */
.ast-thankyou-detalhes .wc-item-meta {
	list-style: none;
	padding: 0;
	margin: 0.25rem 0 0;
	font-size: 0.8rem;
	color: var(--ast-texto-suave);
}

/* Oculta dados de endereço (billing address) — são desnecessários
   para ingresso digital e podem ser vazios após nosso filtro */
.ast-thankyou-detalhes .woocommerce-customer-details {
	display: none;
}

/* ---- Responsivo ---- */
@media (max-width: 640px) {
	.ast-thankyou-pix,
	.ast-thankyou-detalhes {
		padding: 1.25rem 1rem;
	}

	.ast-thankyou-overview {
		gap: 0 1rem;
	}
}

/* ============================================================
   11. CHECKOUT — OVERRIDES E CORREÇÕES VISUAIS
   ============================================================ */

/* ---- Suprimir seções extras geradas pelo WooCommerce ---- */

/* Headings h3 que o WC insere dentro da área de billing
   (ex.: "Endereço de cobrança", "Billing details").
   Nosso h2 "Seus dados" já cobre esse papel. */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > h3,
.woocommerce-checkout #customer_details > .col-1 > h3,
.woocommerce-checkout #customer_details > .col-2 > h3 {
	display: none;
}

/* "Informações de contato" — bloco de e-mail adicionado pelo WC 8+ antes
   do formulário de billing no checkout clássico. Como temos o campo
   billing_email dentro do nosso form-billing.php, este bloco é redundante. */
.woocommerce-checkout .woocommerce-account-fields,
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	display: none;
}

/* ---- Título da página de checkout ---- */
.woocommerce-checkout h1.page-title,
.woocommerce-checkout h1.entry-title,
.woocommerce-checkout .entry-title {
	font-family: var(--fonte-titulo);
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--ast-roxo-profundo);
	margin: 0 0 2rem;
	padding-bottom: 0.75rem;
	border-bottom: 3px solid var(--ast-dourado);
}

/* ---- Colunas do checkout: proporção esquerda menor que direita ---- */
.ast-checkout-grid {
	grid-template-columns: 1fr 1.1fr;
}

/* ---- Títulos das colunas ---- */
.ast-checkout-titulo {
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.ast-checkout-titulo::before {
	content: '';
	display: block;
	width: 3px;
	height: 1.2em;
	background: var(--ast-dourado);
	border-radius: 2px;
	flex-shrink: 0;
}

/* ---- Campo de e-mail: dica visual de que é onde chega o ingresso ---- */
.woocommerce-checkout #billing_email_field label::after {
	content: ' — o ingresso será enviado aqui';
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--ast-texto-suave);
	letter-spacing: 0;
	text-transform: none;
}

/* ---- Botão "Finalizar pedido" / "Place order" ---- */

/* WooCommerce clássico: id="place_order" */
#place_order,
#place_order.button,
.woocommerce-checkout #place_order {
	display: block !important;
	width: 100% !important;
	padding: 1.1rem 1.5rem !important;
	background-color: var(--ast-roxo) !important;
	color: var(--ast-branco) !important;
	font-family: var(--fonte-corpo) !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	text-align: center !important;
	border: none !important;
	border-radius: var(--raio) !important;
	cursor: pointer !important;
	transition: background-color var(--trans), transform var(--trans) !important;
}

#place_order:hover,
.woocommerce-checkout #place_order:hover {
	background-color: var(--ast-roxo-escuro) !important;
	transform: translateY(-1px) !important;
}

/* WooCommerce Blocks / wp-element-button (WC 8+) */
.wp-element-button.wc-block-components-checkout-place-order-button,
.wc-block-checkout__place-order .wc-block-components-checkout-place-order-button {
	background-color: var(--ast-roxo) !important;
	color: var(--ast-branco) !important;
	font-family: var(--fonte-corpo) !important;
	font-weight: 700 !important;
	border: none !important;
	border-radius: var(--raio) !important;
	padding: 1rem 1.5rem !important;
	width: 100% !important;
	font-size: 1.05rem !important;
}

/* ---- Resumo do pedido (coluna direita): visual mais limpo ---- */
.woocommerce-checkout-review-order-table {
	font-size: 0.9rem;
}

/* Linha do produto: imagem pequena + nome + variações */
.woocommerce-checkout-review-order-table .product-name {
	font-size: 0.92rem;
}

/* "Adicionar cupons" — accordion do WC; deixa mais discreto */
.woocommerce-checkout .checkout_coupon {
	margin-bottom: 1rem;
}

/* ---- Nota de segurança abaixo do botão (::after no .place-order) ---- */
#payment .place-order::after {
	content: '🔒 Pagamento 100% seguro · Ingresso por e-mail em minutos';
	display: block;
	text-align: center;
	font-size: 0.75rem;
	color: var(--ast-texto-suave);
	margin-top: 0.6rem;
	line-height: 1.5;
}

/* ---- Responsivo ---- */


/* ============================================================
   12. REDESIGN "NOITE DE ESTREIA"
   ============================================================

   Camada final de redesign: fundo escuro quase-preto avermelhado,
   holofotes dourados, fileira de lâmpadas sob o header e CTAs com
   brilho de letreiro. Aplicada como override no fim do arquivo —
   em empate de especificidade, a regra que vem depois vence.

   REGRA CENTRAL DE UX: em toda superfície onde uma sessão aparece,
   o HORÁRIO é o elemento visualmente dominante, sempre maior que
   a data — para eliminar a compra do ingresso errado.
   ============================================================ */

/* ------------------------------------------------------------
   12.1 BASE ESCURA
   ------------------------------------------------------------ */
body {
	background-color: var(--ast-fundo-base);
	color: var(--ast-texto-claro);
}

a {
	color: var(--ast-dourado-hover);
}
a:hover {
	color: var(--ast-dourado-claro);
}

h1, h2, h3 {
	color: var(--ast-texto-claro);
}
h4, h5, h6 {
	color: var(--ast-texto-claro);
}

/* ------------------------------------------------------------
   12.2 CTA DOURADO COM BRILHO DE LETREIRO
   .btn-estreia é o botão canônico do redesign (usado nos templates
   novos); .btn-primario (header, menu mobile) herda o mesmo visual.
   ------------------------------------------------------------ */
.btn-estreia {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	background: var(--ast-dourado);
	color: var(--ast-tinta-escura);
	font-family: var(--fonte-corpo);
	font-size: 0.875rem;
	font-weight: 900;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.btn-estreia:hover {
	background: var(--ast-dourado-hover);
	color: var(--ast-tinta-escura);
	transform: translateY(-1px);
}

/* Versão grande (hero): gradiente + borda clara + glow forte */
.btn-estreia--grande {
	padding: 1.1rem 2.5rem;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	background: var(--ast-cta-grad);
	border: 1px solid var(--ast-dourado-claro);
	border-radius: var(--raio);
	box-shadow: var(--ast-cta-glow);
}
.btn-estreia--grande:hover {
	background: var(--ast-cta-grad);
	box-shadow: var(--ast-cta-glow-hover);
}

/* Header/menu mobile: o .btn-primario ganha o visual de letreiro */
.btn-primario {
	background-color: var(--ast-dourado);
	color: var(--ast-tinta-escura);
	font-weight: 900;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 0.875rem;
	border-radius: 4px;
	box-shadow: 0 0 22px rgba(242, 180, 0, 0.45);
}
.btn-primario:hover {
	background-color: var(--ast-dourado-hover);
	color: var(--ast-tinta-escura);
}

/* ------------------------------------------------------------
   12.3 HEADER + FAIXA DE LÂMPADAS
   ------------------------------------------------------------ */
.site-header {
	background: var(--ast-header-grad);
	border-bottom: 1px solid rgba(242, 180, 0, 0.35);
	box-shadow: none;
}

/* Nav em caixa alta com tracking de letreiro */
.site-menu a {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 0;
	padding: 0.5rem 0.875rem;
}
.site-menu a:hover,
.site-menu .current-menu-item > a {
	color: var(--ast-dourado-hover);
	background-color: transparent;
}
.site-menu .current-menu-item > a {
	font-weight: 700;
}

.ast-cart-link:hover {
	color: var(--ast-dourado-hover);
	background-color: rgba(255, 255, 255, 0.06);
}

/* Fileira de lâmpadas do letreiro, logo abaixo do header */
.ast-luzes {
	height: 14px;
	background-image: radial-gradient(circle 4px at 14px 7px, var(--ast-dourado-claro) 45%, rgba(255, 222, 138, 0.2) 62%, transparent 70%);
	background-size: 28px 14px;
	background-color: var(--ast-fundo-secao);
}

/* Selo "Pagamento seguro" no header reduzido do checkout */
.ast-header-selo {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
}

/* Menu mobile aberto: fundo escuro do redesign */
@media (max-width: 768px) {
	.site-nav {
		background-color: var(--ast-fundo-secao);
		border-bottom: 1px solid var(--ast-borda-ouro-fraca);
	}
}

/* ------------------------------------------------------------
   12.4 FOOTER
   Mantém as 3 colunas, re-colorizado sobre var(--ast-footer-bg).
   ------------------------------------------------------------ */
.site-footer {
	background-color: var(--ast-footer-bg);
	border-top: 1px solid var(--ast-borda-ouro-fraca);
}

/* ------------------------------------------------------------
   12.5 HOME — HERO "NOITE DE ESTREIA"
   ------------------------------------------------------------ */
.hero-estreia {
	background:
		radial-gradient(ellipse 60% 80% at 30% 0%, rgba(242, 180, 0, 0.18), transparent 60%),
		radial-gradient(ellipse 60% 80% at 70% 0%, rgba(242, 180, 0, 0.14), transparent 60%),
		var(--ast-fundo-base);
	padding: 3.5rem 0 4rem;
}

.hero-estreia-grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 3.5rem;
	align-items: center;
}

@media (max-width: 860px) {
	.hero-estreia-grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

/* Linha-supra ornamentada: ✦ TEMPORADA 2026 · COTIA – SP ✦ */
.hero-supra {
	display: block;
	color: var(--ast-dourado-hover);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	margin: 0 0 1.1rem;
}
.hero-supra::before,
.hero-supra::after {
	content: none; /* remove as linhas do design antigo — o ✦ já orna */
}

.hero-titulo {
	font-family: var(--fonte-titulo);
	font-size: clamp(2.25rem, 4.5vw, 3.6rem);
	font-weight: 900;
	line-height: 1.08;
	color: var(--ast-texto-claro);
	margin: 0 0 1.25rem;
	letter-spacing: normal;
	text-wrap: pretty;
}

.hero-descricao {
	color: rgba(255, 246, 232, 0.7);
	font-size: 1.1rem;
	line-height: 1.6;
	margin: 0 0 2.25rem;
	max-width: 44ch;
}

.hero-acao {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.hero-nota-pagamento {
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.875rem;
}

/* Cartaz do espetáculo.
   A arte enviada pelo circo JÁ TEM moldura dourada desenhada — a
   moldura de CSS que existia aqui criava quadro dentro de quadro,
   com cara de "imagem num quadradinho". Agora o cartaz aparece
   inteiro (sem corte), com brilho quente de luz de lona e uma
   inclinação leve de pôster colado; ao passar o mouse, endireita. */
.hero-moldura {
	line-height: 0;
	border-radius: 6px;
	overflow: hidden;
	transform: rotate(-1.5deg);
	transition: transform 0.35s ease;
	box-shadow:
		0 24px 60px rgba(0, 0, 0, 0.55),
		0 0 90px rgba(242, 180, 0, 0.22);
}

.hero-moldura:hover {
	transform: rotate(0deg);
}

.hero-moldura .hero-img {
	width: 100%;
	height: auto;          /* cartaz inteiro, proporção original */
	max-height: 540px;
	object-fit: contain;
	display: block;
}

/* ------------------------------------------------------------
   12.6 HOME — SEÇÕES E TÍTULOS
   ------------------------------------------------------------ */
.secao-supra {
	text-align: center;
	color: var(--ast-dourado-hover);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	margin: 0 0 0.6rem;
}

.secao-titulo {
	font-family: var(--fonte-titulo);
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	font-weight: 900;
	color: var(--ast-texto-claro);
}
.secao-titulo::after {
	content: none; /* o supra ornamentado substitui a barrinha dourada */
}
.secao-titulo--esquerda {
	text-align: left;
}

.secao-subtitulo {
	color: var(--ast-texto-suave-esc);
}
.secao-subtitulo--claro {
	color: var(--ast-texto-suave-esc);
}

/* Sessões: faixa alternada mais escura */
.secao-sessoes {
	background-color: var(--ast-fundo-secao);
	border-top: 1px solid rgba(242, 180, 0, 0.25);
	padding: 4rem 0 4.5rem;
}

/* ------------------------------------------------------------
   12.7 HOME — CARDS DE SESSÃO (HORÁRIO DOMINANTE)
   ------------------------------------------------------------ */
.sessao-card {
	background: var(--ast-card-grad);
	border: 1px solid var(--ast-borda-ouro);
	border-top: 1px solid var(--ast-borda-ouro); /* cancela o topo dourado antigo */
	border-radius: 8px;
	box-shadow: none;
	overflow: hidden;
	transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.sessao-card:hover {
	transform: translateY(-4px);
	border-color: var(--ast-dourado-hover);
	box-shadow: 0 0 30px rgba(242, 180, 0, 0.25);
}

/* Data compacta no topo: SEXTA · 19 Junho */
.sessao-card-data {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-align: center;
	padding: 1rem 1rem 0.75rem;
	border-bottom: 1px dashed var(--ast-borda-ouro);
}
.sessao-dia-semana {
	color: var(--ast-dourado-hover);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.sessao-data-sep {
	color: rgba(255, 255, 255, 0.4);
}
.sessao-data-num {
	color: var(--ast-texto-claro);
	font-size: 0.875rem;
	font-weight: 900;
}
.sessao-nome-fallback {
	font-family: var(--fonte-titulo);
	font-size: 1rem;
	color: var(--ast-texto-claro);
	line-height: 1.3;
}

.sessao-card-body {
	padding: 1rem 1.25rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1;
}

/* O bloco do HORÁRIO — elemento dominante do card */
.sessao-horario-bloco {
	text-align: center;
}
.sessao-horario-label {
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	margin-bottom: 0.15rem;
}
.sessao-horario-valor {
	font-family: var(--fonte-titulo);
	font-size: 3.375rem; /* 54px — maior que qualquer outro elemento do card */
	font-weight: 900;
	line-height: 1;
	color: var(--ast-dourado-hover);
	text-shadow: 0 0 24px rgba(242, 180, 0, 0.4);
}

.sessao-preco-linha {
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.75rem;
	margin: 0;
}
.sessao-preco-linha strong,
.sessao-preco-linha .woocommerce-Price-amount {
	color: var(--ast-texto-claro);
	font-size: 0.95rem;
	font-weight: 900;
}

.sessao-card-body .btn-estreia {
	margin-top: auto;
	padding: 0.8rem 1rem;
}

/* Estado vazio adaptado ao fundo escuro */
.sessoes-vazio {
	background: var(--ast-card-grad);
	border: 2px dashed var(--ast-borda-ouro);
	color: var(--ast-texto-suave-esc);
}
.admin-hint {
	color: var(--ast-texto-suave-esc);
}

/* ------------------------------------------------------------
   12.8 HOME — SETORES
   ------------------------------------------------------------ */
.secao-setores {
	background:
		radial-gradient(ellipse 50% 100% at 50% 0%, rgba(242, 180, 0, 0.1), transparent 70%),
		var(--ast-fundo-base);
	border-top: 1px solid rgba(242, 180, 0, 0.25);
	padding: 4rem 0 4.5rem;
}
.secao-setores::before {
	content: none; /* remove os brilhos do design antigo */
}

.setores-grid {
	max-width: 1000px;
}

.setor-card {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 8px;
	padding: 2.25rem 2rem;
	gap: 0.75rem;
	box-shadow: none;
}
.setor-card:hover {
	transform: translateY(-3px);
	background: rgba(255, 255, 255, 0.03);
	box-shadow: none;
}

.setor-nome {
	font-family: var(--fonte-titulo);
	font-size: 1.625rem;
	color: #E8E8E8;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
}
.setor-nome--ouro {
	color: var(--ast-dourado-hover);
}

/* Divisor gradiente sob o nome do setor */
.setor-divisor {
	width: 60px;
	height: 2px;
	background: linear-gradient(90deg, transparent, #C0C0C0, transparent);
}
.setor-divisor--ouro {
	background: linear-gradient(90deg, transparent, var(--ast-dourado), transparent);
}

.setor-descricao {
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.95rem;
}

.setor-preco {
	color: #E8E8E8;
	font-size: 1.375rem;
	font-weight: 900;
	margin: 0;
}
.setor-preco--ouro {
	color: var(--ast-dourado-hover);
}

/* Ouro: destaque premium com borda dourada e glow */
.setor-card--ouro {
	background: rgba(242, 180, 0, 0.07);
	border: 2px solid var(--ast-dourado);
	box-shadow: 0 0 40px rgba(242, 180, 0, 0.2);
}
.setor-card--ouro:hover {
	background: rgba(242, 180, 0, 0.1);
	box-shadow: 0 0 50px rgba(242, 180, 0, 0.3);
}

.setor-badge {
	background: var(--ast-dourado);
	color: var(--ast-tinta-escura);
	font-size: 0.7rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	padding: 0.25rem 1rem;
}

.btn-setor-prata {
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 5px;
	font-size: 0.875rem;
	padding: 0.75rem 2rem;
}

/* ------------------------------------------------------------
   12.9 HOME — ONDE ESTAMOS
   ------------------------------------------------------------ */
.secao-local {
	background-color: var(--ast-fundo-secao);
	border-top: 1px solid rgba(242, 180, 0, 0.25);
}
.secao-local::before {
	content: none;
}
.local-cidade {
	color: var(--ast-texto-claro);
}
.local-endereco {
	color: var(--ast-texto-suave-esc);
}

/* ------------------------------------------------------------
   12.10 PÁGINA DA SESSÃO — BANNER
   ------------------------------------------------------------ */
.sessao-banner {
	background:
		radial-gradient(ellipse 70% 100% at 50% 0%, rgba(242, 180, 0, 0.16), transparent 60%),
		var(--ast-fundo-secao);
	border-bottom: 2px solid var(--ast-dourado);
	padding: 2.25rem 0 2rem;
}

.sessao-banner-supra {
	color: var(--ast-dourado-hover);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	margin: 0 0 0.75rem;
}

.sessao-banner-linha {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}

.sessao-banner-titulo {
	font-family: var(--fonte-titulo);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 900;
	color: var(--ast-texto-claro);
	margin: 0;
	line-height: 1.1;
}

.sessao-banner-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* Chip outline da data */
.sessao-banner-chip--data {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: var(--ast-texto-claro);
	padding: 0.7rem 1.25rem;
	border-radius: 999px;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
}

/* Chip DOURADO do horário — o elemento mais chamativo do banner */
.sessao-banner-chip--hora {
	background: var(--ast-dourado);
	color: var(--ast-tinta-escura);
	padding: 0.55rem 1.5rem;
	border-radius: 999px;
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	box-shadow: 0 0 28px rgba(242, 180, 0, 0.5);
}
.chip-hora-label {
	font-size: 0.75rem;
	font-weight: 900;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.chip-hora-valor {
	font-family: var(--fonte-titulo);
	font-size: 1.875rem;
	font-weight: 900;
	line-height: 1;
}

/* ------------------------------------------------------------
   12.11 PÁGINA DA SESSÃO — CARD "A SUA NOITE"
   ------------------------------------------------------------ */
.sessao-info-card {
	background: var(--ast-card-grad);
	border: 1px solid var(--ast-borda-ouro);
	border-radius: 8px;
	padding: 1.75rem;
}

.sessao-info-titulo {
	font-family: var(--fonte-titulo);
	font-size: 0.95rem;
	color: var(--ast-dourado-hover);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 1.25rem;
	padding-bottom: 0.875rem;
	border-bottom: 1px dashed var(--ast-borda-ouro);
}

.sessao-info-lista {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.sessao-info-item {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	margin: 0;
}

.sessao-info-label {
	display: block;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0;
}

.sessao-info-valor {
	color: var(--ast-texto-claro);
	font-weight: 900;
	font-size: 1.05rem;
}

/* Horário: o maior elemento do card, dourado com glow */
.sessao-info-hora {
	font-family: var(--fonte-titulo);
	color: var(--ast-dourado-hover);
	font-weight: 900;
	font-size: 2.5rem;
	line-height: 1.1;
	text-shadow: 0 0 24px rgba(242, 180, 0, 0.4);
}

.sessao-info-item--local {
	border-top: 1px dashed var(--ast-borda-ouro);
	padding-top: 1.1rem;
}

.sessao-info-sub {
	color: var(--ast-texto-suave-esc);
	font-size: 0.825rem;
}

.sessao-maps-link {
	margin-top: 0.4rem;
	color: var(--ast-dourado-hover);
	font-size: 0.825rem;
	font-weight: 700;
}
.sessao-maps-link:hover {
	color: var(--ast-dourado-claro);
	text-decoration: none;
}

/* ------------------------------------------------------------
   12.12 PÁGINA DA SESSÃO — FORMULÁRIO DE COMPRA
   ------------------------------------------------------------ */
.sessao-form-compra {
	background: var(--ast-card-grad);
	border: 1px solid var(--ast-borda-ouro);
	border-radius: 8px;
	padding: 2.25rem;
}

/* Passos numerados em Playfair dourado: "1 · ESCOLHA O SETOR" */
.ast-var-label {
	font-family: var(--fonte-titulo);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--ast-dourado-hover);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 0.8rem;
}

/* Botões de variação sobre fundo escuro */
.ast-var-btn {
	flex: 1;
	min-width: 9rem;
	align-items: flex-start;
	text-align: left;
	padding: 1rem 1.25rem;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--raio);
	transition: border-color var(--trans), background-color var(--trans), box-shadow var(--trans);
}
.ast-var-btn:hover {
	border-color: var(--ast-dourado);
	background: rgba(242, 180, 0, 0.06);
}
.ast-var-btn.is-ativo {
	background: rgba(242, 180, 0, 0.12);
	border: 2px solid var(--ast-dourado);
	box-shadow: 0 0 24px rgba(242, 180, 0, 0.3);
	/* compensa o pixel extra da borda para o layout não "pular" */
	padding: calc(1rem - 1px) calc(1.25rem - 1px);
}

/* A variação Ouro usa o mesmo tratamento (o badge ★ PREMIUM já destaca) */
.ast-var-btn--ouro {
	border-color: rgba(255, 255, 255, 0.25);
	background: rgba(0, 0, 0, 0.25);
}
.ast-var-btn--ouro:hover {
	border-color: var(--ast-dourado);
	background: rgba(242, 180, 0, 0.06);
}
.ast-var-btn--ouro.is-ativo {
	border-color: var(--ast-dourado);
	background: rgba(242, 180, 0, 0.12);
	box-shadow: 0 0 24px rgba(242, 180, 0, 0.3);
}

.ast-var-badge {
	color: var(--ast-dourado-hover);
	font-size: 0.625rem;
	font-weight: 900;
	letter-spacing: 0.14em;
}

.ast-var-nome {
	color: var(--ast-texto-claro);
	font-size: 1.05rem;
	font-weight: 900;
}

/* Sublinha descritiva: "Visão completa · R$ 40" / "Adulto" */
.ast-var-sub {
	display: block;
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.75rem;
	margin-top: 0.15rem;
}
.ast-var-sub .woocommerce-Price-amount {
	font-weight: 700;
}

.ast-reset-link {
	color: var(--ast-texto-suave-esc);
}

/* Caixa de preço da variação selecionada */
.single_variation_wrap .woocommerce-variation-price {
	background: rgba(242, 180, 0, 0.08);
	border: 1px dashed rgba(242, 180, 0, 0.5);
	border-radius: var(--raio);
	padding: 1.1rem 1.5rem;
}
.single_variation_wrap .woocommerce-variation-price .price {
	font-size: 1.875rem;
	font-weight: 900;
	color: var(--ast-dourado-hover);
}

/* Disponibilidade sobre fundo escuro */
.single_variation_wrap .in-stock {
	color: var(--ast-sucesso);
	background-color: rgba(127, 217, 138, 0.12);
}
.single_variation_wrap .out-of-stock {
	color: var(--ast-erro);
	background-color: rgba(224, 96, 96, 0.12);
}

/* Aviso de sessão esgotada */
.ast-esgotado {
	background-color: rgba(224, 96, 96, 0.12);
	color: var(--ast-erro);
	border: 1px solid rgba(224, 96, 96, 0.4);
}

/* Input de quantidade dentro do stepper */
.woocommerce-variation-add-to-cart input.qty {
	border: none;
	background: transparent;
	color: var(--ast-texto-claro);
	width: 3rem;
	height: 3rem;
	font-size: 1.25rem;
	font-weight: 900;
}

/* Botão COMPRAR — CTA dourado com brilho de letreiro */
body.woocommerce button.single_add_to_cart_button.button,
body.woocommerce-page button.single_add_to_cart_button.button {
	background: var(--ast-cta-grad) !important;
	color: var(--ast-tinta-escura) !important;
	border: 1px solid var(--ast-dourado-claro);
	font-weight: 900;
	font-size: 1.05rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: var(--ast-cta-glow);
	transition: box-shadow var(--trans), transform var(--trans);
}
body.woocommerce button.single_add_to_cart_button.button:hover,
body.woocommerce-page button.single_add_to_cart_button.button:hover {
	background: var(--ast-cta-grad) !important;
	color: var(--ast-tinta-escura) !important;
	box-shadow: var(--ast-cta-glow-hover);
}

/* ------------------------------------------------------------
   12.13 STEPPER DE QUANTIDADE (− qtd +) — montado pelo quantity.js
   ------------------------------------------------------------ */
.ast-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(242, 180, 0, 0.5);
	border-radius: var(--raio);
	overflow: hidden;
}
.ast-qty-btn {
	width: 2.75rem;
	height: 3rem;
	background: none;
	border: none;
	color: var(--ast-dourado-hover);
	font-size: 1.375rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--trans);
}
.ast-qty-btn:hover {
	background: rgba(242, 180, 0, 0.12);
}
.ast-qty input.qty {
	border: none !important;
	background: transparent !important;
	color: var(--ast-texto-claro) !important;
	text-align: center;
}

/* ------------------------------------------------------------
   12.14 ABAS DO PRODUTO E BREADCRUMB
   ------------------------------------------------------------ */
.woocommerce-breadcrumb {
	color: var(--ast-texto-suave-esc);
}
.woocommerce-breadcrumb a {
	color: var(--ast-dourado-hover);
}

.woocommerce-tabs .tabs {
	border-bottom: 1px solid var(--ast-borda-ouro-fraca);
}
.woocommerce-tabs .tabs a {
	color: var(--ast-texto-suave-esc);
}
.woocommerce-tabs .tabs a:hover,
.woocommerce-tabs .tabs li.active a {
	color: var(--ast-dourado-hover);
}
.woocommerce-tabs .tabs li.active a::after {
	background-color: var(--ast-dourado);
}
.woocommerce-tabs .panel {
	background: var(--ast-card-grad);
	border: 1px solid var(--ast-borda-ouro);
	border-top: none;
}
.woocommerce-tabs .panel h2 {
	color: var(--ast-dourado-hover);
	border-bottom: 1px dashed var(--ast-borda-ouro);
}
.ast-tab-detalhes li {
	color: var(--ast-texto-claro);
}
.ast-td-texto strong {
	color: var(--ast-texto-claro);
}
.ast-td-texto a {
	color: var(--ast-dourado-hover);
}
.woocommerce-product-attributes th {
	color: var(--ast-texto-claro);
	background-color: rgba(0, 0, 0, 0.25);
}
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	border-bottom: 1px solid var(--ast-borda-ouro-fraca);
}
.woocommerce-product-attributes td p {
	color: var(--ast-texto-suave-esc);
}

/* ------------------------------------------------------------
   12.15 GRADE DE PRODUTOS (página da loja)
   ------------------------------------------------------------ */
body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product {
	background: var(--ast-card-grad);
	border: 1px solid var(--ast-borda-ouro);
	border-radius: 8px;
}
body.woocommerce ul.products li.product:hover,
body.woocommerce-page ul.products li.product:hover {
	border-color: var(--ast-dourado-hover);
	box-shadow: 0 0 30px rgba(242, 180, 0, 0.25);
}
body.woocommerce ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	color: var(--ast-texto-claro);
}
body.woocommerce ul.products li.product .price,
body.woocommerce-page ul.products li.product .price {
	color: var(--ast-texto-suave-esc);
}
body.woocommerce ul.products li.product .price .amount,
body.woocommerce-page ul.products li.product .price .amount {
	color: var(--ast-dourado-hover);
}
.woocommerce-products-header__title.page-title,
h1.woocommerce-page-title {
	color: var(--ast-texto-claro);
}
.woocommerce-result-count {
	color: var(--ast-texto-suave-esc);
}
.woocommerce-ordering select {
	background-color: rgba(0, 0, 0, 0.35);
	border: 1px solid var(--ast-borda-ouro);
	color: var(--ast-texto-claro);
}

/* ------------------------------------------------------------
   12.16 MENSAGENS DO WOOCOMMERCE (fundo escuro)
   ------------------------------------------------------------ */
.woocommerce-message {
	background-color: rgba(127, 217, 138, 0.1);
	color: var(--ast-sucesso);
	border-left: 4px solid var(--ast-sucesso);
}
.woocommerce-info {
	background-color: rgba(242, 180, 0, 0.1);
	color: var(--ast-dourado-hover);
	border-left: 4px solid var(--ast-dourado);
}
.woocommerce-error {
	background-color: rgba(224, 96, 96, 0.12);
	color: var(--ast-erro);
	border-left: 4px solid var(--ast-erro);
}

/* ------------------------------------------------------------
   12.17 CARRINHO — LINHAS COMO CARDS
   ------------------------------------------------------------ */
.woocommerce-cart h1.page-title,
.woocommerce-cart h1.woocommerce-page-title {
	font-family: var(--fonte-titulo);
	font-size: clamp(1.75rem, 3.2vw, 2.375rem);
	font-weight: 900;
	color: var(--ast-texto-claro);
}

/* Esconde o cabeçalho da tabela — cada linha vira um card autoexplicativo */
.woocommerce-cart-form thead {
	display: none;
}

.woocommerce-cart-form .shop_table {
	border-collapse: separate;
	border-spacing: 0 0.875rem;
}

/* Cada item = card com borda dourada à esquerda */
.woocommerce-cart-form tbody tr.cart_item {
	background: var(--ast-card-grad);
	border-radius: var(--raio);
}
.woocommerce-cart-form tbody tr.cart_item td {
	border-top: 1px solid var(--ast-borda-ouro);
	border-bottom: 1px solid var(--ast-borda-ouro);
	vertical-align: middle;
	padding: 1.25rem 0.875rem;
}
.woocommerce-cart-form tbody tr.cart_item td:first-child {
	border-left: 4px solid var(--ast-dourado);
	border-radius: var(--raio) 0 0 var(--raio);
	padding-left: 1.25rem;
}
.woocommerce-cart-form tbody tr.cart_item td:last-child {
	border-right: 1px solid var(--ast-borda-ouro);
	border-radius: 0 var(--raio) var(--raio) 0;
	padding-right: 1.5rem;
}

/* Botão × de remover: círculo outline (hover vermelho) */
.woocommerce-cart-form .product-remove a.remove {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: rgba(255, 255, 255, 0.6) !important;
	border-radius: 50%;
	transition: border-color var(--trans), color var(--trans);
}
.woocommerce-cart-form .product-remove a.remove:hover {
	background: transparent;
	border-color: var(--ast-erro);
	color: var(--ast-erro) !important;
}

.ast-cart-nome {
	color: var(--ast-texto-claro);
	font-size: 1.05rem;
}
.ast-cart-nome:hover {
	color: var(--ast-dourado-hover);
}

/* Meta da linha: SETOR Ouro · TIPO Inteira · HORÁRIO 20h */
.woocommerce-cart-form .product-name .variation dt {
	color: var(--ast-dourado-hover);
	font-weight: 900;
	letter-spacing: 0.1em;
	font-size: 0.75rem;
}
.woocommerce-cart-form .product-name .variation dd {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.75rem;
}
/* O último par da <dl> é o HORÁRIO (injetado em functions.php):
   valor branco, 900 e maior que setor/tipo — regra do horário. */
.woocommerce-cart-form .product-name .variation dd:last-of-type {
	color: var(--ast-texto-claro);
	font-weight: 900;
	font-size: 0.875rem;
}

.woocommerce-cart-form .product-price {
	color: rgba(255, 255, 255, 0.6);
	font-weight: 400;
	font-size: 0.875rem;
}
.woocommerce-cart-form .product-subtotal {
	color: var(--ast-dourado-hover);
	font-weight: 900;
	font-size: 1.125rem;
}

.woocommerce-cart-form .product-quantity .qty {
	background-color: transparent;
	border: none;
	color: var(--ast-texto-claro);
}

/* Linha de ações (Atualizar quantidades) */
.woocommerce-cart-form td.actions {
	border: none;
	padding: 0.25rem 0;
}
.ast-btn-atualizar {
	color: var(--ast-texto-suave-esc) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.ast-btn-atualizar:hover {
	color: var(--ast-texto-claro) !important;
	border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Card de totais */
.cart_totals {
	background: var(--ast-card-grad);
	border: 1px solid var(--ast-borda-ouro);
	border-radius: 8px;
	padding: 1.75rem;
}
/* Título no estilo dos rótulos do tema ("HORÁRIO", "1 · ESCOLHA O
   SETOR"): caixa alta espaçada, dourado suave. O Playfair bold aqui
   parecia pesado demais para um card utilitário (feedback 31/08). */
.cart_totals h2 {
	font-family: var(--fonte-corpo);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ast-dourado-hover);
	border-bottom: 1px dashed var(--ast-borda-ouro);
	padding-bottom: 0.85rem;
	margin: 0 0 0.25rem;
}
/* Respiro nas células: o CSS antigo zerava o padding horizontal e o
   texto colava na moldura interna da tabela. */
.cart_totals .shop_table tr th,
.cart_totals .shop_table tr td {
	color: rgba(255, 255, 255, 0.7);
	font-weight: 400;
	padding: 0.85rem 1rem;
	vertical-align: middle;
}
.cart_totals .shop_table tr th {
	font-size: 0.9rem;
	line-height: 1.35;
}
.cart_totals .order-total th,
.cart_totals .order-total td {
	border-top: 1px solid var(--ast-borda-ouro);
	color: var(--ast-texto-claro);
	font-weight: 900;
}
.cart_totals .order-total td .woocommerce-Price-amount {
	color: var(--ast-dourado-hover);
	font-weight: 900;
}

/* CTA Finalizar compra */
.wc-proceed-to-checkout a.checkout-button {
	background: var(--ast-cta-grad) !important;
	color: var(--ast-tinta-escura) !important;
	border: 1px solid var(--ast-dourado-claro);
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: 0 0 30px rgba(242, 180, 0, 0.45);
	transition: box-shadow var(--trans), transform var(--trans);
}
.wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--ast-cta-grad) !important;
	box-shadow: 0 0 46px rgba(255, 201, 60, 0.7);
}
.wc-proceed-to-checkout::after {
	content: 'Pix · cartão de crédito — via PagBank';
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.75rem;
	margin-top: 0.875rem;
}

/* Responsivo do carrinho (sobrescreve o bloco antigo de 680px) */
@media (max-width: 680px) {
	.woocommerce-cart-form .shop_table tbody tr.cart_item {
		border: 1px solid var(--ast-borda-ouro);
		border-left: 4px solid var(--ast-dourado);
		border-radius: var(--raio);
		background: var(--ast-card-grad);
		padding: 0.5rem 0;
	}
	.woocommerce-cart-form .shop_table tbody tr.cart_item td,
	.woocommerce-cart-form .shop_table tbody tr.cart_item td:first-child,
	.woocommerce-cart-form .shop_table tbody tr.cart_item td:last-child {
		border: none;
		border-radius: 0;
	}
	.woocommerce-cart-form .shop_table tbody td::before {
		color: var(--ast-texto-suave-esc);
	}
}

/* ------------------------------------------------------------
   12.18 CHECKOUT
   ------------------------------------------------------------ */
.woocommerce-checkout h1.page-title,
.woocommerce-checkout h1.entry-title,
.woocommerce-checkout .entry-title {
	font-family: var(--fonte-titulo);
	font-size: clamp(1.75rem, 3.2vw, 2.375rem);
	font-weight: 900;
	color: var(--ast-texto-claro);
	border-bottom: none;
	padding-bottom: 0;
}

/*
 * LARGURA: o checkout (e o carrinho) usava padding lateral de 8% da tela
 * (clamp 1.5rem–5rem) SOMADO ao limite do .container. Em monitor grande
 * isso espremia tudo num miolo de ~900px. Agora o padding é o mesmo das
 * demais páginas e o container do checkout sobe para 1280px — o formulário
 * respira e o iframe de cartão do Mercado Pago cabe sem esmagar a coluna.
 */
.woocommerce-checkout .wc-pagina,
.woocommerce-cart .wc-pagina {
	padding-inline: var(--gap);
}
.woocommerce-checkout .wc-pagina > .container,
.woocommerce-cart .wc-pagina > .container {
	max-width: 1280px;
}

/*
 * COLUNAS: "Seus dados" (formulário) à esquerda, mais larga; "Resumo"
 * à direita, mais estreita — proporção do design aprovado.
 * O seletor leva .woocommerce-checkout na frente para vencer a regra
 * antiga (1fr 1.1fr, que invertia as proporções) por especificidade, e
 * não por ordem no arquivo.
 */
/*
 * LAYOUT EM TRÊS ÁREAS (desktop):
 *
 *   +-------------------+------------------+
 *   | Seus dados        | Pagamento        |  <- métodos + botão
 *   +-------------------+ (sticky: fica    |     Confirmar, sempre
 *   | Resumo do pedido  |  visível ao      |     à vista sem rolar
 *   |                   |  rolar)          |
 *   +-------------------+------------------+
 *
 * Antes, resumo + métodos + botão iam TODOS empilhados na coluna da
 * direita, e a esquerda ficava vazia abaixo do formulário: o cliente
 * tinha que rolar a página para trocar o método ou confirmar.
 *
 * O WooCommerce exige que tabela e #payment fiquem juntos em
 * #order_review (ele re-renderiza esse bloco por AJAX). Por isso
 * #order_review usa `display: contents`: ele some do layout e seus dois
 * filhos passam a ser itens diretos da grade — cada um vai para a sua
 * área sem tocar no HTML que o WooCommerce controla.
 */
.woocommerce-checkout .ast-checkout-grid {
	grid-template-columns: 1.3fr 1fr;
	/*
	 * auto 1fr: a primeira linha mede só o card "Seus dados". Sem isso,
	 * a altura do card de Pagamento (que atravessa as duas linhas) é
	 * distribuída entre elas e abre um vão gigante entre "Seus dados"
	 * e o "Resumo do pedido".
	 */
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"dados     pagamento"
		"resumo    pagamento";
	align-items: start;
	gap: 1.5rem 2rem;
}
.woocommerce-checkout .ast-checkout-esquerda             { grid-area: dados; }
.woocommerce-checkout .ast-checkout-review               { display: contents; }
.woocommerce-checkout .ast-checkout-review > .shop_table { grid-area: resumo; }
.woocommerce-checkout .ast-checkout-review > #payment    { grid-area: pagamento; }

/* Cards escuros: dados, resumo e pagamento */
.ast-checkout-esquerda,
.woocommerce-checkout .ast-checkout-review > .shop_table,
.woocommerce-checkout .ast-checkout-review > #payment {
	background: var(--ast-card-grad);
	border: 1px solid var(--ast-borda-ouro);
	border-radius: 8px;
	padding: 2rem;
}

/* O resumo é uma <table>: com display:table o padding não fecha o card
   em volta do conteúdo. Vira bloco, e thead/tbody/tfoot viram tabelas
   de largura total para as colunas continuarem alinhadas. */
.woocommerce-checkout .ast-checkout-review > .shop_table {
	display: block;
	margin: 0;
}
.woocommerce-checkout .ast-checkout-review > .shop_table thead,
.woocommerce-checkout .ast-checkout-review > .shop_table tbody,
.woocommerce-checkout .ast-checkout-review > .shop_table tfoot {
	display: table;
	width: 100%;
	table-layout: fixed;
}

/* Título "Resumo do pedido" desenhado via CSS: a tabela agora é um card
   próprio e o h2 antigo saiu do template. */
.woocommerce-checkout .ast-checkout-review > .shop_table::before {
	content: 'Resumo do pedido';
	display: block;
	font-family: var(--fonte-titulo);
	font-size: 1.25rem;
	color: var(--ast-texto-claro);
	padding-bottom: 0.875rem;
	margin-bottom: 1rem;
	border-bottom: 1px dashed var(--ast-borda-ouro);
}

/* Pagamento fixo ao rolar: o cliente nunca perde o botão de vista */
.woocommerce-checkout .ast-checkout-review > #payment {
	position: sticky;
	top: 1rem;
	overflow: visible;
}
.woocommerce-checkout .ast-checkout-review > #payment::before {
	content: 'Pagamento';
	display: block;
	font-family: var(--fonte-titulo);
	font-size: 1.25rem;
	color: var(--ast-dourado-hover);
	margin-bottom: 1rem;
}

.ast-checkout-titulo {
	font-family: var(--fonte-titulo);
	font-size: 1.25rem;
	color: var(--ast-dourado-hover);
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 1.5rem;
}
.ast-checkout-titulo::before {
	content: none; /* remove a barrinha do design antigo */
}
.ast-checkout-direita .ast-checkout-titulo {
	color: var(--ast-texto-claro);
	border-bottom: 1px dashed var(--ast-borda-ouro);
	padding-bottom: 0.875rem;
}

/* Labels e inputs sobre escuro */
.woocommerce-checkout label {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
}
.woocommerce-checkout .required {
	color: var(--ast-dourado-hover);
}

.woocommerce-checkout .input-text,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"] {
	background-color: rgba(0, 0, 0, 0.35);
	border: 1px solid var(--ast-borda-ouro);
	color: var(--ast-texto-claro);
	padding: 0.875rem 1rem;
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout input[type="tel"]:focus {
	border-color: var(--ast-dourado);
	box-shadow: 0 0 0 3px rgba(242, 180, 0, 0.15);
}
.woocommerce-checkout .input-text::placeholder {
	color: rgba(255, 255, 255, 0.35);
}

/* Nota sob o campo de e-mail */
.woocommerce-checkout #billing_email_field label::after {
	content: ' — seu ingresso com QR Code chega aqui';
	color: rgba(255, 255, 255, 0.45);
}

/* Resumo do pedido: tabela transparente dentro do card escuro */
.woocommerce-checkout-review-order-table {
	background: transparent;
	border: none;
}
.woocommerce-checkout-review-order-table thead th {
	background: transparent;
	color: var(--ast-texto-suave-esc);
	border-bottom: 1px dashed var(--ast-borda-ouro);
}
.woocommerce-checkout-review-order-table tbody td {
	border-bottom: 1px dashed var(--ast-borda-ouro-fraca);
	color: rgba(255, 255, 255, 0.8);
}
.woocommerce-checkout-review-order-table tbody .product-name {
	color: var(--ast-texto-claro);
	font-weight: 700;
}
.woocommerce-checkout-review-order-table .variation dt {
	color: var(--ast-dourado-hover);
}
.woocommerce-checkout-review-order-table .variation dd {
	color: rgba(255, 255, 255, 0.7);
}
/* Horário no resumo: branco e mais forte (regra do horário) */
.woocommerce-checkout-review-order-table .variation dd:last-of-type {
	color: var(--ast-texto-claro);
	font-weight: 900;
}
.woocommerce-checkout-review-order-table .product-quantity {
	color: var(--ast-dourado-hover);
}
.woocommerce-checkout-review-order-table .product-total {
	color: var(--ast-texto-claro);
}
.woocommerce-checkout-review-order-table tfoot tr th,
.woocommerce-checkout-review-order-table tfoot tr td {
	border-bottom: none;
	color: rgba(255, 255, 255, 0.7);
}
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
	border-top: 1px solid var(--ast-borda-ouro);
	color: var(--ast-texto-claro);
	font-weight: 900;
	font-size: 1.125rem;
}
.woocommerce-checkout-review-order-table tfoot .order-total td .woocommerce-Price-amount {
	color: var(--ast-dourado-hover);
}

/* Métodos de pagamento */
#payment {
	overflow: visible;
}
#payment ul.payment_methods {
	border-bottom: none;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}
/*
 * Cada forma de pagamento é um BLOCO: rótulo na linha de cima, formulário
 * do gateway (o iframe do Mercado Pago) embaixo, em largura total.
 * A regra antiga punha tudo em flex na mesma linha — o rótulo "Cartão de
 * crédito" quebrava em três linhas e o formulário de cartão ficava
 * espremido numa coluna estreita no meio do card.
 */
#payment ul.payment_methods li {
	display: block;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--raio);
	padding: 0;
	overflow: hidden;
	transition: border-color var(--trans), background-color var(--trans);
}
#payment ul.payment_methods li:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

/* Linha do rótulo: radio + nome + logo, clicável inteira */
#payment ul.payment_methods li > label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	margin: 0;
	width: 100%;
	cursor: pointer;
	font-size: 1rem;
}
#payment ul.payment_methods li > input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
/* Bolinha do radio desenhada no rótulo (o input real fica oculto acima) */
#payment ul.payment_methods li > label::before {
	content: '';
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.45);
	transition: border-color var(--trans), box-shadow var(--trans);
}
#payment ul.payment_methods li:has(input[type="radio"]:checked) > label::before {
	border-color: var(--ast-dourado);
	box-shadow: inset 0 0 0 4px var(--ast-dourado);
}
#payment ul.payment_methods li > label img {
	height: 1.5rem;
	width: auto;
	margin-left: auto;
}

/* O formulário do gateway abre abaixo do rótulo, usando a largura toda */
#payment ul.payment_methods li .payment_box {
	margin: 0;
	padding: 1rem 1.25rem 1.25rem;
	border-top: 1px dashed rgba(242, 180, 0, 0.35);
	border-radius: 0;
	background: rgba(0, 0, 0, 0.25);
}
/* O iframe/container do Mercado Pago não pode ficar estreito nem centrado */
#payment .payment_box > *,
#payment .payment_box iframe,
#payment .payment_box .mp-checkout-container,
#payment .payment_box .mp-checkout-custom-container {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* Método selecionado: destaque dourado */
#payment ul.payment_methods li:has(input[type="radio"]:checked) {
	border: 2px solid var(--ast-dourado);
	background: rgba(242, 180, 0, 0.08);
}
#payment ul.payment_methods li label {
	color: var(--ast-texto-claro);
}
#payment ul.payment_methods li input[type="radio"] {
	accent-color: var(--ast-dourado);
}
.payment_box {
	background-color: rgba(0, 0, 0, 0.25);
	color: var(--ast-texto-suave-esc);
	border-bottom: none;
	border-radius: var(--raio);
	margin-top: 0.5rem;
}
.woocommerce-terms-and-conditions-wrapper {
	color: var(--ast-texto-suave-esc);
}

/* Botão CONFIRMAR PEDIDO — CTA dourado com glow */
#place_order,
#place_order.button,
.woocommerce-checkout #place_order {
	background: var(--ast-cta-grad) !important;
	color: var(--ast-tinta-escura) !important;
	border: 1px solid var(--ast-dourado-claro) !important;
	font-weight: 900 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	box-shadow: 0 0 30px rgba(242, 180, 0, 0.45) !important;
	transition: box-shadow var(--trans), transform var(--trans) !important;
}
#place_order:hover,
.woocommerce-checkout #place_order:hover {
	background: var(--ast-cta-grad) !important;
	box-shadow: 0 0 46px rgba(255, 201, 60, 0.7) !important;
}

#payment .place-order::after {
	content: 'Ingresso digital enviado por e-mail após o pagamento — confira também a caixa de spam.';
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.75rem;
}

/* Overlay de processamento sobre fundo escuro */
.blockOverlay {
	background: rgba(21, 4, 4, 0.75) !important;
}

/* ------------------------------------------------------------
   12.19 PEDIDO RECEBIDO (PIX)
   ------------------------------------------------------------ */
.woocommerce-order-received .wc-pagina > .container {
	max-width: 860px; /* container centrado e mais estreito */
}

/* Banner de confirmação: centrado, com check circular verde */
.ast-thankyou-banner {
	background: transparent;
	border: none;
	padding: 1rem 0 0;
	text-align: center;
}

/* Check circular verde antes da mensagem */
.ast-thankyou-banner::before {
	content: '✓';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: rgba(127, 217, 138, 0.12);
	border: 2px solid var(--ast-sucesso);
	color: var(--ast-sucesso);
	font-size: 2.125rem;
}

.ast-thankyou-banner .woocommerce-thankyou-order-received {
	font-family: var(--fonte-titulo);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 900;
	color: var(--ast-texto-claro);
	margin-bottom: 2rem;
}

/* Overview: barra única com células separadas por linha tracejada */
.ast-thankyou-overview {
	border: 1px solid var(--ast-borda-ouro);
	border-radius: 8px;
	padding: 0;
	gap: 0;
	flex-wrap: nowrap;
	justify-content: center;
	overflow: hidden;
}
.ast-thankyou-overview li {
	flex: 1;
	text-align: center;
	align-items: center;
	padding: 1.1rem 0.75rem;
	border-right: 1px dashed rgba(242, 180, 0, 0.35);
	color: var(--ast-texto-claro);
}
.ast-thankyou-overview li:last-child {
	border-right: none;
}
.ast-thankyou-overview .ast-ov-label {
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.625rem;
	letter-spacing: 0.24em;
	opacity: 1;
}
.ast-thankyou-overview li strong {
	color: var(--ast-texto-claro);
	font-weight: 900;
	font-size: 0.95rem;
}

@media (max-width: 640px) {
	.ast-thankyou-overview {
		flex-wrap: wrap;
	}
	.ast-thankyou-overview li {
		flex: 1 1 40%;
		border-bottom: 1px dashed rgba(242, 180, 0, 0.35);
	}
}

/* Títulos das seções da página */
.ast-thankyou-section-title {
	font-family: var(--fonte-titulo);
	color: var(--ast-dourado-hover);
	border-bottom: none;
	justify-content: center;
}

/* Bloco Pix: card com borda dourada forte e glow */
.ast-thankyou-pix {
	background: var(--ast-card-grad);
	border: 2px solid var(--ast-dourado);
	border-radius: 8px;
	box-shadow: 0 0 40px rgba(242, 180, 0, 0.2);
	text-align: center;
	padding: 2.25rem 2rem;
}

/* Botão "Copiar código" dourado */
.mp-details-pix-button,
.ast-thankyou-pix button,
.ast-thankyou-pix [class*="mp-"][class*="button"],
.ast-thankyou-pix [class*="mp-"][class*="btn"] {
	background: var(--ast-cta-grad) !important;
	color: var(--ast-tinta-escura) !important;
	border: 1px solid var(--ast-dourado-claro) !important;
	font-weight: 900 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
}
.mp-details-pix-button:hover,
.ast-thankyou-pix button:hover,
.ast-thankyou-pix [class*="mp-"][class*="button"]:hover {
	background: var(--ast-cta-grad) !important;
	box-shadow: 0 0 30px rgba(255, 201, 60, 0.5) !important;
}

/* Campo do código copia-e-cola sobre escuro */
.mp-qr-input,
.mp-details-pix-qr-value {
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid var(--ast-borda-ouro);
	color: var(--ast-texto-suave-esc);
}

/* Textos que o bloco do Mercado Pago injeta */
.ast-thankyou-pix,
.ast-thankyou-pix p,
.ast-thankyou-pix span {
	color: var(--ast-texto-suave-esc);
}

/* Detalhes do pedido */
.ast-thankyou-detalhes {
	background: transparent;
	border: 1px solid var(--ast-borda-ouro);
	border-radius: 8px;
}
.ast-thankyou-detalhes .woocommerce-table--order-details th,
.ast-thankyou-detalhes .woocommerce-table--order-details td {
	border-bottom: 1px dashed rgba(242, 180, 0, 0.35);
	color: rgba(255, 255, 255, 0.8);
}
.ast-thankyou-detalhes .woocommerce-table--order-details thead th {
	color: var(--ast-texto-claro);
	border-bottom: 2px solid var(--ast-dourado);
}
.ast-thankyou-detalhes .woocommerce-table--order-details tfoot td,
.ast-thankyou-detalhes .woocommerce-table--order-details tfoot th {
	color: var(--ast-texto-claro);
}
.ast-thankyou-detalhes .woocommerce-table--order-details tfoot .order-total td,
.ast-thankyou-detalhes .woocommerce-table--order-details tfoot .order-total th {
	color: var(--ast-dourado-hover);
}
.ast-thankyou-detalhes .wc-item-meta {
	color: var(--ast-texto-suave-esc);
}

/* ------------------------------------------------------------
   12.20 CORREÇÕES DE ESPECIFICIDADE
   Regras que perdiam para o CSS do WooCommerce/plugins e
   precisaram de seletores mais fortes (verificado no navegador).
   ------------------------------------------------------------ */

/* Inputs do checkout: o CSS do WooCommerce/Mercado Pago vence a
   especificidade das regras da seção 12.18 — reforçamos aqui. */
body.woocommerce-checkout .input-text,
body.woocommerce-checkout input.input-text,
body.woocommerce-checkout form .form-row input.input-text,
body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="tel"] {
	background-color: rgba(0, 0, 0, 0.35) !important;
	border: 1px solid var(--ast-borda-ouro) !important;
	border-radius: var(--raio) !important;
	color: var(--ast-texto-claro) !important;
	padding: 0.875rem 1rem;
}
body.woocommerce-checkout .input-text:focus,
body.woocommerce-checkout input[type="text"]:focus,
body.woocommerce-checkout input[type="email"]:focus,
body.woocommerce-checkout input[type="tel"]:focus {
	border-color: var(--ast-dourado) !important;
	box-shadow: 0 0 0 3px rgba(242, 180, 0, 0.15) !important;
	outline: none;
}

/* Abas do produto: o WooCommerce pinta as "orelhas" com fundo claro
   e bordas próprias — zeramos para o visual escuro do redesign. */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: transparent;
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
	display: none;
	border: none;
	box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 0.65rem 1.4rem;
	font-weight: 700;
	color: var(--ast-texto-suave-esc);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--ast-dourado-hover);
}

/* ------------------------------------------------------------
   12.21 CONDIÇÕES DE COMPRA DE INGRESSO
   Página de termos (page.php) + bloco de aceite no checkout.
   ------------------------------------------------------------ */

/* Página de conteúdo: coluna de leitura confortável */
.pagina-conteudo {
	max-width: 52rem;
}
.pagina-conteudo h1 {
	font-family: var(--fonte-titulo);
	font-weight: 900;
	font-size: clamp(1.75rem, 3.2vw, 2.375rem);
}
.pagina-conteudo h2 {
	font-family: var(--fonte-titulo);
	color: var(--ast-dourado-hover);
	font-size: 1.35rem;
	margin: 2.25rem 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px dashed var(--ast-borda-ouro);
}
.pagina-conteudo p,
.pagina-conteudo li {
	color: rgba(255, 246, 232, 0.85);
	line-height: 1.7;
}
.pagina-conteudo strong {
	color: var(--ast-texto-claro);
}
.pagina-conteudo ul {
	padding-left: 1.4rem;
}
.pagina-conteudo li {
	margin-bottom: 0.4rem;
}
.pagina-conteudo em {
	color: var(--ast-texto-suave-esc);
}

/* Link das condições na linha inferior do footer */
.footer-termos-link {
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.8rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--trans);
}
.footer-termos-link:hover {
	color: var(--ast-dourado-hover);
}

/* Checkout — bloco "Li e aceito as Condições de Compra de Ingresso" */
.woocommerce-terms-and-conditions-wrapper {
	padding: 0.25rem 0 0.75rem;
	color: var(--ast-texto-suave-esc);
}

/* Conteúdo dos termos embutido (abre ao clicar no link) */
.woocommerce-terms-and-conditions {
	background: rgba(0, 0, 0, 0.25) !important;
	border: 1px solid var(--ast-borda-ouro);
	border-radius: var(--raio);
	padding: 1rem 1.25rem;
	max-height: 240px;
	overflow-y: auto;
	margin-bottom: 1rem;
	box-shadow: none !important;
}
.woocommerce-terms-and-conditions h2 {
	font-size: 1rem;
	color: var(--ast-dourado-hover);
}
.woocommerce-terms-and-conditions p,
.woocommerce-terms-and-conditions li {
	font-size: 0.8rem;
	color: rgba(255, 246, 232, 0.8);
}

/* Checkbox + rótulo do aceite */
.woocommerce-terms-and-conditions-checkbox-text {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.875rem;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}
.woocommerce-terms-and-conditions-checkbox-text a {
	color: var(--ast-dourado-hover);
	font-weight: 700;
}
.woocommerce-checkout #payment .form-row.validate-required input[type="checkbox"] {
	accent-color: var(--ast-dourado);
	width: 1.05rem;
	height: 1.05rem;
}

/* ------------------------------------------------------------
   12.22 TELA "EM BREVE" (coming-soon.php)
   Holofote central, título Playfair 900 e CTAs do redesign.
   ------------------------------------------------------------ */
.ast-embreve {
	background:
		radial-gradient(ellipse 60% 80% at 50% 0%, rgba(242, 180, 0, 0.18), transparent 60%),
		var(--ast-fundo-base);
	padding: 6rem 0 7rem;
	min-height: 55vh;
	display: flex;
	align-items: center;
}

.ast-embreve-inner {
	text-align: center;
	max-width: 44rem;
}

.ast-embreve-supra {
	color: var(--ast-dourado-hover);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	margin: 0 0 1.1rem;
}

.ast-embreve-titulo {
	font-family: var(--fonte-titulo);
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	font-weight: 900;
	line-height: 1.1;
	color: var(--ast-texto-claro);
	margin: 0 0 1.25rem;
	text-wrap: pretty;
}

.ast-embreve-texto {
	color: rgba(255, 246, 232, 0.7);
	font-size: 1.1rem;
	line-height: 1.7;
	margin: 0 auto 1.75rem;
	max-width: 40rem;
}

.ast-embreve-local {
	color: var(--ast-texto-claro);
	font-weight: 700;
	margin: 0 0 2rem;
}

.ast-embreve-redes {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Preço "a partir de" na listagem da loja */
.ast-preco-a-partir {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--ast-texto-suave-esc);
	text-transform: lowercase;
	letter-spacing: 0;
}

/* ------------------------------------------------------------
   12.23 AGENDA DE SESSÕES (loja)
   Uma linha por DIA, com os horários como botões. Substitui a
   grade de cards, que repetia nome e data dezenas de vezes.
   Coluna estreita e linhas compactas: é uma LISTA para percorrer
   com o olho, não um mosaico para explorar.
   ------------------------------------------------------------ */
.ast-agenda-titulo {
	font-family: var(--fonte-titulo);
	font-size: clamp(1.75rem, 3.2vw, 2.375rem);
	font-weight: 900;
	color: var(--ast-texto-claro);
	margin: 0 0 0.4rem;
}

.ast-agenda-sub {
	color: var(--ast-texto-suave-esc);
	margin: 0 0 2rem;
	font-size: 0.95rem;
}

/* A agenda não usa a largura toda: linhas curtas leem melhor e o
   preço não fica exilado no canto direito da tela. */
.ast-agenda,
.ast-agenda-titulo,
.ast-agenda-sub {
	max-width: 46rem;
	margin-inline: auto;
}

/* Cabeçalho de mês */
.ast-agenda-mes {
	font-family: var(--fonte-corpo);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ast-dourado-hover);
	margin: 2rem 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px dashed var(--ast-borda-ouro);
}
.ast-agenda-mes:first-child {
	margin-top: 0;
}

/* Linha do dia */
.ast-agenda-dia {
	display: grid;
	grid-template-columns: 5.5rem 1fr auto;
	align-items: center;
	gap: 1.25rem;
	background: var(--ast-card-grad);
	border: 1px solid var(--ast-borda-ouro);
	border-left: 3px solid var(--ast-dourado);
	border-radius: 6px;
	padding: 0.7rem 1.1rem;
	margin-bottom: 0.5rem;
	transition: border-color var(--trans), box-shadow var(--trans);
}
.ast-agenda-dia:hover {
	border-color: var(--ast-dourado-hover);
	box-shadow: 0 0 20px rgba(242, 180, 0, 0.15);
}

/* Coluna da data — compacta: SÁB / 22 / Agosto numa pilha curta */
.ast-agenda-data {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}
.ast-agenda-semana {
	color: var(--ast-dourado-hover);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.ast-agenda-numero {
	font-family: var(--fonte-titulo);
	font-size: 1.75rem;
	font-weight: 900;
	color: var(--ast-texto-claro);
	line-height: 1.1;
}
.ast-agenda-mes-curto {
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ast-agenda-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* O horário continua sendo o elemento dominante — agora clicável */
.ast-chip-horario {
	display: inline-block;
	min-width: 4.75rem;
	text-align: center;
	padding: 0.4rem 0.9rem;
	font-family: var(--fonte-titulo);
	font-size: 1.25rem;
	font-weight: 900;
	line-height: 1.15;
	color: var(--ast-dourado-hover);
	background: rgba(242, 180, 0, 0.08);
	border: 1px solid var(--ast-borda-ouro);
	border-radius: 5px;
	text-decoration: none;
	transition: background-color var(--trans), border-color var(--trans), color var(--trans), box-shadow var(--trans);
}
.ast-chip-horario:hover {
	background: var(--ast-cta-grad);
	border-color: var(--ast-dourado-claro);
	color: var(--ast-tinta-escura);
	box-shadow: 0 0 20px rgba(242, 180, 0, 0.4);
}

/* Preço: presente, mas sem competir — é igual em quase toda linha */
.ast-agenda-preco {
	text-align: right;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.4);
	font-size: 0.7rem;
}
.ast-agenda-preco strong,
.ast-agenda-preco .woocommerce-Price-amount {
	display: block;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.9rem;
	font-weight: 700;
}

/* Celular: data e preço na mesma linha, horários embaixo */
@media (max-width: 560px) {
	.ast-agenda-dia {
		grid-template-columns: 1fr auto;
		gap: 0.6rem 1rem;
		padding: 0.9rem 1rem;
	}
	/* Linha 1: data à esquerda, preço à direita. Linha 2: os horários.
	   As posições são explícitas porque no HTML os horários vêm antes
	   do preço — sem isto o preço cairia numa terceira linha sozinho. */
	.ast-agenda-data {
		grid-column: 1;
		grid-row: 1;
		flex-direction: row;
		align-items: baseline;
		gap: 0.4rem;
	}
	.ast-agenda-preco {
		grid-column: 2;
		grid-row: 1;
	}
	.ast-agenda-chips {
		grid-column: 1 / -1;
		grid-row: 2;
	}
	.ast-agenda-numero {
		font-size: 1.25rem;
	}
	/* Sem flex-grow: um horário sozinho não deve virar um botão
	   gigante ocupando a largura inteira da tela. */
	.ast-chip-horario {
		flex: 0 0 auto;
		min-width: 5rem;
	}
}

/* ------------------------------------------------------------
   12.24 ONDE ESTAMOS — TEXTO + MAPA
   ------------------------------------------------------------ */
.local-grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 3rem;
	align-items: center;
}

/* Sem endereço configurado o mapa não existe: o texto ocupa tudo */
.local-grid--sem-mapa {
	grid-template-columns: 1fr;
}

.local-texto .secao-titulo {
	margin-bottom: 0.5rem;
}

/* Moldura dourada, igual à do cartaz no topo da página: sem ela o mapa
   entra como um retângulo claro solto no meio do fundo escuro. */
.local-mapa {
	padding: 8px;
	background: linear-gradient(135deg, #F2B400, #8A6400 40%, #FFC93C 70%, #B8870A);
	border-radius: 10px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
	line-height: 0;
}

.local-mapa iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	border: 0;
	border-radius: 5px;
}

@media (max-width: 860px) {
	.local-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.local-mapa iframe {
		aspect-ratio: 4 / 3;
	}
}


/*
 * COMPACTAR A COLUNA DE PAGAMENTO
 * O objetivo é o botão "Confirmar pedido" caber na primeira tela
 * (até ~1100px de altura) sem rolar. Três economias:
 *   1) o banner informativo do Pix do Mercado Pago tem ~330px só para
 *      dizer "pague com Pix" — limitamos e deixamos rolável;
 *   2) o texto da política de privacidade ocupa 3 linhas — fica menor;
 *   3) paddings internos um pouco mais justos.
 */
.woocommerce-checkout .ast-checkout-review > #payment {
	padding: 1.5rem 1.5rem 1.25rem;
}
.woocommerce-checkout .ast-checkout-review > #payment::before {
	margin-bottom: 0.75rem;
}
#payment ul.payment_methods {
	gap: 0.5rem;
	margin-bottom: 0.25rem;
}
#payment ul.payment_methods li > label {
	padding: 0.8rem 1.1rem;
}
#payment ul.payment_methods li .payment_box {
	padding: 0.75rem 1rem 1rem;
	max-height: 260px;       /* o banner do Pix vira uma caixinha rolável */
	overflow: auto;
}
/* O formulário de cartão precisa de altura para os campos; o do Pix não. */
#payment ul.payment_methods li.payment_method_woo-mercado-pago-custom .payment_box,
#payment ul.payment_methods li.payment_method_rm-pagbank-cc .payment_box {
	max-height: none;
	overflow: visible;
}
.woocommerce-privacy-policy-text,
.woocommerce-privacy-policy-text p {
	font-size: 0.75rem;
	line-height: 1.45;
	margin: 0 0 0.5rem;
	color: rgba(255, 255, 255, 0.5);
}
.woocommerce-terms-and-conditions-wrapper {
	padding-top: 0;
}
#payment .place-order {
	padding: 0.75rem 0 0;
}


/* ------------------------------------------------------------
   12.21 CAMPOS DE PARTICIPANTE (FooEvents) NO CHECKOUT
   Um bloco por ingresso dentro de "Seus dados": nome, sobrenome
   e e-mail de quem vai usar o ingresso (+ documento de meia).
   Inputs e labels herdam o estilo genérico do checkout; aqui só
   a moldura de cada participante e os títulos.
   ------------------------------------------------------------ */

.ast-checkout-esquerda h3.fooevents-eventname {
	margin: 1.75rem 0 0.25rem;
	padding-top: 1.25rem;
	border-top: 1px dashed var(--ast-borda-ouro);
	font-size: 1rem;
	color: var(--ast-dourado-hover);
}

.ast-checkout-esquerda .fooevents-attendee {
	margin-top: 0.75rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--ast-borda-ouro);
	border-radius: var(--raio);
	background-color: rgba(0, 0, 0, 0.2);
}

.ast-checkout-esquerda h4.fooevents-attendee-number {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ast-texto-suave);
}

/* "Setor: Prata / Tipo: Infantil" — repete o resumo, encolhemos */
.ast-checkout-esquerda .fooevents-variation-desc p {
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	color: var(--ast-texto-suave-esc);
}

/* Div de disponibilidade que o FooEvents deixa vazia em eventos simples */
.ast-checkout-esquerda .fooevents-checkout-attendee-info:empty {
	display: none;
}

/* Link "copiar dados do comprador", se ativado nas opções do FooEvents */
.ast-checkout-esquerda .fooevents-copy-from-purchaser {
	color: var(--ast-dourado);
	text-decoration: underline;
	font-size: 0.85rem;
}

/* O último campo do bloco não precisa da folga de baixo */
.ast-checkout-esquerda .fooevents-attendee .form-row:last-of-type {
	margin-bottom: 0;
}

/* ------------------------------------------------------------
   12.22 TELA "PAGUE COM PIX" (Mercado Pago) NO TEMA ESCURO
   O plugin desenha o painel do QR com fundo branco fixo e textos
   pretos, pensado para sites claros. Escurecemos o painel e
   preservamos DUAS ilhas brancas de propósito: o QR Code (o app
   do banco precisa de módulos escuros sobre fundo claro para
   escanear) e o logotipo do Pix (a arte é azul-escura).
   Os !important vencem o CSS do plugin, que pode carregar depois
   do nosso na fila de estilos.
   ------------------------------------------------------------ */

.mp-details-title {
	margin: 1.5rem 0 0.5rem;
	font-family: var(--fonte-titulo, serif);
	font-size: 1.5rem;
	text-align: center;
	color: var(--ast-texto-claro);
}
.mp-details-pix {
	background-color: transparent !important;
	box-shadow: none !important;
}
/* Separador entre a coluna de instruções e a do QR */
.mp-pix-right {
	border-color: var(--ast-borda-ouro) !important;
}
/* Textos que o plugin pinta de preto */
.mp-details-pix-title,
.mp-details-list-description,
.mp-details-pix-qr-title,
.mp-details-pix-qr-description,
.mp-details-pix-amount {
	color: var(--ast-texto-claro) !important;
}
.mp-details-pix-qr-subtitle {
	color: var(--ast-texto-suave-esc) !important;
}
/* Bolinhas numeradas do passo a passo: azul MP → dourado */
.mp-details-pix-number-p {
	border-color: var(--ast-dourado) !important;
	color: var(--ast-dourado) !important;
}
/* Logotipo do Pix: arte azul-escura, ganha uma placa clara */
.mp-details-pix-img {
	background-color: #fff;
	border-radius: var(--raio);
	padding: 8px 12px !important;
	box-sizing: content-box;
}
/* QR Code: moldura branca generosa para o banco escanear */
.mp-details-pix-qr-img {
	background-color: #fff;
	border-radius: var(--raio);
	padding: 12px;
	box-sizing: content-box;
}
/* Campo do copia-e-cola no padrão dos inputs do tema */
.mp-qr-input {
	background-color: rgba(0, 0, 0, 0.35) !important;
	border: 1px solid var(--ast-borda-ouro) !important;
	border-radius: var(--raio) !important;
	color: var(--ast-texto-claro) !important;
}
/* Botão "Copiar código": azul MP → dourado do tema */
.mp-details-pix-button {
	background-color: var(--ast-dourado) !important;
	color: var(--ast-tinta-escura) !important;
	font-weight: 700;
	cursor: pointer;
}
.mp-details-pix-button:hover {
	background-color: var(--ast-dourado-hover) !important;
}

/* ------------------------------------------------------------
   12.23 AVISO DO PANFLETO (ingresso promocional Infantil)
   Caixa de destaque exibida na agenda e na página da sessão —
   ver seção 25 do functions.php. Dourado por ser informação de
   preço/validação, não erro: vermelho assustaria à toa.
   ------------------------------------------------------------ */

.ast-aviso-panfleto {
	display: block;
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--ast-borda-ouro);
	border-left: 4px solid var(--ast-dourado);
	border-radius: var(--raio);
	background-color: rgba(242, 180, 0, 0.08);
	color: var(--ast-texto-claro);
	font-size: 0.92rem;
	line-height: 1.5;
}
.ast-aviso-panfleto strong {
	color: var(--ast-dourado-hover);
}
/* Na página da sessão o aviso vive dentro do formulário de compra,
   colado no botão — um respiro extra entre os dois. */
form.cart .ast-aviso-panfleto,
form.variations_form .ast-aviso-panfleto {
	margin: 1.25rem 0;
}

/* ------------------------------------------------------------
   12.24 LEGENDA DOS SETORES (página da sessão)
   "Ouro: de frente ao palco · Prata: de lado ao palco" — vem do
   functions.php seção 32, logo acima do aviso do panfleto.
   ------------------------------------------------------------ */

.ast-legenda-setores {
	margin: 1rem 0 0;
	font-size: 0.9rem;
	color: var(--ast-texto-suave-esc);
}
.ast-legenda-setores strong {
	color: var(--ast-dourado-hover);
}

/* ------------------------------------------------------------
   12.25 MINHA CONTA (login, cadastro, pedidos e ingressos)
   As telas de conta do WooCommerce chegam com o visual claro
   padrão; aqui entram no tema escuro. A caixinha "criar conta"
   do checkout (form-billing.php) também é estilizada aqui.
   ------------------------------------------------------------ */

/* Inputs das telas de conta: mesmo visual dos inputs do checkout */
body.woocommerce-account input[type="text"],
body.woocommerce-account input[type="email"],
body.woocommerce-account input[type="tel"],
body.woocommerce-account input[type="password"],
body.woocommerce-checkout input[type="password"] {
	width: 100%;
	background-color: rgba(0, 0, 0, 0.35) !important;
	border: 1px solid var(--ast-borda-ouro) !important;
	border-radius: var(--raio) !important;
	color: var(--ast-texto-claro) !important;
	padding: 0.875rem 1rem;
	box-sizing: border-box;
	font-size: 1rem;
}
body.woocommerce-account input:focus,
body.woocommerce-checkout input[type="password"]:focus {
	border-color: var(--ast-dourado) !important;
	box-shadow: 0 0 0 3px rgba(242, 180, 0, 0.15) !important;
	outline: none;
}
body.woocommerce-account .woocommerce form .form-row label {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ast-texto-suave);
}

/* Login e cadastro lado a lado, cada um no seu card */
body.woocommerce-account .u-columns.col2-set {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	max-width: 62rem;
	margin: 0 auto;
}
body.woocommerce-account .u-columns.col2-set .u-column1,
body.woocommerce-account .u-columns.col2-set .u-column2 {
	flex: 1 1 320px;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid var(--ast-borda-ouro);
	border-radius: var(--raio);
	padding: 1.75rem;
}
body.woocommerce-account .u-columns h2 {
	margin-top: 0;
	font-size: 1.3rem;
	color: var(--ast-dourado-hover);
}

/* Área logada: navegação de abas + conteúdo */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
body.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--ast-borda-ouro);
	border-radius: 999px;
	color: var(--ast-texto-suave);
	text-decoration: none;
	font-size: 0.9rem;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	background: var(--ast-dourado);
	border-color: var(--ast-dourado);
	color: var(--ast-tinta-escura);
	font-weight: 700;
}

/* Tabela de pedidos */
body.woocommerce-account table.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
}
body.woocommerce-account table.woocommerce-orders-table th,
body.woocommerce-account table.woocommerce-orders-table td {
	padding: 0.75rem 0.6rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	text-align: left;
	color: var(--ast-texto-claro);
}
body.woocommerce-account table.woocommerce-orders-table th {
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ast-texto-suave);
}
body.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button,
body.woocommerce-account .woocommerce-Button,
body.woocommerce-account button[type="submit"],
body.woocommerce-checkout .ast-criar-conta ~ * button {
	background: var(--ast-dourado);
	color: var(--ast-tinta-escura);
	border: 0;
	border-radius: var(--raio);
	padding: 0.6rem 1.4rem;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}
body.woocommerce-account .woocommerce-Button:hover,
body.woocommerce-account .woocommerce-button:hover {
	background: var(--ast-dourado-hover);
}

/* Links soltos (perdeu a senha, etc.) — SÓ na área de conteúdo.
   Antes valia para o .woocommerce inteiro e vencia a regra da aba
   ativa: texto dourado sobre fundo dourado, aba "invisível". */
body.woocommerce-account .woocommerce-MyAccount-content a:not(.woocommerce-button):not(.woocommerce-Button):not(.ast-conta-botao),
body.woocommerce-account .u-columns a {
	color: var(--ast-dourado);
}

/* Painel de boas-vindas (dashboard.php do tema) */
.ast-conta-ola {
	font-size: 1.4rem;
	margin: 0 0 0.75rem;
	color: var(--ast-texto-claro);
}
.ast-conta-texto {
	max-width: 46rem;
	color: var(--ast-texto-suave-esc);
	line-height: 1.6;
	margin: 0 0 1.5rem;
}
.ast-conta-botao {
	display: inline-block;
	background: var(--ast-dourado);
	color: var(--ast-tinta-escura) !important;
	border-radius: var(--raio);
	padding: 0.85rem 1.6rem;
	font-weight: 700;
	text-decoration: none;
}
.ast-conta-botao:hover {
	background: var(--ast-dourado-hover);
}
.ast-conta-rodape {
	margin-top: 1.5rem;
	font-size: 0.9rem;
	color: var(--ast-texto-suave-esc);
}

/* Selo "1 ingresso vale para até 3 pessoas" nas linhas de ter/qui.
   white-space normal DE PROPÓSITO: o pai (.ast-agenda-preco) proíbe
   quebra de linha para o preço, e o selo herdava a proibição —
   no celular o texto vazava para fora da tela (print de 31/08). */
.ast-agenda-selo-grupo {
	display: block;
	margin-top: 0.35rem;
	margin-left: auto;
	max-width: 11rem;
	white-space: normal;
	line-height: 1.35;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ast-dourado-hover);
}

/* Preço promocional nos cartões de setor: "de R$ 30 por R$ 15" */
.ast-var-sub del {
	color: var(--ast-texto-suave-esc);
	text-decoration: line-through;
	font-weight: 400;
	margin-right: 0.35rem;
}
.ast-var-sub .ast-preco-promo {
	color: var(--ast-dourado-hover);
	font-weight: 700;
}

/* Cartão único de Entrar/Cadastrar (form-login.php do tema) */
.ast-conta-cartao {
	max-width: 28rem;
	margin: 0 auto;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid var(--ast-borda-ouro);
	border-radius: var(--raio);
	padding: 2rem;
}
.ast-conta-cartao h2 {
	margin: 0 0 1.25rem;
	font-size: 1.4rem;
	color: var(--ast-dourado-hover);
}
.ast-conta-cartao .form-row {
	margin-bottom: 1rem;
}
.ast-conta-nome-dupla {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1rem;
}
@media (max-width: 480px) {
	.ast-conta-nome-dupla { grid-template-columns: 1fr; }
}
.ast-conta-linha-login label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: 0.9rem;
	color: var(--ast-texto-suave-esc);
	cursor: pointer;
}
.ast-conta-cartao input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--ast-dourado);
}
.ast-conta-cartao .ast-conta-botao {
	width: 100%;
	border: 0;
	cursor: pointer;
	font-size: 1rem;
	margin-top: 0.25rem;
}
.ast-conta-cartao .lost_password {
	margin: 0.9rem 0 0;
	font-size: 0.9rem;
	text-align: center;
}
.ast-conta-troca {
	margin: 1.25rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px dashed var(--ast-borda-ouro);
	text-align: center;
	color: var(--ast-texto-suave-esc);
	font-size: 0.95rem;
}
.ast-conta-cartao a {
	color: var(--ast-dourado);
}
/* Texto de privacidade do cadastro, discreto */
.ast-conta-cartao .woocommerce-privacy-policy-text,
.ast-conta-cartao .woocommerce-privacy-policy-text p {
	font-size: 0.78rem;
	color: var(--ast-texto-suave-esc);
	line-height: 1.5;
	margin: 0 0 0.9rem;
}

/* --- Detalhe do pedido dentro da conta ---
   A tabela order_details herdava cores do tema claro sobre o fundo
   escuro (texto marrom quase invisível — print de 31/08). */
body.woocommerce-account table.woocommerce-table--order-details,
body.woocommerce-account table.order_details {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--ast-borda-ouro);
	border-radius: var(--raio);
}
body.woocommerce-account table.order_details th,
body.woocommerce-account table.order_details td {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	background: transparent;
	color: var(--ast-texto-claro) !important;
	text-align: left;
}
body.woocommerce-account table.order_details thead th {
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ast-texto-suave) !important;
}
body.woocommerce-account table.order_details .woocommerce-Price-amount {
	color: var(--ast-dourado-hover);
}
body.woocommerce-account table.order_details .wc-item-meta,
body.woocommerce-account table.order_details .wc-item-meta p {
	color: var(--ast-texto-suave-esc) !important;
	font-size: 0.85rem;
}
/* Notas do pedido ("Atualizações do pedido") mais discretas */
body.woocommerce-account .woocommerce-OrderUpdates {
	color: var(--ast-texto-suave-esc);
}
body.woocommerce-account .woocommerce-OrderUpdate-meta {
	color: var(--ast-texto-suave);
}
/* Endereço/dados do cliente no fim do pedido */
body.woocommerce-account .woocommerce-customer-details address {
	border: 1px solid var(--ast-borda-ouro);
	border-radius: var(--raio);
	padding: 1rem 1.25rem;
	color: var(--ast-texto-claro);
}

/* --- Avisos (woocommerce-info/message) na área da conta ---
   Vinham com o azul padrão + botão dourado com texto dourado. */
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-message {
	background: rgba(242, 180, 0, 0.08);
	border-top: none;
	border-left: 4px solid var(--ast-dourado);
	border-radius: var(--raio);
	color: var(--ast-texto-claro);
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
body.woocommerce-account .woocommerce-info::before,
body.woocommerce-account .woocommerce-message::before {
	display: none; /* ícone posicionado do CSS claro do Woo não encaixa aqui */
}
body.woocommerce-account .woocommerce-info a.button,
body.woocommerce-account .woocommerce-message a.button {
	background: var(--ast-dourado);
	color: var(--ast-tinta-escura) !important;
	border-radius: var(--raio);
	padding: 0.55rem 1.2rem;
	font-weight: 700;
	text-decoration: none;
	order: 2;
	margin-left: auto;
}

/* Regra geral contra o "botão fantasma": qualquer botão do WooCommerce
   nas áreas de pedido/conta herda fundo dourado de um lado e cor de
   link dourada do outro — texto invisível (aconteceu no aviso de
   e-mail e de novo no "Pedir novamente"). Aqui a regra única. */
body.woocommerce-account .woocommerce a.button,
body.woocommerce-order-received .woocommerce a.button,
body.woocommerce-order-received a.button,
.woocommerce-order-details a.button,
.order-again a.button {
	background: var(--ast-dourado);
	color: var(--ast-tinta-escura) !important;
	border: 0;
	border-radius: var(--raio);
	padding: 0.7rem 1.4rem;
	font-weight: 700;
	text-decoration: none;
	display: inline-block;
}
body.woocommerce-account .woocommerce a.button:hover,
body.woocommerce-order-received a.button:hover {
	background: var(--ast-dourado-hover);
	color: var(--ast-tinta-escura) !important;
}

/* Botão "Enviar ingressos pelo WhatsApp" (seção 40) */
.ast-whats-envio {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex-wrap: wrap;
	margin: 0 0 1.5rem;
}
.ast-whats-botao {
	display: inline-block;
	background: #25d366; /* verde oficial do WhatsApp: reconhecimento imediato */
	color: #073b1a !important;
	font-weight: 700;
	padding: 0.75rem 1.4rem;
	border-radius: 999px;
	text-decoration: none;
}
.ast-whats-botao:hover {
	background: #1fbd5a;
}
.ast-whats-dica {
	font-size: 0.85rem;
	color: var(--ast-texto-suave-esc);
	max-width: 24rem;
}

/* Caixinha "criar conta" no checkout */
.ast-criar-conta {
	margin-top: 1.25rem;
	padding: 1rem 1.1rem;
	border: 1px dashed var(--ast-borda-ouro);
	border-radius: var(--raio);
}
.ast-criar-conta .create-account label.checkbox {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.95rem;
	color: var(--ast-texto-claro);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	cursor: pointer;
}
.ast-criar-conta input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--ast-dourado);
	flex-shrink: 0;
}
.ast-criar-conta div.create-account {
	margin-top: 0.9rem;
}

/*
 * RESPONSIVO DO CHECKOUT — fica no FIM do arquivo de propósito.
 * A regra desktop do grid (.woocommerce-checkout .ast-checkout-grid) tem a
 * mesma especificidade desta; se esta viesse antes, a desktop venceria e
 * o checkout ficaria em duas colunas espremidas no celular. Em CSS, com
 * especificidade igual, ganha quem aparece por último.
 */
@media (max-width: 860px) {
	.woocommerce-checkout .ast-checkout-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"dados"
			"resumo"
			"pagamento";
		gap: 1.25rem;
	}
	/* sticky numa coluna só atrapalharia a rolagem */
	.woocommerce-checkout .ast-checkout-review > #payment {
		position: static;
	}
	.ast-checkout-esquerda,
	.woocommerce-checkout .ast-checkout-review > .shop_table,
	.woocommerce-checkout .ast-checkout-review > #payment {
		padding: 1.25rem;
	}
	/* Nome e sobrenome lado a lado só no desktop */
	.woocommerce-billing-fields__field-wrapper {
		grid-template-columns: 1fr;
	}
	.woocommerce-billing-fields__field-wrapper .form-row-first,
	.woocommerce-billing-fields__field-wrapper .form-row-last {
		grid-column: 1 / -1;
	}
}

/* ============================================================
   14. CELULAR: CTA DO CABEÇALHO SEMPRE VISÍVEL (04/09/2026)
   ============================================================
   Sem menu em Aparência › Menus o hambúrguer não é impresso (header.php)
   e, com ele, sumia o único "Comprar Ingressos" do celular — que a regra
   de desktop escondia. Aqui o botão fica, curto: só "Ingressos".
   A classe de contexto (.site-header) bate a especificidade da regra
   que o escondia. */
@media (max-width: 768px) {
	.site-header .header-cta {
		display: inline-block;
		font-size: .75rem;
		letter-spacing: .03em;
		padding: 9px 12px;
		white-space: nowrap;
	}
	.site-header .header-cta .cta-longo { display: none; }
}

/* ============================================================
   15. DEGRADÊ AZUL → VERMELHO (a logo, em página)
   ============================================================
   O fundo da logo é azul-marinho no alto e vermelho em brasa no chão.
   O body repete isso: degradê FIXO (background-attachment) para a
   página inteira parecer um só palco, não faixas por seção. As seções
   escuras são translúcidas (--ast-fundo-secao) e os cards opacos, então
   o vermelho aparece por trás, no pé da página, como na logo.
   Holofotes vermelhos nas bordas do hero e do rodapé fecham a cena. */
body {
	background-color: var(--ast-degrade-topo);
	background-image:
		radial-gradient(ellipse 55% 40% at 50% 100%, rgba(215, 38, 61, 0.45), transparent 70%),
		linear-gradient(180deg, var(--ast-degrade-topo) 0%, var(--ast-degrade-meio) 45%, var(--ast-degrade-brasa) 82%, var(--ast-degrade-chao) 100%);
	background-attachment: fixed;
	background-size: cover;
}

/* Holofotes vermelhos laterais no hero, como os feixes da logo. */
.hero-estreia {
	background-image:
		radial-gradient(ellipse 45% 70% at 0% 40%, rgba(215, 38, 61, 0.22), transparent 60%),
		radial-gradient(ellipse 45% 70% at 100% 40%, rgba(215, 38, 61, 0.22), transparent 60%),
		radial-gradient(ellipse 60% 80% at 30% 0%, rgba(242, 180, 0, 0.16), transparent 60%),
		radial-gradient(ellipse 60% 80% at 70% 0%, rgba(242, 180, 0, 0.12), transparent 60%);
}

/* Rodapé: opaco por cima do vermelho, com a brasa vazando na borda de cima. */
.site-footer {
	background-color: var(--ast-footer-bg);
	background-image: linear-gradient(180deg, rgba(168, 20, 43, 0.35), transparent 30%);
	border-top: 1px solid var(--ast-borda-ouro-fraca);
}

/* Celular: degradê fixo dá tranco no iOS; volta ao rolável. */
@media (max-width: 768px) {
	body { background-attachment: scroll; }
}

/* ============================================================
   16. REDESIGN "BILHETE" — handoff 2a (05/09/2026)
   ============================================================
   Repaginação para o Astro parar de parecer o Circo de Roma. Paleta,
   fontes, estrutura e fluxo de compra ficam iguais; muda a LINGUAGEM
   VISUAL: saem holofotes (radial-gradients), fileira de lâmpadas,
   ornamentos ✦ e todo glow (box-shadow/text-shadow dourados); entram
   dois motivos tirados da logo — o BILHETE PICOTADO (linha de rasgo
   tracejada + furos semicirculares nas bordas) e as LISTRAS DA LONA
   (vermelho/creme), usadas com parcimônia: faixa sob o cabeçalho,
   canhoto da agenda, tira dos cards de setor e topo do bilhete da
   sessão. Em mais nenhum lugar.

   É uma camada de OVERRIDE sobre a seção 12, como a 15 é sobre a 12:
   mesma especificidade, declarada depois, vence. Onde a seção 12 usa
   um seletor mais específico (.setor-card--ouro, body.woocommerce
   button…), repetimos o seletor aqui.

   Os FUROS são feitos com mask-image: dois radial-gradients que
   "comem" um semicírculo em cada borda, na altura da linha de rasgo.
   Posição em px/calc, não em %, para não descolar do rasgo quando o
   conteúdo do card muda de altura (o handoff dizia 68%; com lotação e
   descrição opcionais, o rasgo não fica sempre em 68%).
   ============================================================ */

/* ---------- 16.1 Motivos ---------- */

.ast-listras {
	height: 10px;
	background: repeating-linear-gradient(90deg, var(--ast-roxo) 0 22px, var(--ast-texto-claro) 22px 44px);
}

/* ---------- 16.2 Sem glow, sem ornamento ---------- */

.hero-titulo,
.secao-titulo,
.sessao-info-hora,
.sessao-banner-titulo,
.ast-agenda-numero,
.chip-hora-valor {
	text-shadow: none;
}

.btn-estreia,
.btn-estreia:hover,
.header-cta,
.header-cta:hover,
.ast-chip-horario,
.ast-chip-horario:hover,
.ast-agenda-dia,
.ast-agenda-dia:hover,
.setor-card,
.setor-card:hover,
.setor-card--ouro,
.setor-card--ouro:hover,
.sessao-banner-chip--hora,
.ast-var-btn,
.ast-var-btn.is-ativo,
.ast-var-btn--ouro,
.ast-var-btn--ouro.is-ativo,
.local-mapa,
.hero-moldura {
	box-shadow: none;
}

/* ---------- 16.3 Cabeçalho ---------- */

.site-header {
	background: var(--ast-roxo-escuro);
	border-bottom: 0;
	box-shadow: none;
}

.site-header .container {
	padding: 10px 24px 10px 0;
	justify-content: space-between;
}

.site-header .logo-img {
	height: 72px;
	width: auto;
}

.site-menu .current-menu-item > a {
	color: var(--ast-dourado-hover);
	font-weight: 700;
	background: transparent;
}

/* Botões dourados: pílula, sem degradê, sem brilho, sem transform. */
.btn-estreia,
.header-cta,
.btn.btn-primario {
	background: var(--ast-dourado);
	background-image: none;
	color: var(--ast-tinta-escura);
	border: 0;
	border-radius: 999px;
	font-family: var(--fonte-corpo);
	font-weight: 900;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 11px 22px;
	transition: background-color var(--trans), color var(--trans);
	transform: none;
}
.btn-estreia:hover,
.header-cta:hover,
.btn.btn-primario:hover {
	background: var(--ast-dourado-hover);
	background-image: none;
	color: var(--ast-tinta-escura);
	transform: none;
}

.btn-estreia--grande {
	padding: 18px 40px 17px;
	font-size: 1.0625rem;
}

/* ---------- 16.4 Home — hero ---------- */

.hero-estreia {
	position: relative;
	height: 560px;
	padding: 0;
	overflow: hidden;
	background: var(--ast-roxo-escuro); /* apaga os holofotes das seções 12 e 15 */
}

.hero-arte {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	display: block;
}

.hero-veu {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(10, 18, 56, 0.96) 0%, rgba(10, 18, 56, 0.85) 45%, rgba(10, 18, 56, 0.15) 100%),
		linear-gradient(0deg, rgba(10, 18, 56, 0.9) 0%, transparent 40%);
}
.hero-estreia--sem-arte .hero-veu {
	display: none;
}

.hero-conteudo {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 18px;
	padding-bottom: 56px;
}

/* Supra com traço tracejado de 40px antes do texto. */
.hero-supra,
.sessao-banner-supra,
.ast-agenda-supra {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--ast-dourado-hover);
	font-family: var(--fonte-corpo);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.35em;
	text-transform: uppercase;
}
.hero-supra::before,
.sessao-banner-supra::before,
.ast-agenda-supra::before {
	content: '';
	width: 40px;
	border-top: 2px dashed var(--ast-dourado-hover);
	flex: 0 0 auto;
}
.hero-supra::after {
	content: none;
}

.hero-titulo {
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 1.02;
	max-width: 14ch;
	margin: 0;
	text-wrap: pretty;
}

.hero-descricao {
	font-size: 1.125rem;
	line-height: 1.6;
	color: rgba(255, 246, 232, 0.75);
	max-width: 44ch;
	margin: 0;
}

.hero-acao {
	gap: 20px;
}

.hero-nota-pagamento {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.875rem;
}

@media (max-width: 768px) {
	.hero-estreia {
		height: auto;
		min-height: 520px;
	}
	.hero-conteudo {
		min-height: 520px;
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.hero-titulo {
		font-size: clamp(2.25rem, 9vw, 3.5rem);
	}
	.hero-veu {
		background:
			linear-gradient(90deg, rgba(10, 18, 56, 0.9) 0%, rgba(10, 18, 56, 0.6) 100%),
			linear-gradient(0deg, rgba(10, 18, 56, 0.97) 0%, rgba(10, 18, 56, 0.5) 55%, transparent 100%);
	}
	.hero-acao .btn-estreia--grande {
		width: 100%;
		text-align: center;
	}
}

/* ---------- 16.5 Seções e títulos ---------- */

.secao-sessoes,
.secao-local {
	background: var(--ast-fundo-secao);
	border-top: 2px dashed rgba(242, 180, 0, 0.5);
	padding: 56px 24px 64px;
}
.secao-setores {
	background: transparent;
	border-top: 2px dashed rgba(242, 180, 0, 0.5);
	padding: 56px 24px 64px;
}

.secao-supra {
	color: var(--ast-dourado-hover);
	font-family: var(--fonte-corpo);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 8px;
}

.secao-titulo {
	font-size: clamp(1.9rem, 3.2vw, 2.375rem);
}

/* ---------- 16.6 Agenda (home e /loja) ---------- */

.secao-sessoes .container,
.ast-agenda,
.ast-agenda-titulo,
.ast-agenda-sub,
.ast-agenda-supra,
.secao-sessoes .ast-aviso-panfleto,
.wc-pagina .ast-aviso-panfleto {
	max-width: 50rem; /* 800px */
	margin-inline: auto;
}

/* SO na agenda (/loja): .wc-pagina embrulha todas as paginas do
   WooCommerce, e a pagina da sessao precisa dos 1140px do bilhete. */
body.woocommerce-shop .wc-pagina .container,
body.post-type-archive-product .wc-pagina .container {
	max-width: 50rem;
	padding: 44px 24px 64px;
}
.ast-agenda-supra {
	margin-bottom: 10px;
}
.ast-agenda-titulo {
	font-family: var(--fonte-titulo);
	font-size: 2.375rem;
	font-weight: 900;
	color: var(--ast-texto-claro);
	text-align: left;
	margin: 0 0 8px;
}
.ast-agenda-sub {
	font-size: 0.9375rem;
	color: var(--ast-texto-suave-esc);
	text-align: left;
	margin: 0 0 24px;
}

/* Aviso do panfleto: caixa tracejada, sem a barra grossa à esquerda. */
.ast-aviso-panfleto,
form.cart .ast-aviso-panfleto,
form.variations_form .ast-aviso-panfleto {
	border: 2px dashed rgba(242, 180, 0, 0.6);
	border-radius: 8px;
	background-color: rgba(242, 180, 0, 0.08);
	box-shadow: none;
}

.ast-agenda-mes {
	border-bottom: 0;
	padding-bottom: 0;
	margin: 28px 0 10px;
}

/* Linha do dia = um bilhete: canhoto da data à esquerda, rasgo
   tracejado vertical em x=120px e furos nas bordas de cima e de baixo
   nessa mesma linha. */
.ast-agenda-dia {
	grid-template-columns: 120px 1fr auto;
	align-items: stretch;
	gap: 0;
	padding: 0;
	background: var(--ast-roxo-escuro);
	border: 1px solid var(--ast-borda-ouro);
	border-left-width: 1px;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 10px;
	transition: border-color var(--trans);
	-webkit-mask:
		radial-gradient(circle 9px at 120px 0, transparent 98%, #000) top / 100% 51% no-repeat,
		radial-gradient(circle 9px at 120px 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
	mask:
		radial-gradient(circle 9px at 120px 0, transparent 98%, #000) top / 100% 51% no-repeat,
		radial-gradient(circle 9px at 120px 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
.ast-agenda-dia:hover {
	border-color: var(--ast-dourado-hover);
	background: var(--ast-roxo-escuro);
}

/* Canhoto: listras finas de 6px no topo (background-origin: border-box
   para a imagem cobrir a borda transparente), fundo dourado tênue e o
   rasgo tracejado à direita. */
.ast-agenda-data {
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 12px 8px;
	border-top: 6px solid transparent;
	border-right: 2px dashed rgba(242, 180, 0, 0.6);
	background-color: rgba(242, 180, 0, 0.1);
	background-image: repeating-linear-gradient(90deg, var(--ast-roxo) 0 12px, var(--ast-texto-claro) 12px 24px);
	background-size: 100% 6px;
	background-repeat: no-repeat;
	background-origin: border-box;
	background-clip: border-box;
	line-height: 1.05;
}
.ast-agenda-semana {
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	color: var(--ast-dourado-hover);
}
.ast-agenda-numero {
	font-size: 1.875rem;
	line-height: 1.05;
}
.ast-agenda-mes-curto {
	font-size: 0.625rem;
	color: rgba(255, 255, 255, 0.45);
}

.ast-agenda-chips {
	align-items: center;
	align-content: center;
	gap: 8px;
	padding: 12px 20px;
}

/* Horário: pílula PREENCHIDA — continua o elemento dominante. */
.ast-chip-horario {
	min-width: 84px;
	padding: 8px 18px;
	font-size: 1.25rem;
	color: var(--ast-tinta-escura);
	background: var(--ast-dourado);
	border: 0;
	border-radius: 999px;
	transition: background-color var(--trans);
}
.ast-chip-horario:hover {
	background: var(--ast-dourado-hover);
	color: var(--ast-tinta-escura);
	border: 0;
}

.ast-agenda-preco {
	align-self: center;
	padding: 12px 20px;
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.6875rem;
}
.ast-agenda-preco strong,
.ast-agenda-preco .woocommerce-Price-amount {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.875rem;
}

/* Celular: o canhoto vira faixa horizontal no topo (rasgo embaixo dele),
   furos nas bordas esquerda/direita na altura do rasgo. */
@media (max-width: 560px) {
	.ast-agenda-dia {
		grid-template-columns: 1fr auto;
		gap: 0;
		padding: 0;
		-webkit-mask:
			radial-gradient(circle 9px at 0 62px, transparent 98%, #000) left / 51% 100% no-repeat,
			radial-gradient(circle 9px at 100% 62px, transparent 98%, #000) right / 51% 100% no-repeat;
		mask:
			radial-gradient(circle 9px at 0 62px, transparent 98%, #000) left / 51% 100% no-repeat,
			radial-gradient(circle 9px at 100% 62px, transparent 98%, #000) right / 51% 100% no-repeat;
	}
	.ast-agenda-data {
		grid-column: 1 / -1;
		grid-row: 1;
		flex-direction: row;
		align-items: baseline;
		justify-content: center;
		gap: 8px;
		height: 62px;
		padding: 10px 12px;
		border-right: 0;
		border-bottom: 2px dashed rgba(242, 180, 0, 0.6);
	}
	.ast-agenda-numero {
		font-size: 1.375rem;
	}
	.ast-agenda-chips {
		grid-column: 1;
		grid-row: 2;
		padding: 12px 14px;
	}
	.ast-agenda-preco {
		grid-column: 2;
		grid-row: 2;
		padding: 12px 14px;
	}
}

/* ---------- 16.7 Setores — bilhete em pé ---------- */

.setores-grid {
	gap: 24px;
	max-width: 1000px;
}

.setor-card,
.setor-card--ouro,
.setor-card--prata {
	display: flex;
	flex-direction: column;
	padding: 0;
	gap: 0;
	background: var(--ast-roxo-escuro);
	border: 1px solid var(--ast-borda-ouro);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color var(--trans);
	/* Furos na altura da tira de rasgo: o rodapé tem altura fixa
	   (18 + 44 + 24 = 86px) e a tira tem 8px logo acima dele. */
	-webkit-mask:
		radial-gradient(circle 10px at 0 calc(100% - 90px), transparent 98%, #000) left / 51% 100% no-repeat,
		radial-gradient(circle 10px at 100% calc(100% - 90px), transparent 98%, #000) right / 51% 100% no-repeat;
	mask:
		radial-gradient(circle 10px at 0 calc(100% - 90px), transparent 98%, #000) left / 51% 100% no-repeat,
		radial-gradient(circle 10px at 100% calc(100% - 90px), transparent 98%, #000) right / 51% 100% no-repeat;
}
.setor-card:hover,
.setor-card--ouro:hover,
.setor-card--prata:hover {
	transform: none;
	background: var(--ast-roxo-escuro);
	border-color: var(--ast-dourado-hover);
}

.setor-corpo {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	padding: 32px 24px 28px;
}

.setor-badge {
	position: static;
	transform: none;
	border-radius: 999px;
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	padding: 5px 14px;
	margin: 0 0 4px;
}

.setor-nome,
.setor-nome--ouro {
	font-size: 1.75rem;
	color: var(--ast-texto-claro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.setor-lotacao {
	margin: 0;
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ast-texto-suave-esc);
}

.setor-preco,
.setor-preco--ouro {
	color: var(--ast-texto-claro);
	font-size: 1.375rem;
	font-weight: 900;
}

/* Tira de rasgo listrada (8px), de borda a borda. */
.setor-rasgo {
	height: 8px;
	background: repeating-linear-gradient(90deg, var(--ast-roxo) 0 16px, var(--ast-texto-claro) 16px 32px);
}

.setor-rodape {
	height: 86px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 24px 24px;
	box-sizing: border-box;
}
.setor-rodape .btn-estreia {
	height: 44px;
	display: inline-flex;
	align-items: center;
}

/* ---------- 16.8 Onde estamos ---------- */

.local-grid {
	gap: 48px;
}
.local-cidade {
	font-family: var(--fonte-titulo);
	font-size: 1.5rem;
	font-weight: 700;
}
.local-mapa {
	padding: 8px;
	background: none;
	border: 2px dashed rgba(242, 180, 0, 0.6);
	border-radius: 12px;
	box-shadow: none;
}
.local-mapa iframe {
	border-radius: 6px;
}

/* ---------- 16.9 Rodapé ---------- */

.site-footer {
	background-color: var(--ast-footer-bg);
	background-image: none;
	border-top: 2px dashed rgba(242, 180, 0, 0.4);
}

/* ---------- 16.10 Página da sessão — banner = bilhete ---------- */

.sessao-banner {
	background: none;
	border-bottom: 0;
	padding: 24px 0 0;
}

.sessao-bilhete {
	display: grid;
	grid-template-columns: 1fr 260px;
	background: var(--ast-roxo-escuro);
	border: 1px solid var(--ast-borda-ouro);
	border-radius: 14px;
	overflow: hidden;
	-webkit-mask:
		radial-gradient(circle 10px at calc(100% - 260px) 0, transparent 98%, #000) top / 100% 51% no-repeat,
		radial-gradient(circle 10px at calc(100% - 260px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
	mask:
		radial-gradient(circle 10px at calc(100% - 260px) 0, transparent 98%, #000) top / 100% 51% no-repeat,
		radial-gradient(circle 10px at calc(100% - 260px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
.sessao-bilhete--sem-canhoto {
	grid-template-columns: 1fr;
	-webkit-mask: none;
	mask: none;
}

.sessao-bilhete-listras {
	grid-column: 1 / -1;
	height: 10px;
	background: repeating-linear-gradient(90deg, var(--ast-roxo) 0 22px, var(--ast-texto-claro) 22px 44px);
}

.sessao-bilhete-texto {
	padding: 36px 40px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sessao-banner-supra {
	margin: 0;
}

.sessao-banner-titulo {
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.08;
	margin: 0;
}

.sessao-bilhete-linha {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--ast-texto-suave-esc);
}

/* Canhoto: dourado, rasgo tracejado à esquerda, o horário gigante. */
.sessao-canhoto {
	background: var(--ast-dourado);
	color: var(--ast-tinta-escura);
	border-left: 2px dashed var(--ast-roxo-escuro);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 24px;
}
.sessao-canhoto-label {
	font-family: var(--fonte-corpo);
	font-size: 0.75rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.sessao-canhoto-hora {
	font-family: var(--fonte-titulo);
	font-size: 4rem;
	font-weight: 900;
	line-height: 1;
}

@media (max-width: 768px) {
	.sessao-bilhete {
		grid-template-columns: 1fr;
		-webkit-mask:
			radial-gradient(circle 10px at 0 calc(100% - 66px), transparent 98%, #000) left / 51% 100% no-repeat,
			radial-gradient(circle 10px at 100% calc(100% - 66px), transparent 98%, #000) right / 51% 100% no-repeat;
		mask:
			radial-gradient(circle 10px at 0 calc(100% - 66px), transparent 98%, #000) left / 51% 100% no-repeat,
			radial-gradient(circle 10px at 100% calc(100% - 66px), transparent 98%, #000) right / 51% 100% no-repeat;
	}
	.sessao-bilhete-texto {
		padding: 24px 22px;
	}
	.sessao-canhoto {
		height: 132px;
		border-left: 0;
		border-top: 2px dashed var(--ast-roxo-escuro);
		flex-direction: row;
		gap: 16px;
	}
	.sessao-canhoto-hora {
		font-size: 3rem;
	}
}

/* ---------- 16.11 Página da sessão — corpo ---------- */

.sessao-corpo {
	grid-template-columns: 1fr 1.6fr;
	gap: 40px;
	padding-top: 40px;
}
@media (max-width: 900px) {
	.sessao-corpo {
		grid-template-columns: 1fr;
	}
}

.sessao-info-card,
.sessao-form-compra {
	background: var(--ast-roxo-escuro);
	border: 1px solid var(--ast-borda-ouro);
	border-radius: 12px;
	box-shadow: none;
}
.sessao-info-card {
	padding: 28px;
}
.sessao-form-compra {
	padding: 36px;
}

.sessao-info-titulo {
	font-size: 0.9375rem;
	border-bottom: 2px dashed rgba(242, 180, 0, 0.5);
}
.sessao-info-valor {
	font-size: 1.0625rem;
}
.sessao-info-item--local {
	border-top: 2px dashed rgba(242, 180, 0, 0.5);
}

/* Botões de variação: contorno neutro; o ATIVO ganha borda tracejada
   dourada por outline (mesma caixa, nada pula). */
.ast-var-btn,
.ast-var-btn--ouro {
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(0, 0, 0, 0.25);
	box-shadow: none;
}
.ast-var-btn:hover,
.ast-var-btn--ouro:hover {
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(0, 0, 0, 0.3);
	box-shadow: none;
}
.ast-var-btn.is-ativo,
.ast-var-btn--ouro.is-ativo {
	border-color: transparent;
	background: rgba(242, 180, 0, 0.12);
	outline: 2px dashed var(--ast-dourado);
	outline-offset: -2px;
	box-shadow: none;
}

/* Caixa de preço: sem fundo, entre duas linhas tracejadas. */
.single_variation_wrap .woocommerce-variation-price {
	background: none;
	border: 0;
	border-top: 2px dashed rgba(242, 180, 0, 0.6);
	border-bottom: 2px dashed rgba(242, 180, 0, 0.6);
	border-radius: 0;
	padding: 16px 24px;
	box-shadow: none;
}
.single_variation_wrap .woocommerce-variation-price .price {
	font-size: 1.875rem;
	font-weight: 900;
	color: var(--ast-dourado-hover);
}

/* Stepper em pílula. */
.ast-qty {
	border: 1px solid rgba(242, 180, 0, 0.6);
	border-radius: 999px;
}

/* Botão Comprar: pílula dourada chapada. */
body.woocommerce button.single_add_to_cart_button.button,
body.woocommerce-page button.single_add_to_cart_button.button {
	background: var(--ast-dourado);
	background-image: none;
	color: var(--ast-tinta-escura);
	border: 0;
	border-radius: 999px;
	font-weight: 900;
	font-size: 1.0625rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: none;
	transform: none;
}
body.woocommerce button.single_add_to_cart_button.button:hover,
body.woocommerce-page button.single_add_to_cart_button.button:hover {
	background: var(--ast-dourado-hover);
	background-image: none;
	color: var(--ast-tinta-escura);
	box-shadow: none;
	transform: none;
}

/* "Em breve": supra com o mesmo traço tracejado, centralizada. */
.ast-embreve-supra {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 12px;
	color: var(--ast-dourado-hover);
	font-family: var(--fonte-corpo);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.35em;
	text-transform: uppercase;
}
.ast-embreve-supra::before,
.ast-embreve-supra::after {
	content: '';
	width: 40px;
	border-top: 2px dashed var(--ast-dourado-hover);
}

/* O canvas abaixo de uma pagina curta (ou o overscroll) mostrava o fim
   vermelho do degrade fixo como faixa chapada; o html fica no azul de cima. */
html { background-color: var(--ast-degrade-topo); }

/* ---------- 16.12 Ajustes do celular (prints de 05/09) ---------- */

@media (max-width: 768px) {
	/* A regra de 72px da 16.3 vencia a de 44px do celular. */
	.site-header .logo-img {
		height: 44px;
	}
}

@media (max-width: 480px) {
	/* "TEMPORADA 2026 · MARABÁ – PA" quebrava em duas linhas com o
	   traço; menos tracking e o texto pode quebrar sozinho, sem o traço
	   ir para a linha de baixo. */
	.hero-supra,
	.sessao-banner-supra,
	.ast-agenda-supra {
		letter-spacing: 0.2em;
		font-size: 0.6875rem;
	}
	.hero-supra::before,
	.sessao-banner-supra::before,
	.ast-agenda-supra::before {
		width: 24px;
	}
}

@media (max-width: 560px) {
	/* Dois horários (18h e 20h) empilhavam: a coluna do preço tomava
	   ~110px e sobrava ~190px para os chips de 120px. Chips mais
	   enxutos — dois cabem lado a lado (a grade do Astro tem no máximo
	   dois por dia). */
	.ast-chip-horario {
		min-width: 0;
		padding: 8px 16px;
		font-size: 1.125rem;
	}
	.ast-agenda-chips {
		gap: 6px;
	}
}

/* ---------- 16.13 CONTRASTE DAS SUPERFÍCIES (pedido do Enzo, 07/09) ----------
   O handoff pedia card sólido #0F1B4D — no mock funcionava porque o fundo da
   seção era outro tom. No site real o degradê do body passa por esse mesmo
   azul na altura dos setores e o card sumia no fundo. Um degrau mais claro
   para TODA superfície de bilhete (card de setor, linha da agenda, banner e
   cards da sessão, caixa vazia), borda dourada um pouco mais firme e uma
   sombra curta e escura (sombra não é glow: não brilha, só descola do fundo). */
:root {
	--ast-superficie: #1A2C6B;
	--ast-superficie-borda: rgba(242, 180, 0, 0.6);
}

.setor-card,
.setor-card--ouro,
.setor-card--prata,
.setor-card:hover,
.setor-card--ouro:hover,
.setor-card--prata:hover,
.ast-agenda-dia,
.ast-agenda-dia:hover,
.sessao-bilhete,
.sessao-info-card,
.sessao-form-compra,
.sessoes-vazio {
	background: var(--ast-superficie);
	border-color: var(--ast-superficie-borda);
	box-shadow: 0 10px 28px rgba(3, 6, 24, 0.45);
}
.setor-card:hover,
.setor-card--ouro:hover,
.setor-card--prata:hover,
.ast-agenda-dia:hover {
	border-color: var(--ast-dourado-hover);
}

/* O canhoto da agenda e a faixa do formulário acompanham a superfície nova. */
.ast-agenda-data {
	background-color: rgba(242, 180, 0, 0.12);
}
.ast-var-btn,
.ast-var-btn--ouro {
	background: rgba(0, 0, 0, 0.28);
}

/* ---------- 16.14 CARD DE SETOR: RASGO TRACEJADO COMO NA AGENDA (07/09) ----------
   Pedido do Enzo: no card de setor ele NAO quer as listras vermelho/creme —
   quer o rasgo como a linha tracejada dourada da agenda, na altura das
   meias-luas. As listras ficam so no cabecalho, no canhoto da agenda e no
   banner da sessao. */
.setor-card,
.setor-card--ouro,
.setor-card--prata {
	/* SEM listras no card de setor (Enzo, 07/09): so o rasgo tracejado
	   dourado, na altura dos furos. Listras ficam na agenda e na sessao. */
	background-image: none;
	/* Rasgo de 2px logo acima do rodape de 86px: centro em 100% - 87px. */
	-webkit-mask:
		radial-gradient(circle 10px at 0 calc(100% - 87px), transparent 98%, #000) left / 51% 100% no-repeat,
		radial-gradient(circle 10px at 100% calc(100% - 87px), transparent 98%, #000) right / 51% 100% no-repeat;
	mask:
		radial-gradient(circle 10px at 0 calc(100% - 87px), transparent 98%, #000) left / 51% 100% no-repeat,
		radial-gradient(circle 10px at 100% calc(100% - 87px), transparent 98%, #000) right / 51% 100% no-repeat;
}

.setor-rasgo {
	/* align-self: stretch e obrigatorio — o card centraliza os filhos
	   (align-items: center) e um div vazio de altura 0 encolhia para
	   LARGURA ZERO: a linha existia no CSS e nao aparecia em lugar nenhum. */
	align-self: stretch;
	width: auto;
	height: 0;
	background: none;
	border-top: 2px dashed rgba(242, 180, 0, 0.8);
	margin: 0 18px; /* nao encosta nos furos */
}

/* ============================================================
   17. PAGBANK — TELA "PAGUE COM PIX" E FORMULÁRIO DE CARTÃO
   ============================================================
   O Astro usa o PagBank Connect (07/09/2026), não o Mercado Pago.
   A seção 12.22 pintou o painel do Pix do MP (.mp-*); esta faz o
   mesmo para o markup do PagBank (.pix-payment, .pix-qr, .pix-code,
   .copy-btn — template pix-instructions.php do plugin). Mesmas duas
   ilhas brancas de propósito: o QR (o app do banco precisa de módulos
   escuros sobre fundo claro) e nada mais.
   ============================================================ */

/* O tema já põe o título "Pague com Pix"; o do plugin sairia em dobro. */
.ast-thankyou-pix .pix-payment > h2 {
	display: none;
}

.pix-payment {
	color: var(--ast-texto-claro);
	text-align: center;
}
.pix-payment p {
	color: var(--ast-texto-suave-esc);
	margin: 0 0 12px;
}

.pix-qr-container {
	margin: 0 auto 18px;
	line-height: 0;
}
.pix-qr {
	display: inline-block;
	width: 220px;
	height: auto;
	background: #fff;
	padding: 12px;
	border-radius: var(--raio);
	box-sizing: content-box;
}

/* Copia-e-cola: campo do tema + botão dourado, lado a lado. */
.code-container {
	display: flex;
	gap: 8px;
	align-items: stretch;
	justify-content: center;
	max-width: 560px;
	margin: 0 auto 12px;
}
.code-container label {
	flex: 1;
	margin: 0;
	text-align: left;
}
.pix-code-label {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ast-dourado-hover);
	margin: 0 0 4px;
}
.pix-payment input.pix-code {
	width: 100%;
	background-color: rgba(0, 0, 0, 0.35) !important;
	border: 1px solid var(--ast-borda-ouro) !important;
	border-radius: var(--raio) !important;
	color: var(--ast-texto-claro) !important;
	font-family: 'Courier New', monospace;
	font-size: 0.8rem;
}
.pix-payment .copy-btn.button {
	align-self: flex-end;
	background: var(--ast-dourado) !important;
	color: var(--ast-tinta-escura) !important;
	border: 0;
	border-radius: 999px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 12px 20px;
	box-shadow: none;
}
.pix-payment .copy-btn.button:hover {
	background: var(--ast-dourado-hover) !important;
}

.pix-exiration-container p {
	color: var(--ast-dourado-hover);
	font-size: 0.9rem;
}

/* Quando o polling do plugin confirma o pagamento. */
.pix-payment-confirmed {
	text-align: center;
	padding: 20px;
	border: 2px dashed rgba(242, 180, 0, 0.6);
	border-radius: 8px;
	color: var(--ast-texto-claro);
}
.pix-payment-confirmed h2 {
	font-family: var(--fonte-titulo);
	color: var(--ast-dourado-hover);
	margin: 0 0 6px;
}

/* Formulário de cartão do PagBank dentro do card do checkout: os campos
   já herdam o estilo dos inputs do tema; só o parcelamento e a bandeira
   precisavam de contraste. */
#payment .payment_box .wc-credit-card-form-card-installments {
	background-color: rgba(0, 0, 0, 0.35);
	color: var(--ast-texto-claro);
}
#payment .payment_box .card-number-input .card-brand-icon {
	filter: drop-shadow(0 0 2px #fff);
}