/**
 * Stack Breadcrumbs — Frontend Styles
 * 25 layout styles, clear borders on all.
 */

/* ── Variables ─────────────────────────────────────────────── */
.stkb-wrap {
	--stkb-border:         #dde1e7;
	--stkb-color:          #4a5568;
	--stkb-color-hover:    #4f46e5;
	--stkb-color-current:  #1a202c;
	--stkb-sep-color:      #a0aec0;
	--stkb-accent:         #4f46e5;
	--stkb-accent-light:   #eef2ff;
	--stkb-item-bg:        #f8fafc;
	--stkb-item-bg-hover:  #eef2ff;
	--stkb-radius:         6px;
}

/* ── Base Reset ─────────────────────────────────────────────── */
.stkb-wrap,
.stkb-wrap * {
	box-sizing: border-box;
}

.stkb-wrap {
	display: flex;
	align-items: center;
	width: 100%;
}

.stkb-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	list-style: none;
	margin:  0;
	padding: 0;
	gap: 0;
}

.stkb-item {
	display: flex;
	align-items: center;
}

.stkb-link {
	display:         inline-flex;
	align-items:     center;
	gap:             5px;
	color:           var(--stkb-color);
	text-decoration: none;
	transition:      color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, text-decoration-color 0.2s ease;
	white-space:     nowrap;
	outline:         none;
}

/* Accessible focus styles */
.stkb-link:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--stkb-accent) 30%, white 70%);
	border-radius: 4px;
}

a.stkb-link:hover {
	color: var(--stkb-color-hover);
}

.stkb-current .stkb-link {
	color:          var(--stkb-color-current);
	font-weight:    600;
	pointer-events: none;
	cursor:         default;
}

.stkb-sep {
	color:   var(--stkb-sep-color);
	margin:  0 8px;
	line-height: 1;
	flex-shrink: 0;
}

.stkb-icon {
	display:     inline-flex;
	align-items: center;
	font-size:   0.9em;
	line-height: 1;
}

.stkb-icon svg,
.stkb-icon i {
	display: block;
}

.stkb-number {
	display:     inline-flex;
	align-items: center;
	font-size:   0.7em;
	font-weight: 700;
	opacity:     0.45;
	margin-right: 6px;
	flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   STYLE 1 — Classic
   Simple text with › separator and a full border around wrap
════════════════════════════════════════════════════════════ */
.stkb-classic {
	border:        1px solid var(--stkb-border);
	border-radius: var(--stkb-radius);
	padding:       10px 16px;
}

.stkb-classic .stkb-sep {
	font-size: 1.1em;
	margin:    0 8px;
	color:     var(--stkb-sep-color);
}

.stkb-classic .stkb-current .stkb-link {
	color: var(--stkb-color-current);
}

/* ════════════════════════════════════════════════════════════
   STYLE 2 — Stacked Context
   Was a separator swap, and the separator character is already a control. The
   trail is now two lines: a small muted ancestor row above, and the current
   page set as the page heading below it.
════════════════════════════════════════════════════════════ */
.stkb-slash .stkb-list {
	flex-wrap: wrap;
	align-items: baseline;
	row-gap: 4px;
}
.stkb-slash .stkb-item {
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--stkb-sep-color);
}
.stkb-slash .stkb-item.stkb-current {
	flex: 1 0 100%;
	font-size: 1.7em;
	font-weight: 700;
	letter-spacing: -0.015em;
	text-transform: none;
	line-height: 1.2;
	margin-top: 2px;
}
.stkb-slash .stkb-current .stkb-link {
	color: var(--stkb-color-current);
}
.stkb-slash .stkb-sep {
	margin: 0 8px;
	opacity: 0.6;
}
.stkb-slash .stkb-item:nth-last-child(2) .stkb-sep {
	display: none;
}
.stkb-slash a.stkb-link:hover {
	color: var(--stkb-accent);
}

/* ════════════════════════════════════════════════════════════
   STYLE 3 — Progress Track
   Was another separator swap. The crumbs now sit on a track whose connector
   segments fill up to the current step, the way a checkout progress bar reads.
════════════════════════════════════════════════════════════ */
.stkb-arrow {
	padding: 10px 0;
}
.stkb-arrow .stkb-list {
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
}
.stkb-arrow .stkb-item {
	display: flex;
	align-items: center;
	min-width: 0;
}
.stkb-arrow .stkb-item:not(.stkb-current) {
	flex: 1 1 auto;
}
.stkb-arrow .stkb-link {
	position: relative;
	z-index: 1;
	padding: 6px 14px;
	background: #fff;
	border: 2px solid var(--stkb-accent);
	border-radius: 999px;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--stkb-accent);
	white-space: nowrap;
}
.stkb-arrow .stkb-current .stkb-link {
	background: var(--stkb-accent);
	border-color: var(--stkb-accent);
	color: #fff;
}
.stkb-arrow .stkb-sep {
	flex: 1 1 auto;
	min-width: 18px;
	height: 3px;
	border-radius: 3px;
	background: var(--stkb-accent);
	margin: 0 6px;
	font-size: 0;
	color: transparent;
	overflow: hidden;
}
.stkb-arrow .stkb-current ~ .stkb-item .stkb-link {
	border-color: var(--stkb-border);
	color: var(--stkb-sep-color);
}
.stkb-arrow .stkb-current ~ .stkb-item .stkb-sep,
.stkb-arrow .stkb-current .stkb-sep {
	background: var(--stkb-border);
}
.stkb-arrow a.stkb-link:hover {
	background: var(--stkb-accent-light);
}

/* ════════════════════════════════════════════════════════════
   STYLE 4 — Chevron Boxes
   Each item in a bordered box, chevron-shaped right edge
════════════════════════════════════════════════════════════ */
.stkb-chevron-box .stkb-list {
	gap: 2px;
}

.stkb-chevron-box .stkb-item {
	position: relative;
}

.stkb-chevron-box .stkb-link {
	border:        1px solid var(--stkb-border);
	border-radius: 4px;
	padding:       6px 14px;
	background:    var(--stkb-item-bg);
}

.stkb-chevron-box a.stkb-link:hover {
	background:   var(--stkb-item-bg-hover);
	border-color: var(--stkb-accent);
	color:        var(--stkb-accent);
}

.stkb-chevron-box .stkb-current .stkb-link {
	background:   var(--stkb-accent-light);
	border-color: var(--stkb-accent);
	color:        var(--stkb-accent);
}

.stkb-chevron-box .stkb-sep {
	color:   var(--stkb-accent);
	margin:  0 2px;
	font-size: 0.85em;
}

/* ════════════════════════════════════════════════════════════
   STYLE 5 — Pill
   Rounded pill badges per item
════════════════════════════════════════════════════════════ */
.stkb-pill .stkb-list {
	gap: 4px;
}

.stkb-pill .stkb-link {
	border:        1px solid var(--stkb-border);
	border-radius: 999px;
	padding:       5px 14px;
	font-size:     0.875em;
	background:    #fff;
}

.stkb-pill a.stkb-link:hover {
	background:   var(--stkb-item-bg-hover);
	border-color: var(--stkb-accent);
	color:        var(--stkb-accent);
}

.stkb-pill .stkb-current .stkb-link {
	background:   var(--stkb-accent);
	border-color: var(--stkb-accent);
	color:        #fff;
}

.stkb-pill .stkb-sep {
	margin:    0 2px;
	font-size: 0.8em;
}

/* ════════════════════════════════════════════════════════════
   STYLE 06 — Overlapping Chips
   Was a second boxed-chip row. The chips now overlap along a single line,
   each ringed in the page background, with the current page pulled forward.
════════════════════════════════════════════════════════════ */
.stkb-boxed .stkb-list {
	gap: 0;
	padding-left: 4px;
}
.stkb-boxed .stkb-item + .stkb-item {
	margin-left: -14px;
}
.stkb-boxed .stkb-link {
	position: relative;
	z-index: 1;
	min-height: 40px;
	padding: 0 18px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 0 0 4px #fff, inset 0 0 0 1px var(--stkb-border);
}
.stkb-boxed .stkb-item:nth-child(2) .stkb-link { z-index: 2; }
.stkb-boxed .stkb-item:nth-child(3) .stkb-link { z-index: 3; }
.stkb-boxed .stkb-item:nth-child(4) .stkb-link { z-index: 4; }
.stkb-boxed .stkb-item:nth-child(5) .stkb-link { z-index: 5; }
.stkb-boxed .stkb-item:nth-child(6) .stkb-link { z-index: 6; }
.stkb-boxed .stkb-current .stkb-link {
	z-index: 9;
	background: var(--stkb-accent);
	color: #fff;
	box-shadow: 0 0 0 4px #fff, 0 1px 2px rgba(16,24,40,.06), 0 8px 24px -8px rgba(16,24,40,.28);
}
.stkb-boxed a.stkb-link:hover {
	color: var(--stkb-accent);
	box-shadow: 0 0 0 4px #fff, inset 0 0 0 1px var(--stkb-accent);
}
.stkb-boxed .stkb-sep {
	display: none;
}

/* ════════════════════════════════════════════════════════════
   STYLE 7 — Arrow Shapes
   Classic CSS breadcrumb arrow (overlapping rotated squares)
════════════════════════════════════════════════════════════ */
.stkb-arrow-shape .stkb-list {
	gap: 0;
}

.stkb-arrow-shape .stkb-item {
	position: relative;
	z-index:  1;
}

.stkb-arrow-shape .stkb-item + .stkb-item {
	z-index: 0;
}

.stkb-arrow-shape .stkb-link {
	position:      relative;
	background:    #f0f4f8;
	border:        1px solid var(--stkb-border);
	padding:       8px 14px 8px 26px;
	border-radius: 0;
	color:         var(--stkb-color);
}

.stkb-arrow-shape .stkb-item:first-child .stkb-link {
	padding-left:        14px;
	border-radius:       4px 0 0 4px;
}

/* Arrow via rotated square on the right */
.stkb-arrow-shape .stkb-item:not(:last-child) .stkb-link::after {
	content:       '';
	position:      absolute;
	right:         -9px;
	top:           50%;
	transform:     translateY(-50%) rotate(45deg);
	width:         16px;
	height:        16px;
	background:    #f0f4f8;
	border-top:    1px solid var(--stkb-border);
	border-right:  1px solid var(--stkb-border);
	z-index:       2;
}

.stkb-arrow-shape .stkb-item:last-child .stkb-link {
	border-radius: 0 4px 4px 0;
}

.stkb-arrow-shape a.stkb-link:hover,
.stkb-arrow-shape a.stkb-link:hover::after {
	background: var(--stkb-item-bg-hover);
	color:      var(--stkb-accent);
}

.stkb-arrow-shape .stkb-current .stkb-link,
.stkb-arrow-shape .stkb-current .stkb-link::after {
	background:   var(--stkb-accent);
	border-color: var(--stkb-accent);
	color:        #fff;
}

.stkb-arrow-shape .stkb-sep {
	display: none;
}

/* ════════════════════════════════════════════════════════════
   STYLE 8 — Material
   Bottom border line per item, underline on hover
════════════════════════════════════════════════════════════ */
.stkb-material .stkb-list {
	gap: 0;
}

.stkb-material .stkb-item {
	border-bottom: 2px solid var(--stkb-border);
}

.stkb-material .stkb-link {
	padding:         8px 12px;
	border-bottom:   2px solid transparent;
	margin-bottom:  -2px;
}

.stkb-material a.stkb-link:hover {
	border-bottom-color: var(--stkb-accent);
	color:               var(--stkb-accent);
}

.stkb-material .stkb-current .stkb-link {
	border-bottom-color: var(--stkb-color-current);
	color:               var(--stkb-color-current);
}

.stkb-material .stkb-sep {
	color:   var(--stkb-sep-color);
	margin:  0 2px;
}

/* ════════════════════════════════════════════════════════════
   STYLE 9 — Dark
   Dark background with light text and border
════════════════════════════════════════════════════════════ */
.stkb-dark {
	background:    #1a202c;
	border:        1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--stkb-radius);
	padding:       10px 16px;
}

.stkb-dark .stkb-link {
	color: rgba(255, 255, 255, 0.7);
}

.stkb-dark a.stkb-link:hover {
	color: #fff;
}

.stkb-dark .stkb-current .stkb-link {
	color: #fff;
}

.stkb-dark .stkb-sep {
	color: rgba(255, 255, 255, 0.3);
}

/* ════════════════════════════════════════════════════════════
   STYLE 10 — Neon
   Dark bg, neon colored items with glowing border
════════════════════════════════════════════════════════════ */
.stkb-neon {
	background:    #0f0f1a;
	border:        1px solid #00e5ff;
	border-radius: var(--stkb-radius);
	padding:       10px 16px;
}

.stkb-neon .stkb-link {
	border:        1px solid rgba(0, 229, 255, 0.3);
	border-radius: 4px;
	padding:       5px 12px;
	color:         rgba(0, 229, 255, 0.75);
	background:    rgba(0, 229, 255, 0.05);
}

.stkb-neon a.stkb-link:hover {
	border-color: #00e5ff;
	color:        #00e5ff;
	background:   rgba(0, 229, 255, 0.12);
	box-shadow:   0 0 8px rgba(0, 229, 255, 0.4);
}

.stkb-neon .stkb-current .stkb-link {
	border-color: #00e5ff;
	color:        #00e5ff;
	background:   rgba(0, 229, 255, 0.15);
	box-shadow:   0 0 12px rgba(0, 229, 255, 0.5);
}

.stkb-neon .stkb-sep {
	color:  rgba(0, 229, 255, 0.4);
	margin: 0 6px;
}

/* ════════════════════════════════════════════════════════════
   STYLE 11 — Gradient Strip
   Full-width gradient background with border
════════════════════════════════════════════════════════════ */
.stkb-gradient-strip {
	background:    linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border:        1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--stkb-radius);
	padding:       12px 20px;
}

.stkb-gradient-strip .stkb-link {
	color: rgba(255, 255, 255, 0.85);
}

.stkb-gradient-strip a.stkb-link:hover {
	color: #fff;
}

.stkb-gradient-strip .stkb-current .stkb-link {
	color:       #fff;
	font-weight: 700;
}

.stkb-gradient-strip .stkb-sep {
	color: rgba(255, 255, 255, 0.5);
}

/* ════════════════════════════════════════════════════════════
   STYLE 12 — Equal Columns
   Was a third boxed row that differed only by the current item's border. The
   trail now fills the full width as equal columns divided by hairlines, the
   way a wide page header bar reads.
════════════════════════════════════════════════════════════ */
.stkb-outlined {
	border-top: 1px solid var(--stkb-border);
	border-bottom: 1px solid var(--stkb-border);
}
.stkb-outlined .stkb-list {
	width: 100%;
	flex-wrap: nowrap;
	gap: 0;
}
.stkb-outlined .stkb-item {
	flex: 1 1 0;
	min-width: 0;
	justify-content: center;
}
.stkb-outlined .stkb-item + .stkb-item {
	border-left: 1px solid var(--stkb-border);
}
.stkb-outlined .stkb-link {
	width: 100%;
	justify-content: center;
	min-height: 48px;
	padding: 0 12px;
	font-size: 0.92em;
	overflow: hidden;
}
.stkb-outlined .stkb-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.stkb-outlined a.stkb-link:hover {
	background: var(--stkb-item-bg);
	color: var(--stkb-accent);
}
.stkb-outlined .stkb-current .stkb-link {
	background: var(--stkb-accent-light);
	color: var(--stkb-accent);
	box-shadow: inset 0 -2px 0 var(--stkb-accent);
}
.stkb-outlined .stkb-sep {
	display: none;
}

/* ════════════════════════════════════════════════════════════
   STYLE 13 — Tab Strip
   Was a third rounded-pill row. The crumbs now sit as tabs along a baseline
   rule, and the current page lifts out of the rule the way an active tab does.
════════════════════════════════════════════════════════════ */
.stkb-soft {
	position: relative;
	padding-bottom: 0;
}
.stkb-soft .stkb-list {
	gap: 2px;
	align-items: flex-end;
	border-bottom: 1px solid var(--stkb-border);
}
.stkb-soft .stkb-link {
	position: relative;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: 8px 8px 0 0;
	background: transparent;
}
.stkb-soft a.stkb-link:hover {
	background: var(--stkb-item-bg);
	color: var(--stkb-accent);
}
.stkb-soft .stkb-current .stkb-link {
	margin-bottom: -1px;
	padding-bottom: 1px;
	border-color: var(--stkb-border);
	background: #fff;
	color: var(--stkb-color-current);
	box-shadow: inset 0 2px 0 var(--stkb-accent);
}
.stkb-soft .stkb-sep {
	display: none;
}

/* ════════════════════════════════════════════════════════════
   STYLE 14 — Step
   Numbered step indicators with bordered circles
════════════════════════════════════════════════════════════ */
.stkb-step .stkb-list {
	gap: 0;
}

.stkb-step .stkb-item {
	border-top:    2px solid var(--stkb-border);
	border-bottom: 2px solid var(--stkb-border);
	border-left:   2px solid var(--stkb-border);
}

.stkb-step .stkb-item:last-child {
	border-right: 2px solid var(--stkb-border);
}

.stkb-step .stkb-link {
	padding: 8px 14px;
}

.stkb-step .stkb-number {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           24px;
	height:          24px;
	border-radius:   50%;
	border:          2px solid var(--stkb-border);
	font-size:       0.7em;
	font-weight:     700;
	color:           var(--stkb-sep-color);
	margin-right:    8px;
	opacity:         1;
	flex-shrink:     0;
	background:      #fff;
}

.stkb-step a.stkb-link:hover {
	background: var(--stkb-item-bg-hover);
	color:      var(--stkb-accent);
}

.stkb-step .stkb-current {
	border-color: var(--stkb-accent);
	background:   var(--stkb-accent-light);
}

.stkb-step .stkb-current .stkb-link {
	color: var(--stkb-accent);
}

.stkb-step .stkb-current .stkb-number {
	border-color: var(--stkb-accent);
	color:        var(--stkb-accent);
}

.stkb-step .stkb-sep {
	display: none;
}

/* ════════════════════════════════════════════════════════════
   STYLE 15 — Modern
   Minimal, accent bottom-border on hover/active
════════════════════════════════════════════════════════════ */
.stkb-modern {
	border-bottom: 1px solid var(--stkb-border);
	padding-bottom: 2px;
}

.stkb-modern .stkb-link {
	padding:        6px 10px;
	border-bottom:  2px solid transparent;
	margin-bottom: -1px;
	font-size:      0.9em;
	letter-spacing: 0.02em;
}

.stkb-modern a.stkb-link:hover {
	border-bottom-color: var(--stkb-accent);
	color:               var(--stkb-accent);
}

.stkb-modern .stkb-current .stkb-link {
	border-bottom-color: var(--stkb-color-current);
	color:               var(--stkb-color-current);
}

.stkb-modern .stkb-sep {
	color:     var(--stkb-sep-color);
	font-size: 0.8em;
	margin:    0 4px;
}

/* ════════════════════════════════════════════════════════════
   STYLE 16 — Colorful
   Alternating background colors per item, subtle borders
════════════════════════════════════════════════════════════ */
.stkb-colorful .stkb-list {
	gap: 4px;
}

.stkb-colorful .stkb-link {
	border:        1px solid rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	padding:       5px 14px;
}

.stkb-colorful .stkb-item:nth-child(6n+1) .stkb-link  { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
.stkb-colorful .stkb-item:nth-child(6n+2) .stkb-sep   { color: #a0aec0; }
.stkb-colorful .stkb-item:nth-child(6n+3) .stkb-link  { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.stkb-colorful .stkb-item:nth-child(6n+5) .stkb-link  { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.stkb-colorful .stkb-item:nth-child(6n+7) .stkb-link  { background: #fce7f3; color: #9d174d; border-color: #fbcfe8; }
.stkb-colorful .stkb-item:nth-child(6n+9) .stkb-link  { background: #f3e8ff; color: #6b21a8; border-color: #e9d5ff; }

.stkb-colorful .stkb-current .stkb-link {
	background:   #1a202c;
	border-color: #1a202c;
	color:        #fff;
}

.stkb-colorful .stkb-sep {
	margin: 0 4px;
}

/* ════════════════════════════════════════════════════════════
   STYLE 17 — Path Chip
   Was a heavier border around the same plain row. The whole trail now reads as
   one monospaced path chip, tight and technical, for docs and app headers.
════════════════════════════════════════════════════════════ */
.stkb-bold .stkb-list {
	gap: 0;
	padding: 6px 12px;
	border: 1px solid var(--stkb-border);
	border-radius: 8px;
	background: var(--stkb-item-bg);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85em;
}
.stkb-bold .stkb-link {
	padding: 2px 4px;
	border-radius: 4px;
	letter-spacing: -0.01em;
}
.stkb-bold a.stkb-link:hover {
	background: #fff;
	color: var(--stkb-accent);
	box-shadow: inset 0 0 0 1px var(--stkb-border);
}
.stkb-bold .stkb-current .stkb-link {
	color: var(--stkb-accent);
	font-weight: 700;
}
.stkb-bold .stkb-sep {
	margin: 0 2px;
	opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════
   STYLE 18 — Title Over Trail
   Was another rounded-chip row. The current page now leads as the page title
   and the ancestors follow underneath it as a quiet supporting line.
════════════════════════════════════════════════════════════ */
.stkb-card .stkb-list {
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0;
	row-gap: 6px;
}
.stkb-card .stkb-item {
	font-size: 0.85em;
	color: var(--stkb-color);
}
.stkb-card .stkb-item.stkb-current {
	order: -1;
	flex: 1 0 100%;
	font-size: 1.6em;
	line-height: 1.2;
}
.stkb-card .stkb-current .stkb-link {
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--stkb-color-current);
}
.stkb-card .stkb-current .stkb-sep,
.stkb-card .stkb-item:nth-last-child(2) .stkb-sep {
	display: none;
}
.stkb-card .stkb-sep {
	margin: 0 8px;
}
.stkb-card a.stkb-link:hover {
	color: var(--stkb-accent);
}

/* ════════════════════════════════════════════════════════════
   STYLE 19 — Minimal
   Very clean, items have a fine underline on hover/current
════════════════════════════════════════════════════════════ */
.stkb-minimal {
	border-left: 3px solid var(--stkb-border);
	padding-left: 12px;
}

.stkb-minimal .stkb-link {
	font-size:  0.875em;
	color:      #718096;
}

.stkb-minimal a.stkb-link:hover {
	color:           var(--stkb-accent);
	text-decoration: underline;
}

.stkb-minimal .stkb-current .stkb-link {
	color:       var(--stkb-color-current);
	font-weight: 600;
}

.stkb-minimal .stkb-sep {
	color:     #cbd5e0;
	font-size: 0.8em;
	margin:    0 6px;
}

/* ════════════════════════════════════════════════════════════
   STYLE 20 — Tag
   Items styled as hashtag labels with left-triangle notch
════════════════════════════════════════════════════════════ */
.stkb-tag .stkb-list {
	gap: 6px;
}

.stkb-tag .stkb-item {
	position: relative;
}

/* The notch is an absolute box anchored to the link, and the link now
   establishes its own containing block and reserves left padding for it.
   It used to be anchored to .stkb-item while .stkb-link was static, so the
   notch landed on top of the label and clipped its first character. */
.stkb-tag .stkb-link {
	position:      relative;
	z-index:       1;
	border:        1px solid var(--stkb-border);
	border-radius: 0 4px 4px 0;
	padding:       5px 14px 5px 26px;
	background:    var(--stkb-item-bg);
	font-size:     0.875em;
}

.stkb-tag .stkb-link::before {
	content:      '';
	position:     absolute;
	left:         -1px;
	top:          50%;
	z-index:      -1;
	transform:    translateY(-50%);
	border:       13px solid transparent;
	border-right: 10px solid var(--stkb-border);
}

.stkb-tag a.stkb-link:hover {
	background:   var(--stkb-item-bg-hover);
	border-color: var(--stkb-accent);
	color:        var(--stkb-accent);
}

.stkb-tag a.stkb-link:hover::before {
	border-right-color: var(--stkb-accent);
}

.stkb-tag .stkb-current .stkb-link {
	background:   var(--stkb-accent);
	border-color: var(--stkb-accent);
	color:        #fff;
}

.stkb-tag .stkb-current .stkb-link::before {
	border-right-color: var(--stkb-accent);
}

.stkb-tag .stkb-sep {
	display: none;
}

/* ════════════════════════════════════════════════════════════
   STYLE 21 — Back and Trail
   Was a dot separator, and the separator character is already a control. The
   parent now gets a real back control on the left, divided from a quiet trail
   on the right — the pattern a phone actually needs.
════════════════════════════════════════════════════════════ */
.stkb-dot .stkb-list {
	align-items: stretch;
	gap: 0;
}
.stkb-dot .stkb-item {
	display: flex;
	align-items: center;
	font-size: 0.85em;
	color: var(--stkb-sep-color);
}
.stkb-dot .stkb-item.stkb-first {
	font-size: 1em;
}
.stkb-dot .stkb-first .stkb-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px 0 12px;
	margin-right: 14px;
	border: 1px solid var(--stkb-border);
	border-radius: 999px;
	background: #fff;
	font-weight: 600;
	color: var(--stkb-color-current);
}
.stkb-dot .stkb-first .stkb-link::before {
	content: '';
	width: 8px;
	height: 8px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	flex-shrink: 0;
}
.stkb-dot .stkb-first .stkb-sep {
	display: none;
}
.stkb-dot .stkb-first + .stkb-item {
	padding-left: 14px;
	border-left: 1px solid var(--stkb-border);
}
.stkb-dot .stkb-sep {
	margin: 0 6px;
	color: var(--stkb-sep-color);
}
.stkb-dot a.stkb-link:hover {
	color: var(--stkb-accent);
	border-color: var(--stkb-accent);
}
.stkb-dot .stkb-current .stkb-link {
	color: var(--stkb-color-current);
	font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   STYLE 22 — Stripe
   Colored left-border accent stripe on wrap
════════════════════════════════════════════════════════════ */
.stkb-stripe {
	border-left:   4px solid var(--stkb-accent);
	border-top:    1px solid var(--stkb-border);
	border-right:  1px solid var(--stkb-border);
	border-bottom: 1px solid var(--stkb-border);
	border-radius: 0 var(--stkb-radius) var(--stkb-radius) 0;
	padding:       12px 16px;
	background:    var(--stkb-item-bg);
}

.stkb-stripe .stkb-sep {
	color:  var(--stkb-sep-color);
	margin: 0 8px;
}

.stkb-stripe a.stkb-link:hover {
	color: var(--stkb-accent);
}

.stkb-stripe .stkb-current .stkb-link {
	color: var(--stkb-accent);
}

/* ════════════════════════════════════════════════════════════
   STYLE 23 — Glass
   Glassmorphism — frosted glass with subtle borders
════════════════════════════════════════════════════════════ */
.stkb-glass {
	background:    rgba(255, 255, 255, 0.15);
	border:        1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--stkb-radius);
	padding:       12px 20px;
	backdrop-filter:         blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.stkb-glass .stkb-link {
	border:        1px solid rgba(255, 255, 255, 0.25);
	border-radius: 4px;
	padding:       4px 12px;
	background:    rgba(255, 255, 255, 0.1);
	color:         var(--stkb-color);
}

.stkb-glass a.stkb-link:hover {
	background:   rgba(255, 255, 255, 0.25);
	border-color: rgba(255, 255, 255, 0.6);
	color:        var(--stkb-color-current);
}

.stkb-glass .stkb-current .stkb-link {
	background:   rgba(255, 255, 255, 0.35);
	border-color: rgba(255, 255, 255, 0.7);
	color:        var(--stkb-color-current);
}

.stkb-glass .stkb-sep {
	color:  rgba(0, 0, 0, 0.35);
	margin: 0 6px;
}

/* ════════════════════════════════════════════════════════════
   STYLE 24 — Vertical
   Stacked vertical list with left-border accent
════════════════════════════════════════════════════════════ */
.stkb-vertical {
	border:        1px solid var(--stkb-border);
	border-radius: var(--stkb-radius);
	padding:       4px 0;
}

.stkb-vertical .stkb-list {
	flex-direction: column;
	align-items:    stretch;
	width:          100%;
	gap:            0;
}

.stkb-vertical .stkb-item {
	border-left:   3px solid transparent;
	border-bottom: 1px solid var(--stkb-border);
}

.stkb-vertical .stkb-item:last-child {
	border-bottom: none;
}

.stkb-vertical .stkb-link {
	padding:     10px 16px;
	width:       100%;
}

.stkb-vertical a.stkb-link:hover {
	background:   var(--stkb-item-bg-hover);
	color:        var(--stkb-accent);
}

.stkb-vertical .stkb-item:hover {
	border-left-color: var(--stkb-accent);
}

.stkb-vertical .stkb-current {
	border-left-color: var(--stkb-accent);
	background:        var(--stkb-accent-light);
}

.stkb-vertical .stkb-current .stkb-link {
	color: var(--stkb-accent);
}

.stkb-vertical .stkb-sep {
	display: none;
}

/* ════════════════════════════════════════════════════════════
   STYLE 25 — You Are Here
   Was a second left-accent bar. The trail now opens with a standing
   "You are here" caption divided from the crumbs, set in a hairline strip.
════════════════════════════════════════════════════════════ */
.stkb-banner {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 0;
	border-top: 1px solid var(--stkb-border);
	border-bottom: 1px solid var(--stkb-border);
}
.stkb-banner::before {
	content: 'You are here';
	flex: 0 0 auto;
	padding-right: 14px;
	border-right: 1px solid var(--stkb-border);
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--stkb-sep-color);
	white-space: nowrap;
}
.stkb-banner .stkb-list {
	flex-wrap: wrap;
	row-gap: 4px;
}
.stkb-banner .stkb-sep {
	margin: 0 8px;
}
.stkb-banner a.stkb-link:hover {
	color: var(--stkb-accent);
}
.stkb-banner .stkb-current .stkb-link {
	color: var(--stkb-color-current);
	font-weight: 700;
}

/* ════════════════════════════════════════════════════════════
   STYLE 26 — Staircase
   Was a second rule-under-the-current-item design. Each level now steps down
   and to the right with an elbow connector, so depth reads at a glance.
════════════════════════════════════════════════════════════ */
.stkb-underline .stkb-list {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}
.stkb-underline .stkb-item {
	position: relative;
	padding: 3px 0;
}
.stkb-underline .stkb-item + .stkb-item { margin-left: 26px; }
.stkb-underline .stkb-item + .stkb-item + .stkb-item { margin-left: 52px; }
.stkb-underline .stkb-item + .stkb-item + .stkb-item + .stkb-item { margin-left: 78px; }
.stkb-underline .stkb-item + .stkb-item + .stkb-item + .stkb-item + .stkb-item { margin-left: 104px; }
.stkb-underline .stkb-item + .stkb-item::before {
	content: '';
	position: absolute;
	left: -16px;
	top: -6px;
	bottom: 50%;
	width: 10px;
	border-left: 2px solid var(--stkb-border);
	border-bottom: 2px solid var(--stkb-border);
	border-bottom-left-radius: 6px;
}
.stkb-underline .stkb-link {
	padding: 4px 10px;
	border-radius: 6px;
}
.stkb-underline a.stkb-link:hover {
	background: var(--stkb-accent-light);
	color: var(--stkb-accent);
}
.stkb-underline .stkb-current .stkb-link {
	background: var(--stkb-accent);
	color: #fff;
	font-weight: 600;
}
.stkb-underline .stkb-sep {
	display: none;
}

/* ════════════════════════════════════════════════════════════
   STYLE 27 — Vertical Steps
   Was a third pill row. The trail is now a numbered vertical stepper with a
   connecting spine, for sidebars and long-form checkout pages.
════════════════════════════════════════════════════════════ */
.stkb-separated-pill .stkb-list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	counter-reset: stkb-step;
}
.stkb-separated-pill .stkb-item {
	position: relative;
	counter-increment: stkb-step;
	padding: 6px 0 6px 40px;
	align-items: center;
}
.stkb-separated-pill .stkb-item::before {
	content: counter(stkb-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid var(--stkb-border);
	background: #fff;
	font-size: 0.68em;
	font-weight: 700;
	color: var(--stkb-sep-color);
	z-index: 1;
}
.stkb-separated-pill .stkb-item + .stkb-item::after {
	content: '';
	position: absolute;
	left: 13px;
	top: -50%;
	height: 100%;
	border-left: 1px solid var(--stkb-border);
}
.stkb-separated-pill .stkb-current::before {
	border-color: var(--stkb-accent);
	background: var(--stkb-accent);
	color: #fff;
}
.stkb-separated-pill a.stkb-link:hover {
	color: var(--stkb-accent);
}
.stkb-separated-pill .stkb-current .stkb-link {
	font-weight: 700;
}
.stkb-separated-pill .stkb-sep {
	display: none;
}

/* ════════════════════════════════════════════════════════════
   STYLE 28 — Split Bar
   Replaces a hard-bordered "brutalist" design. The trail now runs along the
   left of a full-width bar and the current page is pushed to the far right,
   so the crumb doubles as a page-title strip.
════════════════════════════════════════════════════════════ */
.stkb-brutalist {
	border-top: 1px solid var(--stkb-border);
	border-bottom: 1px solid var(--stkb-border);
	padding: 12px 0;
}
.stkb-brutalist .stkb-list {
	width: 100%;
	flex-wrap: nowrap;
	align-items: center;
}
.stkb-brutalist .stkb-item {
	display: flex;
	align-items: center;
	min-width: 0;
	font-size: 0.88em;
}
.stkb-brutalist .stkb-item.stkb-current {
	margin-left: auto;
	padding-left: 20px;
	border-left: 1px solid var(--stkb-border);
	font-size: 1em;
}
.stkb-brutalist .stkb-current .stkb-link {
	font-weight: 700;
	color: var(--stkb-color-current);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.stkb-brutalist .stkb-sep {
	margin: 0 10px;
	color: var(--stkb-sep-color);
}
.stkb-brutalist .stkb-item:nth-last-child(2) .stkb-sep {
	display: none;
}
.stkb-brutalist a.stkb-link:hover {
	color: var(--stkb-accent);
}

/* ════════════════════════════════════════════════════════════
   STYLE 29 — Context Card
   Was a shadow depth change on the same chip row. The card now splits in two:
   the current page reads large on the left, its ancestors stack small on the
   right, so the crumb doubles as a page header block.
════════════════════════════════════════════════════════════ */
.stkb-soft-shadow {
	border: 1px solid var(--stkb-border);
	border-radius: 12px;
	background: #fff;
	padding: 16px 20px;
	box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px -8px rgba(16,24,40,.12);
}
.stkb-soft-shadow .stkb-list {
	width: 100%;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}
.stkb-soft-shadow .stkb-item {
	font-size: 0.82em;
	color: var(--stkb-sep-color);
}
.stkb-soft-shadow .stkb-item.stkb-current {
	align-self: flex-start;
	order: -1;
	margin-bottom: 8px;
	font-size: 1.35em;
}
.stkb-soft-shadow .stkb-current .stkb-link {
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--stkb-color-current);
}
.stkb-soft-shadow .stkb-sep {
	display: none;
}
.stkb-soft-shadow a.stkb-link:hover {
	color: var(--stkb-accent);
}

/* ════════════════════════════════════════════════════════════
   STYLE 30 — Segmented Group
   Was a third pill variant. The crumbs now share one continuous control with
   hairline divisions rather than sitting as separate pills.
════════════════════════════════════════════════════════════ */
.stkb-outline-pill .stkb-list {
	gap: 0;
	border: 1px solid var(--stkb-border);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}
.stkb-outline-pill .stkb-link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	background: transparent;
	border-radius: 0;
}
.stkb-outline-pill .stkb-item + .stkb-item .stkb-link {
	box-shadow: inset 1px 0 0 var(--stkb-border);
}
.stkb-outline-pill a.stkb-link:hover {
	background: var(--stkb-accent-light);
	color: var(--stkb-accent);
}
.stkb-outline-pill .stkb-current .stkb-link {
	background: var(--stkb-accent);
	color: #fff;
	font-weight: 600;
}
.stkb-outline-pill .stkb-sep {
	display: none;
}

/* ════════════════════════════════════════════════════════════
   STYLE 31 — Center Stack
   Was a dot separator, and the separator glyph is already a control. The trail
   now centres above a short rule with the page title centred beneath it.
════════════════════════════════════════════════════════════ */
.stkb-connected {
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.stkb-connected .stkb-list {
	justify-content: center;
	flex-wrap: wrap;
	row-gap: 4px;
}
.stkb-connected .stkb-item {
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--stkb-sep-color);
}
.stkb-connected .stkb-item.stkb-current {
	flex: 1 0 100%;
	justify-content: center;
	margin-top: 12px;
	padding-top: 14px;
	font-size: 1.5em;
	font-weight: 700;
	letter-spacing: -0.015em;
	text-transform: none;
	position: relative;
}
.stkb-connected .stkb-item.stkb-current::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	border-top: 2px solid var(--stkb-accent);
}
.stkb-connected .stkb-current .stkb-link {
	color: var(--stkb-color-current);
}
.stkb-connected .stkb-item:nth-last-child(2) .stkb-sep {
	display: none;
}
.stkb-connected .stkb-sep {
	margin: 0 8px;
}
.stkb-connected a.stkb-link:hover {
	color: var(--stkb-accent);
}

/* ════════════════════════════════════════════════════════════
   STYLE 32 — Level Tiles
   Was a fourth square-chip row. Each level is now a tile carrying its own
   depth number above the label, laid out as a wrapping grid.
════════════════════════════════════════════════════════════ */
.stkb-squared .stkb-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px;
	width: 100%;
	counter-reset: stkb-level;
}
.stkb-squared .stkb-item {
	counter-increment: stkb-level;
	flex-direction: column;
	align-items: stretch;
	padding: 10px 14px 12px;
	border: 1px solid var(--stkb-border);
	border-radius: 10px;
	background: #fff;
}
.stkb-squared .stkb-item::before {
	content: 'Level ' counter(stkb-level, decimal-leading-zero);
	font-size: 0.66em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--stkb-sep-color);
	margin-bottom: 4px;
}
.stkb-squared .stkb-link {
	white-space: normal;
}
.stkb-squared a.stkb-link:hover {
	color: var(--stkb-accent);
}
.stkb-squared .stkb-current {
	border-color: var(--stkb-accent);
	background: var(--stkb-accent-light);
}
.stkb-squared .stkb-current::before {
	color: var(--stkb-accent);
}
.stkb-squared .stkb-current .stkb-link {
	color: var(--stkb-accent);
}
.stkb-squared .stkb-sep {
	display: none;
}

/* ════════════════════════════════════════════════════════════
   STYLE 33 — Tree Path
   Was "Compact", which only tightened padding and type size — both already
   style controls. Each level now sits on its own line with an increasing
   indent and an elbow connector, the way a file tree reads.
════════════════════════════════════════════════════════════ */
.stkb-compact .stkb-list {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	counter-reset: stkb-tree;
}
.stkb-compact .stkb-item {
	counter-increment: stkb-tree;
	position: relative;
	padding-left: calc( ( var(--stkb-depth, 0) ) * 0 );
	margin-left: 0;
}
.stkb-compact .stkb-item + .stkb-item { margin-left: 18px; }
.stkb-compact .stkb-item + .stkb-item + .stkb-item { margin-left: 36px; }
.stkb-compact .stkb-item + .stkb-item + .stkb-item + .stkb-item { margin-left: 54px; }
.stkb-compact .stkb-item + .stkb-item + .stkb-item + .stkb-item + .stkb-item { margin-left: 72px; }
.stkb-compact .stkb-item + .stkb-item::before {
	content: '';
	position: absolute;
	left: -12px;
	top: -2px;
	bottom: 50%;
	width: 8px;
	border-left: 1px solid var(--stkb-border);
	border-bottom: 1px solid var(--stkb-border);
	border-bottom-left-radius: 4px;
}
.stkb-compact .stkb-link {
	padding: 4px 8px;
	border-radius: 5px;
}
.stkb-compact a.stkb-link:hover {
	background: var(--stkb-accent-light);
	color: var(--stkb-accent);
}
.stkb-compact .stkb-current .stkb-link {
	font-weight: 700;
	color: var(--stkb-color-current);
}
.stkb-compact .stkb-sep {
	display: none;
}

/* ════════════════════════════════════════════════════════════
   STYLE 34 — Spacious
   Extra spacing and larger type, for hero areas
════════════════════════════════════════════════════════════ */
.stkb-spacious { padding: 16px 22px; border:1px solid var(--stkb-border); border-radius: var(--stkb-radius); }
.stkb-spacious .stkb-link { padding: 8px 16px; font-size: 1.05em; }
.stkb-spacious .stkb-sep { margin: 0 12px; font-size: 1.2em; }

/* ════════════════════════════════════════════════════════════
   STYLE 35 — Rail
   A light rail behind items
════════════════════════════════════════════════════════════ */
.stkb-rail { position: relative; padding: 12px 0; }
.stkb-rail::before { content: ''; position: absolute; left: 0; right:0; top:50%; height: 2px; background: var(--stkb-border); transform: translateY(-50%); }
.stkb-rail .stkb-list { background: transparent; }
.stkb-rail .stkb-link { position: relative; z-index: 1; background: #fff; padding: 4px 10px; border:1px solid var(--stkb-border); border-radius: 4px; }
.stkb-rail a.stkb-link:hover { border-color: var(--stkb-accent); color: var(--stkb-accent); }
.stkb-rail .stkb-sep { display:none; }

/* ════════════════════════════════════════════════════════════
   STYLE 36 — Sideways Rail
   Was an icon emphasis, and per-item icons are already a control. The trail
   now runs bottom-to-top along a hairline, for a fixed edge or a hero margin.
════════════════════════════════════════════════════════════ */
.stkb-iconic {
	align-items: flex-start;
}
.stkb-iconic .stkb-list {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	flex-wrap: nowrap;
	align-items: center;
	gap: 14px;
	padding-right: 12px;
	border-right: 1px solid var(--stkb-border);
	min-height: 160px;
}
.stkb-iconic .stkb-item {
	writing-mode: vertical-rl;
}
.stkb-iconic .stkb-link {
	font-size: 0.82em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}
.stkb-iconic .stkb-current .stkb-link {
	color: var(--stkb-accent);
	font-weight: 700;
}
.stkb-iconic a.stkb-link:hover {
	color: var(--stkb-accent);
}
.stkb-iconic .stkb-sep {
	display: none;
}

/* ════════════════════════════════════════════════════════════
   STYLE 37 — Labeled
   Uppercase labels in small badges
════════════════════════════════════════════════════════════ */
.stkb-labeled .stkb-list { gap: 6px; }
.stkb-labeled .stkb-link { border:1px solid var(--stkb-border); border-radius: 3px; padding: 4px 10px; background:#fff; text-transform: uppercase; letter-spacing: .06em; font-size: .78em; font-weight: 700; }
.stkb-labeled a.stkb-link:hover { border-color: var(--stkb-accent); color: var(--stkb-accent); }
.stkb-labeled .stkb-current .stkb-link { background: var(--stkb-accent); border-color: var(--stkb-accent); color: #fff; }
.stkb-labeled .stkb-sep { display:none; }

/* ════════════════════════════════════════════════════════════
   STYLE 38 — Ribbon
   Ribbon banner behind the trail
════════════════════════════════════════════════════════════ */
.stkb-ribbon { position: relative; padding: 14px 18px; }
.stkb-ribbon::before { content:''; position:absolute; left:0; right:0; top:50%; height: 28px; background: var(--stkb-accent-light); transform: translateY(-50%); border:1px solid color-mix(in srgb, var(--stkb-accent) 30%, white 70%); }
.stkb-ribbon .stkb-link { position: relative; z-index: 1; padding: 4px 10px; background:#fff; border:1px solid var(--stkb-border); border-radius:4px; }
.stkb-ribbon a.stkb-link:hover { border-color: var(--stkb-accent); color: var(--stkb-accent); }
.stkb-ribbon .stkb-sep { margin: 0 10px; }

/* ════════════════════════════════════════════════════════════
   STYLE 39 — Dotted Leader
   Was a fifth boxed-chip row. The crumbs now spread across the full width with
   dotted leaders running between them, the way a contents page sets a list.
════════════════════════════════════════════════════════════ */
.stkb-tiles .stkb-list {
	width: 100%;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 0;
}
.stkb-tiles .stkb-item {
	align-items: baseline;
	min-width: 0;
}
.stkb-tiles .stkb-item:not(.stkb-current) {
	flex: 1 1 auto;
}
.stkb-tiles .stkb-link {
	padding: 4px 0;
}
.stkb-tiles .stkb-sep {
	flex: 1 1 auto;
	min-width: 24px;
	margin: 0 10px;
	font-size: 0;
	color: transparent;
	border-bottom: 2px dotted var(--stkb-border);
	transform: translateY(-3px);
}
.stkb-tiles a.stkb-link:hover {
	color: var(--stkb-accent);
}
.stkb-tiles .stkb-current .stkb-link {
	font-weight: 700;
	color: var(--stkb-color-current);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ════════════════════════════════════════════════════════════
   STYLE 40 — Section Rule
   Was a border on the current item and nothing else. The trail now sits at the
   head of a section rule that runs out to the full width beside it.
════════════════════════════════════════════════════════════ */
.stkb-ghost .stkb-list {
	width: 100%;
	flex-wrap: nowrap;
	align-items: center;
}
.stkb-ghost .stkb-item {
	min-width: 0;
}
.stkb-ghost .stkb-item.stkb-current {
	flex: 1 1 auto;
	align-items: center;
	gap: 14px;
}
.stkb-ghost .stkb-item.stkb-current::after {
	content: '';
	flex: 1 1 auto;
	min-width: 24px;
	border-top: 1px solid var(--stkb-border);
}
.stkb-ghost .stkb-link {
	padding: 4px 0;
	font-size: 0.9em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.stkb-ghost .stkb-current .stkb-link {
	font-weight: 700;
	color: var(--stkb-color-current);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.stkb-ghost a.stkb-link:hover {
	color: var(--stkb-accent);
}
.stkb-ghost .stkb-sep {
	margin: 0 10px;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
	.stkb-arrow-shape .stkb-link {
		padding: 6px 10px 6px 20px;
		font-size: 0.85em;
	}

	.stkb-arrow-shape .stkb-item:first-child .stkb-link {
		padding-left: 10px;
	}

	.stkb-card .stkb-item.stkb-current {
		font-size: 1.35em;
	}

	.stkb-banner {
		flex-wrap: wrap;
		row-gap: 6px;
	}

	.stkb-banner::before {
		flex: 1 0 100%;
		padding-right: 0;
		border-right: none;
	}

	.stkb-outlined .stkb-link {
		font-size: 0.82em;
	}

	.stkb-iconic .stkb-list {
		min-height: 130px;
	}

	.stkb-vertical .stkb-link {
		padding: 8px 12px;
	}

	.stkb-step .stkb-link {
		padding: 6px 10px;
	}
}

@media (max-width: 479px) {
	.stkb-list {
		flex-wrap: wrap;
	}

	.stkb-boxed .stkb-list {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	.stkb-step .stkb-item {
		border: 1px solid var(--stkb-border);
		border-radius: 4px;
		margin: 2px;
	}

	.stkb-step .stkb-sep {
		display: none;
	}
}


/* ════════════════════════════════════════════════════════════
   MOBILE BEHAVIOUR
   A real WooCommerce or blog trail wraps to three or four lines on a phone.
   The default collapses the middle of the trail behind an ellipsis, keeping
   Home and the last two crumbs. The full list stays in the markup, so screen
   readers and search engines still read every step.
════════════════════════════════════════════════════════════ */

.stkb-ellipsis {
	display: none;
}

@media ( max-width: 767px ) {

	/* Collapse (default) */
	.stkb-m-collapse .stkb-list {
		flex-wrap: nowrap;
	}
	/* Two layouts are deliberately multi-line, so the one-line rule does not
	   apply to them. */
	.stkb-m-collapse.stkb-slash .stkb-list,
	.stkb-m-collapse.stkb-compact .stkb-list,
	.stkb-m-collapse.stkb-card .stkb-list,
	.stkb-m-collapse.stkb-underline .stkb-list,
	.stkb-m-collapse.stkb-separated-pill .stkb-list,
	.stkb-m-collapse.stkb-soft-shadow .stkb-list,
	.stkb-m-collapse.stkb-connected .stkb-list,
	.stkb-m-collapse.stkb-squared .stkb-list,
	.stkb-m-collapse.stkb-vertical .stkb-list {
		flex-wrap: wrap;
	}
	.stkb-m-collapse.stkb-slash .stkb-item:last-child .stkb-label,
	.stkb-m-collapse.stkb-compact .stkb-item:last-child .stkb-label,
	.stkb-m-collapse.stkb-card .stkb-item:last-child .stkb-label,
	.stkb-m-collapse.stkb-underline .stkb-item:last-child .stkb-label,
	.stkb-m-collapse.stkb-separated-pill .stkb-item:last-child .stkb-label,
	.stkb-m-collapse.stkb-soft-shadow .stkb-item:last-child .stkb-label,
	.stkb-m-collapse.stkb-connected .stkb-item:last-child .stkb-label,
	.stkb-m-collapse.stkb-squared .stkb-item:last-child .stkb-label,
	.stkb-m-collapse.stkb-vertical .stkb-item:last-child .stkb-label {
		max-width: none;
		white-space: normal;
	}
	.stkb-m-collapse .stkb-item.stkb-mid {
		display: none;
	}
	.stkb-m-collapse .stkb-ellipsis {
		display: inline-flex;
		align-items: center;
	}
	.stkb-m-collapse .stkb-ellipsis .stkb-link {
		pointer-events: none;
	}
	.stkb-m-collapse .stkb-item:nth-last-child(2) .stkb-label,
	.stkb-m-collapse .stkb-item:last-child .stkb-label {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 42vw;
		display: inline-block;
		vertical-align: bottom;
	}

	/* Single line, scrolls sideways */
	.stkb-m-scroll .stkb-list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
	}
	.stkb-m-scroll .stkb-list::-webkit-scrollbar {
		display: none;
	}
	.stkb-m-scroll .stkb-item {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	/* Wrap — the previous behaviour, kept as an option */
	.stkb-m-wrap .stkb-list {
		flex-wrap: wrap;
		row-gap: 6px;
	}
}

/* ════════════════════════════════════════════════════════════
   REDUCED MOTION
════════════════════════════════════════════════════════════ */

@media ( prefers-reduced-motion: reduce ) {
	.stkb-wrap *,
	.stkb-wrap *::before,
	.stkb-wrap *::after {
		animation: none !important;
		transition: none !important;
	}
}