/* Katalogo galerija (js/catalog-gallery.js) */
.mg-gallery {position: relative; margin: 16px 0 4px}
.mg-gallery-track {display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px}
.mg-gallery-track::-webkit-scrollbar {display: none}
.mg-gallery-track a {flex: 0 0 auto; width: 168px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden;
	scroll-snap-align: start; background: #eef2f7; outline-offset: 2px}
.mg-gallery-track img {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s}
.mg-gallery-track a:hover img {transform: scale(1.04)}
.mg-gallery-scroll {position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%;
	border: 0; background: rgba(255, 255, 255, .95); box-shadow: 0 2px 10px rgba(0, 0, 0, .2); color: #3a536d;
	font-size: 24px; line-height: 34px; cursor: pointer; z-index: 2; padding: 0}
.mg-gallery-scroll.is-prev {left: -6px}
.mg-gallery-scroll.is-next {right: -6px}
.mg-gallery.at-start .is-prev, .mg-gallery.at-end .is-next {opacity: 0; pointer-events: none}

/* lightbox */
.mg-lb-lock, .mg-lb-lock body {overflow: hidden}
.mg-lightbox {position: fixed; inset: 0; z-index: 100000; display: none; flex-direction: column;
	background: #0c1016; color: #fff; font-family: 'Roboto', Arial, sans-serif; user-select: none}
.mg-lightbox.is-open {display: flex}
.mg-lb-top {display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 18px; flex: none}
.mg-lb-title {flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9}
.mg-lb-count {font-size: 14px; opacity: .75; font-variant-numeric: tabular-nums}
.mg-lb-close {width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff;
	font-size: 28px; line-height: 44px; cursor: pointer; padding: 0}
.mg-lb-close:hover {background: rgba(255, 255, 255, .2)}
.mg-lb-stage {position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 64px}
.mg-lb-img {max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; transition: opacity .15s}
.mg-lightbox.is-loading .mg-lb-img {opacity: .35}
.mg-lb-spinner {position: absolute; width: 34px; height: 34px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff;
	border-radius: 50%; animation: mg-spin .7s linear infinite; display: none}
.mg-lightbox.is-loading .mg-lb-spinner {display: block}
@keyframes mg-spin {to {transform: rotate(360deg)}}
.mg-lb-nav {position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .12); color: #fff; font-size: 38px; line-height: 48px; cursor: pointer; padding: 0}
.mg-lb-nav:hover {background: rgba(255, 255, 255, .25)}
.mg-lb-prev {left: 14px}
.mg-lb-next {right: 14px}
.mg-lb-strip {flex: none; display: flex; gap: 8px; justify-content: safe center; overflow-x: auto; padding: 12px 16px 16px; scrollbar-width: none}
.mg-lb-strip::-webkit-scrollbar {display: none}
.mg-lb-strip button {flex: none; width: 72px; height: 54px; border: 2px solid transparent; border-radius: 6px; padding: 0;
	background: #222 center / cover no-repeat; opacity: .55; cursor: pointer}
.mg-lb-strip button.is-active {opacity: 1; border-color: #fff}
.mg-lightbox.is-single .mg-lb-nav, .mg-lightbox.is-single .mg-lb-strip {display: none}

@media (max-width: 640px) {
	.mg-gallery-track a {width: 132px}
	.mg-gallery-scroll {display: none}
	.mg-lb-stage {padding: 0}
	.mg-lb-img {border-radius: 0}
	.mg-lb-nav {width: 40px; height: 40px; font-size: 30px; line-height: 38px; background: rgba(0, 0, 0, .35)}
	.mg-lb-prev {left: 6px}
	.mg-lb-next {right: 6px}
	.mg-lb-strip button {width: 56px; height: 42px}
}