/* Hero product mock — pure-CSS Divi module preview (browser window + filter
   chips + tile grid) with soft floating accent orbs. Token-only. */

.dt-hero-mock {
	position: relative;
	width: 100%;
	max-width: 520px;
	margin-inline: auto;
	isolation: isolate;
}

@media (min-width: 1024px) {
	.dt-hero-mock { margin-right: 0; }
}

/* ---------- floating accent orbs ---------- */
.dt-hero-mock__orb {
	position: absolute;
	border-radius: var(--radius-pill);
	filter: blur(36px);
	opacity: 0.5;
	z-index: -1;
	pointer-events: none;
}

.dt-hero-mock__orb--a {
	width: 220px;
	height: 220px;
	top: -48px;
	right: -40px;
	background: radial-gradient(circle at 50% 50%,
		color-mix(in srgb, var(--dt-primary) 60%, transparent) 0%,
		transparent 70%);
}

.dt-hero-mock__orb--b {
	width: 200px;
	height: 200px;
	bottom: -56px;
	left: -48px;
	background: radial-gradient(circle at 50% 50%,
		color-mix(in srgb, var(--dt-primary) 32%, transparent) 0%,
		transparent 70%);
}

/* ---------- browser window ---------- */
.dt-hero-mock__window {
	position: relative;
	background: var(--dt-surface);
	border: var(--border-thin);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-popover);
	overflow: hidden;
}

.dt-hero-mock__chrome {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-4);
	background: var(--dt-bg-alt);
	border-bottom: var(--border-thin);
}

.dt-hero-mock__dots { display: inline-flex; gap: var(--space-2); }

.dt-hero-mock__dot {
	width: 10px;
	height: 10px;
	border-radius: var(--radius-pill);
	background: var(--dt-border-strong);
}

.dt-hero-mock__url {
	flex: 1;
	min-width: 0;
	padding: var(--space-1) var(--space-4);
	background: var(--dt-surface);
	border: var(--border-thin);
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	color: var(--dt-ink-faint);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- body: filters + tile grid ---------- */
.dt-hero-mock__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: var(--space-6);
}

.dt-hero-mock__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.dt-hero-mock__chip {
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-pill);
	background: var(--dt-bg-alt);
	border: var(--border-thin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	color: var(--dt-ink-soft);
}

.dt-hero-mock__chip.is-active {
	background: var(--dt-primary);
	border-color: var(--dt-primary);
	color: var(--dt-on-primary);
}

.dt-hero-mock__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
}

.dt-hero-mock__tile {
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-md);
	border: var(--border-thin);
}

.dt-hero-mock__tile--1 { background: var(--dt-primary-soft); }
.dt-hero-mock__tile--2 { background: var(--dt-bg-deep); }
.dt-hero-mock__tile--3 { background: var(--dt-primary); border-color: var(--dt-primary); }
.dt-hero-mock__tile--4 { background: var(--dt-bg-alt); }
.dt-hero-mock__tile--5 { background: var(--dt-border); }

@media (max-width: 480px) {
	.dt-hero-mock__body { padding: var(--space-4); }
	.dt-hero-mock__grid { gap: var(--space-2); }
}