/**
 * Green Lion — breadcrumb row, site-wide (Sept 2026).
 *
 * Lifted out of gl-product-page.css after QA asked for the same crumb style
 * on every page (About Us, Contact, blog…), not only brand / category / shop.
 * Enqueued on every front-end page except the home page by
 * inc/gl-product-page.php, which also adds body.gl-crumbs — every selector
 * is prefixed with it so these rules beat XStore's own .page-heading styles
 * on specificity, not load order.
 *
 * Markup comes from templates/breadcrumbs.php: Home › Section › Current, where
 * the current crumb is an <h1> on brand / category / shop (the page heading)
 * and a <span class="gl-crumb-current"> everywhere else.
 */

body.gl-crumbs .page-heading {
	background: transparent !important;
	background-image: none !important;
	padding: 18px 0 0;
	margin: 0;
	border: 0;
}

body.gl-crumbs .page-heading .container {
	padding-left: 30px;
	padding-right: 30px;
}

body.gl-crumbs .page-heading .a-center,
body.gl-crumbs .page-heading .breadcrumbs {
	text-align: left;
}

body.gl-crumbs .page-heading .breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: var(--gl-ink-strong, #111827);
}

body.gl-crumbs .page-heading .breadcrumbs > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

body.gl-crumbs .page-heading .breadcrumbs a {
	color: var(--gl-ink-strong, #111827);
	font-weight: 500;
	text-decoration: none;
}

/* First crumb ("Home") is green, like the design. */
body.gl-crumbs .page-heading .breadcrumbs a:first-child {
	color: var(--gl-green, #00bf1f);
}

body.gl-crumbs .page-heading .breadcrumbs a:hover {
	color: var(--gl-green, #00bf1f);
}

body.gl-crumbs .page-heading .breadcrumbs .delimeter {
	display: inline-flex;
	align-items: center;
	margin: 0;
	color: var(--gl-ink-body, #374151);
	font-size: 10px;
	line-height: 1;
}

body.gl-crumbs .page-heading .breadcrumbs .delimeter i {
	font-size: 10px;
	line-height: 1;
}

/* Brand/category name: keeps its h1 for SEO, reads as the current crumb. */
body.gl-crumbs .page-heading .breadcrumbs h1.title {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--gl-ink-strong, #111827);
}

/* XStore's "back to previous page" link sits in the same band — keep it quiet. */
body.gl-crumbs .page-heading .back-to-previous {
	font-size: 13px;
	color: var(--gl-ink-muted, #6b7280);
}

/* Current crumb on ordinary pages (span, not h1). */
body.gl-crumbs .page-heading .breadcrumbs span.gl-crumb-current {
	display: inline;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: var(--gl-ink-strong, #111827);
}

/* XStore's .page-heading can carry a min-height / background image from the
   Customizer; the crumb row wants neither. */
body.gl-crumbs .page-heading,
body.gl-crumbs .page-heading .container,
body.gl-crumbs .page-heading .row,
body.gl-crumbs .page-heading .col-md-12 {
	min-height: 0;
}

@media screen and (max-width: 768px) {
	body.gl-crumbs .page-heading {
		padding-top: 10px;
	}

	body.gl-crumbs .page-heading .container {
		padding-left: 15px;
		padding-right: 15px;
	}
}