/**
 * Product Video — player styles.
 * Floating mini player pinned bottom-right at ALL widths (desktop + mobile):
 * autoplay loop → Expand (sound, centred overlay) → Close → reopen pill.
 */

.pvp-video {
	--pvp-ratio: 9 / 16;     /* overridden inline by the shortcode/admin default */
	--pvp-accent: #eaa0aa;   /* fallback pill colour (JS matches Add to Cart) */
	width: 100%;
	margin: 0; /* the player floats (fixed), so the container takes no space */
}

/* Mini floating player — bottom-right corner. */
.pvp-video__player {
	position: fixed;
	bottom: 84px;
	right: 12px;
	width: 150px;
	z-index: 99990;
	aspect-ratio: var(--pvp-ratio);
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}

.pvp-video__player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Backdrop + reopen pill are hidden until their state is active. */
.pvp-video__reopen,
.pvp-video__backdrop {
	display: none;
}

/* Round icon buttons (expand / close). */
.pvp-video__full,
.pvp-video__close {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 6px;
	width: 28px;
	height: 28px;
	padding: 0;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	z-index: 3;
}

.pvp-video__full  { left: 6px; }
.pvp-video__close { right: 6px; font-size: 18px; line-height: 1; }

.pvp-video__full svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Expanded: large centred overlay (works on iOS). */
.pvp-video.is-expanded .pvp-video__backdrop {
	display: block;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .85);
	z-index: 99991;
}

.pvp-video.is-expanded .pvp-video__player {
	top: 50%;
	bottom: auto;
	left: 50%;
	right: auto;
	transform: translate(-50%, -50%);
	height: 80vh;        /* enlarged video = 80% of the window height */
	width: auto;         /* width follows the video's aspect ratio */
	max-width: 92vw;     /* never overflow a narrow (mobile) screen */
	z-index: 99992;
}

.pvp-video.is-expanded .pvp-video__full {
	display: none; /* already large */
}

/* Reopen pill. */
.pvp-video__reopen {
	position: fixed;
	bottom: 84px;
	right: 12px;
	z-index: 99990;
	align-items: center;
	gap: 6px;
	background: var(--pvp-accent);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
	cursor: pointer;
}

/* Closed state: hide player, show pill. */
.pvp-video.is-closed .pvp-video__player,
.pvp-video.is-closed .pvp-video__backdrop {
	display: none;
}

.pvp-video.is-closed .pvp-video__reopen {
	display: inline-flex;
}

/* ============================================================
   Shoppable video card — [pvp_card]
   Inline card: clean 9:16 video + Unmute + title + Buy Now.
   Direction: dark surface, tan accents (matches the beauty mockup).
   ============================================================ */

.pvp-card {
	--pvp-ratio: 9 / 16;
	--pvp-card-surface: #000;
	--pvp-card-title: #c9b29a;   /* warm tan */
	max-width: 420px;
	margin: 0 auto 24px;
	background: var(--pvp-card-surface);
	border-radius: 16px;
	overflow: hidden;
}

.pvp-card__video {
	position: relative;
	width: 100%;
	aspect-ratio: var(--pvp-ratio);
	background: #000;
}

.pvp-card__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Product title. !important so the theme's paragraph styles can't override. */
.pvp-card__title {
	margin: 18px 18px 16px;
	text-align: center !important;
	color: var(--pvp-card-title) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: .2px;
}

/* Buy Now — uses the theme's global button palette (Kadence). Not full width.
   !important so the theme's link/button styles can't override the card button. */
.pvp-card__cta {
	padding: 0 24px 28px;
	text-align: center;
}

.pvp-card__buy {
	display: inline-block !important;
	padding: 12px 28px !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	background: var(--global-palette-btn-bg, #1a1a1a) !important;
	color: var(--global-palette-btn, #fff) !important;
	transition: background .15s ease, color .15s ease;
}

.pvp-card__buy:hover,
.pvp-card__buy:focus-visible {
	background: var(--global-palette-btn-bg-hover, var(--global-palette-btn-bg, #1a1a1a)) !important;
	color: var(--global-palette-btn-hover, var(--global-palette-btn, #fff)) !important;
}