/**
 * SHOPPABLE VIDEOS — grid del home + fullscreen player.
 */

/* ── Slider del home ──────────────────────────────────────── */
.videos-shop {
	position: relative;
}
.videos-shop__slider {
	position: relative;
	--cols: 5;
	--gap: var(--sp-4);
}
.videos-shop__viewport {
	overflow: hidden;
}
.videos-shop__track {
	display: flex;
	gap: var(--gap);
	transition: transform var(--dur-slow) var(--ease-out);
	will-change: transform;
}
.videos-shop__card {
	position: relative;
	flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
	aspect-ratio: 9/16;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-bg-alt);
	cursor: pointer;
	display: block;
	border: 0;
	padding: 0;
	color: inherit;
	transition: transform var(--dur-base) var(--ease-out);
}
.videos-shop__card:hover { transform: translateY(-4px); }

@media (max-width: 1180px) { .videos-shop__slider { --cols: 4; } }
@media (max-width: 900px)  { .videos-shop__slider { --cols: 3; } }
@media (max-width: 640px)  { .videos-shop__slider { --cols: 2; --gap: var(--sp-3); } }
@media (max-width: 420px)  { .videos-shop__slider { --cols: 1.4; } }

/* Arrows */
.videos-shop__arrow {
	position: absolute;
	top: 50%; transform: translateY(-50%);
	z-index: 3;
	width: 44px; height: 44px;
	border-radius: var(--radius-full);
	background: var(--color-bg-alt);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.videos-shop__arrow:hover {
	background: var(--color-text);
	color: var(--color-text-invert);
	transform: translateY(-50%) scale(1.05);
}
.videos-shop__arrow--prev { left: calc(var(--sp-4) * -1); }
.videos-shop__arrow--next { right: calc(var(--sp-4) * -1); }
.videos-shop__arrow[data-disabled="true"] {
	opacity: 0.3;
	pointer-events: none;
}
@media (max-width: 640px) {
	.videos-shop__arrow { display: none; }         /* móvil usa swipe */
}

.videos-shop__poster {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
	pointer-events: none;              /* el click debe llegar al botón padre */
}
.videos-shop__card:hover .videos-shop__poster { transform: scale(1.05); }

.videos-shop__caption {
	position: absolute;
	top: var(--sp-3); left: var(--sp-3); right: var(--sp-3);
	color: var(--c-cream-100);
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	line-height: 1.3;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	z-index: 2;
	text-align: left;
}

.videos-shop__product {
	position: absolute;
	bottom: var(--sp-3); left: var(--sp-3); right: var(--sp-3);
	display: flex; align-items: center; gap: var(--sp-2);
	background: var(--c-cream-100);
	padding: 8px;
	border-radius: var(--radius-md);
	box-shadow: 0 4px 16px rgba(10, 26, 20, 0.25);
	z-index: 2;
}
.videos-shop__product img {
	width: 36px; height: 36px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	flex-shrink: 0;
}
.videos-shop__product-info {
	flex: 1;
	display: flex; flex-direction: column;
	gap: 2px;
	min-width: 0;
	text-align: left;
}
.videos-shop__product-name {
	font-family: var(--font-sans);
	font-size: var(--fs-3xs);
	color: var(--color-text);
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.videos-shop__product-price {
	font-size: var(--fs-2xs);
	color: var(--color-primary);
	font-weight: var(--fw-semi);
}
.videos-shop__product-cta {
	width: 32px; height: 32px;
	border-radius: var(--radius-full);
	background: var(--color-cta);
	color: var(--color-cta-text);
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}

/* ── Fullscreen player ─────────────────────────────────────── */
.video-player {
	position: fixed; inset: 0;
	z-index: var(--z-modal);
	background: rgba(10, 26, 20, 0.85);
	backdrop-filter: blur(6px);
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--sp-3);
}
.video-player[data-open="true"] {
	display: flex;
	animation: video-player-fade 0.2s var(--ease-out);
}
@keyframes video-player-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.video-player__backdrop {
	position: absolute; inset: 0;
	cursor: pointer;
}
.video-player__stage {
	position: relative;
	width: min(400px, 100%);
	height: min(720px, 92dvh);
	background: #000;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	display: flex; flex-direction: column;
}

/* Top bar */
.video-player__top {
	position: absolute; top: 0; left: 0; right: 0;
	z-index: 3;
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--sp-3);
	color: #fff;
	background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
	pointer-events: none;
}
.video-player__top > * { pointer-events: auto; }
.video-player__side { display: flex; gap: 6px; }
.video-player__counter {
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	padding: 6px 12px;
	border-radius: var(--radius-full);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-semi);
}
.video-player__hint {
	opacity: 0.6;
	margin-left: 6px;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	font-size: var(--fs-3xs);
}

/* Controles circulares */
.video-player__ctrl {
	width: 36px; height: 36px;
	border-radius: var(--radius-full);
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	border: 0;
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.video-player__ctrl:hover { background: rgba(0, 0, 0, 0.85); transform: scale(1.05); }
.video-player__ctrl--close { background: rgba(255, 255, 255, 0.15); }
.video-player__ctrl--close:hover { background: rgba(255, 255, 255, 0.28); }

.video-player__icon { display: none; }
.video-player[data-playing="true"]  .video-player__icon--pause { display: block; }
.video-player[data-playing="false"] .video-player__icon--play  { display: block; }
.video-player[data-muted="false"]   .video-player__icon--sound { display: block; }
.video-player[data-muted="true"]    .video-player__icon--muted { display: block; }

/* Viewport del video */
.video-player__viewport {
	flex: 1;
	position: relative;
	overflow: hidden;
}
.video-player__video {
	width: 100%; height: 100%;
	object-fit: cover;
	background: #000;
	cursor: pointer;
}

/* Navegación vertical (arriba a la derecha, tipo TikTok) */
.video-player__nav {
	position: absolute;
	right: var(--sp-3);
	top: 50%;
	transform: translateY(-50%);
	display: flex; flex-direction: column; gap: var(--sp-2);
	z-index: 3;
}

/* Card de producto abajo */
.video-player__product {
	position: absolute;
	bottom: var(--sp-3); left: var(--sp-3); right: var(--sp-3);
	z-index: 3;
	background: var(--color-bg-alt);
	border-radius: var(--radius-md);
	padding: var(--sp-3);
	display: grid;
	grid-template-columns: 56px 1fr auto;
	grid-template-areas:
		"thumb info cta"
		"thumb info more";
	gap: 4px var(--sp-3);
	align-items: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.video-player__product[data-hidden="true"] { display: none; }
.video-player__product-thumb {
	grid-area: thumb;
	display: block;
	width: 56px; height: 56px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-surface-alt);
}
.video-player__product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-player__product-info {
	grid-area: info;
	display: flex; flex-direction: column; gap: 2px;
	min-width: 0;
	overflow: hidden;
}
.video-player__product-name {
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	color: var(--color-text);
	font-weight: var(--fw-semi);
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.video-player__product-price {
	font-size: var(--fs-2xs);
	color: var(--color-primary);
	font-weight: var(--fw-semi);
}
.video-player__product-cta {
	grid-area: cta;
	min-height: 36px;
	padding: 0 14px;
	font-size: var(--fs-3xs);
	white-space: nowrap;
}
.video-player__product-more {
	grid-area: more;
	font-size: var(--fs-3xs);
	color: var(--color-text-muted);
	text-align: right;
	justify-self: end;
	padding: 0;
	min-height: 0;
	border-bottom: 0;
}

@media (max-width: 480px) {
	.video-player__stage {
		width: 100%;
		height: 100dvh;
		border-radius: 0;
		max-height: 100dvh;
	}
	.video-player { padding: 0; }
}