/* =========================================================
   YO, TURO — PRODUCT STRIP / SLIDER
   Se utiliza en:
   - Más de esta colección
   - Otras remeras
   - Categorías de producto
   - Single product
   ========================================================= */


/* =========================================================
   1. CONTENEDOR GENERAL
   ========================================================= */

.turo-product-strip {
	width: 100%;
	max-width: none;

	margin: 12px auto 44px;

	box-sizing: border-box;
}


/* =========================================================
   2. ENCABEZADO
   ========================================================= */

.turo-product-strip__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;

	width: 100%;

	margin-bottom: 18px;
}

.turo-product-strip__title {
	margin: 0;

	color: #111111;

	font-family: "Poppins", sans-serif;
	font-size: clamp(20px, 1.8vw, 27px);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.15;
}


/* =========================================================
   3. CONTROLES
   ========================================================= */

.turo-product-strip__controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;

	flex: 0 0 auto;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		opacity 0.22s ease,
		visibility 0.22s ease;
}

/*
 * El JS agrega esta clase solamente cuando
 * existe contenido para desplazar.
 */

.turo-product-strip--has-overflow
.turo-product-strip__controls {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.turo-product-strip__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 42px;
	height: 42px;

	padding: 0;

	border: 1px solid rgba(17, 17, 17, 0.13);
	border-radius: 50%;

	background: #ffffff;
	color: #111111;

	font-family: "Poppins", sans-serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1;

	cursor: pointer;

	box-shadow:
		0 6px 18px rgba(0, 0, 0, 0.035);

	transition:
		color 0.22s ease,
		background-color 0.22s ease,
		border-color 0.22s ease,
		opacity 0.22s ease,
		transform 0.22s ease,
		box-shadow 0.22s ease;
}

.turo-product-strip__arrow:hover:not(:disabled) {
	transform: translateY(-2px);

	border-color: #111111;

	background: #111111;
	color: #ffffff;

	box-shadow:
		0 12px 24px rgba(0, 0, 0, 0.12);
}

.turo-product-strip__arrow:disabled {
	opacity: 0.24;

	cursor: default;

	transform: none;

	box-shadow: none;
}


/* =========================================================
   4. TRACK DEL SLIDER
   ========================================================= */

.turo-product-strip__track {
	display: flex;
	flex-wrap: nowrap;
	gap: clamp(16px, 1.5vw, 22px);

	width: 100%;

	overflow-x: auto;
	overflow-y: hidden;

	padding:
		2px
		2px
		16px;

	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-inline: contain;

	-webkit-overflow-scrolling: touch;

	box-sizing: border-box;
}

.turo-product-strip__track::-webkit-scrollbar {
	display: none;
}


/* =========================================================
   5. MINI CARDS
   Cinco visibles en desktop
   ========================================================= */

.turo-product-mini {
	display: block;

	flex:
		0
		0
		calc(
			(100% - (4 * clamp(16px, 1.5vw, 22px)))
			/ 5
		);

	min-width: 0;

	scroll-snap-align: start;
	scroll-snap-stop: normal;
}

.turo-product-mini__link {
	position: relative;

	display: block;
	height: 100%;

	overflow: hidden;

	border: 1px solid rgba(17, 17, 17, 0.06);
	border-radius: 22px;

	background: #ffffff;
	color: #111111;

	text-decoration: none;

	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.035);

	transform: translateZ(0);

	transition:
		transform 0.38s cubic-bezier(.19, 1, .22, 1),
		box-shadow 0.38s cubic-bezier(.19, 1, .22, 1),
		border-color 0.3s ease;
}

.turo-product-mini__link:hover {
	transform: translateY(-6px);

	border-color: rgba(17, 17, 17, 0.18);

	box-shadow:
		0 20px 42px rgba(0, 0, 0, 0.085);
}


/* =========================================================
   6. IMAGEN
   ========================================================= */

.turo-product-mini__image-wrap {
	position: relative;

	aspect-ratio: 1 / 1;

	overflow: hidden;

	background: #f1eee9;
}

.turo-product-mini__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	transform: scale(1.01);

	transition:
		transform 0.65s cubic-bezier(.19, 1, .22, 1);
}

.turo-product-mini__link:hover
.turo-product-mini__image {
	transform: scale(1.045);
}


/* Flecha sobre la imagen */

.turo-product-mini__arrow {
	position: absolute;
	right: 13px;
	bottom: 13px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 36px;
	height: 36px;

	border-radius: 50%;

	background: #111111;
	color: #ffffff;

	font-family: "Poppins", sans-serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1;

	opacity: 0;

	transform:
		translateY(8px)
		scale(0.92);

	transition:
		opacity 0.3s ease,
		transform 0.38s cubic-bezier(.19, 1, .22, 1);
}

.turo-product-mini__link:hover
.turo-product-mini__arrow {
	opacity: 1;

	transform:
		translateY(0)
		scale(1);
}


/* =========================================================
   7. TEXTO
   ========================================================= */

.turo-product-mini__content {
	min-height: 88px;

	padding: 14px 15px 16px;

	box-sizing: border-box;
}

.turo-product-mini__label {
	display: block;

	margin-bottom: 6px;

	color: rgba(17, 17, 17, 0.42);

	font-family: "Poppins", sans-serif;
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
}

.turo-product-mini__title {
	display: -webkit-box;

	overflow: hidden;

	margin: 0;

	color: #111111;

	font-family: "Poppins", sans-serif;
	font-size: clamp(13px, 1vw, 16px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.27;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}


/* =========================================================
   8. ACERCAR LA TIRA AL BLOQUE ANTERIOR
   ========================================================= */

.turo-product-strip {
	margin-top: -18px !important;
}

/*
 * Elementor puede agregar aire adicional
 * alrededor de los shortcodes.
 */

.elementor-widget-shortcode:has(.turo-product-strip),
.elementor-widget-shortcode:has(.turo-product-strip)
.elementor-widget-container {
	margin-top: 0 !important;
	padding-top: 0 !important;
}


/* =========================================================
   9. TABLET GRANDE
   Cuatro productos visibles
   ========================================================= */

@media (max-width: 1100px) {

	.turo-product-mini {
		flex-basis:
			calc(
				(100% - (3 * clamp(16px, 1.5vw, 22px)))
				/ 4
			);
	}

}


/* =========================================================
   10. TABLET
   Tres productos visibles
   ========================================================= */

@media (max-width: 850px) {

	.turo-product-mini {
		flex-basis:
			calc(
				(100% - (2 * 16px))
				/ 3
			);
	}

	.turo-product-strip__track {
		gap: 16px;
	}

}


/* =========================================================
   11. MOBILE
   Carrusel táctil con una card y parte de la siguiente
   ========================================================= */

@media (max-width: 767px) {

	.turo-product-strip {
		width: 100%;

		margin:
			10px
			auto
			40px;
	}

	.turo-product-strip__header {
		gap: 12px;

		margin-bottom: 14px;
		padding: 0 2px;
	}

	.turo-product-strip__title {
		font-size: 21px;
	}

	.turo-product-strip__controls {
		gap: 6px;

		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.turo-product-strip__arrow {
		width: 38px;
		height: 38px;

		font-size: 15px;
	}

	.turo-product-strip__track {
		gap: 13px;

		width: calc(100% + 14px);

		padding:
			2px
			14px
			18px
			0;

		scroll-padding-left: 0;
	}

	.turo-product-mini {
		flex:
			0
			0
			min(72vw, 255px);
	}

	.turo-product-mini__link {
		border-radius: 20px;
	}

	.turo-product-mini__image-wrap {
		aspect-ratio: 4 / 4.7;
	}

	.turo-product-mini__content {
		min-height: 92px;

		padding: 14px 14px 17px;
	}

	.turo-product-mini__title {
		font-size: 14px;
	}

	.turo-product-mini__arrow {
		display: none;
	}

}


/* =========================================================
   12. OTRAS REMERAS EN CATEGORÍAS
   ========================================================= */

.turo-category-random-products {
	width: 100%;

	margin-top: 20px;
}

.turo-category-random-products
.turo-product-strip {
	margin-top: 0 !important;
	margin-bottom: 52px;
}

.archive
.turo-category-random-products {
	width: 100%;
	max-width: 100%;

	padding-top: 60px;

	border-top: 1px dotted #d8d8d8;
}

.archive
.turo-category-random-products + * {
	margin-top: 0;
}


/* =========================================================
   13. EDITORIAL EN CATEGORÍAS
   ========================================================= */

.turo-category-editorial {
	width: 100%;

	margin:
		18px
		auto
		38px;
}

.turo-category-editorial
.turo-designs,

.turo-category-editorial
.turo-story {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.turo-category-editorial > * {
	margin-top: 0 !important;
}


/* =========================================================
   14. SINGLE PRODUCT
   ========================================================= */

.single-product
.related.products {
	display: none !important;
}

.turo-single-recommendations {
	width: 100%;

	margin:
		28px
		auto
		0;
}

.turo-single-recommendations
.turo-product-strip {
	width: 100%;
	max-width: none;

	margin:
		20px
		auto
		34px;
}


/* =========================================================
   15. EDITORIAL EN SINGLE PRODUCT
   ========================================================= */

.turo-single-editorial {
	width: 100%;
	max-width: none;

	margin:
		40px
		auto;
}

.turo-single-editorial > * {
	width: 100%;
	max-width: none;

	margin-top: 0 !important;
}

.turo-single-editorial img {
	display: block;

	width: 100%;

	border-radius: 32px;
}

.turo-single-editorial
.turo-designs,

.turo-single-editorial
.turo-story {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}


/* =========================================================
   16. RESPONSIVE DE BLOQUES EXTERNOS
   ========================================================= */

@media (max-width: 767px) {

	.turo-category-random-products {
		margin-top: 10px;
	}

	.turo-category-random-products
	.turo-product-strip {
		margin-bottom: 34px;
	}

	.turo-category-editorial {
		margin:
			8px
			auto
			26px;
	}

	.turo-single-recommendations {
		margin-top: 14px;
	}

	.turo-single-recommendations
	.turo-product-strip {
		margin-bottom: 24px;
	}

	.turo-single-editorial {
		margin-bottom: 26px;
	}

}


/* =========================================================
   17. FOCO Y ACCESIBILIDAD
   ========================================================= */

.turo-product-strip__arrow:focus-visible,
.turo-product-strip__track:focus-visible,
.turo-product-mini__link:focus-visible {
	outline: 2px solid #111111;
	outline-offset: 4px;
}

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

	.turo-product-strip__track {
		scroll-behavior: auto;
	}

	.turo-product-mini__link,
	.turo-product-mini__image,
	.turo-product-mini__arrow,
	.turo-product-strip__arrow {
		transition: none;
	}

}

/* =========================================================
   FIX — FLECHAS DEL SLIDER
   ========================================================= */

.turo-product-strip__controls {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 8px !important;
}

.turo-product-strip__arrow {
	position: relative !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	flex: 0 0 42px !important;

	width: 42px !important;
	min-width: 42px !important;
	max-width: 42px !important;

	height: 42px !important;
	min-height: 42px !important;
	max-height: 42px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 1px solid rgba(17, 17, 17, 0.14) !important;
	border-radius: 50% !important;

	background: #ffffff !important;
	color: #111111 !important;

	box-shadow: none !important;

	font-size: 0 !important;
	line-height: 1 !important;

	overflow: hidden !important;
	cursor: pointer !important;
}

/* Ocultamos la flecha de texto original */

.turo-product-strip__arrow > span {
	display: none !important;
}

/* Dibujamos las flechas con CSS */

.turo-product-strip__arrow::before {
	content: "";

	display: block;

	width: 8px;
	height: 8px;

	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.turo-product-strip__arrow--prev::before {
	transform: rotate(-135deg);
	margin-left: 3px;
}

.turo-product-strip__arrow--next::before {
	transform: rotate(45deg);
	margin-right: 3px;
}

/* Hover */

.turo-product-strip__arrow:hover:not(:disabled) {
	border-color: #111111 !important;

	background: #111111 !important;
	color: #ffffff !important;

	transform: translateY(-2px) !important;
}

/* Desactivada */

.turo-product-strip__arrow:disabled {
	background: #ffffff !important;
	color: rgba(17, 17, 17, 0.28) !important;

	border-color: rgba(17, 17, 17, 0.08) !important;

	opacity: 1 !important;
	cursor: default !important;
	transform: none !important;
}

/* Mobile */

@media (max-width: 767px) {
	.turo-product-strip__arrow {
		flex-basis: 38px !important;

		width: 38px !important;
		min-width: 38px !important;
		max-width: 38px !important;

		height: 38px !important;
		min-height: 38px !important;
		max-height: 38px !important;
	}
}

/* =========================================================
   FIX MOBILE — IMAGEN DE MINI CARDS
   ========================================================= */

@media (max-width: 767px) {

	.turo-product-mini__image-wrap {
		position: relative !important;

		aspect-ratio: 1 / 1 !important;
		height: auto !important;

		background: #f1eee9;
	}

	.turo-product-mini__image-wrap
	.turo-product-mini__image {
		position: absolute !important;
		inset: 0 !important;

		display: block !important;

		width: 100% !important;
		height: 100% !important;

		object-fit: cover !important;
		object-position: center !important;
	}

}