/* The homepage hero's decorative panel: a dark "space" card by default (and always on a phone,
   or for anyone who asked for less motion) — deliberately NOT tinted to the shop's own brand
   colour, so whatever hue the wireframe and its orbiting dots use always reads clearly against
   it, on any brand colour the admin picks. A small Three.js scene fades into it once the
   library has loaded, lazily, well after the page's own content is on screen; the starfield and
   corner glow below are plain CSS, so the panel already looks finished before any of that runs. */
.cb-hero3d {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(1.4px 1.4px at 20% 30%, rgba(255, 255, 255, 0.5), transparent),
		radial-gradient(1.4px 1.4px at 65% 15%, rgba(255, 255, 255, 0.4), transparent),
		radial-gradient(1px 1px at 82% 55%, rgba(255, 255, 255, 0.45), transparent),
		radial-gradient(1.2px 1.2px at 40% 75%, rgba(255, 255, 255, 0.35), transparent),
		radial-gradient(1px 1px at 12% 85%, rgba(255, 255, 255, 0.4), transparent),
		radial-gradient(1.4px 1.4px at 92% 85%, rgba(255, 255, 255, 0.3), transparent),
		radial-gradient(130% 160% at 78% 12%, rgba(56, 189, 248, 0.22), transparent 55%),
		radial-gradient(120% 140% at 12% 108%, rgba(167, 139, 250, 0.16), transparent 50%),
		linear-gradient(165deg, rgba(8, 11, 24, 0.97), rgba(15, 23, 42, 0.98)) !important;
	border-color: rgba(255, 255, 255, 0.14) !important;
}
.cb-hero3d canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	transition: opacity 1.1s ease;
}
.cb-hero3d.is-ready canvas { opacity: 1; }

/* The alternate "network background" hero style (Inspector -> Content -> Background style):
   the same dark, star-flecked, animated-network panel above, but spanning the whole hero
   section behind the text instead of sitting in a side box. */
.cb-hero-bg-network { position: relative; overflow: hidden; }
.cb-hero3d-full {
	position: absolute;
	inset: 0;
	border: 0;
	border-radius: 0;
	z-index: 0;
}
.cb-hero-bg-network .cb-hero-content { position: relative; z-index: 1; padding-top: 64px; padding-bottom: 64px; }

@media (max-width: 767px) {
	/* Same phone-width rule hero3d.js itself applies (no WebGL scene below 768px) — the plain
	   dark panel still looks deliberate as a static backdrop, so nothing is hidden here. */
	.cb-hero-bg-network .cb-hero-content { padding-top: 40px; padding-bottom: 40px; }
}