/* Video Shorts Commerce — frontend (design estilo Stories) */

/* ---------- Reset defensivo ----------
   Temas e page builders costumam estilizar button/a/svg genericamente e
   vazar pro conteúdo do plugin. :where() tem especificidade zero, então
   esse reset nunca briga com as regras específicas do plugin logo abaixo
   (que sempre ganham, mesmo empatando em !important, por terem uma classe
   própria — maior especificidade que só um seletor de elemento). */
:where(.vsc-app, .vsc-modal) :where(button, a) {
	all: unset !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
}
:where(.vsc-app, .vsc-modal) svg {
	display: block !important;
}
:where(.vsc-app, .vsc-modal, .vsc-app *, .vsc-modal *) {
	box-sizing: border-box !important;
}

.vsc-app { --vsc-accent: #3ddc84; }
.vsc-app button:hover, .vsc-modal button:hover { background: transparent !important; }

/* ---------- Botão flutuante ---------- */
.vsc-fab {
	position: fixed !important;
	z-index: 99998 !important;
	bottom: 22px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 4px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: transparent !important;
	cursor: pointer !important;
}
.vsc-fab--bottom-right { right: 18px !important; left: auto !important; }
.vsc-fab--bottom-left { left: 18px !important; right: auto !important; }

.vsc-fab__ring {
	position: relative !important;
	width: 62px !important;
	height: 62px !important;
	border-radius: 50% !important;
	padding: 3px !important;
	background: conic-gradient(from 210deg, var(--vsc-accent), #7c3aed, #ec4899, var(--vsc-accent)) !important;
	display: block !important;
	box-shadow: 0 6px 18px rgba(0,0,0,.28) !important;
	animation: vsc-pulse 2s ease-in-out infinite;
}
.vsc-fab__ring::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	background: inherit;
	z-index: -1;
	animation: vsc-pulse-ring 2s ease-out infinite;
}
@keyframes vsc-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}
@keyframes vsc-pulse-ring {
	0% { transform: scale(1); opacity: .5; }
	70%, 100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.vsc-fab__ring, .vsc-fab__ring::before { animation: none; }
}

.vsc-fab__thumb {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	border-radius: 50% !important;
	background-size: cover !important;
	background-position: center !important;
	border: 2px solid #fff !important;
	margin: 0 !important;
}
.vsc-fab__label {
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: #fff !important;
	background: rgba(0,0,0,.6) !important;
	padding: 2px 8px !important;
	border-radius: 999px !important;
	white-space: nowrap !important;
}

/* ---------- Trigger inline (shortcode) ---------- */
.vsc-inline-trigger {
	position: relative !important;
	width: 120px !important;
	height: 200px !important;
	border: none !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	cursor: pointer !important;
	background: #000 !important;
	padding: 0 !important;
	margin: 0 !important;
}
.vsc-inline-trigger__thumb {
	position: absolute !important; inset: 0 !important;
	background-size: cover !important; background-position: center !important;
}
.vsc-inline-trigger__play {
	position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%,-50%) !important;
	width: 44px !important; height: 44px !important; border-radius: 50% !important; background: rgba(255,255,255,.9) !important;
}
.vsc-inline-trigger__play::before {
	content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%,-50%);
	border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #111;
}

/* ---------- Carrossel [vsc_stories] (fileira de miniaturas, estilo Stories) ---------- */
.vsc-stories-heading {
	margin: 0 0 12px !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}
.vsc-stories-row {
	--vsc-story-cols: 4;
	--vsc-story-gap: 8px;
	display: flex !important;
	gap: var(--vsc-story-gap) !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	padding: 4px 4px 10px !important;
	margin: 0 !important;
	list-style: none !important;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.vsc-stories-row::-webkit-scrollbar { display: none; }

.vsc-story {
	position: relative !important;
	flex: 0 0 auto !important;
	width: calc( ( 100% - ( var(--vsc-story-cols) - 1 ) * var(--vsc-story-gap) ) / var(--vsc-story-cols) ) !important;
	min-width: 90px !important;
	max-width: 170px !important;
	aspect-ratio: 3 / 5;
	border: none !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	cursor: pointer !important;
	background: #000 !important;
	padding: 0 !important;
	margin: 0 !important;
	scroll-snap-align: start;
}
.vsc-story__thumb {
	position: absolute !important; inset: 0 !important; z-index: 0 !important;
	background-size: cover !important;
	background-position: center !important;
	background-color: #eee !important;
}
.vsc-story__player {
	position: absolute !important; inset: 0 !important; z-index: 1 !important;
	pointer-events: none !important;
}
.vsc-story__player iframe {
	position: absolute !important; inset: 0 !important;
	width: 100% !important; height: 100% !important; border: 0 !important;
}
.vsc-story__play {
	position: absolute !important; left: 50% !important; top: 50% !important; z-index: 2 !important;
	width: 40px !important; height: 40px !important; border-radius: 50% !important; background: rgba(255,255,255,.9) !important;
	animation: vsc-story-play-pulse 1.8s ease-in-out infinite;
}
.vsc-story__play::before {
	content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%,-50%);
	border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #111;
}
.vsc-story__play::after {
	content: "";
	position: absolute; inset: 0; border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(255,255,255,.6);
	animation: vsc-story-play-ring 1.8s ease-out infinite;
}
@keyframes vsc-story-play-pulse {
	0%, 100% { transform: translate(-50%,-50%) scale(1); }
	50% { transform: translate(-50%,-50%) scale(1.1); }
}
@keyframes vsc-story-play-ring {
	0% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
	70%, 100% { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: reduce) {
	.vsc-story__play, .vsc-story__play::after { animation: none; }
}

/* Neutraliza transform/filter/perspective que temas com menu off-canvas ou
   scroll suave aplicam no html/body — isso quebra o position:fixed do modal. */
html.vsc-modal-open,
html.vsc-modal-open body {
	transform: none !important;
	filter: none !important;
	perspective: none !important;
	will-change: auto !important;
}

/* ---------- Modal ---------- */
.vsc-modal[hidden] { display: none !important; }
.vsc-modal {
	position: fixed !important; inset: 0 !important; z-index: 99999 !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	margin: 0 !important; padding: 0 !important; border: none !important;
	background: transparent !important;
}
.vsc-modal__backdrop { position: absolute !important; inset: 0 !important; background: #000 !important; margin: 0 !important; }

.vsc-viewer {
	position: relative !important;
	width: min(100vw, 460px) !important;
	height: min(100vh, 820px) !important;
	/* dvh = altura de viewport DINÂMICA: acompanha a barra de endereço/rodapé
	   do navegador mobile em vez de assumir que ela está escondida (o que faz
	   o vh comum "vazar" conteúdo por trás da barra). Navegador sem suporte
	   ignora esta linha e mantém o vh acima como fallback. */
	height: min(100dvh, 820px) !important;
	aspect-ratio: 9 / 16;
	background: #000 !important;
	overflow: hidden !important;
	border-radius: 0 !important;
	margin: 0 !important;
}
@media (min-width: 600px) {
	.vsc-viewer { border-radius: 16px !important; box-shadow: 0 24px 70px rgba(0,0,0,.6) !important; }
}

/* Vídeo — preenche o quadro. Vídeos verticais preenchem; landscape fica com barras pretas (previsível). */
.vsc-player { position: absolute !important; inset: 0 !important; overflow: hidden !important; background: #000 !important; }
.vsc-player iframe { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; }

/* Degradê no topo: legibilidade da barra/controles e disfarça o chrome do YouTube */
.vsc-viewer::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 92px;
	background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0));
	z-index: 5; pointer-events: none;
}

/* Zonas de toque (prev/next) */
.vsc-tap {
	position: absolute !important; top: 64px !important; bottom: 150px !important;
	width: 32% !important; height: auto !important; cursor: pointer !important; z-index: 4 !important;
	background: transparent !important;
	border: none !important; box-shadow: none !important; outline: none !important;
	-webkit-appearance: none !important; appearance: none !important; padding: 0 !important; margin: 0 !important;
}
.vsc-tap:hover, .vsc-tap:focus, .vsc-tap:active { background: transparent !important; box-shadow: none !important; }
.vsc-tap--prev { left: 0 !important; right: auto !important; }
.vsc-tap--next { right: 0 !important; left: auto !important; }

/* Barra de progresso segmentada */
.vsc-progress {
	position: absolute !important; top: 10px !important; left: 10px !important; right: 10px !important;
	display: flex !important; gap: 4px !important; z-index: 6 !important;
	margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.vsc-seg { flex: 1 !important; height: 3px !important; border-radius: 3px !important; background: rgba(255,255,255,.35) !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }
/* width SEM !important: o JS anima isso via inline style (bar.style.width)
   a cada frame de progresso — !important aqui travaria a barra em 0. */
.vsc-seg > i { display: block !important; height: 100% !important; width: 0; background: #fff !important; }
.vsc-seg--done > i { width: 100%; }

/* Topbar */
.vsc-topbar {
	position: absolute !important; top: 22px !important; left: 10px !important; right: 10px !important;
	display: flex !important; justify-content: space-between !important; align-items: center !important; z-index: 6 !important;
	margin: 0 !important;
}
.vsc-ico {
	width: 40px !important; height: 40px !important; border-radius: 50% !important;
	border: none !important; background: rgba(0,0,0,.4) !important; color: #fff !important;
	line-height: 1 !important; cursor: pointer !important; box-shadow: none !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	padding: 0 !important; margin: 0 !important;
}
.vsc-ico:hover, .vsc-ico:focus { background: rgba(0,0,0,.55) !important; }
.vsc-ico__muted, .vsc-ico__unmuted { display: flex !important; align-items: center !important; justify-content: center !important; }
.vsc-ico svg { width: 22px !important; height: 22px !important; display: block !important; fill: currentColor !important; }
.vsc-close svg { width: 20px !important; height: 20px !important; }
.vsc-ico__unmuted { display: none !important; }
.vsc-mute.is-unmuted .vsc-ico__unmuted { display: flex !important; }
.vsc-mute.is-unmuted .vsc-ico__muted { display: none !important; }

/* Aviso para ativar o som (aponta para o botão de mute) */
.vsc-sound-hint {
	position: absolute !important; top: 68px !important; left: 10px !important; z-index: 7 !important;
	display: flex !important; align-items: center !important; gap: 6px !important;
	background: rgba(0,0,0,.85) !important; color: #fff !important;
	font-size: 12px !important; font-weight: 600 !important; white-space: nowrap !important;
	padding: 8px 12px !important; border-radius: 999px !important; margin: 0 !important;
	opacity: 0; transform: translateY(-4px);
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
}
.vsc-sound-hint svg { width: 15px !important; height: 15px !important; flex: 0 0 auto !important; display: block !important; fill: currentColor !important; }
.vsc-sound-hint.is-visible {
	opacity: 1; transform: translateY(0);
	animation: vsc-sound-hint-pulse 1.6s ease-in-out infinite;
}
.vsc-sound-hint__arrow {
	position: absolute; top: -6px; left: 18px;
	width: 0; height: 0;
	border-left: 6px solid transparent; border-right: 6px solid transparent;
	border-bottom: 6px solid rgba(0,0,0,.85);
}
@keyframes vsc-sound-hint-pulse {
	0%, 100% { transform: translateY(0) scale(1); }
	50% { transform: translateY(0) scale(1.05); }
}

/* Ações laterais (alinhadas com o card à esquerda) */
.vsc-actions {
	position: absolute !important; right: 10px !important; bottom: 15px !important; z-index: 6 !important;
	display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: center !important;
	margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.vsc-action {
	width: 46px !important; height: 46px !important; border-radius: 50% !important;
	border: none !important; cursor: pointer !important; color: #fff !important;
	background: rgba(0,0,0,.4) !important; box-shadow: none !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	margin: 0 !important;
	transition: transform .15s ease;
}
.vsc-action svg { width: 24px !important; height: 24px !important; display: block !important; fill: currentColor !important; }
.vsc-action--like svg { width: 26px !important; height: 26px !important; }
.vsc-action:hover { transform: scale(1.06); background: rgba(0,0,0,.55) !important; }
.vsc-action--like.is-liked,
.vsc-action--like.is-liked:hover { color: #ff3b5c !important; background: rgba(255,255,255,.95) !important; }
.vsc-action--wa,
.vsc-action--wa:hover { background: #25d366 !important; text-decoration: none !important; }
.vsc-actions button, .vsc-topbar button { padding: 0 !important; }

/* Card do produto + CTA */
.vsc-bottom {
	position: absolute !important; left: 10px !important; right: 70px !important; bottom: 16px !important; z-index: 6 !important;
	display: flex !important; flex-direction: column !important; gap: 10px !important; margin: 0 !important;
}
.vsc-card {
	display: flex !important; align-items: center !important; gap: 10px !important;
	background: rgba(255,255,255,.96) !important;
	border-radius: 12px !important; padding: 8px 10px !important; margin: 0 !important;
	text-decoration: none !important; color: #111 !important;
	box-shadow: 0 6px 18px rgba(0,0,0,.25) !important;
}
.vsc-card__img {
	width: 44px !important; height: 44px !important; border-radius: 8px !important; flex: 0 0 auto !important;
	background-size: cover !important; background-position: center !important; background-color: #eee !important;
}
.vsc-card__info { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
.vsc-card__name {
	font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.25 !important; color: #111 !important;
	display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
	margin: 0 !important;
}
.vsc-card__prices { display: flex !important; align-items: baseline !important; gap: 6px !important; }
.vsc-card__price { font-size: 14px !important; font-weight: 800 !important; color: #111 !important; }
.vsc-card__regular { font-size: 11px !important; color: #999 !important; text-decoration: line-through !important; }
.vsc-card__regular:empty { display: none !important; }

.vsc-cta {
	display: flex !important; align-items: center !important; justify-content: space-between !important;
	background: var(--vsc-accent) !important; color: #08210f !important;
	font-weight: 800 !important; font-size: 14px !important;
	padding: 12px 16px !important; border-radius: 12px !important; text-decoration: none !important; margin: 0 !important;
	box-shadow: 0 6px 18px rgba(0,0,0,.25) !important;
	transition: filter .15s ease;
}
.vsc-cta:hover { filter: brightness(.96); color: #08210f !important; }
.vsc-cta__label { color: inherit !important; }
.vsc-cta__arrow {
	width: 26px !important; height: 26px !important; border-radius: 50% !important;
	background: rgba(0,0,0,.15) !important; display: flex !important; align-items: center !important; justify-content: center !important;
	font-size: 15px !important;
}

.vsc-brand {
	position: absolute !important; right: 8px !important; bottom: 4px !important; z-index: 6 !important;
	font-size: 10px !important; color: rgba(255,255,255,.55) !important; letter-spacing: .04em !important;
	margin: 0 !important;
}

/* Toast de compartilhar */
.vsc-toast {
	position: absolute !important; left: 50% !important; bottom: 96px !important; transform: translateX(-50%);
	background: rgba(0,0,0,.85) !important; color: #fff !important; font-size: 12px !important;
	padding: 8px 14px !important; border-radius: 999px !important; z-index: 8 !important; opacity: 0;
	margin: 0 !important;
	transition: opacity .2s ease; pointer-events: none;
}
.vsc-toast.is-visible { opacity: 1; }