/* Variables inherit into the SVG <use> tree, preserving each control's state. */
nav.nav .header-link {
	--dna-icon-color: var(--gray);
	--dna-icon-circle-fill: transparent;
	--dna-icon-circle-stroke: var(--gray);
}
nav.nav .header-link:hover,
nav.nav .header-link.is-active,
nav.nav .header-link.active,
nav.nav .header-link:focus-visible {
	--dna-icon-color: #fff;
	--dna-icon-circle-fill: var(--secondary-hover);
	--dna-icon-circle-stroke: #fff;
}
nav.nav button.header-search__btn {
	appearance: none;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font: inherit;
	color: inherit;
	line-height: inherit;
	outline-offset: 3px;
}
.arrow-btn {
	--dna-arrow-fill: white;
	--dna-arrow-border: black;
	--dna-arrow-stroke: black;
}
.arrow-btn:hover {
	--dna-arrow-fill: black;
	--dna-arrow-stroke: white;
}
.woocommerce-pagination a:is(.next, .prev) .arrow-btn {
	--dna-arrow-fill: var(--secondary-hover);
	--dna-arrow-border: var(--secondary-hover);
	--dna-arrow-stroke: white;
}
.woocommerce-pagination a:is(.next, .prev) .arrow-btn:is(:hover, :focus) {
	--dna-arrow-fill: var(--secondary);
}