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

/* ── Variables ─────────────────────────────────────────────── */
.stkb-wrap {
	--stkb-border:         #dde1e7;
	--stkb-color:          #4a5568;
	--stkb-color-hover:    #2563eb;
	--stkb-color-current:  #1a202c;
	--stkb-sep-color:      #a0aec0;
	--stkb-accent:         #2563eb;
	--stkb-accent-light:   #eff6ff;
	--stkb-item-bg:        #f8fafc;
	--stkb-item-bg-hover:  #eff6ff;
	--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 — Slash
   Forward-slash separator, bottom-border on wrap
════════════════════════════════════════════════════════════ */
.stkb-slash {
	border-bottom: 2px solid var(--stkb-border);
	padding:       10px 0 10px;
}

.stkb-slash .stkb-sep {
	font-size:   1em;
	font-weight: 300;
	opacity:     0.5;
	margin:      0 10px;
}

/* ════════════════════════════════════════════════════════════
   STYLE 3 — Arrow
   → arrow separator, top+bottom border on wrap
════════════════════════════════════════════════════════════ */
.stkb-arrow {
	border-top:    1px solid var(--stkb-border);
	border-bottom: 1px solid var(--stkb-border);
	padding:       10px 16px;
}

.stkb-arrow .stkb-sep {
	font-size: 1em;
	margin:    0 10px;
	color:     var(--stkb-accent);
}

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

/* ════════════════════════════════════════════════════════════
   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 6 — Boxed
   Square boxes with solid borders
════════════════════════════════════════════════════════════ */
.stkb-boxed .stkb-list {
	gap: 0;
}

.stkb-boxed .stkb-link {
	border:        1px solid var(--stkb-border);
	border-right:  none;
	padding:       8px 16px;
	background:    #fff;
}

.stkb-boxed .stkb-item:last-child .stkb-link {
	border-right: 1px solid var(--stkb-border);
}

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

.stkb-boxed .stkb-current .stkb-link {
	background:   var(--stkb-accent-light);
	border-color: var(--stkb-accent);
	border-right: 1px solid var(--stkb-accent);
	color:        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 — Outlined
   Each item has a 2px outlined border, square corners
════════════════════════════════════════════════════════════ */
.stkb-outlined .stkb-list {
	gap: 6px;
}

.stkb-outlined .stkb-link {
	border:        2px solid var(--stkb-border);
	border-radius: 4px;
	padding:       6px 14px;
	background:    transparent;
}

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

.stkb-outlined .stkb-current .stkb-link {
	border-color: var(--stkb-color-current);
	color:        var(--stkb-color-current);
	font-weight:  700;
}

.stkb-outlined .stkb-sep {
	margin: 0 2px;
}

/* ════════════════════════════════════════════════════════════
   STYLE 13 — Soft Rounded
   Heavily rounded corners, soft shadow per item
════════════════════════════════════════════════════════════ */
.stkb-soft .stkb-list {
	gap: 6px;
}

.stkb-soft .stkb-link {
	border:        1px solid var(--stkb-border);
	border-radius: 999px;
	padding:       6px 16px;
	background:    #fff;
	box-shadow:    0 1px 4px rgba(0, 0, 0, 0.07);
}

.stkb-soft a.stkb-link:hover {
	border-color: var(--stkb-accent);
	color:        var(--stkb-accent);
	box-shadow:   0 2px 8px rgba(37, 99, 235, 0.15);
}

.stkb-soft .stkb-current .stkb-link {
	background:   var(--stkb-accent);
	border-color: var(--stkb-accent);
	color:        #fff;
	box-shadow:   0 2px 8px rgba(37, 99, 235, 0.3);
}

.stkb-soft .stkb-sep {
	margin: 0 2px;
}

/* ════════════════════════════════════════════════════════════
   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 — Bold
   Thick 3px borders, strong typography
════════════════════════════════════════════════════════════ */
.stkb-bold {
	border:        3px solid var(--stkb-color-current);
	border-radius: 4px;
	padding:       10px 16px;
}

.stkb-bold .stkb-link {
	border-bottom: 3px solid transparent;
	padding:       4px 8px;
	font-weight:   600;
}

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

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

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

/* ════════════════════════════════════════════════════════════
   STYLE 18 — Card
   Each item is an elevated card with border + shadow
════════════════════════════════════════════════════════════ */
.stkb-card .stkb-list {
	gap: 8px;
	flex-wrap: wrap;
}

.stkb-card .stkb-link {
	border:        1px solid var(--stkb-border);
	border-radius: 8px;
	padding:       8px 16px;
	background:    #fff;
	box-shadow:    0 2px 6px rgba(0, 0, 0, 0.07);
}

.stkb-card a.stkb-link:hover {
	border-color: var(--stkb-accent);
	color:        var(--stkb-accent);
	box-shadow:   0 4px 12px rgba(37, 99, 235, 0.15);
	transform:    translateY(-1px);
}

.stkb-card .stkb-current .stkb-link {
	background:   var(--stkb-accent);
	border-color: var(--stkb-accent);
	color:        #fff;
	box-shadow:   0 4px 12px rgba(37, 99, 235, 0.3);
}

.stkb-card .stkb-sep {
	margin: 0 0px;
}

/* ════════════════════════════════════════════════════════════
   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;
}

.stkb-tag .stkb-link {
	border:        1px solid var(--stkb-border);
	border-radius: 0 4px 4px 0;
	padding:       5px 14px 5px 10px;
	background:    var(--stkb-item-bg);
	font-size:     0.875em;
}

.stkb-tag .stkb-link::before {
	content:      '';
	position:     absolute;
	left:         -1px;
	top:          50%;
	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 — Dot
   Dot bullet (·) separator, wrap with full border
════════════════════════════════════════════════════════════ */
.stkb-dot {
	border:        1px solid var(--stkb-border);
	border-radius: var(--stkb-radius);
	padding:       8px 14px;
}

.stkb-dot .stkb-sep {
	font-size: 1.4em;
	line-height: 0;
	color:     var(--stkb-sep-color);
	margin:    0 6px;
}

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

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

/* ════════════════════════════════════════════════════════════
   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 — Banner
   Full-width banner with large left accent border
════════════════════════════════════════════════════════════ */
.stkb-banner {
	width:         100%;
	border:        1px solid var(--stkb-border);
	border-left:   5px solid var(--stkb-accent);
	border-radius: 0 var(--stkb-radius) var(--stkb-radius) 0;
	padding:       14px 20px;
	background:    var(--stkb-item-bg);
}

.stkb-banner .stkb-list {
	flex-wrap: wrap;
}

.stkb-banner .stkb-sep {
	color:  var(--stkb-sep-color);
	margin: 0 10px;
}

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

.stkb-banner .stkb-current .stkb-link {
	color:       var(--stkb-accent);
	font-weight: 700;
}

/* ════════════════════════════════════════════════════════════
   STYLE 26 — Underline
   Subtle underline effect that animates on hover/current
════════════════════════════════════════════════════════════ */
.stkb-underline .stkb-link {
	position: relative;
	padding: 6px 8px;
}

.stkb-underline .stkb-link::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 2px;
	background: currentColor;
	opacity: 0.2;
	transform: scaleX(0.25);
	transform-origin: left;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.stkb-underline a.stkb-link:hover::after,
.stkb-underline .stkb-current .stkb-link::after {
	opacity: 1;
	transform: scaleX(1);
}

/* ════════════════════════════════════════════════════════════
   STYLE 27 — Separated Pill
   Pills with visible gaps; separator hidden
════════════════════════════════════════════════════════════ */
.stkb-separated-pill .stkb-list { gap: 8px; }
.stkb-separated-pill .stkb-link {
	border: 1px solid var(--stkb-border);
	border-radius: 999px;
	padding: 6px 14px;
	background: #fff;
}
.stkb-separated-pill a.stkb-link:hover { border-color: var(--stkb-accent); color: var(--stkb-accent); }
.stkb-separated-pill .stkb-current .stkb-link { background: var(--stkb-accent); border-color: var(--stkb-accent); color: #fff; }
.stkb-separated-pill .stkb-sep { display: none; }

/* ════════════════════════════════════════════════════════════
   STYLE 28 — Brutalist
   Thick borders, no radius, stark hover
════════════════════════════════════════════════════════════ */
.stkb-brutalist { border: 3px solid var(--stkb-border); padding: 12px 16px; }
.stkb-brutalist .stkb-link { border: 3px solid var(--stkb-border); padding: 6px 12px; margin: 2px; background: #fff; font-weight: 700; }
.stkb-brutalist a.stkb-link:hover { background: #000; color: #fff; border-color: #000; }
.stkb-brutalist .stkb-current .stkb-link { background: var(--stkb-color-current); color: #fff; border-color: var(--stkb-color-current); }
.stkb-brutalist .stkb-sep { display:none; }

/* ════════════════════════════════════════════════════════════
   STYLE 29 — Soft Shadow
   Floating breadcrumb with soft, layered shadows
════════════════════════════════════════════════════════════ */
.stkb-soft-shadow { background: #fff; border: 1px solid var(--stkb-border); border-radius: 10px; padding: 12px 16px; box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.stkb-soft-shadow .stkb-link { padding: 6px 12px; border-radius: 6px; }
.stkb-soft-shadow a.stkb-link:hover { background: var(--stkb-item-bg-hover); color: var(--stkb-accent); box-shadow: inset 0 0 0 1px var(--stkb-accent); }
.stkb-soft-shadow .stkb-current .stkb-link { background: var(--stkb-accent); color:#fff; }

/* ════════════════════════════════════════════════════════════
   STYLE 30 — Outline Pill
   Hollow pills that fill on hover/current
════════════════════════════════════════════════════════════ */
.stkb-outline-pill .stkb-list { gap: 6px; }
.stkb-outline-pill .stkb-link { border:2px solid var(--stkb-border); border-radius:999px; padding:5px 14px; background: transparent; }
.stkb-outline-pill a.stkb-link:hover { border-color: var(--stkb-accent); color: var(--stkb-accent); }
.stkb-outline-pill .stkb-current .stkb-link { background: var(--stkb-accent); border-color: var(--stkb-accent); color:#fff; }
.stkb-outline-pill .stkb-sep { display:none; }

/* ════════════════════════════════════════════════════════════
   STYLE 31 — Connected
   Items connected with tiny dots instead of separators
════════════════════════════════════════════════════════════ */
.stkb-connected .stkb-list { gap: 0; }
.stkb-connected .stkb-item { position: relative; }
.stkb-connected .stkb-item + .stkb-item::before {
	content: '';
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--stkb-sep-color);
	display: inline-block; margin: 0 10px;
}
.stkb-connected .stkb-sep { display: none; }

/* ════════════════════════════════════════════════════════════
   STYLE 32 — Squared
   Perfect squares with equal padding and sharp corners
════════════════════════════════════════════════════════════ */
.stkb-squared .stkb-list { gap: 4px; }
.stkb-squared .stkb-link { border:1px solid var(--stkb-border); border-radius: 2px; padding:8px 12px; background:#fff; }
.stkb-squared a.stkb-link:hover { background: var(--stkb-item-bg-hover); border-color: var(--stkb-accent); color: var(--stkb-accent); }
.stkb-squared .stkb-current .stkb-link { background: var(--stkb-accent-light); border-color: var(--stkb-accent); color: var(--stkb-accent); }

/* ════════════════════════════════════════════════════════════
   STYLE 33 — Compact
   Tight spacing for dense UIs
════════════════════════════════════════════════════════════ */
.stkb-compact .stkb-list { gap: 0; }
.stkb-compact .stkb-link { padding: 3px 8px; font-size: .85em; }
.stkb-compact .stkb-sep { margin: 0 4px; font-size: .85em; color: var(--stkb-sep-color); }

/* ════════════════════════════════════════════════════════════
   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 { 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 — Iconic
   Emphasis on icons; labels are lighter
════════════════════════════════════════════════════════════ */
.stkb-iconic .stkb-link { gap: 8px; padding: 6px 10px; }
.stkb-iconic .stkb-icon { font-size: 1.1em; color: var(--stkb-accent); }
.stkb-iconic .stkb-label { opacity: .85; }
.stkb-iconic a.stkb-link:hover .stkb-label { color: var(--stkb-accent); opacity: 1; }

/* ════════════════════════════════════════════════════════════
   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; 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 — Tiles
   Grid-like tiles with equal height
════════════════════════════════════════════════════════════ */
.stkb-tiles .stkb-list { gap: 6px; }
.stkb-tiles .stkb-link { display:flex; align-items:center; min-height: 36px; padding: 0 14px; border:1px solid var(--stkb-border); background:#fff; border-radius:6px; }
.stkb-tiles a.stkb-link:hover { background: var(--stkb-item-bg-hover); border-color: var(--stkb-accent); color: var(--stkb-accent); }
.stkb-tiles .stkb-current .stkb-link { background: var(--stkb-accent); border-color: var(--stkb-accent); color:#fff; }

/* ════════════════════════════════════════════════════════════
   STYLE 40 — Ghost
   Links without visible borders; hover shows ghost outline
════════════════════════════════════════════════════════════ */
.stkb-ghost .stkb-link { padding: 4px 8px; border-radius: 4px; }
.stkb-ghost a.stkb-link:hover { box-shadow: inset 0 0 0 1px var(--stkb-accent); color: var(--stkb-accent); background: var(--stkb-item-bg-hover); }
.stkb-ghost .stkb-current .stkb-link { box-shadow: inset 0 0 0 1px var(--stkb-color-current); color: var(--stkb-color-current); }

/* ════════════════════════════════════════════════════════════
   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-list {
		gap: 6px;
	}

	.stkb-card .stkb-link {
		padding: 6px 12px;
	}

	.stkb-banner {
		padding: 12px 14px;
	}

	.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;
		gap: 0;
	}

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

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

/* WPStack All-in-One 1.3.0 — premium global presets, treatments and animation controls */
.stkb-wrap{--stkb-accent:#2563eb;--stkb-accent-2:#7c3aed;--stkb-ink:#0f172a;--stkb-muted:#64748b;--stkb-surface:#fff;--stkb-soft:#f8fafc;--stkb-border:rgba(15,23,42,.1);--stkb-glow:0 18px 50px rgba(15,23,42,.12);--stkb-radius:999px;isolation:isolate}.stkb-wrap .stkb-list{align-items:center;gap:8px}.stkb-wrap .stkb-item{position:relative;transition:transform .24s ease,filter .24s ease}.stkb-wrap .stkb-link{font-weight:750;letter-spacing:-.012em;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease,background .24s ease,color .24s ease}.stkb-wrap .stkb-link:hover{transform:translateY(-2px)}.stkb-wrap .stkb-current .stkb-link{font-weight:850}.stkb-wrap.stkb-preset-editorial{--stkb-accent:#155dfc;--stkb-accent-2:#06b6d4;--stkb-surface:#fff;--stkb-soft:#f6f8fb}.stkb-wrap.stkb-preset-premium{--stkb-accent:#8b5cf6;--stkb-accent-2:#ec4899;--stkb-surface:rgba(255,255,255,.78);--stkb-soft:rgba(248,250,252,.72);--stkb-border:rgba(255,255,255,.38);backdrop-filter:blur(16px)}.stkb-wrap.stkb-preset-contrast{--stkb-accent:#facc15;--stkb-accent-2:#38bdf8;--stkb-ink:#f8fafc;--stkb-muted:#cbd5e1;--stkb-surface:#020617;--stkb-soft:#0f172a;--stkb-border:rgba(255,255,255,.16)}.stkb-wrap.stkb-preset-pastel{--stkb-accent:#fb7185;--stkb-accent-2:#60a5fa;--stkb-soft:#fff7ed;--stkb-border:rgba(251,113,133,.18)}.stkb-wrap.stkb-preset-brutal{--stkb-accent:#111827;--stkb-accent-2:#ef4444;--stkb-glow:5px 5px 0 #111827;--stkb-radius:6px;--stkb-border:#111827}.stkb-wrap[class*="stkb-preset-"] .stkb-link{background:linear-gradient(135deg,var(--stkb-surface),var(--stkb-soft));border:1px solid var(--stkb-border);color:var(--stkb-ink);box-shadow:0 8px 20px rgba(15,23,42,.06)}.stkb-wrap[class*="stkb-preset-"] .stkb-current .stkb-link{background:linear-gradient(135deg,var(--stkb-accent),var(--stkb-accent-2));color:#fff;border-color:transparent;box-shadow:var(--stkb-glow)}.stkb-wrap[class*="stkb-preset-"] .stkb-sep{color:var(--stkb-muted);font-weight:900}.stkb-wrap.stkb-treatment-compact .stkb-link{padding:6px 10px;font-size:.84rem}.stkb-wrap.stkb-treatment-feature{padding:12px 14px;border-radius:24px;background:linear-gradient(135deg,var(--stkb-surface),var(--stkb-soft));box-shadow:var(--stkb-glow)}.stkb-wrap.stkb-treatment-feature .stkb-list:before{content:"PATH";font-size:10px;font-weight:900;letter-spacing:.14em;color:var(--stkb-accent);margin-right:4px}.stkb-wrap.stkb-treatment-magazine .stkb-link{text-transform:uppercase;font-size:.78rem;letter-spacing:.08em;border-bottom:3px solid var(--stkb-accent)}.stkb-wrap.stkb-treatment-magazine .stkb-current .stkb-link{border-bottom-color:var(--stkb-accent-2)}.stkb-wrap.stkb-preset-brutal .stkb-link{border:2px solid #111827!important;box-shadow:var(--stkb-glow)!important}.stkb-anim-fade-up .stkb-item,.stkb-anim-slide .stkb-item,.stkb-anim-zoom .stkb-item,.stkb-anim-cascade .stkb-item{animation-duration:var(--stkb-duration,520ms);animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-delay:calc(var(--stkb-i,0)*var(--stkb-stagger,60ms))}.stkb-anim-fade-up .stkb-item{animation-name:stkbFadeUp}.stkb-anim-slide .stkb-item{animation-name:stkbSlide}.stkb-anim-zoom .stkb-item{animation-name:stkbZoom}.stkb-anim-cascade .stkb-item{animation-name:stkbCascade}.stkb-pause-hover:hover .stkb-item{animation-play-state:paused}@keyframes stkbFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes stkbSlide{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}@keyframes stkbZoom{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes stkbCascade{from{opacity:0;filter:blur(7px);transform:translateY(16px) scale(.98)}to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}}@media (prefers-reduced-motion:reduce){.stkb-wrap .stkb-item,.stkb-wrap .stkb-link{animation:none!important;transition:none!important}}