.featuredNav {
	width: 100% !important;
	padding: var(--line-height);
	overflow: hidden;
	background-color: var(--background-inverted);
	color: var(--inverted);
	text-align: center;
}

/* Make it look more clickable. Scale up a bit on hover */
.featuredNav-section:hover,
.featuredNav-section:focus-within {
    position: relative;
    transform: scale(1.1);
}




.featuredNav .featuredNav-sections { /* overspecify selector to override padding on .mainContent lists */
	display: grid;
	gap: var(--line-height);
	grid-template-columns: repeat(auto-fill, minmax( max(125px, (100% - (6 - 1) * var(--line-height)) / 6), 1fr )); /* https://stackoverflow.com/questions/55281598/css-grid-maximum-number-of-columns-without-media-queries */
	list-style: none;
	margin: 0;
	padding-inline-start: 0;
}

.featuredNav-section {
	aspect-ratio: 1/1;
	background-position: center;
	background-size: cover;
	position: relative;
	text-shadow: var(--text-shadow);
}

.featuredNav-section-link {
	background-image: linear-gradient(to top, hsla(0,0%,0%,.75), hsla(0,0%,0%,0) 50%);
	color: inherit;
	display: block;
	height: 100%;
}

.featuredNav-section-image {
	display: block;
}

.featuredNav-section-title {
	position: absolute;
	bottom: 0;
	width: 100%;
	color: var(--inverted-light);
	font-size: var(--modular-scale-2);
}



.featuredNav-section.is-free-shipping,
.featuredNav-section.is-sales {
	background: var(--accent);
}

.featuredNav-section.is-free-shipping .featuredNav-section-link,
.featuredNav-section.is-sales .featuredNav-section-link {
	align-items: center;
	display: grid;
	text-decoration: none;
}

.featuredNav-section.is-free-shipping .featuredNav-section-title,
.featuredNav-section.is-sales .featuredNav-section-title {
	position: static;
}

.featuredNav-section big {
	font-weight: bold;
}

.featuredNav-section small {
	font-style: italic;
}

.featuredNav:not(:has(ul li)) {
	display: none;
}