/* ==========================================================================
   Popup Studio Pro — front-end styles
   Structure: tokens → base → elements → 12 designs → states/animation
   Responsive rules use container queries on the popup root (works the same
   on the live site and inside the admin preview).
   ========================================================================== */

/* ---------- Font pairings ---------- */
.psp-root.psp-font-classic   { --psp-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --psp-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --psp-display-weight: 700; --psp-display-scale: 1; --psp-display-track: -0.02em; }
.psp-root.psp-font-elegant   { --psp-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif; --psp-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --psp-display-weight: 600; --psp-display-scale: 1.16; --psp-display-track: -0.01em; }
.psp-root.psp-font-editorial { --psp-display: 'Fraunces', Georgia, serif; --psp-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --psp-display-weight: 600; --psp-display-scale: 1; --psp-display-track: -0.03em; }
.psp-root.psp-font-modern    { --psp-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --psp-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --psp-display-weight: 800; --psp-display-scale: 0.94; --psp-display-track: -0.035em; }
.psp-root.psp-font-grotesk   { --psp-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --psp-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --psp-display-weight: 700; --psp-display-scale: 0.96; --psp-display-track: -0.04em; }
.psp-root.psp-font-system    { --psp-display: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --psp-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --psp-display-weight: 700; --psp-display-scale: 0.95; --psp-display-track: -0.025em; }

/* ---------- Root ---------- */
.psp-root {
	--psp-ease: cubic-bezier(.16, 1, .3, 1);
	--psp-ink: #111827;
	--psp-muted: #6b7280;
	--psp-line: rgba(17, 24, 39, .09);
	--psp-soft: #f6f7f9;
	--psp-accent: var(--psp-accent-user, #b07d26);
	--psp-btn: var(--psp-btn-user, var(--psp-ink));
	--psp-btn-ink: var(--psp-btn-ink-user, #fff);
	--psp-btn-r: 12px;
	--psp-r: var(--psp-radius-user, 22px);
	--psp-w: var(--psp-width-user, 940px);
	--psp-title-size: 46px;
	--psp-media-w: 250px;

	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	container: psp / inline-size;
	visibility: hidden;
	pointer-events: none;
	font-family: var(--psp-sans);
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
	color: var(--psp-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	transition: visibility 0s linear .65s;
}

.psp-root,
.psp-root *,
.psp-root *::before,
.psp-root *::after { box-sizing: border-box; }

/* Neutralise theme styles inside the popup (zero-specificity :where keeps our own rules in charge). */
.psp-root :where(div, span, p, h2, a, button, img, svg, strong, em, b, i, br) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	text-shadow: none;
	text-transform: none;
	text-decoration: none;
	letter-spacing: normal;
	float: none;
	min-width: 0;
	min-height: 0;
	max-width: none;
	font: inherit;
	color: inherit;
}

html.psp-lock,
html.psp-lock body { overflow: hidden !important; }

.psp-root .psp-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Backdrop ---------- */
.psp-root .psp-backdrop {
	position: absolute;
	inset: 0;
	background: var(--psp-ov, rgba(11, 16, 32, .78));
	-webkit-backdrop-filter: blur(var(--psp-blur, 10px));
	backdrop-filter: blur(var(--psp-blur, 10px));
	opacity: 0;
	transition: opacity .5s var(--psp-ease);
}

/* ---------- Dialog ---------- */
.psp-root .psp-dialog {
	position: relative;
	width: min(var(--psp-w), 100%);
	max-height: 100%;
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	border-radius: var(--psp-r);
	background: #fff;
	color: var(--psp-ink);
	outline: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity .45s var(--psp-ease), transform .75s var(--psp-ease), filter .6s var(--psp-ease);
}

.psp-root .psp-bg {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	pointer-events: none;
}
.psp-root .psp-deco { display: none; }

.psp-root .psp-media {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}
.psp-root .psp-media-frame {
	position: relative;
	z-index: 1;
	display: block;
	width: calc(var(--psp-media-w) * var(--psp-img-scale, 1));
	max-width: 100%;
	line-height: 0;
}
.psp-root .psp-media-link { display: block; line-height: 0; border-radius: 8px; cursor: pointer; }
.psp-root .psp-media-link:focus-visible { outline: 2px solid var(--psp-accent); outline-offset: 6px; }
.psp-root .psp-img { display: block; width: 100%; max-width: 100%; height: auto; }

/* Cover mode — photo fills its frame */
.psp-root.psp-fit-cover .psp-media { align-self: stretch; padding: 0; min-height: 260px; overflow: hidden; }
.psp-root.psp-fit-cover .psp-media-frame,
.psp-root.psp-fit-cover .psp-media-link { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.psp-root.psp-fit-cover .psp-img { width: 100%; height: 100%; object-fit: cover; filter: none; }

.psp-root .psp-dialog > *,
.psp-root .psp-body > * { flex-shrink: 0; }

.psp-root .psp-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* ---------- Elements ---------- */
.psp-root .psp-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 18px;
	padding-right: 48px;
}
.psp-root .psp-brand {
	font-family: var(--psp-sans);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--psp-muted);
}
.psp-root .psp-rating {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-family: var(--psp-sans);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--psp-muted);
	white-space: nowrap;
}
.psp-root .psp-g { font-family: 'Product Sans', 'Google Sans', Arial, sans-serif; font-weight: 700; letter-spacing: -.01em; }
.psp-root .psp-stars { display: inline-flex; gap: 1px; color: #f5b301; }
.psp-root .psp-stars svg { display: block; width: 14px; height: 14px; fill: currentColor; }
.psp-root .psp-stars svg.off { opacity: .22; }

.psp-root .psp-eyebrow {
	margin-bottom: 14px;
	font-family: var(--psp-sans);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--psp-accent);
}
.psp-root .psp-title {
	font-family: var(--psp-display);
	font-size: calc(var(--psp-title-size) * var(--psp-display-scale, 1));
	font-weight: var(--psp-display-weight, 700);
	font-style: normal;
	line-height: 1.02;
	letter-spacing: var(--psp-display-track, -0.02em);
	color: var(--psp-ink);
	text-wrap: balance;
	overflow-wrap: break-word;
}
.psp-root .psp-subtitle {
	margin-top: 12px;
	font-family: var(--psp-sans);
	font-size: 16px;
	line-height: 1.45;
	color: var(--psp-muted);
}
.psp-root .psp-desc {
	margin-top: 14px;
	max-width: 52ch;
	font-family: var(--psp-sans);
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--psp-muted);
}
.psp-root .psp-desc p + p { margin-top: .6em; }
.psp-root .psp-desc a { color: var(--psp-accent); text-decoration: underline; text-underline-offset: 2px; }
.psp-root .psp-desc strong, .psp-root .psp-desc b { font-weight: 700; color: var(--psp-ink); }
.psp-root .psp-desc em, .psp-root .psp-desc i { font-style: italic; }

.psp-root .psp-highlight {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px 18px;
}
.psp-root .psp-hl-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.psp-root .psp-hl-label {
	font-family: var(--psp-sans);
	font-size: 10.5px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--psp-accent);
}
.psp-root .psp-hl-title {
	font-family: var(--psp-sans);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--psp-ink);
}
.psp-root .psp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.psp-root .psp-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border: 1px solid var(--psp-line);
	border-radius: 999px;
	background: var(--psp-soft);
	font-family: var(--psp-sans);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: var(--psp-ink);
}

.psp-root .psp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.psp-root .psp-dialog .psp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: var(--psp-btn-r);
	font-family: var(--psp-sans);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.psp-root .psp-dialog .psp-btn-primary {
	background: var(--psp-btn);
	color: var(--psp-btn-ink);
	box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .55);
}
.psp-root .psp-dialog .psp-btn-primary:hover { transform: translateY(-1px); color: var(--psp-btn-ink); box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .6); }
.psp-root .psp-dialog .psp-btn-ghost { background: transparent; color: var(--psp-ink); border-color: var(--psp-line); }
.psp-root .psp-dialog .psp-btn-ghost:hover { color: var(--psp-ink); border-color: currentColor; }
.psp-root .psp-dialog .psp-btn:focus-visible { outline: 2px solid var(--psp-accent); outline-offset: 3px; }

.psp-root .psp-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-family: var(--psp-sans);
	font-size: 12px;
	line-height: 1.4;
	color: var(--psp-muted);
}
.psp-root .psp-foot-r { font-weight: 700; color: var(--psp-ink); }

/* Close button (extra specificity beats theme button styles) */
.psp-root .psp-dialog .psp-close {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--psp-close-bg, rgba(17, 24, 39, .05));
	color: var(--psp-close-ink, var(--psp-muted));
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: transform .35s var(--psp-ease), background-color .2s ease, color .2s ease;
}
.psp-root .psp-dialog .psp-close:hover { transform: rotate(90deg); background: var(--psp-close-bg-hover, rgba(17, 24, 39, .1)); color: var(--psp-ink); }
.psp-root .psp-dialog .psp-close:focus-visible { outline: 2px solid var(--psp-accent); outline-offset: 2px; }
.psp-root .psp-dialog .psp-close svg { display: block; width: 16px; height: 16px; }

/* Auto-close progress line */
.psp-root .psp-progress {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 6;
	height: 3px;
	background: var(--psp-accent);
	transform-origin: left center;
	pointer-events: none;
}
.psp-root.is-open .psp-progress { animation: psp-progress var(--psp-autoclose, 10s) linear forwards; }
.psp-root.is-paused .psp-progress { animation-play-state: paused; }
.psp-root.psp-is-preview .psp-progress { animation: none; transform: scaleX(.62); }
@keyframes psp-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- Image effects ---------- */
.psp-root .psp-fx-float { animation: psp-float 6s ease-in-out infinite; }
@keyframes psp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.psp-root .psp-fx-glow .psp-img { animation: psp-glow 3.4s ease-in-out infinite; }
@keyframes psp-glow {
	0%, 100% { filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .25)) drop-shadow(0 0 0 rgba(0, 0, 0, 0)); }
	50%      { filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .25)) drop-shadow(0 0 26px var(--psp-accent)); }
}

.psp-root .psp-fx-shine::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, .12) 54%, transparent 62%);
	background-size: 260% 100%;
	background-position: 140% 0;
	-webkit-mask: var(--psp-mask) center / 100% 100% no-repeat;
	mask: var(--psp-mask) center / 100% 100% no-repeat;
	animation: psp-shine 5s ease-in-out 1s infinite;
}
.psp-root .psp-fx-shine:not([style*="--psp-mask"])::after { -webkit-mask: none; mask: none; mix-blend-mode: overlay; border-radius: 8px; }
@keyframes psp-shine { 0% { background-position: 140% 0; } 45%, 100% { background-position: -40% 0; } }

.psp-root .psp-fx-tilt {
	transform: perspective(900px) rotateX(var(--psp-rx, 0deg)) rotateY(var(--psp-ry, 0deg));
	transition: transform .3s ease-out;
	will-change: transform;
}

@keyframes psp-spin  { to { transform: rotate(360deg); } }
@keyframes psp-drift { 0% { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); } 100% { transform: translate3d(3%, 2%, 0) rotate(10deg) scale(1.08); } }

/* Generic one-column fallback when a split design has no image */
.psp-d-split.no-media, .psp-d-noir.no-media, .psp-d-glass.no-media, .psp-d-editorial.no-media, .psp-d-minimal.no-media { --psp-w: var(--psp-width-user, 620px); }
.psp-d-split.no-media .psp-dialog, .psp-d-noir.no-media .psp-dialog, .psp-d-glass.no-media .psp-dialog, .psp-d-editorial.no-media .psp-dialog, .psp-d-minimal.no-media .psp-dialog { grid-template-columns: minmax(0, 1fr); }


/* ==========================================================================
   01 · SPLIT LUXE — evolved version of the original award popup
   ========================================================================== */
.psp-d-split {
	--psp-accent: var(--psp-accent-user, #a87824);
	--psp-w: var(--psp-width-user, 940px);
	--psp-r: var(--psp-radius-user, 24px);
	--psp-ink: #15171d;
	--psp-muted: #6c707c;
	--psp-line: #ebe5d8;
	--psp-soft: #fbf9f4;
	--psp-btn: var(--psp-btn-user, #15171d);
	--psp-title-size: 48px;
	--psp-media-w: 250px;
}
.psp-d-split .psp-dialog {
	display: grid;
	grid-template-columns: minmax(0, 41%) minmax(0, 1fr);
	box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05);
}
.psp-d-split .psp-media {
	padding: 52px 36px;
	overflow: hidden;
	border-right: 1px solid var(--psp-line);
	background: radial-gradient(120% 90% at 50% 42%, #fffdf8 0%, #f6efe0 58%, #ede1c8 100%);
}
.psp-d-split .psp-media::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(150, 110, 40, .2) 1px, transparent 1.3px);
	background-size: 15px 15px;
	-webkit-mask: radial-gradient(75% 65% at 50% 50%, transparent 35%, #000 100%);
	mask: radial-gradient(75% 65% at 50% 50%, transparent 35%, #000 100%);
}
.psp-d-split .psp-media::after {
	content: "";
	position: absolute;
	width: 340px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(212, 175, 55, .28), transparent 66%);
	background: radial-gradient(circle, color-mix(in srgb, var(--psp-accent) 30%, transparent), transparent 66%);
	filter: blur(6px);
}
.psp-d-split .psp-img { filter: drop-shadow(0 28px 34px rgba(70, 45, 10, .3)); }
.psp-d-split .psp-body { padding: 50px 54px 38px; }
.psp-d-split .psp-brand { max-width: 210px; padding-left: 12px; border-left: 2px solid var(--psp-accent); color: #474b56; }
.psp-d-split .psp-hero { margin: 46px 0 30px; }
.psp-d-split.no-top .psp-hero { margin-top: 6px; }
.psp-d-split .psp-highlight { padding: 20px 22px 20px 24px; border: 1px solid var(--psp-line); border-radius: 16px; background: var(--psp-soft); }
.psp-d-split .psp-pill { padding: 9px 15px; border-color: #e5d9bf; border-radius: 10px; background: #fff; color: var(--psp-accent); box-shadow: 0 1px 2px rgba(80, 60, 20, .06); }
.psp-d-split .psp-actions { margin-top: 24px; }
.psp-d-split .psp-foot { margin-top: auto; padding-top: 30px; }

@container psp (max-width: 760px) {
	.psp-d-split .psp-dialog { grid-template-columns: minmax(0, 1fr); max-width: 520px; --psp-media-w: 138px; --psp-title-size: 36px; }
	.psp-d-split .psp-media { padding: 34px 24px 30px; border-right: 0; border-bottom: 1px solid var(--psp-line); }
	.psp-d-split .psp-body { padding: 28px 24px 26px; }
	.psp-d-split .psp-top { padding-right: 0; }
	.psp-d-split .psp-hero { margin: 26px 0 22px; }
}


/* ==========================================================================
   02 · NOIR GOLD
   ========================================================================== */
.psp-d-noir {
	--psp-accent: var(--psp-accent-user, #d6b25e);
	--psp-w: var(--psp-width-user, 980px);
	--psp-r: var(--psp-radius-user, 20px);
	--psp-ink: #f4efe4;
	--psp-muted: #9d978a;
	--psp-line: rgba(214, 178, 94, .22);
	--psp-soft: rgba(255, 255, 255, .03);
	--psp-btn: var(--psp-btn-user, var(--psp-accent));
	--psp-btn-ink: var(--psp-btn-ink-user, #16120a);
	--psp-close-bg: rgba(255, 255, 255, .06);
	--psp-close-bg-hover: rgba(255, 255, 255, .12);
	--psp-title-size: 60px;
	--psp-media-w: 270px;
}
.psp-d-noir .psp-dialog {
	display: grid;
	grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
	border: 1px solid transparent;
	background:
		linear-gradient(160deg, #141416, #060607 62%) padding-box,
		linear-gradient(135deg, var(--psp-accent), rgba(214, 178, 94, .08) 30%, rgba(214, 178, 94, .03) 62%, var(--psp-accent)) border-box;
	box-shadow: 0 60px 120px -30px rgba(0, 0, 0, .85);
}
.psp-d-noir .psp-bg { display: block; opacity: .16; filter: grayscale(1) contrast(1.1); }
.psp-d-noir .psp-media { padding: 58px 40px; overflow: hidden; }
.psp-d-noir .psp-media::before {
	content: "";
	position: absolute;
	inset: -35%;
	background: conic-gradient(from 0deg,
		transparent 0 7%, rgba(214, 178, 94, .12) 9%, transparent 12% 24%,
		rgba(214, 178, 94, .08) 26%, transparent 29% 44%,
		rgba(214, 178, 94, .12) 46%, transparent 49% 61%,
		rgba(214, 178, 94, .08) 63%, transparent 66% 79%,
		rgba(214, 178, 94, .12) 81%, transparent 84%);
	-webkit-mask: radial-gradient(closest-side, #000 18%, transparent 72%);
	mask: radial-gradient(closest-side, #000 18%, transparent 72%);
	animation: psp-spin 60s linear infinite;
}
.psp-d-noir .psp-media::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 14%;
	width: 62%;
	height: 34px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(214, 178, 94, .28), transparent);
	filter: blur(6px);
}
.psp-d-noir .psp-img { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .65)); }
.psp-d-noir .psp-body { padding: 52px 56px 40px 24px; }
.psp-d-noir.no-media .psp-body { padding-left: 56px; }
.psp-d-noir .psp-brand { letter-spacing: .24em; color: var(--psp-accent); }
.psp-d-noir .psp-hero { margin: 42px 0 30px; }
.psp-d-noir .psp-eyebrow { color: var(--psp-muted); letter-spacing: .28em; }
.psp-d-noir .psp-title {
	padding-bottom: .06em;
	color: var(--psp-accent);
	background: linear-gradient(180deg, #fbf1d3 0%, var(--psp-accent) 58%, #8a6a24 100%);
	background: linear-gradient(180deg, #fbf1d3 0%, var(--psp-accent) 58%, color-mix(in srgb, var(--psp-accent) 62%, #000) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.psp-d-noir .psp-subtitle { font-family: var(--psp-display); font-size: 22px; font-style: italic; color: #cfc8b7; }
.psp-d-noir .psp-highlight { padding: 20px 0; border-top: 1px solid var(--psp-line); border-bottom: 1px solid var(--psp-line); }
.psp-d-noir .psp-hl-label { color: var(--psp-muted); }
.psp-d-noir .psp-hl-title { font-family: var(--psp-display); font-size: 27px; font-weight: 600; letter-spacing: 0; }
.psp-d-noir .psp-pill { padding: 8px 16px; background: transparent; border-color: var(--psp-line); color: var(--psp-accent); }
.psp-d-noir .psp-dialog .psp-btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 30px -14px rgba(214, 178, 94, .7); }
.psp-d-noir .psp-actions { margin-top: 26px; }
.psp-d-noir .psp-foot { margin-top: auto; padding-top: 30px; }
.psp-d-noir .psp-foot-r { color: var(--psp-accent); }

@container psp (max-width: 760px) {
	.psp-d-noir .psp-dialog { grid-template-columns: minmax(0, 1fr); max-width: 520px; --psp-title-size: 44px; --psp-media-w: 146px; }
	.psp-d-noir .psp-media { padding: 36px 24px 26px; }
	.psp-d-noir .psp-body, .psp-d-noir.no-media .psp-body { padding: 8px 26px 28px; }
	.psp-d-noir.no-media .psp-body { padding-top: 30px; }
	.psp-d-noir .psp-hero { margin: 28px 0 22px; }
}


/* ==========================================================================
   03 · AURORA GLASS
   ========================================================================== */
.psp-d-glass {
	--psp-accent: var(--psp-accent-user, #5b4cf0);
	--psp-w: var(--psp-width-user, 900px);
	--psp-r: var(--psp-radius-user, 28px);
	--psp-ink: #13132b;
	--psp-muted: #545779;
	--psp-line: rgba(255, 255, 255, .8);
	--psp-soft: rgba(255, 255, 255, .6);
	--psp-btn: var(--psp-btn-user, #13132b);
	--psp-close-bg: rgba(255, 255, 255, .65);
	--psp-close-bg-hover: #fff;
	--psp-title-size: 46px;
	--psp-media-w: 230px;
}
.psp-d-glass .psp-backdrop { overflow: hidden; }
.psp-d-glass .psp-backdrop::before {
	content: "";
	position: absolute;
	inset: -12%;
	background:
		radial-gradient(36% 44% at 22% 30%, rgba(124, 98, 255, .55), transparent 70%),
		radial-gradient(34% 42% at 78% 70%, rgba(0, 186, 255, .42), transparent 70%),
		radial-gradient(28% 36% at 70% 18%, rgba(255, 106, 170, .42), transparent 70%),
		radial-gradient(30% 40% at 30% 86%, rgba(255, 196, 90, .32), transparent 70%);
	animation: psp-drift 24s ease-in-out infinite alternate;
}
.psp-d-glass .psp-dialog {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	gap: 10px;
	padding: 10px;
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(28px) saturate(1.6);
	backdrop-filter: blur(28px) saturate(1.6);
	border: 1px solid rgba(255, 255, 255, .75);
	box-shadow: 0 40px 90px -30px rgba(8, 6, 40, .6), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.psp-d-glass .psp-media {
	padding: 44px 28px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .85);
	border-radius: calc(var(--psp-r) - 8px);
	background: linear-gradient(150deg, #fff, rgba(255, 255, 255, .55));
}
.psp-d-glass .psp-media::before {
	content: "";
	position: absolute;
	width: 75%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(91, 76, 240, .3), transparent 70%);
	background: radial-gradient(circle, color-mix(in srgb, var(--psp-accent) 34%, transparent), transparent 70%);
	filter: blur(10px);
}
.psp-d-glass .psp-img { filter: drop-shadow(0 22px 28px rgba(20, 16, 70, .28)); }
.psp-d-glass .psp-body { padding: 34px 36px 26px 24px; }
.psp-d-glass .psp-brand { color: var(--psp-ink); opacity: .72; }
.psp-d-glass .psp-rating { padding: 6px 11px; border: 1px solid #fff; border-radius: 999px; background: rgba(255, 255, 255, .72); }
.psp-d-glass .psp-hero { margin: 34px 0 26px; }
.psp-d-glass .psp-eyebrow {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(91, 76, 240, .1);
	background: color-mix(in srgb, var(--psp-accent) 12%, #fff);
	font-size: 12.5px;
	letter-spacing: .02em;
	text-transform: none;
}
.psp-d-glass .psp-highlight { padding: 18px 20px; border: 1px solid #fff; border-radius: 18px; background: rgba(255, 255, 255, .62); }
.psp-d-glass .psp-pill { border-color: transparent; background: #fff; color: var(--psp-accent); box-shadow: 0 6px 14px -8px rgba(40, 30, 120, .45); }
.psp-d-glass .psp-actions { margin-top: 22px; }
.psp-d-glass .psp-dialog .psp-btn-ghost { background: rgba(255, 255, 255, .65); border-color: #fff; }
.psp-d-glass .psp-foot { margin-top: auto; padding-top: 24px; }

@container psp (max-width: 760px) {
	.psp-d-glass .psp-dialog { grid-template-columns: minmax(0, 1fr); max-width: 500px; --psp-title-size: 36px; --psp-media-w: 136px; }
	.psp-d-glass .psp-media { padding: 30px 20px; }
	.psp-d-glass .psp-body { padding: 18px 16px 18px; }
	.psp-d-glass .psp-hero { margin: 22px 0 20px; }
}


/* ==========================================================================
   04 · SPOTLIGHT — centered stage
   ========================================================================== */
.psp-d-spotlight {
	--psp-accent: var(--psp-accent-user, #e9c46a);
	--psp-w: var(--psp-width-user, 560px);
	--psp-r: var(--psp-radius-user, 28px);
	--psp-ink: #f6f3ec;
	--psp-muted: #a3abc2;
	--psp-line: rgba(255, 255, 255, .11);
	--psp-soft: rgba(255, 255, 255, .05);
	--psp-btn: var(--psp-btn-user, var(--psp-accent));
	--psp-btn-ink: var(--psp-btn-ink-user, #151209);
	--psp-close-bg: rgba(255, 255, 255, .07);
	--psp-close-bg-hover: rgba(255, 255, 255, .14);
	--psp-title-size: 46px;
	--psp-media-w: 180px;
}
.psp-d-spotlight .psp-dialog {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 32px;
	text-align: center;
	background: radial-gradient(120% 70% at 50% 0%, #1e2b4f 0%, #0d1428 56%, #080d1b 100%);
	box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.psp-d-spotlight .psp-bg { display: block; bottom: auto; height: 62%; opacity: .32; -webkit-mask: linear-gradient(#000, transparent); mask: linear-gradient(#000, transparent); }
.psp-d-spotlight .psp-deco {
	display: block;
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 72%;
	pointer-events: none;
	background: conic-gradient(at 50% -8%, transparent 0deg 158deg, rgba(233, 196, 106, .2) 172deg 188deg, transparent 202deg);
	background: conic-gradient(at 50% -8%, transparent 0deg 158deg, color-mix(in srgb, var(--psp-accent) 22%, transparent) 172deg 188deg, transparent 202deg);
	filter: blur(10px);
}
.psp-d-spotlight .psp-body { display: contents; }
.psp-d-spotlight .psp-top { order: 0; position: relative; z-index: 1; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 30px 64px 0; }
.psp-d-spotlight .psp-brand { letter-spacing: .22em; color: var(--psp-ink); opacity: .8; }
.psp-d-spotlight .psp-rating { padding: 6px 12px; border: 1px solid var(--psp-line); border-radius: 999px; background: rgba(255, 255, 255, .05); }
.psp-d-spotlight .psp-media { order: 1; width: 100%; padding: 30px 32px 34px; }
.psp-d-spotlight.no-top .psp-media { padding-top: 64px; }
.psp-d-spotlight .psp-media::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 18px;
	width: 58%;
	height: 30px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(233, 196, 106, .45), transparent);
	background: radial-gradient(closest-side, color-mix(in srgb, var(--psp-accent) 48%, transparent), transparent);
	filter: blur(6px);
}
.psp-d-spotlight .psp-img { filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .6)); }
.psp-d-spotlight .psp-hero { order: 2; position: relative; z-index: 1; padding: 0 36px; }
.psp-d-spotlight .psp-desc { margin-left: auto; margin-right: auto; }
.psp-d-spotlight .psp-highlight { order: 3; position: relative; z-index: 1; flex-direction: column; justify-content: center; width: calc(100% - 72px); margin-top: 26px; padding: 20px; border: 1px solid var(--psp-line); border-radius: 18px; background: var(--psp-soft); }
.psp-d-spotlight .psp-hl-text { align-items: center; }
.psp-d-spotlight .psp-pills { justify-content: center; }
.psp-d-spotlight .psp-pill { background: transparent; border-color: rgba(233, 196, 106, .4); color: var(--psp-accent); }
.psp-d-spotlight .psp-actions { order: 4; position: relative; z-index: 1; width: calc(100% - 72px); margin-top: 22px; }
.psp-d-spotlight .psp-dialog .psp-btn { flex: 1 1 0; }
.psp-d-spotlight .psp-dialog .psp-btn-ghost { color: var(--psp-ink); }
.psp-d-spotlight .psp-foot { order: 5; position: relative; z-index: 1; flex-direction: column; gap: 4px; margin-top: 24px; padding: 0 36px; }
.psp-d-spotlight .psp-foot-r { color: var(--psp-accent); }

@container psp (max-width: 600px) {
	.psp-d-spotlight .psp-dialog { --psp-title-size: 36px; --psp-media-w: 128px; }
	.psp-d-spotlight .psp-top { padding: 24px 56px 0; }
	.psp-d-spotlight .psp-hero { padding: 0 22px; }
	.psp-d-spotlight .psp-highlight, .psp-d-spotlight .psp-actions { width: calc(100% - 44px); }
	.psp-d-spotlight .psp-actions { flex-direction: column; }
}


/* ==========================================================================
   05 · EDITORIAL
   ========================================================================== */
.psp-d-editorial {
	--psp-accent: var(--psp-accent-user, #7a1f2b);
	--psp-w: var(--psp-width-user, 980px);
	--psp-r: var(--psp-radius-user, 6px);
	--psp-ink: #16201b;
	--psp-muted: #56605a;
	--psp-line: rgba(22, 32, 27, .2);
	--psp-soft: #e4e8e0;
	--psp-btn: var(--psp-btn-user, #16201b);
	--psp-btn-r: 3px;
	--psp-close-bg: transparent;
	--psp-close-bg-hover: rgba(22, 32, 27, .06);
	--psp-title-size: 70px;
	--psp-media-w: 230px;
}
.psp-d-editorial .psp-dialog {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
	background: #eef0ea;
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6);
}
.psp-d-editorial .psp-media { order: 2; padding: 64px 44px 44px 6px; }
.psp-d-editorial .psp-media::before {
	content: "";
	position: absolute;
	inset: 64px 44px 44px 6px;
	border: 1px solid var(--psp-line);
	border-radius: 999px 999px 8px 8px;
	background: linear-gradient(180deg, rgba(122, 31, 43, .12), rgba(122, 31, 43, .04));
	background: linear-gradient(180deg, color-mix(in srgb, var(--psp-accent) 15%, #eef0ea), color-mix(in srgb, var(--psp-accent) 5%, #eef0ea));
}
.psp-d-editorial .psp-media-frame { margin: 40px 0 20px; }
.psp-d-editorial .psp-img { filter: drop-shadow(0 18px 22px rgba(22, 32, 27, .25)); }
.psp-d-editorial.psp-fit-cover .psp-media { margin: 64px 44px 44px 6px; border-radius: 999px 999px 8px 8px; }
.psp-d-editorial.psp-fit-cover .psp-media::before { display: none; }
.psp-d-editorial .psp-body { order: 1; padding: 46px 40px 36px 52px; }
.psp-d-editorial .psp-top { align-items: center; padding: 0 0 12px; border-bottom: 3px double var(--psp-ink); }
.psp-d-editorial .psp-brand { font-size: 11.5px; letter-spacing: .1em; color: var(--psp-ink); }
.psp-d-editorial .psp-hero { margin: 36px 0 28px; }
.psp-d-editorial .psp-eyebrow { margin-bottom: 10px; font-family: var(--psp-display); font-size: 18px; font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; }
.psp-d-editorial .psp-title { line-height: .94; }
.psp-d-editorial .psp-subtitle { margin-top: 14px; font-family: var(--psp-display); font-size: 21px; font-style: italic; }
.psp-d-editorial .psp-desc { font-size: 15px; line-height: 1.7; }
.psp-d-editorial .psp-highlight { padding: 16px 0; border-top: 1px solid var(--psp-ink); border-bottom: 1px solid var(--psp-ink); }
.psp-d-editorial .psp-hl-label { color: var(--psp-muted); letter-spacing: .12em; }
.psp-d-editorial .psp-hl-title { font-family: var(--psp-display); font-size: 23px; font-weight: 600; letter-spacing: -.01em; }
.psp-d-editorial .psp-pills { gap: 0; }
.psp-d-editorial .psp-pill { padding: 0 16px; border: 0; border-left: 1px solid var(--psp-line); border-radius: 0; background: none; font-family: var(--psp-display); font-size: 30px; font-weight: 600; color: var(--psp-accent); }
.psp-d-editorial .psp-pill:first-child { padding-left: 0; border-left: 0; }
.psp-d-editorial .psp-actions { margin-top: 26px; }
.psp-d-editorial .psp-foot { margin-top: auto; padding-top: 26px; font-family: var(--psp-display); font-size: 15px; font-style: italic; }
.psp-d-editorial .psp-foot-r { font-family: var(--psp-sans); font-size: 12px; font-style: normal; letter-spacing: .04em; }

@container psp (max-width: 800px) {
	.psp-d-editorial .psp-dialog { grid-template-columns: minmax(0, 1fr); max-width: 540px; --psp-title-size: 46px; --psp-media-w: 118px; }
	.psp-d-editorial .psp-media { order: 0; padding: 50px 26px 16px; }
	.psp-d-editorial .psp-media::before { inset: 50px 26% 16px; }
	.psp-d-editorial .psp-media-frame { margin: 34px 0 16px; }
	.psp-d-editorial.psp-fit-cover .psp-media { margin: 50px 26px 0; min-height: 220px; }
	.psp-d-editorial .psp-body { padding: 26px 26px 28px; }
	.psp-d-editorial .psp-hero { margin: 26px 0 22px; }
	.psp-d-editorial .psp-pill { font-size: 24px; }
}


/* ==========================================================================
   06 · BENTO GRID
   ========================================================================== */
.psp-d-bento {
	--psp-accent: var(--psp-accent-user, #3047e8);
	--psp-w: var(--psp-width-user, 980px);
	--psp-r: var(--psp-radius-user, 26px);
	--psp-ink: #0e1222;
	--psp-muted: #5d6478;
	--psp-line: #e3e6ee;
	--psp-soft: #f2f4f9;
	--psp-btn: var(--psp-btn-user, #0e1222);
	--psp-title-size: 42px;
	--psp-media-w: 210px;
}
.psp-d-bento .psp-dialog {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .85fr);
	grid-template-rows: auto 1fr auto auto;
	grid-template-areas:
		"media top  top"
		"media hero hero"
		"media hl   act"
		"foot  foot foot";
	gap: 8px;
	padding: 8px;
	background: #e7eaf2;
	box-shadow: 0 40px 100px -30px rgba(8, 12, 40, .6);
}
.psp-d-bento.no-actions .psp-dialog { grid-template-areas: "media top top" "media hero hero" "media hl hl" "foot foot foot"; }
.psp-d-bento.no-hl .psp-dialog { grid-template-areas: "media top top" "media hero hero" "media act act" "foot foot foot"; }
.psp-d-bento.no-hl.no-actions .psp-dialog { grid-template-rows: auto 1fr auto; grid-template-areas: "media top top" "media hero hero" "foot foot foot"; }
.psp-d-bento.no-media .psp-dialog { grid-template-areas: "top top top" "hero hero hero" "hl hl act" "foot foot foot"; }
.psp-d-bento.no-media.no-actions .psp-dialog { grid-template-areas: "top top top" "hero hero hero" "hl hl hl" "foot foot foot"; }

.psp-d-bento .psp-body { display: contents; }
.psp-d-bento .psp-media { grid-area: media; }
.psp-d-bento .psp-top { grid-area: top; }
.psp-d-bento .psp-hero { grid-area: hero; }
.psp-d-bento .psp-highlight { grid-area: hl; }
.psp-d-bento .psp-actions { grid-area: act; }
.psp-d-bento .psp-foot { grid-area: foot; }
.psp-d-bento :is(.psp-media, .psp-top, .psp-hero, .psp-highlight, .psp-actions, .psp-foot) {
	position: relative;
	z-index: 1;
	padding: 22px 24px;
	border-radius: calc(var(--psp-r) - 8px);
	background: #fff;
}
.psp-d-bento .psp-media {
	padding: 36px 24px;
	overflow: hidden;
	background: radial-gradient(90% 70% at 50% 40%, rgba(48, 71, 232, .16), rgba(48, 71, 232, .04) 72%), #fff;
	background: radial-gradient(90% 70% at 50% 40%, color-mix(in srgb, var(--psp-accent) 18%, #fff), color-mix(in srgb, var(--psp-accent) 5%, #fff) 72%);
}
.psp-d-bento .psp-media::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(14, 18, 34, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 18, 34, .06) 1px, transparent 1px);
	background-size: 24px 24px;
	-webkit-mask: radial-gradient(70% 60% at 50% 50%, transparent 30%, #000);
	mask: radial-gradient(70% 60% at 50% 50%, transparent 30%, #000);
}
.psp-d-bento .psp-img { filter: drop-shadow(0 20px 26px rgba(14, 18, 34, .28)); }
.psp-d-bento .psp-top { align-items: center; padding-top: 18px; padding-bottom: 18px; padding-right: 64px; }
.psp-d-bento .psp-brand { color: var(--psp-ink); }
.psp-d-bento .psp-hero { display: flex; flex-direction: column; justify-content: flex-end; padding-top: 28px; padding-bottom: 26px; }
.psp-d-bento .psp-eyebrow { margin-bottom: 12px; }
.psp-d-bento .psp-highlight { flex-direction: column; align-items: flex-start; justify-content: space-between; }
.psp-d-bento .psp-pill { padding: 10px 14px; border: 0; border-radius: 14px; background: var(--psp-soft); font-family: var(--psp-display); font-size: 24px; font-weight: 700; letter-spacing: -.03em; color: var(--psp-ink); }
.psp-d-bento .psp-actions {
	--psp-ink: #fff;
	--psp-line: rgba(255, 255, 255, .28);
	--psp-btn: var(--psp-btn-user, var(--psp-accent));
	--psp-btn-ink: var(--psp-btn-ink-user, var(--psp-accent-ink-user, #fff));
	flex-direction: column;
	justify-content: center;
	background: #0e1222;
}
.psp-d-bento .psp-dialog .psp-btn { width: 100%; }
.psp-d-bento .psp-foot { padding-top: 14px; padding-bottom: 14px; }
.psp-d-bento .psp-dialog .psp-close { top: 20px; right: 20px; background: var(--psp-soft); }

@container psp (max-width: 760px) {
	.psp-d-bento .psp-dialog,
	.psp-d-bento.no-actions .psp-dialog,
	.psp-d-bento.no-hl .psp-dialog,
	.psp-d-bento.no-media .psp-dialog,
	.psp-d-bento.no-hl.no-actions .psp-dialog,
	.psp-d-bento.no-media.no-actions .psp-dialog {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas: "media" "top" "hero" "hl" "act" "foot";
		max-width: 520px;
		--psp-title-size: 34px;
		--psp-media-w: 118px;
	}
	.psp-d-bento .psp-media { padding: 28px 20px; }
	.psp-d-bento .psp-highlight { flex-direction: row; align-items: center; }
}


/* ==========================================================================
   07 · CERTIFICATE
   ========================================================================== */
.psp-d-certificate {
	--psp-accent: var(--psp-accent-user, #9c7529);
	--psp-w: var(--psp-width-user, 660px);
	--psp-r: var(--psp-radius-user, 8px);
	--psp-ink: #2a2216;
	--psp-muted: #6e6350;
	--psp-line: rgba(156, 117, 41, .45);
	--psp-soft: #f4ecdb;
	--psp-btn: var(--psp-btn-user, #2a2216);
	--psp-btn-r: 4px;
	--psp-close-bg: transparent;
	--psp-close-bg-hover: rgba(42, 34, 22, .07);
	--psp-title-size: 50px;
	--psp-media-w: 150px;
}
.psp-d-certificate .psp-dialog {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 56px 60px 48px;
	text-align: center;
	background: radial-gradient(130% 90% at 50% 0%, #fffdf6 0%, #f7f0de 68%, #eee3c7 100%);
	box-shadow: 0 40px 90px -30px rgba(30, 20, 0, .6);
}
.psp-d-certificate .psp-dialog::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-radial-gradient(circle at 50% 135%, transparent 0 13px, rgba(156, 117, 41, .08) 13px 14px);
	-webkit-mask: linear-gradient(transparent 35%, #000);
	mask: linear-gradient(transparent 35%, #000);
}
.psp-d-certificate .psp-deco {
	display: block;
	position: absolute;
	inset: 14px;
	border: 1px solid var(--psp-accent);
	border-radius: max(0px, calc(var(--psp-r) - 4px));
	pointer-events: none;
}
.psp-d-certificate .psp-deco::before {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1px solid var(--psp-line);
	border-radius: inherit;
}
.psp-d-certificate .psp-body { display: contents; }
.psp-d-certificate .psp-top { order: 0; position: relative; z-index: 1; flex-direction: column; align-items: center; gap: 10px; padding: 0; }
.psp-d-certificate .psp-brand { letter-spacing: .26em; color: var(--psp-accent); }
.psp-d-certificate .psp-media { order: 1; margin: 22px 0 8px; }
.psp-d-certificate .psp-media::before,
.psp-d-certificate .psp-media::after {
	content: "";
	position: absolute;
	bottom: -16px;
	z-index: 0;
	width: 32px;
	height: 66px;
	background: linear-gradient(var(--psp-accent), #6d5018);
	background: linear-gradient(var(--psp-accent), color-mix(in srgb, var(--psp-accent) 60%, #000));
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}
.psp-d-certificate .psp-media::before { left: calc(50% - 36px); transform: rotate(16deg); }
.psp-d-certificate .psp-media::after { left: calc(50% + 4px); transform: rotate(-16deg); }
.psp-d-certificate.psp-fit-cover .psp-media::before, .psp-d-certificate.psp-fit-cover .psp-media::after { display: none; }
.psp-d-certificate.psp-fit-cover .psp-media { width: 100%; min-height: 200px; border-radius: 4px; }
.psp-d-certificate .psp-img { filter: drop-shadow(0 14px 18px rgba(60, 40, 0, .3)); }
.psp-d-certificate .psp-hero { order: 2; position: relative; z-index: 1; margin-top: 28px; }
.psp-d-certificate .psp-eyebrow { margin-bottom: 6px; font-family: var(--psp-display); font-size: 21px; font-style: italic; font-weight: 500; letter-spacing: .01em; text-transform: none; color: var(--psp-muted); }
.psp-d-certificate .psp-subtitle { margin-top: 8px; font-family: var(--psp-display); font-size: 22px; font-style: italic; }
.psp-d-certificate .psp-desc { margin-left: auto; margin-right: auto; }
.psp-d-certificate .psp-highlight { order: 3; position: relative; z-index: 1; flex-direction: column; justify-content: center; gap: 12px; margin-top: 26px; }
.psp-d-certificate .psp-hl-text { align-items: center; }
.psp-d-certificate .psp-hl-title { font-family: var(--psp-display); font-size: 25px; font-weight: 600; letter-spacing: 0; }
.psp-d-certificate .psp-pills { justify-content: center; }
.psp-d-certificate .psp-pill { padding: 4px 18px; border-color: var(--psp-accent); background: transparent; font-family: var(--psp-display); font-size: 19px; font-weight: 600; }
.psp-d-certificate .psp-actions { order: 4; position: relative; z-index: 1; justify-content: center; margin-top: 26px; }
.psp-d-certificate .psp-foot { order: 5; position: relative; z-index: 1; justify-content: space-around; align-items: flex-start; width: 100%; margin-top: 34px; gap: 18px 30px; }
.psp-d-certificate .psp-foot > span { flex: 1 1 180px; max-width: 270px; padding-top: 10px; border-top: 1px solid rgba(42, 34, 22, .35); font-family: var(--psp-display); font-size: 16px; font-style: italic; font-weight: 500; color: var(--psp-ink); }
.psp-d-certificate .psp-dialog .psp-close { top: 26px; right: 26px; }

@container psp (max-width: 640px) {
	.psp-d-certificate .psp-dialog { padding: 46px 28px 38px; --psp-title-size: 38px; --psp-media-w: 100px; }
	.psp-d-certificate .psp-top { padding: 0 36px; }
}


/* ==========================================================================
   08 · FULLSCREEN TAKEOVER
   ========================================================================== */
.psp-d-immersive {
	--psp-accent: var(--psp-accent-user, #ff8a3d);
	--psp-w: var(--psp-width-user, 100%);
	--psp-r: var(--psp-radius-user, 0px);
	--psp-ink: #fff;
	--psp-muted: rgba(255, 255, 255, .66);
	--psp-line: rgba(255, 255, 255, .16);
	--psp-soft: rgba(255, 255, 255, .06);
	--psp-btn: var(--psp-btn-user, #fff);
	--psp-btn-ink: var(--psp-btn-ink-user, #0a0c12);
	--psp-close-bg: rgba(255, 255, 255, .1);
	--psp-close-bg-hover: rgba(255, 255, 255, .2);
	--psp-title-size: clamp(46px, 7.4cqi, 112px);
	--psp-media-w: 400px;
	padding: 0;
}
.psp-d-immersive .psp-dialog {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	align-items: center;
	gap: clamp(24px, 4cqi, 72px);
	width: 100%;
	height: 100%;
	padding: clamp(28px, 5.5cqi, 96px);
	background:
		radial-gradient(55% 70% at 82% 50%, rgba(255, 138, 61, .22), transparent 70%),
		radial-gradient(50% 60% at 8% 100%, rgba(90, 100, 255, .18), transparent 70%),
		#07090f;
	background:
		radial-gradient(55% 70% at 82% 50%, color-mix(in srgb, var(--psp-accent) 26%, transparent), transparent 70%),
		radial-gradient(50% 60% at 8% 100%, rgba(90, 100, 255, .18), transparent 70%),
		#07090f;
}
.psp-d-immersive.no-media .psp-dialog { grid-template-columns: minmax(0, 1fr); }
.psp-d-immersive .psp-bg { display: block; }
.psp-d-immersive .psp-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 9, 15, .95) 0%, rgba(7, 9, 15, .8) 45%, rgba(7, 9, 15, .35) 100%); }
.psp-d-immersive .psp-media { order: 2; }
.psp-d-immersive .psp-media::before,
.psp-d-immersive .psp-media::after {
	content: "";
	position: absolute;
	aspect-ratio: 1;
	border: 1px solid var(--psp-line);
	border-radius: 50%;
	pointer-events: none;
}
.psp-d-immersive .psp-media::before { width: min(120%, 560px); }
.psp-d-immersive .psp-media::after { width: min(84%, 400px); border-style: dashed; animation: psp-spin 80s linear infinite; }
.psp-d-immersive .psp-img { filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .65)); }
.psp-d-immersive .psp-body { order: 1; align-self: stretch; justify-content: center; max-width: 780px; }
.psp-d-immersive .psp-top { justify-content: flex-start; align-items: center; gap: 14px 28px; margin-bottom: auto; padding-right: 64px; }
.psp-d-immersive .psp-brand { color: var(--psp-ink); }
.psp-d-immersive .psp-hero { margin: 44px 0 34px; }
.psp-d-immersive .psp-title { line-height: .9; }
.psp-d-immersive .psp-subtitle { margin-top: 20px; font-size: clamp(17px, 1.6cqi, 23px); }
.psp-d-immersive .psp-desc { font-size: 16px; }
.psp-d-immersive .psp-highlight { justify-content: flex-start; gap: 16px 32px; padding-top: 24px; border-top: 1px solid var(--psp-line); }
.psp-d-immersive .psp-pill { background: transparent; color: var(--psp-ink); }
.psp-d-immersive .psp-actions { margin-top: 30px; }
.psp-d-immersive .psp-dialog .psp-btn { min-height: 54px; padding: 0 30px; font-size: 15.5px; }
.psp-d-immersive .psp-dialog .psp-btn-ghost { color: var(--psp-ink); }
.psp-d-immersive .psp-foot { margin-top: auto; padding-top: 34px; }
.psp-d-immersive .psp-dialog .psp-close { top: clamp(16px, 3cqi, 40px); right: clamp(16px, 3cqi, 40px); width: 48px; height: 48px; }
.psp-d-immersive .psp-dialog .psp-close svg { width: 18px; height: 18px; }

@container psp (max-width: 800px) {
	.psp-d-immersive .psp-dialog { grid-template-columns: minmax(0, 1fr); align-content: start; --psp-media-w: 160px; }
	.psp-d-immersive .psp-media { order: 0; padding-top: 34px; }
	.psp-d-immersive .psp-body { align-self: auto; }
	.psp-d-immersive .psp-top { margin-bottom: 0; }
	.psp-d-immersive .psp-hero { margin: 28px 0 24px; }
}


/* ==========================================================================
   09 · SIDE DRAWER
   ========================================================================== */
.psp-d-drawer {
	--psp-accent: var(--psp-accent-user, #0f766e);
	--psp-w: var(--psp-width-user, 460px);
	--psp-r: var(--psp-radius-user, 22px);
	--psp-ink: #0f1c1b;
	--psp-muted: #5b6b69;
	--psp-line: #e1eae8;
	--psp-soft: #f2f7f6;
	--psp-btn: var(--psp-btn-user, var(--psp-accent));
	--psp-btn-ink: var(--psp-btn-ink-user, var(--psp-accent-ink-user, #fff));
	--psp-close-bg: rgba(255, 255, 255, .8);
	--psp-close-bg-hover: #fff;
	--psp-title-size: 40px;
	--psp-media-w: 200px;
	align-items: stretch;
	justify-content: flex-end;
	padding: 14px;
}
.psp-d-drawer.psp-pos-left, .psp-d-drawer.psp-pos-top-left, .psp-d-drawer.psp-pos-bottom-left { justify-content: flex-start; }
.psp-d-drawer .psp-dialog { display: flex; flex-direction: column; height: 100%; box-shadow: -30px 0 80px -30px rgba(0, 0, 0, .5); }
.psp-d-drawer .psp-media {
	flex: 0 0 auto;
	min-height: 36%;
	margin: 8px 8px 0;
	padding: 44px 32px;
	overflow: hidden;
	border-radius: calc(var(--psp-r) - 8px);
	background: linear-gradient(160deg, rgba(15, 118, 110, .16), rgba(15, 118, 110, .04));
	background: linear-gradient(160deg, color-mix(in srgb, var(--psp-accent) 17%, #fff), color-mix(in srgb, var(--psp-accent) 4%, #fff));
}
.psp-d-drawer .psp-media::before {
	content: "";
	position: absolute;
	width: 130%;
	aspect-ratio: 1;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: repeating-radial-gradient(circle, transparent 0 22px, rgba(15, 118, 110, .07) 22px 23px);
	background: repeating-radial-gradient(circle, transparent 0 22px, color-mix(in srgb, var(--psp-accent) 9%, transparent) 22px 23px);
}
.psp-d-drawer .psp-img { filter: drop-shadow(0 20px 24px rgba(10, 40, 38, .25)); }
.psp-d-drawer .psp-body { flex: 1 0 auto; padding: 28px 30px 26px; }
.psp-d-drawer .psp-top { padding-right: 0; }
.psp-d-drawer.no-media .psp-top { padding-right: 48px; }
.psp-d-drawer .psp-hero { margin: 26px 0 22px; }
.psp-d-drawer .psp-highlight { padding: 16px 18px; border: 1px solid var(--psp-line); border-radius: 14px; background: var(--psp-soft); }
.psp-d-drawer .psp-pill { background: #fff; color: var(--psp-accent); }
.psp-d-drawer .psp-actions { flex-direction: column; margin-top: auto; padding-top: 24px; }
.psp-d-drawer .psp-dialog .psp-btn { width: 100%; }
.psp-d-drawer .psp-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--psp-line); }
.psp-d-drawer.no-actions .psp-foot { margin-top: auto; }
.psp-d-drawer .psp-dialog .psp-close { top: 20px; right: 20px; }

@container psp (max-width: 520px) {
	.psp-d-drawer .psp-dialog { --psp-title-size: 34px; --psp-media-w: 130px; }
	.psp-d-drawer .psp-body { padding: 24px 22px 22px; }
}


/* ==========================================================================
   10 · CORNER CARD (non-blocking)
   ========================================================================== */
.psp-d-toast {
	--psp-accent: var(--psp-accent-user, #2457f5);
	--psp-w: var(--psp-width-user, 410px);
	--psp-r: var(--psp-radius-user, 20px);
	--psp-ink: #0d1220;
	--psp-muted: #5e6577;
	--psp-line: #e6e8ef;
	--psp-soft: #f2f5fc;
	--psp-btn: var(--psp-btn-user, #0d1220);
	--psp-btn-r: 10px;
	--psp-title-size: 21px;
	--psp-media-w: 92px;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 20px;
}
.psp-d-toast.psp-pos-bottom-left, .psp-d-toast.psp-pos-left { justify-content: flex-start; }
.psp-d-toast.psp-pos-top-right { align-items: flex-start; }
.psp-d-toast.psp-pos-top-left { align-items: flex-start; justify-content: flex-start; }
.psp-d-toast.psp-pos-top { align-items: flex-start; justify-content: center; }
.psp-d-toast.psp-pos-bottom { justify-content: center; }
.psp-d-toast .psp-dialog {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 16px;
	padding: 16px;
	border: 1px solid rgba(13, 18, 32, .06);
	box-shadow: 0 24px 60px -18px rgba(13, 18, 32, .38), 0 2px 6px rgba(13, 18, 32, .06);
}
.psp-d-toast.no-media .psp-dialog { grid-template-columns: minmax(0, 1fr); }
.psp-d-toast .psp-media {
	align-self: start;
	width: calc(92px * var(--psp-img-scale, 1));
	aspect-ratio: 1;
	padding: 8px;
	border-radius: 14px;
	background: linear-gradient(150deg, rgba(36, 87, 245, .14), rgba(36, 87, 245, .03));
	background: linear-gradient(150deg, color-mix(in srgb, var(--psp-accent) 16%, #fff), color-mix(in srgb, var(--psp-accent) 4%, #fff));
}
.psp-d-toast.psp-fit-cover .psp-media { min-height: 0; padding: 0; }
.psp-d-toast .psp-media-frame { width: 100%; height: 100%; }
.psp-d-toast .psp-img { width: 100%; height: 100%; object-fit: contain; }
.psp-d-toast .psp-body { padding-right: 24px; }
.psp-d-toast .psp-top { flex-direction: column; gap: 4px; padding-right: 0; }
.psp-d-toast .psp-brand { font-size: 10px; }
.psp-d-toast .psp-rating { font-size: 11.5px; }
.psp-d-toast .psp-stars svg { width: 12px; height: 12px; }
.psp-d-toast .psp-hero { margin-top: 8px; }
.psp-d-toast .psp-eyebrow { margin-bottom: 4px; font-size: 10px; }
.psp-d-toast .psp-title { line-height: 1.15; }
.psp-d-toast .psp-subtitle { margin-top: 3px; font-size: 13px; }
.psp-d-toast .psp-desc, .psp-d-toast .psp-foot, .psp-d-toast .psp-hl-label { display: none; }
.psp-d-toast .psp-highlight { justify-content: flex-start; gap: 8px; margin-top: 12px; }
.psp-d-toast .psp-hl-title { font-size: 13px; font-weight: 600; color: var(--psp-muted); }
.psp-d-toast .psp-pill { padding: 4px 9px; border-color: transparent; border-radius: 6px; background: var(--psp-soft); font-size: 11.5px; color: var(--psp-accent); }
.psp-d-toast .psp-actions { gap: 8px; margin-top: 14px; }
.psp-d-toast .psp-dialog .psp-btn { min-height: 38px; padding: 0 16px; font-size: 13px; }
.psp-d-toast .psp-dialog .psp-close { top: 10px; right: 10px; width: 28px; height: 28px; }
.psp-d-toast .psp-dialog .psp-close svg { width: 13px; height: 13px; }

@container psp (max-width: 480px) {
	.psp-d-toast .psp-dialog { --psp-title-size: 19px; }
	.psp-d-toast .psp-media { width: calc(72px * var(--psp-img-scale, 1)); }
}


/* ==========================================================================
   11 · ANNOUNCEMENT BAR (non-blocking)
   ========================================================================== */
.psp-d-bar {
	--psp-accent: var(--psp-accent-user, #f7c948);
	--psp-w: var(--psp-width-user, 1120px);
	--psp-r: var(--psp-radius-user, 18px);
	--psp-ink: #f8fafc;
	--psp-muted: #a6b0c3;
	--psp-line: rgba(255, 255, 255, .14);
	--psp-soft: rgba(255, 255, 255, .08);
	--psp-btn: var(--psp-btn-user, var(--psp-accent));
	--psp-btn-ink: var(--psp-btn-ink-user, var(--psp-accent-ink-user, #151515));
	--psp-btn-r: 12px;
	--psp-close-bg: rgba(255, 255, 255, .08);
	--psp-close-bg-hover: rgba(255, 255, 255, .16);
	--psp-title-size: 18px;
	--psp-media-w: 60px;
	align-items: flex-end;
	padding: 14px;
}
.psp-d-bar.psp-pos-top, .psp-d-bar.psp-pos-top-left, .psp-d-bar.psp-pos-top-right { align-items: flex-start; }
.psp-d-bar .psp-dialog {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 62px 10px 10px;
	background: linear-gradient(100deg, #0d1424, #1b2440);
	box-shadow: 0 20px 50px -14px rgba(5, 10, 30, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.psp-d-bar.no-media .psp-dialog { padding-left: 22px; }
.psp-d-bar .psp-media { flex: 0 0 auto; width: calc(64px * var(--psp-img-scale, 1)); aspect-ratio: 1; padding: 6px; border-radius: 12px; background: rgba(255, 255, 255, .07); }
.psp-d-bar.psp-fit-cover .psp-media { min-height: 0; padding: 0; }
.psp-d-bar .psp-media-frame { width: 100%; height: 100%; }
.psp-d-bar .psp-img { width: 100%; height: 100%; object-fit: contain; }
.psp-d-bar .psp-body { flex: 1; flex-direction: row; align-items: center; gap: 22px; }
.psp-d-bar .psp-top { order: 3; flex: 0 0 auto; padding-right: 0; }
.psp-d-bar .psp-brand, .psp-d-bar .psp-rating-label { display: none; }
.psp-d-bar .psp-hero { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.psp-d-bar .psp-eyebrow { flex-basis: 100%; margin: 0 0 2px; font-size: 10px; }
.psp-d-bar .psp-title { letter-spacing: -.01em; line-height: 1.2; }
.psp-d-bar .psp-title br { display: none; }
.psp-d-bar .psp-subtitle { margin: 0; font-size: 14px; }
.psp-d-bar .psp-desc, .psp-d-bar .psp-foot, .psp-d-bar .psp-hl-label { display: none; }
.psp-d-bar .psp-highlight { order: 2; flex-wrap: nowrap; gap: 10px; }
.psp-d-bar .psp-hl-title { font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--psp-muted); }
.psp-d-bar .psp-pills { flex-wrap: nowrap; gap: 6px; }
.psp-d-bar .psp-pill { padding: 5px 10px; border-radius: 8px; font-size: 12px; color: var(--psp-accent); }
.psp-d-bar .psp-actions { order: 4; flex-wrap: nowrap; gap: 8px; }
.psp-d-bar .psp-dialog .psp-btn { min-height: 40px; padding: 0 18px; font-size: 13.5px; }
.psp-d-bar .psp-dialog .psp-close { top: 50%; right: 12px; width: 34px; height: 34px; transform: translateY(-50%); }
.psp-d-bar .psp-dialog .psp-close:hover { transform: translateY(-50%) rotate(90deg); }

@container psp (max-width: 980px) {
	.psp-d-bar .psp-highlight, .psp-d-bar .psp-top { display: none; }
}
@container psp (max-width: 620px) {
	.psp-d-bar .psp-dialog { align-items: flex-start; padding: 12px 52px 12px 12px; }
	.psp-d-bar .psp-body { flex-direction: column; align-items: stretch; gap: 10px; }
	.psp-d-bar .psp-dialog .psp-btn { flex: 1; }
	.psp-d-bar .psp-dialog .psp-close { top: 12px; transform: none; }
	.psp-d-bar .psp-dialog .psp-close:hover { transform: rotate(90deg); }
}


/* ==========================================================================
   12 · MINIMAL
   ========================================================================== */
.psp-d-minimal {
	--psp-accent: var(--psp-accent-user, #0a66d8);
	--psp-w: var(--psp-width-user, 820px);
	--psp-r: var(--psp-radius-user, 30px);
	--psp-ink: #1d1d1f;
	--psp-muted: #6e6e73;
	--psp-line: #e8e8ed;
	--psp-soft: #f5f5f7;
	--psp-btn: var(--psp-btn-user, #1d1d1f);
	--psp-btn-r: 999px;
	--psp-close-bg: #f5f5f7;
	--psp-close-bg-hover: #ebebef;
	--psp-title-size: 42px;
	--psp-media-w: 210px;
}
.psp-d-minimal .psp-dialog {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
	padding: 12px;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .35);
}
.psp-d-minimal .psp-media { padding: 46px 28px; border-radius: calc(var(--psp-r) - 10px); background: var(--psp-soft); }
.psp-d-minimal.psp-fit-cover .psp-media { border-radius: calc(var(--psp-r) - 10px); }
.psp-d-minimal .psp-img { filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .14)); }
.psp-d-minimal .psp-body { padding: 36px 36px 26px 40px; }
.psp-d-minimal .psp-brand { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--psp-ink); }
.psp-d-minimal .psp-rating { font-weight: 500; }
.psp-d-minimal .psp-stars { color: var(--psp-ink); }
.psp-d-minimal .psp-hero { margin: 54px 0 30px; }
.psp-d-minimal .psp-eyebrow { margin-bottom: 8px; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.psp-d-minimal .psp-title { line-height: 1.04; }
.psp-d-minimal .psp-subtitle { margin-top: 10px; font-size: 17px; }
.psp-d-minimal .psp-highlight { padding-top: 20px; border-top: 1px solid var(--psp-line); }
.psp-d-minimal .psp-hl-label { font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--psp-muted); }
.psp-d-minimal .psp-hl-title { font-size: 16px; font-weight: 600; }
.psp-d-minimal .psp-pill { padding: 7px 14px; border: 0; font-weight: 600; }
.psp-d-minimal .psp-actions { margin-top: 28px; }
.psp-d-minimal .psp-dialog .psp-btn-ghost { padding: 0 10px; border: 0; color: var(--psp-accent); }
.psp-d-minimal .psp-dialog .psp-btn-ghost:hover { color: var(--psp-accent); text-decoration: underline; text-underline-offset: 3px; }
.psp-d-minimal .psp-foot { margin-top: auto; padding-top: 28px; }
.psp-d-minimal .psp-foot-r { font-weight: 600; }

@container psp (max-width: 720px) {
	.psp-d-minimal .psp-dialog { grid-template-columns: minmax(0, 1fr); max-width: 480px; --psp-title-size: 34px; --psp-media-w: 128px; }
	.psp-d-minimal .psp-media { padding: 34px 20px; }
	.psp-d-minimal .psp-body { padding: 24px 14px 14px; }
	.psp-d-minimal .psp-hero { margin: 30px 0 22px; }
}


/* ==========================================================================
   States & entrance animations (keep LAST so they win ties)
   ========================================================================== */
.psp-root.psp-inline { pointer-events: none; }
.psp-anim-rise  .psp-dialog { transform: translateY(28px) scale(.985); }
.psp-anim-zoom  .psp-dialog { transform: scale(.9); }
.psp-anim-drop  .psp-dialog { transform: translateY(-36px); }
.psp-anim-slide .psp-dialog { transform: translateX(56px); }
.psp-anim-flip  .psp-dialog { transform: perspective(1400px) rotateX(18deg) translateY(30px); transform-origin: 50% 100%; }
.psp-anim-blur  .psp-dialog { transform: scale(1.03); filter: blur(16px); }
.psp-anim-fade  .psp-dialog { transform: none; }
.psp-anim-none  .psp-dialog,
.psp-anim-none  .psp-backdrop { transition: none; }

.psp-root.psp-d-drawer .psp-dialog { transform: translateX(calc(100% + 30px)); filter: none; }
.psp-d-drawer.psp-pos-left .psp-dialog,
.psp-d-drawer.psp-pos-top-left .psp-dialog,
.psp-d-drawer.psp-pos-bottom-left .psp-dialog { transform: translateX(calc(-100% - 30px)); }
.psp-d-bar.psp-pos-top .psp-dialog,
.psp-d-bar.psp-pos-top-left .psp-dialog,
.psp-d-bar.psp-pos-top-right .psp-dialog { transform: translateY(-30px); }
.psp-d-toast.psp-pos-top .psp-dialog,
.psp-d-toast.psp-pos-top-left .psp-dialog,
.psp-d-toast.psp-pos-top-right .psp-dialog { transform: translateY(-24px); }

.psp-root.is-open { visibility: visible; transition-delay: 0s; }
.psp-root.psp-modal.is-open { pointer-events: auto; }
.psp-root.is-open .psp-backdrop { opacity: 1; }
.psp-root.is-open .psp-dialog { opacity: 1; transform: none; filter: none; pointer-events: auto; }

/* Admin live preview: render inside the preview stage instead of the viewport */
.psp-root.psp-is-preview { position: absolute; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
	.psp-root .psp-dialog,
	.psp-root .psp-backdrop { transition-duration: .01ms !important; }
	.psp-root .psp-dialog { transform: none !important; filter: none !important; }
	.psp-root *, .psp-root *::before, .psp-root *::after { animation: none !important; }
}