/* Original hero lighting retained; section halos and reference pricing/FAQ effects below.
 * Reuse the site's existing typography and silver-on-black tokens.
 */
body.single-product.product-checkout-page .custom-single-product {
	position: relative;
	padding-top: 0 !important;
	isolation: isolate;
}

.product-checkout-page .product-hero-stage {
	position: relative;
	display: flow-root;
	padding-top: 0;
	perspective: 1500px;
}

/* Keep the backdrop edge-to-edge while the content retains its reading width. */
.product-checkout-page .product-hero-stage::before {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 50%;
	width: var(--product-scenery-width, 100vw);
	height: 100%;
	background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
	background-size: 50px 50px;
	mask-image: linear-gradient(180deg, #000 0%, #000 24%, rgba(0, 0, 0, .6) 58%, transparent 100%);
	opacity: .04;
	pointer-events: none;
	transform: translateX(-50%);
	content: '';
}

.product-ambient-lights {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 50%;
	width: var(--product-scenery-width, 100vw);
	height: 100%;
	overflow: clip;
	pointer-events: none;
	transform: translateX(-50%);
}

.product-ambient-light {
	position: absolute;
	top: -15%;
	width: 80%;
	max-width: none;
	height: auto;
	filter: blur(10px);
	opacity: .78;
}

.product-ambient-light--left {
	left: -32%;
}

.product-ambient-light--right {
	right: -32%;
}

.product-checkout-page .product-hero-intro {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto !important;
	padding-top: 168px;
	text-align: center;
}

.product-checkout-page .product-hero-intro > .flex {
	justify-content: center;
}

body.product-checkout-page .custom-single-product .product-breadcrumb-list {
	justify-content: center;
}

body.single-product.product-checkout-page .custom-single-product .product-breadcrumb-item.is-current {
	flex-grow: 0;
	justify-content: center;
}

body.product-checkout-page .custom-single-product .product-main-title {
	max-width: 800px;
	margin: 8px auto 20px !important;
	font-size: clamp(34px, 4vw, 56px) !important;
	line-height: 1.14 !important;
	text-align: center;
	text-wrap: balance;
}

.product-checkout-page .product-hero-summary {
	max-width: 610px;
	margin: 0 auto 24px;
	font-size: 18px;
	line-height: 1.65;
	text-align: center;
	text-wrap: pretty;
}

body.product-checkout-page .custom-single-product .product-hero-media {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1000px;
	margin: 64px auto 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
	container-type: inline-size;
	--hero-frame-unit: calc(100cqw / 1321);
	--hero-light-top-y: 0%;
	--hero-light-bottom-y: -79%;
}

.product-checkout-page .product-frame-light {
	position: absolute;
	inset: auto 0 0;
	width: 100%;
	max-width: none;
	height: auto;
	object-fit: cover;
	pointer-events: none;
}

.product-checkout-page .product-frame-light--top {
	z-index: -1;
	inset: -13% 0 auto;
	transform: translate3d(0, var(--hero-light-top-y), 0);
}

.product-checkout-page .product-frame-light--bottom {
	z-index: -1;
	inset: auto 0 3.8%;
	height: 100px;
	margin-inline: auto;
	overflow: visible;
	transform: translate3d(0, var(--hero-light-bottom-y), 0);
}

/* Width-relative glass rim stays visible independently of decorative lighting.
 */
.product-checkout-page .product-video-frame {
	position: relative;
	z-index: 0;
	width: 100%;
	padding: calc(var(--hero-frame-unit) * 9);
	border-radius: calc(var(--hero-frame-unit) * 25);
	background: rgba(var(--ui-text-silver-rgb), .12);
	box-shadow: inset 0 0 0 1px rgba(var(--ui-text-silver-rgb), .18);
}

.product-checkout-page .product-hero-media .product-video-wrap,
.product-checkout-page .product-hero-media .product-image-wrap {
	position: relative;
	z-index: 1;
	border: 0;
	border-radius: calc(var(--hero-frame-unit) * 16);
	box-shadow: none;
}

.product-checkout-page .product-hero-media .product-image-wrap img {
	max-height: 563px;
}

.product-checkout-page .product-content-stage {
	position: relative;
	display: flow-root;
	isolation: isolate;
}

body.product-checkout-page .product-scenic-section {
	position: relative;
	isolation: isolate;
}

.product-section-scenery-layer {
	display: none;
	position: absolute;
	z-index: -1;
	inset: -48px auto -48px 50%;
	width: var(--product-scenery-width, calc(100vw - 20px));
	overflow: clip;
	-webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
	mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
	pointer-events: none;
	transform: translateX(-50%);
}

.product-section-glow {
	position: absolute;
	top: 50%;
	width: min(48vw, 640px);
	height: min(80%, 480px);
	min-height: 260px;
	border-radius: 50%;
	background: radial-gradient(ellipse at var(--glow-origin) 50%, rgba(var(--ui-text-silver-rgb), .2), rgba(var(--ui-text-silver-rgb), .08) 30%, rgba(var(--ui-text-silver-rgb), .025) 52%, transparent 74%);
	transform: translateY(-50%);
}

.product-section-glow--right { --glow-origin: 85%; right: 0%; }
.product-section-glow--left { --glow-origin: 15%; left: 0%; }

body.product-checkout-page .related-products-section.product-scenic-section {
	overflow: visible !important;
}

body.single-product.product-checkout-page .related-products-section > .product-slider-bottom-light {
	position: absolute;
	z-index: 0;
	inset: 0;
	overflow: clip;
	pointer-events: none;
}

body.single-product.product-checkout-page .product-slider-bottom-light .section-bottom-silver-glow {
	background: radial-gradient(ellipse 66% 60% at 50% 100%, rgba(var(--ui-text-silver-rgb), .44) 0, rgba(var(--ui-text-silver-rgb), .26) 30%, rgba(var(--ui-text-silver-rgb), .13) 52%, rgba(var(--ui-text-silver-rgb), .06) 66%, transparent 86%);
}

/* Fade the content alpha, not a black overlay over the shared panel surface. */
body.product-checkout-page .product-description-collapsible.is-collapsed [data-product-description-content] {
	-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 110px), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 110px), transparent 100%);
}

body.product-checkout-page .product-description-fade {
	display: none;
}

body.product-checkout-page .product-changelog-box .product-changelog-list {
	gap: 0;
}

body.product-checkout-page .product-changelog-box .product-changelog-entry {
	padding: 18px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

body.product-checkout-page .product-changelog-box .product-changelog-entry + .product-changelog-entry {
	border-top: 1px solid var(--product-accordion-divider);
}

body.product-checkout-page .product-changelog-box .product-changelog-entry:first-child {
	padding-top: 0;
}

body.product-checkout-page .product-changelog-box .product-changelog-entry:last-child {
	padding-bottom: 0;
}

body.product-checkout-page :is(.product-purchase, .product-faq-section, .related-products-section) {
	border-top-color: rgba(var(--ui-text-silver-rgb), .22);
}

body.product-checkout-page .product-faq-section {
	position: relative;
	margin-top: 96px;
	padding-top: 64px;
}

body.product-checkout-page :is(.product-faq-section, .product-purchase-plans) > .product-section-heading {
	max-width: 640px;
	margin: 0 auto 50px;
	text-align: center;
}

body.product-checkout-page :is(.product-faq-section, .product-purchase-plans) > .product-section-heading h2 {
	margin: 16px 0 0;
	font-size: clamp(30px, 3.6vw, 48px);
	line-height: 1.15;
	text-wrap: balance;
}

body.product-checkout-page :is(.product-faq-section, .product-purchase-plans) > .product-section-heading > p {
	margin: 20px 0 0;
	color: rgba(var(--ui-text-silver-rgb), .62);
	font-size: 16px;
	line-height: 1.7;
}

body.product-checkout-page .product-faq-list {
	width: 100%;
	max-width: 960px;
	gap: 24px;
}

body.product-checkout-page .product-faq-item {
	position: relative;
	padding: 0 0 36px;
	border: 1px solid rgba(var(--ui-text-silver-rgb), .2);
	border-radius: 20px;
	background: var(--ui-panel-surface);
	box-shadow: var(--ui-panel-inset-shadow);
	cursor: auto;
	transition: border-color .35s, box-shadow .35s;
}

body.product-checkout-page .product-faq-item::before {
	position: absolute;
	z-index: 0;
	inset: 0;
	border-radius: inherit;
	background: url('../images/product-reference/faq-glow.webp') center / 100% 100% no-repeat;
	filter: grayscale(1);
	content: '';
	opacity: 0;
	pointer-events: none;
	transition: opacity .45s;
}

body.product-checkout-page .product-faq-item.is-active {
	border-color: rgba(var(--ui-text-silver-rgb), .44);
	box-shadow: var(--ui-panel-inset-shadow);
}

body.product-checkout-page .product-faq-item.is-active::before {
	opacity: 1;
}

body.product-checkout-page .product-faq-question {
	position: relative;
	z-index: 1;
	gap: 24px;
	padding: 36px 36px 0;
	cursor: pointer;
}

body.product-checkout-page .product-faq-question:focus-visible {
	outline: 2px solid var(--ui-text-silver, #e6eef6);
	outline-offset: -4px;
}

body.product-checkout-page .product-faq-question .faq-title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
}

body.product-checkout-page .product-faq-icon {
	width: 32px;
	height: 32px;
	flex-basis: 32px;
	border: 1px solid rgba(var(--ui-text-silver-rgb), .24);
	border-radius: 8px;
	background: rgba(var(--ui-text-silver-rgb), .055);
}

body.product-checkout-page .product-faq-item.is-active .product-faq-icon {
	border-color: rgba(var(--ui-text-silver-rgb), .5);
	background: rgba(var(--ui-text-silver-rgb), .14);
}

/* Opacity temporarily creates a stacking context; keep the answer above the glow at opacity 1 too. */
body.product-checkout-page .product-faq-answer {
	position: relative;
	z-index: 1;
}

body.product-checkout-page .product-faq-answer-inner {
	max-width: none;
	padding: 24px 36px 0;
}

body.product-checkout-page .product-faq-answer .faq-text,
body.product-checkout-page .product-faq-answer .faq-text p {
	color: rgba(var(--ui-text-silver-rgb), .64) !important;
	font-size: 16px;
	line-height: 1.75;
}

body.hello-product-arabic.product-checkout-page .product-faq-question,
body.hello-product-arabic.product-checkout-page .product-main-title,
body.hello-product-arabic.product-checkout-page .product-faq-section .product-section-heading h2,
body.hello-product-arabic.product-checkout-page .product-purchase-plans .product-section-heading h2,
body.hello-product-arabic.product-checkout-page .product-faq-question .faq-title,
body.hello-product-arabic.product-checkout-page .product-faq-answer .faq-text,
body.hello-product-arabic.product-checkout-page .product-faq-answer .faq-text p {
	font-family: 'Almarai', sans-serif !important;
}

@media (max-width: 1024px) {
	.product-ambient-lights,
	.product-section-scenery-layer { display: none; }
}

@media (max-width: 991px) {
	.product-section-glow { width: min(80vw, 440px); opacity: .75; }

	.product-checkout-page .product-hero-intro {
		padding-top: 145px;
	}

	body.product-checkout-page .custom-single-product .product-hero-media {
		max-width: 860px;
		margin-top: 50px;
		margin-bottom: 72px;
	}

	.product-ambient-light { top: -14%; }
	.product-checkout-page .product-frame-light--bottom { bottom: -1%; transform: none; }
}

@media (max-width: 767px) {
	.product-checkout-page .product-hero-stage::before { opacity: .025; }

	body.product-checkout-page .custom-single-product .product-main-title {
		font-size: clamp(32px, 6vw, 44px) !important;
	}

	.product-checkout-page .product-hero-summary { font-size: 16px; }

	body.product-checkout-page .custom-single-product .product-hero-media {
		margin-top: 40px;
		margin-bottom: 64px;
	}

	.product-checkout-page .product-frame-light--bottom { bottom: -4%; }

	body.product-checkout-page .product-faq-section {
		margin-top: 64px;
		padding-top: 40px;
	}

	body.product-checkout-page .product-faq-question { padding: 36px 20px 0; }
	body.product-checkout-page .product-faq-question .faq-title { font-size: 18px; }
	body.product-checkout-page .product-faq-answer-inner,
	body.hello-product-arabic.product-checkout-page .product-faq-answer-inner { padding: 24px 20px 0; }
}

@media (max-width: 479px) {
	.product-checkout-page .product-hero-intro { padding-top: 128px; }
	body.product-checkout-page .custom-single-product .product-main-title { font-size: 32px !important; }
	.product-ambient-light { top: -8%; }
	body.product-checkout-page .product-faq-list { gap: 20px; }
	body.product-checkout-page .product-faq-item { padding-bottom: 24px; }
	body.product-checkout-page .product-faq-question { gap: 16px; padding: 24px 16px 0; }
	body.product-checkout-page .product-faq-question .faq-title { font-size: 16px; }
	body.product-checkout-page .product-faq-answer-inner,
	body.hello-product-arabic.product-checkout-page .product-faq-answer-inner { padding: 16px 16px 0; }
	body.product-checkout-page .product-faq-answer .faq-text,
	body.product-checkout-page .product-faq-answer .faq-text p { font-size: 14px; }
	.product-checkout-page .product-frame-light--bottom { width: 26%; max-width: 26%; bottom: -15%; }
}

@media (prefers-reduced-motion: reduce) {
	.product-effects-ready .product-hero-intro *,
	.product-effects-ready .product-hero-media > *,
	.product-effects-ready .product-faq-item,
	body.product-checkout-page .product-faq-section .product-faq-answer,
	body.product-checkout-page .product-faq-icon * {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}

}

@media (min-width: 1920px) {
	.product-ambient-light {
		top: -35%;
	}

	.product-ambient-light--left { left: -40%; }
	.product-ambient-light--right { right: -40%; }
	.product-checkout-page .product-frame-light--top { top: -14%; }
	.product-checkout-page .product-frame-light--bottom { bottom: 4%; }
}
