/* The stage (blocks/stage.php): a product cutout centered in its frame with even padding (9% of the frame's shorter
 * side), on a background. The stage is a size container, so cqmin is the frame's shorter side. */

:root {
	--oyb-stage-tint: #eff1ff;
	--oyb-stage-glow: radial-gradient(85% 85% at 50% 50%, #f3f2fe 0%, #ecedfd 55%, #e1e4fa 100%); /* never pure white: white products (panels, lamps) must stand out */
	--oyb-stage-studio: linear-gradient(to top, #dfe2fa 0%, #e7e9fc 11%, #eeeefd 13.5%, #f1f0fe 55%, #f4f3fe 100%);
	--oyb-stage-empty: #b9b6d3;
}
html[data-oyb-theme="dark"] {
	--oyb-stage-tint: #262a44;
	--oyb-stage-glow: radial-gradient(85% 85% at 50% 50%, #3a3e63 0%, #2c2f4d 55%, #22243b 100%);
	--oyb-stage-studio: linear-gradient(to top, #16182a 0%, #1c1f34 11%, #262a44 13.5%, #2b2f4c 55%, #31355a 100%);
	--oyb-stage-empty: #5c5a7a;
}

.oyb-stage {
	position: relative;
	container-type: size;
	width: 100%;
	overflow: hidden;
	background: var(--oyb-stage-glow);
}
.oyb-stage.is-ratio { border-radius: var(--oyb-radius, 16px); }
.oyb-stage.is-fill { position: absolute; inset: 0; width: auto; }
.oyb-stage.is-bg-tint { background: var(--oyb-stage-tint); }
.oyb-stage.is-bg-studio { background: var(--oyb-stage-studio); }
.oyb-stage.is-bg-dark { --oyb-stage-empty: #5c5a7a; background: radial-gradient(80% 80% at 50% 50%, #3d3d66 0%, #2a2a45 70%); }
.oyb-stage.is-bg-none { background: none; }

.oyb-stage.oyb-stage img.oyb-stage__img {
	position: absolute;
	top: 9cqmin;
	left: 9cqmin;
	display: block;
	width: calc(100% - 18cqmin);
	height: calc(100% - 18cqmin);
	max-width: none;
	margin: 0;
	object-fit: contain;
	border: 0;
	box-shadow: none;
	/* Its own layer at all times, so a hover zoom never re-rasterizes it mid-way (that read as blur and a jump). */
	will-change: transform;
	backface-visibility: hidden;
	transform: translateZ(0);
}

/* A database photo (no cutout yet): edge to edge on the color it was shot on. */
.oyb-stage.is-photo { background: #eff1ff; }
.oyb-stage.is-photo.oyb-stage img.oyb-stage__img { top: 0; left: 0; width: 100%; height: 100%; }

/* No photo at all: the brand's initials, so the frame keeps its shape. */
.oyb-stage.is-empty { display: grid; place-items: center; }
.oyb-stage.is-empty span { font: 700 clamp(14px, 18cqmin, 34px)/1 var(--oyb-font-display, sans-serif); color: var(--oyb-stage-empty); }

/* The block: a figure with an optional caption. */
.oyb-stage-fig { margin: 1.6em 0; }
.oyb-stage-fig figcaption { margin-top: 8px; font-size: 14px; line-height: 1.45; text-align: center; color: var(--oyb-color-muted, #5a5a72); }