/* Product 360° spin viewer — single product page toggle.
 *
 * The viewer is printed inside the gallery and takes the same grid cell as the
 * photograph, so it is exactly the size of the picture it replaces. The toggle
 * is a media control and lives in the column beside the zoom control, so its
 * look belongs to the theme; only behaviour is stated here.
 *
 * WARNING: pointer-events rules must have equal or higher specificity
 * than the base rule to correctly enable/disable interaction.
 *
 * @package urartu
 */
@keyframes urartu360Spin { to { transform: rotate(360deg); } }

/* The viewer takes the photograph's own cell.
   ----------------------------------------------------------------------
   It used to be absolutely positioned at 35% of the product row, a figure that
   matched no column in any layout: the spin came out narrower than the
   photograph and offset to the left of it, over the thumbnail strip. Placed in
   the picture's cell it is the size of the picture at every width, whatever
   the layout does. */
.single-product div.product .urartu-360 {
	position: relative;
	min-width: 0;
	z-index: 3;
	pointer-events: none; /* allow clicks through to the gallery */
	/* The gallery grid aligns its items to the start, so this box — which has
	   no content of its own, the viewer inside it being absolute — measured
	   zero high and the spin had nothing to fill. */
	align-self: stretch;
}

@media (min-width: 768px) {
	.single-product div.product .woocommerce-product-gallery .urartu-360 {
		grid-column: 2;
		grid-row: 1;
	}
}

/* Active state — the container can now receive events.
   Needs same-or-higher specificity as the base rule above. */
.single-product div.product .urartu-360.is-active {
	pointer-events: auto;
}

.urartu-360__toggle.is-active i { display: none; }

.urartu-360__toggle.is-active::before {
	content: "\2715";
	font-size: 13px;
	line-height: 1;
}

/* Viewer — hidden by default, shown when .is-active on the container. */
.urartu-360__viewer {
	display: none;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	cursor: grab;
	touch-action: pan-y;
}

/* inset:0 against the cell the photograph occupies: the picture is still in
   the flow, only invisible, so the cell keeps its height and the spin lands on
   exactly the same rectangle. */
.urartu-360.is-active .urartu-360__viewer {
	display: block;
	position: absolute;
	inset: 0;
	pointer-events: auto; /* ensure the viewer itself receives drag events */
}

.urartu-360__viewer.is-dragging { cursor: grabbing; }

/* The photograph is kept in the flow — otherwise the cell collapses and the
   spin has nothing to be the size of — but made invisible and untouchable.
   Inside the gallery that is the slider viewport; for a theme that gives the
   viewer nowhere to go it is the gallery itself, which is where it lands. */
.urartu-360.is-active ~ .flex-viewport,
.urartu-360.is-active ~ .woocommerce-product-gallery__wrapper,
.urartu-360.is-active ~ .woocommerce-product-gallery {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	position: relative;
}

/* The thumbnails stay: clicking one is how you leave the spin. */
.urartu-360.is-active ~ .woocommerce-product-gallery-thumbnails {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.urartu-360__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	pointer-events: none;
}

.urartu-360__hint {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, .6);
	color: #fff;
	padding: 5px 12px;
	border-radius: 20px;
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
	pointer-events: none;
	white-space: nowrap;
}
.urartu-360__viewer.is-dragging .urartu-360__hint { opacity: 0; }

.urartu-360__loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.urartu-360__loading::after {
	content: "";
	width: 36px;
	height: 36px;
	border: 3px solid rgba(0, 0, 0, .12);
	border-top-color: var(--color-main-green);
	border-radius: 50%;
	animation: urartu360Spin .8s linear infinite;
}