/*
 * Forja do Mago — Carrossel Compacto (páginas de produto)
 *
 * Carregado SOMENTE nas páginas de produto que exibem o carrossel compacto,
 * sempre depois de frontend.css (dependência declarada no PHP): reaproveita
 * cartões, setas, lightbox e tokens de cor, e redefine apenas dimensões e
 * o cabeçalho minimalista.
 *
 * Escala proporcional (painel "Tamanho no desktop/mobile"):
 *   --fcf-k é o fator (0,6 a 1,5). TODAS as medidas do componente derivam
 *   dele — altura e largura dos cartões, espaçamentos, raio, título, ícones
 *   e controles — então o componente cresce/encolhe como um conjunto e o
 *   espaço ocupado no fluxo da página é o espaço real (sem transform: scale).
 *
 * "Mobile" = área do carrossel com até 640px de largura (container query);
 * navegadores sem container queries usam a largura da tela (até 767px).
 */

.fcf-compact-wrap {
	display: block;
	clear: both; /* abaixo da galeria e do resumo, mesmo com floats do tema */
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	container-type: inline-size;
	container-name: fcfc;
}

.fcf-carousel.fcf-compact {
	--fcf-k: var(--fcf-scale-d, 1);
	--fcf-base-h: 184px;
	--fcf-card-h: calc(var(--fcf-base-h) * var(--fcf-k));
	--fcf-gap: calc(10px * var(--fcf-k));
	--fcf-card-radius: calc(11px * var(--fcf-k));
	--fcf-arrow: clamp(24px, calc(30px * var(--fcf-k)), 46px);
	--fcf-title-size: calc(15px * var(--fcf-k));

	margin: calc(18px * var(--fcf-k)) 0 calc(20px * var(--fcf-k));
	padding: calc(12px * var(--fcf-k)) calc(14px * var(--fcf-k)) calc(14px * var(--fcf-k));
	border-radius: calc(14px * var(--fcf-k));
	background:
		radial-gradient(80% 120% at 0% 0%, rgba(112, 40, 160, .2), transparent 60%),
		linear-gradient(180deg, var(--fcf-black-2) 0%, var(--fcf-black) 100%);
	border: 1px solid rgba(168, 85, 247, .14);
	box-shadow: 0 14px 30px -24px rgba(0, 0, 0, .85);
}

.fcf-carousel.fcf-compact::before {
	left: 6%;
	right: 6%;
	opacity: .7;
}

/* ---------- Cabeçalho em uma linha: título à esquerda, controles à direita ---------- */
.fcf-carousel.fcf-compact .fcf-cbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(10px * var(--fcf-k));
	min-height: var(--fcf-arrow);
	margin: 0 0 calc(10px * var(--fcf-k));
	padding: 0;
}

.fcf-carousel.fcf-compact .fcf-cbar__title {
	display: flex;
	align-items: center;
	gap: calc(7px * var(--fcf-k));
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fcf-text);
	font-family: inherit;
	font-size: var(--fcf-title-size);
	font-weight: 700;
	font-style: normal;
	line-height: 1.25;
	letter-spacing: .01em;
	text-transform: none;
	text-shadow: none;
}

.fcf-carousel.fcf-compact .fcf-cbar__title::before,
.fcf-carousel.fcf-compact .fcf-cbar__title::after {
	content: none;
}

.fcf-carousel.fcf-compact .fcf-cbar__title > span {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.fcf-carousel.fcf-compact .fcf-cbar__star {
	flex: 0 0 auto;
	width: calc(11px * var(--fcf-k));
	height: calc(11px * var(--fcf-k));
	color: var(--fcf-amber);
	filter: drop-shadow(0 0 4px rgba(240, 165, 43, .45));
}

.fcf-carousel.fcf-compact .fcf-cbar__controls {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: calc(6px * var(--fcf-k));
}

.fcf-carousel.fcf-compact .fcf-arrow {
	border-color: rgba(168, 85, 247, .32);
	box-shadow: inset 0 1px 0 rgba(245, 241, 250, .06);
}

.fcf-carousel.fcf-compact .fcf-arrow svg {
	width: 55%;
	height: 55%;
}

.fcf-carousel.fcf-compact .fcf-pause {
	width: calc(var(--fcf-arrow) * .8);
	height: calc(var(--fcf-arrow) * .8);
}

.fcf-carousel.fcf-compact .fcf-pause svg {
	width: 45%;
	height: 45%;
}

.fcf-carousel.fcf-compact.is-static .fcf-pause {
	display: none;
}

.fcf-carousel.fcf-compact:not(.is-ready) .fcf-pause {
	visibility: hidden;
}

/* ---------- Trilho e cartões com dimensões próprias ---------- */
.fcf-carousel.fcf-compact .fcf-track {
	margin: calc(-6px * var(--fcf-k)) 0;
	padding: calc(6px * var(--fcf-k)) 2px;
}

.fcf-carousel.fcf-compact .fcf-slide {
	flex: 0 0 auto;
	/* Largura derivada da altura e do formato do cartão (ex.: 4:5). */
	width: calc(var(--fcf-card-h) * var(--fcf-arw, 4) / var(--fcf-arh, 5));
}

.fcf-carousel.fcf-compact .fcf-card {
	box-shadow:
		0 8px 18px -14px rgba(0, 0, 0, .9),
		inset 0 1px 0 rgba(245, 241, 250, .05);
}

.fcf-carousel.fcf-compact .fcf-card__media {
	padding: 4%;
}

.fcf-carousel.fcf-compact.fcf-fit-cover .fcf-card__media {
	padding: 0;
}

.fcf-carousel.fcf-compact .fcf-card__zoom {
	right: calc(6px * var(--fcf-k));
	bottom: calc(6px * var(--fcf-k));
	width: calc(22px * var(--fcf-k));
	height: calc(22px * var(--fcf-k));
}

.fcf-carousel.fcf-compact .fcf-card__zoom svg {
	width: 60%;
	height: 60%;
}

@media (hover: hover) and (pointer: fine) {
	.fcf-carousel.fcf-compact .fcf-card:hover {
		transform: translateY(-2px);
		box-shadow:
			0 12px 22px -14px rgba(112, 40, 160, .8),
			0 0 0 1px rgba(240, 165, 43, .16),
			inset 0 1px 0 rgba(245, 241, 250, .08);
	}

	.fcf-carousel.fcf-compact .fcf-card:hover .fcf-card__img,
	.fcf-carousel.fcf-compact .fcf-card:hover img {
		transform: scale(1.03);
	}
}

/* ---------- Mobile: base menor e fator próprio ---------- */
@container fcfc (max-width: 640px) {
	.fcf-carousel.fcf-compact {
		--fcf-k: var(--fcf-scale-m, 1);
		--fcf-base-h: 136px;
		--fcf-gap: calc(8px * var(--fcf-k));
		--fcf-arrow: clamp(26px, calc(28px * var(--fcf-k)), 42px);
		--fcf-title-size: calc(13.5px * var(--fcf-k));
		margin: calc(12px * var(--fcf-k)) 0 calc(14px * var(--fcf-k));
		padding: calc(10px * var(--fcf-k)) calc(10px * var(--fcf-k)) calc(11px * var(--fcf-k));
		border-radius: calc(12px * var(--fcf-k));
	}

	.fcf-carousel.fcf-compact .fcf-cbar {
		margin-bottom: calc(8px * var(--fcf-k));
	}

	/* Em telas estreitas o título pode quebrar em até 2 linhas (sem reticências cedo demais). */
	.fcf-carousel.fcf-compact .fcf-cbar__title > span {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		white-space: normal;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 767px) {
		.fcf-carousel.fcf-compact {
			--fcf-k: var(--fcf-scale-m, 1);
			--fcf-base-h: 136px;
			--fcf-gap: calc(8px * var(--fcf-k));
			--fcf-arrow: clamp(26px, calc(28px * var(--fcf-k)), 42px);
			--fcf-title-size: calc(13.5px * var(--fcf-k));
			margin: calc(12px * var(--fcf-k)) 0 calc(14px * var(--fcf-k));
			padding: calc(10px * var(--fcf-k));
		}
	}
}