/* ============================================================
   Product modal (popup product page) - marble-for-kitchen
   נפתח בלחיצה על כרטיס מוצר באשף/בחלון הראווה - added 2026-06-22
   ============================================================ */
.nzm-pm-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 3vw, 40px);
	background: rgba(10, 10, 10, 0.6);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.nzm-pm-overlay.is-open {
	display: flex;
}

.nzm-pm-dialog {
	position: relative;
	background: #fff;
	width: min(1200px, 100%);
	max-height: 90vh;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
	display: flex;
	flex-direction: column;
	animation: nzm-pm-in 0.25s ease;
}
@keyframes nzm-pm-in {
	from { opacity: 0; transform: translateY(14px) scale(0.985); }
	to   { opacity: 1; transform: none; }
}

.nzm-pm-close {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 6;
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #111;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
	transition: background 0.2s ease, transform 0.2s ease;
}
.nzm-pm-close:hover {
	background: #fff;
	transform: rotate(90deg);
}

.nzm-pm-body {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	max-height: 90vh;
}

.nzm-pm-loading {
	min-height: 340px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	font-size: 18px;
	gap: 12px;
}
.nzm-pm-spinner {
	width: 38px;
	height: 38px;
	border: 3px solid #e3e3e3;
	border-top-color: #111;
	border-radius: 50%;
	animation: nzm-pm-spin 0.8s linear infinite;
}
@keyframes nzm-pm-spin { to { transform: rotate(360deg); } }
.nzm-pm-error a { color: #111; text-decoration: underline; }

body.nzm-pm-lock { overflow: hidden; }

/* ---- override the full-bleed product hero so it fits inside the modal ---- */
.nzm-pm-body .nzm-product-page__hero {
	width: 100%;
	max-width: none;
	margin: 0;
	margin-inline: 0;
}
.nzm-pm-body .nzm-product-page__image-col {
	aspect-ratio: auto;
	align-self: stretch;
	min-height: 320px;
}
.nzm-pm-body .nzm-product-page__details {
	max-width: none;
	flex: 1 1 46%;
	padding: clamp(24px, 3vw, 48px) clamp(20px, 3vw, 44px);
}
/* hide the (now unused) nested full-image dialog markup if present */
.nzm-pm-body .nzm-hero-lightbox { display: none; }

/* mobile: near-fullscreen, image stacked on top (page @media already turns hero to column ≤1024) */
@media (max-width: 860px) {
	.nzm-pm-overlay {
		padding: 0;
		align-items: stretch;
	}
	.nzm-pm-dialog {
		width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
	}
	.nzm-pm-body { max-height: 100%; }
	.nzm-pm-body .nzm-product-page__image-col {
		aspect-ratio: 16 / 10;
		min-height: 0;
	}
}