/*
 * Seamless Hold Discovery - Shop navigation row.
 *
 * Restrained bordered pills, evenly spaced, centred as a whole composition.
 * Every control is a real link; the current-state treatment is applied by the
 * server from the actual query, never by script.
 *
 * Specificity note. Every interactive state below is written with the
 * .shd-shopnav ancestor, which puts each rule at two classes plus a
 * pseudo-class. The Elementor global kit ships
 *
 *     .elementor-kit-6 a:hover { color: #A24522; text-decoration: underline; }
 *
 * at one class, one pseudo-class and one type selector, so it outranked a bare
 * .shd-shopnav__link:hover and repainted the hovered label in exactly the
 * terracotta used for the hovered pill background - the label vanished. Holding
 * every state at the higher weight, and resetting text-decoration explicitly,
 * keeps the label readable in all of them without reaching for !important.
 */

.shd-shopnav {
	--shd-primary: #A24522;
	--shd-primary-dark: #863818;
	--shd-secondary: #4E341B;
	--shd-text: #1C1106;
	--shd-ivory: #FBF8F3;
	--shd-border: #E5DCD2;
	display: block;
	width: 100%;
}

.shd-shopnav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.shd-shopnav__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---- Default ---- */

.shd-shopnav .shd-shopnav__link,
.shd-shopnav .shd-shopnav__link:link,
.shd-shopnav .shd-shopnav__link:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 22px;
	border: 1px solid var(--shd-border);
	border-radius: 3px;
	background-color: #FFFFFF;
	color: var(--shd-secondary);
	font-family: Manrope, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.8px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* ---- Hover, focus and press ---- */

.shd-shopnav .shd-shopnav__link:hover,
.shd-shopnav .shd-shopnav__link:focus,
.shd-shopnav .shd-shopnav__link:focus-visible,
.shd-shopnav .shd-shopnav__link:active {
	background-color: var(--shd-primary);
	border-color: var(--shd-primary);
	color: #FFFFFF;
	text-decoration: none;
}

/* Dark ring so the outline stays visible against the terracotta fill. */
.shd-shopnav .shd-shopnav__link:focus-visible {
	outline: 2px solid var(--shd-text);
	outline-offset: 2px;
}

/* ---- Current page ---- */

.shd-shopnav .shd-shopnav__link.is-current,
.shd-shopnav .shd-shopnav__link[aria-current="page"] {
	background-color: var(--shd-primary);
	border-color: var(--shd-primary);
	color: #FFFFFF;
	text-decoration: none;
	cursor: default;
}

/*
 * Current plus hover or focus. Deepening the fill rather than inverting it
 * keeps the white label at full contrast and still acknowledges the pointer.
 */
.shd-shopnav .shd-shopnav__link.is-current:hover,
.shd-shopnav .shd-shopnav__link.is-current:focus,
.shd-shopnav .shd-shopnav__link.is-current:focus-visible,
.shd-shopnav .shd-shopnav__link.is-current:active,
.shd-shopnav .shd-shopnav__link[aria-current="page"]:hover,
.shd-shopnav .shd-shopnav__link[aria-current="page"]:focus,
.shd-shopnav .shd-shopnav__link[aria-current="page"]:focus-visible {
	background-color: var(--shd-primary-dark);
	border-color: var(--shd-primary-dark);
	color: #FFFFFF;
	text-decoration: none;
}

@media (max-width: 1024px) {
	.shd-shopnav__list {
		gap: 8px;
	}

	.shd-shopnav .shd-shopnav__link,
	.shd-shopnav .shd-shopnav__link:link,
	.shd-shopnav .shd-shopnav__link:visited {
		height: 44px;
		padding: 0 18px;
	}
}

@media (max-width: 767px) {
	.shd-shopnav__list {
		gap: 8px;
	}

	.shd-shopnav .shd-shopnav__link,
	.shd-shopnav .shd-shopnav__link:link,
	.shd-shopnav .shd-shopnav__link:visited {
		height: 42px;
		padding: 0 14px;
		font-size: 11px;
		letter-spacing: 0.6px;
	}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.shd-shopnav .shd-shopnav__link {
		transition: none;
	}
}