/* ============================================================
   BBH Product Gallery – pile-navigation + lightbox
   ============================================================ */

/* ─── Skjul WooCommerce's default zoom-trigger ────────────── */
.woocommerce-product-gallery__trigger {
	display: none !important;
}

/* Klik-cursor på hovebilledet */
.woocommerce-product-gallery__image {
	cursor: zoom-in;
}

/* ─── Scroll-lock ─────────────────────────────────────────── */
body.bbh-no-scroll {
	overflow: hidden;
}

/* ============================================================
   PILE-NAVIGATION PÅ HOVEBILLEDET
   ============================================================ */

.bbh-gallery-arrows {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
	z-index: 10;
	padding: 0 12px;
}

.bbh-gallery-arrow {
	pointer-events: all;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
	cursor: pointer;
	transition: background 0.18s ease, transform 0.15s ease, opacity 0.18s ease;
	opacity: 0;
	color: #121212;
}

/*
 * Pile er i .flex-viewport (position:relative, overflow:hidden).
 * Hover på viewport viser dem.
 */
.flex-viewport:hover .bbh-gallery-arrow {
	opacity: 1;
}

.bbh-gallery-arrow:hover {
	background: #002927;
	color: #fff;
	transform: scale(1.06);
}

.bbh-gallery-arrow svg {
	width: 20px;
	height: 20px;
	display: block;
	flex-shrink: 0;
}

/* ============================================================
   LIGHTBOX
   ============================================================ */

.bbh-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	align-items: center;
	justify-content: center;
}

.bbh-lightbox.is-open {
	display: flex;
	animation: bbh-lb-fadein 0.22s ease both;
}

@keyframes bbh-lb-fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ─── Backdrop ────────────────────────────────────────────── */
.bbh-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, 0.6);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* ─── Stage (indeholder alt undtagen backdrop) ────────────── */
.bbh-lightbox__stage {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 60px 80px;
	box-sizing: border-box;
}

/* ─── Luk-knap ────────────────────────────────────────────── */
.bbh-lightbox__close {
	position: absolute;
	top: 18px;
	right: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.15s ease;
	z-index: 10;
}

.bbh-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.26);
	transform: scale(1.08);
}

.bbh-lightbox__close svg {
	width: 20px;
	height: 20px;
}

/* ─── Lightbox pile ───────────────────────────────────────── */
.bbh-lightbox__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.15s ease;
	z-index: 10;
}

.bbh-lightbox__arrow--prev { left: 18px; }
.bbh-lightbox__arrow--next { right: 18px; }

.bbh-lightbox__arrow:hover {
	background: rgba(255, 255, 255, 0.26);
}

.bbh-lightbox__arrow--prev:hover { transform: translateY(-50%) scale(1.06); }
.bbh-lightbox__arrow--next:hover { transform: translateY(-50%) scale(1.06); }

.bbh-lightbox__arrow svg {
	width: 24px;
	height: 24px;
}

.bbh-lightbox__arrow.is-hidden {
	display: none;
}

/* ─── Billedwrapper ───────────────────────────────────────── */
.bbh-lightbox__img-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
}

/* ─── Billede ─────────────────────────────────────────────── */
.bbh-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	opacity: 0;
	transition: opacity 0.22s ease;
	user-select: none;
}

.bbh-lightbox__img.is-loaded {
	opacity: 1;
}

/* ─── Tæller (1 / 4) ──────────────────────────────────────── */
.bbh-lightbox__counter {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	letter-spacing: 0.04em;
	font-family: inherit;
	pointer-events: none;
}

/* ─── Mobil ───────────────────────────────────────────────── */
@media (max-width: 600px) {
	.bbh-lightbox__stage {
		padding: 56px 16px 48px;
	}

	.bbh-lightbox__arrow {
		width: 40px;
		height: 40px;
	}

	.bbh-lightbox__arrow--prev { left: 6px; }
	.bbh-lightbox__arrow--next { right: 6px; }
}