/**
 * ElementorPlus — Product Page (Página de Produto — Filme): estilos.
 * (Estrutura base — o estilo completo é definido na Parte 7.)
 */

.eppp-wrapper {
	--eppp-accent: #2563eb;
	--eppp-accent-hover: #1d4ed8;
	--eppp-surface: #0e131c;
	--eppp-surface-2: #161c27;
	--eppp-border: #232b39;
	--eppp-text: #ffffff;
	--eppp-muted: #9aa4b2;

	color: var(--eppp-text);
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	font-family: inherit;
	/* Respiro lateral FLUIDO: generoso em telas largas, mas encolhe sozinho em
	   notebooks para não espremer o conteúdo. Antes eram 200px fixos, que em
	   telas ~1366px deixavam a coluna central estreita demais (o texto e a
	   linha de "Compartilhar" quebravam). */
	padding-left: clamp(16px, 8vw, 200px);
	padding-right: clamp(16px, 8vw, 200px);
}

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

.eppp-notice {
	padding: 16px 18px;
	border: 1px dashed var(--eppp-border, #232b39);
	border-radius: 10px;
	color: #9aa4b2;
	background: rgba(255, 255, 255, .02);
	font-size: 14px;
}

/* =========================================================================
 * HERO (Parte 3)
 * ========================================================================= */
.eppp-hero {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr) 380px;
	gap: 32px;
	align-items: start;
	padding: 28px;
	background: var(--eppp-surface);
	border: 1px solid var(--eppp-border);
	border-radius: 16px;
}

/* --- Pôster --- */
.eppp-poster {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: var(--eppp-surface-2);
	aspect-ratio: 2 / 3;
}

.eppp-poster-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.eppp-poster-img--ph {
	display: block;
	width: 100%;
	height: 100%;
}

/* Selo do pôster (4K ULTRA HD) removido do layout por padrão. */
.eppp-poster-badge {
	display: none;
}

/* --- Miolo --- */
.eppp-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.eppp-tag {
	align-self: flex-start;
	padding: 5px 10px;
	border-radius: 6px;
	background: #e11d48;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1;
}

/* Linha de selos acima do título (tipo de mídia + tag de destaque). */
.eppp-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* Selo do tipo de mídia (Filme, Série, Anime...) — destaque em azul. */
.eppp-type {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(37, 99, 235, .16);
	border: 1px solid rgba(37, 99, 235, .4);
	color: var(--eppp-accent);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1;
}

.eppp-title {
	margin: 0;
	font-size: 24px;
	line-height: 1.15;
	font-weight: 800;
	color: var(--eppp-text);
}

.eppp-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--eppp-muted);
}

.eppp-meta-sep {
	opacity: .5;
}

.eppp-imdb {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--eppp-text);
	font-weight: 600;
}

.eppp-imdb-badge {
	background: #f5c518;
	color: #000;
	font-size: 11px;
	font-weight: 800;
	padding: 2px 5px;
	border-radius: 4px;
	letter-spacing: .02em;
}

.eppp-rating {
	display: flex;
	align-items: center;
	gap: 8px;
}

.eppp-stars {
	display: inline-flex;
	color: #f5c518;
}

.eppp-star {
	width: 18px;
	height: 18px;
}

.eppp-rating-count {
	font-size: 13px;
	color: var(--eppp-muted);
}

.eppp-desc {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: #c7cdd6;
	max-width: 62ch;
}

.eppp-trailer-btn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
	padding: 10px 18px;
	border: 1px solid var(--eppp-border);
	border-radius: 999px;
	background: transparent;
	color: var(--eppp-text);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

/* Botão de trailer no HERO (não o item da galeria): sem fundo rosa do tema. */
.eppp-info .eppp-trailer-btn,
.eppp-info .eppp-trailer-btn:focus {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--eppp-text) !important;
	box-shadow: none !important;
}

.eppp-info .eppp-trailer-btn:hover {
	border-color: var(--eppp-accent) !important;
	background: rgba(37, 99, 235, .12) !important;
	background-color: rgba(37, 99, 235, .12) !important;
	color: #fff !important;
}

.eppp-trailer-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--eppp-accent);
	color: #fff;
}

.eppp-trailer-icon svg {
	width: 14px;
	height: 14px;
	margin-left: 1px;
}

/* --- Palavras-chave (tags) — etiquetas informativas (não clicáveis) --- */
.eppp-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
}

.eppp-tags-label {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--eppp-muted);
	margin-right: 2px;
}

.eppp-tag-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--eppp-surface-2);
	border: 1px solid var(--eppp-border);
	color: #c7cdd6;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	cursor: default;
}

.eppp-tag-hash {
	color: var(--eppp-accent);
	margin-right: 2px;
	font-weight: 800;
}

/* --- Compartilhar --- */
.eppp-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
}

.eppp-share-label {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--eppp-muted);
	margin-right: 2px;
}

.eppp-share-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	background: var(--eppp-surface-2);
	border: 1px solid var(--eppp-border);
	color: #c7cdd6;
	cursor: pointer;
	text-decoration: none;
	transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.eppp-share-btn svg {
	width: 19px;
	height: 19px;
	display: block;
}

.eppp-share-btn:hover {
	transform: translateY(-2px);
	color: #fff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}

.eppp-share-wa:hover {
	background: #25d366;
	border-color: #25d366;
}

.eppp-share-mail:hover {
	background: var(--eppp-accent);
	border-color: var(--eppp-accent);
}

.eppp-share-x:hover {
	background: #000;
	border-color: #000;
}

.eppp-share-copy:hover {
	background: var(--eppp-surface);
	border-color: var(--eppp-accent);
}

/* Estado "copiado": troca o ícone e mostra o balãozinho. */
.eppp-share-copy-done {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 19px;
	height: 19px;
	color: #25d366;
	opacity: 0;
	transform: scale(.4);
	transition: opacity .18s ease, transform .18s ease;
}

.eppp-share-copy.is-copied .eppp-share-copy-icon {
	opacity: 0;
}

.eppp-share-copy.is-copied .eppp-share-copy-done {
	opacity: 1;
	transform: scale(1);
}

.eppp-share-copy.is-copied {
	border-color: #25d366;
}

.eppp-share-copy-tip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	padding: 4px 9px;
	border-radius: 6px;
	background: #111418;
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}

.eppp-share-copy-tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #111418;
}

.eppp-share-copy.is-copied .eppp-share-copy-tip {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* --- Caixa de compra --- */
.eppp-buy {
	background: var(--eppp-surface-2);
	border: 1px solid var(--eppp-border);
	border-radius: 14px;
	padding: 20px;
}

.eppp-price-row {
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--eppp-border);
}

/* Bloco de preço — destaque grande, com preço antigo e selo de desconto
   alinhados de forma equilibrada. */
.eppp-price {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 10px;
	line-height: 1;
	font-weight: 800;
	color: var(--eppp-accent);
}

/* "De R$..." ocupa a linha inteira, ficando acima do "Por apenas R$...". */
.eppp-price del {
	flex-basis: 100%;
	align-items: center;
}

.eppp-price .woocommerce-Price-amount,
.eppp-price bdi {
	color: inherit;
}

/* Preço antigo (del) — vem ANTES, no formato "De R$ ... riscado".
   Com um pouco mais de tamanho e destaque (cor clara + riscado avermelhado). */
.eppp-price del {
	order: 1;
	flex-basis: 100%;
	margin-bottom: 2px;
	font-size: 18px;
	font-weight: 700;
	color: #c7cdd6;
	text-decoration: line-through;
	text-decoration-color: #ff6b6b;
	text-decoration-thickness: 2px;
}

.eppp-price del::before {
	content: "De ";
	margin-right: 4px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--eppp-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Preço atual (ins) — destaque, na linha de baixo com "Por apenas" + selo. */
.eppp-price ins {
	order: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	font-size: 28px;
	font-weight: 800;
	color: var(--eppp-accent);
	letter-spacing: -0.01em;
	line-height: 1;
}

/* "Por apenas" antes do preço, só quando há promoção. */
.eppp-price:has( del ) ins::before {
	content: "Por apenas";
	font-size: 13px;
	font-weight: 600;
	color: var(--eppp-muted);
	letter-spacing: normal;
	white-space: nowrap;
}

/* Sem promoção: o valor vem direto (sem <ins>/<del>). */
.eppp-price > .woocommerce-Price-amount {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* Selo de desconto (-XX%) — verde, destacado. */
.eppp-discount-badge {
	order: 3;
	align-self: center;
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	background: #22c55e;
	color: #06210f;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1;
	box-shadow: 0 2px 10px rgba(34, 197, 94, .35);
}

/* Rótulo "por apenas" acima do preço (adicionado no render). */
.eppp-price-label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--eppp-muted);
}

/* Cor forçada (!important) porque o tema/Elementor pinta botões de rosa,
   principalmente no hover/focus. */
.eppp-wrapper .eppp-buy-btn,
.eppp-wrapper .eppp-buy-btn:hover,
.eppp-wrapper .eppp-buy-btn:focus,
.eppp-wrapper .eppp-buy-btn:active {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 18px;
	border: 0 !important;
	border-radius: 10px;
	background: var(--eppp-accent) !important;
	background-color: var(--eppp-accent) !important;
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	box-shadow: none !important;
	transition: background-color .18s ease, transform .05s ease;
}

.eppp-wrapper .eppp-buy-btn:hover {
	background: var(--eppp-accent-hover) !important;
	background-color: var(--eppp-accent-hover) !important;
}

.eppp-buy-btn:active {
	transform: translateY(1px);
}

.eppp-wrapper .eppp-buy-btn.is-in-cart,
.eppp-wrapper .eppp-buy-btn.eppg-btn--in-cart,
.eppp-wrapper .eppp-buy-btn.is-in-cart:hover,
.eppp-wrapper .eppp-buy-btn.eppg-btn--in-cart:hover {
	background: #22c55e !important;
	background-color: #22c55e !important;
}

.eppp-wrapper .eppp-buy-btn.is-in-cart:hover,
.eppp-wrapper .eppp-buy-btn.eppg-btn--in-cart:hover {
	background: #1ea94f !important;
	background-color: #1ea94f !important;
}

.eppp-buy-btn.eppg-btn--loading {
	opacity: .7;
	pointer-events: none;
}

.eppp-buy-icon svg {
	width: 18px;
	height: 18px;
}

/* Botão "Ir para o carrinho": escondido até o item entrar no carrinho. */
.eppp-wrapper .eppp-go-cart,
.eppp-wrapper .eppp-go-cart:hover,
.eppp-wrapper .eppp-go-cart:focus {
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 10px;
	padding: 12px 18px;
	border: 1px solid var(--eppp-accent) !important;
	border-radius: 10px;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--eppp-accent) !important;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: none !important;
	transition: background-color .15s ease, color .15s ease;
}

.eppp-go-cart {
	display: none;
}

.eppp-go-cart.is-visible {
	display: flex;
	animation: eppp-fade .25s ease;
}

.eppp-wrapper .eppp-go-cart:hover {
	background: var(--eppp-accent) !important;
	background-color: var(--eppp-accent) !important;
	color: #fff !important;
}

.eppp-go-cart svg {
	width: 16px;
	height: 16px;
}

.eppp-benefits {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.eppp-benefit {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: #c7cdd6;
}

.eppp-benefit-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(37, 99, 235, .14);
	color: var(--eppp-accent);
}

.eppp-benefit-icon svg {
	width: 15px;
	height: 15px;
}

/* Aviso "produto digital / frete grátis" — destaque na caixa de compra. */
.eppp-digital {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	padding: 14px 14px;
	border-radius: 12px;
	background: linear-gradient( 135deg, rgba(34,197,94,.14), rgba(37,99,235,.12) );
	border: 1px solid rgba(34, 197, 94, .35);
}

.eppp-digital-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(34, 197, 94, .18);
	color: #22c55e;
}

.eppp-digital-icon svg {
	width: 22px;
	height: 22px;
}

.eppp-digital-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.eppp-digital-text strong {
	font-size: 14px;
	font-weight: 700;
	color: var(--eppp-text);
	line-height: 1.2;
}

.eppp-digital-text span {
	font-size: 12.5px;
	color: #c7cdd6;
	line-height: 1.4;
}

.eppp-digital-badge {
	position: absolute;
	top: -9px;
	right: 12px;
	padding: 3px 9px;
	border-radius: 999px;
	background: #22c55e;
	color: #06210f;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* --- Responsivo do hero --- */

/* Notebooks / telas médias: o padding lateral já encolheu (clamp), mas as três
   colunas fixas (300 + 1fr + 380) ainda apertam o miolo. Reduzimos as colunas
   laterais e o gap para devolver espaço ao texto/descrição/compartilhar. */
@media (max-width: 1400px) {
	.eppp-hero {
		grid-template-columns: 260px minmax(0, 1fr) 320px;
		gap: 24px;
	}
}

@media (max-width: 1180px) {
	.eppp-hero {
		grid-template-columns: 220px minmax(0, 1fr) 300px;
		gap: 20px;
		padding: 22px;
	}
}

@media (max-width: 1024px) {
	.eppp-hero {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 22px;
	}
	/* A caixa de compra desce para uma linha própria, ocupando a largura toda. */
	.eppp-buy {
		grid-column: 1 / -1;
	}
}

/* (Regras mobile do hero consolidadas no bloco RESPONSIVO no fim do arquivo.) */

/* =========================================================================
 * GALERIA (Parte 4)
 * ========================================================================= */
.eppp-gallery {
	position: relative;
	margin-top: 16px;
}

.eppp-gallery-track {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--eppp-border) transparent;
	padding-bottom: 4px;
}

.eppp-gallery-track::-webkit-scrollbar {
	height: 6px;
}
.eppp-gallery-track::-webkit-scrollbar-track {
	background: transparent;
}
.eppp-gallery-track::-webkit-scrollbar-thumb {
	background: var(--eppp-border);
	border-radius: 8px;
}

.eppp-gallery-item {
	position: relative;
	flex: 0 0 auto;
	width: 168px;
	height: 96px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 12px;
	overflow: hidden;
	background: var(--eppp-surface-2);
	cursor: pointer;
	transition: border-color .15s ease, transform .1s ease;
}

.eppp-gallery-item:hover {
	border-color: var(--eppp-accent);
}

.eppp-gallery-item.is-active {
	border-color: var(--eppp-accent);
}

.eppp-gallery-item:active {
	transform: scale(.98);
}

.eppp-gallery-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Item do trailer: escurece + botão de play + legenda. */
.eppp-gallery-item--trailer .eppp-gallery-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba(0,0,0,.6), rgba(0,0,0,.15) );
}

.eppp-gallery-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	border: 2px solid #fff;
	color: #fff;
	backdrop-filter: blur(2px);
}

.eppp-gallery-play svg {
	width: 16px;
	height: 16px;
	margin-left: 2px;
}

.eppp-gallery-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	text-align: center;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
}

/* Setas de navegação da galeria (esquerda e direita).
   Forçamos display/visibilidade com !important porque o tema/Elementor pode
   esconder <button> ou zerar dimensões. Ficam SEMPRE visíveis. */
.eppp-wrapper .eppp-gallery-nav {
	position: absolute !important;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	min-width: 40px;
	height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid var(--eppp-border) !important;
	border-radius: 50% !important;
	background: var(--eppp-surface);
	color: var(--eppp-text);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
	z-index: 5;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}

.eppp-wrapper .eppp-gallery-prev {
	left: 6px;
}

.eppp-wrapper .eppp-gallery-next {
	right: 6px;
}

.eppp-wrapper .eppp-gallery-nav:hover {
	background: var(--eppp-accent);
	color: #fff;
	border-color: var(--eppp-accent);
}

.eppp-wrapper .eppp-gallery-nav svg {
	width: 18px !important;
	height: 18px !important;
	display: block;
}

@media (max-width: 640px) {
	.eppp-gallery-item {
		width: 140px;
		height: 82px;
	}
	.eppp-gallery-nav {
		display: none; /* no mobile o swipe já basta */
	}
	.eppp-gallery-track {
		padding-right: 0;
	}
}

/* =========================================================================
 * ABAS (Parte 5)
 * ========================================================================= */
.eppp-tabs {
	margin-top: 22px;
}

.eppp-tabs-nav {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--eppp-border);
	margin-bottom: 22px;
}

/* Fundo transparente FORÇADO: temas/WooCommerce/Elementor costumam pintar
   <button> (inclusive no :hover/:focus), o que deixava a aba com fundo rosa. */
.eppp-wrapper .eppp-tab-btn,
.eppp-wrapper .eppp-tab-btn:hover,
.eppp-wrapper .eppp-tab-btn:focus,
.eppp-wrapper .eppp-tab-btn:active,
.eppp-wrapper .eppp-tab-btn.is-active {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	outline: none;
}

.eppp-wrapper .eppp-tab-btn {
	appearance: none;
	-webkit-appearance: none;
	border: 0 !important;
	color: var(--eppp-muted);
	font-size: 15px;
	font-weight: 600;
	padding: 12px 4px;
	margin-bottom: -1px;
	cursor: pointer;
	border-bottom: 2px solid transparent !important;
	transition: color .15s ease, border-color .15s ease;
}

.eppp-tab-btn + .eppp-tab-btn {
	margin-left: 20px;
}

.eppp-wrapper .eppp-tab-btn:hover {
	color: var(--eppp-text);
}

.eppp-wrapper .eppp-tab-btn.is-active {
	color: var(--eppp-text);
	border-bottom: 2px solid var(--eppp-accent) !important;
}

.eppp-tab-count {
	color: var(--eppp-muted);
	font-weight: 500;
}

.eppp-tab-panel {
	display: none;
}

.eppp-tab-panel.is-active {
	display: block;
	animation: eppp-fade .25s ease;
}

@keyframes eppp-fade {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

/* --- Descrição --- */
.eppp-desc-full {
	color: #c7cdd6;
	font-size: 15px;
	line-height: 1.7;
	max-width: 70ch;
}

.eppp-desc-full p {
	margin: 0 0 14px;
}

.eppp-desc-full h1, .eppp-desc-full h2, .eppp-desc-full h3, .eppp-desc-full h4 {
	color: var(--eppp-text);
	margin: 18px 0 10px;
}

.eppp-desc-full a {
	color: var(--eppp-accent);
}

/* --- Informações (tabela de detalhes) --- */
.eppp-details {
	background: var(--eppp-surface);
	border: 1px solid var(--eppp-border);
	border-radius: 14px;
	padding: 22px 24px;
	max-width: 620px;
}

.eppp-details-title {
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: 700;
	color: var(--eppp-text);
}

.eppp-details-list {
	margin: 0;
}

.eppp-details-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--eppp-border);
}

.eppp-details-row:last-child {
	border-bottom: 0;
}

.eppp-details-label {
	margin: 0;
	font-size: 14px;
	color: var(--eppp-muted);
}

.eppp-details-value {
	margin: 0;
	font-size: 14px;
	color: var(--eppp-text);
	font-weight: 500;
}

.eppp-class-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	padding: 2px 7px;
	border-radius: 5px;
	background: #e11d48;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
}

/* --- Avaliações (reviews nativas do Woo, herdando o tema escuro) --- */
.eppp-reviews {
	color: #c7cdd6;
	font-size: 14px;
}

.eppp-reviews #reviews #comments ol.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eppp-reviews .comment-text {
	background: var(--eppp-surface);
	border: 1px solid var(--eppp-border);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 14px;
}

.eppp-reviews .woocommerce-review__author {
	color: var(--eppp-text);
	font-weight: 600;
}

.eppp-reviews .comment-form label {
	display: block;
	margin: 12px 0 6px;
	color: var(--eppp-text);
}

.eppp-reviews .comment-form input[type="text"],
.eppp-reviews .comment-form input[type="email"],
.eppp-reviews .comment-form textarea {
	width: 100%;
	background: var(--eppp-surface-2);
	border: 1px solid var(--eppp-border);
	border-radius: 8px;
	color: var(--eppp-text);
	padding: 10px 12px;
}

.eppp-reviews .comment-form .submit,
.eppp-reviews #respond input#submit {
	background: var(--eppp-accent);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 11px 20px;
	font-weight: 600;
	cursor: pointer;
}

.eppp-reviews #respond input#submit:hover {
	background: var(--eppp-accent-hover);
}

.eppp-reviews .star-rating,
.eppp-reviews .stars a {
	color: #f5c518;
}

/* Lista de avaliações renderizada pelo widget (get_comments). */
.eppp-reviews-empty {
	color: var(--eppp-muted);
	font-size: 14px;
}

.eppp-review-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.eppp-review {
	background: var(--eppp-surface);
	border: 1px solid var(--eppp-border);
	border-radius: 12px;
	padding: 16px;
}

.eppp-review-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.eppp-review-author {
	color: var(--eppp-text);
	font-weight: 700;
	font-size: 14px;
}

.eppp-review-stars {
	display: inline-flex;
	color: #f5c518;
}

.eppp-review-stars .eppp-star {
	width: 15px;
	height: 15px;
}

.eppp-review-date {
	color: var(--eppp-muted);
	font-size: 12.5px;
}

.eppp-review-text {
	color: #c7cdd6;
	font-size: 14px;
	line-height: 1.6;
}

.eppp-review-text p {
	margin: 0 0 8px;
}

@media (max-width: 640px) {
	.eppp-details {
		padding: 12px;
		border-radius: 12px;
	}
	.eppp-details-row {
		grid-template-columns: 1fr;
		gap: 2px;
	}
	.eppp-tab-btn + .eppp-tab-btn {
		margin-left: 14px;
	}
}

/* =========================================================================
 * VOCÊ TAMBÉM PODE GOSTAR (Parte 6)
 * Os cards reaproveitam o CSS do Product Grid (eppg-*). Aqui só o cabeçalho
 * da seção e o ajuste de padding do wrapper.
 * ========================================================================= */
.eppp-reco {
	margin-top: 34px;
}

.eppp-reco-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.eppp-reco-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--eppp-text);
}

.eppp-reco-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--eppp-accent);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.eppp-reco-more:hover {
	color: var(--eppp-accent-hover);
}

.eppp-reco-more svg {
	width: 16px;
	height: 16px;
}

/* Remove o padding lateral herdado do wrapper do Product Grid. */
.eppp-reco .eppg-wrapper {
	padding-left: 0;
	padding-right: 0;
}

/* Preço sobre a capa dos cards de recomendação: no widget de produto ele
   estava herdando um tamanho grande. Reduz para caber bem no card. */
.eppp-reco .eppg-price {
	font-size: 15px;
}
.eppp-reco .eppg-price-old {
	font-size: 12px;
}

/* 6 colunas por padrão (o controle do Elementor sobrescreve). */
.eppp-reco .eppg-grid {
	--eppg-cols: 6;
	--eppg-gap: 18px;
	justify-content: start;
}

@media (max-width: 1024px) {
	.eppp-reco .eppg-grid { --eppg-cols: 4; }
}

@media (max-width: 640px) {
	.eppp-reco-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	.eppp-reco-title { font-size: 20px; }
	.eppp-reco .eppg-grid { --eppg-cols: 2; }
}

/* =========================================================================
 * MODAL (trailer / lightbox) — Parte 7
 * O modal é anexado ao <body> (fora de .eppp-wrapper), então usa cores
 * literais em vez das variáveis --eppp-*.
 * ========================================================================= */
.eppp-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
}

.eppp-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.eppp-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(3, 6, 12, .85);
	backdrop-filter: blur(3px);
}

.eppp-modal-box {
	position: relative;
	width: 100%;
	max-width: 900px;
	transform: translateY(12px) scale(.98);
	transition: transform .25s cubic-bezier( .34, 1.56, .64, 1 );
}

.eppp-modal.is-open .eppp-modal-box {
	transform: none;
}

.eppp-modal-close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease;
}

.eppp-modal-close:hover {
	background: rgba(255, 255, 255, .24);
}

/* Vídeo responsivo 16:9. */
.eppp-modal-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

.eppp-modal-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Imagem (lightbox). */
.eppp-modal-image {
	text-align: center;
}

.eppp-modal-image img {
	max-width: 100%;
	max-height: 82vh;
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

/* Trava o scroll do fundo enquanto o modal está aberto. */
body.eppp-modal-open {
	overflow: hidden;
}

@media (max-width: 640px) {
	.eppp-modal {
		padding: 16px;
	}
	.eppp-modal-close {
		top: -40px;
	}
}

/* =========================================================================
 * RESPONSIVO CONSOLIDADO — TABLET E MOBILE
 * ========================================================================= */

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.eppp-wrapper {
		/* Sobrepõe o clamp por um respiro lateral fixo e enxuto no tablet. */
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ── Celular ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	/* Sem padding lateral no wrapper: o respiro fica só no padding interno
	   dos painéis (hero, etc.), evitando margem lateral dupla. */
	.eppp-wrapper {
		padding-left: 0;
		padding-right: 0;
	}

	/* HERO empilhado e centralizado. */
	.eppp-hero {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 14px;
		border-radius: 12px;
		text-align: center;
	}

	.eppp-poster {
		max-width: 220px;
		margin: 0 auto;
	}

	.eppp-info {
		align-items: center;
	}

	/* Selos, meta, nota e descrição centralizados. */
	.eppp-badges {
		justify-content: center;
	}

	.eppp-title {
		font-size: 22px;
	}

	.eppp-meta {
		justify-content: center;
	}

	.eppp-rating {
		justify-content: center;
	}

	.eppp-desc {
		text-align: center;
		max-width: 100%;
	}

	.eppp-trailer-btn {
		align-self: center;
	}

	/* Caixa de compra ocupa a largura toda. */
	.eppp-buy {
		text-align: left;
	}

	/* Preço um pouco menor no celular. */
	.eppp-price ins,
	.eppp-price > .woocommerce-Price-amount {
		font-size: 26px;
	}

	/* Abas: rolagem horizontal se não couberem. */
	.eppp-tabs-nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.eppp-tabs-nav::-webkit-scrollbar { display: none; }
	.eppp-tab-btn {
		white-space: nowrap;
		flex: 0 0 auto;
	}

	/* Elenco: fotos um pouco menores. */
	.eppp-cast-item { width: 84px; }
	.eppp-cast-photo { width: 72px; height: 72px; }

	/* Modal ocupa quase toda a tela. */
	.eppp-modal { padding: 14px; }
}

/* ── Celular estreito ───────────────────────────────────────────────────── */
@media (max-width: 400px) {
	.eppp-hero { padding: 14px; }
	.eppp-poster { max-width: 190px; }
	.eppp-title { font-size: 20px; }
	.eppp-reco .eppg-grid { --eppg-cols: 2; }
}

/* =========================================================================
 * ELENCO (fotos redondas)
 * ========================================================================= */
.eppp-cast {
	margin-top: 26px;
}

.eppp-cast-title {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 700;
	color: var(--eppp-text);
}

.eppp-cast-track {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	padding-bottom: 6px;
	scrollbar-width: thin;
	scrollbar-color: var(--eppp-border) transparent;
}

.eppp-cast-track::-webkit-scrollbar {
	height: 6px;
}
.eppp-cast-track::-webkit-scrollbar-thumb {
	background: var(--eppp-border);
	border-radius: 8px;
}

.eppp-cast-item {
	flex: 0 0 auto;
	width: 96px;
	text-align: center;
	text-decoration: none;
	display: block;
	cursor: pointer;
}

.eppp-cast-photo {
	display: block;
	width: 84px;
	height: 84px;
	margin: 0 auto 8px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--eppp-surface-2);
	border: 2px solid var(--eppp-border);
	transition: border-color .15s ease, transform .15s ease;
}

.eppp-cast-item:hover .eppp-cast-photo {
	border-color: var(--eppp-accent);
	transform: translateY(-2px);
}

.eppp-cast-item:hover .eppp-cast-name {
	color: var(--eppp-accent);
}

.eppp-cast-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.eppp-cast-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 30px;
	font-weight: 700;
	color: var(--eppp-muted);
}

.eppp-cast-name {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--eppp-text);
	line-height: 1.25;
}

.eppp-cast-char {
	display: block;
	font-size: 12px;
	color: var(--eppp-muted);
	line-height: 1.25;
	margin-top: 2px;
}

@media (max-width: 640px) {
	.eppp-cast-item { width: 84px; }
	.eppp-cast-photo { width: 72px; height: 72px; }
}