/**
 * Armeria 3S 1.4.0 — header styles: one-row (default), overlay, compact, split, plus the colour-from-slider
 * (header sync) rules for every style. Loaded after header.css, only when a bar style or header sync is on.
 * Classic / centered rules stay in header.css. Tokens: --a3s-* (base.css), --a3s-hf-* (header.css).
 * Per-site values (bar height, logo height, sync speed) come from an inline :root block (inc/assets.php).
 * Motion: transform / opacity / clip-path only for the search; nothing moves with prefers-reduced-motion.
 */

body.a3s-header-bar {
	--a3s-bar-h: var(--a3s-bar-h-d, 80px);
	--a3s-bar-pad: 24px;
	--a3s-logo-dh: 52px;
	--a3s-bar-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------- Shell: the header keeps its sticky / z-index, the bar carries the colours ---------- */
.a3s-header--bar {
	background: none;
	box-shadow: none;
}

body.a3s-sticky-header .a3s-header--bar {
	/* Top bar scrolls away (header-styles.js measures it into --a3s-bar-stick); compact also slides up --a3s-cut. */
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--a3s-bar-stick, 0px) - var(--a3s-cut-on, 0px));
}

@media (max-width: 600px) {
	body.a3s-sticky-header.admin-bar .a3s-header--bar {
		top: calc(var(--a3s-bar-stick, 0px) - var(--a3s-cut-on, 0px));
	}
}

/* Landscape phones: slim bars stay sticky (header.css un-sticks the tall classic header). */
@media (max-width: 991.98px) and (max-height: 500px) {
	body.a3s-sticky-header .a3s-header--bar,
	body.a3s-sticky-header.admin-bar .a3s-header--bar {
		position: sticky;
	}
}

.a3s-header--bar .a3s-topbar__inner {
	min-height: 36px;
	padding: 0 24px;
	font-size: 0.8125rem;
}

@media (max-width: 991.98px) {
	body.a3s-header-bar {
		--a3s-bar-h: 60px;
		--a3s-bar-pad: 12px;
		--a3s-logo-dh: 36px;
	}

	.a3s-header--bar .a3s-topbar__inner {
		min-height: 40px;
		padding: 4px 12px;
		font-size: 12px;
	}
}

/* ---------- Bar ---------- */
.a3s-bar {
	--a3s-bar-bg: var(--a3s-color-bg);
	--a3s-bar-fg: var(--a3s-color-text);
	position: relative;
	border-bottom: 1px solid var(--a3s-color-divider);
	background: var(--a3s-hdr-bg, var(--a3s-bar-bg));
	color: var(--a3s-hdr-fg, var(--a3s-bar-fg));
}

/* Slider colour on: no light hairline between the painted bar and the image. */
.a3s-header[data-sync="bg"] .a3s-bar {
	border-bottom-color: transparent;
}

.a3s-header[data-tone="dark"] .a3s-bar {
	--a3s-bar-fg: #fff;
}

.a3s-header.is-scrolled .a3s-bar {
	box-shadow: 0 4px 14px rgba(35, 31, 32, 0.12);
}

.a3s-bar__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	max-width: var(--a3s-hf-wide);
	height: var(--a3s-bar-h);
	margin-inline: auto;
	padding-inline: var(--a3s-bar-pad);
}

.a3s-bar__logo {
	flex: none;
	line-height: 0;
}

.a3s-bar__logo .a3s-logo {
	display: flex;
}

.a3s-bar__logo .a3s-logo__img {
	width: auto;
	max-width: none;
	height: var(--a3s-logo-h, var(--a3s-logo-dh));
	object-fit: contain;
}

@media (max-width: 991.98px) {
	body.a3s-has-logo-h .a3s-bar__logo .a3s-logo__img {
		height: calc(var(--a3s-logo-h) * 0.72);
	}
}

.a3s-bar__burger {
	display: none;
	margin-left: -10px;
}

/* Menu inline in the row. Links fill the bar height so dropdown / mega panels open at its bottom edge. */
.a3s-nav--bar {
	flex: 1 1 0;
	align-self: stretch;
	min-width: 0;
	background: none;
	color: inherit;
}

.a3s-nav--bar .a3s-nav__inner {
	display: flex;
	position: static;
	max-width: none;
	height: 100%;
}

.a3s-nav--bar .a3s-menu {
	flex: 0 1 auto;
	flex-wrap: nowrap;
	gap: 2px;
}

.a3s-nav--bar .a3s-menu > li {
	flex: none;
}

.a3s-bar .a3s-nav .a3s-menu > li > a {
	position: relative;
	min-height: 44px;
	padding: 0 14px;
	background: none;
	color: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.a3s-bar .a3s-nav .a3s-menu > li > a::after {
	content: "";
	position: absolute;
	right: 14px;
	bottom: calc(50% - 20px);
	left: 14px;
	height: 2px;
	background: var(--a3s-color-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.22s var(--a3s-bar-ease);
}

.a3s-bar .a3s-nav .a3s-menu > li.is-open > a,
.a3s-bar .a3s-nav .a3s-menu > .current-menu-item > a,
.a3s-bar .a3s-nav .a3s-menu > .current-menu-ancestor > a {
	background: none;
	color: inherit;
}

.a3s-bar .a3s-nav .a3s-menu > li.is-open > a::after,
.a3s-bar .a3s-nav .a3s-menu > .current-menu-item > a::after,
.a3s-bar .a3s-nav .a3s-menu > .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

@media (hover: hover) {
	.a3s-bar .a3s-nav .a3s-menu > li:hover > a {
		background: none;
		color: inherit;
	}

	.a3s-bar .a3s-nav .a3s-menu > li:hover > a::after {
		transform: scaleX(1);
	}
}

.a3s-bar .a3s-nav a:focus-visible,
.a3s-bar .a3s-nav button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

.a3s-bar .a3s-nav .a3s-mega__inner {
	max-width: 1296px;
	margin-inline: auto;
}

/* Tools: search · icons · button */
.a3s-bar__tools {
	display: flex;
	flex: none;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.a3s-bar__icons {
	display: flex;
	align-items: center;
	gap: 2px;
}

.a3s-bar .a3s-hicon {
	justify-content: center;
	min-width: 44px;
	color: inherit;
}

.a3s-bar .a3s-hicon__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (hover: hover) {
	.a3s-bar .a3s-hicon:hover,
	.a3s-bar .a3s-search__open:hover,
	.a3s-bar .a3s-iconbtn:hover {
		color: inherit;
		opacity: 0.7;
	}
}

.a3s-bar .a3s-hicon,
.a3s-bar .a3s-search__open,
.a3s-bar .a3s-iconbtn {
	transition: opacity 0.15s ease;
}

.a3s-bar__cta {
	min-height: 40px;
	margin-left: 12px;
	padding: 0 18px;
	font-size: 0.875rem;
	white-space: nowrap;
}

/* ---------- Search: icon that opens a field (CSS :focus-within, works without JS) ---------- */
.a3s-search--expand {
	position: relative;
	flex: none;
	width: 44px;
	height: 44px;
}

.a3s-search--expand .a3s-search__form {
	position: static; /* header.css makes it relative: the field must anchor to the search box / bar */
	height: 100%;
}

.a3s-search__open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: inherit;
	cursor: pointer;
}

.a3s-search--expand .a3s-search__field {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 6;
	display: flex;
	align-items: center;
	width: min(340px, calc(100vw - 24px));
	height: 44px;
	border-bottom: 2px solid var(--a3s-color-primary);
	background: var(--a3s-color-bg);
	color: var(--a3s-color-text);
	opacity: 0;
	pointer-events: none;
	clip-path: inset(0 0 0 100%);
	transition: clip-path 0.22s var(--a3s-bar-ease), opacity 0.12s ease;
}

.a3s-search--expand:focus-within .a3s-search__field {
	opacity: 1;
	pointer-events: auto;
	clip-path: inset(0);
}

.a3s-search--expand .a3s-search__input {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 8px 0 14px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.a3s-search--expand .a3s-search__input:focus {
	box-shadow: none;
}

.a3s-search--expand .a3s-search__submit {
	position: static;
	flex: none;
	width: 44px;
	height: 44px;
}

.a3s-search--expand .a3s-search__results {
	top: calc(100% + (var(--a3s-bar-h) - 44px) / 2);
	right: 0;
	left: auto;
	width: min(420px, calc(100vw - 24px));
	color: var(--a3s-color-text);
}

/* Wide screens, "always visible field" option. */
@media (min-width: 1200px) {
	.a3s-search--field {
		width: 240px;
		height: auto;
	}

	.a3s-search--field .a3s-search__open {
		display: none;
	}

	.a3s-search--field .a3s-search__field {
		position: static;
		width: 100%;
		height: 40px;
		border: 1px solid var(--a3s-color-border);
		border-radius: var(--a3s-radius-lg, 4px);
		background: var(--a3s-color-surface);
		opacity: 1;
		pointer-events: auto;
		clip-path: none;
		transition: border-color 0.15s ease, box-shadow 0.15s ease;
	}

	.a3s-search--field:focus-within .a3s-search__field {
		border-color: var(--a3s-color-primary);
		box-shadow: var(--a3s-hf-ring);
	}

	.a3s-search--field .a3s-search__input,
	.a3s-search--field .a3s-search__submit {
		height: 38px;
	}

	.a3s-search--field .a3s-search__submit {
		width: 40px;
	}

	.a3s-search--field .a3s-search__results {
		top: calc(100% + 4px);
		right: auto;
		left: 0;
		width: min(420px, 90vw);
	}
}

/* ---------- Phones / tablets, and desktops where the menu does not fit (.is-burger) ---------- */
@media (max-width: 991.98px) {
	.a3s-bar__inner {
		display: grid;
		grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr);
		gap: 8px;
	}

	.a3s-bar__burger {
		display: inline-flex;
		justify-self: start;
	}

	.a3s-bar__logo {
		justify-self: center;
	}

	.a3s-nav--bar,
	.a3s-bar__cta {
		display: none;
	}

	.a3s-bar__tools {
		justify-self: end;
		gap: 0;
		margin-right: -10px;
	}

	/* Field and results span the bar (the bar is the positioning context). */
	.a3s-search--expand {
		position: static;
	}

	.a3s-search--expand .a3s-search__field {
		top: calc((var(--a3s-bar-h) - 44px) / 2);
		right: 12px;
		left: 12px;
		width: auto;
	}

	.a3s-search--expand .a3s-search__results {
		top: 100%;
		right: 12px;
		left: 12px;
		width: auto;
	}
}

/* Very narrow phones: wishlist / compare move into the menu drawer. */
@media (max-width: 479.98px) {
	.a3s-bar .a3s-hicon[data-a3s-hicon] {
		display: none;
	}
}

@media (min-width: 992px) {
	.a3s-header.is-burger .a3s-bar__burger {
		display: inline-flex;
	}

	.a3s-header.is-burger .a3s-nav--bar {
		display: none;
	}

	.a3s-header.is-burger .a3s-bar--split .a3s-bar__burger {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}
}

/* ---------- One row ---------- */
.a3s-bar--one-row .a3s-nav--bar {
	margin-left: 8px;
}

/* ---------- Compact: slim dark bar that tucks 12 px under the top edge while scrolling ---------- */
.a3s-bar--compact {
	--a3s-bar-bg: var(--a3s-color-secondary);
	--a3s-logo-dh: 40px;
	border-bottom: 2px solid var(--a3s-color-primary);
}

.a3s-bar--compact .a3s-bar__inner {
	height: calc(var(--a3s-bar-h) - 24px);
	transition: transform 0.25s var(--a3s-bar-ease);
}

body.a3s-header-bar .a3s-header--compact {
	--a3s-cut: 12px;
}

.a3s-header--compact.is-scrolled {
	--a3s-cut-on: var(--a3s-cut);
}

body.a3s-sticky-header .a3s-header--compact {
	transition: top 0.25s var(--a3s-bar-ease);
}

.a3s-header--compact.is-scrolled .a3s-bar__inner {
	transform: translateY(calc(var(--a3s-cut) / 2));
}

.a3s-bar--compact .a3s-bar__logo .a3s-logo__img {
	transition: height 0.25s var(--a3s-bar-ease);
}

.a3s-header--compact.is-scrolled .a3s-bar__logo .a3s-logo__img {
	height: calc(var(--a3s-logo-h, var(--a3s-logo-dh)) * 0.76);
}

.a3s-bar--compact .a3s-nav .a3s-menu > li > a {
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

@media (max-width: 991.98px) {
	.a3s-bar--compact .a3s-bar__inner {
		height: calc(var(--a3s-bar-h) - 8px);
	}
}

/* ---------- Split: menu | logo | icons, category bar below ---------- */
@media (min-width: 992px) {
	.a3s-bar--split {
		--a3s-logo-dh: 60px;
	}

	.a3s-bar--split .a3s-bar__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	}

	.a3s-bar--split .a3s-nav--bar {
		grid-column: 1;
		grid-row: 1;
		justify-self: stretch;
	}

	.a3s-bar--split .a3s-bar__logo {
		grid-column: 2;
		grid-row: 1;
	}

	.a3s-bar--split .a3s-bar__tools {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}

	.a3s-bar--split .a3s-nav__inner {
		justify-content: flex-start;
	}

	.a3s-nav--cats .a3s-nav__inner {
		max-width: var(--a3s-hf-wide);
		padding-inline: 24px;
	}

	.a3s-nav--cats {
		position: relative;
	}
}

/* Split: the category bar tucks behind the main row while scrolling down (transform only), back on scroll up. */
@media (min-width: 992px) {
	.a3s-header--split .a3s-bar {
		z-index: 2;
	}

	.a3s-header--split .a3s-nav--cats {
		z-index: 1;
		transition: transform 0.2s var(--a3s-bar-ease), visibility 0s linear 0s;
	}

	.a3s-header--split.is-cats-hidden .a3s-nav--cats:not(:focus-within) {
		visibility: hidden;
		transform: translateY(-100%);
		transition: transform 0.2s var(--a3s-bar-ease), visibility 0s linear 0.2s;
	}

	/* The empty strip left under the bar must not swallow clicks meant for the page. */
	.a3s-header--split.is-cats-hidden {
		pointer-events: none;
	}

	.a3s-header--split.is-cats-hidden :is(.a3s-bar, .a3s-topbar, .a3s-nav--cats:focus-within) {
		pointer-events: auto;
	}
}

/* ---------- Overlay: transparent over the first block, solid after scrolling ---------- */
.a3s-header--overlay .a3s-bar {
	--a3s-bar-bg: var(--a3s-color-bg);
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

@media (scripting: enabled) {
	.a3s-header--bar.is-overlay {
		margin-bottom: calc(var(--a3s-hdr-h, 116px) * -1);
	}

	.a3s-header--bar.is-overlay:not(.is-solid) .a3s-bar {
		border-bottom-color: transparent;
		background: transparent;
		box-shadow: none;
	}

	/* Light lettering over a dark image: a faint top shade keeps it readable. */
	.a3s-header--bar.is-overlay:not(.is-solid)[data-tone="dark"] .a3s-bar {
		background: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0));
	}
}

/* ---------- Colour from the slider (header sync) ---------- */
.a3s-header[data-sync] {
	--a3s-hf-hover: currentColor;
}

/* Orange-ish slide colour: single-colour logo, underline and badge follow the text colour. */
.a3s-header[data-logo-mono] .a3s-logo__img {
	filter: brightness(0);
}

.a3s-header[data-logo-mono="dark"] .a3s-logo__img {
	filter: brightness(0) invert(1);
}

.a3s-header[data-sync="bg"] .a3s-bar .a3s-nav .a3s-menu > li > a::after {
	background: currentColor;
}

.a3s-header[data-sync="bg"] .a3s-cart-count,
.a3s-header[data-sync="bg"] .a3s-hicon__count {
	box-shadow: 0 0 0 2px var(--a3s-hdr-bg);
}

/* Classic / centered rows: the masthead and the menu bar take the slide colour. */
.a3s-header:not(.a3s-header--bar)[data-sync="bg"] :is(.a3s-masthead, .a3s-nav) {
	background: var(--a3s-hdr-bg);
	color: var(--a3s-hdr-fg);
}

.a3s-header:not(.a3s-header--bar)[data-sync="bg"] :is(.a3s-hicon, .a3s-mc__cats, .a3s-search--underline .a3s-search__submit, .a3s-nav__cart) {
	color: inherit;
}

.a3s-header:not(.a3s-header--bar)[data-sync="bg"] .a3s-search--underline .a3s-search__input {
	border-bottom-color: currentColor;
	color: inherit;
}

.a3s-header:not(.a3s-header--bar)[data-sync="bg"] .a3s-search--underline .a3s-search__input::placeholder {
	color: inherit;
	opacity: 0.75;
}

.a3s-header:not(.a3s-header--bar)[data-sync="bg"] .a3s-cart-total {
	color: inherit;
}

/* Top bar tinted with the slide colour (header-sync.js sets --a3s-top-bg / --a3s-top-fg). */
.a3s-header[data-sync="bg"] .a3s-topbar {
	background: var(--a3s-top-bg, var(--a3s-color-secondary));
	color: var(--a3s-top-fg, #fff);
}

@media (prefers-reduced-motion: no-preference) {
	/* The lettering flips first (120 ms), the background follows on a longer, decelerating curve. */
	.a3s-header[data-a3s-header] :is(.a3s-bar, .a3s-masthead, .a3s-nav:not(.a3s-nav--cats), .a3s-topbar) {
		transition-property: background-color, color, box-shadow, border-color;
		transition-duration: var(--a3s-hdr-speed, 350ms), min(120ms, var(--a3s-hdr-speed, 350ms)), var(--a3s-hdr-speed, 350ms), var(--a3s-hdr-speed, 350ms);
		transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1), ease-out, ease, ease;
	}
}

@media (prefers-reduced-motion: reduce) {
	.a3s-search--expand .a3s-search__field,
	.a3s-bar .a3s-nav .a3s-menu > li > a::after,
	.a3s-bar--compact .a3s-bar__inner,
	.a3s-bar--compact .a3s-bar__logo .a3s-logo__img,
	body.a3s-sticky-header .a3s-header--compact,
	.a3s-header--overlay .a3s-bar,
	.a3s-header--split .a3s-nav--cats {
		transition: none !important;
	}

	.a3s-header--compact.is-scrolled {
		--a3s-cut-on: 0px;
	}

	.a3s-header--compact.is-scrolled .a3s-bar__inner {
		transform: none;
	}
}