/*
 * Site header (redesign) — slim black announcement bar above a cream header:
 * two-tone "9YAARDS" wordmark left, centred nav, search/account/wishlist/cart right.
 * Below lg the nav is off-canvas.
 */

/* ---- Announcement bar ---- */
.announcement-bar {
	background: #171310;
	color: #f3ece2;
}
.announcement-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-5);
	min-height: var(--announce-h);
}
.announcement-bar__msg {
	margin: 0;
	font-family: var(--font-head);
	font-size: 0.7rem;
	font-weight: 300;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	color: #eadfce;
}
.announcement-bar__arrow { display: inline-flex; opacity: 0.55; }
.announcement-bar__arrow svg { width: 15px; height: 15px; }
@media (max-width: 600px) {
	.announcement-bar__msg { font-size: 0.6rem; letter-spacing: 0.1em; }
	.announcement-bar__arrow { display: none; }
}

/* ---- Header bar ---- */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--c-bg);
	color: var(--c-ink);
	border-bottom: 1px solid var(--c-line);
}

.site-header__bar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--sp-5);
	min-height: var(--header-h);
	padding-block: var(--sp-3);
}

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

/* Two-tone serif wordmark */
.site-brand { display: inline-flex; align-items: baseline; color: var(--c-ink); }
.site-brand .custom-logo, .site-brand img { max-height: 40px; width: auto; }
.site-brand--text {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.75rem;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-ink);
}
.site-brand--text:hover { color: var(--c-ink); }
.site-brand__nine { color: var(--c-primary); }

/* 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: var(--c-ink); border-radius: 999px; }
.header-icon:hover { color: var(--c-primary); background: transparent; }
.header-icon svg { width: 20px; height: 20px; }
.cart-count, .wish-count {
	position: absolute; top: 2px; right: 1px;
	min-width: 16px; height: 16px; padding: 0 4px;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--font-head); font-weight: 500; font-size: 0.6rem; line-height: 1;
	color: #fff; background: var(--c-primary); border-radius: 999px;
}
.cart-count[hidden], .wish-count[hidden] { display: none; }

/* ---- Primary nav — centred row ---- */
.primary-nav { justify-self: center; }
.primary-nav > ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(1rem, 2vw, 2rem); margin: 0; padding: 0; align-items: center; }
.primary-nav li { position: relative; list-style: none; }
.primary-nav a {
	font-family: var(--font-head);
	font-weight: 400;
	font-size: 0.72rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--c-ink);
	padding-block: var(--sp-2);
	white-space: nowrap;
	display: inline-block;
}
.primary-nav a:hover, .primary-nav .current-menu-item > a { color: var(--c-primary); }
.primary-nav .menu-item-has-children > a::after {
	content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 6px;
	border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
	transform: translateY(-2px) rotate(45deg); opacity: 0.6;
}

/* Dropdown panels — cream/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(8px);
	min-width: 210px; 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.02em; 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: none; 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: var(--c-ink); 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) {
	.nav-toggle { display: inline-flex; }
	/* Center the wordmark, hamburger left, actions right. */
	.site-header__bar { grid-template-columns: 1fr auto 1fr; gap: var(--sp-3); }
	.site-header__left { justify-self: start; }
	.site-brand--text { position: absolute; left: 50%; transform: translateX(-50%); }
	.primary-nav {
		position: fixed; inset: 0 auto 0 0;
		width: min(86vw, 360px);
		background: var(--c-bg); color: var(--c-ink);
		border-right: 1px solid var(--c-line);
		transform: translateX(-100%);
		transition: transform var(--dur) var(--ease);
		padding: var(--sp-7) var(--gutter); overflow-y: auto; z-index: var(--z-header);
		justify-self: stretch;
	}
	.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); letter-spacing: 0.04em; 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; background: transparent;
	}
	.primary-nav .sub-menu a { font-size: var(--fs-300); padding-block: var(--sp-2); border-bottom: 0; color: var(--c-ink-soft); text-transform: none; }
	.primary-nav .menu-item-has-children > a::after { display: none; }
	body.nav-open .primary-nav { transform: translateX(0); }
	body.nav-open { overflow: hidden; }
	/* Mockup mobile chrome keeps search + cart; account + wishlist collapse into the menu. */
	.header-icon--account, .header-icon--wish { display: none; }
}

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