/*
 * Design fix 2026-09-28 (v2) — loaded LAST so it can consolidate earlier layers
 * without editing components.css (shared with other work).
 */

/* === Step 11: buttons consolidated to 3 variants ===
 * 1. Solid   — .glowlab-btn--primary / --dark        (green; cream on green surfaces)
 * 2. Light   — .glowlab-btn--cream / --inverse       (cream; for dark/photo surfaces)
 * 3. Outline — .glowlab-btn--outline / --secondary / --ghost (transparent, currentColor border)
 */
.glowlab-btn {
	border-width: 1px;
	border-style: solid;
	font-weight: 700;
	letter-spacing: .01em;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.glowlab-btn--primary,
.glowlab-btn--dark,
.glowlab-block--home_lash_band .glowlab-btn--dark {
	background: var(--gl-color-green);
	color: var(--gl-color-white);
	border-color: var(--gl-color-green);
}
.glowlab-btn--primary:hover,
.glowlab-btn--primary:focus-visible,
.glowlab-btn--dark:hover,
.glowlab-btn--dark:focus-visible {
	background: #0a2b24;
	color: var(--gl-color-white);
	border-color: #0a2b24;
}
.glowlab-btn--cream,
.glowlab-btn--inverse {
	background: var(--gl-color-cream);
	color: var(--gl-color-green);
	border-color: var(--gl-color-cream);
}
.glowlab-btn--cream:hover,
.glowlab-btn--cream:focus-visible,
.glowlab-btn--inverse:hover,
.glowlab-btn--inverse:focus-visible {
	background: var(--gl-color-white);
	color: var(--gl-color-green);
	border-color: var(--gl-color-white);
}
.glowlab-btn--outline,
.glowlab-btn--secondary,
.glowlab-btn--ghost {
	background: transparent;
	color: var(--gl-color-green);
	border-color: currentColor;
}
.glowlab-btn--outline:hover,
.glowlab-btn--outline:focus-visible,
.glowlab-btn--secondary:hover,
.glowlab-btn--secondary:focus-visible,
.glowlab-btn--ghost:hover,
.glowlab-btn--ghost:focus-visible {
	background: var(--gl-color-green);
	color: var(--gl-color-cream);
	border-color: var(--gl-color-green);
}
/* Green / dark surfaces: solid flips to cream, outline flips to cream. */
.glowlab-block--bg-green .glowlab-btn--primary,
.glowlab-block--bg-green .glowlab-btn--dark,
.glowlab-home-prices__col--featured .glowlab-btn--dark,
.glowlab-eq__cta-band .glowlab-btn--primary,
.glowlab-footer .glowlab-btn--primary {
	background: var(--gl-color-cream);
	color: var(--gl-color-green);
	border-color: var(--gl-color-cream);
}
.glowlab-block--bg-green .glowlab-btn--outline,
.glowlab-block--bg-green .glowlab-btn--secondary,
.glowlab-block--bg-green .glowlab-btn--ghost,
.glowlab-hero .glowlab-btn--ghost,
.glowlab-hero .glowlab-btn--outline {
	color: var(--gl-color-cream);
	border-color: var(--gl-color-cream);
}
.glowlab-block--bg-green .glowlab-btn--outline:hover,
.glowlab-block--bg-green .glowlab-btn--secondary:hover,
.glowlab-block--bg-green .glowlab-btn--ghost:hover,
.glowlab-hero .glowlab-btn--ghost:hover,
.glowlab-hero .glowlab-btn--outline:hover {
	background: var(--gl-color-cream);
	color: var(--gl-color-green);
}
/* Photo overlay cards: the black "Book now" pill was the only pure black in the palette. */
body .glowlab-card-item--overlay .glowlab-card-item__actions .glowlab-btn--dark,
body .glowlab-block--bg-green .glowlab-card-item--overlay .glowlab-card-item__actions .glowlab-btn--dark {
	background: var(--gl-color-green) !important;
	color: var(--gl-color-white) !important;
	border: 1px solid var(--gl-color-green) !important;
}
body .glowlab-card-item--overlay .glowlab-card-item__actions .glowlab-btn--dark:hover,
body .glowlab-block--bg-green .glowlab-card-item--overlay .glowlab-card-item__actions .glowlab-btn--dark:hover {
	background: #0a2b24 !important;
	border-color: #0a2b24 !important;
}

/* === Step 9 follow-up: equipment side-panel H2s follow the inner H2 scale on mobile === */
@media (max-width: 640px) {
	.glowlab-eq__panel-title,
	.glowlab-eq__used-title {
		font-size: var(--gl-fs-h2-inner-m, 1.375rem);
	}
}

/* Copy 2026-09-29: tables in approved category copy. */
.glowlab-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 0.5rem 0 1.5rem;
	font-size: 0.95em;
}
.glowlab-prose th,
.glowlab-prose td {
	text-align: left;
	vertical-align: top;
	padding: 0.65rem 0.75rem;
	border-bottom: 1px solid rgba(10, 43, 36, 0.12);
}
.glowlab-prose thead th {
	font-weight: 600;
}
@media (max-width: 700px) {
	.glowlab-archive__sections {
		overflow-x: auto;
	}
}