/* ================================================
   RED POINT — BREADCRUMBS
   ================================================
   The trail above the product main block, matching the Next.js reference
   (app/product/[slug]/page.js:48): max-w-shell, px-gutter, py-2, text-xs, body grey,
   with the current page in white and not a link.
   ================================================ */

.rp-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 8px 60px;
	box-sizing: border-box;
	font-family: 'Google Sans', sans-serif;
	font-size: 12px;
	line-height: 1.5;
	color: var(--rp-body, #E6E6E6);
}

.rp-crumbs__link {
	color: var(--rp-body, #E6E6E6);
	text-decoration: none;
}

.rp-crumbs__link:hover,
.rp-crumbs__link:focus-visible {
	color: #FFFFFF;
	text-decoration: underline;
}

.rp-crumbs__sep {
	color: var(--rp-muted, #818181);
}

/* The page you are on: white, and never a link. */
.rp-crumbs__current {
	color: #FFFFFF;
}

@media (max-width: 1024px) {
	.rp-crumbs {
		padding: 8px 20px;
	}
}