/**
 * NY Product Video Gallery - frontend styles.
 * Logical properties only: RTL-safe by construction.
 */

:root {
	--nypvg-accent: #3C50E0;
	--nypvg-ratio: auto;
	--nypvg-radius: 10px;
}

.nypvg-slide {
	position: relative;
	overflow: hidden;
}

/* PhotoSwipe / zoom proxy: read by WooCommerce, never displayed. */
.nypvg-pswp-proxy {
	display: none !important;
}

/* jquery.zoom must never paint over the video slide (it would hide the play button). */
.nypvg-slide .zoomImg {
	display: none !important;
}

.nypvg-slide--standalone {
	margin-block-start: 16px;
	border-radius: var(--nypvg-radius);
}

.nypvg-media {
	position: relative;
	display: block;
	inline-size: 100%;
	aspect-ratio: var(--nypvg-ratio, auto);
	background: #0b0f19;
	overflow: hidden;
	line-height: 0;
}

.nypvg-slide--standalone .nypvg-media {
	border-radius: var(--nypvg-radius);
}

.nypvg-media__poster,
.nypvg-media__video,
.nypvg-media__frame,
.nypvg-media > .nypvg-player {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	margin: 0;
	object-fit: cover;
}

/* A slide without a known ratio keeps the poster's natural height. */
.nypvg-media__poster {
	block-size: auto;
}

.nypvg-slide[style*="--nypvg-ratio"] .nypvg-media__poster {
	block-size: 100%;
}

/* A started player shows the whole frame, letterboxed if needed. */
.nypvg-media--playing > .nypvg-player {
	object-fit: contain;
	background: #000;
}

.nypvg-media__frame {
	border: 0;
}

.nypvg-media--playing > iframe.nypvg-player {
	min-block-size: 240px;
}

/* ---------- Play button ---------- */

.nypvg-play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
	color: #fff;
	background: transparent;
	z-index: 3;
	transition: transform .18s ease, background-color .18s ease, opacity .18s ease;
	-webkit-tap-highlight-color: transparent;
}

/* RTL: translate(-50%) must be mirrored. */
[dir="rtl"] .nypvg-play,
.rtl .nypvg-play {
	transform: translate(50%, -50%);
}

/* Whole-poster trigger: the entire slide is the click target, icon centered by flexbox. */
.nypvg-play.nypvg-play--cover,
[dir="rtl"] .nypvg-play.nypvg-play--cover,
.rtl .nypvg-play.nypvg-play--cover {
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	transform: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .18));
}

.nypvg-play--cover:hover .nypvg-play__icon {
	transform: scale(1.06);
}

.nypvg-play--cover:focus-visible {
	outline-offset: -4px;
}

.nypvg-play__icon {
	transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.nypvg-play:focus-visible {
	outline: 3px solid var(--nypvg-accent);
	outline-offset: 3px;
}

.nypvg-play__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 64px;
	block-size: 64px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	color: #0b0f19;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}

.nypvg-play__icon svg {
	margin-inline-start: 3px;
}

[dir="rtl"] .nypvg-play__icon svg {
	margin-inline-start: 0;
	margin-inline-end: 3px;
}

.nypvg-play:hover .nypvg-play__icon,
.nypvg-play:focus-visible .nypvg-play__icon {
	background: var(--nypvg-accent);
	color: #fff;
}

.nypvg-play--pill .nypvg-play__icon {
	inline-size: auto;
	block-size: 48px;
	padding-inline: 22px;
	border-radius: 999px;
}

.nypvg-play--minimal .nypvg-play__icon {
	background: rgba(11, 15, 25, .55);
	color: #fff;
	box-shadow: none;
	backdrop-filter: blur(4px);
}

.nypvg-play__label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
}

.nypvg-play--corner {
	inset-block-start: auto;
	inset-block-end: 14px;
	inset-inline-start: auto;
	inset-inline-end: 14px;
	transform: none;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(11, 15, 25, .6);
	backdrop-filter: blur(6px);
}

[dir="rtl"] .nypvg-play--corner,
.rtl .nypvg-play--corner {
	transform: none;
}

.nypvg-play--corner .nypvg-play__icon {
	inline-size: 20px;
	block-size: 20px;
	background: transparent;
	color: #fff;
	box-shadow: none;
}

.nypvg-play--corner .nypvg-play__icon svg {
	margin-inline: 0;
}

/* ---------- Autoplay pause toggle (WCAG 2.2.2) ---------- */

.nypvg-play--toggle {
	inset-block-start: auto;
	inset-block-end: 14px;
	inset-inline-end: auto;
	inset-inline-start: 14px;
	transform: none;
	gap: 6px;
	min-inline-size: 44px;
	min-block-size: 32px;
	padding: 7px 13px;
	border-radius: 999px;
	color: #fff;
	background: rgba(11, 15, 25, .74);
	backdrop-filter: blur(6px);
}

[dir="rtl"] .nypvg-play--toggle,
.rtl .nypvg-play--toggle {
	transform: none;
}

.nypvg-play--toggle .nypvg-play__icon {
	inline-size: 18px;
	block-size: 18px;
	background: transparent;
	color: #fff;
	box-shadow: none;
}

.nypvg-play--toggle .nypvg-play__icon svg {
	margin-inline: 0;
}

.nypvg-play--toggle:hover,
.nypvg-play--toggle:focus-visible {
	background: var(--nypvg-accent);
}

.nypvg-play--toggle:hover .nypvg-play__icon,
.nypvg-play--toggle:focus-visible .nypvg-play__icon {
	background: transparent;
	color: #fff;
}

/* ---------- Click-to-load consent screen ---------- */

.nypvg-consent {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	inline-size: 100%;
	padding: 22px;
	color: #f4f6fb;
	background: #101623;
	text-align: start;
	line-height: 1.45;
}

.nypvg-media--consent {
	aspect-ratio: var(--nypvg-ratio);
	display: flex;
	align-items: center;
}

.nypvg-lightbox__stage--consent {
	display: flex;
	align-items: center;
	justify-content: center;
}

.nypvg-consent__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.nypvg-consent__body {
	margin: 0;
	font-size: 13.5px;
	color: #cfd6e6;
}

.nypvg-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 2px;
}

.nypvg-consent__btn {
	min-block-size: 44px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.nypvg-consent__btn--accept {
	color: #fff;
	background: var(--nypvg-accent);
}

.nypvg-consent__btn--cancel {
	color: #f4f6fb;
	background: transparent;
	border-color: rgba(244, 246, 251, .45);
}

.nypvg-consent__btn:focus-visible,
.nypvg-consent__remember input:focus-visible,
.nypvg-consent__link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.nypvg-consent__remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #cfd6e6;
	cursor: pointer;
}

.nypvg-consent__remember input {
	inline-size: 18px;
	block-size: 18px;
	margin: 0;
	accent-color: var(--nypvg-accent);
}

.nypvg-consent__link {
	font-size: 13px;
	color: #cfd6e6;
	text-decoration: underline;
}

.nypvg-consent__link:hover,
.nypvg-consent__link:focus-visible {
	color: #fff;
}

/* ---------- Shop loop badge ---------- */

.nypvg-loop-badge {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(11, 15, 25, .72);
	backdrop-filter: blur(6px);
	pointer-events: none;
}

.nypvg-loop-badge svg {
	inline-size: 13px;
	block-size: 13px;
}

li.product,
.wc-block-grid__product,
.product.type-product {
	position: relative;
}

/* ---------- Lightbox ---------- */

.nypvg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(6, 9, 16, .92);
	opacity: 0;
	transition: opacity .2s ease;
}

.nypvg-lightbox.is-open {
	opacity: 1;
}

.nypvg-lightbox__inner {
	position: relative;
	inline-size: min(1100px, 100%);
	max-block-size: 88vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nypvg-lightbox__stage {
	max-inline-size: 100%;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}

.nypvg-lightbox__stage.is-frame,
.nypvg-lightbox__stage--consent {
	inline-size: 100%;
}

.nypvg-lightbox__stage iframe {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 88vh;
	aspect-ratio: 16 / 9;
	border: 0;
	background: #000;
}

/* Native files size themselves: a 9:16 reel stays 9:16, never letterboxed in 16:9. */
.nypvg-lightbox__stage video {
	display: block;
	inline-size: auto;
	block-size: auto;
	max-inline-size: 100%;
	max-block-size: 88vh;
	min-inline-size: min(320px, 100%);
	background: #000;
}

.nypvg-lightbox__close {
	position: absolute;
	inset-block-start: -46px;
	inset-inline-end: 0;
	inline-size: 38px;
	block-size: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	color: #fff;
	background: rgba(255, 255, 255, .14);
	transition: background-color .18s ease;
}

.nypvg-lightbox__close:hover,
.nypvg-lightbox__close:focus-visible {
	background: var(--nypvg-accent);
}

.nypvg-lightbox__close:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

body.nypvg-lock {
	overflow: hidden;
}

/* ---------- Responsive / a11y ---------- */

@media (max-width: 782px) {
	.nypvg-play__icon {
		inline-size: 52px;
		block-size: 52px;
	}

	.nypvg-lightbox {
		padding: 16px;
	}

	.nypvg-lightbox__close {
		inset-block-start: -44px;
	}

	.nypvg-slide--desktop-only {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nypvg-play,
	.nypvg-lightbox,
	.nypvg-lightbox__close {
		transition: none;
	}
}

/* ---------- Custom theme galleries (injected attachment upgraded in JS) ---------- */

.nypvg-stage-marked,
.nypvg-thumb-marked,
.flex-control-thumbs li.nypvg-thumb {
	position: relative;
}

.nypvg-play--overlay {
	z-index: 5;
}

.nypvg-play--mini .nypvg-play__icon {
	inline-size: 34px;
	block-size: 34px;
}

.nypvg-thumb-badge {
	position: absolute;
	inset-block-end: 6px;
	inset-inline-end: 6px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 22px;
	block-size: 22px;
	border-radius: 999px;
	color: #fff;
	background: rgba(11, 15, 25, .78);
	pointer-events: none;
}

.nypvg-thumb-badge svg {
	margin-inline-start: 1px;
}

[dir="rtl"] .nypvg-thumb-badge svg {
	margin-inline-start: 0;
	margin-inline-end: 1px;
}

/* Hidden until the JS decides the theme gallery could not host the video. */
.nypvg-fallback[hidden] {
	display: none !important;
}

.nypvg-fallback--placed {
	display: block;
	inline-size: 100%;
	margin-block-start: 16px;
}

/* ---------- Shop cards: muted looping preview ---------- */

.nypvg-loop-frame {
	position: absolute;
	z-index: 2;
	display: block;
	overflow: hidden;
	pointer-events: none;
	border-radius: inherit;
}

.nypvg-loop-video {
	position: absolute;
	inset: 0;
	z-index: 2;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	margin: 0;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	background: transparent;
	transition: opacity .35s ease;
}

.nypvg-loop-host--playing .nypvg-loop-video,
.nypvg-loop-frame.nypvg-loop-host--playing .nypvg-loop-video {
	opacity: 1;
}

/* Badge relocated inside the card image (clear of the theme's "new" / sale badges). */
.nypvg-loop-badge.nypvg-loop-badge--in-media {
	inset-block-start: auto;
	inset-block-end: var(--nypvg-badge-offset, 10px);
	inset-inline-start: auto;
	inset-inline-end: var(--nypvg-badge-offset, 10px);
	z-index: 3;
	transition: opacity .25s ease;
}

.nypvg-loop-host--playing .nypvg-loop-badge--in-media {
	opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
	.nypvg-loop-video,
	.nypvg-loop-badge--in-media {
		transition: none;
	}
}