/* Component: header — design-reference/canvas/Header.dc.html (values match the artifact).
   Addition requested by Mayank 2026-10-29: account button beside the cart. */

.mx-header { background: var(--mx-white); border-bottom: 1px solid var(--mx-line); }

/* Utility bar */
.mx-header__utility { background: var(--mx-forest); color: var(--mx-header-utility-ink); font-size: var(--mx-text-xs); }
.mx-header__utility-inner {
	min-height: 36px;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--mx-space-2) var(--mx-space-6);
}
.mx-header__contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mx-space-5); }
.mx-header__contact > a { color: var(--mx-header-utility-ink); text-decoration: none; }
.mx-header__contact > a:hover { color: var(--mx-white); text-decoration: underline; }
.mx-header__utility :focus-visible { outline-color: var(--mx-white); }

/* Ship-to button (design: bordered, globe + chevron) */
.mx-shipto { position: relative; }
.mx-shipto__button {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 32px; padding: 0 10px;
	border: 1px solid var(--mx-header-utility-border);
	border-radius: var(--mx-radius-sm);
	color: var(--mx-white);
	font-size: var(--mx-text-xs);
	cursor: pointer;
	list-style: none;
}
.mx-shipto__button::-webkit-details-marker { display: none; }
.mx-shipto__button:hover { border-color: var(--mx-header-utility-ink); }
.mx-shipto[open] .mx-icon--chevron-down { transform: rotate(180deg); }
.mx-shipto__panel {
	position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
	width: 300px;
	padding: var(--mx-space-4);
	border: 1px solid var(--mx-line);
	border-radius: var(--mx-radius-md);
	background: var(--mx-white);
	color: var(--mx-ink-soft);
	box-shadow: var(--mx-shadow-card);
	font-size: var(--mx-text-sm); line-height: 1.5;
}
.mx-shipto__panel p { margin: 0; }
.mx-shipto__panel p + p { margin-top: var(--mx-space-2); }
.mx-shipto__field { display: flex; flex-direction: column; gap: var(--mx-space-1); margin-top: var(--mx-space-3); font-weight: 600; }
.mx-shipto__panel .mx-btn { width: 100%; margin-top: var(--mx-space-3); }

/* Main row */
.mx-header__main {
	min-height: 96px;
	display: flex; flex-wrap: nowrap; align-items: center;
	gap: var(--mx-space-4) var(--mx-space-8);
}
.mx-header__brand { display: inline-flex; align-items: center; gap: var(--mx-space-3); text-decoration: none; color: var(--mx-forest); }
.mx-header__logo { width: 48px; height: 48px; object-fit: contain; }
.mx-header__wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.mx-header__name { font-family: var(--mx-font-display); font-size: 25px; font-weight: 500; letter-spacing: -0.01em; }
.mx-header__tagline { font-size: 12px; color: var(--mx-muted); }

.mx-header__brand { flex: 0 0 auto; }
.mx-header__nav { flex: 1 0 auto; display: flex; flex-wrap: nowrap; gap: var(--mx-space-1) 6px; }
.mx-header__link {
	display: inline-flex; align-items: center;
	min-height: var(--mx-touch);
	padding: 0 14px;
	border-radius: var(--mx-radius);
	font-size: var(--mx-text-base); font-weight: 500;
	color: var(--mx-header-link);
	text-decoration: none;
	white-space: nowrap;
}
.mx-header__link:hover { background: var(--mx-sage); color: var(--mx-forest); }
.mx-header__link.is-current { background: var(--mx-leaf-tint); color: var(--mx-forest); font-weight: 600; }

.mx-header__tools { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
.mx-header__search {
	display: flex; align-items: center; gap: var(--mx-space-2);
	flex: 0 1 260px; width: 260px; min-width: 180px;
	min-height: var(--mx-touch);
	padding: 0 14px;
	border: 1px solid var(--mx-line-strong);
	border-radius: var(--mx-radius);
	background: var(--mx-sage-soft);
	color: var(--mx-muted);
}
.mx-header__search:focus-within { outline: var(--mx-focus); outline-offset: 2px; }
.mx-header__search input {
	flex: 1 1 auto; min-width: 0; width: 100%;
	border: 0; outline: none; background: transparent;
	font: inherit; font-size: var(--mx-text-md); color: var(--mx-ink);
}
.mx-header__cart,
.mx-header__account {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px;
	border: 1px solid var(--mx-line-strong); border-radius: var(--mx-radius);
	color: var(--mx-forest);
}
.mx-header__cart:hover, .mx-header__account:hover { background: var(--mx-sage); }
.mx-header__cart-count {
	position: absolute; top: -6px; right: -6px;
	min-width: 20px; height: 20px; padding: 0 5px;
	border-radius: 10px;
	background: var(--mx-leaf); color: var(--mx-white);
	font-size: 12px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}

/* Phone menu button + extra menu links: phone only */
.mx-header__menu,
.mx-header__nav-extra { display: none; }

/* Tablet (761–1180px): brand + tools on row one, the five links on row two */
@media (max-width: 1180px) {
	.mx-header__main { flex-wrap: wrap; gap: var(--mx-space-3) var(--mx-space-6); padding-block: var(--mx-space-3); }
	.mx-header__nav { order: 3; flex: 1 1 100%; overflow-x: auto; }
	.mx-header__tools { margin-left: auto; }
}

/* Phone (up to 760px): logo + account, cart, Menu on row one; full-width search on row two;
   the menu opens as a panel. Without JS the links simply stay visible. */
@media (max-width: 1040px) {
	.mx-header__notice { display: none; }
	.mx-header__utility-inner { justify-content: flex-end; }
}
@media (max-width: 760px) {
	.mx-header__notice,
	.mx-header__contact > a { display: none; }
	.mx-header__utility-inner { justify-content: flex-start; min-height: 44px; }
	.mx-shipto__panel { right: auto; left: 0; width: min(320px, calc(100vw - 32px)); }

	.mx-header__main { min-height: 0; gap: 8px; padding-block: 10px 12px; }
	.mx-header__brand { flex: 1 1 auto; min-width: 0; gap: 8px; }
	.mx-header__logo { width: 36px; height: 36px; }
	.mx-header__name { font-size: 20px; }
	.mx-header__tagline { font-size: 11px; }
	.mx-header__cart, .mx-header__account { width: 44px; height: 44px; }
	.mx-header__tools { display: contents; }
	.mx-header__account { order: 2; }
	.mx-header__cart { order: 3; }
	.mx-header__menu {
		order: 4;
		display: inline-flex; align-items: center; gap: 6px;
		min-height: 44px; padding: 0 12px;
		border: 1px solid var(--mx-forest); border-radius: var(--mx-radius);
		background: var(--mx-white); color: var(--mx-forest);
		font: inherit; font-size: var(--mx-text-md); font-weight: 600;
		cursor: pointer;
	}
	.mx-header__menu[aria-expanded="true"] { background: var(--mx-forest); color: var(--mx-white); }
	.mx-header__search { order: 5; flex: 1 1 100%; width: auto; min-width: 0; }

	.mx-header__nav {
		order: 6; flex: 1 1 100%;
		flex-direction: column; gap: 0;
		overflow: visible;
		border-top: 1px solid var(--mx-line-soft);
		padding-top: var(--mx-space-2);
	}
	.mx-js .mx-header__nav:not(.is-open) { display: none; }
	.mx-header__link { min-height: 48px; padding: 0 var(--mx-space-3); font-size: var(--mx-text-lg); }
	.mx-header__nav-extra {
		display: flex; flex-direction: column;
		margin-top: var(--mx-space-2); padding-top: var(--mx-space-2);
		border-top: 1px solid var(--mx-line-soft);
	}
	.mx-header__nav-extra .mx-header__link { font-size: var(--mx-text-base); color: var(--mx-leaf-dark); }
}
@media (max-width: 480px) {
	.mx-header__menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.mx-header__menu { padding: 0; width: 44px; justify-content: center; }
}
.mx-header__link--account { display: none; }
@media (max-width: 360px) {
	.mx-header__tagline { display: none; }
	.mx-header__account { display: none; }
	.mx-header__link--account { display: inline-flex; }
}