/* ==========================================================================
   Empere Header — two-row desktop navigation bar (header v12)

   Row 1:  logo | search (pill) | Wishlist · Login / Signup · Cart
   Row 2:  ☰ Categories ⌄ | primary menu links | Chat with Us

   Layout only: the theme's header markup is unchanged. The search wrappers
   use `display: contents` so the Categories button, the search input and the
   search button can sit in different grid cells while staying inside the
   same <form> and the same .empere-search-wrap (empere-header-search.js
   depends on that structure).

   Scope: `.header-v12 .masthead` exists only in the desktop header; the
   handheld/mobile header (.handheld-header-wrap) is not touched. All rules
   are inside a >= 1200px media query (the desktop header is hidden below it).
   !important is used only where existing header rules already use it.
   ========================================================================== */

@media (min-width: 1200px) {

	.header-v12 .masthead {
		--eh-row1: 80px;
		--eh-row2: 50px;
		--eh-band: #26272b;
		--eh-gold: #d79e0b;
		--eh-gold-hi: #e9b225;
		--eh-text: #f2f3f5;
		--eh-muted: #c9ccd2;
		--eh-line: rgba(255, 255, 255, .09);

		display: grid !important;
		grid-template-columns: 230px minmax(0, 1fr) auto auto;
		grid-template-rows: var(--eh-row1) var(--eh-row2);
		align-items: center;
		flex-wrap: nowrap !important;
		margin: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		position: relative;
		/* Stacking context for the row-2 band (z-index:-1) that keeps the header's
		   dropdowns (categories z 1200, suggestions, mini-cart) above page content,
		   same level the categories menu had before. */
		z-index: 1200;
	}

	/* Reset Bootstrap column sizing on the masthead children */
	.header-v12 .masthead > * {
		width: auto;
		max-width: none;
		min-width: 0;
		padding-left: 0;
		padding-right: 0;
		margin-top: 0;
		margin-bottom: 0;
	}

	/* Row 2 background band — full viewport width without causing overflow */
	.header-v12 .masthead::after {
		content: "";
		grid-row: 2;
		grid-column: 1 / -1;
		align-self: stretch;
		z-index: -1;
		background: var(--eh-band);
		box-shadow: 0 0 0 100vmax var(--eh-band);
		clip-path: inset(0 -100vmax);
		border-top: 1px solid var(--eh-line);
	}

	/* ---------- Row 1: logo ---------- */
	.header-v12 .masthead .header-logo-area {
		grid-row: 1;
		grid-column: 1;
		align-self: center;
	}

	/* ---------- Row 1: search pill ---------- */
	/* #masthead: an existing inline rule `#masthead .hidden-lg-down .masthead .d-xl-none { display:block !important }` uses an ID */
	#masthead.header-v12 .masthead .col-auto.d-xl-none.d-xxl-block,
	.header-v12 .masthead .empere-search-wrap,
	.header-v12 .masthead .empere-navbar-search,
	.header-v12 .masthead .empere-navbar-search .input-group {
		display: contents !important;
	}

	.header-v12 .masthead .empere-navbar-search .input-search-field {
		grid-row: 1;
		grid-column: 2;
		align-self: center !important;
		display: flex;
		align-items: center;
		height: 46px !important;
		margin: 0 0 0 8px !important;
		padding: 0;
		overflow: hidden;
		background: #fff;
		border-radius: 999px 0 0 999px !important; /* an existing rule resets this radius with !important */
	}
	.header-v12 .masthead .empere-navbar-search .twitter-typeahead { height: 100%; width: 100%; }
	.header-v12 .masthead .empere-navbar-search .product-search-field {
		position: static !important; /* the theme nudges the input 1px down */
		top: auto !important;
		height: 100% !important;
		padding: 0 18px 0 22px !important;
		border: 0 !important;
		border-radius: 999px 0 0 999px !important;
		background: transparent !important;
		box-shadow: none !important;
		font-size: 14.5px;
		color: #1c1c1c;
	}
	.header-v12 .masthead .empere-navbar-search .product-search-field::placeholder { color: #8a8f98; opacity: 1; }

	.header-v12 .masthead .empere-navbar-search .input-group-btn {
		grid-row: 1;
		grid-column: 3;
		align-self: center !important;
		display: flex;
		align-items: center;
		height: 46px !important;
		margin: 0 !important;
		padding: 4px 4px 4px 0;
		background: #fff;
		border-radius: 0 999px 999px 0;
	}
	.header-v12 .masthead .empere-navbar-search .input-group-btn .btn-secondary {
		display: inline-flex !important;
		align-items: center;
		height: 38px !important;
		padding: 0 22px !important;
		border-radius: 999px !important;
		background: var(--eh-gold) !important;
		color: #1c1c1c !important;
		font-size: 14px;
		font-weight: 700;
		line-height: 1;
	}
	.header-v12 .masthead .empere-navbar-search .input-group-btn .btn-secondary i { display: none; }
	.header-v12 .masthead .empere-navbar-search .input-group-btn .btn-secondary::after { content: "Search"; }
	.header-v12 .masthead .empere-navbar-search .input-group-btn .btn-secondary:hover,
	.header-v12 .masthead .empere-navbar-search .input-group-btn .btn-secondary:focus {
		background: var(--eh-gold-hi) !important;
		color: #1c1c1c !important;
	}

	/* focus ring around the whole pill (browsers without :has() keep the input's own focus style) */
	.header-v12 .masthead:has(.product-search-field:focus) .input-search-field,
	.header-v12 .masthead:has(.product-search-field:focus) .input-group-btn {
		box-shadow: 0 0 0 3px rgba(215, 158, 11, .45);
		clip-path: inset(-4px 0 -4px -4px);
	}
	.header-v12 .masthead:has(.product-search-field:focus) .input-group-btn { clip-path: inset(-4px -4px -4px 0); }

	/* live suggestions dropdown: anchored under the search pill */
	.header-v12 .masthead .empere-search-suggestions {
		grid-row: 1;
		grid-column: 2 / 4;
		position: absolute;
		top: calc(var(--eh-row1) / 2 + 23px + 6px); /* just below the 46px pill centred in row 1 */
		left: 8px;
		right: 0;
	}

	/* ---------- Row 1: header icons ---------- */
	.header-v12 .masthead .header-icons {
		grid-row: 1;
		grid-column: 4;
		justify-self: end;
		display: flex !important;
		align-items: center;
		gap: 22px;
		width: max-content !important;
		min-width: max-content !important;
		margin-left: 28px !important;
		flex: none;
	}
	/* every item in the icon group is centred on the same line (no baseline offsets) */
	.header-v12 .masthead .header-icons > *,
	.header-v12 .masthead .header-icons .header-icon {
		display: flex;
		align-items: center;
		margin-left: 0 !important;
		line-height: 1;
	}
	.header-v12 .masthead .header-icons .header-icon > a { line-height: 1 !important; }

	/* Wishlist: the link already exists (its icon font was hidden) — show heart + label */
	.header-v12 .masthead .header-icons .header-icon > a[href*="wishlist"] {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		line-height: 1;
		font-size: 14px !important;
		font-weight: 700;
		color: var(--eh-text);
		transition: color .2s;
	}
	.header-v12 .masthead .header-icons .header-icon > a[href*="wishlist"]::before {
		content: "";
		width: 21px;
		height: 21px;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-9.2-9.3C1.7 7.5 3.9 4.5 7.1 4.5c2 0 3.6 1.1 4.9 2.9 1.3-1.8 2.9-2.9 4.9-2.9 3.2 0 5.4 3 4.3 6.2C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E") center / contain no-repeat;
		        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-9.2-9.3C1.7 7.5 3.9 4.5 7.1 4.5c2 0 3.6 1.1 4.9 2.9 1.3-1.8 2.9-2.9 4.9-2.9 3.2 0 5.4 3 4.3 6.2C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E") center / contain no-repeat;
	}
	.header-v12 .masthead .header-icons .header-icon > a[href*="wishlist"]::after { content: "Wishlist"; }
	.header-v12 .masthead .header-icons .header-icon > a[href*="wishlist"]:hover { color: var(--eh-gold); }

	/* Login / Signup and My Account (existing buttons, restyled as icon + text links) */
	.header-v12 .masthead .header-icons .login_button1,
	.header-v12 .masthead .header-icons .my_account {
		display: inline-flex !important;
		align-items: center;
		gap: 8px;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		color: var(--eh-text) !important;
		font-size: 14px !important;
		font-weight: 700;
		line-height: 1;
		text-transform: none;
		white-space: nowrap;
		cursor: pointer;
		transition: color .2s;
	}
	.header-v12 .masthead .header-icons .login_button1::before,
	.header-v12 .masthead .header-icons .my_account::before {
		content: "";
		width: 21px;
		height: 21px;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20.5c1.2-3.8 4.3-5.5 8-5.5s6.8 1.7 8 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
		        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20.5c1.2-3.8 4.3-5.5 8-5.5s6.8 1.7 8 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
	}
	.header-v12 .masthead .header-icons .login_button1:hover,
	.header-v12 .masthead .header-icons .my_account:hover { color: var(--eh-gold) !important; }

	/* Cart: outlined pill (count badge + total kept) */
	.header-v12 .masthead .header-icon__cart > a.dropdown-toggle {
		padding: 8px 16px !important;
		border-radius: 999px;
		background: transparent;
		border: 1.5px solid rgba(255, 255, 255, .35);
	}
	.header-v12 .masthead .header-icon__cart > a.dropdown-toggle:hover {
		background: rgba(255, 255, 255, .05);
		border-color: var(--eh-gold);
		box-shadow: none;
	}

	/* ---------- Row 2: Categories ---------- */
	.header-v12 .masthead .empere-all-categories {
		grid-row: 2;
		grid-column: 1;
		align-self: stretch;
		display: flex !important;
		height: var(--eh-row2);
		margin: 0 !important;
		border-right: 1px solid var(--eh-line) !important;
	}
	.header-v12 .masthead .empere-cat-toggle {
		width: 100%;
		height: 100% !important;
		gap: 14px !important;
		padding: 0 18px 0 2px !important;
		border-radius: 0 !important;
		background: transparent !important;
		color: var(--eh-text) !important;
		font-size: 13.5px !important;
		font-weight: 700 !important;
		letter-spacing: .02em !important;
	}
	.header-v12 .masthead .empere-cat-toggle:hover,
	.header-v12 .masthead .empere-all-categories.is-open .empere-cat-toggle { background: transparent !important; color: var(--eh-gold) !important; }
	.header-v12 .masthead .empere-cat-toggle .empere-cat-bars,
	.header-v12 .masthead .empere-cat-toggle .empere-cat-caret { color: inherit; }
	.header-v12 .masthead .empere-cat-toggle .empere-cat-bars { width: 20px; }
	.header-v12 .masthead .empere-cat-toggle .empere-cat-bars::before,
	.header-v12 .masthead .empere-cat-toggle .empere-cat-bars::after { width: 20px; }
	.header-v12 .masthead .empere-cat-toggle .empere-cat-text { display: inline !important; }
	/* chevron instead of the small triangle */
	.header-v12 .masthead .empere-cat-toggle .empere-cat-caret {
		width: 8px;
		height: 8px;
		margin: -4px 0 0 auto;
		border: 0;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform .2s;
	}
	.header-v12 .masthead .empere-all-categories.is-open .empere-cat-caret { transform: rotate(-135deg); margin-top: 4px; }
	.header-v12 .masthead .empere-cat-menu { top: 100%; }

	/* ---------- Row 2: primary menu ---------- */
	.header-v12 .masthead .primary-nav-menu {
		grid-row: 2;
		grid-column: 2 / 4;
		align-self: stretch;
		display: flex;
		align-items: center;
		min-width: 0 !important;
		padding-left: 22px;
	}
	.header-v12 .masthead .primary-nav-menu > .nav {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 4px;
		height: 100%;
		margin: 0;
	}
	.header-v12 .masthead .primary-nav-menu > .nav > li {
		display: flex;
		align-items: center;
		height: 100%;
		margin: 0;
	}
	.header-v12 .masthead .primary-nav-menu > .nav > li > a {
		display: flex;
		align-items: center;
		height: 100%;
		padding: 0 14px !important;
		color: var(--eh-muted) !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		line-height: 1;
		white-space: nowrap;
		position: relative;
		transition: color .2s;
	}
	.header-v12 .masthead .primary-nav-menu > .nav > li > a:hover,
	.header-v12 .masthead .primary-nav-menu > .nav > li:hover > a,
	.header-v12 .masthead .primary-nav-menu > .nav > li.current-menu-item > a { color: #fff !important; }
	.header-v12 .masthead .primary-nav-menu > .nav > li > a::after {
		content: "";
		position: absolute;
		left: 14px;
		right: 14px;
		bottom: 0;
		height: 2px;
		background: var(--eh-gold);
		transform: scaleX(0);
		transition: transform .2s;
	}
	.header-v12 .masthead .primary-nav-menu > .nav > li > a:hover::after,
	.header-v12 .masthead .primary-nav-menu > .nav > li.current-menu-item > a::after { transform: scaleX(1); }
	/* sub-menus (if added later) open directly under the row */
	.header-v12 .masthead .primary-nav-menu > .nav > li > .dropdown-menu { top: 100%; margin-top: 0; }

	/* ---------- Row 2: Chat with Us ---------- */
	.header-v12 .masthead .empere-nav-chat {
		grid-row: 2;
		grid-column: 4;
		justify-self: end;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		color: var(--eh-text);
		font-size: 14px;
		font-weight: 700;
		line-height: 1;
		white-space: nowrap;
		transition: color .2s;
	}
	.header-v12 .masthead .empere-nav-chat svg { color: var(--eh-gold); flex: none; }
	.header-v12 .masthead .empere-nav-chat:hover,
	.header-v12 .masthead .empere-nav-chat:focus { color: var(--eh-gold); }

	.header-v12 .masthead a:focus-visible,
	.header-v12 .masthead button:focus-visible { outline: 2px solid var(--eh-gold); outline-offset: 3px; }
}

/* The "Chat with Us" link is desktop-only (the mobile header keeps the floating WhatsApp icon). */
@media (max-width: 1199.98px) {
	.header-v12 .masthead .empere-nav-chat { display: none; }
}