/* OQ Single Video 1.1 — styled to match OQ Customer Dash.
   Everything is scoped under .oqsv so themes and other OQ plugins don't collide. */

@property --oqsv-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.oqsv {
	--oqsv-max: 1280px;
	--oqsv-radius: 18px;
	--oqsv-fade: 300ms;
	--oqsv-border-w: 0px;
	--oqsv-border-c: #ce217a;
	--oqsv-accent: #ce217a;
	--oqsv-accent2: #f4c35a;
	--oqsv-card-bg: #22121d;
	--oqsv-card-text: #f7edf2;
	--oqsv-icon: #f7edf2;
	--oqsv-bar: rgba(22, 10, 18, .62);
	--oqsv-title-c: #f7edf2;
	--oqsv-title-s: 28px;
	--oqsv-title-w: 800;
	--oqsv-sub-c: #c9b3c0;
	--oqsv-badge-bg: #ce217a;
	--oqsv-badge-c: #fff;
	--oqsv-btn-bg: #ce217a;
	--oqsv-btn-bg-solid: #ce217a;
	--oqsv-btn-c: #fff;
	--oqsv-btn-bw: 0px;
	--oqsv-btn-bc: #fff;
	--oqsv-btn-r: 999px;

	--oqsv-font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--oqsv-display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
	--oqsv-ease: cubic-bezier(.2, .9, .25, 1.12);
	--oqsv-muted: color-mix(in srgb, var(--oqsv-card-text) 62%, var(--oqsv-card-bg));
	--oqsv-line: color-mix(in srgb, var(--oqsv-card-text) 12%, transparent);
	--oqsv-glass: rgba(255, 255, 255, .08);

	container-type: inline-size;
	position: relative;
	isolation: isolate;
	width: 100%;
	max-width: var(--oqsv-max);
	margin: 0 auto 1.75em;
	font-family: var(--oqsv-font);
	font-size: 16px;
	line-height: 1.45;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}
.oqsv--theme-fonts { --oqsv-font: inherit; --oqsv-display: inherit; }
.oqsv *, .oqsv *::before, .oqsv *::after { box-sizing: border-box; }

/* Card frame, same family as the Customer Dash panels */
.oqsv--card {
	padding: clamp(8px, 1.5cqi, 14px);
	border-radius: calc(var(--oqsv-radius) + 8px);
	background: var(--oqsv-card-bg);
	color: var(--oqsv-card-text);
	box-shadow: 0 1px 0 var(--oqsv-line) inset, 0 0 0 1px var(--oqsv-card-border, transparent) inset, 0 40px 80px -40px rgba(0, 0, 0, .7);
}
.oqsv--bare { color: inherit; }

/* Reset theme button styles (Avada and friends) inside the player only */
.oqsv button {
	appearance: none; -webkit-appearance: none;
	margin: 0; padding: 0; min-height: 0; width: auto;
	border: 0; background: none; box-shadow: none;
	color: inherit; font: inherit; line-height: 1;
	letter-spacing: normal; text-transform: none; text-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.oqsv svg.oqsv-i { width: 20px; height: 20px; display: block; flex: none; }
.oqsv :focus-visible { outline: 2px solid var(--oqsv-accent2); outline-offset: 3px; }

/* ---------- Stage ---------- */
.oqsv__stage {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--oqsv-radius);
	border: var(--oqsv-border-w) solid var(--oqsv-border-c);
	background: #000;
	outline: none;
	isolation: isolate;
	user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}
.oqsv--transparent .oqsv__stage { background: transparent; }
.oqsv__stage:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--oqsv-accent2); }

.oqsv__video, .oqsv__preview, .oqsv__poster {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	display: block; margin: 0; max-width: none; border-radius: 0;
	object-fit: contain;
}
.oqsv__poster { z-index: 2; object-fit: cover; transition: opacity .4s ease, transform 1.2s var(--oqsv-ease); }
.oqsv__stage:hover .oqsv__poster { transform: scale(1.015); }
.oqsv__preview { z-index: 1; opacity: 0; object-fit: cover; transition: opacity .25s ease; }
.oqsv.is-previewing .oqsv__preview { opacity: 1; z-index: 3; }
.oqsv.is-previewing .oqsv__poster,
.oqsv.is-started .oqsv__poster { opacity: 0; pointer-events: none; }

/* Scrims keep text and controls readable on bright frames */
.oqsv__stage::after {
	content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
	background:
		radial-gradient(70% 90% at 0% 0%, rgba(0, 0, 0, .45), transparent 60%),
		linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 34%);
	transition: opacity var(--oqsv-fade, .35s) ease;
}
.oqsv.is-playing.is-idle .oqsv__stage::after { opacity: 0; }

/* Loading: the same sweeping line the Customer Dash uses */
.oqsv__loadbar {
	position: absolute; z-index: 9; top: 0; left: var(--oqsv-radius); right: var(--oqsv-radius);
	height: 2px; border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--oqsv-accent), var(--oqsv-accent2), transparent);
	background-size: 50% 100%; background-repeat: no-repeat;
	opacity: 0; transition: opacity .2s; pointer-events: none;
}
.oqsv.is-loading .oqsv__loadbar { opacity: 1; animation: oqsv-load 1s linear infinite; }
@keyframes oqsv-load { from { background-position: -100% 0; } to { background-position: 200% 0; } }

/* ---------- Badge + title on the video ---------- */
.oqsv__text {
	position: absolute; z-index: 5;
	top: clamp(12px, 3cqi, 26px); left: clamp(12px, 3cqi, 26px); right: 38%;
	pointer-events: none;
	transition: opacity .3s ease, transform .4s var(--oqsv-ease);
}
.oqsv.is-playing .oqsv__text { opacity: 0; transform: translateY(-8px); }
.oqsv.is-playing:not(.is-idle):hover .oqsv__text { opacity: 1; transform: none; }

.oqsv__badge {
	display: inline-flex; align-items: center;
	height: 28px; padding: 0 12px;
	border-radius: 999px;
	background: var(--oqsv-badge-bg); color: var(--oqsv-badge-c);
	font: 700 12px/1 var(--oqsv-font);
	box-shadow: 0 8px 24px -10px var(--oqsv-badge-bg);
}
.oqsv__text .oqsv__meta { margin-top: 12px; }
.oqsv__text .oqsv__badge + .oqsv__meta { margin-top: 12px; }
.oqsv__text > .oqsv__meta:first-child { margin-top: 0; }

.oqsv .oqsv__title {
	margin: 0; padding: 0;
	color: var(--oqsv-title-c);
	font-family: var(--oqsv-display);
	font-size: clamp(18px, calc(var(--oqsv-title-s) * .55 + 1.6cqi), var(--oqsv-title-s));
	font-weight: var(--oqsv-title-w);
	line-height: 1.05;
	letter-spacing: -.025em;
	text-transform: none;
	overflow-wrap: anywhere;
}
.oqsv__text .oqsv__title { text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.oqsv .oqsv__title a { color: inherit; text-decoration: none; pointer-events: auto; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .35s var(--oqsv-ease); }
.oqsv .oqsv__title a:hover { background-size: 100% 2px; }
.oqsv__subtitle { margin: 8px 0 0; color: var(--oqsv-sub-c); font-size: clamp(13px, 1.7cqi, 16px); }
.oqsv__text .oqsv__subtitle { text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.oqsv__sold { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--oqsv-sub-c); font-size: 13px; font-weight: 500; }
.oqsv__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--oqsv-accent2); box-shadow: 0 0 10px var(--oqsv-accent2); }

/* ---------- Big play: gradient ring that sweeps in once, like the avatar ring ---------- */
.oqsv__stage .oqsv__big {
	position: absolute; z-index: 6; top: 50%; left: 50%;
	width: clamp(64px, 12cqi, 96px); aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	transition: opacity .3s ease, transform .45s var(--oqsv-ease);
}
.oqsv__ring {
	position: absolute; inset: 0; border-radius: 50%;
	background: conic-gradient(from var(--oqsv-spin), var(--oqsv-accent), var(--oqsv-accent2), var(--oqsv-accent) 70%, var(--oqsv-accent));
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
	animation: oqsv-spin 1.4s var(--oqsv-ease) .2s both;
}
@keyframes oqsv-spin { from { --oqsv-spin: -200deg; opacity: 0; } to { --oqsv-spin: 0deg; opacity: 1; } }
.oqsv__core {
	position: absolute; inset: 8px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--oqsv-accent); color: #fff;
	box-shadow: 0 14px 34px -10px var(--oqsv-accent);
	transition: transform .35s var(--oqsv-ease);
}
.oqsv__core svg.oqsv-i { width: 38%; height: 38%; margin-left: 7%; }
/* Play button opacity: its own value on computers and on phones, full on hover. */
.oqsv { --oqsv-play-op-cur: var(--oqsv-play-op, 1); }
@media (max-width: 768px) { .oqsv { --oqsv-play-op-cur: var(--oqsv-play-op-m, 1); } }
.oqsv__stage .oqsv__big { opacity: var(--oqsv-play-op-cur, 1); }
.oqsv__stage .oqsv__big:hover, .oqsv__stage .oqsv__big:focus-visible { opacity: 1; }
.oqsv__stage .oqsv__big:hover .oqsv__core { transform: scale(1.07); }
.oqsv__stage .oqsv__big:active .oqsv__core { transform: scale(.95); }
.oqsv.is-playing .oqsv__big,
.oqsv.is-previewing .oqsv__big { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.8); }
/* Keep the play button over the hover preview, with a soft pulse inviting a click. */
.oqsv--keep-play.is-previewing:not(.is-playing) .oqsv__big { opacity: var(--oqsv-play-op-cur, 1); pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.oqsv--keep-play.is-previewing:not(.is-playing) .oqsv__big:hover { opacity: 1; }
.oqsv--keep-play.is-previewing:not(.is-playing) .oqsv__core { animation: oqsv-pulse 1.8s ease-in-out infinite; }
@keyframes oqsv-pulse { 0%, 100% { box-shadow: 0 14px 34px -10px var(--oqsv-accent), 0 0 0 0 color-mix(in srgb, var(--oqsv-accent) 45%, transparent); } 50% { box-shadow: 0 14px 34px -10px var(--oqsv-accent), 0 0 0 12px transparent; } }

.oqsv__error {
	position: absolute; z-index: 7; left: 50%; bottom: 84px; transform: translateX(-50%);
	max-width: 90%; margin: 0; padding: 10px 16px;
	border-radius: 999px; background: rgba(0, 0, 0, .82); color: #fff;
	font-size: 13px; text-align: center;
}

/* ---------- Controls: floating glass dock ---------- */
.oqsv__controls {
	position: absolute; z-index: 8;
	left: clamp(6px, 1.4cqi, 12px); right: clamp(6px, 1.4cqi, 12px); bottom: clamp(6px, 1.4cqi, 12px);
	padding: 4px clamp(6px, 1.2cqi, 10px) 6px;
	border-radius: calc(var(--oqsv-radius) - 4px);
	background: var(--oqsv-bar);
	border: 1px solid var(--oqsv-glass);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
	color: var(--oqsv-icon);
	opacity: 0; transform: translateY(12px);
	transition: opacity var(--oqsv-fade, .3s) ease, transform calc(var(--oqsv-fade, .3s) + 150ms) var(--oqsv-ease);
	pointer-events: none;
}
.oqsv.is-started .oqsv__controls { opacity: 1; transform: none; pointer-events: auto; }
.oqsv.is-started.is-playing.is-idle .oqsv__controls { opacity: 0; transform: translateY(12px); pointer-events: none; }
.oqsv.is-idle.is-playing .oqsv__stage { cursor: none; }

.oqsv__row { display: flex; align-items: center; gap: clamp(0px, .8cqi, 6px); }
.oqsv__spacer { flex: 1; }

.oqsv .oqsv__btn {
	display: grid; place-items: center;
	width: 40px; height: 40px; border-radius: 999px;
	color: var(--oqsv-icon);
	transition: background-color .2s ease, transform .3s var(--oqsv-ease);
}
.oqsv .oqsv__btn:hover { background: var(--oqsv-glass); }
.oqsv .oqsv__btn:active { transform: scale(.9); }
.oqsv .oqsv__speed { width: auto; min-width: 40px; padding: 0 10px; font: 700 13px/1 var(--oqsv-font); font-variant-numeric: tabular-nums; }

.oqsv__play .oqsv-i--pause, .oqsv.is-playing .oqsv__play .oqsv-i--play { display: none; }
.oqsv.is-playing .oqsv__play .oqsv-i--pause { display: block; }
.oqsv__mute .oqsv-i--mute, .oqsv.is-muted .oqsv__mute .oqsv-i--vol { display: none; }
.oqsv.is-muted .oqsv__mute .oqsv-i--mute { display: block; }
.oqsv__fs .oqsv-i--fsx, .oqsv.is-fs .oqsv__fs .oqsv-i--fs { display: none; }
.oqsv.is-fs .oqsv__fs .oqsv-i--fsx { display: block; }

.oqsv__time { padding-left: 4px; color: var(--oqsv-icon); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .85; }

/* Volume */
.oqsv__vol { display: flex; align-items: center; }
.oqsv .oqsv__volume {
	-webkit-appearance: none; appearance: none;
	width: 0; height: 4px; margin: 0; padding: 0; border: 0; border-radius: 4px;
	background: linear-gradient(90deg, var(--oqsv-accent) var(--v, 100%), rgba(255, 255, 255, .22) var(--v, 100%));
	opacity: 0; cursor: pointer;
	transition: width .35s var(--oqsv-ease), opacity .2s ease, margin .35s var(--oqsv-ease);
}
.oqsv__vol:hover .oqsv__volume, .oqsv__vol:focus-within .oqsv__volume { width: 76px; opacity: 1; margin: 0 8px 0 2px; }
.oqsv .oqsv__volume::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
.oqsv .oqsv__volume::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }

/* Progress: gradient fill with a soft glow */
.oqsv__progress { position: relative; height: 18px; margin: 0 8px; cursor: pointer; touch-action: none; outline: none; }
.oqsv__progress::before, .oqsv__buffer, .oqsv__fill {
	content: ""; position: absolute; left: 0; top: 50%;
	height: 4px; transform: translateY(-50%); border-radius: 4px;
	transition: height .25s var(--oqsv-ease);
}
.oqsv__progress::before { right: 0; background: rgba(255, 255, 255, .16); }
.oqsv__buffer { width: 0; background: rgba(255, 255, 255, .26); }
.oqsv__fill {
	width: 0;
	background: linear-gradient(90deg, var(--oqsv-accent), var(--oqsv-accent2));
	box-shadow: 0 0 14px -2px var(--oqsv-accent);
}
.oqsv__thumb {
	position: absolute; top: 50%; left: 0;
	width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
	background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--oqsv-accent2) 45%, transparent);
	transform: translateY(-50%) scale(0);
	transition: transform .3s var(--oqsv-ease);
}
.oqsv__progress:hover::before, .oqsv__progress:hover .oqsv__buffer, .oqsv__progress:hover .oqsv__fill,
.oqsv__progress.is-drag::before, .oqsv__progress.is-drag .oqsv__buffer, .oqsv__progress.is-drag .oqsv__fill,
.oqsv__progress:focus-visible::before, .oqsv__progress:focus-visible .oqsv__fill { height: 6px; }
.oqsv__progress:hover .oqsv__thumb, .oqsv__progress.is-drag .oqsv__thumb, .oqsv__progress:focus-visible .oqsv__thumb { transform: translateY(-50%) scale(1); }
.oqsv__tip {
	position: absolute; bottom: 22px; left: 0; transform: translateX(-50%);
	padding: 5px 9px; border-radius: 999px;
	background: var(--oqsv-tip-bg, var(--oqsv-card-bg)); color: var(--oqsv-tip-text, var(--oqsv-card-text));
	border: 1px solid var(--oqsv-line);
	font: 600 12px/1 var(--oqsv-font); font-variant-numeric: tabular-nums;
	white-space: nowrap; opacity: 0; pointer-events: none;
	transition: opacity .15s ease;
}
.oqsv__progress:hover .oqsv__tip, .oqsv__progress.is-drag .oqsv__tip { opacity: 1; }

/* ---------- Details row under the video ---------- */
.oqsv__info {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
	gap: 14px 24px;
	padding: clamp(14px, 2.4cqi, 22px) clamp(6px, 1.2cqi, 10px) clamp(6px, 1cqi, 8px);
	background: var(--oqsv-info-bg, transparent);
	border-top: 1px solid var(--oqsv-divider, transparent);
}
.oqsv[style*="--oqsv-info-bg"] .oqsv__info { margin-top: 10px; padding: clamp(14px, 2.4cqi, 20px); border-radius: var(--oqsv-radius); }
.oqsv[style*="--oqsv-divider"] .oqsv__info { margin-top: 12px; }
.oqsv--bare .oqsv__info { padding-left: 0; padding-right: 0; }
.oqsv__info .oqsv__meta { flex: 1 1 260px; min-width: 0; }

/* ---------- Star rating ---------- */
.oqsv__rating { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; vertical-align: middle; }
.oqsv__stars { position: relative; display: inline-flex; line-height: 0; }
.oqsv__stars-bg, .oqsv__stars-fg { display: inline-flex; gap: 2px; white-space: nowrap; }
.oqsv__stars-fg { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; }
.oqsv__stars svg { flex: none; width: var(--oqsv-star-s, 18px); height: var(--oqsv-star-s, 18px); }
.oqsv__stars-bg svg { fill: var(--oqsv-star-empty, color-mix(in srgb, var(--oqsv-card-text) 22%, transparent)); }
.oqsv__stars-fg svg { fill: var(--oqsv-star, #ce217a); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--oqsv-star, #ce217a) 45%, transparent)); }
.oqsv__rating-text { color: var(--oqsv-rating-c, var(--oqsv-card-text)); font: 700 calc(var(--oqsv-star-s, 18px) * .85)/1 var(--oqsv-font); font-variant-numeric: tabular-nums; }
.oqsv__rating-count { color: var(--oqsv-muted); font-size: calc(var(--oqsv-star-s, 18px) * .75); }
.oqsv--bare .oqsv__rating-text { color: var(--oqsv-rating-c, inherit); }
.oqsv--no-rating .oqsv__rating { display: none; }
.oqsv--no-rating-text .oqsv__rating-text, .oqsv--no-rating-text .oqsv__rating-count { display: none; }
.oqsv__text .oqsv__rating-text { text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }

/* ---------- Details layout ---------- */
.oqsv--details-split .oqsv__info { align-items: center; }
.oqsv--details-left .oqsv__info, .oqsv--details-center .oqsv__info, .oqsv--details-right .oqsv__info { flex-direction: column; gap: 14px; }
.oqsv--details-left .oqsv__info { align-items: flex-start; }
.oqsv--details-center .oqsv__info { align-items: center; }
.oqsv--details-right .oqsv__info { align-items: flex-end; }
.oqsv--details-left .oqsv__info .oqsv__meta, .oqsv--details-center .oqsv__info .oqsv__meta, .oqsv--details-right .oqsv__info .oqsv__meta { flex: none; width: 100%; }
.oqsv--details-left .oqsv__info .oqsv__meta { text-align: left; }
.oqsv--details-center .oqsv__info .oqsv__meta { text-align: center; }
.oqsv--details-right .oqsv__info .oqsv__meta { text-align: right; }
.oqsv--details-left .oqsv__info .oqsv__buy { align-items: flex-start; }
.oqsv--details-left .oqsv__info .oqsv__buyrow { justify-content: flex-start; }
.oqsv--details-center .oqsv__info .oqsv__buy { align-items: center; }
.oqsv--details-center .oqsv__info .oqsv__buyrow { justify-content: center; }
.oqsv--details-right .oqsv__info .oqsv__buy { align-items: flex-end; }
.oqsv--details-right .oqsv__info .oqsv__buyrow { justify-content: flex-end; }

/* ---------- Buy ---------- */
.oqsv__buy { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.oqsv__buyrow { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px 14px; }

.oqsv__price { color: var(--oqsv-price, var(--oqsv-card-text)); font: 700 22px/1 var(--oqsv-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.oqsv--bare .oqsv__price { color: var(--oqsv-price, inherit); }
.oqsv__price del { margin-right: 6px; color: var(--oqsv-price-old, var(--oqsv-muted)); font-size: .7em; font-weight: 600; }
.oqsv__price ins { text-decoration: none; background: none; color: inherit; }

.oqsv .oqsv__atc {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	min-height: var(--oqsv-btn-h, 48px); padding: 0 var(--oqsv-btn-px, 24px);
	width: var(--oqsv-btn-wd, auto); max-width: 100%;
	border: var(--oqsv-btn-bw) solid var(--oqsv-btn-bc);
	border-radius: var(--oqsv-btn-r);
	background: var(--oqsv-btn-bg); color: var(--oqsv-btn-c);
	font: 700 var(--oqsv-btn-fs, 15px)/1 var(--oqsv-font);
	box-shadow: 0 12px 30px -12px var(--oqsv-btn-bg-solid);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .35s var(--oqsv-ease), box-shadow .3s ease;
}
.oqsv .oqsv__atc:hover,
.oqsv .oqsv__atc:focus-visible,
.oqsv .oqsv__atc.is-demo-hover {
	background: var(--oqsv-btn-h-bg, var(--oqsv-btn-bg));
	color: var(--oqsv-btn-h-c, var(--oqsv-btn-c));
	border-width: var(--oqsv-btn-h-bw, var(--oqsv-btn-bw));
	border-color: var(--oqsv-btn-h-bc, var(--oqsv-btn-bc));
	transform: translateY(-2px);
	box-shadow: 0 18px 36px -14px var(--oqsv-btn-h-solid, var(--oqsv-btn-bg-solid));
}
.oqsv .oqsv__atc:active,
.oqsv .oqsv__atc.is-demo-press {
	background: var(--oqsv-btn-p-bg, var(--oqsv-btn-bg));
	color: var(--oqsv-btn-p-c, var(--oqsv-btn-c));
	border-width: var(--oqsv-btn-h-bw, var(--oqsv-btn-bw));
	border-color: var(--oqsv-btn-p-bc, var(--oqsv-btn-bc));
	transform: scale(.97);
	box-shadow: 0 8px 20px -12px var(--oqsv-btn-bg-solid);
}
.oqsv .oqsv__atc.is-in-cart:not(:hover):not(:active):not(.is-demo-hover):not(.is-demo-press) {
	background: var(--oqsv-btn-in-bg, var(--oqsv-btn-bg));
	color: var(--oqsv-btn-in-c, var(--oqsv-btn-c));
}
.oqsv--no-lift .oqsv__atc:hover, .oqsv--no-lift .oqsv__atc.is-demo-hover { transform: none; }
.oqsv--no-shrink .oqsv__atc:active, .oqsv--no-shrink .oqsv__atc.is-demo-press { transform: none; }
.oqsv .oqsv__atc svg.oqsv-i { width: calc(var(--oqsv-btn-fs, 15px) * 1.2); height: calc(var(--oqsv-btn-fs, 15px) * 1.2); }
.oqsv__atc .oqsv-i--check, .oqsv__atc.is-in-cart .oqsv-i--cart { display: none; }
.oqsv__atc.is-in-cart .oqsv-i--check { display: block; animation: oqsv-pop .45s var(--oqsv-ease); }
@keyframes oqsv-pop { from { transform: scale(.4); } to { transform: scale(1); } }
.oqsv .oqsv__atc.is-busy { opacity: .7; cursor: progress; transform: none; }

.oqsv .oqsv__viewcart { color: var(--oqsv-link, var(--oqsv-muted)); font-size: 14px; font-weight: 600; text-decoration: none; }
.oqsv .oqsv__viewcart:hover { color: var(--oqsv-link, var(--oqsv-card-text)); text-decoration: underline; text-underline-offset: 3px; }
.oqsv__viewcart[hidden] { display: none !important; }

/* Full HD / Mobile: pill track with a sliding highlight, like the dashboard tabs */
.oqsv__versions {
	position: relative;
	display: inline-grid; grid-template-columns: 1fr 1fr;
	padding: 4px; border-radius: 999px;
	background: var(--oqsv-sw-track, color-mix(in srgb, var(--oqsv-card-text) 7%, transparent));
	border: 1px solid var(--oqsv-line);
}
.oqsv__ink {
	position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px;
	width: calc(50% - 4px); border-radius: 999px;
	background: var(--oqsv-sw-on, var(--oqsv-accent));
	box-shadow: 0 8px 22px -8px var(--oqsv-sw-on, var(--oqsv-accent));
	transition: transform .5s var(--oqsv-ease);
}
.oqsv__versions[data-active="mobile"] .oqsv__ink { transform: translateX(100%); }
.oqsv .oqsv__versions button {
	position: relative; z-index: 1;
	height: 36px; padding: 0 16px; border-radius: 999px;
	color: var(--oqsv-sw-text, var(--oqsv-muted)); font: 600 13px/1 var(--oqsv-font);
	transition: color .3s ease;
}
.oqsv .oqsv__versions button[aria-checked="true"] { color: var(--oqsv-sw-on-text, #fff); }

.oqsv__msg { margin: 0; color: var(--oqsv-msg, var(--oqsv-muted)); font-size: 13px; }
.oqsv__msg:empty { display: none; }
.oqsv__msg.is-error { color: var(--oqsv-msg-error, #ff9ab8); }

/* Button on the video: glass panel in the corner */
.oqsv--btn-overlay .oqsv__stage > .oqsv__buy {
	position: absolute; z-index: 9;
	top: clamp(10px, 2.6cqi, 22px); right: clamp(10px, 2.6cqi, 22px);
	padding: 10px; border-radius: calc(var(--oqsv-radius) - 2px);
	background: var(--oqsv-bar);
	border: 1px solid var(--oqsv-glass);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	--oqsv-card-text: #fff;
	--oqsv-muted: rgba(255, 255, 255, .7);
	transition: opacity .3s ease, transform .45s var(--oqsv-ease);
}
.oqsv--btn-overlay .oqsv__stage > .oqsv__buy .oqsv__price { font-size: 18px; padding-left: 6px; }
.oqsv--btn-overlay.is-playing.is-idle .oqsv__stage > .oqsv__buy { opacity: 0; transform: translateY(-8px); pointer-events: none; transition-duration: var(--oqsv-fade); }

/* ---------- Controls off: only a small sound button ---------- */
.oqsv--no-controls .oqsv__controls { display: none !important; }
.oqsv .oqsv__sound {
	position: absolute; z-index: 8; right: clamp(10px, 2.4cqi, 18px); bottom: clamp(10px, 2.4cqi, 18px);
	display: none; place-items: center; width: 42px; height: 42px; border-radius: 50%;
	background: var(--oqsv-bar); color: var(--oqsv-icon);
	border: 1px solid var(--oqsv-glass);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	transition: opacity .3s ease, transform .35s var(--oqsv-ease);
}
.oqsv--no-controls.is-started .oqsv__sound, .oqsv--no-controls .oqsv__sound.is-pv { display: grid; }
.oqsv--no-controls.is-playing.is-idle .oqsv__sound { opacity: .55; transition-duration: var(--oqsv-fade); }
.oqsv .oqsv__sound:hover { transform: scale(1.06); }
.oqsv .oqsv__sound:active { transform: scale(.92); }
.oqsv__sound .oqsv-i--mute, .oqsv.is-muted .oqsv__sound .oqsv-i--vol { display: none; }
.oqsv.is-muted .oqsv__sound .oqsv-i--mute { display: block; }
.oqsv__sound.is-pv .oqsv-i--mute { display: block; }
.oqsv--no-controls .oqsv__error { bottom: 70px; }
@container (max-width: 600px) {
	.oqsv--no-controls.oqsv--btn-overlay.is-started:not(.is-playing) .oqsv__stage > .oqsv__buy { bottom: 64px; }
}

/* ---------- Fullscreen ---------- */
.oqsv.is-fs .oqsv__stage { border-radius: 0; border: 0; aspect-ratio: auto; width: 100%; height: 100%; }
.oqsv__stage:fullscreen { width: 100vw; height: 100vh; }
.oqsv__stage:-webkit-full-screen { width: 100vw; height: 100vh; }

/* ---------- Small players & phones ---------- */
@container (max-width: 600px) {
	.oqsv__time, .oqsv__pip, .oqsv__speed { display: none; }
	.oqsv__text { right: 12px; }
	.oqsv__info { flex-direction: column; align-items: stretch; }
	.oqsv__info .oqsv__meta { flex-basis: auto; }
	.oqsv__info .oqsv__buy { align-items: stretch; }
	.oqsv__info .oqsv__buyrow { justify-content: space-between; }
	.oqsv__info .oqsv__atc { flex: 1 1 auto; }
	.oqsv__info .oqsv__versions { width: 100%; }
	.oqsv--btn-overlay .oqsv__stage > .oqsv__buy { top: auto; bottom: 12px; right: 12px; left: 12px; align-items: stretch; }
	.oqsv--btn-overlay .oqsv__stage > .oqsv__buy .oqsv__buyrow { justify-content: space-between; }
	.oqsv--btn-overlay.is-started .oqsv__stage > .oqsv__buy { opacity: 0; pointer-events: none; }
	.oqsv--btn-overlay.is-started:not(.is-playing) .oqsv__stage > .oqsv__buy { opacity: 1; pointer-events: auto; bottom: 86px; }
	.oqsv__vol:hover .oqsv__volume { width: 0; opacity: 0; margin: 0; }
}
@container (max-width: 600px) {
	.oqsv--details-center .oqsv__info, .oqsv--details-left .oqsv__info, .oqsv--details-right .oqsv__info { align-items: stretch; }
	.oqsv--details-center .oqsv__info .oqsv__buyrow { justify-content: center; }
	.oqsv--details-right .oqsv__info .oqsv__buyrow { justify-content: flex-end; }
	.oqsv--details-left .oqsv__info .oqsv__buyrow { justify-content: flex-start; }
	.oqsv--details-split .oqsv__info .oqsv__meta { text-align: left; }
}
@container (max-width: 380px) {
	.oqsv__text .oqsv__subtitle, .oqsv__text .oqsv__sold { display: none; }
	.oqsv .oqsv__atc { padding: 0 min(var(--oqsv-btn-px, 24px), 16px); font-size: min(var(--oqsv-btn-fs, 15px), 15px); }
}

@media (hover: none) {
	.oqsv__vol .oqsv__volume { display: none; }
	.oqsv .oqsv__btn:hover { background: none; }
	.oqsv .oqsv__atc:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.oqsv *, .oqsv *::before, .oqsv *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
	.oqsv.is-loading .oqsv__loadbar { animation: none; background-position: 50% 0; }
}

.oqsv-missing { padding: 12px 16px; border-radius: 12px; border-left: 4px solid #ce217a; background: #22121d; color: #f7edf2; font-size: 14px; }