/**
 * MON PORTÉ Product Gallery V2 (PDP-V1.2).
 * Strictly .mpg-* scoped. Warm minimalist luxury: hairlines, 0–4px radii,
 * almost no shadow, restrained motion. Tiers: base = desktop,
 * max-width:850 tablet, max-width:549 mobile.
 *
 * DESIGN PRESETS (.mpg-style-*): real token recipes for thumbnail size /
 * gap, image scale, inner padding, thumb radius. Explicit owner controls
 * arrive as inline tokens and always win over preset classes.
 *
 * NOTE: keeps the PDP-G2 thumb-rail containment rule (scoped 0,3,0 tie
 * with the parent grid rule, won by source order, no !important) so a
 * coexisting native gallery never bleeds horizontally.
 */

.mpg-gallery {
	margin: 0;
	max-width: 100%;
	background-color: var(--mpg-bg, #fff);
	border-radius: 2px;
}

/* ---- Design preset recipes ---- */

.mpg-style-signature {
	--mpg-thumb: 68px;
	--mpg-thumb-gap: 12px;
	--mpg-scale: 92%;
	--mpg-scale-sm: 90%;
	--mpg-pad: 20px;
	--mpg-thumb-r: 2px;
}

.mpg-style-clean {
	--mpg-thumb: 64px;
	--mpg-thumb-gap: 12px;
	--mpg-scale: 74%;
	--mpg-scale-sm: 72%;
	--mpg-pad: 32px;
	--mpg-thumb-r: 2px;
}

.mpg-style-editorial {
	--mpg-thumb: 72px;
	--mpg-thumb-gap: 8px;
	--mpg-scale: 84%;
	--mpg-scale-sm: 80%;
	--mpg-pad: 12px;
	--mpg-thumb-r: 2px;
}

.mpg-style-atelier {
	--mpg-thumb: 60px;
	--mpg-thumb-gap: 12px;
	--mpg-scale: 72%;
	--mpg-scale-sm: 70%;
	--mpg-pad: 28px;
	--mpg-thumb-r: 6px;
}

.mpg-main {
	display: grid;
	gap: var(--mpg-thumb-gap, 12px);
}

.mpg-layout-vertical .mpg-main {
	position: relative;
	display: block;
}

.mpg-layout-vertical .mpg-thumbs {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: var(--mpg-thumb, 68px);
	flex-direction: column;
	order: -1;
	min-height: 0;
	max-height: none;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
	scroll-padding: 12px;
}

.mpg-layout-vertical .mpg-viewport {
	margin-inline-start: calc(var(--mpg-thumb, 68px) + var(--mpg-thumb-gap, 12px));
}

.mpg-layout-vertical .mpg-thumbs::-webkit-scrollbar {
	display: none;
}

.mpg-layout-bottom .mpg-main,
.mpg-layout-minimal .mpg-main {
	grid-template-columns: minmax(0, 1fr);
}

/* ---- Viewport / slides ---- */

.mpg-viewport {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 2px;
	background-color: var(--mpg-bg, #fff);
	outline-offset: 3px;
	transition: opacity 0.14s ease;
}

/* V1.2.3: deliberate set-change pulse (variation switch). Removed on
the next frame so the fresh set fades in; instant under
prefers-reduced-motion. */
.mpg-switching .mpg-viewport {
	opacity: 0;
}

/* V1.2.3: horizontal media viewport owns horizontal intent only —
vertical page scroll stays native (touch). Selection is disabled so a
drag never highlights content. */
.mpg-swipe .mpg-viewport {
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

/* V1.2.3: grab affordance only when dragging can do something. */
.mpg-swipe.mpg-trans-slide:not(.mpg-single) .mpg-viewport {
	cursor: grab;
}

.mpg-viewport.is-dragging {
	cursor: grabbing;
}

.mpg-viewport:focus-visible {
	outline: 2px solid #60373d;
}

.mpg-track {
	display: flex;
	width: 100%;
}

.mpg-trans-fade .mpg-track {
	display: grid;
}

.mpg-trans-fade .mpg-slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.24s ease, visibility 0s linear 0.24s;
}

.mpg-trans-fade .mpg-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.24s ease;
}

.mpg-trans-slide .mpg-track {
	transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* V1.2.3: pointer-follow state — no transition while tracking, paint
only via translate3d. */
.mpg-track.is-dragging {
	transition: none;
	will-change: transform;
}

/* V1.2.3: non-adjacent jump cut — no carousel journey. */
.mpg-track.is-instant {
	transition: none !important;
}

.mpg-trans-none .mpg-track {
	display: grid;
}

.mpg-trans-none .mpg-slide {
	grid-area: 1 / 1;
	display: none;
}

.mpg-trans-none .mpg-slide.is-active {
	display: flex;
}

.mpg-slide {
	margin: 0;
	min-width: 100%;
	flex: 0 0 100%;
	aspect-ratio: var(--mpg-ratio, 1 / 1);
	background-color: var(--mpg-bg, #fff);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--mpg-pad, 24px);
}

.mpg-slide[hidden] {
	display: none;
}

.mpg-img {
	display: block;
	width: var(--mpg-scale, 78%);
	height: var(--mpg-scale, 78%);
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: var(--mpg-pos, 50% 50%);
	/* V1.2.3: belt-and-suspenders with draggable=false + dragstart
	prevention — the browser must never render a drag preview. */
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
}

/* Phase 3 framing controls: focal point when the image and frame
ratios differ. object-position moves the image inside its own box
(matters for both fits); align-items moves a letterboxed Contain
box inside the padded slide (Cover fills, so only object-position
applies there — .mpg-fit-cover slides are display:block). */
.mpg-pos-center .mpg-slide {
	align-items: center;
}

.mpg-pos-top .mpg-slide {
	align-items: flex-start;
}

.mpg-pos-bottom .mpg-slide {
	align-items: flex-end;
}

.mpg-fit-cover .mpg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mpg-fit-cover .mpg-slide {
	padding: 0;
	display: block;
}

/* Click zoom: restrained 1.6x, pans within the viewport. Applies only
when the lightbox is off (V1.2.4.2: with the lightbox on, a single
click opens the viewer instead of zooming). */
.mpg-zoom-click .mpg-slide.is-active {
	cursor: zoom-in;
}

/* V1.2.4.2: single click/tap opens the lightbox — the active slide
communicates open intent. The slide's own cursor wins over the
viewport grab affordance (child beats inherited). */
.mpg-gallery:not(.mpg-nolightbox) .mpg-slide.is-active {
	cursor: zoom-in;
}

.mpg-zoom-click .mpg-slide.is-active.is-zoomed {
	cursor: zoom-out;
	overflow: auto;
}

.mpg-zoom-click .mpg-slide.is-active.is-zoomed .mpg-img {
	width: 160%;
	height: 160%;
	max-width: none;
	max-height: none;
}

.mpg-zoom-hover .mpg-slide.is-active .mpg-img {
	transition: transform 0.24s ease;
}

.mpg-zoom-hover .mpg-slide.is-active:hover .mpg-img {
	transform: scale(1.12);
}

/* ---- Arrows: Minimal Edge (signature) / Floating Subtle / Hidden ---- */

.mpg-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	cursor: pointer;
	z-index: 2;
}

.mpg-arrow span {
	display: block;
	font-size: 30px;
	font-weight: 300;
	line-height: 1;
	transform: translateY(-2px);
}

.mpg-nav-edge .mpg-arrow {
	border: 0;
	background: transparent;
	color: rgba(31, 30, 27, 0.55);
	transition: color 0.18s ease;
}

.mpg-nav-edge .mpg-arrow:hover {
	color: #1f1e1b;
}

.mpg-nav-floating .mpg-arrow {
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #1f1e1b;
	box-shadow: 0 1px 6px rgba(31, 30, 27, 0.12);
	transition: background-color 0.18s ease;
}

.mpg-nav-floating .mpg-arrow:hover {
	background: #fff;
}

.mpg-nav-floating .mpg-arrow span {
	font-size: 22px;
}

.mpg-prev {
	left: 4px;
}

.mpg-next {
	right: 4px;
}

.mpg-nav-floating .mpg-prev {
	left: 12px;
}

.mpg-nav-floating .mpg-next {
	right: 12px;
}

.mpg-arrow:focus-visible {
	outline: 2px solid #60373d;
	outline-offset: 2px;
}

/* ---- Fullscreen control (V1.2.4.2): explicit expand button opening
the SAME lightbox as a single click/tap. Quiet white chip, top-right,
above the image surface, keyboard reachable. Rendered only when the
lightbox is enabled (see tap_fullscreen); hidden with the dialog. */

.mpg-fullscreen {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #1f1e1b;
	box-shadow: 0 1px 6px rgba(31, 30, 27, 0.12);
	cursor: pointer;
	z-index: 2;
	transition: background-color 0.18s ease;
}

.mpg-fullscreen:hover {
	background: #fff;
}

.mpg-fullscreen:focus-visible {
	outline: 2px solid #60373d;
	outline-offset: 2px;
}

.mpg-fullscreen svg {
	display: block;
}

.mpg-noarrows .mpg-arrow,
.mpg-nav-hidden .mpg-arrow {
	display: none;
}

/* ---- Counter: quiet fraction / dots / hidden ---- */

.mpg-counter {
	position: absolute;
	bottom: 10px;
	right: 14px;
	margin: 0;
	padding: 0;
	font-size: 12px;
	letter-spacing: 0.12em;
	color: #1f1e1b;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.mpg-cpos-bl .mpg-counter {
	right: auto;
	left: 14px;
}

.mpg-counter-out {
	margin: 10px 2px 0;
	font-size: 12px;
	letter-spacing: 0.12em;
	color: rgba(31, 30, 27, 0.6);
	text-align: right;
}

.mpg-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
}

.mpg-dot {
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mpg-dot span {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(31, 30, 27, 0.28);
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.mpg-dot.is-active span {
	background: #60373d;
	transform: scale(1.25);
}

.mpg-dot:focus-visible {
	outline: 2px solid #60373d;
	outline-offset: 1px;
}

.mpg-dot[hidden] {
	display: none;
}

/* ---- Thumbnails: quiet rail, hidden scrollbar, hairline select ---- */

.mpg-thumbs {
	display: flex;
	gap: var(--mpg-thumb-gap, 12px);
	margin: 0;
	padding-inline: 2px;
	/* V1.2.5: vertical breathing room so focus outlines and the
	active ring are never amputated by the rail's clipped axis
	(horizontal rail clips overflow-y, vertical rail clips
	overflow-x). Keeps the strip calm and edge-safe. */
	padding-block: 4px;
	scroll-padding-inline: 16px;
	overscroll-behavior-x: contain;
}

.mpg-layout-bottom .mpg-thumbs {
	flex-direction: row;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	padding-bottom: 2px;
}

.mpg-layout-bottom .mpg-thumbs::-webkit-scrollbar {
	display: none;
}

.mpg-thumb {
	flex: 0 0 auto;
	width: var(--mpg-thumb, 68px);
	height: var(--mpg-thumb, 68px);
	margin: 0;
	padding: 3px;
	border: 1px solid rgba(31, 30, 27, 0.14);
	border-radius: var(--mpg-thumb-r, 2px);
	background: #fff;
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.mpg-thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 1px;
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
}

.mpg-thumb-soft .mpg-thumb-img {
	border-radius: 4px;
}

/* ---- V1.2.4.1: theme-leak reset for all gallery buttons ----
Flatsome/UX base button rules (em-based min-height, line-height,
letter-spacing) otherwise inflate icon buttons into oversized pills.
Scoped strictly to .mpg-gallery so nothing else is affected. */

.mpg-gallery button {
	font: inherit;
	line-height: 1;
	min-height: 0;
	min-width: 0;
	letter-spacing: normal;
	text-transform: none;
}

/* ---- V1.2.4.1: robust selected-thumb treatment ----
ROOT CAUSE (proven live): the old `outer` style painted
`outline:2px + outline-offset:2px` OUTSIDE the thumb border box while
both rails clip (vertical rail overflow-x:hidden, horizontal rail
overflow-y:hidden). The ring was amputated to detached Bordeaux
segments — a stray underline/arc on desktop, "( )" on mobile.
FIX: the selected state lives ENTIRELY INSIDE the thumb button
(border or inset ring). Nothing outside the border box can be
clipped, so all four sides always render complete. */

/* V1.2.5: the selected state reads at a glance — a 2px inset ring in
the brand Bordeaux plus the tinted border. Still entirely inside the
thumb button, so clipped rail axes cannot amputate it. */

.mpg-sel-border .mpg-thumb.is-active {
	border-color: var(--mpg-sel, #60373d);
	box-shadow: inset 0 0 0 2px var(--mpg-sel, #60373d);
}

.mpg-sel-outer .mpg-thumb {
	position: relative;
}

.mpg-sel-outer .mpg-thumb.is-active {
	border-color: transparent;
	outline: none;
	box-shadow: inset 0 0 0 2px var(--mpg-sel, #60373d);
}

.mpg-sel-line .mpg-thumb {
	position: relative;
	border-color: transparent;
	border-radius: 0;
	padding: 0 0 5px;
}

.mpg-sel-line .mpg-thumb-img {
	border-radius: 0;
}

.mpg-sel-line .mpg-thumb.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--mpg-sel, #60373d);
}

.mpg-thumb:focus-visible {
	outline: 2px solid #60373d;
	outline-offset: 2px;
}

.mpg-nothumbs .mpg-thumbs {
	display: none;
}

/* ---- V1.2.3 adaptive single-item set (§15): a one-image variation
must not behave like a carousel. Toggled by JS after every set
change; server markup already omits these when the base set is one. */

.mpg-single .mpg-arrow,
.mpg-single .mpg-thumbs,
.mpg-single .mpg-dots,
.mpg-single .mpg-counter,
.mpg-single .mpg-counter-out {
	display: none;
}

/* ---- Lightbox (V1.2.4.1 luxury viewer, V1.2.5 full-viewport) ----
Dark isolating overlay + media sized around the image (no oversized
card). Controls: 44-48px dark-chip targets with 18-22px glyphs,
always above the image surface.
z-index 1047 clears the Flatsome storefront header (.header-wrapper
z-index:1001) and the theme's own overlay ceiling (.mfp-bg 1042 …
.mfp-arrow 1046 in flatsome/assets/css/flatsome.css). The dialog is
additionally relocated to document.body while open (see boxOf in the
controller), so no ancestor stacking context — sticky headers,
animated builder rows, transformed rails — can contain it or let the
header paint above it. Backdrop is fully opaque so the (instantly
synced) background track never ghosts through as a second motion and
no bright header can bleed through. */

.mpg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1047;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: #12110f;
	overscroll-behavior: contain;
}

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

/* Page scroll lock while the dialog is open (class on <html>). */
html.mpg-locked {
	overflow: hidden;
}

.mpg-lightbox-media {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: min(1020px, 86vw);
	max-height: min(var(--mpg-lb-max-h, 86vh), calc(100vh - 40px));
}

.mpg-lightbox-img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(1020px, 86vw);
	max-height: min(var(--mpg-lb-max-h, 86vh), calc(100vh - 40px));
	object-fit: contain;
	border-radius: 2px;
	background: #fff;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}

/* Phase 3 lightbox fit (independent from the main-gallery fit):
Contain (default) shows the entire image; Cover fills the viewer
frame with no gaps but crops the overflow, centered. */
.mpg-lb-fit-cover .mpg-lightbox-media {
	width: min(1020px, 86vw);
	height: min(var(--mpg-lb-max-h, 86vh), calc(100vh - 40px));
}

.mpg-lb-fit-cover .mpg-lightbox-img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.mpg-lightbox-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 20px;
	font-weight: 300;
	line-height: 1;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 19, 17, 0.55);
	color: #fff;
	cursor: pointer;
	z-index: 3;
	transition: background-color 0.18s ease;
}

.mpg-lightbox-close:hover {
	background: rgba(20, 19, 17, 0.8);
}

/* Lightbox navigation: current-set only, hidden for single-item sets. */

.mpg-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	font-size: 22px;
	font-weight: 300;
	line-height: 1;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 19, 17, 0.55);
	color: #fff;
	cursor: pointer;
	z-index: 3;
	transition: background-color 0.18s ease;
}

.mpg-lightbox-nav:hover {
	background: rgba(20, 19, 17, 0.8);
}

.mpg-lightbox-nav span {
	transform: translateY(-2px);
}

.mpg-lightbox-prev {
	left: 16px;
}

.mpg-lightbox-next {
	right: 16px;
}

.mpg-lightbox-nav:focus-visible,
.mpg-lightbox-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Subtle current-set counter, bottom-center; hidden for singles. */

.mpg-lightbox-count {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	margin: 0;
	padding: 0;
	font-size: 12px;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.85);
	z-index: 3;
}

@media (max-width: 549px) {
	.mpg-lightbox {
		padding: 16px;
	}

	.mpg-lightbox-media,
	.mpg-lightbox-img {
		max-width: calc(100vw - 32px);
		max-height: min(var(--mpg-lb-max-h, 80vh), calc(100vh - 32px));
	}

	.mpg-lb-fit-cover .mpg-lightbox-media {
		width: calc(100vw - 32px);
		height: min(var(--mpg-lb-max-h, 80vh), calc(100vh - 32px));
	}

	.mpg-lightbox-prev {
		left: 8px;
	}

	.mpg-lightbox-next {
		right: 8px;
	}
}

/* ---- Placeholder (Builder only) ---- */

.mpg-placeholder {
	padding: 24px;
	border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 8px;
	font-size: 13.5px;
	text-align: center;
	opacity: 0.75;
}

/* ---- Tablet: max-width 849px ---- */

@media (max-width: 849px) {
	.mpg-layout-vertical .mpg-main {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.mpg-layout-vertical .mpg-thumbs {
		position: static;
		inset: auto;
		width: auto;
		flex-direction: row;
		order: 0;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	.mpg-layout-vertical .mpg-viewport {
		margin-inline-start: 0;
	}

	.mpg-layout-vertical .mpg-thumbs::-webkit-scrollbar {
		display: none;
	}
}

/* ---- Mobile: max-width 549px ---- */

@media (max-width: 549px) {
	.mpg-gallery {
		margin-inline: 0;
		margin-bottom: var(--mpg-intro-gap-sm, 32px);
	}

	.mpg-slide {
		aspect-ratio: var(--mpg-ratio-sm, 1 / 1);
		padding: var(--mpg-mobile-pad, 16px);
		/* UI Polish: modest vertical-footprint cap so the product
		title arrives earlier on phones. aspect-ratio still rules
		below the cap; object-fit is untouched (contain letterboxes
		with the full image visible, cover keeps filling). Tunable
		per instance via the Mobile Max Height Builder control
		(--mpg-max-h-sm, vh, 0 = theme default below). */
		max-height: var(--mpg-max-h-sm, 54vh);
	}

	.mpg-slide .mpg-img {
		width: var(--mpg-scale-sm, var(--mpg-scale, 76%));
		height: var(--mpg-scale-sm, var(--mpg-scale, 76%));
	}

	.mpg-fit-cover .mpg-slide .mpg-img {
		width: 100%;
		height: 100%;
	}

	.mpg-thumbs {
		gap: var(--mpg-thumb-gap-sm, 8px);
	}

	.mpg-thumb {
		width: var(--mpg-thumb-sm, 56px);
		height: var(--mpg-thumb-sm, 56px);
	}

	.mpg-mob-noarrows .mpg-arrow {
		display: none;
	}

	.mpg-mob-nocounter .mpg-counter,
	.mpg-mob-nocounter .mpg-dots,
	.mpg-mob-nocounter .mpg-counter-out {
		display: none;
	}

	.mpg-counter {
		bottom: 8px;
		right: 10px;
	}

	.mpg-cpos-bl .mpg-counter {
		left: 10px;
	}

	.mpg-bleed {
		margin-inline: -16px;
		border-radius: 0;
	}

	.mpg-bleed .mpg-viewport {
		border-radius: 0;
	}

	.mpg-bleed .mpg-thumbs,
	.mpg-bleed .mpg-dots {
		padding-inline: 16px;
	}
}

/* ---- Native coexistence: PDP-G2 thumb-rail containment ---- */

@media (max-width: 549px) {
	.single-product .product-thumbnails.row-small {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
	.mpg-viewport,
	.mpg-trans-fade .mpg-slide,
	.mpg-trans-slide .mpg-track,
	.mpg-arrow,
	.mpg-thumb,
	.mpg-dot span,
	.mpg-lightbox-nav,
	.mpg-lightbox-close,
	.mpg-zoom-hover .mpg-slide.is-active .mpg-img {
		transition: none;
	}
}