/*
 * DIRECT BARCODE — Supplies "Coming Soon" page.
 * On-brand with the handoff: dark backdrop with blue/green glows, the signature heavy-italic
 * uppercase display heading, green accent + pill eyebrow, and the same button treatments as the
 * Request a Quote hero. Scoped to body.supplies-page (loaded only on page-supplies.php).
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,600;0,700;0,800;0,900;1,900&display=swap");

body.supplies-page {
	background:
		radial-gradient(circle at 78% 16%, rgba(0, 158, 234, 0.14), transparent 28rem),
		radial-gradient(circle at 8% 70%, rgba(107, 209, 47, 0.08), transparent 26rem),
		#02070d;
	color: #fff;
}

.supplies-page .supplies-coming {
	display: flex;
	align-items: center;
	min-height: clamp(560px, 72vh, 820px);
	padding: clamp(64px, 9vw, 140px) 0;
	border-bottom: 1px solid rgba(0, 158, 234, 0.22);
}

.supplies-page .supplies-shell {
	width: min(1180px, 92vw);
	margin: 0 auto;
}

/* Pill eyebrow with a glowing dot */
.supplies-page .supplies-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 24px;
	padding: 9px 16px;
	border: 1px solid rgba(107, 209, 47, 0.5);
	border-radius: 999px;
	background: rgba(107, 209, 47, 0.08);
	color: #6bd12f;
	font-family: "Inter", Arial, sans-serif;
	font-size: clamp(12px, 0.9vw, 14px);
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.supplies-page .supplies-eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #6bd12f;
	box-shadow: 0 0 12px rgba(107, 209, 47, 0.85);
}

/* Signature heavy-italic display heading */
.supplies-page .supplies-title {
	margin: 0;
	max-width: 920px;
	font-family: "Inter", Arial, sans-serif;
	font-weight: 900;
	font-style: italic;
	letter-spacing: -0.065em;
	text-transform: uppercase;
	line-height: 0.91;
	font-size: clamp(54px, 7vw, 120px);
	color: #fff;
}
.supplies-page .supplies-title em {
	font-style: inherit;
	color: #6bd12f;
	text-shadow: 0 0 28px rgba(107, 209, 47, 0.42);
}

.supplies-page .supplies-text {
	max-width: 660px;
	margin: 26px 0 0;
	color: rgba(255, 255, 255, 0.84);
	font-size: clamp(16px, 1.1vw, 20px);
	line-height: 1.65;
}

/* Buttons (mirror the quote hero) */
.supplies-page .supplies-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 34px 0 0;
}
.supplies-page .supplies-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 54px;
	padding: 0 28px;
	border-radius: 8px;
	font-family: "Inter", Arial, sans-serif;
	font-weight: 900;
	font-size: 14px;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.supplies-page .supplies-btn-primary {
	color: #02070d;
	background: linear-gradient(135deg, #75e235, #55c91d);
	box-shadow: 0 0 26px rgba(107, 209, 47, 0.3);
}
.supplies-page .supplies-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 34px rgba(107, 209, 47, 0.46);
}
.supplies-page .supplies-btn-secondary {
	color: #fff;
	border: 1px solid rgba(0, 158, 234, 0.55);
	background: rgba(0, 158, 234, 0.08);
}
.supplies-page .supplies-btn-secondary:hover {
	border-color: #009eea;
	box-shadow: 0 0 22px rgba(0, 158, 234, 0.3);
}

/* "What's coming" category chips */
.supplies-page .supplies-teaser {
	margin: 50px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.supplies-page .supplies-teaser-label {
	display: block;
	margin: 0 0 16px;
	color: rgba(255, 255, 255, 0.54);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.supplies-page .supplies-teaser ul {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.supplies-page .supplies-teaser li {
	padding: 11px 18px;
	border: 1px solid rgba(0, 158, 234, 0.28);
	border-radius: 8px;
	background: rgba(3, 13, 24, 0.6);
	color: rgba(255, 255, 255, 0.86);
	font-size: 14px;
	font-weight: 700;
}