.nammo-breadcrumb {
	--colour: var(--accent-colour, var(--color-brand-white));
	--gap: 1rem;	
	
	padding-block: 1rem;

	nav > span {
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		gap: 0 var(--gap);
		font-size: 1rem;
	}

	.item {
		break-inside: avoid;
		position: relative;
		color: var(--colour);
		text-align: center;
		&:not(.first) {
			&:before {
				content: '';
				display: block;
				height: 1.5em;
				width: 0.125rem;
				background: var(--colour);
				position: absolute;
				right: calc(100% + var(--gap) / 2);
				top: 50%;
				transform: translate(50%, -50%) skewX(-30deg);
				user-select: none;
			}
		}
		a, &[aria-current="page"] {
			display: inline-flex;
			padding: .5rem;
			transition: all .3s ease;
			text-decoration: none;
			color: inherit;
			text-transform: uppercase;
			text-decoration: underline;
			text-decoration-thickness: .125em;
			text-underline-offset: .375em;
			text-decoration-color: transparent;
		}

		a {
			&:hover {
				text-decoration-color: inherit;
			}
		}
			
			

		&[aria-current="page"] {
			a {
				font-weight: var(--fw-bold, 700);
				pointer-events: none;
				&:hover {
					text-decoration: none;
				}
			}
		}
	}
}