/* ===== Carrossel de banners da home (efeito fade) =====
 * Marcação gerada pelo PHP (.loja-banners > .loja-banners__viewport > .loja-banner);
 * o comportamento está em assets/banners.js. Aqui só o visual.
 * Todas as cores usam var() com fallback: se o style.css mudar a paleta, os
 * banners acompanham; se a variável não existir, o hex da marca vale. */

.loja-banners {
	--lb-radius: var(--loja-radius, 20px);
	/* Reserva lateral pras setas ficarem DENTRO do cartão sem cobrir o texto. */
	--lb-pad-x: 4.5rem;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--loja-max, 1100px);
	margin: 1.5rem auto;
	padding: 0 1.25rem;
	font-family: var(--loja-font, 'Nunito', ui-rounded, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
}
.loja-banners *,
.loja-banners *::before,
.loja-banners *::after {
	box-sizing: border-box;
}

/* ----- Viewport: grade de uma célula só -----
 * Todos os slides ocupam a MESMA célula (grid-area 1/1), então a altura do
 * viewport é sempre a do maior slide e nunca "pula" na troca (com position:
 * absolute o container colapsaria; com display:none a altura mudaria). */
.loja-banners__viewport {
	position: relative;
	display: grid;
	overflow: hidden;
	border-radius: var(--lb-radius);
	box-shadow: 0 14px 36px rgba(106, 0, 217, 0.22);
	/* Rolagem vertical segue com o navegador; só o gesto horizontal é nosso. */
	touch-action: pan-y;
	isolation: isolate;
}

.loja-banner {
	position: relative;
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	min-height: 360px;
	overflow: hidden;
	color: #fff;
	/* Fade: opacidade em 0.6s; a visibilidade só some no FIM do fade (delay) e
	 * aparece NO INÍCIO, assim o slide inativo sai do foco/leitor de tela. */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.loja-banner.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease, visibility 0s;
}

/* ----- Fundos por estilo ----- */
.loja-banner--roxo {
	background: var(--cc-gradient-purple, linear-gradient(135deg, #6A00D9, #8A20F0));
}
.loja-banner--degrade {
	background: linear-gradient(135deg, #6A00D9 0%, #D42BE8 55%, #FF8A00 100%);
}
.loja-banner--noite {
	background:
		radial-gradient(circle at 12% 112%, rgba(212, 43, 232, 0.38), transparent 46%),
		radial-gradient(circle at 92% -12%, rgba(255, 138, 0, 0.24), transparent 42%),
		var(--cc-night, #050020);
}
.loja-banner--laranja {
	background: var(--cc-orange, #FF8A00);
	color: var(--cc-charcoal, #17152D);
}

/* Brilhos decorativos: dão volume ao fundo sem competir com o texto, e
 * preenchem o lado direito dos slides que não têm imagem. */
.loja-banner::before,
.loja-banner::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	pointer-events: none;
}
.loja-banner::before {
	right: -90px;
	top: -110px;
	width: 380px;
	height: 380px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 68%);
}
.loja-banner::after {
	right: 12%;
	bottom: -170px;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.09), transparent 70%);
}
.loja-banner--laranja::before {
	background: radial-gradient(circle, rgba(255, 255, 255, 0.34), transparent 68%);
}
.loja-banner--laranja::after {
	background: radial-gradient(circle, rgba(212, 43, 232, 0.14), transparent 70%);
}

.loja-banner--noite::before,
.loja-banner--noite::after {
	display: none; /* os brilhos coloridos do próprio fundo já bastam; o branco deixava o canto turvo */
}

/* ----- Conteúdo ----- */
.loja-banner__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 2.5rem;
	width: 100%;
	/* Embaixo sobra espaço extra pras bolinhas, que ficam dentro do cartão. */
	padding: 2.5rem var(--lb-pad-x) 3.5rem;
}
.loja-banner__text {
	flex: 1 1 0;
	min-width: 0;
	/* Sem imagem o texto não estica a linha toda: fica legível e com respiro. */
	max-width: 620px;
	/* Flex com quebra: os botões (1 ou 2) ficam lado a lado e, se não couberem,
	 * descem alinhados, sem depender de espaços em branco entre inline-blocks. */
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 0.7rem;
}
.loja-banner .loja-banner__title,
.loja-banner__highlight,
.loja-banner__subtitle {
	flex: 0 0 100%;
}
.loja-banner__media {
	flex: 0 0 40%;
	min-width: 0;
	display: flex;
	justify-content: center;
}
/* Com imagem o texto ganha a coluna esquerda inteira. */
.loja-banner__inner:has(.loja-banner__media) .loja-banner__text {
	max-width: none;
}

.loja-banner__badge {
	display: inline-block;
	max-width: 100%;
	margin: 0 0 0.9rem;
	padding: 0.38rem 0.95rem;
	/* 14px = pílula em 1 linha, e não vira "bolha" se o selo quebrar em várias. */
	border-radius: 14px;
	background: #FFE9A8;
	color: #3A1D00;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.25;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}
.loja-banner--laranja .loja-banner__badge {
	background: var(--cc-charcoal, #17152D);
	color: #fff;
}

.loja-banner .loja-banner__title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.8rem, 1.1rem + 2.4vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
	overflow-wrap: break-word;
}
.loja-banner--laranja .loja-banner__title {
	color: var(--cc-charcoal, #17152D);
}

/* Destaque grande (número/frase): cor sólida de fallback, gradiente claro
 * por cima quando o navegador sabe recortar o fundo no texto. */
.loja-banner__highlight {
	margin: 0.3rem 0 0;
	color: #FFE9A8;
	font-size: clamp(2.4rem, 1rem + 5vw, 4.5rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.loja-banner__highlight {
		background: linear-gradient(100deg, #FFF6D6 0%, #FFD36B 60%, #FFB347 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}
.loja-banner--laranja .loja-banner__highlight {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: var(--cc-charcoal, #17152D);
}

.loja-banner__subtitle {
	margin: 0.9rem 0 0;
	max-width: 34em;
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
	font-weight: 500;
	line-height: 1.5;
}
.loja-banner--laranja .loja-banner__subtitle {
	/* #17152D a 92% sobre laranja continua acima de AA (>= 7:1). */
	color: rgba(23, 21, 45, 0.92);
}
.loja-banner__subtitle strong {
	font-weight: 800;
}

/* ----- Botão ----- */
.loja-banner__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	margin: 1.5rem 0 0;
	padding: 0.85rem 1.75rem;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: var(--cc-purple, #6A00D9);
	font: inherit;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(5, 0, 32, 0.22);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.loja-banner__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(5, 0, 32, 0.3);
	color: var(--cc-purple, #6A00D9);
}
.loja-banner__cta:active {
	transform: translateY(0);
}
.loja-banner__cta:focus-visible,
.loja-banners__arrow:focus-visible,
.loja-banners__dots button:focus-visible {
	outline: 3px solid #FFE9A8;
	outline-offset: 3px;
}
.loja-banner--noite .loja-banner__cta,
.loja-banner--noite .loja-banner__cta:hover {
	color: var(--cc-night, #050020);
}
/* Branco sobre laranja tem pouco contraste; o botão escuro destaca mais. */
.loja-banner--laranja .loja-banner__cta,
.loja-banner--laranja .loja-banner__cta:hover {
	background: var(--cc-charcoal, #17152D);
	color: #fff;
}
.loja-banner--laranja .loja-banner__cta:focus-visible {
	outline-color: var(--cc-charcoal, #17152D);
}

/* WhatsApp: verde da marca do app com texto verde bem escuro (~7:1). O anel
 * branco separa o verde dos fundos de luminosidade parecida (laranja e degradê). */
.loja-banner .loja-banner__cta--whatsapp,
.loja-banner .loja-banner__cta--whatsapp:hover {
	background: #25D366;
	color: #07301A;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 6px 18px rgba(5, 0, 32, 0.25);
}
.loja-banner .loja-banner__cta--whatsapp:hover {
	background: #2EE074;
	box-shadow: 0 0 0 2px #fff, 0 10px 24px rgba(5, 0, 32, 0.32);
}
.loja-banner--laranja .loja-banner__cta--whatsapp:focus-visible {
	outline-color: var(--cc-charcoal, #17152D);
}
.loja-banner__cta-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* ----- Imagem ----- */
.loja-banner__media img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 280px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 14px 34px rgba(5, 0, 32, 0.38);
	-webkit-user-drag: none;
	user-select: none;
}
.loja-banner--laranja .loja-banner__media img {
	box-shadow: 0 14px 30px rgba(23, 21, 45, 0.3);
}

/* ----- Setas ----- */
.loja-banners__arrow {
	position: absolute;
	z-index: 3;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -22px 0 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 50%;
	background: rgba(5, 0, 32, 0.34);
	color: #fff;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 0.18s ease, transform 0.18s ease;
}
.loja-banners__arrow--prev {
	left: calc(1.25rem + 0.85rem);
}
.loja-banners__arrow--next {
	right: calc(1.25rem + 0.85rem);
}
.loja-banners__arrow:hover {
	background: rgba(5, 0, 32, 0.6);
	transform: scale(1.06);
}
.loja-banners__arrow svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

/* No laranja, vidro escuro vira marrom; vidro claro com ícone escuro fica limpo. */
.loja-banners:has(.loja-banner--laranja.is-active) .loja-banners__arrow {
	border-color: rgba(23, 21, 45, 0.28);
	background: rgba(255, 255, 255, 0.4);
	color: var(--cc-charcoal, #17152D);
}
.loja-banners:has(.loja-banner--laranja.is-active) .loja-banners__arrow:hover {
	background: rgba(255, 255, 255, 0.62);
}
.loja-banners:has(.loja-banner--laranja.is-active) .loja-banners__dots button::before {
	background: rgba(23, 21, 45, 0.35);
	box-shadow: none;
}
.loja-banners:has(.loja-banner--laranja.is-active) .loja-banners__dots button:hover::before {
	background: rgba(23, 21, 45, 0.6);
}
.loja-banners:has(.loja-banner--laranja.is-active) .loja-banners__dots button[aria-selected="true"]::before {
	background: var(--cc-charcoal, #17152D);
}

/* ----- Bolinhas (a ativa vira pílula) -----
 * O botão tem 24px de área de toque; a bolinha visível é o ::before. */
.loja-banners__dots {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: 0.7rem;
	display: flex;
	align-items: center;
	gap: 0;
	transform: translateX(-50%);
}
.loja-banners__dots button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.loja-banners__dots button::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 0 1px rgba(5, 0, 32, 0.18);
	transition: width 0.3s ease, background-color 0.3s ease;
}
.loja-banners__dots button:hover::before {
	background: rgba(255, 255, 255, 0.85);
}
.loja-banners__dots button[aria-selected="true"]::before {
	width: 28px;
	background: #fff;
}

/* ----- Modo escuro (opcional) -----
 * Os banners já são coloridos e mantêm as cores; só a sombra e uma borda
 * sutil mudam, pra o cartão não "sumir" no fundo escuro. */
html[data-theme="dark"] .loja-banners__viewport {
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ----- Tablet e celular ----- */
@media (max-width: 781px) {
	.loja-banners {
		--lb-pad-x: 1.75rem;
		margin: 1rem auto;
	}
	/* Setas atrapalham o conteúdo em telas estreitas: o gesto de arrastar e as
	 * bolinhas fazem o mesmo trabalho. */
	.loja-banners__arrow {
		display: none;
	}
	.loja-banner {
		min-height: 300px;
	}
	/* Tablet: continua em 2 colunas (a imagem não é cortada em tira), só mais justo. */
	.loja-banner__inner {
		gap: 1.5rem;
		padding: 2rem var(--lb-pad-x) 3.25rem;
	}
	.loja-banner__media {
		flex-basis: 38%;
	}
	.loja-banner__media img {
		max-height: 220px;
	}
}
@media (max-width: 479px) {
	.loja-banners {
		--lb-pad-x: 1.25rem;
		padding: 0 1rem;
	}
	.loja-banner {
		min-height: 280px;
	}
	/* Celular: empilha e esconde a imagem. Cortada numa tira ela perde o sentido e
	 * empurraria o texto e o botão pra baixo; o título e o botão são o essencial. */
	.loja-banner__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
		padding-top: 1.5rem;
	}
	.loja-banner__text {
		max-width: none;
	}
	.loja-banner__media {
		display: none;
	}
	.loja-banner__badge {
		font-size: 0.72rem;
		padding: 0.34rem 0.8rem;
	}
	.loja-banner .loja-banner__title {
		font-size: 1.65rem;
	}
	.loja-banner__highlight {
		font-size: clamp(2.2rem, 12vw, 3rem);
	}
	.loja-banner__subtitle {
		margin-top: 0.7rem;
		font-size: 0.98rem;
	}
	.loja-banner__cta {
		margin-top: 1.25rem;
		padding: 0.8rem 1.5rem;
		font-size: 0.95rem;
	}
}

/* ----- Movimento reduzido: troca instantânea, sem transições -----
 * (o autoplay também é desligado no JS pela mesma media query). */
@media (prefers-reduced-motion: reduce) {
	.loja-banner,
	.loja-banner.is-active,
	.loja-banner__cta,
	.loja-banners__arrow,
	.loja-banners__dots button::before {
		transition: none;
	}
	.loja-banner__cta:hover,
	.loja-banners__arrow:hover {
		transform: none;
	}
}

/* ===== Largura total, texto centralizado (como o bloco de abertura que ele substitui) ===== */
.loja-banners {
	max-width: none;
	margin: 0;
	padding: 0;
}
.loja-banners__viewport {
	border-radius: 0;
	box-shadow: none;
}
.loja-banner {
	min-height: 420px;
}
.loja-banner__inner {
	max-width: var(--loja-max, 1100px);
	margin: 0 auto;
	justify-content: center;
	text-align: center;
}
.loja-banner__text {
	max-width: 860px;
	margin: 0 auto;
	align-items: center;
	justify-content: center;
	text-align: center;
}
/* Com imagem: duas colunas, o texto continua centralizado na sua metade. */
.loja-banner__inner:has(.loja-banner__media) .loja-banner__text {
	margin: 0;
	max-width: none;
}
@media (max-width: 782px) {
	.loja-banner {
		min-height: 360px;
	}
}

/* ===== Estilo "claro": mesmo visual da abertura antiga da home =====
 * Usa as variáveis do tema (--loja-*), então acompanha o modo escuro. */
.loja-banner--claro {
	background:
		radial-gradient(60% 80% at 100% 0%, var(--loja-soft-2, rgba(255, 138, 0, 0.08)) 0%, transparent 60%),
		radial-gradient(50% 70% at 0% 100%, var(--loja-soft-3, rgba(212, 43, 232, 0.07)) 0%, transparent 60%),
		var(--loja-soft, #F3EEFD);
	color: var(--loja-ink, #17152D);
}
.loja-banner--claro::before,
.loja-banner--claro::after {
	display: none;
}
.loja-banner--claro .loja-banner__badge {
	background: var(--loja-surface, #fff);
	color: var(--loja-accent-dark, #6A00D9);
	border: 1px solid var(--loja-line, #E7E4EF);
	border-radius: 999px;
	padding: 0.3rem 0.85rem;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
}
.loja-banner.loja-banner--claro .loja-banner__title {
	color: var(--loja-ink, #17152D);
	font-size: clamp(2rem, 4.6vw, 3.4rem);
}
.loja-banner--claro .loja-banner__highlight {
	color: var(--cc-purple, #6A00D9);
	-webkit-text-fill-color: currentColor;
	background: none;
}
.loja-banner--claro .loja-banner__subtitle {
	color: var(--loja-muted, #666477);
	font-size: 1.15rem;
	max-width: 34rem;
	margin-left: auto;
	margin-right: auto;
}
.loja-banner--claro .loja-banner__cta,
.loja-banner--claro .loja-banner__cta:hover {
	background: var(--loja-gradient, linear-gradient(135deg, #6A00D9 0%, #D42BE8 55%, #FF8A00 100%));
	color: #fff;
	box-shadow: 0 8px 20px rgba(106, 0, 217, 0.25);
}
.loja-banner--claro .loja-banner__cta:hover {
	background: var(--loja-gradient-hover, var(--loja-gradient));
	box-shadow: 0 10px 24px rgba(138, 32, 240, 0.35);
}
/* Linha "Pix na hora · Cartão parcelado …" (shortcode [loja_selos]). */
.loja-banner__trust {
	flex: 0 0 100%;
}
.loja-banner__trust .loja-selos {
	justify-content: center;
	margin-top: 1.25rem;
}
.loja-banners:has(.loja-banner--claro.is-active) .loja-banners__arrow {
	border-color: var(--loja-line, #E7E4EF);
	background: var(--loja-surface, #fff);
	color: var(--cc-purple, #6A00D9);
}
.loja-banners:has(.loja-banner--claro.is-active) .loja-banners__dots button::before {
	background: rgba(106, 0, 217, 0.25);
	box-shadow: none;
}
.loja-banners:has(.loja-banner--claro.is-active) .loja-banners__dots button[aria-selected="true"]::before {
	background: var(--cc-purple, #6A00D9);
}

/* Claro: conteúdo em coluna centralizada (botão sempre abaixo do texto, como na abertura antiga). */
.loja-banner--claro .loja-banner__text {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
}
.loja-banner--claro .loja-banner__text > * {
	flex: 0 0 auto;
}
.loja-banner--claro .loja-banner__trust {
	width: 100%;
}

/* Padrão de fundo contínuo por slide (assets/patterns/<tema>.svg + <tema>-accent.svg).
 * As imagens viram máscara e são pintadas com as cores da marca (roxo e laranja), então
 * acompanham o modo escuro e não pesam (SVG pequeno repetido). O tema vem da classe
 * loja-banner--padrao-<tema>, escolhida no painel. */
.loja-banner[class*="loja-banner--padrao-"]::before,
.loja-banner[class*="loja-banner--padrao-"]::after {
	display: block;
	inset: 0;
	right: auto;
	top: 0;
	bottom: auto;
	width: 100%;
	height: 100%;
	border-radius: 0;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	-webkit-mask-size: 360px 360px;
	mask-size: 360px 360px;
}
.loja-banner--claro[class*="loja-banner--padrao-"]::before {
	background: var(--cc-purple, #6A00D9);
	opacity: 0.07;
}
.loja-banner--claro[class*="loja-banner--padrao-"]::after {
	background: var(--cc-orange, #FF8A00);
	opacity: 0.15;
}
/* Estilos coloridos: o padrão vira textura branca discreta (sem camada laranja). */
.loja-banner:not(.loja-banner--claro)[class*="loja-banner--padrao-"]::before {
	background: #fff;
	opacity: 0.09;
}
.loja-banner:not(.loja-banner--claro)[class*="loja-banner--padrao-"]::after {
	display: none;
}
html[data-theme="dark"] .loja-banner--claro[class*="loja-banner--padrao-"]::before {
	background: #B98CFF;
	opacity: 0.12;
}
html[data-theme="dark"] .loja-banner--claro[class*="loja-banner--padrao-"]::after {
	opacity: 0.2;
}
.loja-banner--padrao-veterinario-laboratorio::before {
	-webkit-mask-image: url("patterns/veterinario-laboratorio.svg");
	mask-image: url("patterns/veterinario-laboratorio.svg");
}
.loja-banner--padrao-veterinario-laboratorio::after {
	-webkit-mask-image: url("patterns/veterinario-laboratorio-accent.svg");
	mask-image: url("patterns/veterinario-laboratorio-accent.svg");
}
.loja-banner--padrao-personalizados::before {
	-webkit-mask-image: url("patterns/personalizados.svg");
	mask-image: url("patterns/personalizados.svg");
}
.loja-banner--padrao-personalizados::after {
	-webkit-mask-image: url("patterns/personalizados-accent.svg");
	mask-image: url("patterns/personalizados-accent.svg");
}
.loja-banner--padrao-frete::before {
	-webkit-mask-image: url("patterns/frete.svg");
	mask-image: url("patterns/frete.svg");
}
.loja-banner--padrao-frete::after {
	-webkit-mask-image: url("patterns/frete-accent.svg");
	mask-image: url("patterns/frete-accent.svg");
}
.loja-banner--padrao-atacado-revenda::before {
	-webkit-mask-image: url("patterns/atacado-revenda.svg");
	mask-image: url("patterns/atacado-revenda.svg");
}
.loja-banner--padrao-atacado-revenda::after {
	-webkit-mask-image: url("patterns/atacado-revenda-accent.svg");
	mask-image: url("patterns/atacado-revenda-accent.svg");
}
.loja-banner--padrao-afiliados::before {
	-webkit-mask-image: url("patterns/afiliados.svg");
	mask-image: url("patterns/afiliados.svg");
}
.loja-banner--padrao-afiliados::after {
	-webkit-mask-image: url("patterns/afiliados-accent.svg");
	mask-image: url("patterns/afiliados-accent.svg");
}
@media (max-width: 782px) {
	.loja-banner[class*="loja-banner--padrao-"]::before,
	.loja-banner[class*="loja-banner--padrao-"]::after {
		-webkit-mask-size: 270px 270px;
		mask-size: 270px 270px;
	}
}

/* O botão de WhatsApp continua verde no estilo claro (a regra do botão em degradê não o sobrescreve). */
.loja-banner--claro .loja-banner__cta.loja-banner__cta--whatsapp,
.loja-banner--claro .loja-banner__cta.loja-banner__cta--whatsapp:hover {
	background: #25D366;
	color: #07301A;
	box-shadow: 0 0 0 2px #fff, 0 8px 20px rgba(7, 48, 26, 0.2);
}
.loja-banner--claro .loja-banner__cta.loja-banner__cta--whatsapp:hover {
	background: #2fe074;
}

/* =====================================================================
 * VISUAL "RICO" (camada final): título maior, cartões de valor, imagens
 * orgânicas nas laterais, fundo com profundidade e entrada suave.
 * Fica por último de propósito: refina o que está acima sem mudar a
 * marcação nem o JS, e os slides só de texto continuam centralizados.
 * ===================================================================== */

/* Cores dos textos em degradê. Em fundo claro o laranja é mais fechado (#E8650A)
 * pra manter >= 3:1 (texto grande, AA); no escuro tudo clareia. A cor sólida
 * (--lb-solid) é o fallback de quem não recorta o fundo no texto. */
.loja-banners {
	--lb-solid: var(--cc-purple, #6A00D9);
	--lb-em-grad: linear-gradient(100deg, #6A00D9 0%, #C21FD8 55%, #E8650A 100%);
	--lb-val-grad: linear-gradient(120deg, #6A00D9 0%, #C21FD8 100%);
	--lb-media: clamp(180px, 21vw, 300px);
	--lb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
html[data-theme="dark"] .loja-banners {
	--lb-solid: #B98CFF;
	--lb-em-grad: linear-gradient(100deg, #B98CFF 0%, #EE7CFF 55%, #FFA340 100%);
	--lb-val-grad: linear-gradient(120deg, #C9A3FF 0%, #F07CFF 100%);
}

/* ----- Fundo claro com profundidade -----
 * Dois "blobs" grandes e suaves (roxo em cima à esquerda, laranja/magenta embaixo
 * à direita) por cima da cor base; o padrão de ícones (::before/::after) continua
 * por cima e visível. Bem translúcidos: o texto não perde contraste. */
.loja-banner--claro {
	background:
		radial-gradient(46% 70% at 0% 0%, rgba(106, 0, 217, 0.16) 0%, transparent 70%),
		radial-gradient(48% 72% at 100% 100%, rgba(255, 138, 0, 0.2) 0%, rgba(212, 43, 232, 0.08) 45%, transparent 72%),
		var(--loja-soft, #F3EEFD);
}
html[data-theme="dark"] .loja-banner--claro {
	background:
		radial-gradient(46% 70% at 0% 0%, rgba(138, 32, 240, 0.34) 0%, transparent 70%),
		radial-gradient(48% 72% at 100% 100%, rgba(255, 138, 0, 0.16) 0%, rgba(212, 43, 232, 0.14) 45%, transparent 72%),
		var(--loja-soft, #211C45);
}

/* ----- Título com mais presença ----- */
.loja-banner.loja-banner--claro .loja-banner__title {
	font-size: clamp(2.2rem, 1.1rem + 3.6vw, 4.2rem);
	font-weight: 900;
	line-height: 1.04;
	letter-spacing: -0.025em;
}
/* Com imagens nas laterais sobra menos largura pro texto: título um degrau menor. */
.loja-banner.loja-banner--claro.has-media-left .loja-banner__title,
.loja-banner.loja-banner--claro.has-media-right .loja-banner__title {
	font-size: clamp(2rem, 1rem + 2.7vw, 3.5rem);
}

/* <em> do título vira destaque em degradê (sem itálico). `clone` repete o degradê
 * em cada linha quando a palavra quebra; o padding evita cortar o fim das letras. */
.loja-banner__title em,
.loja-banner__highlight em {
	font-style: normal;
	padding: 0 0.04em;
	color: var(--lb-solid);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.loja-banner__title em,
	.loja-banner--claro .loja-banner__highlight {
		background-image: var(--lb-em-grad);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
	.loja-banner--claro .loja-banner__highlight {
		background-color: transparent;
	}
}
/* Estilos coloridos (fundo roxo/noite/laranja): destaque em tons claros/escuros próprios. */
.loja-banner:not(.loja-banner--claro) .loja-banner__title em {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: #FFE9A8;
}
.loja-banner--laranja .loja-banner__title em {
	color: var(--cc-purple, #6A00D9);
}

.loja-banner--claro .loja-banner__subtitle small {
	display: block;
	margin-top: 0.55rem;
	font-size: 0.88em;
	font-weight: 600;
	opacity: 0.95;
}

/* ----- Selo: ponto em degradê + borda em degradê ----- */
.loja-banner--claro .loja-banner__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1.5px solid transparent;
	background:
		linear-gradient(var(--loja-surface, #fff), var(--loja-surface, #fff)) padding-box,
		var(--loja-gradient, linear-gradient(135deg, #6A00D9, #D42BE8 55%, #FF8A00)) border-box;
	box-shadow: 0 4px 14px rgba(106, 0, 217, 0.12);
}
.loja-banner--claro .loja-banner__badge::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--loja-gradient, linear-gradient(135deg, #6A00D9, #D42BE8 55%, #FF8A00));
	box-shadow: 0 0 0 3px rgba(212, 43, 232, 0.18);
}

/* ----- Botão: brilho que passa no hover + seta (menos no WhatsApp) ----- */
.loja-banner__cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.loja-banner__cta::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.38) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.6s ease;
	pointer-events: none;
}
.loja-banner__cta:hover::before,
.loja-banner__cta:focus-visible::before {
	transform: translateX(120%);
}
/* Seta feita com máscara (herda a cor do texto, não depende de fonte). */
.loja-banner__cta:not(.loja-banner__cta--whatsapp)::after {
	content: "";
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s ease;
}
.loja-banner__cta:not(.loja-banner__cta--whatsapp):hover::after {
	transform: translateX(3px);
}
.loja-banner--claro .loja-banner__cta:not(.loja-banner__cta--whatsapp) {
	box-shadow: 0 10px 24px rgba(106, 0, 217, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ----- Cartões de valor -----
 * Grade com 1 a 3 colunas (conforme a quantidade de <li>), centralizada. Cada cartão
 * é uma sub-grade de 3 linhas (título / valor / legenda) que herda as alturas da linha
 * da lista: assim os valores ficam alinhados mesmo se um título quebra em 2 linhas. */
.loja-banner__cards {
	--n: 1;
	display: grid;
	grid-template-columns: repeat(var(--n), minmax(0, 290px));
	grid-template-rows: auto auto auto;
	justify-content: center;
	gap: 0 1.25rem;
	width: 100%;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
	/* Unidade de container (cqi): o valor encolhe junto com a largura disponível. */
	container-type: inline-size;
}
.loja-banner__cards:has(> :nth-child(2)) { --n: 2; }
.loja-banner__cards:has(> :nth-child(3)) { --n: 3; }

.loja-banner__card {
	position: relative;
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
	row-gap: 0.3rem;
	justify-items: center;
	align-items: start;
	overflow: hidden;
	margin: 0;
	padding: 1.7rem 1.1rem 1.4rem;
	border: 1px solid var(--loja-line, #E7E4EF);
	border-radius: 20px;
	background: var(--loja-surface, #fff);
	box-shadow: 0 18px 40px rgba(60, 20, 120, 0.14), 0 2px 6px rgba(60, 20, 120, 0.06);
	text-align: center;
}
/* Faixa de cor no topo (indicador da marca). */
.loja-banner__card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: var(--loja-gradient, linear-gradient(135deg, #6A00D9, #D42BE8 55%, #FF8A00));
}
html[data-theme="dark"] .loja-banner__card {
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.loja-banner__card-title {
	grid-row: 1;
	align-self: end;
	color: var(--loja-accent-dark, #6A00D9);
	font-size: 0.8rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-wrap: balance;
}
.loja-banner__card-value {
	grid-row: 2;
	align-self: center;
	margin: 0.15rem 0;
	color: var(--lb-solid);
	font-size: clamp(2.1rem, 17cqi, 3.4rem);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.03em;
	white-space: nowrap;
}
.loja-banner__cards:has(> :nth-child(3)) .loja-banner__card-value {
	font-size: clamp(1.9rem, 11cqi, 3rem);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.loja-banner__card-value {
		background-image: var(--lb-val-grad);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}
.loja-banner__card-caption {
	grid-row: 3;
	color: var(--loja-muted, #666477);
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;
}
/* Slides com cartões: o texto pode abrir até a largura da grade. */
.loja-banner.has-cards .loja-banner__text {
	max-width: 920px;
}

/* ----- Imagens laterais: formas orgânicas ----- */
.loja-banner__media {
	position: relative;
	align-self: center;
	z-index: 1;
}
/* Blobs translúcidos atrás da foto (roxo e laranja). */
.loja-banner__media::before,
.loja-banner__media::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	pointer-events: none;
}
.loja-banner__media::before {
	width: 78%;
	aspect-ratio: 1;
	left: -8%;
	bottom: -10%;
	background: radial-gradient(circle at 35% 35%, rgba(138, 32, 240, 0.4), rgba(106, 0, 217, 0.12) 70%);
}
.loja-banner__media::after {
	width: 46%;
	aspect-ratio: 1;
	right: -4%;
	top: -6%;
	background: radial-gradient(circle at 40% 40%, rgba(255, 138, 0, 0.55), rgba(255, 138, 0, 0.16) 70%);
}
.loja-banner__media--right::before {
	left: auto;
	right: -8%;
}
.loja-banner__media--right::after {
	right: auto;
	left: -4%;
	top: auto;
	bottom: -4%;
}
.loja-banner__media img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	max-height: none;
	aspect-ratio: 1 / 1.04;
	object-fit: cover;
	border: 6px solid #fff;
	border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%;
	box-shadow: 0 22px 44px rgba(40, 10, 90, 0.3), 0 4px 10px rgba(40, 10, 90, 0.12);
}
.loja-banner__media--left img {
	transform: rotate(-3deg) translateY(-6px);
}
.loja-banner__media--right img {
	border-radius: 44% 56% 46% 54% / 55% 46% 54% 45%;
	transform: rotate(3deg) translateY(8px);
}
html[data-theme="dark"] .loja-banner__media img {
	border-color: rgba(255, 255, 255, 0.92);
	box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55);
}

/* Slides com imagem: 3 colunas (imagem | texto | imagem). Com uma imagem só, a
 * coluna do outro lado fica vazia e reservada, então o texto continua centralizado.
 * A largura extra deixa as fotos "respirarem" ao lado do texto. */
.loja-banner.has-media-left,
.loja-banner.has-media-right {
	--lb-pad-x: 5.75rem;
}
.loja-banner.has-media-left .loja-banner__inner,
.loja-banner.has-media-right .loja-banner__inner {
	display: grid;
	grid-template-columns: var(--lb-media) minmax(0, 1fr) var(--lb-media);
	gap: 2rem;
	max-width: 1320px;
}
.loja-banner.has-media-left .loja-banner__media--left,
.loja-banner.has-media-right .loja-banner__media--left {
	grid-column: 1;
	grid-row: 1;
}
.loja-banner.has-media-left .loja-banner__text,
.loja-banner.has-media-right .loja-banner__text {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
}
.loja-banner.has-media-left .loja-banner__media--right,
.loja-banner.has-media-right .loja-banner__media--right {
	grid-column: 3;
	grid-row: 1;
}
/* Cartões + imagens: os cartões só têm a coluna do meio, então ficam mais enxutos. */
.loja-banner.has-cards.has-media-left .loja-banner__card,
.loja-banner.has-cards.has-media-right .loja-banner__card {
	padding-left: 0.7rem;
	padding-right: 0.7rem;
}

/* ----- Alturas: slides ricos são mais altos; o viewport segue o maior (grid 1/1) ----- */
.loja-banner.has-cards,
.loja-banner.has-media-left,
.loja-banner.has-media-right {
	min-height: 480px;
}
.loja-banner.has-cards .loja-banner__inner {
	padding-top: 3rem;
	padding-bottom: 4rem;
}

/* ----- Entrada suave: ao ficar ativo, o conteúdo sobe com fade, escalonado ----- */
@keyframes lb-rise {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: none; }
}
@keyframes lb-pop {
	from { opacity: 0; transform: scale(0.88) rotate(var(--lb-rot, 0deg)); }
	to   { opacity: 1; transform: rotate(var(--lb-rot, 0deg)) translateY(var(--lb-dy, 0)); }
}
.loja-banner.is-active .loja-banner__text > * {
	animation: lb-rise 0.7s var(--lb-ease) both;
}
.loja-banner.is-active .loja-banner__text > .loja-banner__title    { animation-delay: 0.08s; }
.loja-banner.is-active .loja-banner__text > .loja-banner__highlight,
.loja-banner.is-active .loja-banner__text > .loja-banner__subtitle { animation-delay: 0.16s; }
.loja-banner.is-active .loja-banner__text > .loja-banner__cta,
.loja-banner.is-active .loja-banner__text > .loja-banner__trust    { animation-delay: 0.4s; }
/* Cartões: a lista fica parada e cada cartão entra no seu tempo. */
.loja-banner.is-active .loja-banner__text > .loja-banner__cards {
	animation: none;
}
.loja-banner.is-active .loja-banner__card {
	animation: lb-rise 0.7s var(--lb-ease) both;
	animation-delay: 0.22s;
}
.loja-banner.is-active .loja-banner__card:nth-child(2) { animation-delay: 0.34s; }
.loja-banner.is-active .loja-banner__card:nth-child(3) { animation-delay: 0.46s; }
.loja-banner.is-active .loja-banner__media--left img  { --lb-rot: -3deg; --lb-dy: -6px; animation: lb-pop 0.8s var(--lb-ease) 0.1s both; }
.loja-banner.is-active .loja-banner__media--right img { --lb-rot: 3deg;  --lb-dy: 8px;  animation: lb-pop 0.8s var(--lb-ease) 0.2s both; }

/* ----- Tablet (561 a 959px) -----
 * Sem cartões: as fotos continuam, só menores (~130px), e o texto segue no meio.
 * Com cartões: as fotos somem, senão espremeriam os cartões; o fundo com
 * blobs/padrão segue dando personalidade. */
@media (max-width: 959px) {
	.loja-banners {
		--lb-media: clamp(104px, 17vw, 150px);
	}
	.loja-banner.has-media-left,
	.loja-banner.has-media-right {
		--lb-pad-x: 1.5rem;
		min-height: 420px;
	}
	.loja-banner.has-media-left .loja-banner__inner,
	.loja-banner.has-media-right .loja-banner__inner {
		gap: 1.25rem;
	}
	.loja-banner.loja-banner--claro.has-media-left .loja-banner__title,
	.loja-banner.loja-banner--claro.has-media-right .loja-banner__title {
		font-size: clamp(1.9rem, 1rem + 2.8vw, 2.6rem);
	}
	.loja-banner__media img {
		border-width: 4px;
	}
	.loja-banner.has-cards.has-media-left .loja-banner__inner,
	.loja-banner.has-cards.has-media-right .loja-banner__inner {
		display: flex;
		max-width: var(--loja-max, 1100px);
	}
	.loja-banner.has-cards .loja-banner__media {
		display: none;
	}
}

/* ----- Celular (até 560px) -----
 * Cartões viram linhas compactas (título + legenda à esquerda, valor à direita):
 * 3 cartões empilhados ocupam ~240px em vez de ~450px. */
@media (max-width: 560px) {
	.loja-banners {
		--lb-pad-x: 1.25rem;
	}
	.loja-banner.has-cards,
	.loja-banner.has-media-left,
	.loja-banner.has-media-right {
		min-height: 360px;
	}
	/* Fotos laterais não cabem: some a grade de 3 colunas junto com elas. */
	.loja-banner__media,
	.loja-banner.has-media-left .loja-banner__media,
	.loja-banner.has-media-right .loja-banner__media {
		display: none;
	}
	.loja-banner.has-media-left .loja-banner__inner,
	.loja-banner.has-media-right .loja-banner__inner {
		display: flex;
		flex-direction: column;
		max-width: var(--loja-max, 1100px);
	}
	.loja-banner.has-cards .loja-banner__inner {
		padding-top: 2rem;
		padding-bottom: 3.25rem;
	}
	.loja-banner.loja-banner--claro .loja-banner__title,
	.loja-banner.loja-banner--claro.has-media-left .loja-banner__title,
	.loja-banner.loja-banner--claro.has-media-right .loja-banner__title {
		font-size: clamp(1.9rem, 9vw, 2.3rem);
		line-height: 1.08;
	}
	.loja-banner--claro .loja-banner__subtitle {
		font-size: 1rem;
	}
	.loja-banner__cards {
		grid-template-columns: minmax(0, 320px);
		grid-template-rows: none;
		gap: 0.7rem;
		margin-top: 1.25rem;
	}
	.loja-banner__card {
		grid-row: auto;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		justify-items: start;
		align-items: center;
		column-gap: 0.9rem;
		row-gap: 0.1rem;
		padding: 0.85rem 1rem 0.85rem 1.35rem;
		text-align: left;
	}
	.loja-banner__card::before {
		inset: 0 auto 0 0;
		width: 6px;
		height: auto;
	}
	.loja-banner__card-title {
		grid-row: 1;
		grid-column: 1;
		align-self: end;
		font-size: 0.7rem;
	}
	.loja-banner__card-value,
	.loja-banner__cards:has(> :nth-child(3)) .loja-banner__card-value {
		grid-row: 1 / span 2;
		grid-column: 2;
		margin: 0;
		font-size: 1.9rem;
	}
	.loja-banner__card-caption {
		grid-row: 2;
		grid-column: 1;
		align-self: start;
		font-size: 0.8rem;
	}
	.loja-banner.has-cards .loja-banner__cta {
		margin-top: 1.1rem;
	}
}

/* ----- Movimento reduzido: sem entrada animada nem brilho no botão ----- */
@media (prefers-reduced-motion: reduce) {
	.loja-banner.is-active .loja-banner__text > *,
	.loja-banner.is-active .loja-banner__card,
	.loja-banner.is-active .loja-banner__media img {
		animation: none;
	}
	.loja-banner__cta::before,
	.loja-banner__cta::after {
		transition: none;
	}
}

/* Setas e bolinhas no claro escuro: o roxo #6A00D9 some no fundo noturno
 * (contraste < 3:1), então usam o lilás claro da marca. */
html[data-theme="dark"] .loja-banners:has(.loja-banner--claro.is-active) .loja-banners__arrow {
	color: #B98CFF;
	background: var(--loja-surface, #17152D);
}
html[data-theme="dark"] .loja-banners:has(.loja-banner--claro.is-active) .loja-banners__dots button::before {
	background: rgba(185, 140, 255, 0.4);
}
html[data-theme="dark"] .loja-banners:has(.loja-banner--claro.is-active) .loja-banners__dots button:hover::before {
	background: rgba(185, 140, 255, 0.75);
}
html[data-theme="dark"] .loja-banners:has(.loja-banner--claro.is-active) .loja-banners__dots button[aria-selected="true"]::before {
	background: #B98CFF;
}

/* Foto de pessoa recortada (fundo transparente), usada no slide de afiliados: sem moldura
 * de blob nem borda branca; a pessoa "sai" do círculo colorido de trás, que a valoriza. */
.loja-banner--foto-recorte .loja-banner__media img {
	aspect-ratio: auto;
	object-fit: contain;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	filter: drop-shadow(0 18px 24px rgba(40, 10, 90, 0.28));
	transform: none;
	--lb-rot: 0deg;
	max-height: 440px;
	width: auto;
	margin: 0 auto;
	display: block;
}
.loja-banner--foto-recorte .loja-banner__media--left::before,
.loja-banner--foto-recorte .loja-banner__media--right::before {
	width: 86%;
	left: 7%;
	right: auto;
	bottom: 2%;
}
html[data-theme="dark"] .loja-banner--foto-recorte .loja-banner__media img {
	border: 0;
	box-shadow: none;
	filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.5));
}
/* As duas pessoas com a MESMA altura (a técnica é uma foto quadrada, a veterinária é vertical):
 * altura fixa e largura proporcional, sem esticar. */
.loja-banner--foto-recorte .loja-banner__media img {
	height: auto;
	width: auto;
	max-height: 350px;
	max-width: 100%;
	object-fit: contain;
}
.loja-banner--foto-recorte .loja-banner__media {
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

/* Padrão de fundo com imagem própria (escolhida no painel): a URL chega na variável --lb-padrao-url. */
.loja-banner--padrao-personalizado::before,
.loja-banner--padrao-personalizado::after {
	-webkit-mask-size: 360px 360px;
	mask-size: 360px 360px;
}
.loja-banner--padrao-personalizado::before {
	-webkit-mask-image: var(--lb-padrao-url);
	mask-image: var(--lb-padrao-url);
}
.loja-banner--padrao-personalizado::after {
	display: none !important;
}

/* Destaques em linha escritos no painel (check + texto), no lugar dos selos fixos. */
.loja-selos--custom .loja-selos__item {
	gap: 0.4rem;
}
.loja-selos--custom .loja-selos__icon {
	flex: none;
	color: var(--cc-purple, #6A00D9);
}

/* Foto GRANDE atrás do texto ("fundo"): a imagem sai do fluxo, ocupa a altura do slide, encosta
 * no lado da coluna dela (esquerda/direita) e o texto fica por cima, com um véu claro suave
 * pra manter a leitura. O círculo colorido de trás vira um brilho grande. */
.loja-banner.loja-banner--foto-fundo .loja-banner__media {
	position: absolute !important;
	inset: 0 0 0 auto !important;
	width: 52% !important;
	height: auto !important;
	grid-column: auto !important;
	align-self: stretch !important;
	margin: 0 !important;
	z-index: 0;
	display: block !important;
	pointer-events: none;
}
.loja-banner.loja-banner--foto-fundo .loja-banner__media--left {
	inset: 0 auto 0 0 !important;
}
.loja-banner.loja-banner--foto-fundo .loja-banner__media img {
	position: absolute;
	right: calc(-1 * var(--lb-foto-x, 2%));
	bottom: 0;
	height: var(--lb-foto-h, 90%) !important;
	max-height: none !important;
	width: auto !important;
	max-width: none !important;
	object-fit: contain;
	object-position: right bottom;
	margin: 0;
	filter: drop-shadow(0 18px 30px rgba(40, 10, 90, 0.3));
	animation: none !important;
	transform: none !important;
	opacity: 1 !important;
}
.loja-banner--foto-fundo .loja-banner__media--left img {
	right: auto;
	left: 0;
	object-position: left bottom;
}
.loja-banner--foto-fundo .loja-banner__media::before {
	width: 80%;
	right: 2%;
	left: auto;
	bottom: 6%;
	opacity: 0.85;
}
.loja-banner--foto-fundo .loja-banner__media::after {
	display: none;
}
.loja-banner--foto-fundo .loja-banner__inner {
	grid-template-columns: 1fr;
}
.loja-banner--foto-fundo .loja-banner__text {
	position: relative;
	z-index: 2;
}
/* Véu claro atrás do bloco de texto: a imagem aparece, mas o texto continua legível. */
.loja-banner--foto-fundo .loja-banner__text::before {
	content: "";
	position: absolute;
	inset: -2rem -3rem;
	z-index: -1;
	background: radial-gradient(closest-side, var(--loja-soft, #F3EEFD) 55%, transparent 100%);
	opacity: 0.88;
	pointer-events: none;
}
html[data-theme="dark"] .loja-banner--foto-fundo .loja-banner__media img {
	filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
}
@media (max-width: 959px) {
	.loja-banner--foto-fundo .loja-banner__media {
		display: block;
		width: 70%;
		opacity: 0.35;
	}
}
@media (max-width: 560px) {
	.loja-banner--foto-fundo .loja-banner__media {
		display: block;
		width: 100%;
		opacity: 0.22;
	}
}

/* Largura do bloco de texto (campo do painel). Com a foto grande atrás, o texto deixa de ficar
 * preso à coluna do meio da grade e ganha a largura do slide. */
.loja-banner .loja-banner__text {
	max-width: var(--lb-texto-w, 860px);
}
.loja-banner.loja-banner--foto-fundo .loja-banner__inner {
	display: flex !important;
	justify-content: center;
}
.loja-banner.loja-banner--foto-fundo .loja-banner__text {
	flex: 0 1 var(--lb-texto-w, 860px);
	width: 100%;
	max-width: var(--lb-texto-w, 860px);
	margin: 0 auto;
}
.loja-banner.loja-banner--foto-fundo .loja-banner__title {
	max-width: none;
}

/* Foto grande: ancorada no slide inteiro (não na caixa do conteúdo, que é menor e fica centralizada),
 * pra a imagem encostar na borda de baixo. */
.loja-banner.loja-banner--foto-fundo .loja-banner__inner {
	position: static !important;
	align-self: stretch;
	align-items: center;
}

/* ===== Celular: banner compacto, sem imagens de fundo/laterais ===== */
@media (max-width: 782px) {
	.loja-banner.loja-banner--foto-fundo .loja-banner__media,
	.loja-banner .loja-banner__media {
		display: none !important;
	}
	.loja-banner,
	.loja-banner.has-cards {
		min-height: 0;
	}
	.loja-banner__inner {
		padding: 1.6rem 1.1rem 3rem;
	}
	.loja-banner.loja-banner--foto-fundo .loja-banner__text::before {
		display: none;
	}
	.loja-banner .loja-banner__text {
		gap: 0;
	}
	.loja-banner .loja-banner__badge {
		margin-bottom: 0.7rem;
		font-size: 0.68rem;
		padding: 0.28rem 0.7rem;
	}
	.loja-banner.loja-banner .loja-banner__title {
		font-size: clamp(1.55rem, 7vw, 1.95rem);
		line-height: 1.1;
		margin-bottom: 0.55rem;
	}
	.loja-banner .loja-banner__highlight {
		font-size: clamp(1.9rem, 9vw, 2.6rem);
	}
	.loja-banner.loja-banner--claro .loja-banner__subtitle {
		font-size: 0.95rem;
		line-height: 1.5;
		margin-bottom: 1rem;
	}
	.loja-banner .loja-banner__cards {
		gap: 0.6rem;
		margin-bottom: 1rem;
	}
	.loja-banner .loja-banner__card {
		padding: 0.7rem 0.9rem;
	}
	.loja-banner .loja-banner__cta {
		padding: 0.75rem 1.5rem;
		font-size: 0.98rem;
	}
	.loja-banner .loja-banner__trust .loja-selos {
		margin-top: 0.9rem;
		gap: 0.4rem 0.9rem;
	}
	.loja-banner .loja-selos__item {
		font-size: 0.78rem;
	}
	.loja-banners__dots {
		bottom: 0.6rem;
	}
}
@media (max-width: 782px) {
	.loja-banners .loja-banner.loja-banner {
		min-height: 0 !important;
	}
	/* A largura do texto (px, campo do painel) vira altura quando o slide empilha: no celular o bloco é automático */
	.loja-banner.loja-banner--foto-fundo .loja-banner__inner {
		display: flex !important;
		flex-direction: column;
		align-items: center;
	}
	.loja-banner.loja-banner--foto-fundo .loja-banner__text,
	.loja-banner .loja-banner__text {
		flex: 0 0 auto !important;
		width: 100%;
		max-width: 100% !important;
		margin: 0 auto;
	}
}

/* ===== Celular: cartões de valor lado a lado, centralizados, com a barra de cor em cima ===== */
@media (max-width: 782px) {
	.loja-banners .loja-banner .loja-banner__cards {
		display: grid;
		grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr));
		grid-template-rows: none;
		gap: 0.6rem;
		width: 100%;
		max-width: 420px;
		margin: 0 auto 1rem;
		padding: 0;
	}
	.loja-banners .loja-banner .loja-banner__cards:has(> :nth-child(3)) {
		grid-template-columns: minmax(0, 1fr);
	}
	.loja-banners .loja-banner .loja-banner__card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		grid-row: auto;
		grid-template-columns: none;
		gap: 0.15rem;
		padding: 1rem 0.55rem 0.8rem;
		text-align: center;
		min-width: 0;
	}
	.loja-banners .loja-banner .loja-banner__card::before {
		inset: 0 0 auto 0;
		width: auto;
		height: 5px;
	}
	.loja-banners .loja-banner .loja-banner__card-title {
		grid-row: auto;
		grid-column: auto;
		font-size: 0.62rem;
		line-height: 1.25;
		letter-spacing: 0.04em;
		min-height: 2.5em;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.loja-banners .loja-banner .loja-banner__card-value,
	.loja-banners .loja-banner .loja-banner__cards:has(> :nth-child(3)) .loja-banner__card-value {
		grid-row: auto;
		grid-column: auto;
		margin: 0.1rem 0;
		font-size: 1.7rem;
		line-height: 1.1;
	}
	.loja-banners .loja-banner .loja-banner__card-caption {
		grid-row: auto;
		grid-column: auto;
		font-size: 0.72rem;
		line-height: 1.3;
	}
	/* 3 cartões: uma linha cada, título e valor lado a lado, como antes */
	.loja-banners .loja-banner .loja-banner__cards:has(> :nth-child(3)) .loja-banner__card {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
		padding: 0.8rem 1rem;
	}
	.loja-banners .loja-banner .loja-banner__cards:has(> :nth-child(3)) .loja-banner__card::before {
		inset: 0 auto 0 0;
		width: 5px;
		height: auto;
	}
}
@media (max-width: 782px) {
	.loja-banners .loja-banner .loja-banner__cards:not(:has(> :nth-child(3))) .loja-banner__card > * {
		width: 100%;
		text-align: center;
		justify-self: center;
	}
}

/* ===== Onde mostrar as fotos (campo do painel: computador, os dois ou só o celular) ===== */
@media (min-width: 783px) {
	.loja-banner.loja-banner--foto-em-celular .loja-banner__media {
		display: none !important;
	}
}
@media (max-width: 782px) {
	/* No celular a foto, quando liberada, é uma imagem pequena abaixo do texto: fora do fundo, sem véu. */
	.loja-banner.loja-banner--foto-em-ambos .loja-banner__media,
	.loja-banner.loja-banner--foto-em-celular .loja-banner__media {
		display: block !important;
		position: static !important;
		width: 100% !important;
		max-width: 320px;
		height: auto !important;
		margin: 0.9rem auto 0 !important;
		opacity: 1 !important;
		pointer-events: none;
	}
	.loja-banner.loja-banner--foto-em-ambos .loja-banner__media::before,
	.loja-banner.loja-banner--foto-em-ambos .loja-banner__media::after,
	.loja-banner.loja-banner--foto-em-celular .loja-banner__media::before,
	.loja-banner.loja-banner--foto-em-celular .loja-banner__media::after {
		display: none;
	}
	.loja-banner.loja-banner--foto-em-ambos .loja-banner__media img,
	.loja-banner.loja-banner--foto-em-celular .loja-banner__media img {
		position: static !important;
		display: block;
		width: auto !important;
		height: auto !important;
		max-width: 100% !important;
		max-height: 170px !important;
		margin: 0 auto;
		transform: none !important;
		animation: none !important;
	}
	/* a foto vai depois do texto, mesmo quando é a "da esquerda" */
	.loja-banner.loja-banner--foto-em-ambos .loja-banner__inner,
	.loja-banner.loja-banner--foto-em-celular .loja-banner__inner {
		display: flex !important;
		flex-direction: column;
	}
	.loja-banner.loja-banner--foto-em-ambos .loja-banner__media--left,
	.loja-banner.loja-banner--foto-em-celular .loja-banner__media--left {
		order: 2;
	}
}