/* =========================================================
   CNLS WOOCOMMERCE PRODUCT SHOWCASE
   VERSION 2.24.0
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

	--cnls-bg: transparent;

	--cnls-title: #F4E9C7;

	--cnls-gold: #E0A91F;

	/* Líneas divisorias verticales y horizontales en dorado. */
	--cnls-divider: rgba(224, 169, 31, 0.35);

	/*
	 * Tinta oscura para el texto de las etiquetas
	 * (OFERTA / AGOTADO), que va sobre la estrella dorada
	 * o gris. Antes se usaba --cnls-bg, ahora transparente.
	 */
	--cnls-ink: #060C1B;

	--cnls-border: #E0A91F;

	/*
	 * Gris neutro para productos agotados (stock = 0).
	 * Reemplaza al dorado en precio, botón y cuotas,
	 * manteniendo exactamente el mismo layout.
	 */
	--cnls-gray: #8C8C8C;

	/*
	 * Rojo para la etiqueta "NUEVO" (productos publicados
	 * en los últimos 30 días).
	 */
	--cnls-red: #C0261F;

}


/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */

.cnls-showcase {

	--cnls-columns: 2;

	position: relative;

	width: 100%;

	max-width: 1500px;

	margin: 0 auto;

	padding: 30px 35px 20px;

	background: var(--cnls-bg);

	color: var(--cnls-title);

	box-sizing: border-box;

	contain: layout style;

}


/* =========================================================
   RESET
   ========================================================= */

.cnls-showcase *,
.cnls-showcase *::before,
.cnls-showcase *::after {

	box-sizing: border-box;

}


/* =========================================================
   SVG SPRITE
   ========================================================= */

.cnls-showcase-svg-sprite {

	position: absolute !important;

	width: 0 !important;

	height: 0 !important;

	overflow: hidden !important;

	pointer-events: none !important;

}


/* =========================================================
   GRID
   ========================================================= */

.cnls-showcase-grid {

	display: grid;

	grid-template-columns:
		repeat(
			var(--cnls-columns),
			minmax(0, 1fr)
		);

	width: 100%;

}


/* =========================================================
   PRODUCTO
   ========================================================= */

.cnls-showcase-product {

	position: relative;

	min-width: 0;

	padding:
		0
		clamp(
			10px,
			2vw,
			40px
		);

	background: transparent !important;

	border: 0 !important;

	border-radius: 0 !important;

	box-shadow: none !important;

	text-align: center;

	container-type: inline-size;

}


/* =========================================================
   DIVISORES LATERALES
   ========================================================= */

/*
 * Todas las verticales son iguales (--cnls-divider, 1px):
 *
 * - .cnls-showcase-grid::before → borde exterior izquierdo,
 *   a la izquierda de la primera tarjeta.
 * - .cnls-showcase-grid::after  → borde exterior derecho, a la
 *   derecha de la última tarjeta. Mismo aspecto que ::before.
 * - .cnls-showcase-product::after → divisoria interna a la
 *   derecha de cada producto; se oculta en el último de cada
 *   fila para no duplicar el borde exterior derecho.
 */
.cnls-showcase-grid {

	position: relative;

}


.cnls-showcase-grid::before,
.cnls-showcase-grid::after {

	content: "";

	position: absolute;

	top: 0;

	width: 1px;

	height: 100%;

	background: var(--cnls-divider);

	pointer-events: none;

}


.cnls-showcase-grid::before {

	left: 0;

}


.cnls-showcase-grid::after {

	right: 0;

}


.cnls-showcase-product::after {

	content: "";

	position: absolute;

	top: 0;

	right: 0;

	width: 1px;

	height: 100%;

	background: var(--cnls-divider);

	pointer-events: none;

}


/*
 * El último producto de cada fila no lleva divisoria a la
 * derecha: así no queda un borde exterior derecho en el
 * showcase. Se cubre el último producto y el final de cada
 * fila para las distintas cantidades de columnas (2, 3, 4).
 */
.cnls-showcase-grid
.cnls-showcase-product:last-child::after {

	display: none !important;

	content: none !important;

}

.cnls-showcase[data-columns="2"]
.cnls-showcase-product:nth-child(2n)::after {

	display: none !important;

	content: none !important;

}

.cnls-showcase[data-columns="3"]
.cnls-showcase-product:nth-child(3n)::after {

	display: none !important;

	content: none !important;

}

.cnls-showcase[data-columns="4"]
.cnls-showcase-product:nth-child(4n)::after {

	display: none !important;

	content: none !important;

}


/* =========================================================
   LINK DE IMAGEN
   ========================================================= */

.cnls-showcase-image-link {

	display: block;

	border: 0 !important;

	outline: none !important;

	text-decoration: none !important;

	background: transparent !important;

	box-shadow: none !important;

}


/* =========================================================
   CONTENEDOR DE IMAGEN
   ========================================================= */

.cnls-showcase-image-wrap {

	position: relative;

	display: flex;

	align-items: center;

	justify-content: center;

	width: 100%;

	height:
		clamp(
			310px,
			31vw,
			430px
		);

	padding: 0 5%;

	overflow: visible;

}


/* =========================================================
   IMAGEN DEL PRODUCTO
   ========================================================= */

.cnls-showcase-product-image {

	position: relative;

	z-index: 1;

	display: block !important;

	width: auto !important;

	height: auto !important;

	max-width:
		min(
			100%,
			360px
		) !important;

	max-height: 100% !important;

	margin: 0 auto !important;

	object-fit: contain;

	object-position: center center;

	filter: none !important;

	transform: scale(1);

	transition:
		transform 350ms ease,
		filter 350ms ease !important;

	will-change: transform;

}


/* =========================================================
   HOVER IMAGEN
   ========================================================= */

.cnls-showcase-product:hover
.cnls-showcase-product-image {

	transform: scale(1.025);

	filter:
		drop-shadow(
			0 0 14px
			rgba(
				224,
				169,
				31,
				0.18
			)
		) !important;

}


/* =========================================================
   FOCUS IMAGEN
   ========================================================= */

.cnls-showcase-product:focus-within
.cnls-showcase-product-image {

	transform: scale(1.025);

	filter:
		drop-shadow(
			0 0 14px
			rgba(
				224,
				169,
				31,
				0.18
			)
		) !important;

}


/* =========================================================
   BADGE STARBURST (OFERTA / AGOTADO)
   ========================================================= */

/*
 * Etiqueta en forma de estrella dentada (starburst),
 * renderizada en SVG. Se superpone al ornamento árabe
 * de las esquinas (z-index 6) gracias a su z-index más
 * alto.
 */

.cnls-showcase-image-wrap
.cnls-showcase-badge {

	position: absolute;

	top: 8px;

	left: 8px;

	z-index: 10;

	width: 100px;

	height: 100px;

	pointer-events: none;

}


.cnls-showcase-badge-svg {

	display: block;

	width: 100%;

	height: 100%;

	overflow: visible;

}


/* =========================================================
   FORMA DE LA ESTRELLA
   ========================================================= */

.cnls-showcase-badge-onsale
.cnls-showcase-badge-shape {

	fill: var(--cnls-gold);

	stroke: var(--cnls-title);

	stroke-width: 1;

}


.cnls-showcase-badge-outofstock
.cnls-showcase-badge-shape {

	fill: var(--cnls-gray);

	stroke: var(--cnls-title);

	stroke-width: 1;

}


.cnls-showcase-badge-new
.cnls-showcase-badge-shape {

	fill: var(--cnls-red);

	stroke: var(--cnls-title);

	stroke-width: 1;

}


/* =========================================================
   PATRÓN ÁRABE TESELADO
   =========================================================

   El <pattern> del SVG usa stroke="currentColor"; aquí se
   define ese color y la opacidad según la variante. El
   patrón se recorta al contorno de la estrella mediante
   clipPath (ver PHP).
*/

.cnls-showcase-badge-pattern {

	color: var(--cnls-ink);

	opacity: 0.22;

}


.cnls-showcase-badge-outofstock
.cnls-showcase-badge-pattern {

	color: var(--cnls-title);

	opacity: 0.28;

}


.cnls-showcase-badge-new
.cnls-showcase-badge-pattern {

	color: var(--cnls-title);

	opacity: 0.22;

}


/* =========================================================
   ANILLO INTERIOR FESTONEADO
   ========================================================= */

.cnls-showcase-badge-ring {

	fill: none;

	stroke: var(--cnls-ink);

	stroke-width: 1.4;

	stroke-dasharray: 1 4.4;

	stroke-linecap: round;

	opacity: 0.55;

}


.cnls-showcase-badge-ring--inner {

	stroke-width: 0.9;

	stroke-dasharray: none;

	opacity: 0.4;

}


.cnls-showcase-badge-outofstock
.cnls-showcase-badge-ring {

	stroke: var(--cnls-title);

}


.cnls-showcase-badge-new
.cnls-showcase-badge-ring {

	stroke: var(--cnls-title);

}


/* =========================================================
   TEXTO DE LA ESTRELLA
   ========================================================= */

.cnls-showcase-badge-text {

	font-family:
		"Manrope",
		sans-serif;

	font-weight: 700;

	/*
	 * El SVG (viewBox 120) escala con el contenedor, por lo
	 * que el texto es responsivo por sí mismo. Los breakpoints
	 * de más abajo solo afinan tamaños en pantallas chicas.
	 */
	font-size: 15px;

	letter-spacing: 0.02em;

	text-transform: uppercase;

	fill: var(--cnls-ink);

	/*
	 * Halo del mismo tono que la estrella para separar el
	 * texto del patrón árabe que queda por detrás.
	 */
	paint-order: stroke;

	stroke: var(--cnls-gold);

	stroke-width: 3;

	stroke-linejoin: round;

}


.cnls-showcase-badge-outofstock
.cnls-showcase-badge-text {

	fill: var(--cnls-title);

	stroke: var(--cnls-gray);

}


.cnls-showcase-badge-new
.cnls-showcase-badge-text {

	fill: var(--cnls-title);

	stroke: var(--cnls-red);

}


/* =========================================================
   ORNAMENTO ÁRABE
   ========================================================= */

.cnls-product-ornament {

	position: absolute;

	inset: 0;

	z-index: 6;

	width: 100%;

	height: 100%;

	pointer-events: none;

	overflow: visible;

}


/* =========================================================
   ESQUINAS DEL ORNAMENTO
   ========================================================= */

.cnls-ornament-corner {

	position: absolute;

	display: block;

	width: 110px;

	height: 110px;

	pointer-events: none;

	overflow: visible;

	opacity: 0.88;

	transform-origin: center center;

	transition:
		opacity 450ms ease,
		filter 450ms ease;

}


/* =========================================================
   SVG DENTRO DE LAS ESQUINAS
   ========================================================= */

.cnls-ornament-corner use {

	pointer-events: none;

}


/* =========================================================
   ESQUINA SUPERIOR IZQUIERDA
   ========================================================= */

.cnls-ornament-tl {

	top: 0;

	left: 0;

}


/* =========================================================
   ESQUINA SUPERIOR DERECHA
   ========================================================= */

.cnls-ornament-tr {

	top: 0;

	right: 0;

	transform: scaleX(-1);

}


/* =========================================================
   ESQUINA INFERIOR IZQUIERDA
   ========================================================= */

.cnls-ornament-bl {

	bottom: 0;

	left: 0;

	transform: scaleY(-1);

}


/* =========================================================
   ESQUINA INFERIOR DERECHA
   ========================================================= */

.cnls-ornament-br {

	bottom: 0;

	right: 0;

	transform: scale(-1, -1);

}


/* =========================================================
   HOVER ORNAMENTO
   ========================================================= */

.cnls-showcase-product:hover
.cnls-ornament-corner {

	opacity: 1;

	filter:
		drop-shadow(
			0 0 8px
			rgba(
				224,
				169,
				31,
				0.18
			)
		);

}


/* =========================================================
   TÍTULO
   ========================================================= */

.cnls-showcase-title {

	margin:
		27px 0 22px !important;

	padding: 0 !important;

	font-family:
		"Manrope",
		sans-serif !important;

	font-size:
		clamp(
			20px,
			6cqw,
			30px
		) !important;

	font-weight: 500 !important;

	line-height: 1.05 !important;

	letter-spacing: 0.015em !important;

	text-align: center !important;

	text-transform: uppercase;

	color: var(--cnls-title) !important;

}


/* =========================================================
   LINK DEL TÍTULO
   ========================================================= */

.cnls-showcase-title a,
.cnls-showcase-title a:hover,
.cnls-showcase-title a:focus,
.cnls-showcase-title a:visited {

	color: var(--cnls-title) !important;

	text-decoration: none !important;

	background: transparent !important;

	box-shadow: none !important;

	text-shadow: none !important;

}


/* =========================================================
   TRANSICIÓN DEL TÍTULO
   ========================================================= */

.cnls-showcase-title a {

	transition:
		color 220ms ease !important;

}


/* =========================================================
   HOVER DEL TÍTULO
   ========================================================= */

.cnls-showcase-product:hover
.cnls-showcase-title a {

	color: var(--cnls-gold) !important;

}


/* =========================================================
   MARCA
   ========================================================= */

.cnls-showcase-brand {

	display: block;

	width: 100%;

	margin: 0 0 30px;

	padding: 0;

	font-family:
		"Manrope",
		sans-serif !important;

	font-size: 11px !important;

	font-weight: 500 !important;

	line-height: 1.3 !important;

	letter-spacing: 0.16em !important;

	text-align: center !important;

	text-transform: uppercase;

	color:
		rgba(
			244,
			233,
			199,
			0.55
		) !important;

	background: transparent;

	border: 0;

	box-shadow: none;

}


/* =========================================================
   PRECIO + BOTÓN
   ========================================================= */

.cnls-showcase-bottom {

	display: flex;

	align-items: center;

	justify-content: center;

	flex-wrap: wrap;

	gap:
		clamp(
			15px,
			2vw,
			35px
		);

	width: 100%;

	margin: 0 auto;

	padding: 0 0 20px;

}


/* =========================================================
   PRECIO
   ========================================================= */

.cnls-showcase-price {

	flex: 0 0 auto;

	font-family:
		"Manrope",
		sans-serif !important;

	font-size: 20px !important;

	font-weight: 500 !important;

	line-height: 1.2 !important;

	letter-spacing: -0.02em;

	color: var(--cnls-gold) !important;

	white-space: nowrap;

}


/* =========================================================
   PRECIO ANTERIOR
   ========================================================= */

.cnls-showcase-price del {

	opacity: 0.65;

	margin-right: 6px;

}


/* =========================================================
   PRECIO ACTUAL
   ========================================================= */

.cnls-showcase-price ins {

	text-decoration: none;

}


/* =========================================================
   BOTÓN
   ========================================================= */

.cnls-showcase-button {

	display: inline-flex !important;

	align-items: center;

	justify-content: center;

	flex: 0 1 auto;

	min-height: 50px;

	padding:
		0
		clamp(
			12px,
			1.2vw,
			17px
		) !important;

	border:
		1px
		solid
		var(--cnls-border) !important;

	border-radius: 0 !important;

	background: transparent !important;

	color: var(--cnls-gold) !important;

	font-family:
		"Manrope",
		sans-serif !important;

	font-size: 13px !important;

	font-weight: 600 !important;

	line-height: 1 !important;

	letter-spacing: 0.5px !important;

	text-transform: uppercase;

	text-decoration: none !important;

	box-shadow: none !important;

	white-space: nowrap;

	transition:
		color 220ms ease,
		border-color 220ms ease,
		box-shadow 220ms ease !important;

}


/* =========================================================
   HOVER BOTÓN POR PRODUCTO
   ========================================================= */

.cnls-showcase-product:hover
.cnls-showcase-button {

	border-color:
		var(--cnls-gold) !important;

	color:
		var(--cnls-gold) !important;

	box-shadow:
		0 0 12px
		rgba(
			224,
			169,
			31,
			0.12
		) !important;

}


/* =========================================================
   HOVER / FOCUS DIRECTO
   ========================================================= */

.cnls-showcase-button:hover,
.cnls-showcase-button:focus-visible {

	background: transparent !important;

	border:
		2px
		solid
		#F4E9C7 !important;

	color: #F4E9C7 !important;

	box-shadow: none !important;

	transform: none !important;

}


/* =========================================================
   LOADING
   ========================================================= */

.cnls-showcase-button.loading {

	opacity: 0.65;

	pointer-events: none;

}


/* =========================================================
   AÑADIDO
   ========================================================= */

.cnls-showcase-button.added {

	color: var(--cnls-gold) !important;

	border-color: var(--cnls-gold) !important;

}


/* =========================================================
   PRODUCTO AGOTADO (STOCK = 0)
   ========================================================= */

/*
 * Mantiene exactamente el mismo layout de precio, botón
 * y cuotas, sólo reemplazando el color dorado por gris.
 *
 * El botón deja de ser un ajax_add_to_cart (ver PHP) y
 * pasa a enlazar a la página del producto, sin permitir
 * la compra directa desde el showcase.
 */

.cnls-showcase-product--outofstock
.cnls-showcase-price,

.cnls-showcase-product--outofstock
.cnls-showcase-price
.amount {

	color: var(--cnls-gray) !important;

}


.cnls-showcase-product--outofstock
.cnls-showcase-button {

	border-color: var(--cnls-gray) !important;

	color: var(--cnls-gray) !important;

}


.cnls-showcase-product--outofstock:hover
.cnls-showcase-button,

.cnls-showcase-product--outofstock
.cnls-showcase-button:hover,

.cnls-showcase-product--outofstock
.cnls-showcase-button:focus-visible {

	border-color: var(--cnls-gray) !important;

	color: var(--cnls-gray) !important;

	box-shadow: none !important;

	transform: none !important;

}


.cnls-showcase-product--outofstock:hover
.cnls-showcase-title a {

	color: var(--cnls-title) !important;

}


.cnls-showcase-product--outofstock:hover
.cnls-showcase-product-image {

	filter: none !important;

}


.cnls-showcase-product--outofstock:hover
.cnls-ornament-corner {

	filter: none;

}


/* =========================================================
   OCULTAR "VER CARRITO"
   ========================================================= */

.cnls-showcase .added_to_cart.wc-forward,
.cnls-showcase a.wc-forward,
.cnls-showcase .added_to_cart {

	display: none !important;

}


.woocommerce-message .wc-forward,
.woocommerce-info .wc-forward,
.woocommerce-notice .wc-forward {

	display: none !important;

}


/* =========================================================
   MENSAJE
   ========================================================= */

.cnls-showcase-message {

	padding: 30px;

	background: var(--cnls-bg);

	color: var(--cnls-title);

	font-family:
		"IBM Plex Mono",
		monospace;

	text-align: center;

}


/* =========================================================
   EVITAR CARDS NATIVAS DE WOOCOMMERCE
   ========================================================= */

.cnls-showcase .product,
.cnls-showcase ul.products,
.cnls-showcase li.product {

	background: transparent !important;

	border: none !important;

	box-shadow: none !important;

}


/* =========================================================
   CUOTAS
   ========================================================= */

/*
 * Orden visual:
 *
 * PRECIO + BOTÓN
 *        ↓
 * 3 CUOTAS DE $XX
 *        ↓
 * DIVISOR
 *
 */

.cnls-showcase-installments {

	display: flex;

	align-items: center;

	justify-content: center;

	gap: 5px;

	width: 100%;

	margin-top: 2px;

	margin-bottom: 2px;

	padding:
		12px
		12px
		25px;

	border-top: 0;

	border-right: 0;

	border-left: 0;

	border-bottom:
		1px
		solid
		var(--cnls-divider);

	font-family:
		"Manrope",
		sans-serif !important;

	font-size: 15px !important;

	font-weight: 500 !important;

	line-height: 1.2;

	letter-spacing: -0.01em;

	color: var(--cnls-title) !important;

	text-align: center;

}


/* =========================================================
   PLACEHOLDER (PRODUCTO AGOTADO / SIN CUOTAS)
   =========================================================

   Mismo box-model que .cnls-showcase-installments para que la
   línea horizontal inferior quede exactamente a la misma
   altura, pero sin contenido visible.
*/

.cnls-showcase-installments--placeholder {

	color: transparent !important;

	user-select: none;

}


/* =========================================================
   TEXTO "3 CUOTAS DE"
   ========================================================= */

.cnls-showcase-installments span {

	color:
		rgba(
			244,
			233,
			199,
			0.72
		) !important;

}


/* =========================================================
   PRECIO DE LAS CUOTAS
   ========================================================= */

.cnls-showcase-installments strong,

.cnls-showcase-installments
.woocommerce-Price-amount,

.cnls-showcase-installments
.woocommerce-Price-currencySymbol {

	color: var(--cnls-gold) !important;

	font-family:
		"Manrope",
		sans-serif !important;

	font-size: 15px !important;

	font-weight: 500 !important;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

	.cnls-showcase {

		--cnls-columns: 2;

		padding:
			25px
			20px
			10px;

	}


	.cnls-showcase-product {

		padding:
			0
			clamp(
				8px,
				2vw,
				20px
			);

	}


	.cnls-showcase-image-wrap {

		height:
			clamp(
				270px,
				42vw,
				360px
			);

	}


	.cnls-showcase-badge {

		top: 6px;

		left: 6px;

		width: 84px;

		height: 84px;

	}


	.cnls-showcase-badge-text {

		font-size: 13px;

	}


	.cnls-showcase-brand {

		font-size: 10px !important;

		letter-spacing: 0.14em !important;

		margin-bottom: 25px;

	}


	.cnls-showcase-price {

		font-size: 17px !important;

	}


	.cnls-showcase-button {

		font-size: 13px !important;

		font-weight: 600 !important;

		letter-spacing: 0.5px !important;

		min-height: 48px;

	}


	.cnls-showcase-bottom {

		gap: 15px;

	}


	.cnls-showcase-installments {

		font-size: 15px !important;

	}


	.cnls-ornament-corner {

		width: 86px;

		height: 86px;

	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

	.cnls-showcase {

		--cnls-columns: 1;

		padding:
			30px
			16px
			20px;

	}


	/* =====================================================
	   GRID MOBILE
	   ===================================================== */

	.cnls-showcase-grid {

		grid-template-columns: 1fr;

		row-gap: 75px;

	}


	/* =====================================================
	   PRODUCTO MOBILE
	   ===================================================== */

	.cnls-showcase-product {

		padding:
			0
			3%
			0;

		margin: 0;

	}


	/* =====================================================
	   ELIMINAR DIVISORES LATERALES MOBILE
	   ===================================================== */

	.cnls-showcase-product::after,

	.cnls-showcase-grid::before,

	.cnls-showcase-grid::after {

		display: none !important;

		content: none !important;

	}


	/* =====================================================
	   IMAGEN MOBILE
	   ===================================================== */

	.cnls-showcase-image-wrap {

		height:
			min(
				92vw,
				390px
			);

		padding: 0 5%;

	}


	.cnls-showcase-product-image {

		max-width: 82% !important;

		max-height: 100% !important;

		width: auto !important;

		height: auto !important;

	}


	/* =====================================================
	   BADGE MOBILE
	   ===================================================== */

	.cnls-showcase-badge {

		top: 4px;

		left: 4px;

		width: 76px;

		height: 76px;

	}


	.cnls-showcase-badge-text {

		font-size: 12px;

	}


	/* =====================================================
	   ORNAMENTO MOBILE
	   ===================================================== */

	.cnls-ornament-corner {

		width: 70px;

		height: 70px;

		opacity: 0.82;

	}


	/* =====================================================
	   HOVER IMAGEN MOBILE
	   ===================================================== */

	.cnls-showcase-product:hover
	.cnls-showcase-product-image {

		transform: none;

		filter: none !important;

	}


	/* =====================================================
	   HOVER TÍTULO MOBILE
	   ===================================================== */

	.cnls-showcase-product:hover
	.cnls-showcase-title a {

		color: var(--cnls-title) !important;

	}


	/* =====================================================
	   HOVER BOTÓN MOBILE
	   ===================================================== */

	.cnls-showcase-product:hover
	.cnls-showcase-button {

		border-color:
			var(--cnls-border) !important;

		color:
			var(--cnls-gold) !important;

		box-shadow: none !important;

	}


	.cnls-showcase-product--outofstock:hover
	.cnls-showcase-button {

		border-color:
			var(--cnls-gray) !important;

		color:
			var(--cnls-gray) !important;

	}


	/* =====================================================
	   HOVER ORNAMENTO MOBILE
	   ===================================================== */

	.cnls-showcase-product:hover
	.cnls-ornament-corner {

		filter: none;

		opacity: 0.82;

	}


	/* =====================================================
	   TÍTULO MOBILE
	   ===================================================== */

	.cnls-showcase-title {

		font-size:
			clamp(
				20px,
				6cqw,
				30px
			) !important;

		margin-top: 28px !important;

		margin-bottom: 22px !important;

	}


	/* =====================================================
	   MARCA MOBILE
	   ===================================================== */

	.cnls-showcase-brand {

		font-size: 10px !important;

		letter-spacing: 0.14em !important;

		margin-bottom: 28px;

	}


	/* =====================================================
	   PRECIO + BOTÓN MOBILE
	   ===================================================== */

	.cnls-showcase-bottom {

		gap: 22px;

		flex-wrap: wrap;

		padding-bottom: 0;

	}


	/* =====================================================
	   PRECIO MOBILE
	   ===================================================== */

	.cnls-showcase-price {

		font-size: 17px !important;

	}


	/* =====================================================
	   BOTÓN MOBILE
	   ===================================================== */

	.cnls-showcase-button {

		min-height: 48px;

		padding: 0 14px !important;

		font-size: 13px !important;

		font-weight: 600 !important;

		letter-spacing: 0.5px !important;

	}


	/* =====================================================
	   CUOTAS MOBILE
	   ===================================================== */

	.cnls-showcase-installments {

		margin-top: 12px;

		margin-bottom: 2px;

		padding:
			12px
			8px
			16px;

		border-top: 0 !important;

		border-right: 0 !important;

		border-left: 0 !important;

		border-bottom:
			1px
			solid
			var(--cnls-divider) !important;

		font-size: 15px !important;

	}

}


/* =========================================================
   MÓVILES MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 380px) {

	.cnls-showcase {

		padding-left: 12px;

		padding-right: 12px;

	}


	.cnls-showcase-grid {

		row-gap: 65px;

	}


	.cnls-showcase-title {

		font-size: 32px !important;

	}


	.cnls-showcase-brand {

		font-size: 9px !important;

		letter-spacing: 0.13em !important;

		margin-bottom: 22px;

	}


	.cnls-showcase-price {

		font-size: 17px !important;

	}


	.cnls-showcase-button {

		font-size: 13px !important;

		font-weight: 600 !important;

		letter-spacing: 0.5px !important;

	}


	.cnls-showcase-bottom {

		gap: 14px;

	}


	.cnls-showcase-installments {

		font-size: 12px !important;

	}


	.cnls-showcase-installments strong,

	.cnls-showcase-installments
	.woocommerce-Price-amount {

		font-size: 12px !important;

	}


	.cnls-ornament-corner {

		width: 56px;

		height: 56px;

	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.cnls-showcase-product-image,

	.cnls-ornament-corner,

	.cnls-showcase-button,

	.cnls-showcase-title a {

		transition: none !important;

	}

}


/* =========================================================
   AJAX RANDOM LOADING
   ========================================================= */

.cnls-showcase-ajax-grid {

	min-height: 120px;

}


.cnls-showcase-ajax-loading {

	width: 100%;

	min-height: 120px;

	display: flex;

	align-items: center;

	justify-content: center;

}


.cnls-showcase-ajax-loading::after {

	content: "";

	width: 18px;

	height: 18px;

	border:
		1px
		solid
		rgba(
			224,
			169,
			31,
			0.22
		);

	border-top-color:
		var(--cnls-gold);

	border-radius: 50%;

	animation:
		cnls-showcase-loader
		700ms
		linear
		infinite;

}


@keyframes cnls-showcase-loader {

	to {

		transform:
			rotate(
				360deg
			);

	}

}


@media (
	prefers-reduced-motion: reduce
) {

	.cnls-showcase-ajax-loading::after {

		animation: none;

	}

}