/* MODLR: интеграция ARIZO (3D-модель в галерее + кнопка "Дополненная реальность").
   Подключается из /include/blocks/catalog/images/detail_slider_gallery_custom.php
   только на карточках, где заполнены "SKU for 3D" и "ID for 3D". */

/* --- слайд с 3D-моделью в основной галерее --- */
.arizo-slide {
	position: relative;
	height: 100%;
	overflow: hidden;
}

.arizo-slide__frame {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #fff;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.arizo-slide--ready .arizo-slide__frame {
	opacity: 1;
}

.arizo-slide__placeholder {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.arizo-slide--ready .arizo-slide__placeholder {
	display: none;
}

/* тема вешает на картинки внутри большого слайдера zoom-in и mix-blend-mode */
.arizo-slide__placeholder img {
	cursor: default;
	mix-blend-mode: normal;
	opacity: 0.55;
}

/* --- миниатюра с иконкой 3D ---
   иконка светлая, поэтому плитка тёмная — так она попадает в тон соседних
   миниатюр и фона страницы */
.arizo-thumb {
	background: rgba(255, 255, 255, 0.07);
}

.arizo-thumb__icon {
	width: 100%;
	height: 100%;
	padding: 6px;
	box-sizing: border-box;
	object-fit: contain;
}

/* --- кнопка "3D" поверх галереи (только мобильная ширина) ---
   на ≤767px тема прячет ленту миниатюр, и попасть на 3D-слайд можно было бы
   только свайпом вслепую */
.arizo-chip {
	display: none;
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 5;
	width: 44px;
	height: 44px;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--theme-image-border-radius, 8px);
	/* кнопка лежит поверх фотографии товара — тёмная подложка держит контраст
	   и на светлых, и на тёмных кадрах */
	background: rgba(28, 28, 30, 0.72);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.1s ease;
	-webkit-tap-highlight-color: transparent;
}

.arizo-chip:active {
	transform: scale(0.94);
}

/* селекторы с классом-родителем намеренно: у темы есть `.detail img` и
   `.catalog-detail img` с display: inline-block, одного класса не хватает */
.arizo-chip .arizo-chip__icon {
	display: block;
	width: 32px;
	height: 32px;
	mix-blend-mode: normal;
}

.arizo-chip .arizo-chip__photo {
	display: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	mix-blend-mode: normal;
}

@media screen and (max-width: 767px) {
	.arizo-chip {
		display: flex;
	}
}

/* на открытом 3D-слайде кнопка возвращает к фотографиям и показывает
   миниатюру того кадра, куда вернёт. Подложка не нужна — плитку целиком
   занимает сам кадр; фон вьювера белый, поэтому рамка тёмная */
.arizo-chip--back {
	overflow: hidden;
	border-color: rgba(0, 0, 0, 0.2);
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.arizo-chip.arizo-chip--back .arizo-chip__icon {
	display: none;
}

.arizo-chip.arizo-chip--back .arizo-chip__photo {
	display: block;
}

/* --- кнопка "Дополненная реальность" --- */
.arizo-ar {
	margin-top: 8px;
}

/* виджет по умолчанию inline-block; :where() в его стилях имеет нулевую
   специфичность, поэтому правило ниже перекрывает его без !important */
arizo-core {
	display: block;
	width: 100%;
}

/* Виджет держит внутри кнопки служебный скрытый <img> (нужен ему самому для
   нативного AR). Тема даёт картинкам внутри .btn margin: 0 auto — в flex-кнопке
   auto-поля забирают всё свободное место, и подпись уезжает вправо. */
arizo-core [data-core-ar-widget-trigger] > img[hidden] {
	margin: 0 !important;
}

/* пока виджет грузится/упал — не показываем полупустую кнопку */
arizo-core:not([data-state]) {
	display: none;
}

arizo-core[data-state="error"] {
	display: none;
}