/* YB Product Gallery - version 3.2.2
 *
 * Section index:
 * - Inline gallery layout, aspect-ratio based sizing (default) with a
 *   fixed-height fallback mode, min-height safety net, static border-
 *   radius fallback matching the control default
 * - !important on width/height/max-width/max-height/object-fit for
 *   every <img> the gallery controls, on the main box's border-radius and
 *   overflow, and on thumbnail border/background (including explicit
 *   hover/focus/active overrides) - this site's theme applies its own
 *   global rules to images and buttons (confirmed directly in DevTools:
 *   .woocommerce img { height: auto; }, and a button:hover/:focus/:active
 *   background) that outrank our plain single-class selectors under
 *   normal CSS specificity, no matter what order the stylesheets load in
 * - Drag cursors (grab/grabbing) on the main image and thumbnail strip
 * - Video slides (poster + play button, thumbnail play badge, watch-link
 *   fallback for blocked embeds)
 * - Lightbox (overlay, toolbar, arrows as floating overlays, zoomed media)
 * - Magnifier lens
 * - Progress bar: reflects the current slide's position among all slides
 *   (not thumbnail scroll), with a grouped prev/next arrow pair that only
 *   ever moves as a unit and an optional counter
 */

.ybsb-gallery-wrapper {
	display: block;
}

.ybsb-gallery-layout-row {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ybsb-gallery-stage {
	position: relative;
	flex: 1;
	min-width: 0;
	min-height: 200px;
}

.ybsb-gallery-main {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	min-height: 200px;
	overflow: hidden;
	background-color: #f5f5f5;
	border-radius: 8px;
	cursor: grab;
	touch-action: pan-y;
}

.ybsb-gallery-main.ybsb-gallery-dragging {
	cursor: grabbing;
}

.ybsb-gallery-thumbs-track.ybsb-gallery-dragging {
	cursor: grabbing;
}

/* Only reachable if the visitor's browser predates aspect-ratio support
   (Safari <15, Chrome <88, Firefox <89 - effectively none by 2026, but
   costs nothing to cover). Falls back to a fixed height rather than
   collapsing. */
@supports not (aspect-ratio: 1 / 1) {
	.ybsb-gallery-main {
		height: 480px;
	}
}

/* !important on the box-model and fit properties below is intentional and
   load-bearing, not a shortcut: this site's theme applies its own global
   rules to every <img> (e.g. .woocommerce img { height: auto; ... }),
   which - being a class+tag selector - outrank our own single-class
   .ybsb-gallery-slide selector under normal CSS specificity rules, no
   matter what order the stylesheets load in. That's a real, confirmed,
   site-specific conflict (seen directly in DevTools), not a hypothetical
   one, so overriding it here is the correct fix rather than raising our
   own selector's specificity to chase a moving target. */
.ybsb-gallery-slide {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

/* The frame above always stays the exact same box (100% x 100%, stacked
   identically) so crossfading between two differently-shaped photos never
   shows the outgoing/incoming image at two different sizes/positions at
   once (that mismatch is what caused the ghosting). Only the actual <img>
   inside shrink-wraps to its own rendered content - that's what makes
   Image Border Radius and the Image Adjustment filters clip/apply to the
   real visible photo instead of an invisible box around it. */
.ybsb-gallery-slide-img,
.ybsb-gallery-video-poster {
	position: relative;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
}

.ybsb-gallery-slide.ybsb-active {
	opacity: 1;
	pointer-events: auto;
}

.ybsb-gallery-transition-slide .ybsb-gallery-slide {
	transform: translateX(30px);
}

.ybsb-gallery-transition-slide .ybsb-gallery-slide.ybsb-active {
	transform: translateX(0);
}

.ybsb-gallery-transition-none .ybsb-gallery-slide {
	transition: none;
}

.ybsb-gallery-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 3px solid rgba(0, 0, 0, 0.1);
	border-top-color: #1a1a1a;
	border-radius: 50%;
	animation: ybsb-gallery-spin 0.7s linear infinite;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.ybsb-gallery-main.ybsb-loading .ybsb-gallery-spinner {
	opacity: 1;
}

@keyframes ybsb-gallery-spin {
	to {
		transform: rotate(360deg);
	}
}

.ybsb-gallery-arrow {
	position: absolute;
	top: auto;
	bottom: var(--ybsb-gallery-arrow-bottom-spacing, 10px);
	transform: none;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
}

.ybsb-gallery-arrow svg {
	stroke: #1a1a1a;
}

.ybsb-gallery-arrow-prev {
	left: 10px;
}

.ybsb-gallery-arrow-next {
	right: 10px;
}

.ybsb-gallery-thumbs {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ybsb-gallery-thumbs-track {
	justify-content: flex-start;
	display: flex;
	gap: 8px;
	overflow: auto;
	max-width: 100%;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
	touch-action: pan-y;
}

.ybsb-gallery-thumbs-track::-webkit-scrollbar {
	display: none;
}

.ybsb-gallery-thumb {
	position: relative;
	flex-shrink: 0;
	width: 70px;
	height: 70px;
	padding: 0;
	border: 2px solid #dddddd;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	background: none;
	outline: none;
	transition: border-color 0.15s ease;
}

/* This site's theme applies its own background to buttons on hover/
   focus/active (button:hover etc - a pseudo-class + tag selector), which
   outranks a plain .ybsb-gallery-thumb base rule the same way
   .woocommerce img beat our height rule earlier - confirmed directly by
   the pink fill showing on hover/tap/active with no such color anywhere
   in this plugin's own CSS. Overriding every state explicitly, not just
   the base one, is the actual fix. */
.ybsb-gallery-thumb:hover,
.ybsb-gallery-thumb:focus,
.ybsb-gallery-thumb:focus-visible,
.ybsb-gallery-thumb:active {
	background: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.ybsb-gallery-thumb.ybsb-active {
	border-color: #1a1a1a;
}

.ybsb-gallery-thumb-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(0, 0, 0, 0.1);
	border-top-color: #1a1a1a;
	border-radius: 50%;
	animation: ybsb-gallery-spin 0.7s linear infinite;
}

.ybsb-gallery-thumb img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.ybsb-gallery-thumb img.ybsb-loaded {
	opacity: 1;
}

.ybsb-gallery-bullets {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.ybsb-gallery-bullet {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: #dddddd;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ybsb-gallery-bullet.ybsb-active {
	background-color: #1a1a1a;
}

.ybsb-gallery-editor-notice {
	padding: 12px;
	border: 1px dashed #cccccc;
	color: #777777;
	font-size: 0.9em;
}

/* ---- Video slides ---- */

.ybsb-gallery-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	border: none;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.ybsb-gallery-video-play-icon {
	display: inline-flex;
	color: #ffffff;
	font-size: 22px;
}

.ybsb-gallery-video-embedded {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.ybsb-gallery-thumb-video {
	position: relative;
}

.ybsb-gallery-thumb-video::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #ffffff;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}

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

.ybsb-lightbox-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.92);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ybsb-lightbox-overlay[hidden] {
	display: none;
}

.ybsb-lightbox-inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 20px;
	box-sizing: border-box;
}

.ybsb-lightbox-btn {
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}

.ybsb-lightbox-btn svg {
	stroke: #ffffff;
}

.ybsb-lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2;
}

.ybsb-lightbox-toolbar {
	position: absolute;
	top: 20px;
	left: 20px;
	display: flex;
	gap: 8px;
	z-index: 2;
}

.ybsb-lightbox-stage {
	position: relative;
	width: 100%;
	max-width: 80vw;
	max-height: 80vh;
	flex: 1;
	min-height: 0;
}

/* Arrows are absolutely positioned overlays rather than flex siblings of
   the media-wrap - a flex row here previously used align-items:center,
   which sizes flex items to their own content height instead of
   stretching them, so .ybsb-lightbox-media-wrap's height:100% had nothing
   to resolve against and the image rendered at a small fallback size.
   Floating the arrows removes that flex relationship entirely: the
   media-wrap now always gets the stage's full box. */
.ybsb-lightbox-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
}

.ybsb-lightbox-arrow-prev {
	left: 12px;
}

.ybsb-lightbox-arrow-next {
	right: 12px;
}

/* "Bottom" Arrow Position (see the widget's Style > Lightbox control)
   moves both arrows to the bottom corners instead of the vertical
   sides - set per breakpoint, e.g. Sides on desktop, Bottom on mobile,
   where a narrow screen leaves little room beside the image. Applied
   entirely through that control's own generated CSS below; nothing
   static needed here beyond the Sides default above. */

.ybsb-lightbox-media-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: none;
}

.ybsb-lightbox-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border: none;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
}

.ybsb-lightbox-video-play[hidden] {
	display: none;
}

/* Same confirmed site-specific issue already fixed once for
   .ybsb-gallery-thumb above: the theme applies its own background on
   button:hover/:focus/:active, which outranks a plain base rule here. */
.ybsb-lightbox-video-play:hover,
.ybsb-lightbox-video-play:focus,
.ybsb-lightbox-video-play:focus-visible,
.ybsb-lightbox-video-play:active {
	background-color: rgba(0, 0, 0, 0.55) !important;
	outline: none !important;
	box-shadow: none !important;
}

.ybsb-lightbox-video-play-icon {
	display: inline-flex;
	color: #ffffff;
	fill: #ffffff;
	font-size: 26px;
}

.ybsb-lightbox-video-play-icon svg,
.ybsb-lightbox-video-play-icon i {
	width: 26px;
	height: 26px;
	font-size: 26px;
}

.ybsb-lightbox-video-embedded {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.ybsb-lightbox-media {
	/* Shrink-wrapped to its own rendered content (not width/height:100%)
	   so the element's box matches the visible photo exactly - the same
	   fix already applied to the main gallery. width/height:100% always
	   fills the full box regardless of the photo's own shape, so a
	   letterboxed photo's rounded "corner" sits in empty space with
	   nothing there to clip, at any radius value. Real photos are almost
	   always higher-resolution than this box anyway, so this still fills
	   the available space exactly the same as before in practice - it
	   only stops upscaling a source image smaller than the box. */
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	cursor: grab;
	transition: transform 0.2s ease;
	user-select: none;
	-webkit-user-drag: none;
}

.ybsb-gallery-slide-img,
.ybsb-gallery-video-poster,
.ybsb-lightbox-media {
	filter:
		contrast(var(--ybsb-gallery-img-contrast, 100%))
		saturate(var(--ybsb-gallery-img-saturate, 100%))
		brightness(var(--ybsb-gallery-img-brightness, 100%));
}

.ybsb-lightbox-media-wrap.ybsb-panning .ybsb-lightbox-media {
	cursor: grabbing;
	transition: none;
}

/* ---- Magnifier ---- */

.ybsb-gallery-magnifier-lens {
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	height: 150px;
	border: 2px solid #ffffff;
	background-repeat: no-repeat;
	pointer-events: none;
	display: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.ybsb-gallery-magnifier-lens.ybsb-visible {
	display: block;
}

.ybsb-gallery-magnifier-circle {
	border-radius: 50%;
}

.ybsb-gallery-magnifier-square {
	border-radius: 4px;
}

.ybsb-gallery-main.ybsb-magnifier-active {
	cursor: none;
}

/* ---- Progress bar - reflects the current slide's position among all
   slides (not thumbnail scroll), with a grouped prev/next arrow pair
   (never individually reordered) and an optional counter. ---- */

.ybsb-gallery-progress-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.ybsb-gallery-progress-nav {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

/* The arrow PAIR is one flex item, so Arrow Group Position only ever
   swaps this whole group against the bar - it can never reorder the
   two arrows relative to each other. */
.ybsb-gallery-progress-arrows {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
}

.ybsb-gallery-progress-arrow {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: #1a1a1a;
}

.ybsb-gallery-progress-arrow svg,
.ybsb-gallery-progress-arrow i {
	width: 16px;
	height: 16px;
	font-size: 16px;
	fill: currentColor;
}

/* One admin-chosen icon serves both directions - Previous just mirrors
   it, rather than needing a second icon picker. */
.ybsb-gallery-progress-arrow-prev svg,
.ybsb-gallery-progress-arrow-prev i {
	transform: scaleX(-1);
}

/* flex-basis:auto (not 0%) so the Total Length control's own width on
   the row above still has something concrete to divide between the
   arrow group and this track - the track then just grows to consume
   whatever space is left over, with zero manual math needed anywhere. */
.ybsb-gallery-progress-track {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: 4px;
	background-color: #e5e5e5;
	border-radius: 4px;
	overflow: hidden;
}

.ybsb-gallery-progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background-color: #1a1a1a;
	transition: width 0.15s ease;
}

.ybsb-gallery-progress-counter {
	flex: 0 0 auto;
	font-size: 13px;
	color: #555555;
	white-space: nowrap;
}

/* ---- Video "watch on original site" fallback link ----
   Hidden until playSlideVideo() reveals it (only relevant once an embed
   is actually attempted), so it never clutters the poster/play state. */

.ybsb-gallery-video-watch-link {
	display: none;
	position: absolute;
	bottom: 10px;
	right: 10px;
	background-color: rgba(0, 0, 0, 0.6);
	color: #ffffff;
	font-size: 12px;
	padding: 6px 10px;
	border-radius: 4px;
	text-decoration: none;
	z-index: 2;
}

.ybsb-gallery-video-watch-link.ybsb-visible {
	display: inline-block;
}