/*
 * Product gallery + standalone video — STRUCTURAL / STATE CSS ONLY.
 *
 * Layout, the thumbnail strip, the lightbox overlay and the lazy-video facade
 * live here because they depend on JS state. All look-and-feel (colours, radius,
 * exact sizes, the active-thumbnail treatment, play-icon styling) is meant to be
 * tuned in Impreza/WPBakery + the child theme — same split as the Finder.
 *
 * Tunable from the builder's custom CSS box without editing the plugin:
 *   --bsc-gallery-gap        gap between stage and thumbs / between thumbs
 *   --bsc-gallery-thumb      thumbnail size (square)
 *   --bsc-gallery-accent     active thumbnail + play accent colour
 */

.bsc-gallery {
	--bsc-gallery-gap: 1rem;
	--bsc-gallery-thumb: 56px;          /* compact: navigation controls, not a 2nd gallery */
	--bsc-gallery-accent: #1a4fa0;
	--bsc-gallery-max-h: 550px;         /* hard ceiling: stage media never taller than this */

	position: relative;            /* anchor for the fullscreen control */
	display: flex;
	flex-direction: column;
	gap: var(--bsc-gallery-gap);
}

/* ---- Stage (the big synced viewer) ---- */
/* The stage is a flex centring box: the product floats in the middle of the
   available space and is never cropped (object-fit: contain). On desktop it
   grows to fill the column height (see the min-width media query below) so the
   product reads as the protagonist with plenty of air around it. */
.bsc-gallery__stage {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bsc-gallery__media {
	margin: 0 auto;
	width: 100%;
	max-width: 100%;
}
.bsc-gallery__media--image {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: zoom-in;
}
.bsc-gallery__stage-img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: var(--bsc-gallery-max-h);   /* never taller than the ceiling */
	margin: 0 auto;
	object-fit: contain;
	/* Very soft, true-to-silhouette shadow (transparent PNGs) — premium, not dramatic. */
	filter: drop-shadow(0 18px 26px rgba(20, 40, 80, 0.10));
}

/* Video facade: poster as background + centred play button until clicked. */
.bsc-gallery__media--video {
	position: relative;
	aspect-ratio: 16 / 9;
	max-height: var(--bsc-gallery-max-h);
	background-size: cover;
	background-position: center;
	background-color: #000;
	cursor: pointer;
}
.bsc-gallery__bigplay,
.bsc-video__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	cursor: pointer;
}
.bsc-gallery__bigplay::after,
.bsc-video__play::after {
	content: "";
	position: absolute;
	left: 54%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent var(--bsc-gallery-accent, #1a4fa0);
}

/* The actual player fills the stage once built. */
.bsc-gallery__media--video.is-playing {
	cursor: default;
	background: #000;
}
.bsc-gallery__video {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 100%;
}
.bsc-gallery__embed {
	position: absolute;
	inset: 0;
}
.bsc-gallery__embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---- Thumbnail strip ---- */
.bsc-gallery__thumbs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;   /* right-aligned strip */
	align-items: center;
	gap: 0.5rem;                 /* tight, compact row */
}
.bsc-gallery__thumb-item {
	margin: 0;
}
.bsc-gallery__thumb {
	position: relative;
	display: block;
	width: var(--bsc-gallery-thumb);
	height: var(--bsc-gallery-thumb);
	padding: 0;
	border: 1px solid #edf0f4;            /* very subtle */
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(20, 40, 80, 0.04);   /* almost none */
	transition: border-color 0.18s ease;
}
.bsc-gallery__thumb img,
.bsc-gallery__thumb-blank {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bsc-gallery__thumb:hover {
	border-color: rgba(26, 79, 160, 0.35);   /* whisper-soft hover */
}
.bsc-gallery__thumb.is-active {
	/* Differentiated ONLY by a clean, thin blue border — no size/shadow change. */
	border: 1.5px solid var(--bsc-gallery-accent, #1a4fa0);
}
/* Small play badge on a video thumbnail. */
.bsc-gallery__thumb .bsc-gallery__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent #fff;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
	pointer-events: none;
}

/* ---- 360 viewer (drag-to-rotate) ---- */
.bsc-gallery__media--360 {
	position: relative;
	aspect-ratio: 16 / 9;
	max-height: var(--bsc-gallery-max-h);
	background-size: cover;
	background-position: center;
	background-color: transparent;
	cursor: pointer;
}
.bsc-360 {
	position: relative;
	width: 100%;
	height: 100%;
	touch-action: pan-y;          /* let the page scroll vertically; we own horizontal */
	cursor: grab;
}
.bsc-360:active { cursor: grabbing; }
.bsc-360__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;         /* drags are handled on the container */
}
/* Centred hint overlay; fades out on first drag (.is-hidden). */
.bsc-360__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: opacity 0.4s ease;
}
.bsc-360__overlay.is-hidden { opacity: 0; }
.bsc-360__hint {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: #fff;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
}
.bsc-360__arrows {
	display: flex;
	align-items: center;
	gap: 18px;
}
.bsc-360__arrow {
	width: 36px;
	height: 36px;
	fill: #fff;
}
.bsc-360__arrow--l { animation: bsc-360-left 1.8s infinite ease-in-out; }
.bsc-360__arrow--r { animation: bsc-360-right 1.8s infinite ease-in-out; }
.bsc-360__label {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 3px;
}
@keyframes bsc-360-left {
	0%, 100% { transform: translateX(0); opacity: 0.3; }
	50% { transform: translateX(-26px); opacity: 1; }
}
@keyframes bsc-360-right {
	0%, 100% { transform: translateX(0); opacity: 0.3; }
	50% { transform: translateX(26px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.bsc-360__arrow--l, .bsc-360__arrow--r { animation: none; }
}
/* "360" badge on the thumbnail. */
.bsc-gallery__thumb .bsc-gallery__badge360 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}

/* ---- Standalone Product Video block ---- */
.bsc-video {
	width: 100%;
}
.bsc-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	background-color: #000;
	cursor: pointer;
}
.bsc-video__frame video,
.bsc-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---- Fullscreen control (discreet, bottom-left — opens the lightbox) ---- */
.bsc-gallery__fs {
	position: absolute;
	left: 0;
	/* Vertically centred against the thumbnail row (offset by the gallery's
	   bottom padding, which only applies on desktop — see the media query). */
	bottom: calc((var(--bsc-gallery-thumb) - 32px) / 2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: var(--bsc-gallery-accent, #1a4fa0);
	cursor: pointer;
	opacity: 0.4;                 /* auxiliary control — almost invisible */
	transition: opacity 0.2s ease;
}
.bsc-gallery__fs:hover {
	opacity: 0.85;
}
.bsc-gallery__fs svg,
.bsc-gallery__fs img {
	display: block;
	width: 18px;
	height: 18px;
}

/* ---- Desktop: the gallery fills the column height; product floats centred,
        thumbnails sit toward the bottom — a roomy, premium product viewer. ---- */
@media (min-width: 769px) {
	.bsc-gallery {
		--bsc-gallery-pad-top: clamp(1.25rem, 3vh, 2.25rem);
		--bsc-gallery-pad-bottom: clamp(0.6rem, 1.4vh, 1rem);   /* thumbs rest near the bottom edge */
		min-height: min(78vh, 720px);
		padding-top: var(--bsc-gallery-pad-top);
		padding-bottom: var(--bsc-gallery-pad-bottom);
	}
	/* Keep the control centred on the (lower) thumbnail row. */
	.bsc-gallery__fs {
		bottom: calc(var(--bsc-gallery-pad-bottom) + (var(--bsc-gallery-thumb) - 32px) / 2);
	}
	.bsc-gallery__stage {
		flex: 1 1 auto;
		min-height: 0;            /* allow the flex child to shrink so max-height works */
	}
	.bsc-gallery__media--image {
		height: 100%;
	}
	/* Fixed length only — a percentage inside min() resolves against the flex
	   stage's indefinite height and silently disables the cap. */
	.bsc-gallery__stage-img {
		max-height: var(--bsc-gallery-max-h);
	}
	.bsc-gallery__media--video,
	.bsc-gallery__media--360 {
		max-height: var(--bsc-gallery-max-h);
	}
}

/* ---- Fullscreen popup (custom — replaces the old Magnific Popup delegation)
   Structural/layout only, same split as the rest of this file — colours,
   the card's background treatment, exact button/thumb styling, etc. are
   tuned in Impreza-child/style.css. This is what data-bsc-gallery-fs (or
   clicking the stage image) opens; the popup DOM itself doesn't exist until
   JS builds it on open, and is fully removed on close. */
.bsc-gallery-popup {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	/* True fullscreen — no outer gutter. The card below is sized to fill this
	   exactly (100vw/100vh via inset:0), so it reads as one continuous
	   surface rather than a modal floating over visible page content. */
}
.bsc-gallery-popup__card {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.bsc-gallery-popup__stage {
	flex: 1 1 auto;
	min-height: 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Safe zone: the footer (thumbnails/dots/price) sits below in normal flex
	   flow, so it can never overlap the stage — only the horizontal padding
	   here is load-bearing, keeping the image clear of the absolutely
	   positioned prev/next chevrons at the card's edges. Top padding just
	   keeps a tall image off the close button. */
	padding: 4rem 7rem;
}
.bsc-gallery-popup__media {
	margin: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bsc-gallery-popup__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	margin: 0 auto;
	/* Belt-and-suspenders alongside the img[draggable=false] attribute set in
	   JS — without both, the browser's native image-drag can still hijack a
	   mouse-based swipe mid-gesture in some browsers. */
	-webkit-user-drag: none;
	user-select: none;
}
/* The 360 viewer reuses .bsc-gallery__media--360 / .bsc-360 wholesale (same
   markup build360Stage() already produces for the inline stage) — sizing it
   to actually fill the popup (instead of the inline stage's fixed box) needs
   to beat the child theme's own `.bsc-gallery .bsc-gallery__media--360`
   override (same 2-class specificity + load-order is not guaranteed between
   a plugin and theme stylesheet), so that correction lives in
   Impreza-child/style.css right next to the rule it overrides, not here. */
.bsc-gallery-popup__close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	z-index: 2;
	border: 0;
	background: none;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}
.bsc-gallery-popup__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	border: 0;
	background: none;
	cursor: pointer;
	padding: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bsc-gallery-popup__prev { left: 0.5rem; }
.bsc-gallery-popup__next { right: 0.5rem; }
.bsc-gallery-popup__nav svg {
	display: block;
	width: 32px;
	height: 32px;
}
.bsc-gallery-popup__footer {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.5rem;
}
.bsc-gallery-popup__thumbs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.bsc-gallery-popup__thumb {
	position: relative;
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	cursor: pointer;
	overflow: hidden;
}
.bsc-gallery-popup__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	/* contain, not cover — product photos must never be cropped/distorted
	   inside the thumbnail, even when their aspect ratio isn't square. */
	object-fit: contain;
}
.bsc-gallery-popup__badge360 {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.bsc-gallery-popup__dots {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 auto;
}
.bsc-gallery-popup__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
/* Sizing/colour is the real .w-btn.us-btn-style_7 skin (same button system
   used everywhere else on this site) — only flex placement lives here. */
.bsc-gallery-popup__price {
	flex: 0 0 auto;
	white-space: nowrap;
}
body.bsc-gallery-popup-open { overflow: hidden; }

/* Mobile: less horizontal stage padding (the chevrons sit closer to the
   edge), footer wraps, price button drops to its own centred row. Thumbnails
   stay 64x64 — plenty of room once the footer is allowed to wrap. */
@media (max-width: 700px) {
	.bsc-gallery-popup__stage { padding: 2rem 3.5rem; }
	.bsc-gallery-popup__footer { flex-wrap: wrap; justify-content: center; }
	.bsc-gallery-popup__price { order: 3; }
}

/* ---- Mobile: thumbnails scroll horizontally instead of wrapping ---- */
@media (max-width: 768px) {
	.bsc-gallery__thumbs {
		flex-wrap: nowrap;
		justify-content: flex-start;   /* keep the first thumb reachable when scrolling */
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.bsc-gallery__thumb {
		flex: 0 0 auto;
	}
}

/* Tablet + mobile (<=1024px): the bottom-left "vertically centred on the
   thumbnail row" position was designed for desktop's much wider column,
   where flex-end-aligned thumbs leave a big gap on the left for it to sit
   in. Below 1024px that gap shrinks — confirmed via getBoundingClientRect()
   that the icon and the first thumbnail's boxes genuinely overlap in the
   ~769-815px band specifically (touching/adjacent either side of that), and
   on true mobile (<=768px, where thumbs switch to a left-aligned scrolling
   strip) they'd collide at every width, which is why this control used to
   just be hidden there entirely instead. Repositioning to the stage's own
   top-right corner sidesteps the thumbnail row's width/alignment entirely,
   fixing both problems with one rule and restoring the control on mobile
   instead of hiding it. Desktop (>1024px) is untouched. */
@media (max-width: 1024px) {
	.bsc-gallery__fs {
		left: auto;
		right: 0.75rem;
		top: 0.75rem;
		bottom: auto;
	}
}

/* ---- Stock Machines: same fullscreen control, opening over a RoyalSlider
   card instead of a .bsc-gallery — see bsc_stock_detail_gallery_shortcode().
   Its own positioning (keyed to --bsc-gallery-thumb / --bsc-gallery-pad-bottom)
   assumes the hero gallery's thumbnail row, which doesn't exist here, so this
   overrides it with a plain top-right corner placement instead — same spot
   RoyalSlider's own (now-disabled) fullscreen button used to sit in. */
.bsc-stock-gallery-wrap {
	position: relative;
}
.bsc-gallery__fs--external {
	left: auto;
	right: 0.75rem;
	top: 0.75rem;
	bottom: auto;
	z-index: 5; /* above the slider's own slides/nav */
}