/* Image lightbox — shared (product + blog) */

.df-product-lightbox {
	position: fixed;
	inset: 0;
	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100svh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	overflow: visible;
	color: var(--df-white);
}

.df-product-lightbox::backdrop {
	background: var(--df-overlay-dark);
	backdrop-filter: blur(4px);
}

.df-product-lightbox__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: var(--df-sp-16) var(--df-sp-20);
	box-sizing: border-box;
}

.df-product-lightbox__close,
.df-product-lightbox__nav {
	position: fixed;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 1px solid color-mix(in srgb, var(--df-white) 35%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--df-dark) 55%, transparent);
	color: var(--df-white);
	cursor: pointer;
	transition:
		background var(--df-ease),
		border-color var(--df-ease),
		opacity var(--df-ease);
}

.df-product-lightbox__close:hover,
.df-product-lightbox__close:focus-visible,
.df-product-lightbox__nav:hover,
.df-product-lightbox__nav:focus-visible {
	background: var(--df-dark);
	border-color: var(--df-white);
	outline: none;
}

.df-product-lightbox__close {
	top: max(var(--df-sp-6), env(safe-area-inset-top, 0px));
	right: max(var(--df-sp-6), env(safe-area-inset-right, 0px));
}

.df-product-lightbox__nav--prev {
	top: 50%;
	left: max(var(--df-sp-6), env(safe-area-inset-left, 0px));
	transform: translateY(-50%);
}

.df-product-lightbox__nav--next {
	top: 50%;
	right: max(var(--df-sp-6), env(safe-area-inset-right, 0px));
	transform: translateY(-50%);
}

.df-product-lightbox__nav:active {
	transform: translateY(-50%) scale(0.96);
}

.df-product-lightbox__nav[hidden] {
	display: none;
}

.df-product-lightbox__frame {
	margin: 0;
	line-height: 0;
	max-width: min(96vw, 1400px);
	max-height: calc(100vh - var(--df-sp-24));
	max-height: calc(100svh - var(--df-sp-24));
	display: flex;
	align-items: center;
	justify-content: center;
}

.df-product-lightbox__img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(96vw, 1400px);
	max-height: calc(100vh - var(--df-sp-24));
	max-height: calc(100svh - var(--df-sp-24));
	object-fit: contain;
}

.df-product-lightbox__counter {
	position: fixed;
	bottom: max(var(--df-sp-6), env(safe-area-inset-bottom, 0px));
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);
	margin: 0;
	padding: 0;
	font-family: var(--df-font-body);
	font-size: 0.68rem;
	letter-spacing: var(--df-track-wider);
	text-transform: uppercase;
	color: var(--df-white);
	text-align: center;
}

.df-product-lightbox__counter[hidden] {
	display: none;
}

body.df-product-lightbox-open {
	overflow: hidden;
}

@media (max-width: 768px) {
	.df-product-lightbox__inner {
		padding: var(--df-sp-12) var(--df-sp-4);
	}
}

@media (prefers-reduced-motion: reduce) {
	.df-product-lightbox__close,
	.df-product-lightbox__nav {
		transition: none;
	}

	.df-product-lightbox__nav:active {
		transform: translateY(-50%);
	}
}