/**
 * zobAR Interactive Prints — front-end styles.
 *
 * Rules:
 *   - EVERY selector is scoped under .zobar-interactive-prints.
 *   - We never globally style body, h1, h2, button, input, or .woocommerce.
 *   - Visual identity (color, type, spacing) is INHERITED from the active theme
 *     via --wp--preset--* custom properties, with sensible fallbacks. We only
 *     lay out Interactive-Print-specific components.
 *
 * Theme mapping note: the active "zobARv2" theme exposes preset slugs such as
 * accent, ink, surface-bg, border, button-bg/text, font families heading/body,
 * and spacing 40–80. The spec's generic slugs (primary/base/contrast) are kept
 * as secondary fallbacks so the plugin also adapts to other themes.
 */

.zobar-interactive-prints {
	/* Colors — real theme slug first, spec slug second, hard fallback last. */
	--zip-color-accent: var(--wp--preset--color--accent, var(--wp--preset--color--primary, #ff6a21));
	--zip-color-accent-hover: var(--wp--preset--color--accent-hover, #f35a12);
	/* Card surface is a translucent overlay of the CURRENT text colour, so cards
	   adapt to a dark OR light theme and text can simply inherit the theme colour
	   (no fighting the theme's heading/paragraph colours). Fallback first for
	   browsers without color-mix. */
	--zip-color-surface: rgba(127, 127, 127, 0.10);
	--zip-color-surface: color-mix(in srgb, currentColor 9%, transparent);
	--zip-color-text: var(--wp--preset--color--ink, var(--wp--preset--color--contrast, #1f1f1f));
	/* Muted derives from the element's own colour so it adapts on any background. */
	--zip-color-muted: #9aa1a9;
	--zip-color-muted: color-mix(in srgb, currentColor 62%, transparent);
	--zip-border-color: rgba(127, 127, 127, 0.30);
	--zip-border-color: color-mix(in srgb, currentColor 24%, transparent);

	/* Typography — inherit theme fonts. Falls back to the theme's Tailwind
	   tokens (--font-sans/--font-heading) when WP doesn't emit the presets,
	   and finally to the page font. */
	--zip-font-body: var(--wp--preset--font-family--body, var(--font-sans, inherit));
	--zip-font-heading: var(--wp--preset--font-family--heading, var(--font-heading, inherit));

	/* Spacing rhythm — borrow the theme's spacing scale. */
	--zip-space-sm: var(--wp--preset--spacing--30, 0.75rem);
	--zip-space-md: var(--wp--preset--spacing--50, 1.5rem);
	--zip-space-lg: var(--wp--preset--spacing--70, 3rem);

	/* Component tokens. */
	--zip-radius: 12px;
	--zip-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.05);

	/* Constrain to the theme content width + add gutters. The order page uses a
	   full-width template, so without this the content hugs the viewport edges
	   (and clips on a left-shifted/full-bleed wrapper). Page-level text inherits
	   the theme colour; cards re-assert ink on their white surface below. */
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(1rem, 4vw, 2rem);
	padding-right: clamp(1rem, 4vw, 2rem);
	color: inherit;
	font-family: var(--zip-font-body);
}

.zobar-interactive-prints *,
.zobar-interactive-prints *::before,
.zobar-interactive-prints *::after {
	box-sizing: inherit;
}

/* Cards use a translucent surface and INHERIT the theme text colour, so no
   per-element colour overrides are needed (and none can be clobbered by the
   theme's heading/paragraph rules). The quote modal is handled separately in the
   modal section because it floats over a dark scrim and must be a solid panel. */

/* Promo bar -------------------------------------------------------------- */
.zobar-interactive-prints .zip-promo-bar {
	background: var(--zip-color-accent);
	color: var(--wp--preset--color--button-text, #ffffff);
	padding: var(--zip-space-sm) var(--zip-space-md);
	border-radius: var(--zip-radius);
	text-align: center;
	margin-bottom: var(--zip-space-md);
	font-size: 0.95em;
}

/* Hero ------------------------------------------------------------------- */
.zobar-interactive-prints .zip-hero {
	padding: var(--zip-space-lg) 0;
	text-align: center;
}

.zobar-interactive-prints .zip-hero__eyebrow {
	margin: 0 0 var(--zip-space-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8em;
	color: var(--zip-color-accent);
	font-weight: 600;
}

.zobar-interactive-prints .zip-hero__heading {
	font-family: var(--zip-font-heading);
	margin: 0 0 var(--zip-space-sm);
}

.zobar-interactive-prints .zip-hero__sub {
	max-width: 42rem;
	margin: 0 auto var(--zip-space-md);
	color: var(--zip-color-muted);
}

.zobar-interactive-prints .zip-hero__definition {
	display: inline-block;
	max-width: 100%;
	margin: 0 auto var(--zip-space-md);
	padding: 0.5em 1em;
	border-radius: 0;
	background: #ffffff;
	color: var(--zip-color-text);
	font-size: 0.9em;
	font-weight: 600;
}

.zobar-interactive-prints .zip-hero__actions {
	display: flex;
	gap: var(--zip-space-sm);
	justify-content: center;
	flex-wrap: wrap;
}

/* Login gate ------------------------------------------------------------- */
.zobar-interactive-prints .zip-builder {
	padding: var(--zip-space-md) 0;
}

.zobar-interactive-prints .zip-login-gate,
.zobar-interactive-prints .zip-builder__placeholder {
	background: var(--zip-color-surface);
	border: 1px solid var(--zip-border-color);
	border-radius: var(--zip-radius);
	box-shadow: var(--zip-card-shadow);
	padding: var(--zip-space-md);
	text-align: center;
}

.zobar-interactive-prints .zip-login-gate__text {
	margin: 0 0 var(--zip-space-sm);
	color: var(--zip-color-muted);
}

.zobar-interactive-prints .zip-login-gate__actions {
	margin: 0;
}

/* Inline notices --------------------------------------------------------- */
.zobar-interactive-prints .zip-notice {
	margin: var(--zip-space-md) 0 0;
	padding: var(--zip-space-sm) var(--zip-space-md);
	border-radius: var(--zip-radius);
	border: 1px solid var(--zip-border-color);
}

.zobar-interactive-prints .zip-notice--warning {
	border-color: var(--zip-color-accent);
	background: color-mix(in srgb, var(--zip-color-accent) 8%, transparent);
}

/* Status badges (used by validation UI in later phases) ------------------ */
.zobar-interactive-prints .zip-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.2em 0.6em;
	border-radius: 999px;
	font-size: 0.8em;
	font-weight: 600;
	border: 1px solid var(--zip-border-color);
}

.zobar-interactive-prints .zip-badge--ready {
	color: #16a34a;
	border-color: rgba(22, 163, 74, 0.45);
	background: rgba(22, 163, 74, 0.14);
}

.zobar-interactive-prints .zip-badge--warning {
	color: #d97706;
	border-color: rgba(217, 119, 6, 0.45);
	background: rgba(217, 119, 6, 0.14);
}

.zobar-interactive-prints .zip-badge--error {
	color: #ef4444;
	border-color: rgba(239, 68, 68, 0.45);
	background: rgba(239, 68, 68, 0.14);
}

.zobar-interactive-prints .zip-badge--info {
	color: #3b82f6;
	border-color: rgba(59, 130, 246, 0.45);
	background: rgba(59, 130, 246, 0.14);
}

.zobar-interactive-prints .zip-badge--muted {
	color: var(--zip-color-muted);
	border-color: var(--zip-border-color);
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.zobar-interactive-prints .zip-badge .zip-icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

.zobar-interactive-prints .zip-promo-bar__cta {
	margin-left: var(--zip-space-sm);
	color: inherit;
	text-decoration: underline;
	font-weight: 600;
}

.zobar-interactive-prints .zip-hero__quote-link {
	margin-top: var(--zip-space-sm);
	font-size: 0.95em;
}

.zobar-interactive-prints .zip-hero__badges {
	list-style: none;
	margin: var(--zip-space-md) 0 0;
	padding: 0;
	display: flex;
	gap: var(--zip-space-sm);
	flex-wrap: wrap;
	justify-content: center;
}

/* Generic section -------------------------------------------------------- */
.zobar-interactive-prints .zip-section {
	padding: var(--zip-space-lg) 0;
	border-top: 1px solid var(--zip-border-color);
}

.zobar-interactive-prints .zip-section__heading {
	font-family: var(--zip-font-heading);
	margin: 0 0 var(--zip-space-sm);
}

.zobar-interactive-prints .zip-section__intro {
	color: var(--zip-color-muted);
	
	margin: 0 auto var(--zip-space-md);
	text-align:left;
}

/* Chips ------------------------------------------------------------------ */
.zobar-interactive-prints .zip-chip {
	display: inline-block;
	padding: 0.3em 0.8em;
	border: 1px solid var(--zip-border-color);
	border-radius: 999px;
	font-size: 0.85em;
}

.zobar-interactive-prints .zip-demo__chips,
.zobar-interactive-prints .zip-print-quote__options {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--zip-space-sm);
	padding: 0;
	margin: var(--zip-space-md) 0 0;
}

/* Samples ---------------------------------------------------------------- */
.zobar-interactive-prints .zip-samples__grid {
	display: grid;
	gap: var(--zip-space-md);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
}

.zobar-interactive-prints .zip-samples__item {
	margin: 0;
	background: var(--zip-color-surface);
	border: 1px solid var(--zip-border-color);
	border-radius: var(--zip-radius);
	overflow: hidden;
}

.zobar-interactive-prints .zip-samples__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.zobar-interactive-prints .zip-samples__caption {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: var(--zip-space-sm) var(--zip-space-md);
}

.zobar-interactive-prints .zip-samples__chip {
	display: inline-block;
	background: var(--zip-color-accent);
	color: #fff;
	border-radius: 99px;
	font-size: 0.75em;
	font-weight: 600;
	padding: 0.15em 0.6em;
	white-space: nowrap;
}

.zobar-interactive-prints .zip-samples__label {
	font-size: 0.875em;
	color: var(--zip-color-muted, currentColor);
}

/* Demo ------------------------------------------------------------------- */
.zobar-interactive-prints .zip-demo {
	border-top: 0;
}

.zobar-interactive-prints .zip-demo__header {
	max-width: 42rem;
	margin: 0 auto clamp(2.75rem, 6vw, 4rem);
	text-align: center;
}

.zobar-interactive-prints .zip-demo__eyebrow {
	margin: 0 0 0.9rem;
	color: var(--zip-color-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

.zobar-interactive-prints .zip-demo .zip-section__heading {
	margin-bottom: 1.1rem;
	font-size: clamp(1.85rem, 4vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.035em;
}

.zobar-interactive-prints .zip-demo .zip-section__intro {
	max-width: 31rem;
	margin-bottom: 0;
	font-size: 0.95rem;
	line-height: 1.5;
}

.zobar-interactive-prints .zip-demo__steps {
	list-style: none;
	max-width: 58rem;
	margin: 0 auto;
	padding: 0;
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	grid-template-columns: 1fr;
}

.zobar-interactive-prints .zip-demo__step {
	min-height: 15.5rem;
	padding: 1.75rem;
	background: #f7f9fa;
	background: color-mix(in srgb, currentColor 3%, transparent);
	border: 1px solid rgba(127, 127, 127, 0.14);
	border-radius: 14px;
}

.zobar-interactive-prints .zip-demo__step-meta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}

.zobar-interactive-prints .zip-demo__step-icon {
	display: inline-grid;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	color: var(--zip-color-accent);
	background: rgba(255, 106, 33, 0.04);
	background: color-mix(in srgb, var(--zip-color-accent) 4%, transparent);
	border: 1px solid rgba(255, 106, 33, 0.45);
	border: 1px solid color-mix(in srgb, var(--zip-color-accent) 45%, transparent);
	border-radius: 12px;
}

.zobar-interactive-prints .zip-demo__step-icon svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.65;
}

.zobar-interactive-prints .zip-demo__step-number {
	color: #ffd1ad;
	color: color-mix(in srgb, var(--zip-color-accent) 35%, transparent);
	font-size: clamp(2.75rem, 5vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -0.06em;
	line-height: 0.85;
}

.zobar-interactive-prints .zip-demo__step-title {
	margin: 0 0 0.55rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.zobar-interactive-prints .zip-demo__step-desc {
	margin: 0;
	color: var(--zip-color-muted);
	font-size: 0.925rem;
	line-height: 1.55;
}

/* Timeline / use-cases grids -------------------------------------------- */
.zobar-interactive-prints .zip-use-cases__grid,
.zobar-interactive-prints .zip-specs__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--zip-space-md);
	grid-template-columns: 1fr;
}

.zobar-interactive-prints .zip-use-case {
	background: var(--zip-color-surface);
	border: 1px solid var(--zip-border-color);
	border-radius: var(--zip-radius);
	padding: var(--zip-space-md);
}

.zobar-interactive-prints .zip-use-case__title,
.zobar-interactive-prints .zip-timeline__title {
	margin: 0 0 0.25em;
	font-size: 1.05em;
}

.zobar-interactive-prints .zip-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--zip-space-md);
}

.zobar-interactive-prints .zip-timeline__step {
	border-left: 3px solid var(--zip-color-accent);
	padding-left: var(--zip-space-md);
}

/* Pricing ---------------------------------------------------------------- */
.zobar-interactive-prints .zip-pricing__grid {
	display: grid;
	gap: var(--zip-space-md);
	grid-template-columns: 1fr;
}

.zobar-interactive-prints .zip-pricing__dots {
	display: none;
}

.zobar-interactive-prints .zip-plan {
	position: relative;
	background: var(--zip-color-surface);
	border: 1px solid var(--zip-border-color);
	border-radius: var(--zip-radius);
	box-shadow: var(--zip-card-shadow);
	padding: var(--zip-space-md);
}

@media (max-width: 767px) {
	.zobar-interactive-prints .zip-pricing__grid {
		grid-auto-columns: 100%;
		grid-auto-flow: column;
		grid-template-columns: none;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		padding-top: var(--zip-space-sm);
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		touch-action: pan-x pan-y;
	}

	.zobar-interactive-prints .zip-pricing__grid::-webkit-scrollbar {
		display: none;
	}

	.zobar-interactive-prints .zip-plan {
		min-width: 0;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.zobar-interactive-prints .zip-pricing__dots {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		margin-top: var(--zip-space-md);
	}

	.zobar-interactive-prints .zip-pricing__dot {
		appearance: none;
		background: var(--zip-border-color);
		border: 0;
		border-radius: 999px;
		cursor: pointer;
		height: 0.55rem;
		margin: 0;
		opacity: 0.7;
		padding: 0;
		transition: background-color 0.2s ease, opacity 0.2s ease, width 0.2s ease;
		width: 0.55rem;
	}

	.zobar-interactive-prints .zip-pricing__dot.is-active {
		background: var(--zip-color-accent);
		opacity: 1;
		width: 1.5rem;
	}

	.zobar-interactive-prints .zip-pricing__dot:focus-visible {
		outline: 2px solid var(--zip-color-accent);
		outline-offset: 3px;
	}
}

.zobar-interactive-prints .zip-plan--featured {
	border-color: var(--zip-color-accent);
	border-width: 2px;
}

.zobar-interactive-prints .zip-plan__badge {
	position: absolute;
	top: calc(-1 * var(--zip-space-sm));
	left: var(--zip-space-md);
	background: var(--zip-color-accent);
	color: var(--wp--preset--color--button-text, #fff);
	font-size: 0.75em;
	font-weight: 700;
	padding: 0.2em 0.7em;
	border-radius: 999px;
}

.zobar-interactive-prints .zip-plan__price {
	margin: 0.25em 0;
}

.zobar-interactive-prints .zip-plan__amount {
	font-size: 1.6em;
	font-weight: 700;
}

.zobar-interactive-prints .zip-plan__price-prefix {
	font-size: 1em;
	font-weight: 600;
	color: var(--zip-color-muted);
	margin-right: 0.15em;
}

.zobar-interactive-prints .zip-plan__regular {
	color: var(--zip-color-muted);
	margin-right: 0.4em;
}

.zobar-interactive-prints .zip-plan__inclusions {
	list-style: none;
	padding: 0;
	margin: var(--zip-space-sm) 0;
}

.zobar-interactive-prints .zip-plan__inclusions li {
	padding-left: 1.4em;
	position: relative;
	margin-bottom: 0.3em;
}

.zobar-interactive-prints .zip-plan__inclusions li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--zip-color-accent);
	font-weight: 700;
}

.zobar-interactive-prints .zip-plan__note {
	color: var(--zip-color-muted);
	font-size: 0.85em;
	margin: var(--zip-space-sm) 0 0;
}

/* Order builder ---------------------------------------------------------- */
.zobar-interactive-prints .zip-builder__steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--zip-space-sm);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--zip-space-md);
}

.zobar-interactive-prints .zip-builder__step {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--zip-color-muted);
	font-size: 0.9em;
	transition: color 0.15s ease, opacity 0.15s ease;
}

.zobar-interactive-prints .zip-builder__step.is-active {
	color: inherit;
	font-weight: 700;
}

.zobar-interactive-prints .zip-builder__step.is-complete {
	color: #22c55e;
}

.zobar-interactive-prints .zip-builder__step-num {
	display: inline-flex;
	width: 1.6em;
	height: 1.6em;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--zip-color-accent);
	color: var(--wp--preset--color--button-text, #fff);
	font-size: 0.8em;
	font-weight: 700;
}

.zobar-interactive-prints .zip-builder__step.is-complete .zip-builder__step-num {
	background: #22c55e;
}

.zobar-interactive-prints .zip-builder__step:not(.is-active):not(.is-complete) .zip-builder__step-num {
	background: var(--zip-border-color);
}

.zobar-interactive-prints .zip-builder__grid {
	display: grid;
	gap: var(--zip-space-md);
	grid-template-columns: 1fr;
	align-items: start;
}

.zobar-interactive-prints .zip-activation {
	margin-bottom: var(--zip-space-lg);
	display: flex;
	flex-direction: column;
}

.zobar-interactive-prints .zip-activation__head { order: 0; }
.zobar-interactive-prints .zip-upload-card[data-zip-upload="image"] { order: 1; }
.zobar-interactive-prints .zip-upload-card[data-zip-upload="video"] { order: 2; }
.zobar-interactive-prints .zip-thumb { order: 3; }

.zobar-interactive-prints .zip-activation + .zip-activation {
	padding-top: var(--zip-space-lg);
	border-top: 1px solid var(--zip-border-color);
}

.zobar-interactive-prints .zip-activation__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--zip-space-sm);
	margin-bottom: var(--zip-space-md);
}

.zobar-interactive-prints .zip-activation__title {
	margin: 0;
	font-size: 1.15em;
}

.zobar-interactive-prints .zip-activation__remove {
	background: none;
	border: 0;
	padding: 0;
	color: var(--zip-color-muted);
	font-size: 0.9em;
	text-decoration: underline;
	cursor: pointer;
}

.zobar-interactive-prints .zip-activation__remove[hidden],
.zobar-interactive-prints .zip-activations__add[hidden] {
	display: none;
}

.zobar-interactive-prints .zip-activations__add {
	margin-bottom: var(--zip-space-md);
}

.zobar-interactive-prints .zip-activations__add[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.zobar-interactive-prints .zip-upload-card {
	background: var(--zip-color-surface);
	border: 1px solid var(--zip-border-color);
	border-radius: var(--zip-radius);
	padding: var(--zip-space-md);
	margin-bottom: var(--zip-space-lg);
	transition: border-color 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
}

.zobar-interactive-prints .zip-upload-card.is-locked {
	opacity: 0.55;
}

.zobar-interactive-prints .zip-upload-card.is-ready {
	border-color: rgba(34, 197, 94, 0.5);
}

.zobar-interactive-prints .zip-upload-card__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--zip-space-sm);
	margin-bottom: var(--zip-space-md);
}

.zobar-interactive-prints .zip-upload-card__title {
	margin: 0;
	font-size: 1.05em;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}

.zobar-interactive-prints .zip-upload-card__step {
	display: inline-grid;
	width: 1.7rem;
	height: 1.7rem;
	place-items: center;
	border-radius: 999px;
	background: var(--zip-color-accent);
	color: var(--wp--preset--color--button-text, #fff);
	font-size: 0.78rem;
	font-weight: 800;
}

.zobar-interactive-prints .zip-upload-card__helper,
.zobar-interactive-prints .zip-upload-card__avoid {
	color: var(--zip-color-muted);
	font-size: 0.9em;
}

.zobar-interactive-prints .zip-dropzone {
	border: 2px dashed var(--zip-border-color);
	border-radius: var(--zip-radius);
	padding: var(--zip-space-lg) var(--zip-space-md);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.zobar-interactive-prints .zip-dropzone:hover,
.zobar-interactive-prints .zip-dropzone:focus-within,
.zobar-interactive-prints .zip-dropzone.is-dragover {
	border-color: var(--zip-color-accent);
	background: color-mix(in srgb, var(--zip-color-accent) 6%, transparent);
}

.zobar-interactive-prints .zip-dropzone__hint {
	color: var(--zip-color-muted);
	font-size: 0.9em;
}

.zobar-interactive-prints .zip-dropzone[aria-disabled="true"] {
	cursor: not-allowed;
	pointer-events: none;
}

.zobar-interactive-prints .zip-builder__plan-gate {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.35rem var(--zip-space-md);
	margin-bottom: var(--zip-space-md);
	padding: var(--zip-space-md);
	border: 1px solid color-mix(in srgb, var(--zip-color-accent) 55%, transparent);
	border-radius: var(--zip-radius);
	background: color-mix(in srgb, var(--zip-color-accent) 8%, transparent);
}

.zobar-interactive-prints .zip-builder__plan-gate > span {
	color: var(--zip-color-muted);
	font-size: 0.9em;
}

.zobar-interactive-prints .zip-builder__plan-gate .button {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.zobar-interactive-prints .zip-builder__plan-gate[hidden] {
	display: none;
}

/* Inline plan chooser — compact plan cards inside the builder (mirrors the
   pricing section's live product prices; selection shares [data-plan]
   is-selected handling with the pricing cards). */
.zobar-interactive-prints .zip-plan-chooser {
	margin-bottom: var(--zip-space-md);
	padding: var(--zip-space-md);
	background: var(--zip-color-surface);
	border: 1px solid var(--zip-border-color);
	border-radius: var(--zip-radius);
	box-shadow: var(--zip-card-shadow);
}

.zobar-interactive-prints .zip-plan-chooser__title {
	margin: 0 0 var(--zip-space-sm);
	font-size: 1em;
	font-weight: 700;
}

.zobar-interactive-prints .zip-plan-chooser__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--zip-space-sm);
}

.zobar-interactive-prints .zip-plan-chooser__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2em;
	padding: var(--zip-space-sm) var(--zip-space-md);
	background: var(--zip-color-surface);
	border: 1px solid var(--zip-border-color);
	border-radius: var(--zip-radius);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.zobar-interactive-prints .zip-plan-chooser__card:hover,
.zobar-interactive-prints .zip-plan-chooser__card:focus-visible {
	border-color: color-mix(in srgb, var(--zip-color-accent) 55%, transparent);
}

.zobar-interactive-prints .zip-plan-chooser__card.is-selected {
	border-color: var(--zip-color-accent);
	background: color-mix(in srgb, var(--zip-color-accent) 10%, transparent);
}

.zobar-interactive-prints .zip-plan-chooser__card .zip-plan__title {
	font-size: 0.95em;
	font-weight: 600;
}

.zobar-interactive-prints .zip-plan-chooser__price {
	color: var(--zip-color-muted);
	font-size: 0.9em;
}

.zobar-interactive-prints .zip-plan-chooser__prefix {
	margin-right: 0.15em;
}

/* Still picker: scrub the uploaded video to a still (cover image and/or print
   image). Pulled up + accent edge so it reads as a sub-step of the video card. */
.zobar-interactive-prints .zip-thumb {
	background: var(--zip-color-surface);
	border: 1px solid var(--zip-border-color);
	border-left: 3px solid var(--zip-color-accent);
	border-radius: var(--zip-radius);
	padding: var(--zip-space-md);
	margin-top: calc(-1 * var(--zip-space-lg) + var(--zip-space-sm));
	margin-bottom: var(--zip-space-lg);
}

.zobar-interactive-prints .zip-thumb__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--zip-space-sm);
	margin-bottom: var(--zip-space-sm);
}

.zobar-interactive-prints .zip-thumb__title {
	margin: 0;
	font-size: 1.05em;
}

.zobar-interactive-prints .zip-thumb__helper {
	color: var(--zip-color-muted);
	font-size: 0.9em;
	margin: 0 0 var(--zip-space-md);
}

.zobar-interactive-prints .zip-thumb__video {
	display: block;
	width: 100%;
	max-width: 480px;
	border-radius: var(--zip-radius);
	background: #000;
	aspect-ratio: 16 / 9;
	object-fit: contain;
}

.zobar-interactive-prints .zip-thumb__scrub {
	width: 100%;
	max-width: 480px;
	margin: var(--zip-space-md) 0 var(--zip-space-sm);
}

.zobar-interactive-prints .zip-thumb__actions {
	display: flex;
	gap: var(--zip-space-sm);
}

/* Compact result: the chosen still next to a "pick a different frame" control. */
.zobar-interactive-prints .zip-thumb__result {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--zip-space-md);
}

.zobar-interactive-prints .zip-thumb__preview {
	width: 160px;
	max-width: 100%;
	border-radius: var(--zip-radius);
	background: #000;
	aspect-ratio: 16 / 9;
	object-fit: contain;
}

.zobar-interactive-prints .zip-thumb__result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--zip-space-sm);
}

.zobar-interactive-prints .zip-thumb__note {
	color: var(--zip-color-muted);
	font-size: 0.85em;
	margin: var(--zip-space-sm) 0 0;
}

/* Inline outcome of "use as print image", shown in the panel where it was clicked. */
.zobar-interactive-prints .zip-thumb__image-result {
	flex-basis: 100%;
	font-size: 0.9em;
	font-weight: 600;
	margin: var(--zip-space-sm) 0 0;
	padding: 0.75rem 0.9rem;
	border: 1px solid currentColor;
	border-radius: calc(var(--zip-radius) - 3px);
	background: color-mix(in srgb, currentColor 8%, transparent);
	line-height: 1.45;
}

.zobar-interactive-prints .zip-thumb__image-result--ready {
	color: #34d399;
}

.zobar-interactive-prints .zip-thumb__image-result--warning {
	color: var(--zip-color-accent);
}

.zobar-interactive-prints .zip-thumb__image-result--error {
	color: #f87171;
}

.zobar-interactive-prints .zip-thumb__upload-image {
	background: color-mix(in srgb, var(--zip-color-accent) 10%, transparent);
}

.zobar-interactive-prints .zip-thumb.has-image-success {
	border-color: rgba(52, 211, 153, 0.55);
	border-left-color: #34d399;
}

/* Secondary action in the image card: "use a frame from your video instead". */
.zobar-interactive-prints .zip-upload-card__alt {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin-top: var(--zip-space-md);
	padding: 0.5em 0.9em;
	border: 1px solid color-mix(in srgb, var(--zip-color-accent) 50%, transparent);
	border-radius: var(--zip-radius);
	background: color-mix(in srgb, var(--zip-color-accent) 8%, transparent);
	color: var(--zip-color-accent);
	font: inherit;
	font-size: 0.9em;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.zobar-interactive-prints .zip-upload-card__alt:hover,
.zobar-interactive-prints .zip-upload-card__alt:focus {
	background: color-mix(in srgb, var(--zip-color-accent) 16%, transparent);
	border-color: var(--zip-color-accent);
}

.zobar-interactive-prints .zip-upload-card__alt--quiet {
	color: var(--zip-color-muted);
	border-color: var(--zip-border-color);
	background: transparent;
}

.zobar-interactive-prints .zip-upload-card__alt-icon {
	font-size: 1.05em;
	line-height: 1;
}

.zobar-interactive-prints .zip-upload-card__alt--youtube {
	color: #ff5a5f;
	border-color: color-mix(in srgb, #ff5a5f 55%, transparent);
	background: color-mix(in srgb, #ff5a5f 8%, transparent);
}

.zobar-interactive-prints .zip-youtube-import {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--zip-space-sm);
	align-items: end;
	margin-top: var(--zip-space-md);
	padding: var(--zip-space-md);
	border: 1px solid var(--zip-border-color);
	border-radius: var(--zip-radius);
	background: color-mix(in srgb, var(--zip-color-surface) 88%, #000);
}

.zobar-interactive-prints .zip-youtube-import[hidden] {
	display: none;
}

.zobar-interactive-prints .zip-youtube-import__field {
	display: grid;
	gap: 0.35rem;
	color: var(--zip-color-muted);
	font-size: 0.88em;
}

.zobar-interactive-prints .zip-youtube-import__field input {
	width: 100%;
	min-height: 2.6rem;
}

.zobar-interactive-prints .zip-youtube-import__player {
	grid-column: 1 / -1;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--zip-radius);
	overflow: hidden;
	background: #000;
}

.zobar-interactive-prints .zip-youtube-import__player iframe {
	width: 100%;
	height: 100%;
}

.zobar-interactive-prints .zip-youtube-import__limit,
.zobar-interactive-prints .zip-youtube-import__rights,
.zobar-interactive-prints .zip-youtube-import__actions,
.zobar-interactive-prints .zip-youtube-import__status,
.zobar-interactive-prints .zip-youtube-import__progress {
	grid-column: 1 / -1;
}

.zobar-interactive-prints .zip-youtube-import__limit,
.zobar-interactive-prints .zip-youtube-import__status {
	margin: 0;
	color: var(--zip-color-muted);
	font-size: 0.88em;
}

.zobar-interactive-prints .zip-youtube-import__rights {
	display: flex;
	gap: 0.55rem;
	align-items: flex-start;
	font-size: 0.88em;
	cursor: pointer;
}

.zobar-interactive-prints .zip-youtube-import__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--zip-space-sm);
}

.zobar-interactive-prints .zip-youtube-import__progress {
	width: 100%;
}

@media (max-width: 600px) {
	.zobar-interactive-prints .zip-youtube-import {
		grid-template-columns: 1fr;
	}

	.zobar-interactive-prints .zip-youtube-import > .button {
		width: 100%;
	}
}

.zobar-interactive-prints .zip-thumb__canvas {
	display: none;
}

.zobar-interactive-prints .zip-agreements {
	border: 1px solid var(--zip-border-color);
	border-radius: var(--zip-radius);
	padding: var(--zip-space-md);
	margin: 0;
}

.zobar-interactive-prints .zip-agreement {
	display: flex;
	gap: 0.6em;
	align-items: flex-start;
	margin-bottom: 0.6em;
	font-size: 0.92em;
	cursor: pointer;
}

.zobar-interactive-prints .zip-agreement:last-child {
	margin-bottom: 0;
}

.zobar-interactive-prints .zip-agreement input[type="checkbox"],
.zobar-interactive-prints .zip-youtube-import__rights input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 1.1em;
	height: 1.1em;
	margin-top: 0.15em;
	border: 2px solid var(--zip-border-color);
	border-radius: 3px;
	background: transparent;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	position: relative;
}

.zobar-interactive-prints .zip-agreement input[type="checkbox"]:checked,
.zobar-interactive-prints .zip-youtube-import__rights input[type="checkbox"]:checked {
	border-color: var(--zip-color-accent);
	background: var(--zip-color-accent);
}

.zobar-interactive-prints .zip-agreement input[type="checkbox"]:checked::after,
.zobar-interactive-prints .zip-youtube-import__rights input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 0.18em;
	top: 0.02em;
	width: 0.38em;
	height: 0.62em;
	border: 2px solid #fff;
	border-top: none;
	border-left: none;
	transform: rotate(45deg);
}

.zobar-interactive-prints .zip-agreement input[type="checkbox"]:focus-visible,
.zobar-interactive-prints .zip-youtube-import__rights input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--zip-color-accent);
	outline-offset: 2px;
}

.zobar-interactive-prints .zip-required {
	color: #991b1b;
}

/* Sticky summary (desktop) + mobile CTA --------------------------------- */
.zobar-interactive-prints .zip-summary {
	background: var(--zip-color-surface);
	border: 1px solid var(--zip-border-color);
	border-radius: var(--zip-radius);
	box-shadow: var(--zip-card-shadow);
	padding: var(--zip-space-md);
}

.zobar-interactive-prints .zip-summary__title {
	margin: 0 0 var(--zip-space-sm);
	font-size: 1.05em;
}

.zobar-interactive-prints .zip-summary__rows {
	margin: 0 0 var(--zip-space-md);
}

.zobar-interactive-prints .zip-summary__row {
	display: flex;
	justify-content: space-between;
	gap: var(--zip-space-sm);
	padding: 0.35em 0;
	border-bottom: 1px solid var(--zip-border-color);
}

.zobar-interactive-prints .zip-summary__row dt {
	color: var(--zip-color-muted);
	margin: 0;
}

.zobar-interactive-prints .zip-summary__row dd {
	margin: 0;
	font-weight: 600;
}

.zobar-interactive-prints .zip-summary__checkout {
	width: 100%;
}

.zobar-interactive-prints .zip-summary__lock {
	color: var(--zip-color-muted);
	font-size: 0.85em;
	margin: var(--zip-space-sm) 0 0;
	text-align: center;
}

.zobar-interactive-prints .zip-summary__next {
	display: block;
	margin: 0.55rem auto 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--zip-color-accent);
	font: inherit;
	font-size: 0.85em;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.zobar-interactive-prints .zip-summary__next[hidden] {
	display: none;
}

.zobar-interactive-prints button[disabled],
.zobar-interactive-prints .button[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

.zobar-interactive-prints .zip-preview {
	margin-top: var(--zip-space-md);
	padding-top: var(--zip-space-md);
	border-top: 1px solid var(--zip-border-color);
}

.zobar-interactive-prints .zip-preview__title {
	margin: 0 0 0.25em;
	font-size: 1em;
}

.zobar-interactive-prints .zip-preview__desc,
.zobar-interactive-prints .zip-preview__note {
	color: var(--zip-color-muted);
	font-size: 0.85em;
	margin-bottom:20px;
}

.zobar-interactive-prints .zip-preview__progress {
	width: min(100%, 24rem);
	margin-top: 0.75rem;
}

.zobar-interactive-prints .zip-preview__generate,
.zobar-interactive-prints .zip-preview__result .button {
	width: 100%;
}

.zobar-interactive-prints .zip-preview__result {
	margin-top: var(--zip-space-sm);
	text-align: center;
}

.zobar-interactive-prints .zip-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--zip-space-sm);
	padding: var(--zip-space-sm) var(--zip-space-md);
	background: var(--zip-color-surface);
	border-top: 1px solid var(--zip-border-color);
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

/* Activation extensions -------------------------------------------------- */
.zobar-interactive-prints .zip-activation__extensions {
	list-style: none;
	padding: 0;
	margin: var(--zip-space-md) 0 0;
	display: grid;
	gap: var(--zip-space-sm);
}

.zobar-interactive-prints .zip-activation__extension {
	display: flex;
	justify-content: space-between;
	gap: var(--zip-space-sm);
	padding: var(--zip-space-sm) var(--zip-space-md);
	border: 1px solid var(--zip-border-color);
	border-radius: var(--zip-radius);
}

/* Specs ------------------------------------------------------------------ */
.zobar-interactive-prints .zip-specs__col ul {
	margin: 0;
	padding-left: 1.1em;
}

/* FAQ -------------------------------------------------------------------- */
.zobar-interactive-prints .zip-faq__item {
	border: 1px solid var(--zip-border-color);
	border-radius: var(--zip-radius);
	padding: var(--zip-space-sm) var(--zip-space-md);
	margin-bottom: var(--zip-space-sm);
}

.zobar-interactive-prints .zip-faq__q {
	cursor: pointer;
	font-weight: 600;
}

.zobar-interactive-prints .zip-faq__a {
	margin-top: var(--zip-space-sm);
	color: var(--zip-color-muted);
}

/* Final CTA -------------------------------------------------------------- */
.zobar-interactive-prints .zip-final-cta {
	text-align: center;
}

.zobar-interactive-prints .zip-final-cta__actions {
	display: flex;
	gap: var(--zip-space-sm);
	justify-content: center;
	flex-wrap: wrap;
}

/* Legal ------------------------------------------------------------------ */
.zobar-interactive-prints .zip-legal__notes {
	display: grid;
	gap: var(--zip-space-md);
	grid-template-columns: 1fr;
}

.zobar-interactive-prints .zip-legal {
	color: var(--zip-color-muted);
	font-size: 0.88em;
}

.zobar-interactive-prints .zip-legal__note-title {
	font-size: 0.95em;
	margin: 0 0 0.25em;
}

/* Quote modal ------------------------------------------------------------ */
.zobar-interactive-prints .zip-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--zip-space-md);
}

.zobar-interactive-prints .zip-modal[hidden] {
	display: none;
}

.zobar-interactive-prints .zip-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.zobar-interactive-prints .zip-modal__dialog {
	position: relative;
	/* Self-contained solid panel: it floats over a dark scrim, so we fix a
	   light surface + dark text (forced on children to beat theme heading/p
	   colours) for guaranteed contrast on any theme. */
	background: #ffffff;
	color: #1f1f1f;
	border-radius: var(--zip-radius);
	padding: var(--zip-space-lg);
	max-width: 32rem;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.zobar-interactive-prints .zip-modal__dialog :is( h1, h2, h3, h4, h5, h6, p, label, span, li, a, strong, summary ) {
	color: #1f1f1f;
}

.zobar-interactive-prints .zip-modal__dialog input,
.zobar-interactive-prints .zip-modal__dialog textarea {
	color: #1f1f1f;
	background: #ffffff;
}

.zobar-interactive-prints .zip-modal__close {
	position: absolute;
	top: var(--zip-space-sm);
	right: var(--zip-space-md);
	background: none;
	border: 0;
	font-size: 1.6em;
	line-height: 1;
	cursor: pointer;
	color: var(--zip-color-muted);
}

.zobar-interactive-prints .zip-field {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	margin-bottom: var(--zip-space-sm);
}

.zobar-interactive-prints .zip-modal__privacy {
	color: var(--zip-color-muted);
	font-size: 0.82em;
	margin-top: var(--zip-space-sm);
}

/* Responsive ------------------------------------------------------------- */
@media (min-width: 768px) {
	.zobar-interactive-prints .zip-demo__steps {
		grid-template-columns: repeat(3, 1fr);
	}

	.zobar-interactive-prints .zip-pricing__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.zobar-interactive-prints .zip-use-cases__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.zobar-interactive-prints .zip-samples__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.zobar-interactive-prints .zip-specs__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.zobar-interactive-prints .zip-legal__notes {
		grid-template-columns: repeat(3, 1fr);
	}

	.zobar-interactive-prints .zip-builder__grid {
		grid-template-columns: 2fr 1fr;
	}

	.zobar-interactive-prints .zip-summary {
		position: sticky;
		top: var(--zip-space-md);
	}

	/* Sticky mobile CTA is mobile-only. */
	.zobar-interactive-prints .zip-sticky-cta {
		display: none;
	}
}

/* =========================================================================
   Design refresh — scoped visual polish.

   Still 100% namespaced under .zobar-interactive-prints and theme-adaptive.
   Placed last so it wins on source order without editing the rules above.

   Why a button system: the active theme renders .button as flat,
   near-invisible link text on this dark page (see the hero/pricing CTAs).
   These CTAs are the whole funnel, so we give them an explicit, accessible,
   still-scoped treatment: .alt = primary (accent fill), base = secondary
   (accent outline). We never style <button> globally.
   ========================================================================= */

.zobar-interactive-prints .button,
.zobar-interactive-prints button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.72em 1.5em;
	border-radius: 999px;
	border: 1.5px solid var(--zip-color-accent);
	background: transparent;
	color: inherit;
	font-weight: 600;
	font-size: 1em;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.zobar-interactive-prints .button:hover {
	background: color-mix(in srgb, var(--zip-color-accent) 12%, transparent);
	transform: translateY(-1px);
}

.zobar-interactive-prints .button.alt {
	background: var(--zip-color-accent);
	border-color: var(--zip-color-accent);
	color: var(--wp--preset--color--button-text, #ffffff);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--zip-color-accent) 35%, transparent);
}

.zobar-interactive-prints .button.alt:hover {
	background: var(--zip-color-accent-hover);
	border-color: var(--zip-color-accent-hover);
	color: var(--wp--preset--color--button-text, #ffffff);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--zip-color-accent) 45%, transparent);
}

.zobar-interactive-prints .button:focus-visible {
	outline: 2px solid var(--zip-color-accent);
	outline-offset: 2px;
}

.zobar-interactive-prints .button[disabled],
.zobar-interactive-prints .button[disabled]:hover {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
	background: transparent;
}

.zobar-interactive-prints .button.alt[disabled],
.zobar-interactive-prints .button.alt[disabled]:hover {
	background: var(--zip-color-accent);
}

/* Hero — give the headline real presence. */
.zobar-interactive-prints .zip-hero {
	padding: clamp(2rem, 6vw, 4rem) 0 var(--zip-space-lg);
}

.zobar-interactive-prints .zip-hero__heading {
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	font-weight: 800;
}

.zobar-interactive-prints .zip-hero__sub {
	font-size: clamp(1rem, 2.2vw, 1.18rem);
	line-height: 1.6;
}

.zobar-interactive-prints .zip-hero__actions {
	margin-top: var(--zip-space-md);
}

/* Section headings scale up a touch for hierarchy. */
.zobar-interactive-prints .zip-section__heading {
	font-size: clamp(1.4rem, 3vw, 2rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* Pricing — elevated cards, bottom-aligned CTAs, clear featured + selected. */
.zobar-interactive-prints .zip-plan {
	display: flex;
	flex-direction: column;
	padding: var(--zip-space-lg) var(--zip-space-md);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.zobar-interactive-prints .zip-plan:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

.zobar-interactive-prints .zip-plan--featured {
	background: color-mix(in srgb, var(--zip-color-accent) 7%, var(--zip-color-surface));
}

.zobar-interactive-prints .zip-plan__title {
	font-size: 1.15em;
	margin: 0.1em 0 0;
}

.zobar-interactive-prints .zip-plan__amount {
	font-size: 2.1em;
	line-height: 1;
}

.zobar-interactive-prints .zip-plan__inclusions {
	flex: 1 1 auto;
}

.zobar-interactive-prints .zip-plan__cta {
	margin: var(--zip-space-md) 0 0;
}

.zobar-interactive-prints .zip-plan__cta .button {
	width: 100%;
}

.zobar-interactive-prints .zip-plan.is-selected {
	border-color: var(--zip-color-accent);
	box-shadow: 0 0 0 2px var(--zip-color-accent) inset;
}

@media (min-width: 768px) {
	.zobar-interactive-prints .zip-plan--featured {
		transform: scale(1.03);
	}

	.zobar-interactive-prints .zip-plan--featured:hover {
		transform: scale(1.03) translateY(-3px);
	}
}

/* Card hover affordance for the step / use-case grids. */
.zobar-interactive-prints .zip-demo__step,
.zobar-interactive-prints .zip-use-case {
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.zobar-interactive-prints .zip-demo__step:hover,
.zobar-interactive-prints .zip-use-case:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
	border-color: var(--zip-color-accent);
}

/* Dropzone reads more like an action surface. */
.zobar-interactive-prints .zip-dropzone {
	background: color-mix(in srgb, currentColor 3%, transparent);
}

/* Summary "Choose a plan" affordance (shown until a plan is picked). */
.zobar-interactive-prints .zip-summary__choose {
	color: var(--zip-color-accent);
	font-weight: 600;
	text-decoration: underline;
}

/* FAQ — clearer open/closed affordance on the native accordion. */
.zobar-interactive-prints .zip-faq__item {
	transition: border-color 0.15s ease;
}

.zobar-interactive-prints .zip-faq__item[open] {
	border-color: var(--zip-color-accent);
}

.zobar-interactive-prints .zip-faq__q {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--zip-space-sm);
}

.zobar-interactive-prints .zip-faq__q::-webkit-details-marker {
	display: none;
}

.zobar-interactive-prints .zip-faq__q::after {
	content: "+";
	color: var(--zip-color-accent);
	font-weight: 700;
	font-size: 1.2em;
	line-height: 1;
	transition: transform 0.15s ease;
}

.zobar-interactive-prints .zip-faq__item[open] .zip-faq__q::after {
	transform: rotate(45deg);
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.zobar-interactive-prints * {
		transition: none !important;
	}

	.zobar-interactive-prints .zip-pricing__grid {
		scroll-behavior: auto;
	}

	.zobar-interactive-prints .button:hover,
	.zobar-interactive-prints .zip-plan:hover,
	.zobar-interactive-prints .zip-demo__step:hover,
	.zobar-interactive-prints .zip-use-case:hover {
		transform: none;
	}
}

/* =========================================================================
   Logged-out gate — conversion-oriented CTA stack (primary + quiet secondary).
   ========================================================================= */

.zobar-interactive-prints .zip-login-gate__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--zip-space-sm);
	margin: var(--zip-space-md) 0 0;
}

.zobar-interactive-prints .zip-login-gate__create {
	min-width: min(20rem, 100%);
}

.zobar-interactive-prints .zip-login-gate__signin {
	color: var(--zip-color-muted);
	font-size: 0.9em;
	text-decoration: none;
	background:none;
}

.zobar-interactive-prints .zip-login-gate__signin:hover,
.zobar-interactive-prints .zip-login-gate__signin:focus-visible {
	color: var(--zip-color-accent);
}

.zobar-interactive-prints .zip-login-gate__reassure {
	margin: var(--zip-space-sm) 0 0;
	color: var(--zip-color-muted);
	font-size: 0.85em;
}

/* =========================================================================
   Quote form submission states (inside the solid modal panel).
   The modal forces dark text on children, so these win on specificity.
   ========================================================================= */

.zobar-interactive-prints .zip-quote-status {
	margin: 0 0 var(--zip-space-sm);
	padding: 0.6em 0.9em;
	border-radius: var(--zip-radius);
	font-size: 0.9em;
}

.zobar-interactive-prints .zip-modal__dialog .zip-quote-status--success {
	background: rgba(22, 163, 74, 0.12);
	color: #15803d;
}

.zobar-interactive-prints .zip-modal__dialog .zip-quote-status--error {
	background: rgba(239, 68, 68, 0.12);
	color: #b91c1c;
}

.zobar-interactive-prints .zip-modal__dialog .zip-quote-status--busy {
	background: rgba(127, 127, 127, 0.12);
	color: #4b5563;
}

/* =========================================================================
   Marketing polish — tighten rhythm + lift the supporting sections so the
   page reads as a designed landing page, not a bare form. Still fully scoped
   and theme-adaptive; placed last so it wins on source order.
   ========================================================================= */

/* More generous breathing room between major sections. */
.zobar-interactive-prints .zip-section {
	padding-top: clamp(2.5rem, 6vw, 4.5rem);
	padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.zobar-interactive-prints .zip-section__intro {
	font-size: 1.05em;
	line-height: 1.6;
}

/* Upload cards — clearer separation of helper text, dropzone, and guidance. */
.zobar-interactive-prints .zip-upload-card {
	padding: var(--zip-space-lg);
}

.zobar-interactive-prints .zip-upload-card__helper {
	margin: 0 0 var(--zip-space-md);
	line-height: 1.5;
}

.zobar-interactive-prints .zip-dropzone {
	padding-block: clamp(2rem, 5vw, 3rem);
}

/* "Avoid" guidance — a labelled list with a clear ✕ marker instead of an
   orphaned run of bullet text under the dropzone. */
.zobar-interactive-prints .zip-upload-card__avoid-label {
	margin: var(--zip-space-md) 0 0.4em;
	font-size: 0.72em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--zip-color-muted);
}

.zobar-interactive-prints .zip-upload-card__avoid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35em;
}

.zobar-interactive-prints .zip-upload-card__avoid li {
	position: relative;
	padding-left: 1.5em;
	line-height: 1.45;
}

.zobar-interactive-prints .zip-upload-card__avoid li::before {
	content: "\2715";
	position: absolute;
	left: 0;
	top: 0.05em;
	color: #d97706;
	font-weight: 700;
	font-size: 0.85em;
}

/* Print-quote rhythm is handled by the refreshed section rules below. */
.zobar-interactive-prints .zip-print-quote__options {
	margin-top: var(--zip-space-md);
}

.zobar-interactive-prints .zip-print-quote .button {
	margin-top: var(--zip-space-md);
}

/* File specifications — turn the two bare columns into polished spec cards
   with a strong column heading and a clean ✓ checklist. */
.zobar-interactive-prints .zip-specs__grid {
	margin-top: var(--zip-space-md);
}

.zobar-interactive-prints .zip-specs__col {
	background: var(--zip-color-surface);
	border: 1px solid var(--zip-border-color);
	border-radius: var(--zip-radius);
	padding: var(--zip-space-lg) var(--zip-space-md);
}

.zobar-interactive-prints .zip-specs__col-title {
	margin: 0 0 var(--zip-space-md);
	padding-bottom: var(--zip-space-sm);
	border-bottom: 1px solid var(--zip-border-color);
	font-size: 1.15em;
	font-weight: 700;
}

.zobar-interactive-prints .zip-specs__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6em;
}

.zobar-interactive-prints .zip-specs__col li {
	position: relative;
	padding-left: 1.6em;
	line-height: 1.45;
}

.zobar-interactive-prints .zip-specs__col li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0.02em;
	color: var(--zip-color-accent);
	font-weight: 700;
}

/* =========================================================================
   Engagement refresh — lift the two flattest content sections so the page
   reads as an active journey, not a wall of text. Scoped + theme-adaptive;
   placed last so it wins on source order.
   ========================================================================= */

/* "What happens after checkout" — a numbered journey of step cards. CSS
   counters number the <ol> (no markup change), each step lifts on hover, and
   on desktop they flow into a 3-up row that reads as a left-to-right path. */
.zobar-interactive-prints .zip-after .zip-section__heading,
.zobar-interactive-prints .zip-after .zip-section__intro {
	text-align: center;
}

.zobar-interactive-prints .zip-timeline {
	counter-reset: zip-step;
	gap: var(--zip-space-md);
	margin-top: var(--zip-space-lg);
}

.zobar-interactive-prints .zip-timeline__step {
	counter-increment: zip-step;
	position: relative;
	border-left: 0;
	padding: var(--zip-space-lg) var(--zip-space-md) var(--zip-space-md);
	background: var(--zip-color-surface);
	border: 1px solid var(--zip-border-color);
	border-radius: var(--zip-radius);
	box-shadow: var(--zip-card-shadow);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Numbered badge — anchored to the card's top edge so it reads as a step marker. */
.zobar-interactive-prints .zip-timeline__step::before {
	content: counter(zip-step);
	position: absolute;
	top: calc(-1 * var(--zip-space-sm));
	left: var(--zip-space-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 999px;
	background: var(--zip-color-accent);
	color: var(--wp--preset--color--button-text, #fff);
	font-family: var(--zip-font-heading);
	font-weight: 800;
	font-size: 1.1rem;
	line-height: 1;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--zip-color-accent) 35%, transparent);
}

.zobar-interactive-prints .zip-timeline__step:hover {
	transform: translateY(-3px);
	border-color: var(--zip-color-accent);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.zobar-interactive-prints .zip-timeline__title {
	margin: 0 0 0.3em;
	font-size: 1.1em;
}

.zobar-interactive-prints .zip-timeline__desc {
	margin: 0;
	color: var(--zip-color-muted);
	line-height: 1.55;
}

@media (min-width: 768px) {
	/* Auto-fit row: 3 steps → 3 columns, any count stays balanced. */
	.zobar-interactive-prints .zip-timeline {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}

/* "Need zobAR to print this?" - clean editorial section on the page background
   (no surface band): centered eyebrow + heading, an accent-edged callout, and a
   row of adaptive option cards. Uses the plugin's own palette tokens throughout. */
.zobar-interactive-prints .zip-print-quote {
	position: relative;
	background: transparent;
	color: inherit;
	text-align: center;
}

.zobar-interactive-prints .zip-print-quote__header {
	max-width: 48rem;
	margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}

.zobar-interactive-prints .zip-print-quote__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 0.9rem;
	color: var(--zip-color-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

.zobar-interactive-prints .zip-print-quote__eyebrow::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 999px;
	background: var(--zip-color-accent);
}

.zobar-interactive-prints .zip-print-quote .zip-section__heading {
	margin: 0;
	color: inherit;
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.025em;
	text-align: center;
}

.zobar-interactive-prints .zip-print-quote__note {
	position: relative;
	max-width: none;
	margin: 0 auto clamp(3rem, 5vw, 3.75rem);
	padding: clamp(1.4rem, 3vw, 2rem) clamp(1.35rem, 3vw, 2.25rem);
	overflow: hidden;
	background: var(--zip-color-surface);
	border: 1px solid var(--zip-border-color);
	border-radius: var(--zip-radius);
	box-shadow: var(--zip-card-shadow);
	text-align: left;
}

.zobar-interactive-prints .zip-print-quote__note::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	background: var(--zip-color-accent);
}

.zobar-interactive-prints .zip-print-quote__note .zip-section__intro {
	max-width: none;
	margin: 0;
	color: var(--zip-color-muted);
	font-size: 1.12rem;
	font-weight: 500;
	line-height: 1.55;
	text-align: left;
}

.zobar-interactive-prints .zip-print-quote__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zobar-interactive-prints .zip-print-quote .zip-chip,
.zobar-interactive-prints .zip-print-quote__option {
	display: grid;
	min-height: 9.75rem;
	align-content: center;
	justify-items: center;
	gap: 1.1rem;
	padding: 1.5rem 1rem;
	background: var(--zip-color-surface);
	border: 1px solid var(--zip-border-color);
	border-radius: var(--zip-radius);
	color: inherit;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.25;
	text-align: center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.zobar-interactive-prints .zip-print-quote .zip-chip::before {
	content: none;
}

.zobar-interactive-prints .zip-print-quote__option-icon {
	display: grid;
	width: 3.9rem;
	height: 3.9rem;
	place-items: center;
	border-radius: var(--zip-radius);
	background: color-mix(in srgb, var(--zip-color-accent) 10%, transparent);
	color: var(--zip-color-accent);
}

.zobar-interactive-prints .zip-print-quote__option-icon svg {
	width: 1.45rem;
	height: 1.45rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.zobar-interactive-prints .zip-print-quote__option:hover {
	transform: translateY(-2px);
	border-color: var(--zip-color-accent);
	box-shadow: 0 16px 34px rgba(17, 17, 17, 0.08);
	color: inherit;
}

.zobar-interactive-prints .zip-print-quote__action {
	margin: clamp(2rem, 4vw, 2.75rem) 0 0;
}

.zobar-interactive-prints .zip-print-quote .button {
	margin-top: 0;
}

.zobar-interactive-prints .zip-print-quote .button:hover {
	background: color-mix(in srgb, var(--zip-color-accent) 12%, transparent);
}

@media (max-width: 640px) {
	.zobar-interactive-prints .zip-print-quote__note .zip-section__intro {
		font-size: 1rem;
	}

	.zobar-interactive-prints .zip-print-quote__options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.85rem;
	}

	.zobar-interactive-prints .zip-print-quote .zip-chip,
	.zobar-interactive-prints .zip-print-quote__option {
		min-height: 8.5rem;
		padding: 1.1rem 0.75rem;
	}
}

/* =========================================================================
   Customer dashboard — My Account "Interactive Prints" endpoint.
   Scoped + theme-adaptive, reusing tokens, .zip-badge, and the .button system.
   ========================================================================= */

.zobar-interactive-prints.zip-dashboard {
	/* Inside WC's account column, do not re-center or cap width. */
	max-width: none;
	margin: 0;

	/* Dark workspace skin: the dashboard paints its own near-black panel so it
	   reads the same on light or dark themes. Inner card surfaces, borders, and
	   muted text all derive from currentColor, so re-inking the root cascades
	   through every component below. */
	color: #e8ecf2;
	background: #0d1117;
	border-radius: 16px;
	padding: clamp(1.25rem, 3vw, 2rem);
	--zip-border-color: rgba(232, 236, 242, 0.16);
	--zip-border-color: color-mix(in srgb, currentColor 16%, transparent);
}

/* Status hues nudged brighter for the dark panel. */
.zobar-interactive-prints.zip-dashboard .zip-badge--ready {
	color: #22c55e;
	border-color: rgba(34, 197, 94, 0.45);
	background: rgba(34, 197, 94, 0.12);
}

.zobar-interactive-prints.zip-dashboard .zip-badge--warning {
	color: #eab308;
	border-color: rgba(234, 179, 8, 0.45);
	background: rgba(234, 179, 8, 0.12);
}

.zobar-interactive-prints.zip-dashboard .zip-badge--error {
	color: #f87171;
	border-color: rgba(248, 113, 113, 0.45);
	background: rgba(248, 113, 113, 0.12);
}

.zobar-interactive-prints .zip-icon {
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
}

/* Masthead: title + primary CTA row, then the overview stat cards. */
.zobar-interactive-prints .zip-dashboard__masthead {
	display: grid;
	gap: var(--zip-space-md);
	margin-bottom: var(--zip-space-lg);
}

.zobar-interactive-prints .zip-dashboard__hero-grid {
	display: grid;
	gap: var(--zip-space-md);
}

.zobar-interactive-prints .zip-dashboard__title {
	font-family: var(--zip-font-heading);
	font-size: clamp(1.4rem, 2.6vw, 1.85rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 0.3rem;
}

.zobar-interactive-prints .zip-dashboard__subtitle {
	color: var(--zip-color-muted);
	margin: 0;
}

.zobar-interactive-prints .zip-dashboard__hero-actions {
	display: flex;
	align-items: flex-start;
}

.zobar-interactive-prints .zip-dashboard__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

/* Overview stat cards: tinted icon disc + number/label stack. */
.zobar-interactive-prints .zip-dashboard__overview {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--zip-space-md);
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.zobar-interactive-prints .zip-stat {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	background: color-mix(in srgb, currentColor 4%, transparent);
	border: 1px solid var(--zip-border-color);
	border-radius: var(--zip-radius);
	padding: 1rem 1.1rem;
}

.zobar-interactive-prints .zip-stat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid;
	flex-shrink: 0;
}

.zobar-interactive-prints .zip-stat__icon .zip-icon {
	width: 20px;
	height: 20px;
}

.zobar-interactive-prints .zip-stat--prints .zip-stat__icon {
	color: var(--zip-color-accent);
	border-color: color-mix(in srgb, var(--zip-color-accent) 45%, transparent);
	background: color-mix(in srgb, var(--zip-color-accent) 14%, transparent);
}

.zobar-interactive-prints .zip-stat--active .zip-stat__icon {
	color: #22c55e;
	border-color: rgba(34, 197, 94, 0.45);
	background: rgba(34, 197, 94, 0.14);
}

.zobar-interactive-prints .zip-stat--pending .zip-stat__icon {
	color: #3b82f6;
	border-color: rgba(59, 130, 246, 0.45);
	background: rgba(59, 130, 246, 0.14);
}

.zobar-interactive-prints .zip-stat--attention .zip-stat__icon {
	color: #eab308;
	border-color: rgba(234, 179, 8, 0.45);
	background: rgba(234, 179, 8, 0.14);
}

.zobar-interactive-prints .zip-stat__body {
	display: grid;
	gap: 0.15rem;
}

.zobar-interactive-prints .zip-stat__num {
	display: block;
	font-family: var(--zip-font-heading);
	font-size: 1.55rem;
	font-weight: 800;
	line-height: 1.1;
}

.zobar-interactive-prints .zip-stat__label {
	color: var(--zip-color-muted);
	font-size: 0.9rem;
}

/* Project list. */
.zobar-interactive-prints .zip-dashboard__projects {
	display: grid;
	gap: var(--zip-space-md);
}

.zobar-interactive-prints .zip-dashboard__section-title {
	font-family: var(--zip-font-heading);
	font-size: 1.15rem;
	margin: 0;
	padding-bottom: 0.8rem;
	border-bottom: 1px solid var(--zip-border-color);
}

.zobar-interactive-prints .zip-dashboard__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--zip-space-md);
}

.zobar-interactive-prints .zip-project {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--zip-space-md);
	background: color-mix(in srgb, currentColor 4%, transparent);
	border: 1px solid var(--zip-border-color);
	border-radius: calc(var(--zip-radius) + 4px);
	box-shadow: var(--zip-card-shadow);
	padding: clamp(1.1rem, 2.4vw, 1.5rem);
}

/* Avatar tint cycles per card so the list reads less repetitive. */
.zobar-interactive-prints .zip-project__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--zip-color-accent) 40%, transparent);
	background: linear-gradient(135deg, color-mix(in srgb, var(--zip-color-accent) 32%, transparent), color-mix(in srgb, var(--zip-color-accent) 8%, transparent));
	color: var(--zip-color-accent);
}

/* Chosen video still, shown in place of the generic print icon. */
.zobar-interactive-prints .zip-project__thumb {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	object-fit: cover;
	border: 1px solid var(--zip-border-color);
	background: #000;
}

.zobar-interactive-prints .zip-project:nth-child(3n + 2) .zip-project__icon {
	border-color: rgba(59, 130, 246, 0.4);
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.32), rgba(59, 130, 246, 0.08));
	color: #3b82f6;
}

.zobar-interactive-prints .zip-project:nth-child(3n) .zip-project__icon {
	border-color: rgba(139, 92, 246, 0.4);
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.32), rgba(139, 92, 246, 0.08));
	color: #8b5cf6;
}

.zobar-interactive-prints .zip-project__icon .zip-icon {
	width: 22px;
	height: 22px;
}

.zobar-interactive-prints .zip-project__body {
	display: grid;
	gap: 0.8rem;
	align-content: start;
}

.zobar-interactive-prints .zip-project__title-wrap {
	display: grid;

/* Video demo section ----------------------------------------------------- */
.zobar-interactive-prints .zip-video-demo {
	text-align: center;
}

.zobar-interactive-prints .zip-video-demo__header {
	margin-bottom: var(--zip-space-md);
}

.zobar-interactive-prints .zip-video-demo__eyebrow {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--zip-color-muted);
	margin: 0 0 0.5rem;
}

.zobar-interactive-prints .zip-video-demo__player {
	max-width: 800px;
	margin: 0 auto;
	border-radius: var(--zip-radius);
	overflow: hidden;
	box-shadow: var(--zip-card-shadow);
	background: var(--zip-color-surface);
	aspect-ratio: 16 / 9;
}

.zobar-interactive-prints .zip-video-demo__player video,
.zobar-interactive-prints .zip-video-demo__player iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.zobar-interactive-prints .zip-video-demo__caption {
	color: var(--zip-color-muted);
	font-size: 0.9rem;
	margin: var(--zip-space-sm) 0 0;
}

/* Testimonials section --------------------------------------------------- */
.zobar-interactive-prints .zip-testimonials {
	text-align: center;
}

.zobar-interactive-prints .zip-testimonials__header {
	margin-bottom: var(--zip-space-md);
}

.zobar-interactive-prints .zip-testimonials__eyebrow {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--zip-color-muted);
	margin: 0 0 0.5rem;
}

.zobar-interactive-prints .zip-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--zip-space-md);
	max-width: 1000px;
	margin: 0 auto;
}

.zobar-interactive-prints .zip-testimonials__card {
	background: var(--zip-color-surface);
	border: 1px solid var(--zip-border-color);
	border-radius: var(--zip-radius);
	padding: var(--zip-space-md);
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.zobar-interactive-prints .zip-testimonials__stars {
	color: #f5a623;
	font-size: 1.1rem;
	letter-spacing: 2px;
}

.zobar-interactive-prints .zip-testimonials__quote {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	font-style: italic;
}

.zobar-interactive-prints .zip-testimonials__author {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.zobar-interactive-prints .zip-testimonials__name {
	font-size: 0.95rem;
}

.zobar-interactive-prints .zip-testimonials__role {
	font-size: 0.82rem;
	color: var(--zip-color-muted);
}

@media (max-width: 640px) {
	.zobar-interactive-prints .zip-testimonials__grid {
		grid-template-columns: 1fr;
	}
}
	gap: 0.3rem;
}

.zobar-interactive-prints .zip-project__ref {
	margin: 0;
	font-family: var(--zip-font-heading);
	font-size: 1.15rem;
	line-height: 1.2;
}

.zobar-interactive-prints .zip-project__refline,
.zobar-interactive-prints .zip-project__sub,
.zobar-interactive-prints .zip-project__scans {
	color: var(--zip-color-muted);
	font-size: 0.92rem;
	margin: 0;
}

.zobar-interactive-prints .zip-project__badges {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.zobar-interactive-prints .zip-project__helper {
	margin: 0;
	padding: 0.8rem 1rem;
	border-left: 3px solid var(--zip-color-accent);
	border-radius: 0 var(--zip-radius) var(--zip-radius) 0;
	background: color-mix(in srgb, var(--zip-color-accent) 8%, transparent);
	color: var(--zip-color-muted);
	font-size: 0.92rem;
	line-height: 1.5;
}

.zobar-interactive-prints .zip-project__files {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.7rem;
	margin: 0;
	font-size: 0.92rem;
}

.zobar-interactive-prints .zip-project__file + .zip-project__file::before {
	content: "•";
	margin-right: 0.7rem;
	color: var(--zip-color-muted);
}

.zobar-interactive-prints .zip-project__files-label {
	font-weight: 700;
}

.zobar-interactive-prints .zip-project__file {
	color: var(--zip-color-muted);
}

.zobar-interactive-prints .zip-project__file--error {
	color: #ef4444;
}

/* Right rail: plan pill, stacked actions, unlock note. */
.zobar-interactive-prints .zip-project__aside {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.65rem;
}

.zobar-interactive-prints .zip-project__plan {
	align-self: flex-start;
}

.zobar-interactive-prints .zip-project__attention {
	color: #eab308;
	font-size: 0.82rem;
	font-weight: 700;
}

.zobar-interactive-prints .zip-project__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.6rem;
}

.zobar-interactive-prints .zip-project__actions .button,
.zobar-interactive-prints .zip-project__actions button.button {
	width: 100%;
	justify-content: center;
	text-align: center;
	font-size: 0.92em;
	min-height: 44px;
}

/* Inline QR: a white frame keeps the code scannable on the dark card. */
.zobar-interactive-prints .zip-project__qr {
	margin: 0 0 0.2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	background: #ffffff;
	border: 1px solid var(--zip-border-color);
	border-radius: var(--zip-radius);
}

.zobar-interactive-prints .zip-project__qr-img {
	display: block;
	width: 148px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	image-rendering: pixelated;
}

.zobar-interactive-prints .zip-project__qr-caption {
	color: #4b5563;
	font-size: 0.78rem;
	text-align: center;
	line-height: 1.3;
}

/* Theme-proof button skins: quiet outline + accent primary. */
.zobar-interactive-prints.zip-dashboard .zip-dashboard__hero-actions .button,
.zobar-interactive-prints.zip-dashboard .zip-project__actions .button,
.zobar-interactive-prints.zip-dashboard .zip-project__actions button.button {
	color: inherit !important;
	background: transparent !important;
	border: 1px solid color-mix(in srgb, currentColor 35%, var(--zip-border-color)) !important;
	box-shadow: none;
	text-decoration: none;
}

.zobar-interactive-prints.zip-dashboard .zip-dashboard__hero-actions .button.alt,
.zobar-interactive-prints.zip-dashboard .zip-project__actions .button.alt,
.zobar-interactive-prints.zip-dashboard .zip-project__actions button.button.alt {
	color: var(--wp--preset--color--button-text, #ffffff) !important;
	background: var(--zip-color-accent) !important;
	border: 1px solid var(--zip-color-accent) !important;
	box-shadow: 0 10px 22px color-mix(in srgb, var(--zip-color-accent) 28%, transparent);
}

.zobar-interactive-prints.zip-dashboard .zip-dashboard__hero-actions .button:hover,
.zobar-interactive-prints.zip-dashboard .zip-project__actions .button:hover,
.zobar-interactive-prints.zip-dashboard .zip-project__actions button.button:hover {
	background: color-mix(in srgb, var(--zip-color-accent) 11%, transparent) !important;
}

.zobar-interactive-prints.zip-dashboard .zip-dashboard__hero-actions .button.alt:hover,
.zobar-interactive-prints.zip-dashboard .zip-project__actions .button.alt:hover,
.zobar-interactive-prints.zip-dashboard .zip-project__actions button.button.alt:hover {
	background: var(--zip-color-accent-hover) !important;
	border-color: var(--zip-color-accent-hover) !important;
}

.zobar-interactive-prints .zip-project__note {
	color: var(--zip-color-muted);
	font-size: 0.85rem;
	margin: 0;
}

.zobar-interactive-prints .zip-project__note--warning {
	color: #ef4444;
}

/* Extend activation row spans the full card. */
.zobar-interactive-prints .zip-project__extend {
	grid-column: 1 / -1;
	display: grid;
	gap: 0.7rem;
	padding-top: var(--zip-space-md);
	border-top: 1px solid var(--zip-border-color);
}

.zobar-interactive-prints .zip-project__extend-label {
	display: block;
	color: var(--zip-color-muted);
	font-size: 0.88rem;
	margin: 0;
}

.zobar-interactive-prints .zip-project__extend-summary {
	color: var(--zip-color-muted);
	font-size: 0.85rem;
	margin: -0.25rem 0 0;
}

.zobar-interactive-prints .zip-project__extend-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--zip-space-sm);
}

.zobar-interactive-prints .zip-chip--action {
	text-decoration: none;
	border-color: var(--zip-color-accent);
	color: var(--zip-color-accent);
	background: transparent;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.zobar-interactive-prints .zip-chip--action:hover {
	background: var(--zip-color-accent);
	color: var(--wp--preset--color--button-text, #fff);
}

.zobar-interactive-prints .zip-chip--selected {
	background: color-mix(in srgb, var(--zip-color-accent) 16%, transparent);
	box-shadow: inset 0 0 0 1px var(--zip-color-accent);
}

/* Collapsible image-tracker + overlay-video preview, full-width like extend. */
.zobar-interactive-prints .zip-project__media {
	grid-column: 1 / -1;
	padding-top: var(--zip-space-md);
	border-top: 1px solid var(--zip-border-color);
}

.zobar-interactive-prints .zip-project__media-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
	list-style: none;
	color: var(--zip-color-muted);
	font-size: 0.88rem;
	font-weight: 700;
}

.zobar-interactive-prints .zip-project__media-toggle::-webkit-details-marker {
	display: none;
}

.zobar-interactive-prints .zip-project__media-toggle::before {
	content: "\25B8"; /* ▸ */
	font-size: 0.8em;
	transition: transform 0.15s ease;
}

.zobar-interactive-prints .zip-project__media[open] .zip-project__media-toggle::before {
	transform: rotate(90deg);
}

.zobar-interactive-prints .zip-project__media-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--zip-space-md);
	margin-top: var(--zip-space-sm);
}

@media (min-width: 600px) {
	.zobar-interactive-prints .zip-project__media-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.zobar-interactive-prints .zip-project__media-item {
	margin: 0;
	display: grid;
	gap: 0.4rem;
	align-content: start;
}

.zobar-interactive-prints .zip-project__media-asset {
	width: 100%;
	height: auto;
	max-height: 260px;
	object-fit: contain;
	border-radius: var(--zip-radius);
	border: 1px solid var(--zip-border-color);
	background: #000;
}

.zobar-interactive-prints .zip-project__media-caption {
	color: var(--zip-color-muted);
	font-size: 0.82rem;
}

.zobar-interactive-prints .zip-dashboard__empty {
	margin: 0;
}

@media (min-width: 720px) {
	.zobar-interactive-prints .zip-dashboard__hero-grid {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}

	.zobar-interactive-prints .zip-project {
		grid-template-columns: auto minmax(0, 1fr) 220px;
	}

	.zobar-interactive-prints .zip-project__aside {
		grid-column: auto;
		align-items: flex-end;
	}

	.zobar-interactive-prints .zip-project__plan {
		align-self: flex-end;
	}

	.zobar-interactive-prints .zip-project__actions {
		width: 100%;
	}

	.zobar-interactive-prints .zip-project__note,
	.zobar-interactive-prints .zip-project__attention {
		text-align: right;
	}
}

@media (max-width: 520px) {
	.zobar-interactive-prints .zip-project {
		grid-template-columns: 1fr;
	}

	.zobar-interactive-prints .zip-project__icon,
	.zobar-interactive-prints .zip-project__thumb {
		display: none;
	}
}

/* Keep the upload flow compact and give its controls useful width on phones. */
@media (max-width: 767px) {
	.zobar-interactive-prints .zip-builder__plan-gate {
		grid-template-columns: 1fr;
	}

	.zobar-interactive-prints .zip-builder__plan-gate .button {
		grid-column: 1;
		grid-row: auto;
		margin-top: 0.5rem;
		width: 100%;
	}

	.zobar-interactive-prints .zip-builder {
		padding-block: 2rem;
	}

	.zobar-interactive-prints .zip-builder__steps {
		column-gap: 0.75rem;
		row-gap: 0.6rem;
		margin-bottom: 1.5rem;
	}

	.zobar-interactive-prints .zip-activation,
	.zobar-interactive-prints .zip-upload-card {
		margin-bottom: 1.5rem;
	}

	.zobar-interactive-prints .zip-activation + .zip-activation {
		padding-top: 1.5rem;
	}

	.zobar-interactive-prints .zip-activation__head {
		margin-bottom: 1rem;
	}

	.zobar-interactive-prints .zip-upload-card {
		padding: 1rem;
	}

	.zobar-interactive-prints .zip-upload-card__head,
	.zobar-interactive-prints .zip-upload-card__helper {
		margin-bottom: 1rem;
	}

	.zobar-interactive-prints .zip-upload-card__head {
		align-items: flex-start;
		gap: 0.75rem;
	}

	.zobar-interactive-prints .zip-badge {
		flex-shrink: 0;
	}

	.zobar-interactive-prints .zip-dropzone {
		padding: 1.5rem 1rem;
	}

	.zobar-interactive-prints .zip-upload-card__avoid-label {
		margin-top: 1rem;
	}
}