/**
 * Shop the Look — TiendaPocket
 * Carrusel de looks + modal de productos.
 */

/* ── Sección contenedor ────────────────────────────────────────────────────── */
.tp-section--stl {
	padding: var(--tp-section-py, 48px) 0;
	overflow: hidden;
}

.tp-section--stl .container {
	overflow: hidden;
	padding-inline: 0;
	/* contain:layout evita que el ancho interno del carrusel horizontal
	   (mucho más ancho que este contenedor) escape al layout del documento
	   en iOS Safari, generando scroll horizontal real en toda la página. */
	contain: layout;
}

.tp-section--stl .tp-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	padding-inline: var(--container-pad);
}

/* ── Carrusel de tarjetas look ─────────────────────────────────────────────── */
.tp-stl-carousel {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
	padding-inline: var(--container-pad);
	width: 100%;
	box-sizing: border-box;
}

.tp-stl-carousel::-webkit-scrollbar {
	display: none;
}

/* ── Tarjeta individual ────────────────────────────────────────────────────── */
.tp-stl-card {
	flex: 0 0 calc(25% - 12px);
	scroll-snap-align: start;
	position: relative;
	cursor: pointer;
	overflow: hidden;
	border-radius: var(--tp-radius, 4px);
	background: #f5f5f5;
}

/* Proporción 4:5 — típico moda */
.tp-stl-card__img-wrap {
	position: relative;
	padding-top: 125%; /* 4:5 */
	overflow: hidden;
}

.tp-stl-card__img-wrap img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;   /* no recorta — muestra la imagen completa */
	object-position: top center;
	transition: transform 0.4s ease;
	display: block;
}

.tp-stl-card:hover .tp-stl-card__img-wrap img {
	transform: scale(1.04);
}

/* Overlay con botón */
.tp-stl-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 20px;
	background: linear-gradient(to top, rgba(0,0,0,0.38) 0%, transparent 55%);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.tp-stl-card:hover .tp-stl-card__overlay {
	opacity: 1;
}

.tp-stl-card__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	background: #fff;
	color: #111;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: none;
	border-radius: 2px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s;
}

.tp-stl-card__btn:hover {
	background: #111;
	color: #fff;
}

.tp-stl-card__btn svg {
	flex-shrink: 0;
}

/* Cantidad de productos badge */
.tp-stl-card__count {
	position: absolute;
	top: 12px;
	right: 12px;
	background: rgba(255,255,255,0.92);
	color: #111;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 20px;
	letter-spacing: 0.04em;
	pointer-events: none;
}

/* ── Responsive carrusel ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.tp-stl-card {
		flex: 0 0 calc(33.333% - 11px);
	}
}

@media (max-width: 768px) {
	.tp-stl-card {
		flex: 0 0 calc(50% - 8px);
	}
	.tp-stl-carousel {
		gap: 12px;
	}
}

@media (max-width: 480px) {
	.tp-stl-card {
		flex: 0 0 72vw;
	}
}

/* ── Modal Shop the Look ───────────────────────────────────────────────────── */
#tp-stl-modal .tp-modal__box {
	max-width: 860px;
	width: 94vw;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	border-radius: var(--tp-radius, 4px);
}

/* Header del modal */
.tp-stl-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px 16px;
	border-bottom: 1px solid #eee;
	flex-shrink: 0;
}

.tp-stl-modal__title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0;
}

/* Cuerpo: imagen izquierda + productos derecha */
.tp-stl-modal__body {
	display: flex;
	overflow: hidden;
	flex: 1;
	min-height: 0;
}

/* Columna imagen */
.tp-stl-modal__image-col {
	flex: 0 0 42%;
	position: relative;
	overflow: hidden;
	background: #f5f5f5;
}

.tp-stl-modal__image-col img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Columna productos */
.tp-stl-modal__products-col {
	flex: 1;
	overflow-y: auto;
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Producto dentro del modal */
.tp-stl-product-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 16px;
	border-bottom: 1px solid #f0f0f0;
}

.tp-stl-product-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.tp-stl-product-row__thumb {
	flex-shrink: 0;
	width: 80px;
	height: 100px;
	overflow: hidden;
	background: #f5f5f5;
	border-radius: 2px;
}

.tp-stl-product-row__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tp-stl-product-row__info {
	flex: 1;
	min-width: 0;
}

.tp-stl-product-row__name {
	font-size: 13px;
	font-weight: 500;
	margin: 0 0 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tp-stl-product-row__name a {
	color: inherit;
	text-decoration: none;
}

.tp-stl-product-row__name a:hover {
	text-decoration: underline;
}

.tp-stl-product-row__price {
	font-size: 13px;
	margin-bottom: 10px;
}

/* Precio tachado */
.tp-stl-product-row__price del {
	color: #999;
	font-size: 12px;
	margin-right: 4px;
}

.tp-stl-product-row__price ins {
	text-decoration: none;
	color: #c0392b;
}

/* Botón comprar del modal */
.tp-stl-atc-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: #111;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	border: 1px solid #111;
	border-radius: 2px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
	white-space: nowrap;
}

.tp-stl-atc-btn:hover {
	background: transparent;
	color: #111;
}

.tp-stl-atc-btn--variable {
	background: transparent;
	color: #111;
	border-color: #111;
}

.tp-stl-atc-btn--variable:hover {
	background: #111;
	color: #fff;
}

/* ── Selectores de variantes inline ────────────────────────────────────────── */
.tp-stl-variants {
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tp-stl-attr {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tp-stl-attr__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #666;
}

.tp-stl-attr__options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tp-stl-attr__pill {
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 500;
	border: 1px solid #ddd;
	border-radius: 2px;
	background: #fff;
	color: #333;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
	line-height: 1;
}

.tp-stl-attr__pill:hover {
	border-color: #999;
}

.tp-stl-attr__pill.is-selected {
	background: #111;
	color: #fff;
	border-color: #111;
}

.tp-stl-atc-btn--disabled {
	opacity: 0.45;
	cursor: default;
	pointer-events: none;
}

/* Estado cargando */
.tp-stl-modal__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 24px;
	flex: 1;
}

/* ── Modal responsive ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	/* Bottom sheet */
	#tp-stl-modal {
		align-items: flex-end;
		padding: 0;
	}

	#tp-stl-modal .tp-modal__box {
		width: 100vw;
		max-width: 100vw;
		height: 88dvh;
		max-height: 88dvh;
		border-radius: 16px 16px 0 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		padding: 0;
	}

	/* Header fijo arriba */
	.tp-stl-modal__header {
		padding: 14px 16px 12px;
		flex-shrink: 0;
	}

	/* Body: solo productos con scroll — sin imagen */
	.tp-stl-modal__body {
		flex-direction: column;
		flex: 1;
		min-height: 0;
		overflow: hidden;
	}

	/* Imagen oculta en mobile — el header ya tiene el título del look */
	.tp-stl-modal__image-col {
		display: none;
	}

	/* Productos: toda la altura disponible con scroll */
	.tp-stl-modal__products-col {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 8px 16px 32px;
		gap: 0;
	}

	/* Fila producto más compacta */
	.tp-stl-product-row {
		padding: 14px 0;
		gap: 12px;
		align-items: flex-start;
	}

	.tp-stl-product-row__thumb {
		width: 72px;
		height: 88px;
		flex-shrink: 0;
	}

	.tp-stl-product-row__info {
		display: flex;
		flex-direction: column;
		gap: 4px;
		flex: 1;
		min-width: 0;
	}

	.tp-stl-product-row__name {
		white-space: normal;
		font-size: 14px;
		line-height: 1.3;
	}

	.tp-stl-product-row__price {
		font-size: 13px;
		margin-bottom: 6px;
	}

	/* Botón full width */
	.tp-stl-atc-btn {
		width: 100%;
		justify-content: center;
		padding: 10px 14px;
		font-size: 11px;
	}

	/* Pills de variantes más chicas */
	.tp-stl-attr__pill {
		padding: 5px 10px;
		font-size: 11px;
	}
}

/* ── Spinner dentro del botón ATC ──────────────────────────────────────────── */
.tp-stl-atc-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.tp-stl-btn-spinner {
	display: inline-block;
	width: 13px;
	height: 13px;
	border: 2px solid rgba(255,255,255,0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: tp-stl-spin 0.65s linear infinite;
	flex-shrink: 0;
}
@keyframes tp-stl-spin {
	to { transform: rotate(360deg); }
}

/* ── Toast feedback ────────────────────────────────────────────────────────── */
.tp-stl-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(12px);
	background: #222;
	color: #fff;
	padding: 10px 20px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 99999;
	pointer-events: none;
}
.tp-stl-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.tp-stl-toast--success { background: #2e7d32; }
.tp-stl-toast--error   { background: #c62828; }