/* =========================================================
   Criollo - Carrusel de Productos
   MÓVIL (< 768px): carrusel con scroll lateral aislado + peek.
   DESKTOP (>= 768px): grid normal de N columnas, sin carrusel.

   El slide (.criollo-carousel__item) ES el <li.product> nativo
   de WooCommerce, así que hereda todo el estilo del tema.
   ========================================================= */

.criollo-carousel {
	--cc-peek: 22%;     /* % del siguiente producto visible (solo móvil) */
	--cc-gap: 20px;
	--cc-cols: 4;       /* columnas en desktop */
	position: relative;
	margin-block: 1.5rem;
}

.criollo-carousel__heading {
	margin: 0 0 1rem;
}

.criollo-carousel__viewport {
	position: relative;
}

/* -------- PISTA -------- */
.criollo-carousel ul.criollo-carousel__track.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--cc-gap);
}
/* Anula los pseudo-elementos de clearfix que el tema pone en ul.products */
.criollo-carousel ul.criollo-carousel__track.products::before,
.criollo-carousel ul.criollo-carousel__track.products::after {
	content: none;
	display: none;
}
/* Oculta scrollbar */
.criollo-carousel__track {
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.criollo-carousel__track::-webkit-scrollbar {
	display: none;
}

/* -------- SLIDE (= li.product nativo) --------
   Anulamos el width en %, margin y float que el tema aplica
   a li.product en contexto de archivo. El ancho lo fija el media query. */
.criollo-carousel__track.products li.product.criollo-carousel__item,
.criollo-carousel__track.products .criollo-carousel__item {
	margin: 0 !important;
	padding: 0;
	float: none !important;
	clear: none !important;
	box-sizing: border-box;
}

/* =========================================================
   MÓVIL (< 768px): CARRUSEL
   ========================================================= */
@media (max-width: 767px) {
	.criollo-carousel ul.criollo-carousel__track.products {
		overflow-x: auto;
		overflow-y: hidden;

		/* Aísla el scroll: el gesto lateral NO mueve la página */
		overscroll-behavior-x: contain;
		touch-action: pan-x;
		-webkit-overflow-scrolling: touch;

		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scroll-padding-left: 0;
	}

	/* 1 producto completo + asomo del siguiente.
	   El primero arranca en el borde izquierdo: no se corta. */
	.criollo-carousel__track.products li.product.criollo-carousel__item,
	.criollo-carousel__track.products .criollo-carousel__item {
		flex: 0 0 auto;
		width: calc(100% - var(--cc-peek)) !important;
		scroll-snap-align: start;
	}
}

/* =========================================================
   DESKTOP (>= 768px): GRID NORMAL, SIN CARRUSEL
   ========================================================= */
@media (min-width: 768px) {
	.criollo-carousel ul.criollo-carousel__track.products {
		display: grid;
		grid-template-columns: repeat(var(--cc-cols), 1fr);
		overflow: visible;
		scroll-snap-type: none;
	}

	.criollo-carousel__track.products li.product.criollo-carousel__item,
	.criollo-carousel__track.products .criollo-carousel__item {
		width: auto !important;
	}
}

/* =========================================================
   BADGES (sistema criollo_badge)
   El badge .criollo-badges es position:absolute y se ancla al
   ancestro posicionado más cercano. Forzamos que ese ancestro
   sea el contenedor de la IMAGEN, no el <li> (que es flex-column
   y dejaría el badge descolocado bajo la foto).
   Alta especificidad + !important para ganar a la cascada y
   sobrevivir a reordenamientos de WP Rocket UCSS.
   ========================================================= */
.criollo-carousel .criollo-carousel__track li.product .wc-product-image,
.criollo-carousel .criollo-carousel__track li.product .inside-wc-product-image,
.criollo-carousel .criollo-carousel__track li.product .woocommerce-LoopProduct-link {
	position: relative !important;
	display: block;
}

/* El badge se ancla a .inside-wc-product-image (el relative más
   cercano dentro del enlace). Reafirmamos su posición por si el
   tema o UCSS alteran los offsets dentro del carrusel. */
.criollo-carousel .criollo-carousel__track .criollo-badges {
	position: absolute !important;
	z-index: 9;
}
.criollo-carousel .criollo-carousel__track .criollo-badges--top-left {
	top: 10px !important;
	left: 10px !important;
	right: auto !important;
	bottom: auto !important;
}
.criollo-carousel .criollo-carousel__track .criollo-badges--top-right {
	top: 10px !important;
	right: 10px !important;
	left: auto !important;
	bottom: auto !important;
}
.criollo-carousel .criollo-carousel__track .criollo-badges--bottom-left {
	bottom: 10px !important;
	left: 10px !important;
	right: auto !important;
	top: auto !important;
}
.criollo-carousel .criollo-carousel__track .criollo-badges--bottom-right {
	bottom: 10px !important;
	right: 10px !important;
	left: auto !important;
	top: auto !important;
}

/* Estado vacío (editor) */
.criollo-carousel-empty {
	padding: 1.25rem;
	border: 1px dashed #c9b8a8;
	border-radius: 6px;
	background: #faf6f0;
	color: #6b5544;
	font-size: 14px;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.criollo-carousel ul.criollo-carousel__track.products { scroll-behavior: auto; }
}