/* ============================================================ BREADCRUMBS — extracted from functions.php breadcrumb echo (lines 3303-3319). Fully tokenised. RTL handled via [dir="rtl"] (the is set in header.php) so no inline direction. ============================================================ */ :root { --bc-bg: var(--color-breadcrumb-bg); --bc-current: var(--color-breadcrumb-current); --bc-text: var(--color-breadcrumb-text); --bc-link: var(--color-brand-primary); --bc-separator: var(--color-text-light, #999999); --bc-margin-bottom: 20px; --bc-pad-x: 15px; --bc-gap: 5px; --bc-font-size: 14px; --bc-sep-margin: var(--spacing-sm); /* 8px */ --bc-pad-y: var(--spacing-md); /* 12px */ --bc-container: var(--sheel-container, 1200px); } .sheel-breadcrumbs { background: var(--bc-bg); padding: var(--bc-pad-y) 0; margin-bottom: var(--bc-margin-bottom); } .sheel-breadcrumbs .container { max-width: var(--bc-container); margin: 0 auto; padding: 0 var(--bc-pad-x); } .sheel-breadcrumbs .breadcrumb-items { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: var(--bc-gap); flex-wrap: wrap; } .sheel-breadcrumbs .breadcrumb-items li { display: flex; align-items: center; font-size: var(--bc-font-size); color: var(--bc-text); } .sheel-breadcrumbs .breadcrumb-items li.is-current { color: var(--bc-current); font-weight: var(--font-weight-medium); } .sheel-breadcrumbs .breadcrumb-items li a { color: var(--bc-link); text-decoration: none; } .sheel-breadcrumbs .breadcrumb-items li .separator { margin: 0 var(--bc-sep-margin); color: var(--bc-separator); } [dir="rtl"] .sheel-breadcrumbs .breadcrumb-items { flex-direction: row-reverse; justify-content: flex-end; }