/*
 * Biyani full-screen image viewer (PhotoSwipe v4 polish). Enqueued on single product pages only.
 * Brand tokens: ivory ground (--bj-ivory #FBF8F3 ~0.97), ink text, 44px frosted-glass discs.
 */

/* Light backdrop instead of black */
.pswp__bg {
	background: var(--bj-ivory, #FBF8F3) !important;
	opacity: 0.97 !important;
}

/* Hide unused PhotoSwipe default controls */
.pswp__button--fs,
.pswp__button--zoom,
.pswp__button--share {
	display: none !important;
}

/* Main gallery image: clicking (or Enter/Space, pdp.js) opens the viewer above. No hover zoom (WooCommerce
   zoom disabled in biyani-pdp.php); a plain zoom-in cursor is the only hover affordance, no gold ring. */
.woocommerce-product-gallery__image a {
	display: block !important;
	cursor: zoom-in !important;
	outline: none !important;
}
.woocommerce-product-gallery__image a:focus-visible {
	outline: 2px solid #4A1F4F !important;
	outline-offset: 3px !important;
	border-radius: 4px !important;
}
.woocommerce-product-gallery__image a:focus:not(:focus-visible) {
	outline: none !important;
}

/* Top bar: transparent container */
.pswp__top-bar {
	background: transparent !important;
	height: 72px !important;
	padding: 16px 20px !important;
	pointer-events: none !important;
}

/* Readable counter disc */
.pswp__counter {
	position: fixed !important;
	top: 16px !important;
	left: 20px !important;
	height: 44px !important;
	line-height: 42px !important;
	font-family: var(--bj-font-body, "Jost", sans-serif) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	color: var(--bj-ink, #1C1A17) !important;
	background: var(--bj-glass-bg-solid, rgba(255, 253, 248, 0.92)) !important;
	padding: 0 18px !important;
	border-radius: 999px !important;
	border: 1px solid rgba(140, 90, 43, 0.20) !important;
	box-shadow: 0 4px 16px rgba(18, 14, 10, 0.08) !important;
	pointer-events: auto !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pswp__counter {
		background: var(--bj-glass-bg, rgba(252, 249, 243, 0.65)) !important;
		-webkit-backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
		backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
		border-color: var(--bj-glass-border, rgba(255, 255, 255, 0.55)) !important;
	}
}

/* 44px glass disc close button */
.pswp__button--close {
	position: fixed !important;
	top: 16px !important;
	right: 20px !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 999px !important;
	background: var(--bj-glass-bg-solid, rgba(255, 253, 248, 0.92)) !important;
	border: 1px solid rgba(140, 90, 43, 0.20) !important;
	box-shadow: var(--bj-glass-shadow, 0 4px 16px rgba(18, 14, 10, 0.12)) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	pointer-events: auto !important;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
	padding: 0 !important;
	margin: 0 !important;
	opacity: 1 !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pswp__button--close {
		background: var(--bj-glass-bg, rgba(252, 249, 243, 0.58)) !important;
		-webkit-backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
		backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
		border-color: var(--bj-glass-border, rgba(255, 255, 255, 0.55)) !important;
	}
}

.pswp__button--close:hover {
	background: var(--bj-glass-bg-hover, rgba(252, 249, 243, 0.85)) !important;
	transform: scale(1.05) !important;
	box-shadow: 0 6px 20px rgba(18, 14, 10, 0.16) !important;
	border-color: rgba(255, 255, 255, 0.7) !important;
}
.pswp__button--close:focus-visible {
	background: var(--bj-glass-bg-hover, rgba(252, 249, 243, 0.85)) !important;
	outline: 2px solid #4A1F4F !important;
	outline-offset: 3px !important;
	box-shadow: none !important;
}
.pswp__button--close:focus:not(:focus-visible) {
	outline: none !important;
}

.pswp__button--close::before,
.pswp__button--close::after {
	content: '' !important;
	position: absolute !important;
	width: 16px !important;
	height: 2px !important;
	background: var(--bj-ink, #1C1A17) !important;
	border-radius: 1px !important;
}

.pswp__button--close::before {
	transform: rotate(45deg) !important;
}

.pswp__button--close::after {
	transform: rotate(-45deg) !important;
}

/* 44px glass disc arrow navigation */
.pswp__button--arrow--left,
.pswp__button--arrow--right {
	width: 44px !important;
	height: 44px !important;
	top: 50% !important;
	margin-top: -22px !important;
	border-radius: 999px !important;
	background: var(--bj-glass-bg-solid, rgba(255, 253, 248, 0.92)) !important;
	border: 1px solid rgba(140, 90, 43, 0.20) !important;
	box-shadow: var(--bj-glass-shadow, 0 4px 16px rgba(18, 14, 10, 0.12)) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
	opacity: 1 !important;
	cursor: pointer !important;
}

.pswp__button--arrow--left {
	left: 20px !important;
}

.pswp__button--arrow--right {
	right: 20px !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pswp__button--arrow--left,
	.pswp__button--arrow--right {
		background: var(--bj-glass-bg, rgba(252, 249, 243, 0.58)) !important;
		-webkit-backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
		backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
		border-color: var(--bj-glass-border, rgba(255, 255, 255, 0.55)) !important;
	}
}

.pswp__button--arrow--left:hover,
.pswp__button--arrow--right:hover {
	background: var(--bj-glass-bg-hover, rgba(252, 249, 243, 0.85)) !important;
	transform: scale(1.05) !important;
	box-shadow: 0 6px 20px rgba(18, 14, 10, 0.16) !important;
	border-color: rgba(255, 255, 255, 0.7) !important;
}
.pswp__button--arrow--left:focus-visible,
.pswp__button--arrow--right:focus-visible {
	background: var(--bj-glass-bg-hover, rgba(252, 249, 243, 0.85)) !important;
	outline: 2px solid #4A1F4F !important;
	outline-offset: 3px !important;
	box-shadow: none !important;
}
.pswp__button--arrow--left:focus:not(:focus-visible),
.pswp__button--arrow--right:focus:not(:focus-visible) {
	outline: none !important;
}

.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
	content: '' !important;
	position: absolute !important;
	width: 10px !important;
	height: 10px !important;
	border-top: 2px solid var(--bj-ink, #1C1A17) !important;
	border-right: 2px solid var(--bj-ink, #1C1A17) !important;
	background: none !important;
	top: 50% !important;
	left: 50% !important;
}

.pswp__button--arrow--left::before {
	transform: translate(-35%, -50%) rotate(-135deg) !important;
}

.pswp__button--arrow--right::before {
	transform: translate(-65%, -50%) rotate(45deg) !important;
}

/* Light thumbnail strip overlay at the bottom */
.bj-pswp-thumbs {
	position: fixed !important;
	bottom: 20px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	z-index: 1045 !important;
	display: flex !important;
	gap: 10px !important;
	padding: 8px 12px !important;
	background: var(--bj-glass-bg-solid, rgba(255, 253, 248, 0.92)) !important;
	border: 1px solid rgba(28, 26, 23, 0.12) !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 24px rgba(18, 14, 10, 0.10) !important;
	max-width: 90vw !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.bj-pswp-thumbs {
		background: rgba(252, 249, 243, 0.75) !important;
		-webkit-backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
		backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
		border-color: var(--bj-glass-border, rgba(255, 255, 255, 0.55)) !important;
	}
}

.bj-pswp-thumb {
	width: 52px !important;
	height: 52px !important;
	padding: 0 !important;
	border-radius: 6px !important;
	border: 2px solid transparent !important;
	overflow: hidden !important;
	background: none !important;
	cursor: pointer !important;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
	flex-shrink: 0 !important;
}

.bj-pswp-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

.bj-pswp-thumb:hover {
	opacity: 0.9 !important;
	transform: translateY(-1px) !important;
}

.bj-pswp-thumb.is-active {
	border-color: var(--bj-gold, #CA9234) !important;
	box-shadow: 0 2px 8px rgba(202, 146, 52, 0.35) !important;
}

@media (max-width: 767px) {
	.pswp__button--arrow--left {
		left: 10px !important;
	}
	.pswp__button--arrow--right {
		right: 10px !important;
	}
	.pswp__button--close {
		top: 10px !important;
		right: 10px !important;
	}
	.pswp__counter {
		top: 10px !important;
		left: 10px !important;
		height: 38px !important;
		line-height: 36px !important;
		font-size: 13px !important;
		padding: 0 14px !important;
	}
	.bj-pswp-thumbs {
		bottom: 12px !important;
		gap: 8px !important;
		padding: 6px 8px !important;
	}
	.bj-pswp-thumb {
		width: 44px !important;
		height: 44px !important;
	}
}