/* Revolution - просмотр изображений (любая галерея magnific: товар, статьи блога, связанные опции): затемнение фона и лента миниатюр снизу.
   Без версионирования по правилу проекта. */

/* ---- затемнение ------------------------------------------------------------------------------
   Тема гасит собственную подложку magnific (.razmiv2 .mfp-bg {display: none}) и вместо неё
   показывает свой #pagefader2. Оставляем один слой - подложку самого попапа. Класс rev-lb-img
   ставит скрипт, и только для просмотра изображений: обычные попапы темы не трогаем. */
html.rev-lb-img .mfp-bg {
	display: block;
	opacity: .75;
	background: #0b0b0b;
}
html.rev-lb-img #pagefader2 { display: none !important; }

/* Попап отзывов открывается через API темы: у видео флага rev-lb-img нет, а подложка нужна и там. */
html .mfp-bg.rev-rv-lb {
	display: block;
	opacity: .75;
	background: #0b0b0b;
}

/* ---- лента миниатюр --------------------------------------------------------------------------- */
.rev-lbt {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1046;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	background: rgba(15, 15, 15, .6);
	cursor: default;
}

.rev-lbt__track {
	display: flex;
	width: -webkit-max-content;
	width: max-content;
	max-width: 100%;
	margin: 0 auto; /* по центру, пока помещается; дальше - прокрутка */
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.rev-lbt__track::-webkit-scrollbar { display: none; }

.rev-lbt__i {
	flex: 0 0 auto;
	width: 66px;
	height: 66px;
	margin: 0 4px;
	padding: 2px;
	border: 2px solid transparent;
	border-radius: 3px;
	background: var(--rev-surface, #fff);
	opacity: .6;
	cursor: pointer;
	transition: opacity .15s ease-out, border-color .15s ease-out;
}
.rev-lbt__i img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* активную выделяем только яркостью - без рамки */
.rev-lbt__i:hover { opacity: 1; }
.rev-lbt__i.is-active { opacity: 1; }

/* ---- стрелки ----------------------------------------------------------------------------------
   Штатные стрелки magnific - два CSS-треугольника 90x110. Заменяем на круглую кнопку с шевроном. */
html.rev-lb-img .mfp-arrow {
	width: 48px;
	height: 48px;
	top: 50%;
	margin: -24px 0 0;
	padding: 0;
	opacity: .8;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
	transform: none;
	transition: opacity .15s ease-out, background-color .15s ease-out, box-shadow .15s ease-out;
}
html.rev-lb-img .mfp-arrow-left { left: 24px; }
html.rev-lb-img .mfp-arrow-right { right: 24px; }
html.rev-lb-img .mfp-arrow:hover { opacity: 1; background: var(--rev-border-light, #ececec); box-shadow: 0 3px 14px rgba(0, 0, 0, .3); }
html.rev-lb-img .mfp-arrow:active { margin-top: -24px; }

/* сам шеврон: две стороны квадрата, повёрнутые на 45 градусов */
html.rev-lb-img .mfp-arrow:before { display: none; }
html.rev-lb-img .mfp-arrow:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	margin: 0;
	border: 2px solid var(--rev-text, #333);
	border-width: 2px 2px 0 0;
	transition: border-color .15s ease-out;
}
/* шеврон остаётся тёмным и при наведении - кнопка нейтральная */
html.rev-lb-img .mfp-arrow-left:after { transform: translate(-30%, -50%) rotate(-135deg); }
html.rev-lb-img .mfp-arrow-right:after { transform: translate(-70%, -50%) rotate(45deg); }

/* когда снизу лента - держим стрелки по центру самого изображения, а не экрана */
html.rev-lb-on .mfp-arrow,
html.rev-lb-on .mfp-arrow:active { margin-top: -76px; }

@media (max-width: 480px) {
	html.rev-lb-img .mfp-arrow { width: 40px; height: 40px; margin-top: -20px; }
	html.rev-lb-on .mfp-arrow,
	html.rev-lb-on .mfp-arrow:active { margin-top: -72px; }
	html.rev-lb-img .mfp-arrow-left { left: 8px; }
	html.rev-lb-img .mfp-arrow-right { right: 8px; }
}

/* изображение можно смахивать вбок - показываем это курсором (только когда изображений несколько) */
html.rev-lb-on .mfp-image-holder img.mfp-img { cursor: -webkit-grab; cursor: grab; }
html.rev-lb-on .mfp-image-holder img.mfp-img:active { cursor: -webkit-grabbing; cursor: grabbing; }

/* ---- место под ленту --------------------------------------------------------------------------
   magnific сам ограничивает картинку высотой окна через max-height, а у img.mfp-img
   box-sizing: border-box - поэтому нижний отступ и есть резерв места под ленту. */
html.rev-lb-on .mfp-image-holder img.mfp-img {
	padding-bottom: 104px;
	background-clip: content-box;
	box-shadow: none;
}
html.rev-lb-on .mfp-figure:after { display: none; }
html.rev-lb-on .mfp-bottom-bar { margin-top: -104px; }
html.rev-lb-on .mfp-img-mobile .mfp-bottom-bar { margin: 0; bottom: 104px; }