/* =========================================================================
   Ofnoa Smart Product Popup — luxury edition
   Brand tokens (set from settings): --ospp-gold, --ospp-dark, --ospp-light, --ospp-font
   ========================================================================= */

.ospp-root {
	--ospp-gold: #8D7331;
	--ospp-dark: #0b0b0b;
	--ospp-light: #f6f3ec;
	--ospp-plate: #e9e8e6;
	--ospp-gold-soft: color-mix(in srgb, var(--ospp-gold) 45%, transparent);
	--ospp-gold-hi: color-mix(in srgb, var(--ospp-gold) 70%, #fff 30%);
	--ospp-ease: cubic-bezier(.16, 1, .3, 1);
	--ospp-ease-in: cubic-bezier(.7, 0, .84, 0);
	font-family: var(--ospp-font, inherit);
	direction: rtl;
	position: fixed;
	inset: 0;
	z-index: 999990;
	pointer-events: none;
	-webkit-font-smoothing: antialiased;
}
.ospp-root *, .ospp-root *::before, .ospp-root *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- overlay */
.ospp-overlay {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 50% 40%, rgba(10, 9, 7, .45), rgba(4, 4, 3, .82));
	backdrop-filter: blur(7px) saturate(.85);
	-webkit-backdrop-filter: blur(7px) saturate(.85);
	opacity: 0;
	transition: opacity .7s var(--ospp-ease);
	pointer-events: auto;
}
.ospp-root.is-open .ospp-overlay { opacity: 1; }
.ospp-root.is-closing .ospp-overlay { opacity: 0; transition-duration: .45s; }

/* ----------------------------------------------------------------- dialog */
.ospp-dialog {
	position: absolute;
	inset-inline-start: 50%;
	top: 50%;
	transform: translate(50%, calc(-50% + 34px)) scale(.985);
	opacity: 0;
	pointer-events: auto;
	transition: transform 1s var(--ospp-ease), opacity .8s var(--ospp-ease);
	box-shadow:
		0 40px 90px -20px rgba(0, 0, 0, .55),
		0 18px 36px -18px rgba(0, 0, 0, .45);
	outline: none;
	max-height: 96vh;
	overflow: auto;
	scrollbar-width: none;
}
.ospp-dialog::-webkit-scrollbar { display: none; }
.ospp-root.is-open .ospp-dialog { transform: translate(50%, -50%) scale(1); opacity: 1; }
.ospp-root.is-closing .ospp-dialog {
	transform: translate(50%, calc(-50% + 18px)) scale(.99);
	opacity: 0;
	transition: transform .45s var(--ospp-ease-in), opacity .4s var(--ospp-ease-in);
}

/* -------------------------------------------------------------- elements */
.ospp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--ospp-gold-hi);
	margin: 0 0 18px;
	line-height: 1.3;
}
.ospp-eyebrow::before {
	content: "";
	width: 34px;
	height: 1px;
	background: currentColor;
	transform-origin: right center;
	transform: scaleX(0);
	transition: transform 1.1s .55s var(--ospp-ease);
}
.ospp-root.is-open .ospp-eyebrow::before { transform: scaleX(1); }

.ospp-headline {
	font-family: inherit;
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.12;
	letter-spacing: -.005em;
	margin: 0 0 16px;
	color: inherit;
	text-wrap: balance;
}
.ospp-body {
	font-size: 17px;
	font-weight: 300;
	line-height: 1.65;
	margin: 0 0 22px;
	opacity: .86;
	text-wrap: pretty;
}
.ospp-name {
	font-size: 14px;
	letter-spacing: .04em;
	opacity: .62;
	margin: 0 0 26px;
	padding-top: 16px;
	border-top: 1px solid var(--ospp-gold-soft);
}
.ospp-price { font-size: 18px; font-weight: 300; margin: -14px 0 24px; color: var(--ospp-gold-hi); }
.ospp-price del { opacity: .5; margin-inline-end: 8px; }
.ospp-price ins { text-decoration: none; }

.ospp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }

.ospp-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 54px;
	padding: 0 34px;
	border: 0;
	border-radius: 0;
	background: var(--ospp-gold);
	color: #fff !important;
	font-family: inherit;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: .04em;
	text-decoration: none !important;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: background-color .4s var(--ospp-ease), transform .4s var(--ospp-ease);
}
/* Slow light sweep across the gold, like brushed metal catching light. */
.ospp-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
	transform: translateX(120%);
	transition: transform 1s var(--ospp-ease);
}
.ospp-btn:hover::after, .ospp-btn:focus-visible::after { transform: translateX(-120%); }
.ospp-btn:hover { background: color-mix(in srgb, var(--ospp-gold) 86%, #000); }
.ospp-btn:active { transform: translateY(1px); }
.ospp-btn .ospp-arrow { display: inline-block; transition: transform .5s var(--ospp-ease); }
.ospp-btn:hover .ospp-arrow { transform: translateX(-5px); }
.ospp-btn[disabled] { opacity: .7; cursor: default; }

.ospp-link {
	position: relative;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: .03em;
	color: inherit !important;
	text-decoration: none !important;
	padding: 6px 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}
.ospp-link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 2px;
	height: 1px;
	background: var(--ospp-gold);
	transform: scaleX(.35);
	transform-origin: right center;
	transition: transform .6s var(--ospp-ease);
}
.ospp-link:hover::after, .ospp-link:focus-visible::after { transform: scaleX(1); }

.ospp-signature {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 14px;
	letter-spacing: .08em;
	color: var(--ospp-gold-hi);
	opacity: .9;
	direction: ltr;
}

.ospp-close {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	z-index: 5;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	color: inherit;
	transition: transform .6s var(--ospp-ease), color .3s;
}
.ospp-close::before, .ospp-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 1px;
	background: currentColor;
}
.ospp-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.ospp-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.ospp-close:hover, .ospp-close:focus-visible { transform: rotate(90deg); color: var(--ospp-gold-hi); }

.ospp-root :focus-visible { outline: 1px solid var(--ospp-gold-hi); outline-offset: 4px; }
.ospp-root .ospp-dialog:focus, .ospp-root .ospp-dialog:focus-visible { outline: none; }

/* ----------------------------------------------------------- image plate */
.ospp-plate {
	position: relative;
	background: var(--ospp-plate);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ospp-plate img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: scale(1.07);
	opacity: 0;
	transition: transform 2.4s var(--ospp-ease), opacity 1.2s .15s var(--ospp-ease);
}
.ospp-root.is-open .ospp-plate img { transform: scale(1); opacity: 1; }
/* Soft studio light over the photo. */
.ospp-plate::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(90% 70% at 50% 35%, rgba(255, 255, 255, .22), transparent 60%),
		linear-gradient(to top, rgba(0, 0, 0, .06), transparent 30%);
}

/* Staggered text reveal. */
.ospp-reveal > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .9s var(--ospp-ease), transform 1s var(--ospp-ease);
}
.ospp-root.is-open .ospp-reveal > * { opacity: 1; transform: none; }
.ospp-root.is-open .ospp-reveal > *:nth-child(1) { transition-delay: .30s; }
.ospp-root.is-open .ospp-reveal > *:nth-child(2) { transition-delay: .40s; }
.ospp-root.is-open .ospp-reveal > *:nth-child(3) { transition-delay: .50s; }
.ospp-root.is-open .ospp-reveal > *:nth-child(4) { transition-delay: .60s; }
.ospp-root.is-open .ospp-reveal > *:nth-child(5) { transition-delay: .70s; }
.ospp-root.is-open .ospp-reveal > *:nth-child(6) { transition-delay: .80s; }

/* ==========================================================================
   1. SPOTLIGHT — split: photo on plate | black panel with inset gold frame
   ========================================================================== */
.ospp--spotlight .ospp-dialog {
	width: min(980px, 94vw);
	display: grid;
	grid-template-columns: 1.02fr 1fr;
	background: var(--ospp-dark);
	color: #fff;
}
.ospp--spotlight .ospp-plate { order: 2; min-height: 520px; }
.ospp--spotlight .ospp-plate img { padding: 46px 34px; }
.ospp--spotlight .ospp-content {
	order: 1;
	position: relative;
	padding: 64px 56px 52px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ospp--spotlight .ospp-content::before {
	content: "";
	position: absolute;
	inset: 16px;
	border: 1px solid var(--ospp-gold-soft);
	pointer-events: none;
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.6s .35s var(--ospp-ease);
}
.ospp-root.is-open.ospp--spotlight .ospp-content::before { clip-path: inset(0 0 0 0); }
.ospp--spotlight .ospp-signature { position: absolute; bottom: 30px; inset-inline-end: 40px; }
.ospp--spotlight .ospp-close { color: #1a1a1a; }

/* ==========================================================================
   2. ATELIER (hero) — ivory card, large photo, centered type, inner gold rule
   ========================================================================== */
.ospp--hero .ospp-dialog {
	width: min(540px, 92vw);
	background: var(--ospp-light);
	color: #111;
	text-align: center;
}
.ospp--hero .ospp-dialog::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid var(--ospp-gold-soft);
	pointer-events: none;
	z-index: 3;
}
.ospp--hero .ospp-plate { aspect-ratio: 16 / 10; }
.ospp--hero .ospp-plate img { padding: 22px 30px 6px; }
.ospp--hero .ospp-content { padding: 28px 44px 34px; }
.ospp--hero .ospp-name { margin-bottom: 20px; }
.ospp--hero .ospp-actions { gap: 10px; }
.ospp--hero .ospp-eyebrow { color: var(--ospp-gold); }
.ospp--hero .ospp-eyebrow, .ospp--noir .ospp-eyebrow { justify-content: center; }
.ospp--hero .ospp-eyebrow::after, .ospp--noir .ospp-eyebrow::after {
	content: "";
	width: 34px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.1s .55s var(--ospp-ease);
}
.ospp-root.is-open.ospp--hero .ospp-eyebrow::after, .ospp-root.is-open.ospp--noir .ospp-eyebrow::after { transform: scaleX(1); }
.ospp--hero .ospp-headline { font-size: clamp(26px, 4vw, 34px); }
.ospp--hero .ospp-actions { justify-content: center; }
.ospp--hero .ospp-btn { width: 100%; }
.ospp--hero .ospp-name { border-top-color: color-mix(in srgb, var(--ospp-gold) 30%, transparent); }
.ospp--hero .ospp-price { color: var(--ospp-gold); }
.ospp--hero .ospp-signature { color: var(--ospp-gold); display: block; margin-top: 16px; }
.ospp--hero .ospp-close { color: #111; background: color-mix(in srgb, var(--ospp-light) 80%, transparent); }

/* ==========================================================================
   3. CORNER — quiet card that slides in, no overlay, page stays usable
   ========================================================================== */
.ospp--corner .ospp-overlay { display: none; }
.ospp--corner .ospp-dialog {
	inset-inline-start: auto;
	top: auto;
	bottom: 96px;
	width: min(380px, calc(100vw - 32px));
	display: grid;
	grid-template-columns: 1fr;
	background: var(--ospp-dark);
	color: #fff;
	transform: translateX(-40px);
	transition: transform 1s var(--ospp-ease), opacity .8s var(--ospp-ease);
}
.ospp--corner.ospp-side-left .ospp-dialog { left: 24px; }
.ospp--corner.ospp-side-right .ospp-dialog { right: 24px; transform: translateX(40px); }
.ospp-root.is-open.ospp--corner .ospp-dialog { transform: none; opacity: 1; }
.ospp-root.is-closing.ospp--corner .ospp-dialog { transform: translateY(16px); opacity: 0; }
.ospp--corner .ospp-dialog::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--ospp-gold), transparent);
	transform: scaleX(0);
	transition: transform 1.4s .4s var(--ospp-ease);
	z-index: 2;
}
.ospp-root.is-open.ospp--corner .ospp-dialog::before { transform: scaleX(1); }
.ospp--corner .ospp-plate { aspect-ratio: 16 / 9; }
.ospp--corner .ospp-plate img { padding: 12px 40px 0; }
.ospp--corner .ospp-content { padding: 22px 26px 24px; }
.ospp--corner .ospp-eyebrow { font-size: 11px; margin-bottom: 10px; gap: 10px; }
.ospp--corner .ospp-eyebrow::before { width: 20px; }
.ospp--corner .ospp-headline { font-size: 24px; margin-bottom: 8px; }
.ospp--corner .ospp-body { font-size: 14px; line-height: 1.55; margin-bottom: 14px; }
.ospp--corner .ospp-name, .ospp--corner .ospp-signature, .ospp--corner .ospp-price { display: none; }
.ospp--corner .ospp-btn { min-height: 42px; padding: 0 20px; font-size: 14px; }
.ospp--corner .ospp-link { font-size: 13px; }
.ospp--corner .ospp-close { top: 4px; inset-inline-end: 4px; color: #1a1a1a; width: 38px; height: 38px; }
.ospp--corner .ospp-close::before, .ospp--corner .ospp-close::after { width: 15px; }

/* ==========================================================================
   4. NOIR — black gallery: double gold frame, photo hung on a plate
   ========================================================================== */
.ospp--noir .ospp-dialog {
	width: min(600px, 92vw);
	background:
		radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--ospp-gold) 16%, transparent), transparent 70%),
		var(--ospp-dark);
	color: #fff;
	text-align: center;
	padding: 28px 34px 26px;
	border: 1px solid var(--ospp-gold);
}
.ospp--noir .ospp-dialog::before {
	content: "";
	position: absolute;
	inset: 7px;
	border: 1px solid var(--ospp-gold-soft);
	pointer-events: none;
}
.ospp--noir .ospp-plate {
	aspect-ratio: 16 / 10;
	margin: 22px 26px 0;
	box-shadow: 0 0 0 1px var(--ospp-gold-soft), 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.ospp--noir .ospp-plate img { padding: 18px 22px; }
.ospp--noir .ospp-content { padding: 28px 20px 6px; }
.ospp--noir .ospp-name { margin-bottom: 22px; }
.ospp--noir .ospp-signature { margin-top: 18px !important; }
.ospp--noir .ospp-actions { justify-content: center; }
.ospp--noir .ospp-signature { display: block; margin-top: 24px; }
.ospp--noir .ospp-close { color: #fff; top: 16px; inset-inline-end: 16px; }

/* ------------------------------------------------------------- feedback */
.ospp-note { font-size: 14px; margin-top: 12px; color: var(--ospp-gold-hi); min-height: 1em; }
.ospp--hero .ospp-note { color: var(--ospp-gold); }

/* --------------------------------------------------------------- mobile */
@media (max-width: 760px) {
	.ospp--spotlight .ospp-dialog { grid-template-columns: 1fr; width: 92vw; }
	.ospp--spotlight .ospp-plate { order: 0; min-height: 0; aspect-ratio: 4 / 3; }
	.ospp--spotlight .ospp-plate img { padding: 18px; }
	.ospp--spotlight .ospp-content { padding: 34px 28px 54px; }
	.ospp--spotlight .ospp-content::before { inset: 10px; }
	.ospp--spotlight .ospp-signature { bottom: 22px; inset-inline-end: 28px; }
	.ospp--spotlight .ospp-close { color: #111; background: color-mix(in srgb, var(--ospp-plate) 75%, transparent); }
	.ospp-headline { font-size: 27px; }
	.ospp-body { font-size: 16px; }
	.ospp-hero .ospp-content, .ospp--hero .ospp-content { padding: 26px 26px 32px; }
	.ospp--noir .ospp-dialog { padding: 20px; }
	.ospp--noir .ospp-plate { margin: 26px 6px 0; }
	.ospp-btn { width: 100%; }
	.ospp-actions { justify-content: center; }
	/* Bottom sheet feel on phones. */
	.ospp-dialog { top: auto; bottom: 4vw; transform: translate(50%, 40px); }
	.ospp-root.is-open .ospp-dialog { transform: translate(50%, 0); }
	.ospp-root.is-closing .ospp-dialog { transform: translate(50%, 30px); }
}

@media (prefers-reduced-motion: reduce) {
	.ospp-root *, .ospp-root *::before, .ospp-root *::after {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
}