/**
 * PDP PhotoSwipe: witte modal-kaart gecentreerd over een donkere overlay.
 * Kruisje rechtsboven in de kaart, chevrons onderaan in het midden.
 */

body.single-product .pswp {
	--color-primary-500: #ab3300;
}

body.single-product .pswp[aria-hidden="true"] {
	display: none !important;
}

body.single-product .pswp .pswp__bg {
	z-index: 1;
	background-color: rgb(0 0 0 / 0.4);
}

body.single-product .pswp .pswp__scroll-wrap {
	z-index: 10;
	width: min(52rem, calc(100vw - 2rem));
	max-height: min(44rem, calc(100vh - 4rem));
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	background: #fff;
}

body.single-product .pswp .pswp__counter,
body.single-product .pswp .pswp__button--zoom,
body.single-product .pswp .pswp__button--fs,
body.single-product .pswp .pswp__button--share,
body.single-product .pswp .pswp__preloader,
body.single-product .pswp .pswp__caption {
	display: none !important;
}

body.single-product .pswp .pswp__top-bar {
	background: transparent !important;
	height: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	box-shadow: none;
	overflow: visible;
}

/* ── Kruisje: rechtsboven in de witte kaart ── */

body.single-product button.pswp__button.pswp__button--close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	left: auto;
	bottom: auto;
	z-index: 2000;
	float: none;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
	width: 44px;
	height: 44px;
	margin: 0;
	opacity: 1;
}

body.single-product .pswp .pswp__button--close::before,
body.single-product .pswp .pswp__button--close::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 22px;
	height: 2px;
	background-color: var(--color-primary-500);
	border-radius: 1px;
}

body.single-product .pswp .pswp__button--close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

body.single-product .pswp .pswp__button--close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

body.single-product .pswp .pswp__button--close:hover::before,
body.single-product .pswp .pswp__button--close:hover::after {
	background-color: #972e00;
}

body.single-product button.pswp__button--close:hover {
	background-image: none !important;
	background-position: 0 0 !important;
}

/* ── Chevrons: onderaan het midden van de witte kaart ── */

body.single-product .pswp .pswp__button--arrow--left,
body.single-product .pswp .pswp__button--arrow--right {
	position: absolute;
	top: auto;
	bottom: 0.75rem;
	margin-top: 0;
	width: 44px;
	height: 44px;
	background: none !important;
	z-index: 2000;
}

body.single-product .pswp .pswp__button--arrow--left {
	left: calc(50% - 44px - 0.25rem);
	right: auto;
}

body.single-product .pswp .pswp__button--arrow--right {
	left: calc(50% + 0.25rem);
	right: auto;
}

body.single-product .pswp .pswp__button--arrow--left::before,
body.single-product .pswp .pswp__button--arrow--right::before {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: none;
	transform: translate(-50%, -50%);
	background-color: transparent !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
}

body.single-product .pswp .pswp__button--arrow--left::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%23AB3300' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
}

body.single-product .pswp .pswp__button--arrow--right::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%23AB3300' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M9 6l6 6-6 6'/%3E%3C/svg%3E") !important;
}

body.single-product .pswp .pswp__button--arrow--left:hover::before,
body.single-product .pswp .pswp__button--arrow--right:hover::before {
	opacity: 0.85;
}

body.single-product .pswp.pswp--touch .pswp__button--arrow--left,
body.single-product .pswp.pswp--touch .pswp__button--arrow--right,
body.single-product .pswp.pswp--has_mouse .pswp__button--arrow--left,
body.single-product .pswp.pswp--has_mouse .pswp__button--arrow--right {
	visibility: visible !important;
	opacity: 1 !important;
}