/*
 * Site header — terracotta bar (like the live store): centred wordmark, search left,
 * account/wishlist/cart right, centred nav row beneath. White text on terracotta;
 * dropdowns are white panels. Below lg the nav is off-canvas.
 */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--c-primary);
	color: #fff;
}

.site-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--sp-4);
	min-height: 58px;
	padding-block: var(--sp-2);
}

.site-header__left { display: flex; align-items: center; gap: var(--sp-2); justify-self: start; }

.site-brand { justify-self: center; display: inline-flex; align-items: center; color: #fff; }
.site-brand .custom-logo,
.site-brand img { max-height: 46px; width: auto; }
.site-brand.site-brand--text { font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-500); letter-spacing: 0.04em; text-transform: lowercase; }

/* Utilities (icons) */
.header-actions { display: flex; align-items: center; gap: var(--sp-1); justify-self: end; }
.header-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #fff; border-radius: 999px; }
.header-icon:hover { color: #fff; background: rgba(255,255,255,0.14); }
.header-icon svg { width: 19px; height: 19px; }
.cart-count, .wish-count {
	position: absolute; top: 3px; right: 3px;
	min-width: 15px; height: 15px; padding: 0 4px;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--font-head); font-size: 0.58rem; line-height: 1;
	color: var(--c-primary); background: #fff; border-radius: 999px;
}

/* Primary nav — a centred second row on the terracotta bar. */
.primary-nav { border-top: 1px solid rgba(255,255,255,0.16); }
.primary-nav > ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-5); margin: 0; padding: var(--sp-2) 0; align-items: center; }
.primary-nav li { position: relative; list-style: none; }
.primary-nav a {
	font-family: var(--font-body);
	font-size: var(--fs-100);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: #fff;
	padding-block: var(--sp-1);
	white-space: nowrap;
	display: inline-block;
}
.primary-nav a:hover, .primary-nav .current-menu-item > a { color: rgba(255,255,255,0.72); }
.primary-nav .menu-item-has-children > a::after {
	content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 6px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: translateY(-1px) rotate(45deg); opacity: 0.75;
}

/* Dropdown panels — white boxes with dark text. */
.primary-nav .sub-menu {
	list-style: none; margin: 0; padding: var(--sp-3) 0;
	position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
	min-width: 200px; background: #fff; border: 1px solid var(--c-line); box-shadow: var(--shadow);
	opacity: 0; visibility: hidden;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
	z-index: var(--z-header);
}
.primary-nav .sub-menu li { position: static; }
.primary-nav .sub-menu a { display: block; padding: var(--sp-2) var(--sp-5); text-transform: none; letter-spacing: 0; font-size: var(--fs-300); color: var(--c-ink-soft); }
.primary-nav .sub-menu a:hover { color: var(--c-primary); background: var(--c-surface); }
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* Mobile toggle */
.nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; width: 26px; height: 20px; padding: 0; border: 0; background: transparent; justify-content: center; }
.nav-toggle span { display: block; height: 1.5px; background: #fff; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-overlay { position: fixed; inset: 0; background: var(--c-overlay-dk); z-index: calc(var(--z-header) - 1); opacity: 0; transition: opacity var(--dur) var(--ease); }
body.nav-open .nav-overlay { opacity: 1; }

@media (max-width: 1023px) {
	.primary-nav {
		position: fixed; inset: 0 auto 0 0;
		width: min(84vw, 340px);
		background: var(--c-bg); color: var(--c-ink);
		border-right: 1px solid var(--c-line); border-top: 0;
		transform: translateX(-100%);
		transition: transform var(--dur) var(--ease);
		padding: var(--sp-6) var(--gutter); overflow-y: auto; z-index: var(--z-header);
	}
	.primary-nav > ul { flex-direction: column; gap: 0; align-items: stretch; justify-content: flex-start; padding: 0; }
	.primary-nav a { color: var(--c-ink); font-size: var(--fs-400); text-transform: none; letter-spacing: 0; padding-block: var(--sp-3); border-bottom: 1px solid var(--c-line); display: block; }
	.primary-nav .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		border: 0; box-shadow: none; padding: 0 0 var(--sp-2) var(--sp-4); min-width: 0;
	}
	.primary-nav .sub-menu a { font-size: var(--fs-300); padding-block: var(--sp-2); border-bottom: 0; color: var(--c-ink-soft); }
	.primary-nav .menu-item-has-children > a::after { display: none; }
	body.nav-open .primary-nav { transform: translateX(0); }
	body.nav-open { overflow: hidden; }
	.header-icon--account, .header-icon--wish { display: none; }
}

@media (min-width: 1024px) {
	.nav-toggle { display: none; }
	.nav-overlay { display: none !important; }
}