.a5-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	width: 100%;
	font-family: inherit;
}

.a5-header__row {
	position: relative;
	/* Stacks above .a5-header__mobile-nav's full-screen overlay so the close
	   (X) button stays clickable/visible while the menu is open -- later DOM
	   order would otherwise paint the overlay on top of it. */
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	max-width: 1560px;
	margin: 0 auto;
	padding: 20px 32px 0;
	box-sizing: border-box;
}

.a5-header__logo {
	display: block;
	flex-shrink: 0;
	margin-top: 14px;
	line-height: 0;
}

/* #a5-header prefix (not just .a5-header__logo) deliberately, so this beats
   Astra's WooCommerce compat stylesheet -- it ships a same-specificity, later
   -loaded ".woocommerce-page img{height:auto;max-width:100%}" reset that
   otherwise wins the cascade on every WooCommerce page (Shop/Product/Cart),
   which is why the logo rendered at its native 2250x2250px on the Shop page. */
#a5-header .a5-header__logo img {
	height: 54px;
	width: auto;
	display: block;
}

.a5-header__logo-fallback {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #151616;
}

.a5-header__shop {
	/* Taken out of the row's space-between flow and centered independently --
	   with only 3 flex children, space-between positions the middle item
	   based on the logo's and nav's actual widths, not the row's true
	   center, and those two aren't the same width. Absolute positioning
	   here centers it on the page regardless of what's on either side. */
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	/* Negative top (rather than the row's own 20px top padding) so the
	   button's flat top edge sits right at (and is clipped by) the very top
	   of the viewport instead of floating below it with a gap of visible
	   page background above -- the flat-top/rounded-bottom shape only reads
	   as "hanging down from off-screen" when it actually touches the edge. */
	top: -20px;
	background-color: #151616;
	color: #ffffff;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 33px 24px 10px;
	border-radius: 0 0 26px 26px;
	transition: background-color 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
}

.a5-header__shop:hover {
	background-color: #393c40;
	color: #ffffff;
	/* Must include translateX(-50%) too -- transform isn't additive across
	   rules, so a bare translateY here would silently drop the centering
	   from the base rule and the button would jump sideways on hover. */
	transform: translateX(-50%) translateY(-1px);
}

.a5-header__nav {
	display: flex;
	align-items: center;
	gap: 32px;
	margin-top: 22px;
}

.a5-header__nav a {
	position: relative;
	color: #151616;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.05em;
	font-weight: 500;
	transition: color 0.2s ease;
}

.a5-header__nav a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -4px;
	height: 1px;
	background-color: currentColor;
	transition: right 0.25s cubic-bezier(0.65, 0, 0.35, 1);
}

.a5-header__nav a:hover {
	color: #737880;
}
.a5-header__nav a:hover::after {
	right: 0;
}

.a5-header__bag-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	margin-left: 5px;
	border-radius: 999px;
	background-color: #151616;
	color: #f3f3e8;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	vertical-align: middle;
}
.a5-header--on-dark .a5-header__bag-count {
	background-color: #f3f3e8;
	color: #151616;
}
@keyframes a5-bag-bump {
	0% {
		transform: scale(1);
	}
	35% {
		transform: scale(1.4);
	}
	100% {
		transform: scale(1);
	}
}
.a5-header__bag-count.is-bumping {
	animation: a5-bag-bump 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.a5-header__bag-check {
	position: absolute;
	top: -16px;
	right: -6px;
	width: 15px;
	height: 15px;
	color: #151616;
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}
.a5-header--on-dark .a5-header__bag-check {
	color: #f3f3e8;
}
.a5-header__bag-check.is-visible {
	opacity: 1;
	transform: scale(1);
}

.a5-header__toggle {
	display: none;
}

.a5-header__mobile-nav {
	display: none;
}

@media (max-width: 860px) {
	.a5-header__row {
		padding: 16px 20px 0;
	}

	.a5-header__logo {
		margin-top: 6px;
	}

	#a5-header .a5-header__logo img {
		height: 40px;
	}

	.a5-header__shop {
		/* Row's own top padding is 16px on mobile (not 20px) -- match it so
		   the button still lands exactly at the viewport edge here too. */
		top: -16px;
		padding: 27px 18px 8px;
		font-size: 13px;
		border-radius: 0 0 22px 22px;
	}

	.a5-header__nav {
		display: none;
	}

	.a5-header__toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		gap: 5px;
		width: 40px;
		height: 40px;
		margin-top: 4px;
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 0;
	}

	.a5-header__toggle span {
		display: block;
		width: 100%;
		height: 2px;
		background-color: #151616;
		border-radius: 1px;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.a5-header__toggle[aria-expanded="true"] span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.a5-header__toggle[aria-expanded="true"] span:nth-child(2) {
		opacity: 0;
	}

	.a5-header__toggle[aria-expanded="true"] span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	.a5-header__mobile-nav.is-open {
		/* Full-screen overlay instead of an in-flow block -- previously this
		   only occupied its own content height, so the page underneath (logo,
		   hero photo) stayed fully visible immediately below the three nav
		   rows instead of being covered by a proper takeover. */
		position: fixed;
		inset: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		background-color: #f3f3e8;
		padding: 96px 20px 24px;
		overflow-y: auto;
	}
	/* Menu is open: lock the page behind it so it can't scroll underneath. */
	body.a5-mobile-nav-open {
		overflow: hidden;
	}

	.a5-header__mobile-nav a {
		color: #151616;
		text-decoration: none;
		text-transform: uppercase;
		font-size: 15px;
		letter-spacing: 0.04em;
		font-weight: 500;
		padding: 14px 0;
		border-bottom: 1px solid rgba(21, 22, 22, 0.08);
	}

	.a5-header__mobile-nav a:last-child {
		border-bottom: none;
	}
}

/* Dark-hero variant: white/light nav text, inverted Shop Now chip, white hamburger bars,
   so the header stays legible over dark background images (Services, Contact). */
.a5-header--on-dark .a5-header__nav a {
	color: #f3f3e8;
}

.a5-header--on-dark .a5-header__nav a:hover {
	color: #c7c9c2;
}

.a5-header--on-dark .a5-header__shop {
	background-color: #f3f3e8;
	color: #151616;
}

.a5-header--on-dark .a5-header__shop:hover {
	background-color: #ffffff;
	color: #151616;
}

.a5-header--on-dark .a5-header__logo-fallback {
	color: #f3f3e8;
}

@media (max-width: 860px) {
	.a5-header--on-dark .a5-header__toggle span {
		background-color: #f3f3e8;
	}

	.a5-header--on-dark .a5-header__mobile-nav.is-open {
		background-color: #151616;
	}

	.a5-header--on-dark .a5-header__mobile-nav a {
		color: #f3f3e8;
		border-bottom-color: rgba(243, 243, 232, 0.15);
	}
}