/**
 * Zenth Toolkit · Shop Featured Carousel
 *
 * Carrusel híbrido scroll-snap con cards editoriales sobre fondo negro.
 * Heading con tratamiento solid + outline (Super Brigade). Flechas inline
 * arriba derecha del header. Hereda tokens del child theme (--cr-*) con
 * fallbacks defensivos para funcionar standalone si el theme está ausente.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Tokens + root      → :root (--zfc-*) + .zenth-fc-root base
 *   §2  Full-bleed         → body.cr-shop-page escape del container Elementor
 *   §3  Header             → eyebrow + título solid/outline + view-all
 *   §4  Flechas            → prev (rojo) / next (outline) + estados
 *   §5  Stage + Track      → scroll-snap track + scrollbar
 *   §6  Card               → img, overlay, badges, contenido, precio
 *   §7  CTA                → "Agregar al carrito" (reveal al hover)
 *   §8  Responsive         → @media de tamaño + capacidad/a11y
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS usados acá:
 *   768 (min · tablet) · 1024 (min · desktop) — escalan gap + nº de cards
 *   767 (max · mobile) — ajuste de stroke del outline del título
 *   600 (max · mobile-small) — reflow del grid del header
 *
 *   Media de CAPACIDAD/A11Y (no son breakpoints de tamaño, subsección aparte
 *   al final de §8): hover/pointer (reveal del CTA) · prefers-reduced-motion.
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · TOKENS + ROOT
   ═══════════════════════════════════════════════════════════════════════ */

:root {
	--zfc-red: #E8001D;
	--zfc-red-dark: #B80017;
	/* Unificado con el bg del proyecto (theme global.css define --cr-color-black).
	   Fallback al mismo #000 si el theme no está cargado. */
	--zfc-black: var(--cr-color-black, #000);
	--zfc-white: #FFFFFF;
	--zfc-gray-200: #E4E4E7;
	--zfc-gray-300: #D4D4D8;
	--zfc-gray-400: #A1A1AA;
	--zfc-gray-500: #71717A;
	--zfc-gray-700: #3F3F46;
	--zfc-trans-fast: 200ms ease;
	--zfc-trans-mid: 280ms cubic-bezier(0.4, 0, 0.2, 1);
	--zfc-gap: 16px;
	--zfc-gap-tablet: 18px;
	--zfc-gap-desktop: 20px;
}

.zenth-fc-root {
	width: 100%;
	font-family: var(--cr-font-body, 'Montserrat', system-ui, sans-serif);
	color: var(--zfc-white);
	/* Fallbacks por si Elementor no inyecta vars inline */
	--zfc-cards-desktop: 4;
	--zfc-cards-tablet: 3;
	--zfc-cards-mobile: 1.2;
}


/* ═══════════════════════════════════════════════════════════════════════
   §2 · FULL-BLEED — dark mode en página /tienda/
   ───────────────────────────────────────────────────────────────────────
   El body tiene class .cr-shop-page (se añade desde el theme).
   Hacemos full-bleed escape del contenedor padre Elementor.
   ═══════════════════════════════════════════════════════════════════════ */

body.cr-shop-page .zenth-fc-root {
	background: var(--zfc-black);
	padding-block: clamp(48px, 7vw, 96px);
	/* Full-bleed escape: rompe el container max-width */
	margin-inline: calc(50% - 50vw);
	padding-inline: max(20px, calc(50vw - 720px));
}


/* ═══════════════════════════════════════════════════════════════════════
   §3 · HEADER — eyebrow + título grande + flechas + view-all
   ───────────────────────────────────────────────────────────────────────
   Grid de 2 columnas: contenido principal (col 1) y flechas (col 2,
   alineadas top-right).
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-fc-head {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"text arrows"
		"viewall arrows";
	gap: 20px 24px;
	align-items: end;
	margin-bottom: clamp(32px, 4vw, 56px);
}

.zenth-fc-head__text {
	grid-area: text;
	min-width: 0;
}

.zenth-fc-eyebrow {
	font-family: var(--cr-font-body, 'Montserrat', sans-serif);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--zfc-red);
	margin-bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* Pequeño dot rojo antes del eyebrow para mayor presencia editorial */
.zenth-fc-eyebrow::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	background: var(--zfc-red);
	border-radius: 50%;
	flex-shrink: 0;
}

/* TÍTULO HERO: solid + outline en líneas separadas.
   IMPORTANTE: Elementor inyecta su CSS de .elementor-heading-title con
   alta specificity. Necesitamos override defensivo con !important
   sobre el color para que el text-stroke funcione. */
.zenth-fc-root .zenth-fc-title {
	font-family: var(--cr-font-display, 'Bebas Neue', 'Anton', sans-serif);
	font-size: clamp(44px, 7.5vw, 96px);
	line-height: 0.92;
	letter-spacing: -0.01em;
	margin: 0;
	font-weight: 400;
	text-transform: uppercase;
}

.zenth-fc-root .zenth-fc-title__solid,
.zenth-fc-root .zenth-fc-title__outline {
	display: block;
}

.zenth-fc-root .zenth-fc-title__solid {
	color: var(--zfc-white) !important;
	-webkit-text-stroke: 0 !important;
	text-stroke: 0 !important;
}

/* Outline real con text-stroke. Defensas en cascada contra Elementor heading widget:
   1. Specificity máxima con html body.cr-shop-page como ancestor
   2. !important en color, text-fill-color, y stroke
   3. background-clip: text como respaldo si stroke no funciona en alguna fuente */
html body.cr-shop-page .zenth-fc-root .zenth-fc-title__outline,
html .zenth-fc-root .zenth-fc-title__outline {
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	-webkit-text-stroke: var(--cr-outline-width, 1.5px) var(--zfc-white) !important;
	text-stroke: var(--cr-outline-width, 1.5px) var(--zfc-white) !important;
	background: none !important;
}

/* "Ver toda la tienda" — debajo del título */
.zenth-fc-viewall {
	grid-area: viewall;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	font-family: var(--cr-font-body, 'Montserrat', sans-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--zfc-white);
	text-decoration: none;
	border-bottom: 1.5px solid var(--zfc-white);
	width: fit-content;
	transition: color var(--zfc-trans-fast), border-color var(--zfc-trans-fast), gap var(--zfc-trans-fast);
}

.zenth-fc-viewall:hover {
	color: var(--zfc-red);
	border-color: var(--zfc-red);
	gap: 14px;
}

.zenth-fc-viewall svg {
	flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   §4 · FLECHAS — botones idénticos al mockup CR
   ───────────────────────────────────────────────────────────────────────
   PREV: outline blanco crisp, fondo transparente
   NEXT: fill rojo sólido CR
   Ambas siempre visibles, sin estado disabled visual.
   ORDEN VISUAL: NEXT (rojo lleno) PRIMERO, PREV (outline) SEGUNDO.
   Orden visual: PREV (rojo sólido) | NEXT (outline blanco).
   HTML mantiene <prev><next> (semánticamente correcto), CSS muestra
   en orden natural — PREV primero, NEXT segundo.
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-fc-head__arrows {
	grid-area: arrows;
	display: flex;
	flex-direction: row;
	gap: 12px;
	align-self: end;
}

.zenth-fc-arrow {
	width: 50px;
	height: 50px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	background: transparent;
	border: 1.5px solid var(--zfc-white);
	color: var(--zfc-white);
	transition: background var(--zfc-trans-fast),
	            color var(--zfc-trans-fast),
	            border-color var(--zfc-trans-fast),
	            transform var(--zfc-trans-fast);
}

/* PREV: fill rojo CR permanente */
.zenth-fc-arrow--prev {
	background: var(--cr-color-primary, var(--zfc-red));
	border-color: var(--cr-color-primary, var(--zfc-red));
	color: var(--zfc-white);
}

/* NEXT: outline blanco crisp permanente */
.zenth-fc-arrow--next {
	background: transparent;
	border-color: var(--zfc-white);
	color: var(--zfc-white);
}

/* Hover */
.zenth-fc-arrow:hover,
.zenth-fc-arrow:focus-visible {
	transform: scale(1.05);
	outline: none;
}

.zenth-fc-arrow--prev:hover,
.zenth-fc-arrow--prev:focus-visible {
	background: var(--cr-color-primary-hover, var(--zfc-red-dark));
	border-color: var(--cr-color-primary-hover, var(--zfc-red-dark));
}

.zenth-fc-arrow--next:hover,
.zenth-fc-arrow--next:focus-visible {
	background: var(--cr-color-primary, var(--zfc-red));
	border-color: var(--cr-color-primary, var(--zfc-red));
}

/* Chevrons más grandes y prominentes (matching mockup CR) */
.zenth-fc-arrow svg {
	width: 22px;
	height: 22px;
	stroke-width: 2.5;
}

/* Override defensivo del JS: el JS pone hidden=true al inicio/final.
   Lo neutralizamos para que ambas estén siempre visibles, como en target.
   Mantienen su estilo natural — sin estado disabled visual. */
.zenth-fc-arrow[hidden],
.zenth-fc-arrow:disabled {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1;
	pointer-events: auto;
	cursor: pointer;
	transform: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   §5 · STAGE + TRACK
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-fc-stage {
	position: relative;
}

.zenth-fc-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - (var(--zfc-cards-mobile) - 1) * var(--zfc-gap)) / var(--zfc-cards-mobile)
	);
	gap: var(--zfc-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}

.zenth-fc-track > * {
	scroll-snap-align: start;
}

/* Scrollbar minimalista (mobile/tablet) */
.zenth-fc-track::-webkit-scrollbar {
	height: 4px;
}
.zenth-fc-track::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.06);
}
.zenth-fc-track::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════
   §6 · CARD
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-fc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #0f0f0f;
	isolation: isolate;
}

.zenth-fc-card__link {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 1;
	color: inherit;
	text-decoration: none;
}

.zenth-fc-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.zenth-fc-card:hover .zenth-fc-card__img {
	transform: scale(1.06);
}

.zenth-fc-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.82) 0%,
		rgba(0, 0, 0, 0.35) 38%,
		rgba(0, 0, 0, 0.0) 62%
	);
	pointer-events: none;
}

/* Badge top-left */
.zenth-fc-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	background: var(--cr-color-primary, var(--zfc-red));
	color: var(--zfc-white);
	font-family: var(--cr-font-body, 'Montserrat', sans-serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 5px 11px;
	z-index: 3;
	pointer-events: none;
}

.zenth-fc-badge--sale {
	background: #16A34A;
}

.zenth-fc-badge--out {
	background: var(--zfc-gray-700);
}

/* Card content bottom */
.zenth-fc-card__content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 18px;
	color: var(--zfc-white);
	z-index: 3;
	pointer-events: none;
}

.zenth-fc-card__content > * {
	pointer-events: auto;
}

.zenth-fc-card__cat {
	font-family: var(--cr-font-body, 'Montserrat', sans-serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cr-color-primary, var(--zfc-red));
	margin-bottom: 6px;
}

html body .zenth-fc-card .zenth-fc-card__name {
	font-family: var(--cr-font-body, 'Montserrat', system-ui, sans-serif) !important;
	font-size: 19px;
	letter-spacing: -0.005em;
	line-height: 1.2;
	margin: 0 0 12px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: 600 !important;
	text-transform: none !important;
}

html body .zenth-fc-card .zenth-fc-card__name a {
	color: inherit;
	text-decoration: none;
	font-family: inherit !important;
	text-transform: none !important;
}

.zenth-fc-card__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.zenth-fc-card__price {
	font-family: var(--cr-font-body, 'Montserrat', sans-serif);
	font-size: 17px;
	font-weight: 700;
	color: var(--zfc-white);
	letter-spacing: 0.01em;
	line-height: 1.2;
	flex-shrink: 0;
}

.zenth-fc-card__price--empty {
	display: none;
}

.zenth-fc-card__bottom:has(.zenth-fc-card__price--empty) {
	justify-content: flex-end;
}

.zenth-fc-card__price * {
	color: inherit !important;
}

.zenth-fc-card__price del {
	opacity: 0.55;
	margin-right: 6px;
}

.zenth-fc-card__price ins {
	text-decoration: none;
	font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════════════
   §7 · CTA — rojo permanente, label largo "Agregar al carrito"
   ───────────────────────────────────────────────────────────────────────
   Por default oculto; aparece al hover sobre la card (regla en §8, bloque
   hover/pointer). En touch devices (sin hover real) se ve siempre.
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-fc-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 14px;
	background: var(--cr-color-primary, var(--zfc-red));
	color: var(--zfc-white);
	border: none;
	font-family: var(--cr-font-body, 'Montserrat', sans-serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--zfc-trans-fast),
	            transform var(--zfc-trans-mid),
	            opacity var(--zfc-trans-mid);
	white-space: nowrap;
	flex-shrink: 0;
}

.zenth-fc-card__cta:hover,
.zenth-fc-card__cta:focus-visible {
	background: var(--cr-color-primary-hover, var(--zfc-red-dark));
	color: var(--zfc-white);
	outline: none;
}

.zenth-fc-card__cta--loading {
	opacity: 0.6 !important;
	pointer-events: none !important;
}

.zenth-fc-card__cta--added {
	background: #16A34A !important;
	color: var(--zfc-white) !important;
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
}

.zenth-fc-card__cta svg {
	flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   §8 · RESPONSIVE
   ───────────────────────────────────────────────────────────────────────
   Tiers de TAMAÑO (la base de §1–§7 es mobile-first):
     min-width 768 (tablet) → min-width 1024 (desktop) suben gap + nº cards;
     el par min-width va de menor a mayor para que desktop pise tablet.
     max-width 767 (mobile) ajusta el stroke del outline del título;
     max-width 600 (mobile-small) reflowa el grid del header.
   Las reglas base correspondientes están todas ANTES (§1–§7), así el
   cascade es correcto.

   Al final, subsección de CAPACIDAD/A11Y (hover/pointer + prefers-
   reduced-motion): NO son breakpoints de tamaño y NO se consolidan con los
   de arriba.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── TABLET · min-width: 768px ──────────────────── */
@media (min-width: 768px) {
	:root {
		--zfc-gap: var(--zfc-gap-tablet);
	}
	/* §5 · Track: 3 cards por viewport */
	.zenth-fc-track {
		grid-auto-columns: calc(
			(100% - (var(--zfc-cards-tablet) - 1) * var(--zfc-gap)) / var(--zfc-cards-tablet)
		);
	}
	/* §6 · Card: nombre y padding del contenido un poco mayores */
	.zenth-fc-card__name {
		font-size: 20px;
	}
	.zenth-fc-card__content {
		padding: 20px;
	}
}

/* ───────────────────────── DESKTOP · min-width: 1024px ────────────────── */
@media (min-width: 1024px) {
	:root {
		--zfc-gap: var(--zfc-gap-desktop);
	}
	/* §5 · Track: 4 cards por viewport + sin scrollbar visible */
	.zenth-fc-track {
		grid-auto-columns: calc(
			(100% - (var(--zfc-cards-desktop) - 1) * var(--zfc-gap)) / var(--zfc-cards-desktop)
		);
		scrollbar-width: none;
	}
	.zenth-fc-track::-webkit-scrollbar {
		display: none;
	}
	/* §6 · Card: nombre y padding del contenido máximos */
	.zenth-fc-card__name {
		font-size: 22px;
		margin-bottom: 14px;
	}
	.zenth-fc-card__content {
		padding: 22px;
	}
}

/* ───────────────────────── MOBILE · max-width: 767px ──────────────────── */
@media (max-width: 767px) {
	/* §3 · En pantallas más pequeñas, ajustamos el stroke del outline */
	html body.cr-shop-page .zenth-fc-root .zenth-fc-title__outline,
	html .zenth-fc-root .zenth-fc-title__outline {
		-webkit-text-stroke-width: var(--cr-outline-width, 1.5px) !important;
		text-stroke-width: var(--cr-outline-width, 1.5px) !important;
	}
}

/* ─────────────────────── MOBILE-SMALL · max-width: 600px ──────────────── */
@media (max-width: 600px) {
	/* §3 · Ajustes para que el grid del header no se rompa */
	.zenth-fc-head {
		grid-template-columns: 1fr;
		grid-template-areas:
			"text"
			"arrows"
			"viewall";
		gap: 18px;
	}
	.zenth-fc-head__arrows {
		justify-content: flex-start;
	}
	/* §4 · Flechas un poco más chicas */
	.zenth-fc-arrow {
		width: 48px;
		height: 48px;
	}
}


/* ── §8.1 · CAPACIDAD / A11Y (sin breakpoint de tamaño) ────────────────── */

/* §7 · Hover REAL (no touch): ocultar CTA por default, revelar al hover en
   card. Accesible para teclado vía :focus-within del card. */
@media (hover: hover) and (pointer: fine) {
	.zenth-fc-card__cta {
		opacity: 0;
		transform: translateY(8px);
		pointer-events: none;
	}

	.zenth-fc-card:hover .zenth-fc-card__cta,
	.zenth-fc-card:focus-within .zenth-fc-card__cta {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
}

/* §6/§7 · prefers-reduced-motion: anular transiciones y el zoom de la card */
@media (prefers-reduced-motion: reduce) {
	.zenth-fc-card__img,
	.zenth-fc-card__cta,
	.zenth-fc-arrow,
	.zenth-fc-viewall {
		transition: none !important;
	}
	.zenth-fc-card:hover .zenth-fc-card__img {
		transform: none !important;
	}
	.zenth-fc-track {
		scroll-behavior: auto;
	}
}