/* ==========================================================================
   DSS Unified Breadcrumb  —  assets/standalone/dss-breadcrumb.css
   --------------------------------------------------------------------------
   Self-contained, conflict-proof breadcrumb styling.

   ISOLATION STRATEGY (matches the rest of the DSS theme):
     • every selector prefixed with `html body .dss-breadcrumb…`
     • every declaration !important
     • design tokens live on the component wrapper, never on :root
   …so global / WooCommerce / plugin CSS can neither override these styles
   nor be affected by them.

   Loaded conditionally (only on pages where the breadcrumb is shown) from
   inc/dss-breadcrumbs.php via wp_enqueue_style() with filemtime() busting.

   Reference design:
     [  ( ⌂ Home )  ›  Shop  ]   inside a soft, rounded, bordered bar.
   ========================================================================== */

html body .dss-breadcrumb {
	--dssbc-bar-bg:       #fbfbfc;
	--dssbc-bar-border:   #ececf0;
	--dssbc-radius:       12px;
	--dssbc-pill-bg:      #ffffff;
	--dssbc-pill-border:  #e7e8ec;
	--dssbc-ink:          #111827;
	--dssbc-ink-strong:   #0f172a;
	--dssbc-ink-muted:    #6b7280;
	--dssbc-chevron:      #b8bcc4;
	--dssbc-shadow:       0 1px 2px rgba(16, 24, 40, .06);
	--dssbc-shadow-hover: 0 2px 6px rgba(16, 24, 40, .10);

	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
 
    max-width: 90% !important;
    margin: 12px auto !important;
   padding: 0  !important;
}

html body .dss-breadcrumb *,
html body .dss-breadcrumb *::before,
html body .dss-breadcrumb *::after {
	box-sizing: border-box !important;
}

/* ── The soft bordered bar ─────────────────────────────────────────────── */
html body .dss-breadcrumb__list {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 14px 20px !important;
	list-style: none !important;
	background: var(--dssbc-bar-bg) !important;
	border: 1px solid var(--dssbc-bar-border) !important;
	border-radius: var(--dssbc-radius) !important;
	font-size: 14px !important;
	line-height: 1 !important;
	color: var(--dssbc-ink-muted) !important;
	font-family: inherit !important;
}

html body .dss-breadcrumb__item {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

/* ── Chevron separator before every item except the first ──────────────── */
html body .dss-breadcrumb__item + .dss-breadcrumb__item::before {
	content: "\203A" !important; /* › */
	color: var(--dssbc-chevron) !important;
	font-size: 16px !important;
	line-height: 1 !important;
	font-weight: 400 !important;
	margin: 0 2px !important;
	pointer-events: none !important;
}

/* ── Home pill (first crumb) ───────────────────────────────────────────── */
html body .dss-breadcrumb__home {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	padding: 7px 13px !important;
	background: var(--dssbc-pill-bg) !important;
	border: 1px solid var(--dssbc-pill-border) !important;
	border-radius: 9px !important;
	box-shadow: var(--dssbc-shadow) !important;
	color: var(--dssbc-ink) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	transition: box-shadow .15s ease, transform .15s ease !important;
}

html body .dss-breadcrumb__home:hover,
html body .dss-breadcrumb__home:focus-visible {
	box-shadow: var(--dssbc-shadow-hover) !important;
	transform: translateY(-1px) !important;
	color: var(--dssbc-ink-strong) !important;
	outline: none !important;
}

html body .dss-breadcrumb__home-icon {
	width: 15px !important;
	height: 15px !important;
	flex: 0 0 auto !important;
	display: block !important;
	color: currentColor !important;
}

html body .dss-breadcrumb__home-label {
	display: inline-block !important;
	line-height: 1 !important;
}

/* ── Intermediate links ────────────────────────────────────────────────── */
html body .dss-breadcrumb__link {
	color: var(--dssbc-ink-muted) !important;
	text-decoration: none !important;
	font-weight: 500 !important;
	white-space: nowrap !important;
	transition: color .15s ease !important;
}

html body .dss-breadcrumb__link:hover,
html body .dss-breadcrumb__link:focus-visible {
	color: var(--dssbc-ink-strong) !important;
	outline: none !important;
}

/* ── Current page (last crumb) ─────────────────────────────────────────── */
html body .dss-breadcrumb__current {
	color: var(--dssbc-ink-strong) !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
}

/* ==========================================================================
   MOBILE  (responsive, no JS)
   --------------------------------------------------------------------------
   A breadcrumb is a single trail of inline chips, so the correct, reliable
   mobile treatment is a one-row horizontal scroll (native-app feel, hidden
   scrollbar) rather than awkward wrapping or JS-injected chrome. Desktop
   layout above is untouched; this only refines small screens.
   ========================================================================== */
@media (max-width: 768px) {
	html body .dss-breadcrumb {
		margin: 2.4em auto 4px auto !important;
		padding: 0 12px !important;
	}

	html body .dss-breadcrumb__list {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
		padding: 0px !important;
		border-radius: 10px !important;
		font-size: 13px !important;
	}

	html body .dss-breadcrumb__list::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
	}

	html body .dss-breadcrumb__item {
		flex: 0 0 auto !important;
		        font-size: 0.7rem;
	}

	html body .dss-breadcrumb__home {
		padding: 6px 11px !important;
	}
}