/*
 * Header & navigation redesign — luxury black/gold/cream palette.
 *
 * Loaded site-wide (the header appears on every page, not just the
 * homepage). This restyles Astra's existing native header/search/cart/
 * mobile-menu markup only — no template overrides, no structural
 * changes, no JS. Selectors were verified against the live rendered
 * markup on staging before writing this file.
 *
 * Sticky positioning is intentionally NOT enabled here — see the
 * commented-out block at the bottom. That's a decision to confirm
 * with the site owner, not something to assume.
 */

:root {
	--ss-black: #0b0b0b;
	--ss-gold: #c9a24b;
	--ss-gold-light: #e6cd8f;
	--ss-cream: #f7f1e6;
}

/* ---- Header bar background ---- */

/*
 * !important here is a deliberate safety net: nav/link text on this
 * header depends entirely on this background staying dark. If any
 * other stylesheet (now or in the future) ever sets a competing
 * background on these elements, this guarantees it doesn't silently
 * win and leave gold/cream text on a light background.
 */
#masthead.site-header,
#masthead .ast-main-header-wrap,
#ast-mobile-header .ast-main-header-wrap {
	background-color: var(--ss-black) !important;
}

.ast-below-header-wrap {
	background-color: var(--ss-black) !important;
	border-top: 1px solid rgba(201, 162, 75, 0.3);
}

/* ---- Logo ---- */

.site-header .ast-site-identity {
	padding-block: 0.5rem;
}

/* ---- Primary nav links (desktop) ---- */

.site-header .main-header-menu > .menu-item > a.menu-link {
	color: var(--ss-cream);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.8rem;
	font-weight: 500;
}

.site-header .main-header-menu > .menu-item > a.menu-link:hover,
.site-header .main-header-menu > .menu-item.current-menu-item > a.menu-link {
	color: var(--ss-gold);
}

.site-header .main-header-menu .sub-menu {
	background-color: var(--ss-black);
	border-color: rgba(201, 162, 75, 0.3);
}

.site-header .main-header-menu .sub-menu .menu-link {
	color: var(--ss-cream);
	text-transform: none;
	letter-spacing: normal;
}

.site-header .main-header-menu .sub-menu .menu-link:hover {
	color: var(--ss-gold);
}

.site-header .ast-header-navigation-arrow .ast-arrow-svg,
.site-header .ast-menu-toggle .ast-arrow-svg {
	fill: var(--ss-cream);
}

/* ---- Search icon / FiboSearch form ---- */

.site-header .ast-search-icon a.astra-search-icon .ast-icon svg {
	fill: var(--ss-cream);
}

.site-header .ast-search-icon a.astra-search-icon:hover .ast-icon svg {
	fill: var(--ss-gold);
}

.site-header .ast-search-menu-icon .search-form,
.site-header .dgwt-wcas-search-wrapp {
	background-color: var(--ss-black);
}

.site-header .dgwt-wcas-search-input {
	background-color: transparent;
	border: 1px solid rgba(201, 162, 75, 0.3);
	color: var(--ss-cream);
}

.site-header .dgwt-wcas-search-input::placeholder {
	color: rgba(247, 241, 230, 0.5);
}

.site-header .dgwt-wcas-ico-magnifier path {
	fill: var(--ss-gold);
}

/* ---- Account + cart icons ---- */

.site-header .ast-header-account-wrap .ast-header-account-link svg,
.site-header .ast-site-header-cart .astra-icon svg {
	fill: var(--ss-cream);
}

.site-header .ast-site-header-cart:hover .astra-icon svg,
.site-header .ast-header-account-wrap:hover .ast-header-account-link svg {
	fill: var(--ss-gold);
}

.site-header .ast-woo-header-cart-total {
	color: var(--ss-cream);
}

.site-header .ast-site-header-cart.ast-menu-cart-with-border .cart-container {
	border-color: rgba(201, 162, 75, 0.3);
}

/* ---- Mobile hamburger trigger ---- */

.site-header .menu-toggle.main-header-menu-toggle .mobile-menu-toggle-icon svg {
	fill: var(--ss-cream);
}

/* ---- Mobile off-canvas drawer ---- */

.ast-mobile-popup-drawer .ast-mobile-popup-inner {
	background-color: var(--ss-black);
}

.ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close svg {
	fill: var(--ss-cream);
}

.ast-mobile-popup-drawer .main-header-menu .menu-link {
	color: var(--ss-cream);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.9rem;
}

.ast-mobile-popup-drawer .main-header-menu > .menu-item.current-menu-item > .menu-link,
.ast-mobile-popup-drawer .main-header-menu .menu-link:hover {
	color: var(--ss-gold);
}

.ast-mobile-popup-drawer .sub-menu {
	border-color: rgba(201, 162, 75, 0.3);
}

.ast-mobile-popup-drawer .sub-menu .menu-link {
	text-transform: none;
	letter-spacing: normal;
	color: rgba(247, 241, 230, 0.85);
}

/* ---- Mobile spacing: keep hamburger / account / cart from feeling cramped ---- */

@media (max-width: 780px) {
	.site-header .site-header-primary-section-right .ast-button-wrap {
		padding-left: 0.5rem;
	}

	.site-header .ast-site-header-cart-li a.cart-container,
	.site-header .ast-header-account-wrap,
	.site-header .menu-toggle.main-header-menu-toggle {
		padding: 0.5rem;
	}

	.ast-below-header-wrap .ast-search-menu-icon .search-form {
		padding: 0.5rem 1rem;
	}
}

/*
 * Sticky header — confirmed decision (2026-09-14): keep the header fixed
 * while scrolling, matching Sephora / Nykaa Luxe / Arabian Oud, so cart +
 * search stay reachable on long product/category pages.
 */

#masthead.site-header {
	position: sticky;
	top: 0;
	z-index: 99;
}