/**
 * PDP CLS reserve + shimmer — scoped to html/body.nbd-kunmee-pdp-cls.
 * Primary visual target: .nbo-wrapper (NBO often sits outside form.cart on themes).
 */

/* Scope helper: html.nbd-kunmee-pdp-cls X, body.nbd-kunmee-pdp-cls X */

html.nbd-kunmee-pdp-cls,
body.nbd-kunmee-pdp-cls {
	--nbd-nbo-floor: 72px;
	--nbd-frontend-container-floor: 120px;
	--nbd-frontend-area-floor: 80px;
	--nbd-cls-shimmer-min: 280px;
}

html.nbd-kunmee-pdp-cls #nbo-options-wrap,
body.nbd-kunmee-pdp-cls #nbo-options-wrap {
	min-height: var(--nbd-nbo-floor);
	position: relative;
}

html.nbd-kunmee-pdp-cls.nbd-modern-layout #nbo-options-wrap,
body.nbd-kunmee-pdp-cls.nbd-modern-layout #nbo-options-wrap {
	min-height: max(var(--nbd-nbo-floor), 96px);
}

html.nbd-kunmee-pdp-cls .nbdesigner_frontend_container,
body.nbd-kunmee-pdp-cls .nbdesigner_frontend_container {
	min-height: var(--nbd-frontend-container-floor);
}

html.nbd-kunmee-pdp-cls #nbdesigner_frontend_area,
body.nbd-kunmee-pdp-cls #nbdesigner_frontend_area {
	min-height: var(--nbd-frontend-area-floor);
}

html.nbd-kunmee-pdp-cls .nbd-sidebar,
html.nbd-kunmee-pdp-cls .nbdesigner_frontend_container,
body.nbd-kunmee-pdp-cls .nbd-sidebar,
body.nbd-kunmee-pdp-cls .nbdesigner_frontend_container {
	will-change: auto;
	contain: layout style;
}

html.nbd-kunmee-pdp-cls .product_price,
html.nbd-kunmee-pdp-cls .nbd-table-pricing-wrap,
body.nbd-kunmee-pdp-cls .product_price,
body.nbd-kunmee-pdp-cls .nbd-table-pricing-wrap {
	min-height: 50px;
	position: relative;
}

/* Shimmer host: .nbo-wrapper only (form.cart rules removed — they hid the whole NBO block). */

html.nbd-kunmee-pdp-cls .nbo-wrapper,
body.nbd-kunmee-pdp-cls .nbo-wrapper {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

html.nbd-kunmee-pdp-cls .nbo-wrapper.nbd-shimmer-loading,
html.nbd-kunmee-pdp-cls .nbo-wrapper:not(.nbd-shimmer-loaded),
body.nbd-kunmee-pdp-cls .nbo-wrapper.nbd-shimmer-loading,
body.nbd-kunmee-pdp-cls .nbo-wrapper:not(.nbd-shimmer-loaded) {
	background: #f8f9fa;
	min-height: var(--nbd-cls-shimmer-min);
}

html.nbd-kunmee-pdp-cls .nbo-wrapper.nbd-shimmer-loading::before,
html.nbd-kunmee-pdp-cls .nbo-wrapper:not(.nbd-shimmer-loaded)::before,
body.nbd-kunmee-pdp-cls .nbo-wrapper.nbd-shimmer-loading::before,
body.nbd-kunmee-pdp-cls .nbo-wrapper:not(.nbd-shimmer-loaded)::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: inherit;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.6) 20%,
		rgba(255, 255, 255, 0.9) 50%,
		rgba(255, 255, 255, 0.6) 80%,
		rgba(255, 255, 255, 0) 100%
	);
	background-size: 200% 100%;
	animation: nbd-kunmee-shimmer 1.5s infinite linear;
	z-index: 5;
	pointer-events: none;
	border-radius: 8px;
}

/* Hide live options while loading (targets NBO fields, not inline style/script siblings). */
body.nbd-kunmee-pdp-cls-loading .nbo-wrapper #nbo-options-wrap,
body.nbd-kunmee-pdp-cls-loading .nbo-wrapper .nbd-option-wrapper,
html.nbd-kunmee-pdp-cls:not(.nbd-kunmee-pdp-cls-ready) .nbo-wrapper:not(.nbd-shimmer-loaded) #nbo-options-wrap,
html.nbd-kunmee-pdp-cls:not(.nbd-kunmee-pdp-cls-ready) .nbo-wrapper:not(.nbd-shimmer-loaded) .nbd-option-wrapper {
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

html.nbd-kunmee-pdp-cls .nbo-wrapper.nbd-shimmer-loaded::before,
body.nbd-kunmee-pdp-cls .nbo-wrapper.nbd-shimmer-loaded::before,
body.nbd-kunmee-pdp-cls-ready .shimmer-skeleton,
html.nbd-kunmee-pdp-cls-ready .shimmer-skeleton,
body.nbd-kunmee-pdp-cls .nbo-wrapper.nbd-shimmer-loaded .shimmer-skeleton,
html.nbd-kunmee-pdp-cls .nbo-wrapper.nbd-shimmer-loaded .shimmer-skeleton {
	display: none !important;
}

html.nbd-kunmee-pdp-cls .shimmer-skeleton,
body.nbd-kunmee-pdp-cls .shimmer-skeleton {
	position: absolute;
	inset: 0;
	z-index: 10;
	pointer-events: none;
	background: rgba(248, 249, 250, 0.97);
	padding: 20px;
	border-radius: 8px;
	box-sizing: border-box;
	overflow: hidden;
}

html.nbd-kunmee-pdp-cls .shimmer-skeleton .skeleton-header,
body.nbd-kunmee-pdp-cls .shimmer-skeleton .skeleton-header {
	height: 24px;
	width: 60%;
	max-width: 200px;
	background: #e2e8f0;
	background-image: linear-gradient(90deg, #e2e8f0 0%, #cbd5e0 50%, #e2e8f0 100%);
	background-size: 200% 100%;
	animation: nbd-kunmee-skeleton-shimmer 1.8s infinite;
	border-radius: 4px;
	margin-bottom: 20px;
}

html.nbd-kunmee-pdp-cls .shimmer-skeleton .skeleton-size-cards,
body.nbd-kunmee-pdp-cls .shimmer-skeleton .skeleton-size-cards {
	display: flex;
	gap: 12px;
	margin-bottom: 30px;
	flex-wrap: wrap;
}

html.nbd-kunmee-pdp-cls .skeleton-size-cards .skeleton-card,
body.nbd-kunmee-pdp-cls .skeleton-size-cards .skeleton-card {
	width: 100px;
	height: 100px;
	background: #e2e8f0;
	background-image: linear-gradient(90deg, #e2e8f0 0%, #cbd5e0 50%, #e2e8f0 100%);
	background-size: 200% 100%;
	animation: nbd-kunmee-skeleton-shimmer 2s infinite;
	border-radius: 8px;
	flex-shrink: 0;
}

html.nbd-kunmee-pdp-cls .skeleton-options .skeleton-option,
body.nbd-kunmee-pdp-cls .skeleton-options .skeleton-option {
	height: 40px;
	width: 100%;
	background: #e2e8f0;
	background-image: linear-gradient(90deg, #e2e8f0 0%, #cbd5e0 50%, #e2e8f0 100%);
	background-size: 200% 100%;
	animation: nbd-kunmee-skeleton-shimmer 1.6s infinite;
	border-radius: 6px;
	margin-bottom: 12px;
}

html.nbd-kunmee-pdp-cls .shimmer-skeleton .skeleton-buttons,
body.nbd-kunmee-pdp-cls .shimmer-skeleton .skeleton-buttons {
	display: flex;
	gap: 15px;
	margin-top: 30px;
}

html.nbd-kunmee-pdp-cls .skeleton-buttons .skeleton-button,
body.nbd-kunmee-pdp-cls .skeleton-buttons .skeleton-button {
	height: 45px;
	width: 120px;
	background: #e2e8f0;
	background-image: linear-gradient(90deg, #e2e8f0 0%, #cbd5e0 50%, #e2e8f0 100%);
	background-size: 200% 100%;
	animation: nbd-kunmee-skeleton-shimmer 1.4s infinite;
	border-radius: 6px;
}

@keyframes nbd-kunmee-shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

@keyframes nbd-kunmee-skeleton-shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

html.nbd-kunmee-pdp-cls .single_add_to_cart_button,
body.nbd-kunmee-pdp-cls .single_add_to_cart_button {
	margin-top: 15px !important;
	margin-bottom: 0 !important;
}

@media screen and (max-width: 767px) {
	html.nbd-kunmee-pdp-cls,
	body.nbd-kunmee-pdp-cls {
		--nbd-nbo-floor: 64px;
		--nbd-cls-shimmer-min: 220px;
	}

	html.nbd-kunmee-pdp-cls .skeleton-size-cards .skeleton-card,
	body.nbd-kunmee-pdp-cls .skeleton-size-cards .skeleton-card {
		width: 80px;
		height: 80px;
	}
}