/*
 * AverionHair Navbar.
 *
 * Scoped to .avh-nv / .avh-nv-announce / .avh-nv-panel. The one rule that reaches outside is the
 * theme-header suppression, printed inline from the settings and scoped to body.avh-nv-active.
 */

:root {
	--avh-nv-ink: var(--avh-black, #191410);
	--avh-nv-accent: var(--avh-gold, #c29a4f);
	--avh-nv-surface: var(--avh-cream, #f7f1e6);
	--avh-nv-bar: var(--avh-black, #191410);
	--avh-nv-height: 80px;
	--avh-nv-logo-h: 44px;
	--avh-nv-max: var(--avh-container, 1280px);
	--avh-nv-marquee: 40s;

	--avh-nv-font-heading: var(--avh-font-heading, "Fraunces", Georgia, "Times New Roman", serif);
	--avh-nv-font-body: var(--avh-font-body, "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif);
	--avh-nv-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--avh-nv-line: color-mix(in srgb, var(--avh-nv-ink) 10%, transparent);
}

/* --- Announcement bar ----------------------------------------------------------------------- */

.avh-nv-announce {
	position: relative;
	z-index: 40;
	overflow: hidden;
	background: var(--avh-nv-bar);
	color: #fff;
	font-family: var(--avh-nv-font-body);
}

.avh-nv-announce__track {
	display: flex;
	width: max-content;
	/* The second copy is what makes the loop seamless: translating by exactly -50% lands the
	   duplicate where the original started, so the reset is invisible. */
	animation: avh-nv-marquee var(--avh-nv-marquee) linear infinite;
	will-change: transform;
}

.avh-nv-announce__set {
	display: flex;
	align-items: center;
}

.avh-nv-announce__item,
.avh-nv-announce__static .avh-nv-announce__item {
	display: inline-flex;
	align-items: center;
	gap: 3rem;
	padding-block: 0.65rem;
	padding-inline-end: 3rem;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.7rem;
	letter-spacing: 0.22em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}

.avh-nv-announce__mark {
	color: var(--avh-nv-accent);
}

.avh-nv-announce__static {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2rem;
	justify-content: center;
	max-width: var(--avh-nv-max);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.avh-nv-announce__static .avh-nv-announce__item {
	padding-inline-end: 0;
	white-space: normal;
}

@keyframes avh-nv-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

/*
 * Motion that scrolls text horizontally, forever, is exactly what a reduced-motion preference is
 * asking to be spared. The messages stay - they are content, not decoration - and simply sit still.
 */
@media (prefers-reduced-motion: reduce) {
	.avh-nv-announce__track {
		animation: none;
		width: 100%;
		overflow-x: auto;
	}
	.avh-nv-announce__set:nth-child(2) {
		display: none;
	}
}

/* --- Header --------------------------------------------------------------------------------- */

.avh-nv {
	position: relative;
	z-index: 50;
	box-sizing: border-box;
	border-bottom: 1px solid var(--avh-nv-line);
	/* color-mix keeps the blur legible without hiding what is behind it. */
	background: color-mix(in srgb, var(--avh-nv-surface) 90%, transparent);
	backdrop-filter: blur(12px);
	color: var(--avh-nv-ink);
	font-family: var(--avh-nv-font-body);
}

/*
 * The header is a SIBLING of the announcement bar, never nested with it in a shared wrapper: a
 * sticky element only sticks within its parent's box, so a shared wrapper makes the header unstick
 * the moment that wrapper scrolls past.
 */
.avh-nv.is-sticky {
	position: sticky;
	/*
	 * Below the WordPress admin bar, not behind it. The admin bar is FIXED across the top for
	 * anyone signed in, so `top: 0` parked the header's top 32px under it - the shop's own staff
	 * saw a header with its logo cut in half. WordPress sets this variable whenever the admin bar
	 * is showing (32px, 46px on narrow screens) and leaves it unset otherwise, so visitors get 0.
	 */
	top: var(--wp-admin--admin-bar--height, 0px);
}

/* Under 600px the admin bar is no longer fixed - it scrolls away with the page - so a header
   stuck 46px down would leave a gap where the admin bar used to be. */
@media screen and (max-width: 600px) {
	.avh-nv.is-sticky {
		top: 0;
	}
}

.avh-nv *,
.avh-nv *::before,
.avh-nv *::after {
	box-sizing: border-box;
}

.avh-nv__inner {
	display: grid;
	align-items: center;
	gap: 1rem;
	max-width: var(--avh-nv-max);
	min-height: var(--avh-nv-height);
	margin-inline: auto;
	padding-inline: 1rem;
	grid-template-columns: 1fr auto 1fr;
}

@media (min-width: 640px) {
	.avh-nv__inner {
		padding-inline: 1.5rem;
	}
}

/* A left-aligned logo is two columns, not three, or the brand floats in the middle of nothing. */
.avh-nv.is-left .avh-nv__inner {
	grid-template-columns: auto 1fr;
}

.avh-nv.is-left .avh-nv__brand {
	order: -1;
	justify-self: start;
}

.avh-nv.is-left .avh-nv__left {
	justify-content: flex-start;
}

.avh-nv__left {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	min-width: 0;
}

.avh-nv__right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.15rem;
	min-width: 0;
}

.avh-nv__brand {
	display: flex;
	align-items: center;
	justify-self: center;
	/*
	 * min-width: 0 is load-bearing. The centre column is `auto`, so without it a wide logo grows
	 * the column to its natural width and squeezes the 1fr columns either side to nothing - which
	 * wraps the whole utilities row underneath the brand.
	 */
	min-width: 0;
	max-width: 100%;
	text-decoration: none;
}

.avh-nv__logo {
	display: flex;
	align-items: center;
	max-height: var(--avh-nv-logo-h);
}

/*
 * EVERY image inside the logo slot, not just the two we build. get_custom_logo() is WordPress's
 * markup and carries its own width and height attributes; without this rule a site using the
 * Customizer logo gets it at full natural size, which on a wordmark is several hundred pixels
 * tall. The descendant selector covers all three branches at once.
 */
.avh-nv .avh-nv__logo img,
.avh-nv .avh-nv__brand img,
.avh-nv img.custom-logo {
	display: block;
	width: auto;
	height: var(--avh-nv-logo-h);
	max-width: 100%;
	object-fit: contain;
}

/*
 * A belt-and-braces cap on the slot itself. If a plugin filters the logo markup into a shape we
 * did not anticipate, this still stops it growing the header - the height rule above targets the
 * image, and this one targets whatever contains it.
 */
.avh-nv__brand,
.avh-nv__logo,
.avh-nv__logo-wrap {
	max-height: var(--avh-nv-logo-h);
	overflow: hidden;
}

.avh-nv__wordmark {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.avh-nv__wordmark {
	color: var(--avh-nv-ink);
	font-family: var(--avh-nv-font-heading);
	font-size: 1.4rem;
	letter-spacing: 0.02em;
	white-space: nowrap;
	line-height: 1.2;
}

/* The header must never be shorter than the logo it is holding. */
.avh-nv__inner {
	min-height: max(var(--avh-nv-height), calc(var(--avh-nv-logo-h) + 1.5rem));
}

/* --- Links ---------------------------------------------------------------------------------- */

.avh-nv__nav {
	display: none;
	align-items: center;
	gap: 0.15rem;
	/* Never wrap the row itself, and let it shrink rather than push the grid wider. */
	flex-wrap: nowrap;
	min-width: 0;
}

@media (min-width: 900px) {
	.avh-nv__nav {
		display: flex;
	}

	/*
	 * The burger is a phone control at this width - normally. The bar carries every link, so a
	 * second way to the same list would be clutter.
	 */
	.avh-nv__burger {
		display: none;
	}

	/*
	 * UNLESS links were left out of the bar, which the template says with `is-overflow`.
	 *
	 * Then the burger is the ONLY route to them and hiding it would delete part of the navigation
	 * for every desktop visitor - the links would be in the markup, crawlable, and unreachable by
	 * anybody using the site. The class is set from the same count that trims the bar, so the two
	 * cannot drift apart.
	 */
	.avh-nv.is-overflow .avh-nv__burger {
		display: inline-flex;
	}
}

/*
 * Between the point the desktop nav appears and a comfortably wide screen there is a band where
 * several nowrap labels plus the utilities genuinely do not fit. Tightening the labels there buys
 * the room back - and is far better than the alternatives, which are wrapping (what this rule
 * exists to prevent) or a horizontal scrollbar inside a header.
 */
@media (min-width: 900px) and (max-width: 1200px) {
	.avh-nv__link {
		padding-inline: 0.5rem;
		font-size: 0.84rem;
	}
	.avh-nv__icon {
		width: 2.2rem;
	}
}

.avh-nv__link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.55rem 0.8rem;
	border: 0;
	border-radius: 10px;
	background: none;
	color: color-mix(in srgb, var(--avh-nv-ink) 80%, transparent);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	/*
	 * A nav label is a name, not a sentence. Left to wrap, "Track Your Order" breaks over two
	 * lines and takes the whole header row with it - each item becomes its own two-line block and
	 * the bar reads as a paragraph rather than a menu.
	 */
	white-space: nowrap;
	cursor: pointer;
	transition: color 200ms var(--avh-nv-ease);
}

.avh-nv__link:hover,
.avh-nv__link.is-current {
	color: var(--avh-nv-accent);
}

.avh-nv__link.is-current {
	/* The colour alone would be the only signal, and colour alone is not a signal for everyone. */
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
}

.avh-nv__icon {
	display: inline-flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: color-mix(in srgb, var(--avh-nv-ink) 72%, transparent);
	cursor: pointer;
	text-decoration: none;
	transition: color 200ms var(--avh-nv-ease);
}

.avh-nv__icon:hover {
	color: var(--avh-nv-accent);
}

.avh-nv__currency {
	display: none;
}

@media (min-width: 640px) {
	.avh-nv__currency {
		display: inline-flex;
		align-items: center;
		margin-right: 0.25rem;
	}
}

/* --- Cart badge ----------------------------------------------------------------------------- */

.avh-nv__cart-count {
	position: absolute;
	top: 0.25rem;
	right: 0.15rem;
	display: none;
	min-width: 1.05rem;
	height: 1.05rem;
	padding-inline: 0.25rem;
	border-radius: 999px;
	background: var(--avh-nv-accent);
	color: #fff;
	font-size: 0.62rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	line-height: 1.05rem;
	text-align: center;
}

.avh-nv__cart-count.is-filled {
	display: block;
}

/* --- Mega menu ------------------------------------------------------------------------------ */

.avh-nv__mega-wrap {
	position: relative;
	/*
	 * Two controls that read as one item: the Shop link and the chevron that opens the panel. The
	 * gap is zero and the padding is tightened on each so they sit together rather than looking
	 * like two separate nav entries - the shopper should see one thing with a disclosure on it.
	 */
	display: inline-flex;
	align-items: center;
	gap: 0;
}

.avh-nv .avh-nv__mega-link {
	padding-right: 0.25rem;
}

.avh-nv .avh-nv__mega-trigger--icon {
	padding-left: 0.15rem;
	padding-right: 0.55rem;
}

/*
 * The whole group underlines when either half is hovered, because they are one item to the reader.
 * :has() is progressive - where it is unsupported each control just highlights on its own, which is
 * a smaller version of the same idea rather than a broken one.
 */
.avh-nv__mega-wrap:hover .avh-nv__mega-link,
.avh-nv__mega-wrap:focus-within .avh-nv__mega-link {
	color: var(--avh-nv-accent);
}

.avh-nv__mega-trigger svg {
	transition: transform 200ms var(--avh-nv-ease);
}

.avh-nv__mega-wrap.is-open .avh-nv__mega-trigger svg {
	transform: rotate(180deg);
}

.avh-nv__mega {
	position: absolute;
	left: 0;
	top: calc(100% + 0.5rem);
	z-index: 60;
	width: min(38rem, calc(100vw - 3rem));
	border: 1px solid var(--avh-nv-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 24px 48px rgba(25, 20, 16, 0.14);
	overflow: hidden;
}

.avh-nv__mega-inner {
	display: grid;
	gap: 1.5rem;
	padding: 1.5rem;
}

.avh-nv__mega.has-feature .avh-nv__mega-inner {
	grid-template-columns: 1.1fr 1fr;
}

.avh-nv__eyebrow {
	display: block;
	margin: 0 0 0.75rem;
	color: color-mix(in srgb, var(--avh-nv-ink) 45%, transparent);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}

.avh-nv__mega-all {
	display: block;
	margin-bottom: 0.5rem;
	padding: 0.5rem 0.7rem;
	border-radius: 8px;
	color: var(--avh-nv-ink);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.avh-nv__mega-all:hover {
	background: var(--avh-nv-surface);
}

.avh-nv__mega-cols {
	display: grid;
	gap: 0 1rem;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.avh-nv__mega-cols ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.avh-nv__mega-cols li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.avh-nv__mega-cols li::before,
.avh-nv__mega-cols li::marker {
	content: none;
}

.avh-nv__mega-cols a {
	display: block;
	padding: 0.45rem 0.7rem;
	border-radius: 8px;
	color: color-mix(in srgb, var(--avh-nv-ink) 75%, transparent);
	font-size: 0.88rem;
	text-decoration: none;
	transition: background-color 200ms var(--avh-nv-ease), color 200ms var(--avh-nv-ease);
}

.avh-nv__mega-cols a:hover {
	background: var(--avh-nv-surface);
	color: var(--avh-nv-ink);
}

.avh-nv__mega-feature {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 11rem;
	padding: 1.25rem;
	border-radius: 12px;
	/* The gradient is the fallback AND the scrim: with an image it darkens the bottom so the
	   text stays readable whatever the photograph is doing. */
	background-color: var(--avh-nv-ink);
	background-image: linear-gradient(to top, rgba(25, 20, 16, 0.88), rgba(25, 20, 16, 0.25)), var(--avh-nv-feature, linear-gradient(135deg, #191410, #2a221a));
	background-size: cover;
	background-position: center;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
}

.avh-nv__mega-feature .avh-nv__eyebrow {
	color: var(--avh-nv-accent);
	margin-bottom: 0.3rem;
}

.avh-nv__mega-feature-title {
	font-family: var(--avh-nv-font-heading);
	font-size: 1.25rem;
	line-height: 1.2;
}

.avh-nv__mega-feature-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.5rem;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.78rem;
	transition: color 200ms var(--avh-nv-ease);
}

.avh-nv__mega-feature:hover .avh-nv__mega-feature-cta {
	color: var(--avh-nv-accent);
}

/* --- Panels: menu, search, cart ------------------------------------------------------------- */

.avh-nv-panel {
	position: fixed;
	inset: 0;
	z-index: 100;
	font-family: var(--avh-nv-font-body);
}

.avh-nv-panel__scrim {
	position: absolute;
	inset: 0;
	background: rgba(25, 20, 16, 0.45);
	backdrop-filter: blur(2px);
	animation: avh-nv-fade 200ms var(--avh-nv-ease);
}

.avh-nv-panel__sheet {
	position: absolute;
	display: flex;
	flex-direction: column;
	background: var(--avh-nv-surface);
	color: var(--avh-nv-ink);
	box-shadow: 0 24px 60px rgba(25, 20, 16, 0.28);
}

.avh-nv-panel__sheet--left,
.avh-nv-panel__sheet--right {
	top: 0;
	bottom: 0;
	width: min(22rem, 88vw);
}

.avh-nv-panel__sheet--left {
	left: 0;
	animation: avh-nv-in-left 260ms var(--avh-nv-ease);
}

.avh-nv-panel__sheet--right {
	right: 0;
	animation: avh-nv-in-right 260ms var(--avh-nv-ease);
}

.avh-nv-panel__sheet--top {
	left: 0;
	right: 0;
	top: 0;
	animation: avh-nv-in-top 220ms var(--avh-nv-ease);
}

@keyframes avh-nv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes avh-nv-in-left { from { transform: translate3d(-100%, 0, 0); } }
@keyframes avh-nv-in-right { from { transform: translate3d(100%, 0, 0); } }
@keyframes avh-nv-in-top { from { transform: translate3d(0, -100%, 0); } }

@media (prefers-reduced-motion: reduce) {
	.avh-nv-panel__sheet,
	.avh-nv-panel__scrim {
		animation: none;
	}
}

.avh-nv-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem 1.25rem;
	border-bottom: 1px solid var(--avh-nv-line);
}

.avh-nv-panel__head .avh-nv__eyebrow {
	margin: 0;
}

.avh-nv-panel__body {
	flex: 1 1 auto;
	padding: 1rem 0.75rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.avh-nv-panel__foot {
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--avh-nv-line);
}

.avh-nv-panel__label {
	margin: 1.25rem 0 0.4rem;
	padding-inline: 0.75rem;
}

.avh-nv-panel__link {
	display: block;
	padding: 0.7rem 0.75rem;
	border-radius: 10px;
	color: var(--avh-nv-ink);
	font-size: 0.98rem;
	text-decoration: none;
}

.avh-nv-panel__link:hover,
.avh-nv-panel__link.is-current {
	background: color-mix(in srgb, var(--avh-nv-ink) 6%, transparent);
	color: var(--avh-nv-accent);
}

.avh-nv-panel__link.is-sub {
	padding-left: 1.25rem;
	color: color-mix(in srgb, var(--avh-nv-ink) 72%, transparent);
	font-size: 0.92rem;
}

.avh-nv-panel__currency {
	margin-bottom: 0.75rem;
}

/* --- Search --------------------------------------------------------------------------------- */

/*
 * EVERY BUTTON IN THIS PANEL STATES ITS OWN BACKGROUND, BORDER AND COLOUR.
 *
 * The submit control used to be a bare <button> carrying an SVG, styled only by our icon class.
 * Blocksy - like most themes - styles `button` and `[type="submit"]` generally: a filled gold pill
 * with a light foreground. Our icon inherits `currentColor`, so it came out gold-on-gold, and the
 * whole control rendered as a featureless gold circle. Nothing was missing from the markup; the
 * icon was there, drawn in the background colour.
 *
 * That is the same collision as the product card in a widget list and the notices in the account
 * area, and the same rule applies: our markup is not the shape a theme was written against, so
 * anything we hand to one has to state its own appearance rather than inherit it.
 */

.avh-nv-search__inner {
	width: 100%;
	max-width: var(--avh-nv-max, 78rem);
	margin-inline: auto;
	padding: 1.6rem 1.25rem 1.75rem;
}

.avh-nv-search {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
}

/* The field and the things sitting inside it. */
.avh-nv-search__field {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	min-width: 0;
}

.avh-nv-search__glass {
	position: absolute;
	left: 1rem;
	display: flex;
	color: color-mix(in srgb, var(--avh-nv-ink) 45%, transparent);
	pointer-events: none;
}

/*
 * Doubled class on the input, because `width` is the declaration that decides whether this reads as
 * a search bar or as the stubby 20-character box a browser gives an <input type="search"> by
 * default - and a theme setting `input { width: auto }` is common enough to plan for.
 */
.avh-nv-search .avh-nv-search__input,
.avh-nv-search input[type="search"].avh-nv-search__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	max-width: none;
	height: auto;
	margin: 0;
	padding: 1rem 2.6rem 1rem 3rem;
	border: 1px solid var(--avh-nv-line);
	border-radius: 14px;
	background: #fff;
	color: var(--avh-nv-ink);
	font-family: inherit;
	font-size: 1.05rem;
	line-height: 1.3;
	appearance: none;
}

.avh-nv-search .avh-nv-search__input::placeholder {
	color: color-mix(in srgb, var(--avh-nv-ink) 45%, transparent);
	/* The placeholder is a sentence; letting it clip mid-word looks like a broken field. */
	text-overflow: ellipsis;
}

/* WebKit draws its own clear button on a search input, beside ours. */
.avh-nv-search .avh-nv-search__input::-webkit-search-cancel-button,
.avh-nv-search .avh-nv-search__input::-webkit-search-decoration {
	appearance: none;
}

.avh-nv-search .avh-nv-search__input:focus {
	border-color: var(--avh-nv-accent);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--avh-nv-accent) 25%, transparent);
}

.avh-nv-search .avh-nv-search__clear {
	position: absolute;
	right: 0.7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--avh-nv-ink) 8%, transparent);
	color: var(--avh-nv-ink);
	cursor: pointer;
}

.avh-nv-search .avh-nv-search__submit {
	flex: 0 0 auto;
	width: auto;
	height: auto;
	margin: 0;
	padding: 1rem 1.6rem;
	border: 1px solid var(--avh-nv-ink);
	border-radius: 999px;
	background: var(--avh-nv-ink);
	color: var(--avh-nv-surface);
	font-family: inherit;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.avh-nv-search .avh-nv-search__submit:hover {
	background: var(--avh-nv-accent);
	border-color: var(--avh-nv-accent);
}

.avh-nv-search .avh-nv-search__close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--avh-nv-ink);
	cursor: pointer;
}

.avh-nv-search .avh-nv-search__close:hover {
	background: color-mix(in srgb, var(--avh-nv-ink) 7%, transparent);
}

/* --- Suggestions ---------------------------------------------------------------------------- */

.avh-nv-search__results {
	margin-top: 0.85rem;
	/* Capped and scrollable: on a laptop a ten-row list plus the header can otherwise reach the
	   bottom of the viewport, and the panel slides over the page rather than pushing it down. */
	max-height: min(26rem, 52vh);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.avh-nv-search__result {
	display: flex;
	gap: 0.9rem;
	align-items: center;
	padding: 0.6rem 0.7rem;
	border-radius: 12px;
	color: var(--avh-nv-ink);
	text-decoration: none;
}

/*
 * Hover and keyboard selection are the SAME state on purpose. Two different highlights on one list
 * means the person arrowing down cannot tell which row Enter will open once the mouse has drifted
 * over another one.
 */
.avh-nv-search__result:hover,
.avh-nv-search__result.is-active {
	background: color-mix(in srgb, var(--avh-nv-ink) 6%, transparent);
}

.avh-nv-search__result-media {
	flex: 0 0 auto;
	display: block;
	width: 3.25rem;
	height: 3.25rem;
	overflow: hidden;
	border-radius: 8px;
	background: color-mix(in srgb, var(--avh-nv-ink) 7%, transparent);
}

.avh-nv-search__result-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.avh-nv-search__result-text {
	flex: 1 1 auto;
	min-width: 0;
}

.avh-nv-search__result-name {
	display: block;
	font-family: var(--avh-nv-font-heading);
	font-size: 1rem;
	line-height: 1.3;
}

/* The matched run. Weight and a wash, not a yellow highlighter. */
.avh-nv-search__result-name mark {
	background: color-mix(in srgb, var(--avh-nv-accent) 22%, transparent);
	color: inherit;
	font-weight: 600;
}

.avh-nv-search__result-price {
	display: block;
	margin-top: 0.15rem;
	color: color-mix(in srgb, var(--avh-nv-ink) 65%, transparent);
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

.avh-nv-search__result-price del {
	opacity: 0.55;
	margin-right: 0.35rem;
}

.avh-nv-search__result-price ins {
	text-decoration: none;
}

.avh-nv-search__result-note {
	display: block;
	margin-top: 0.1rem;
	color: color-mix(in srgb, var(--avh-nv-ink) 50%, transparent);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.avh-nv-search__all {
	display: block;
	margin-top: 0.35rem;
	padding: 0.75rem 0.7rem;
	border-top: 1px solid var(--avh-nv-line);
	color: var(--avh-nv-accent);
	font-size: 0.85rem;
	text-decoration: none;
}

.avh-nv-search__empty {
	margin: 0;
	padding: 1.25rem 0.7rem;
	color: color-mix(in srgb, var(--avh-nv-ink) 60%, transparent);
	font-size: 0.92rem;
}

/* --- Shortcuts under an empty field --------------------------------------------------------- */

.avh-nv-search__shortcuts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	align-items: center;
	margin-top: 1rem;
}

.avh-nv-search__shortcuts-label {
	margin-right: 0.25rem;
	color: color-mix(in srgb, var(--avh-nv-ink) 50%, transparent);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.avh-nv-search__chip {
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--avh-nv-line);
	border-radius: 999px;
	color: var(--avh-nv-ink);
	font-size: 0.85rem;
	text-decoration: none;
}

.avh-nv-search__chip:hover {
	border-color: var(--avh-nv-accent);
	color: var(--avh-nv-accent);
}

@media (max-width: 640px) {
	.avh-nv-search__inner {
		padding: 1.1rem 1rem 1.25rem;
	}

	/*
	 * The word "Search" goes; the field needs the room more than the button needs a label, and the
	 * keyboard's own return key submits the form on a phone anyway.
	 */
	.avh-nv-search .avh-nv-search__submit {
		display: none;
	}

	.avh-nv-search .avh-nv-search__input,
	.avh-nv-search input[type="search"].avh-nv-search__input {
		/* 16px or larger, or iOS Safari zooms the whole page when the field is focused. */
		font-size: 1rem;
		padding: 0.9rem 2.5rem 0.9rem 2.8rem;
	}

	.avh-nv-search__result-media {
		width: 2.75rem;
		height: 2.75rem;
	}
}

/* --- Cart drawer ---------------------------------------------------------------------------- */

.avh-nv__cart-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

.avh-nv__cart-empty {
	padding: 2.5rem 1.25rem;
	text-align: center;
}

.avh-nv__cart-items {
	flex: 1 1 auto;
	margin: 0;
	padding: 0.75rem;
	list-style: none;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.avh-nv__cart-item {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	margin: 0;
	padding: 0.75rem 0.5rem;
	border-bottom: 1px solid var(--avh-nv-line);
	list-style: none;
}

.avh-nv__cart-item::before,
.avh-nv__cart-item::marker {
	content: none;
}

.avh-nv__cart-media {
	flex: 0 0 3.5rem;
	width: 3.5rem;
	overflow: hidden;
	border-radius: 8px;
	background: color-mix(in srgb, var(--avh-nv-ink) 6%, transparent);
}

.avh-nv__cart-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.avh-nv__cart-detail {
	flex: 1 1 auto;
	min-width: 0;
}

.avh-nv__cart-name {
	display: block;
	color: var(--avh-nv-ink);
	font-family: var(--avh-nv-font-heading);
	font-size: 0.95rem;
	line-height: 1.3;
	text-decoration: none;
}

.avh-nv__cart-meta {
	display: block;
	margin-top: 0.2rem;
	color: color-mix(in srgb, var(--avh-nv-ink) 55%, transparent);
	font-size: 0.8rem;
}

.avh-nv__cart-right {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.35rem;
}

.avh-nv__cart-subtotal {
	font-size: 0.88rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.avh-nv__cart-remove {
	color: color-mix(in srgb, var(--avh-nv-ink) 45%, transparent);
	line-height: 0;
}

.avh-nv__cart-remove:hover {
	color: #b3261e;
}

/* While WooCommerce removes it: still there, plainly on its way out, not clickable twice. */
.avh-nv__cart-item {
	transition: opacity 200ms ease;
}

.avh-nv__cart-item.is-removing {
	opacity: 0.4;
	pointer-events: none;
}

.avh-nv__cart-body[aria-busy="true"] .avh-nv__cart-foot {
	opacity: 0.6;
}

.avh-nv__cart-foot {
	flex: 0 0 auto;
	padding: 1.1rem 1.25rem;
	border-top: 1px solid var(--avh-nv-line);
}

.avh-nv__cart-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 0.25rem;
	font-size: 0.95rem;
}

.avh-nv__cart-total strong {
	font-family: var(--avh-nv-font-heading);
	font-size: 1.2rem;
	font-variant-numeric: tabular-nums;
}

.avh-nv__cart-note {
	margin: 0 0 1rem;
	color: color-mix(in srgb, var(--avh-nv-ink) 55%, transparent);
	font-size: 0.78rem;
}

/* --- Buttons -------------------------------------------------------------------------------- */

.avh-nv__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-bottom: 0.5rem;
	padding: 0.85rem 1.4rem;
	border: 1px solid var(--avh-nv-ink);
	border-radius: 999px;
	background: var(--avh-nv-ink);
	color: var(--avh-nv-surface);
	font-family: inherit;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 200ms var(--avh-nv-ease);
}

.avh-nv__button:hover {
	background: var(--avh-nv-accent);
	border-color: var(--avh-nv-accent);
	color: #fff;
}

.avh-nv__button--ghost {
	margin-bottom: 0;
	background: transparent;
	color: var(--avh-nv-ink);
}

/* --- Scroll lock ---------------------------------------------------------------------------- */

/*
 * position:fixed rather than overflow:hidden. On iOS Safari, overflow:hidden on body does not stop
 * the page behind a drawer from scrolling; the script stores the scroll position and restores it
 * on close, because fixing the body otherwise jumps the visitor back to the top.
 */
body.avh-nv-locked {
	position: fixed;
	inset-inline: 0;
	overflow: hidden;
	width: 100%;
}

/* --- Utility -------------------------------------------------------------------------------- */

.avh-nv .screen-reader-text,
.avh-nv-panel .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.avh-nv a:focus-visible,
.avh-nv button:focus-visible,
.avh-nv-panel a:focus-visible,
.avh-nv-panel button:focus-visible,
.avh-nv-panel input:focus-visible {
	outline: 2px solid var(--avh-nv-accent);
	outline-offset: 3px;
}

@media print {
	.avh-nv-announce,
	.avh-nv-panel {
		display: none;
	}
	.avh-nv {
		position: static;
		background: none;
		border-bottom: 1px solid #ccc;
	}
}

/* --- Announcement bar: links, and closing it ------------------------------------------------ */

.avh-nv-announce__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.avh-nv-announce__link:hover {
	text-decoration-color: currentColor;
}

/*
 * The close button sits over the end of the bar rather than in the flow, because the marquee track
 * is a moving strip and an element inside it would travel with the messages.
 */
.avh-nv-announce.is-dismissable {
	position: relative;
	/* Room at the end so a long message never slides underneath the button. */
	padding-right: 2.5rem;
}

.avh-nv-announce__close {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	transform: translateY(-50%);
	opacity: 0.6;
	cursor: pointer;
}

.avh-nv-announce__close:hover,
.avh-nv-announce__close:focus-visible {
	opacity: 1;
}

/* --- "Added to your bag" toast ------------------------------------------------------------- */

/*
 * Bottom centre on a phone, bottom right on a desktop - near the thumb, and away from the header
 * the shopper may have scrolled out of sight. Under the drawers (z-index 100) so "View bag"
 * opening the drawer is never covered by the message that opened it.
 */
.avh-nv-toast-region {
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	left: max(1rem, env(safe-area-inset-left));
	z-index: 90;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

@media (min-width: 720px) {
	.avh-nv-toast-region {
		left: auto;
		justify-content: flex-end;
	}
}

.avh-nv-toast {
	display: flex;
	gap: 0.85rem;
	align-items: center;
	width: min(100%, 26rem);
	padding: 0.8rem 0.6rem 0.8rem 0.9rem;
	border-radius: 1rem;
	background: var(--avh-nv-ink, #191410);
	box-shadow: 0 18px 40px -12px rgba(25, 20, 16, 0.45);
	color: #fffdf9;
	font-family: var(--avh-nv-font-body, "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif);
	opacity: 0;
	pointer-events: auto;
	transform: translateY(0.75rem);
	transition: opacity 220ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.avh-nv-toast.is-in {
	opacity: 1;
	transform: none;
}

.avh-nv-toast__tick {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--avh-nv-accent, #c29a4f);
	color: var(--avh-nv-ink, #191410);
}

/* Icons state size and fill (Jeg Elementor Kit's `.elementor-element svg` lesson). */
.avh-nv-toast svg {
	display: block;
	flex: none;
	fill: none;
}

.avh-nv-toast__tick svg {
	width: 16px;
	height: 16px;
}

.avh-nv-toast__text {
	display: grid;
	flex: 1 1 auto;
	gap: 0.1rem;
	min-width: 0;
}

.avh-nv-toast__title {
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.3;
}

.avh-nv-toast__name {
	overflow: hidden;
	color: color-mix(in srgb, #fffdf9 72%, var(--avh-nv-ink, #191410));
	font-size: 0.8rem;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.avh-nv-toast .avh-nv-toast__view {
	flex: none;
	padding: 0.55rem 0.9rem;
	border-radius: 999px;
	background: #fffdf9;
	color: var(--avh-nv-ink, #191410);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.avh-nv-toast .avh-nv-toast__view:hover,
.avh-nv-toast .avh-nv-toast__view:focus-visible {
	background: var(--avh-nv-accent, #c29a4f);
}

.avh-nv-toast .avh-nv-toast__close {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 2rem;
	height: 2rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: color-mix(in srgb, #fffdf9 70%, var(--avh-nv-ink, #191410));
	cursor: pointer;
}

.avh-nv-toast .avh-nv-toast__close:hover,
.avh-nv-toast .avh-nv-toast__close:focus-visible {
	color: #fffdf9;
}

.avh-nv-toast__close svg {
	width: 14px;
	height: 14px;
}

.avh-nv-toast :focus-visible {
	outline: 2px solid var(--avh-nv-accent, #c29a4f);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.avh-nv-toast {
		transform: none;
		transition: opacity 150ms linear;
	}
}