/* Shoppable Video Stories – front end. Scoped to .svs so it never leaks into the theme. */
.svs {
	--svs-card-w: 260px;
	--svs-gap: 16px;
	--svs-radius: 16px;
	--svs-ratio: 9 / 16;
	--svs-ratio-num: .5625;
	--svs-max-h: 50vh;
	--svs-fit-w: calc(var(--svs-max-h) * var(--svs-ratio-num));
	--svs-section-bg: transparent;
	--svs-text: inherit;
	--svs-card-bg: rgba(127, 127, 127, .09);
	--svs-button-bg: #111;
	--svs-button-text: #fff;
	--svs-accent: currentColor;
	--svs-pad: clamp(16px, 3vw, 32px);
	position: relative;
	box-sizing: border-box;
	margin: 0 0 1.5em;
	padding: var(--svs-pad);
	color: var(--svs-text);
	background: var(--svs-section-bg);
	border-radius: calc(var(--svs-radius) * .75);
}
.svs *, .svs *::before, .svs *::after { box-sizing: border-box; }

/* Auto: blend into the theme; JS refines button / accent colours from the theme. */
.svs.svs--theme-auto {
	--svs-pad: 0px;
	--svs-text: inherit;
	--svs-card-bg: var(--svs-auto-card-bg, rgba(127, 127, 127, .09));
	--svs-card-bg-solid: var(--svs-auto-card-bg);
	--svs-button-bg: var(--svs-auto-button-bg, var(--wp--preset--color--contrast, #111));
	--svs-button-text: var(--svs-auto-button-text, var(--wp--preset--color--base, #fff));
	--svs-accent: var(--svs-auto-accent, currentColor);
	background: transparent;
	border-radius: 0;
}

/* Header */
.svs .svs__head { margin: 0 0 clamp(16px, 2.4vw, 32px); }
.svs .svs__title {
	margin: 0;
	padding: 0;
	font-size: clamp(1.35rem, 1rem + 1.5vw, 2.25rem);
	font-weight: 500;
	line-height: 1.2;
	color: inherit;
	text-align: left;
}
.svs.svs--align-center .svs__title { text-align: center; }

/* Stage holds the track and the side arrows (arrows sit in their own gutter, not on the videos). */
.svs .svs__stage { position: relative; }
.svs .svs__stage--arrows.is-scrollable { padding-inline: 60px; }
.svs .svs__arrow {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: var(--svs-arrow-top, 40%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	min-height: 0;
	margin: -23px 0 0;
	padding: 0;
	border: 1px solid rgba(127, 127, 127, .18);
	border-radius: 50%;
	background: var(--svs-card-bg-solid, var(--svs-card-bg));
	color: var(--svs-text);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
	cursor: pointer;
	transition: opacity .15s, transform .15s;
}
.svs .svs__arrow--prev { left: 2px; }
.svs .svs__arrow--next { right: 2px; }
.svs .svs__arrow[hidden] { display: none; }
.svs .svs__arrow:hover:not(:disabled) { transform: scale(1.06); }
.svs .svs__arrow:disabled { opacity: .35; cursor: default; }
.svs .svs__arrow:focus-visible { outline: 2px solid var(--svs-accent); outline-offset: 2px; }
.svs .svs__arrow svg { display: block; pointer-events: none; }

/* Track */
.svs .svs__track {
	display: flex;
	gap: var(--svs-gap);
	margin: 0;
	padding: 2px 2px 6px;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	touch-action: pan-x pan-y;
}
.svs .svs__track::-webkit-scrollbar { display: none; }
.svs .svs__track:focus-visible { outline: 2px solid var(--svs-accent); outline-offset: 4px; border-radius: 4px; }
.svs .svs__track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }

/* Card */
.svs .svs__card {
	flex: 0 0 min(var(--svs-card-w), var(--svs-fit-w));
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 10px;
	container-type: inline-size;
}
.svs .svs__card::before, .svs .svs__card::marker { content: none; }

/* Video frame */
.svs .svs__media {
	position: relative;
	width: 100%;
	aspect-ratio: var(--svs-ratio);
	border-radius: var(--svs-radius);
	overflow: hidden;
	background: #0b0b0b;
	isolation: isolate;
}
.svs .svs__poster,
.svs .svs__media iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
}
.svs .svs__play {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
}
.svs .svs__play svg { width: 64px; height: 64px; transition: transform .2s ease; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35)); }
.svs .svs__play-bg { fill: rgba(0, 0, 0, .5); stroke: rgba(255, 255, 255, .9); stroke-width: 2; }
.svs .svs__play-icon { fill: #fff; }
.svs .svs__play:hover svg, .svs .svs__play:focus-visible svg { transform: scale(1.08); }
.svs .svs__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; border-radius: var(--svs-radius); }
.svs .svs__media.is-playing .svs__play,
.svs .svs__media.is-playing .svs__poster { display: none; }
.svs .svs__media.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 3px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: svs-spin .8s linear infinite;
	z-index: 0;
}
@keyframes svs-spin { to { transform: rotate(360deg); } }

/* Product strip: its own card below the video, never over it */
.svs .svs__product {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: center;
	gap: 10px 12px;
	padding: 10px;
	border: 1px solid rgba(127, 127, 127, .14);
	border-radius: calc(var(--svs-radius) * .75);
	background: var(--svs-card-bg-solid, var(--svs-card-bg));
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
	color: var(--svs-text);
	flex: 1 1 auto;
	align-content: space-between;
}
.svs .svs__thumb { display: block; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: #f3f3f3; line-height: 0; }
.svs .svs__thumb img { width: 100%; height: 100%; max-width: none; margin: 0; object-fit: contain; border-radius: 0; }
.svs .svs__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.svs .svs__name {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
	color: inherit;
	text-decoration: none;
}
.svs .svs__name:hover, .svs .svs__name:focus { color: inherit; text-decoration: underline; }
.svs .svs__price { font-size: 1rem; font-weight: 700; line-height: 1.2; color: var(--svs-accent); }
.svs .svs__price .amount, .svs .svs__price bdi { color: inherit; font: inherit; }
.svs .svs__price del, .svs .svs__price .screen-reader-text { display: none; }
.svs .svs__price ins { text-decoration: none; background: none; }
.svs .svs__btn {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	width: 100%;
	margin: 0;
	padding: 9px 16px;
	border: 0;
	border-radius: 8px;
	background: var(--svs-button-bg);
	color: var(--svs-button-text);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	box-shadow: none;
	cursor: pointer;
	transition: opacity .15s;
}
.svs .svs__btn::before { content: none; }
.svs .svs__btn:hover, .svs .svs__btn:focus { color: var(--svs-button-text); background: var(--svs-button-bg); opacity: .88; text-decoration: none; }
.svs .svs__btn:focus-visible { outline: 2px solid var(--svs-accent); outline-offset: 2px; }
.svs .svs__btn.loading { opacity: .6; pointer-events: none; }
.svs .svs__btn.added::after { content: "\2713"; margin-left: 6px; font-family: inherit; }
.svs .svs__btn.loading::after { content: "\2026"; margin-left: 4px; font-family: inherit; }
.svs .svs__product .added_to_cart {
	grid-column: 1 / -1;
	justify-self: center;
	margin: -4px 0 0;
	padding: 0;
	font-size: .8rem;
	color: inherit;
	background: none;
	text-decoration: underline;
}

/* Cards wide enough: thumbnail, title + price, button on one row (as in the reference) */
@container (min-width: 320px) {
	.svs .svs__product { grid-template-columns: 56px minmax(0, 1fr) auto; }
	.svs .svs__btn { grid-column: auto; width: auto; }
}
@container (min-width: 380px) {
	.svs .svs__product { grid-template-columns: 64px minmax(0, 1fr) auto; padding: 12px; }
	.svs .svs__thumb { width: 64px; height: 64px; }
}

/* Disclaimer */
.svs .svs__note { max-width: 760px; margin: 12px auto 0; padding: 0 16px; font-size: .75rem; line-height: 1.5; text-align: center; color: var(--svs-text); opacity: .65; }
.svs.svs--align-left .svs__note { margin-left: 0; text-align: left; }

/* Dots */
.svs .svs__dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin-top: 14px; }
.svs .svs__dots[hidden] { display: none; }
.svs .svs__dot {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	width: 24px;
	height: 24px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}
.svs .svs__dot::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: rgba(127, 127, 127, .45);
	transition: background-color .2s;
}
.svs .svs__dot[aria-current="true"]::after { background: var(--svs-accent); }
.svs .svs__dot:focus-visible { outline: 2px solid var(--svs-accent); outline-offset: -2px; border-radius: 50%; }

/* Responsive */
@media (max-width: 1024px) {
	.svs.svs--frame-vertical .svs__card, .svs.svs--frame-custom .svs__card { flex-basis: min(var(--svs-card-w), 42%, var(--svs-fit-w)); }
}
@media (max-width: 767px) {
	.svs .svs__arrow { display: none; }
	.svs .svs__stage--arrows.is-scrollable { padding-inline: 0; }
	.svs.svs--frame-vertical .svs__card,
	.svs.svs--frame-custom .svs__card { flex-basis: min(var(--svs-card-w), 74%, var(--svs-fit-w)); }
	.svs.svs--frame-horizontal .svs__card { flex-basis: min(var(--svs-card-w), 100%, var(--svs-fit-w)); }
	.svs .svs__play svg { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
	.svs .svs__track { scroll-behavior: auto; }
	.svs .svs__play svg, .svs .svs__arrow, .svs .svs__dot::after { transition: none; }
}

/* Guard our controls against theme-wide button styles (e.g. Electro styles every <button>). */
.svs button.svs__play,
.svs button.svs__play:hover,
.svs button.svs__play:focus {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #fff !important;
}
.svs button.svs__dot,
.svs button.svs__dot:hover,
.svs button.svs__dot:focus {
	width: 24px !important;
	height: 24px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
}
.svs button.svs__arrow,
.svs button.svs__arrow:hover,
.svs button.svs__arrow:focus {
	width: 46px !important;
	height: 46px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(127, 127, 127, .25) !important;
	border-radius: 50% !important;
	background: var(--svs-card-bg-solid, var(--svs-card-bg)) !important;
	color: var(--svs-text) !important;
	line-height: 1 !important;
}

/* When every card fits, centre the row instead of leaving a gap on the right. */
.svs .svs__stage:not(.is-scrollable) .svs__track { justify-content: center; }