/**
 * Global header: utility bar, main bar, category nav + mega menu, mobile drawer.
 */

.mf-header {
	position: sticky;
	top: 0;
	z-index: var(--mf-z-header);
	background: var(--mf-surface);
	font-family: var(--mf-font);
}

/* ---------- Utility bar ---------- */
.mf-topbar {
	background: var(--mf-cream);
	border-bottom: 1px solid var(--mf-border);
	font-size: var(--mf-fs-sm);
}

.mf-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 36px;
}

.mf-topbar__menu {
	display: flex;
	align-items: center;
	gap: var(--mf-sp-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mf-topbar__menu a {
	color: var(--mf-text-soft);
	text-decoration: none;
}

.mf-topbar__menu a:hover {
	color: var(--mf-accent);
}

.mf-topbar__menu .current-menu-item > a,
.mf-topbar__menu li:first-child > a {
	color: var(--mf-ink);
	font-weight: 500;
}

.mf-topbar__right { display: none; }

@media (min-width: 768px) {
	.mf-topbar__right { display: block; }
}

/* ---------- Main bar ---------- */
.mf-header__main {
	border-bottom: 1px solid var(--mf-border);
}

.mf-header__main-inner {
	display: flex;
	align-items: center;
	gap: var(--mf-sp-4);
	min-height: 64px;
	padding-block: var(--mf-sp-2);
}

.mf-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	border: 0;
	background: none;
	cursor: pointer;
}

.mf-burger span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: var(--mf-ink);
}

.mf-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}

.mf-logo img {
	display: block;
	width: auto;
	height: 40px;
}

.mf-logo__text {
	font-size: var(--mf-fs-xl);
	font-weight: 700;
	color: var(--mf-ink);
	letter-spacing: -0.01em;
}

/* ---------- Search ---------- */
.mf-search {
	position: relative;
	display: none;
	flex: 1;
	max-width: 640px;
	margin-inline: auto;
}

.mf-search__input {
	width: 100%;
	min-height: 44px;
	padding: 0 52px 0 var(--mf-sp-4);
	border: 1px solid var(--mf-border-strong);
	border-radius: var(--mf-r-md);
	background: var(--mf-surface);
	font-family: var(--mf-font);
	font-size: var(--mf-fs-base);
	color: var(--mf-ink);
}

.mf-search__input::placeholder { color: var(--mf-text-faint); }

.mf-search__input:focus {
	outline: none;
	border-color: var(--mf-accent);
	box-shadow: 0 0 0 3px var(--mf-accent-soft);
}

.mf-search__btn,
.mf-search__btn:hover,
.mf-search__btn:focus,
.mf-search__btn:active {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 100%;
	padding: 0;
	border: 0;
	/* Astra paints button:hover/:focus with its global blue — keep ours flat. */
	background: transparent;
	color: var(--mf-text-soft);
	cursor: pointer;
	box-shadow: none;
	outline: none;
}

.mf-search__btn:hover,
.mf-search__btn:focus { color: var(--mf-accent); }

.mf-search__btn:focus-visible {
	outline: 2px solid var(--mf-accent);
	outline-offset: -4px;
	border-radius: var(--mf-r-sm);
}

/* Explicit size — a global rule collapses inline SVG width to 0 otherwise. */
.mf-search__btn svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	display: block;
}

.mf-search__suggest {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: var(--mf-z-mega);
	background: var(--mf-surface);
	border-radius: var(--mf-r-md);
	box-shadow: var(--mf-shadow-2);
	max-height: 70vh;
	overflow: auto;
}

.mf-suggest__group {
	padding: var(--mf-sp-3) var(--mf-sp-4) var(--mf-sp-1);
	font-size: var(--mf-fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mf-text-faint);
}

.mf-suggest__row {
	display: flex;
	align-items: center;
	gap: var(--mf-sp-3);
	padding: var(--mf-sp-2) var(--mf-sp-4);
	color: var(--mf-ink);
	font-size: var(--mf-fs-sm);
	text-decoration: none;
}

.mf-suggest__row:hover,
.mf-suggest__row:focus {
	background: var(--mf-accent-soft);
}

.mf-suggest__row img {
	border-radius: var(--mf-r-sm);
	object-fit: cover;
	flex-shrink: 0;
}

.mf-suggest__meta {
	margin-left: auto;
	color: var(--mf-text-soft);
	white-space: nowrap;
}

@media (min-width: 768px) {
	.mf-search { display: block; }
	.mf-burger { display: none; }
}

/* Mobile: search moves to its own full-width row under the logo — a store
   without a visible search box loses conversions. */
@media (max-width: 767px) {
	.mf-header__main-inner {
		flex-wrap: wrap;
		row-gap: var(--mf-sp-2);
		padding-bottom: var(--mf-sp-3);
	}

	.mf-search {
		display: block;
		order: 3;
		flex: 1 0 100%;
		max-width: none;
		margin: 0;
	}

	.mf-search__input {
		min-height: 40px;
		font-size: 16px; /* iOS zooms in on focus below 16px */
	}

	.mf-logo img { height: 32px; }

	.mf-actions { gap: 0; }

	.mf-action { padding-inline: var(--mf-sp-1); }
}

/* ---------- Actions ---------- */
.mf-actions {
	display: flex;
	align-items: center;
	gap: var(--mf-sp-2);
	margin-left: auto;
}

.mf-action {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 44px;
	padding: var(--mf-sp-1) var(--mf-sp-2);
	color: var(--mf-text-soft);
	text-decoration: none;
	font-size: var(--mf-fs-xs);
	border-radius: var(--mf-r-sm);
}

.mf-action:hover { color: var(--mf-accent); }

.mf-action svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	display: block;
}

.mf-action__label { display: none; }

@media (min-width: 1024px) {
	.mf-action__label { display: block; }
}

.mf-count {
	position: absolute;
	top: -2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	border-radius: var(--mf-r-full);
	background: var(--mf-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
}

.mf-count:empty,
.mf-count[data-zero] { display: none; }

/* ---------- Category nav ---------- */
.mf-nav {
	display: none;
	border-bottom: 1px solid var(--mf-border);
	background: var(--mf-surface);
}

@media (min-width: 768px) {
	.mf-nav { display: block; }
}

.mf-nav__list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mf-sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
}

.mf-nav__link {
	display: inline-block;
	padding: var(--mf-sp-3) var(--mf-sp-2);
	color: var(--mf-ink);
	font-size: var(--mf-fs-base);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color var(--mf-t-fast) var(--mf-ease), border-color var(--mf-t-fast) var(--mf-ease);
}

.mf-nav__item:hover > .mf-nav__link,
.mf-nav__item.is-open > .mf-nav__link,
.mf-nav__link:focus-visible {
	color: var(--mf-accent);
	border-bottom-color: var(--mf-accent);
}

/* ---------- Mega panel ---------- */
.mf-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: var(--mf-z-mega);
	background: var(--mf-surface);
	border-top: 1px solid var(--mf-border);
	box-shadow: var(--mf-shadow-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--mf-t-med) var(--mf-ease), transform var(--mf-t-med) var(--mf-ease), visibility 0s linear var(--mf-t-med);
}

.mf-nav__item.is-open > .mf-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

.mf-mega__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--mf-sp-8);
	padding-block: var(--mf-sp-8);
	max-width: 100%;
}

.mf-mega__head {
	display: inline-block;
	margin-bottom: var(--mf-sp-3);
	color: var(--mf-text-soft);
	font-size: var(--mf-fs-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.mf-mega__head:hover { color: var(--mf-accent); }

.mf-mega__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--mf-sp-2);
}

.mf-mega__links a {
	color: var(--mf-text);
	font-size: var(--mf-fs-sm);
	text-decoration: none;
}

.mf-mega__links a:hover {
	color: var(--mf-accent);
	text-decoration: underline;
}

/* ---------- Mobile drawer ---------- */
.mf-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: var(--mf-z-drawer);
	width: min(85vw, 400px);
	background: var(--mf-surface);
	box-shadow: var(--mf-shadow-3);
	transform: translateX(-102%);
	transition: transform var(--mf-t-med) var(--mf-ease);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mf-drawer.is-open { transform: translateX(0); }

.mf-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--mf-sp-4);
	border-bottom: 1px solid var(--mf-border);
}

.mf-drawer__title {
	font-weight: 600;
	font-size: var(--mf-fs-md);
	color: var(--mf-ink);
}

.mf-drawer__close {
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: var(--mf-text-soft);
	cursor: pointer;
}

.mf-drawer__list,
.mf-drawer__sub,
.mf-drawer__sub ul,
.mf-drawer__util {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mf-drawer__item { border-bottom: 1px solid var(--mf-border); }

.mf-drawer__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--mf-sp-4);
	color: var(--mf-ink);
	font-weight: 500;
	text-decoration: none;
}

.mf-drawer__row a {
	color: inherit;
	text-decoration: none;
}

.mf-drawer__toggle {
	position: relative;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	cursor: pointer;
}

.mf-drawer__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--mf-text-soft);
	border-bottom: 2px solid var(--mf-text-soft);
	transform: translate(-50%, -70%) rotate(45deg);
	transition: transform var(--mf-t-fast) var(--mf-ease);
}

.mf-drawer__toggle[aria-expanded="true"]::after {
	transform: translate(-50%, -30%) rotate(225deg);
}

.mf-drawer__sub {
	padding: 0 var(--mf-sp-4) var(--mf-sp-4);
}

.mf-drawer__group-head {
	display: block;
	padding-block: var(--mf-sp-2);
	color: var(--mf-text-soft);
	font-size: var(--mf-fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.mf-drawer__sub ul a {
	display: block;
	padding: var(--mf-sp-2) 0 var(--mf-sp-2) var(--mf-sp-3);
	color: var(--mf-text);
	font-size: var(--mf-fs-sm);
	text-decoration: none;
}

.mf-drawer__sub ul a:hover { color: var(--mf-accent); }

.mf-drawer__util {
	margin-top: auto;
	padding: var(--mf-sp-4);
	background: var(--mf-cream);
}

.mf-drawer__util a {
	display: block;
	padding-block: var(--mf-sp-2);
	color: var(--mf-text-soft);
	font-size: var(--mf-fs-sm);
	text-decoration: none;
}

.mf-scrim {
	position: fixed;
	inset: 0;
	z-index: calc(var(--mf-z-drawer) - 1);
	background: var(--mf-overlay);
}

.mf-scrim[hidden] { display: none; }

body.mf-no-scroll { overflow: hidden; }

/* ---------- Mobile header (match mamtafurniture.in) ---------- */
@media (max-width: 767px) {
	.mf-topbar {
		display: none;
	}

	.mf-header__main-inner {
		display: grid;
		grid-template-columns: 44px 1fr auto;
		align-items: center;
		gap: var(--mf-sp-2);
		min-height: 56px;
		padding-block: var(--mf-sp-1);
	}

	.mf-burger {
		grid-column: 1;
		justify-self: start;
	}

	.mf-logo {
		grid-column: 2;
		justify-self: center;
	}

	.mf-logo img {
		height: 36px;
		width: auto;
		max-width: 160px;
	}

	.mf-search {
		display: none;
	}

	.mf-actions {
		grid-column: 3;
		justify-self: end;
		margin-left: 0;
		gap: 0;
	}

	.mf-action--wishlist {
		display: none;
	}

	.mf-action__label {
		display: none;
	}

	.mf-action {
		min-width: 40px;
		padding: var(--mf-sp-1);
	}
}