/* Dichardi — product photo zoom.
   Scoped to the Elementor image carousel of the single-product template, so the
   related-products carousel (.elementor-widget-loop-carousel) is left alone. */

.elementor-widget-image-carousel .swiper-slide figure,
.elementor-widget-image-carousel .swiper-slide .elementor-carousel-image {
	overflow: hidden;
}

.elementor-widget-image-carousel .swiper-slide img {
	cursor: zoom-in;
	transition: transform .25s ease-out;
	will-change: transform;
}

.dch-zooming img {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-image-carousel .swiper-slide img {
		transition: none;
	}
}

/* Fullscreen lightbox — used on tap, and on click when the photo has more
   detail left than the inline hover zoom can show.
   Styles are stated defensively: the theme and Elementor both set broad rules
   on `button` and `p`, and the sticky header and the WhatsApp bubble sit high
   in the stacking order. */
.dch-lightbox {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(17, 17, 17, .97);
	opacity: 0;
	transition: opacity .2s ease-out;
	touch-action: none;
	overscroll-behavior: contain;
}

.dch-lightbox.is-open {
	opacity: 1;
}

.dch-lightbox img {
	max-width: 100%;
	max-height: 100%;
	transform-origin: center center;
	transition: transform .25s ease-out;
	cursor: zoom-in;
	user-select: none;
	-webkit-user-drag: none;
}

.dch-lightbox.is-zoomed img {
	cursor: grab;
	transition: none;
}

.dch-lightbox .dch-lightbox__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .14) !important;
	box-shadow: none;
	color: #fff !important;
	font-size: 26px !important;
	font-weight: 400;
	line-height: 44px;
	text-align: center;
	cursor: pointer;
	transition: background .2s ease-out;
}

.dch-lightbox .dch-lightbox__close:hover,
.dch-lightbox .dch-lightbox__close:focus-visible {
	background: rgba(255, 255, 255, .3) !important;
}

.dch-lightbox .dch-lightbox__hint {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	max-width: calc(100vw - 32px);
	margin: 0;
	padding: 7px 15px;
	border-radius: 999px;
	background: rgba(20, 20, 20, .6);
	color: #fff !important;
	font-size: 13px !important;
	line-height: 1.35 !important;
	letter-spacing: .01em;
	white-space: nowrap;
	pointer-events: none;
	transition: opacity .2s ease-out;
}

.dch-lightbox.is-zoomed .dch-lightbox__hint {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.dch-lightbox,
	.dch-lightbox img,
	.dch-lightbox__hint {
		transition: none;
	}
}

html.dch-lightbox-open,
html.dch-lightbox-open body {
	overflow: hidden;
}

/* The WhatsApp bubble paints itself above everything; the overlay's z-index
   alone does not beat it. The header is handled by z-index. */
html.dch-lightbox-open .joinchat {
	display: none !important;
}