/* =========================================================================
   KeepSeal AIO — product videos gallery (in the product "videos" tab)
   Base + 4 selectable layouts: grid / wide / scroll / list.
   Uses Neo design tokens when present, with fallbacks. Dark-aware.
   ========================================================================= */
.ksav{
	--v-primary: var(--ksn-primary, #10326a);
	--v-heat: var(--ksn-heat, #ff5a1f);
	--v-surface: var(--ksn-surface, #fff);
	--v-surface-2: var(--ksn-surface-2, #eef2f8);
	--v-ink: var(--ksn-ink, #0d1b34);
	--v-muted: var(--ksn-muted, #5a6b85);
	--v-line: var(--ksn-line, rgba(13,27,52,.12));
	direction: rtl; margin: 4px 0; font-family: var(--ksn-font, inherit);
}
.ksav *{ box-sizing: border-box; }
.ksav__item{ margin: 0; min-width: 0; }

/* ---- shared: the facade frame ---- */
.ksav__frame{
	position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
	border-radius: 16px; border: 1px solid var(--v-line);
	background:
		radial-gradient(120% 90% at 80% -10%, rgba(255,90,31,.22), transparent 55%),
		linear-gradient(150deg, #0c1c38, var(--v-primary));
	background-size: cover; background-position: center;
	display: grid; place-items: center; cursor: pointer;
	box-shadow: 0 18px 40px -22px rgba(13,27,52,.5);
}
.ksav__frame--has-poster::after{
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(6,12,26,.15), rgba(6,12,26,.55));
}
.ksav__play{
	position: relative; z-index: 2;
	width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer;
	display: grid; place-items: center; padding-inline-start: 4px;
	color: #fff; background: rgba(255,90,31,.95);
	box-shadow: 0 12px 30px -8px rgba(255,90,31,.7), 0 0 0 8px rgba(255,255,255,.14);
	transition: transform .18s ease, box-shadow .2s ease;
}
.ksav__frame:hover .ksav__play{ transform: scale(1.08); box-shadow: 0 16px 36px -8px rgba(255,90,31,.85), 0 0 0 10px rgba(255,255,255,.18); }
.ksav__play::before{
	content: ""; position: absolute; inset: -8px; border-radius: 50%;
	border: 2px solid rgba(255,255,255,.35); animation: ksav-pulse 2.4s ease-out infinite;
}
@keyframes ksav-pulse{ 0%{ transform: scale(1); opacity: .7; } 100%{ transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .ksav__play::before{ animation: none; } }

.ksav__frame iframe, .ksav__frame video{
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; z-index: 3;
}
.ksav__frame.is-playing{ cursor: default; }
.ksav__frame.is-playing .ksav__play{ display: none; }
.ksav__frame.is-playing::after{ display: none; }

.ksav__caption{
	margin: 12px 4px 0; color: var(--v-ink); font-weight: 700; font-size: .92rem; line-height: 1.7; text-align: center;
}

/* =========================================================================
   1) GRID (default) — responsive cards
   ========================================================================= */
.ksav--grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }

/* =========================================================================
   2) WIDE — one large video per row
   ========================================================================= */
.ksav--wide{ display: flex; flex-direction: column; gap: 28px; max-width: 860px; margin-inline: auto; }
.ksav--wide .ksav__caption{ font-size: 1.02rem; margin-top: 14px; }
.ksav--wide .ksav__play{ width: 74px; height: 74px; }

/* =========================================================================
   3) SCROLL — horizontal snap slider
   ========================================================================= */
.ksav--scroll{
	display: flex; gap: 18px; overflow-x: auto; padding-bottom: 12px;
	scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--v-line) transparent;
}
.ksav--scroll .ksav__item{ flex: 0 0 clamp(240px, 72%, 320px); scroll-snap-align: start; }
.ksav--scroll::-webkit-scrollbar{ height: 8px; }
.ksav--scroll::-webkit-scrollbar-thumb{ background: var(--v-line); border-radius: 99px; }
.ksav--scroll::-webkit-scrollbar-track{ background: transparent; }

/* =========================================================================
   4) LIST — thumbnail beside the caption (horizontal card)
   ========================================================================= */
.ksav--list{ display: flex; flex-direction: column; gap: 16px; }
.ksav--list .ksav__item{
	display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: center;
	background: var(--v-surface); border: 1px solid var(--v-line); border-radius: 18px; padding: 14px;
	box-shadow: 0 10px 26px -20px rgba(13,27,52,.5);
}
.ksav--list .ksav__frame{ box-shadow: none; }
.ksav--list .ksav__play{ width: 52px; height: 52px; }
.ksav--list .ksav__caption{ text-align: start; margin: 0; font-size: 1.02rem; font-weight: 800; color: var(--v-ink); }
@media (max-width: 620px){
	.ksav--list .ksav__item{ grid-template-columns: 1fr; }
	.ksav--list .ksav__caption{ text-align: center; }
}

@media (max-width: 560px){
	.ksav--grid{ grid-template-columns: 1fr; gap: 18px; }
}