/* =============================================================================
   LS Gallery — front end
   Every colour and radius reads the site's --ls-* tokens first and carries a
   plain fallback, so the same file works on lsfab.com (lsfab theme), lsfab.ca
   (diviecommerce) and dealer.lsfab.com.
   Layout custom properties (--lsgal-*) are printed by the plugin from its
   settings in <style id="ls-gallery-vars">; the values here are defaults.
   ============================================================================= */

.lsgal,
.lsgal *,
.lsgal *::before,
.lsgal *::after { box-sizing: border-box; }

.lsgal [hidden] { display: none !important; }

.lsgal {
	--lsgal-thumbs-w: 20%;
	--lsgal-gap: 10px;
	--lsgal-ratio: 1 / 1;
	--lsgal-fit: contain;
	--lsgal-bg: transparent;
	--lsgal-radius: 3px;
	--lsgal-thumbs-n: 4;
	--lsgal-mthumbs-n: 3;

	--lsgal-accent: var(--ls-red, #ff0044);
	--lsgal-accent-btn: var(--ls-red-btn, #e00038);
	--lsgal-text: var(--ls-text, #ffffff);
	--lsgal-control-bg: rgba(0, 0, 0, 0.55);
	--lsgal-control-fg: #ffffff;
	--lsgal-tap: 44px;
	--lsgal-ease: var(--ls-transition, 160ms ease);

	position: relative;
	display: grid;
	grid-template-columns: var(--lsgal-thumbs-w) minmax(0, 1fr);
	grid-template-areas: "thumbs main";
	gap: var(--lsgal-gap);
	width: 100%;
	max-width: 100%;
	margin: 0;
	font-family: var(--ls-font-body, Inter, "Helvetica Neue", Helvetica, Arial, sans-serif);
}

.lsgal--thumbs-right {
	grid-template-columns: minmax(0, 1fr) var(--lsgal-thumbs-w);
	grid-template-areas: "main thumbs";
}

.lsgal--thumbs-below,
.lsgal--thumbs-none {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "main" "thumbs";
}

.lsgal--thumbs-none .lsgal__thumbs { display: none; }

/* --- Main frame ------------------------------------------------------------ */

.lsgal__main {
	grid-area: main;
	min-width: 0;
}

.lsgal__stage {
	position: relative;
	width: 100%;
	aspect-ratio: var(--lsgal-ratio);
	background: var(--lsgal-bg);
	border-radius: var(--lsgal-radius);
	overflow: hidden;
	isolation: isolate;
}

.lsgal--ratio-auto .lsgal__stage { aspect-ratio: auto; }

.lsgal__track {
	display: flex;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	outline: none;
}

.lsgal__track::-webkit-scrollbar { display: none; }

.lsgal__track:focus-visible { box-shadow: inset 0 0 0 2px var(--lsgal-accent); }

.lsgal__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	overflow: hidden;
}

.lsgal__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: var(--lsgal-fit);
	object-position: center;
	margin: 0;
	border: 0;
	border-radius: 0;
	cursor: zoom-in;
	user-select: none;
	-webkit-user-drag: none;
}

.lsgal--ratio-auto .lsgal__track { align-items: flex-start; }
.lsgal--ratio-auto .lsgal__slide { height: auto; }
.lsgal--ratio-auto .lsgal__img { height: auto; }

.lsgal--no-lightbox .lsgal__img { cursor: default; }

/* --- Video slide ------------------------------------------------------------ */

.lsgal__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	margin: 0;
	padding: 0;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	background: var(--lsgal-accent-btn);
	color: #ffffff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
	cursor: pointer;
	transition: transform var(--lsgal-ease), background-color var(--lsgal-ease);
	z-index: 3;
	line-height: 0;
}

.lsgal__play svg { margin-left: 3px; }

.lsgal__play:hover,
.lsgal__play:focus-visible {
	transform: translate(-50%, -50%) scale(1.06);
	background: var(--ls-red-btn-hover, #b8002e);
	color: #ffffff;
}

.lsgal__player {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	z-index: 4;
}

.lsgal__player video,
.lsgal__player iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
	object-fit: contain;
}

.lsgal__slide.is-playing .lsgal__play,
.lsgal__slide.is-playing .lsgal__img { visibility: hidden; }

/* While a video plays, the dots and the expand button would sit on top of the
   player's own controls — hide them until it stops. */
.lsgal--playing .lsgal__dots,
.lsgal--playing .lsgal__expand,
.lsgal--playing .lsgal__flash,
.lsgal--playing .lsgal__badge { opacity: 0; pointer-events: none; }

/* --- Controls over the frame ------------------------------------------------ */

.lsgal__arrow,
.lsgal__expand,
.lsgal__arrow-t {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--lsgal-control-bg);
	color: var(--lsgal-control-fg);
	cursor: pointer;
	line-height: 0;
	display: grid;
	place-items: center;
	transition: opacity var(--lsgal-ease), background-color var(--lsgal-ease);
}

.lsgal__arrow {
	position: absolute;
	top: 50%;
	width: var(--lsgal-tap);
	height: var(--lsgal-tap);
	transform: translateY(-50%);
	border-radius: 50%;
	opacity: 0;
	z-index: 5;
}

.lsgal__arrow--prev { left: 10px; }
.lsgal__arrow--next { right: 10px; }

.lsgal__stage:hover .lsgal__arrow,
.lsgal__stage:focus-within .lsgal__arrow,
.lsgal__arrow:focus-visible { opacity: 1; }

.lsgal__arrow:hover { background: rgba(0, 0, 0, 0.8); }

.lsgal__arrow[disabled] { opacity: 0 !important; pointer-events: none; }

.lsgal__expand {
	position: absolute;
	left: 12px;
	bottom: 12px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	z-index: 5;
}

.lsgal__expand:hover { background: rgba(0, 0, 0, 0.8); }

/* The SALE badge is the comic "SALE!" sticker (lsfab theme img/sale-badge.svg),
   the same artwork the product cards use via components.css — the two badges
   are the same object and must stay in step, so change both together. The
   text stays in the span for screen readers but is pushed out of view. The
   offset shadow is a drop-shadow FILTER: box-shadow would print a rectangle
   behind the sticker. */
.lsgal__flash,
.woocommerce span.lsgal__flash.onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 5;
	display: block;
	box-sizing: border-box;
	width: 124px;
	height: 80px;
	padding: 0;
	background: transparent url(/wp-content/themes/lsfab/img/sale-badge.svg) center / contain no-repeat;
	color: transparent;
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
	border-radius: 0;
	filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.55));
	transform: rotate(-8deg);
	pointer-events: none;
}

@media only screen and (max-width: 767px) {
	.lsgal__flash,
	.woocommerce span.lsgal__flash.onsale {
		width: 92px;
		height: 59px;
	}
}

.lsgal__badge { opacity: 0; pointer-events: none; }

/* --- Controls over the frame ------------------------------------------------ */

.lsgal__arrow,
.lsgal__expand,
.lsgal__arrow-t {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--lsgal-control-bg);
	color: var(--lsgal-control-fg);
	cursor: pointer;
	line-height: 0;
	display: grid;
	place-items: center;
	transition: opacity var(--lsgal-ease), background-color var(--lsgal-ease);
}

.lsgal__arrow {
	position: absolute;
	top: 50%;
	width: var(--lsgal-tap);
	height: var(--lsgal-tap);
	transform: translateY(-50%);
	border-radius: 50%;
	opacity: 0;
	z-index: 5;
}

.lsgal__arrow--prev { left: 10px; }
.lsgal__arrow--next { right: 10px; }

.lsgal__stage:hover .lsgal__arrow,
.lsgal__stage:focus-within .lsgal__arrow,
.lsgal__arrow:focus-visible { opacity: 1; }

.lsgal__arrow:hover { background: rgba(0, 0, 0, 0.8); }

.lsgal__arrow[disabled] { opacity: 0 !important; pointer-events: none; }

.lsgal__expand {
	position: absolute;
	left: 12px;
	bottom: 12px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	z-index: 5;
}

.lsgal__expand:hover { background: rgba(0, 0, 0, 0.8); }

.lsgal__badge {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 5;
	padding: 5px 10px;
	background: rgba(0, 0, 0, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--ls-radius-pill, 100px);
	color: #ffffff;
	font-family: var(--ls-font-body, Inter, Helvetica, Arial, sans-serif);
	font-size: var(--ls-caption, 12px);
	font-weight: 600;
	letter-spacing: var(--ls-tracking-eyebrow, .12em);
	text-transform: uppercase;
	line-height: 1.4;
	pointer-events: none;
}

.lsgal .lsgal__dots { /* out-specifies theme list resets such as Divi's .et-l--body ol */
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: 0;
	margin: 0;
	padding: 0 60px; /* keep clear of the 44px expand button in the corner */
	list-style: none;
	pointer-events: none;
}

.lsgal .lsgal__dots li {
	flex: 0 1 24px; /* 24px pitch; a long gallery compresses rather than overflowing the frame */
	min-width: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 0;
}

.lsgal__dot {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	width: 100%;
	height: 44px; /* 44px tap target; the dot itself is drawn 8px */
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	pointer-events: auto;
}

.lsgal__dot::after {
	content: "";
	position: absolute;
	top: calc(100% - 14px);
	left: 50%;
	width: 8px;
	height: 8px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
	transition: background-color var(--lsgal-ease), transform var(--lsgal-ease);
}

.lsgal__dot.is-active::after {
	background: var(--lsgal-accent);
	transform: translate(-50%, -50%) scale(1.25);
}

.lsgal--single .lsgal__dots,
.lsgal--single .lsgal__arrow { display: none; }

/* --- Idle chrome: the dots and the expand button follow the arrows ----------

   [stated] Tay, circling the pager strip: "can you have these not display
   unless they are being used?" The arrows already lived on
   .lsgal__stage:hover / :focus-within; the dots and the expand button sat on
   the photo permanently, so a 14-image gallery carried a row of 14 dots and a
   44px button over the product shot at all times. They now fade in with the
   arrows and share the same trigger, so the frame is just the photo until the
   pointer is on it.

   GATED ON (hover: hover) ON PURPOSE. A touch screen has no hover to reveal
   them with, the dots are the only indication of how many images there are and
   where you are in them, and the expand button is the only route into the
   lightbox. Phones and tablets keep both visible at all times — do not
   "simplify" this by dropping the media query.

   Keyboard is covered by :focus-within on the stage: the dots and the button
   are inside it, so tabbing to either one reveals the whole set. */
@media (hover: hover) and (pointer: fine) {

	.lsgal__dots,
	.lsgal__expand {
		opacity: 0;
		transition: opacity var(--lsgal-ease);
	}

	.lsgal__stage:hover .lsgal__dots,
	.lsgal__stage:focus-within .lsgal__dots,
	.lsgal__stage:hover .lsgal__expand,
	.lsgal__stage:focus-within .lsgal__expand { opacity: 1; }
}

.lsgal__caption {
	margin: 8px 0 0;
	color: var(--ls-text-muted, rgba(255, 255, 255, 0.7));
	font-size: var(--ls-small, 14px);
	line-height: 1.5;
}

/* --- Thumbnails --------------------------------------------------------------- */

.lsgal__thumbs {
	grid-area: thumbs;
	position: relative;
	min-width: 0;
	min-height: 0;
}

.lsgal__thumbs-track {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--lsgal-gap);
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overflow-x: hidden;
	scroll-snap-type: y proximity;
	scroll-behavior: smooth;
	overscroll-behavior: contain;
	scrollbar-width: none;
}

.lsgal__thumbs-track::-webkit-scrollbar { display: none; }

.lsgal__thumb {
	position: relative;
	flex: 0 0 auto;
	height: calc((100% - (var(--lsgal-thumbs-n) - 1) * var(--lsgal-gap)) / var(--lsgal-thumbs-n));
	width: auto;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	display: block;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--lsgal-radius);
	background: var(--ls-surface-1, #111111);
	opacity: 0.72;
	scroll-snap-align: start;
	cursor: pointer;
	text-decoration: none !important;
	transition: opacity var(--lsgal-ease), border-color var(--lsgal-ease);
}

.lsgal__thumb:hover,
.lsgal__thumb:focus-visible { opacity: 1; }

.lsgal__thumb.is-active {
	opacity: 1;
	border-color: var(--lsgal-text);
}

.lsgal__thumb:focus-visible {
	outline: 2px solid var(--lsgal-accent);
	outline-offset: 1px;
}

.lsgal__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	border: 0;
	border-radius: 0;
	-webkit-user-drag: none;
}

.lsgal__thumb-play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	background: var(--lsgal-accent-btn);
	color: #ffffff;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	pointer-events: none;
}

/* Marker that the theme prints on customer-photo thumbnails. */
.lsgal__thumb .ls-ugc-dot {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ls-amber, #fbbc06);
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
	pointer-events: none;
}

.lsgal__arrow-t {
	position: absolute;
	left: 0;
	right: 0;
	height: 28px;
	min-height: 28px;
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
}

.lsgal__arrow-t--prev { top: 0; border-radius: var(--lsgal-radius) var(--lsgal-radius) 0 0; }
.lsgal__arrow-t--next {
	bottom: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
	border-radius: 0 0 var(--lsgal-radius) var(--lsgal-radius);
}

.lsgal__thumbs.has-overflow .lsgal__arrow-t {
	opacity: 1;
	pointer-events: auto;
}

.lsgal__arrow-t[disabled] { opacity: 0 !important; pointer-events: none; }

/* Thumbnails below the frame (desktop setting). */
.lsgal--thumbs-below .lsgal__thumbs-track {
	position: relative;
	inset: auto;
	flex-direction: row;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
}

.lsgal--thumbs-below .lsgal__thumb {
	flex: 0 0 calc((100% - (var(--lsgal-thumbs-n) - 1) * var(--lsgal-gap)) / var(--lsgal-thumbs-n));
	height: auto;
	width: auto;
}

.lsgal--thumbs-below .lsgal__arrow-t { display: none; }

/* --- Browsers without aspect-ratio (iOS < 15): keep the frame square ------------- */

@supports not (aspect-ratio: 1 / 1) {
	.lsgal__stage::before { content: ""; display: block; padding-top: 100%; }
	.lsgal__track { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
	.lsgal__thumb { height: auto; width: 100%; }
	.lsgal__thumb::before { content: ""; display: block; padding-top: 100%; }
	.lsgal__thumb-img { position: absolute; top: 0; left: 0; }
}

/* --- Static (script not yet running, or no script) ------------------------------ */

.lsgal.is-static .lsgal__arrow,
.lsgal.is-static .lsgal__expand,
.lsgal.is-static .lsgal__dots,
.lsgal.is-static .lsgal__arrow-t { display: none; }

.lsgal.is-static .lsgal__img { cursor: default; }

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

html.lsgal-lock,
html.lsgal-lock body { overflow: hidden !important; }

.lsgal-lb {
	position: fixed;
	inset: 0;
	z-index: 100000010;
	display: flex;
	flex-direction: column;
	background: rgba(0, 0, 0, 0.98);
	color: #ffffff;
	font-family: var(--ls-font-body, Inter, "Helvetica Neue", Helvetica, Arial, sans-serif);
	opacity: 0;
	transition: opacity 180ms ease;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.lsgal-lb.is-open { opacity: 1; }

.lsgal-lb *,
.lsgal-lb *::before,
.lsgal-lb *::after { box-sizing: border-box; }

.lsgal-lb__bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	padding: 0 8px 0 18px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
	pointer-events: none;
}

.lsgal-lb__count {
	font-family: var(--ls-font-display, "Barlow Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif);
	font-size: var(--ls-h5, 16px);
	font-weight: 600;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.85);
}

.lsgal-lb__btn {
	appearance: none;
	-webkit-appearance: none;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	cursor: pointer;
	display: grid;
	place-items: center;
	line-height: 0;
	pointer-events: auto;
	transition: background-color var(--lsgal-ease, 160ms ease);
}

.lsgal-lb__btn:hover,
.lsgal-lb__btn:focus-visible { background: rgba(255, 255, 255, 0.2); color: #ffffff; }

.lsgal-lb__btn:focus-visible { outline: 2px solid var(--ls-red, #ff0044); outline-offset: 2px; }

.lsgal-lb__actions { display: flex; gap: 6px; }

.lsgal-lb__viewport {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.lsgal-lb__track {
	position: absolute;
	inset: 0;
	display: flex;
	will-change: transform;
}

.lsgal-lb__track.is-animating { transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1); }

.lsgal-lb__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 0 64px;
	overflow: hidden;
}

.lsgal-lb__zoom {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lsgal-lb__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transform-origin: 0 0;
	will-change: transform;
	-webkit-user-drag: none;
	cursor: zoom-in;
}

.lsgal-lb__slide.is-zoomed .lsgal-lb__img { cursor: grab; }
.lsgal-lb__slide.is-zoomed.is-dragging .lsgal-lb__img { cursor: grabbing; }

.lsgal-lb__player {
	position: relative;
	width: min(100%, calc((100vh - 120px) * var(--lsgal-vr, 1.7777)));
	aspect-ratio: var(--lsgal-vr, 16 / 9);
	max-height: 100%;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lsgal-lb__player video,
.lsgal-lb__player iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
	background: #000;
}

.lsgal-lb__player .lsgal__play {
	position: absolute;
	width: 80px;
	height: 80px;
}

.lsgal-lb__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.lsgal-lb__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 52px;
	height: 52px;
	transform: translateY(-50%);
}

.lsgal-lb__arrow--prev { left: 12px; }
.lsgal-lb__arrow--next { right: 12px; }

.lsgal-lb__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	padding: 14px 20px 18px;
	text-align: center;
	font-size: var(--ls-small, 14px);
	line-height: var(--ls-leading-small, 1.5);
	color: rgba(255, 255, 255, 0.8);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
	pointer-events: none;
}

.lsgal-lb__caption:empty { display: none; }

.lsgal-lb__thumbs {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 10px 12px 12px;
	overflow-x: auto;
	scrollbar-width: none;
	pointer-events: none;
}

.lsgal-lb__thumbs::-webkit-scrollbar { display: none; }

.lsgal-lb__thumb {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 2px solid transparent;
	border-radius: 4px;
	background: #111;
	opacity: 0.55;
	overflow: hidden;
	cursor: pointer;
	pointer-events: auto;
	line-height: 0;
	transition: opacity 160ms ease, border-color 160ms ease;
}

.lsgal-lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lsgal-lb__thumb.is-active { opacity: 1; border-color: #ffffff; }

@media (max-width: 767px) {
	.lsgal-lb__arrow { display: none; }
	.lsgal-lb__slide { padding: 56px 0 72px; }
}

/* --- Motion ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.lsgal__track,
	.lsgal__thumbs-track { scroll-behavior: auto; }

	.lsgal *,
	.lsgal-lb * { transition: none !important; }
}