/* ============================================================
   Meadows Header — frontend styles
   Light/gold brand theme · active colour === hover colour
   Desktop mega-menu + impressive mobile drawer
   Breakpoint: 980px
============================================================ */

.mh-header *,
.mh-header *::before,
.mh-header *::after { box-sizing: border-box; }

.mh-header {
	position: relative;
	width: 100%;
	background: var(--mh-header-bg, #fff);
	font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	z-index: 1000;
	isolation: isolate;
}
.mh-header.mh-sticky { position: sticky; top: 0; }

/* Top accent bar */
.mh-header .mh-topbar {
	height: 6px;
	width: 100%;
	background: linear-gradient(90deg, var(--mh-topbar1, #C9A84C), var(--mh-topbar2, #8A6A2F) 55%, var(--mh-topbar1, #C9A84C));
}

/* Faint floral watermark */
/* Faint floral watermark — kept to the right so the logo sits on clean white */
.mh-header .mh-bg {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background-repeat: no-repeat;
	background-position: right 6% center;
	background-size: 420px auto;
	opacity: var(--mh-bg-op, 0.05);
	pointer-events: none;
	z-index: 0;
}

/* ── Inner bar ── */
.mh-header .mh-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 22px 32px;
	transition: padding .28s ease;
}
.mh-header.mh-scrolled .mh-inner { padding-top: 12px; padding-bottom: 12px; }

/* Logo */
.mh-header .mh-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
	line-height: 0;
	padding-right: 10px;
}
.mh-header .mh-logo img {
	display: block;
	width: auto;
	max-width: 220px;
	object-fit: contain;
	transition: height .28s ease;
}
.mh-header .mh-logo-text {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 26px;
	letter-spacing: 3px;
	font-weight: 600;
	color: var(--mh-nav, #1C1C1C);
	line-height: 1.1;
	text-transform: uppercase;
}

/* ── Desktop nav ── */
.mh-header .mh-nav { flex: 1; display: flex; justify-content: center; }
.mh-header .mh-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0; padding: 0;
	list-style: none;
}
.mh-header .mh-item { position: relative; }
.mh-header .mh-item > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 18px;
	text-decoration: none;
	color: var(--mh-nav, #1C1C1C);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color .2s ease;
}
/* underline indicator */
.mh-header .mh-item > a::after {
	content: '';
	position: absolute;
	left: 18px; right: 18px; bottom: 6px;
	height: 1.5px;
	background: var(--mh-active, #A67C32);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .26s ease;
}
/* active colour === hover colour */
.mh-header .mh-item > a:hover,
.mh-header .mh-item:focus-within > a,
.mh-header .mh-item.mh-active > a { color: var(--mh-active, #A67C32); }
.mh-header .mh-item > a:hover::after,
.mh-header .mh-item:focus-within > a::after,
.mh-header .mh-item.mh-active > a::after { transform: scaleX(1); }

.mh-header .mh-caret { width: 13px; height: 13px; color: var(--mh-caret, #A67C32); transition: transform .26s ease; }
.mh-header .mh-has-mega:hover .mh-caret,
.mh-header .mh-has-mega:focus-within .mh-caret { transform: rotate(180deg); }

/* ── Mega menu ── */
.mh-header .mh-mega {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%) translateY(12px);
	min-width: 720px;
	max-width: 94vw;
	background: var(--mh-mega-bg, #fff);
	border: 1px solid var(--mh-divider, #ECE4D3);
	border-top: 3px solid var(--mh-active, #A67C32);
	border-radius: 14px;
	box-shadow: 0 30px 70px -26px rgba(60, 45, 20, .42);
	padding: 30px 36px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .26s ease, transform .26s ease, visibility .26s;
	z-index: 50;
}
.mh-header .mh-mega::before {
	content: '';
	position: absolute;
	top: -8px; left: 50%;
	width: 15px; height: 15px;
	background: var(--mh-mega-bg, #fff);
	border-left: 1px solid var(--mh-active, #A67C32);
	border-top: 1px solid var(--mh-active, #A67C32);
	transform: translateX(-50%) rotate(45deg);
}
.mh-header .mh-has-mega:hover .mh-mega,
.mh-header .mh-has-mega:focus-within .mh-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.mh-header .mh-mega-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
	gap: 12px 34px;
	align-items: start;
}
.mh-header .mh-mega-head {
	position: relative;
	display: block;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: .3px;
	color: var(--mh-mega-head, #1C1C1C);
	text-decoration: none;
	margin-bottom: 13px;
	padding-bottom: 11px;
}
.mh-header .mh-mega-head::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: var(--mh-divider, #ECE4D3);
}
.mh-header .mh-mega-head::before {
	content: '';
	position: absolute;
	left: 0; bottom: -1px;
	width: 28px; height: 2px;
	background: var(--mh-active, #A67C32);
	z-index: 1;
}
a.mh-mega-head:hover { color: var(--mh-mega-hover, #A67C32); }
.mh-header .mh-mega-col ul { list-style: none; margin: 0; padding: 0; }
.mh-header .mh-mega-col li { margin: 0; }
.mh-header .mh-mega-col li a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 10px 7px 12px;
	font-size: 14px;
	letter-spacing: .3px;
	color: var(--mh-mega-text, #5A5A5A);
	text-decoration: none;
	border-radius: 8px;
	transition: color .18s ease, background .18s ease, transform .18s ease;
}
.mh-header .mh-mega-col li a::before {
	content: '';
	position: absolute;
	left: 3px; top: 50%;
	width: 0; height: 1.5px;
	background: var(--mh-active, #A67C32);
	transform: translateY(-50%);
	transition: width .2s ease;
}
.mh-header .mh-mega-col li a:hover {
	color: var(--mh-mega-hover, #A67C32);
	background: rgba(166, 124, 50, .06);
	transform: translateX(5px);
}
.mh-header .mh-mega-col li a:hover::before { width: 7px; }
.mh-header .mh-mega-gender {
	background: rgba(201, 168, 76, .07);
	border: 1px solid var(--mh-divider, #ECE4D3);
	border-radius: 12px;
	padding: 16px 18px;
}
.mh-header .mh-mega-gender .mh-mega-head { margin-bottom: 11px; }

/* gender dots */
.mh-g-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.mh-g-men    { background: #1D4ED8; }
.mh-g-women  { background: #BE185D; }
.mh-g-unisex { background: #C9A84C; }

/* ── Cart ── */
.mh-header .mh-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mh-header .mh-cart {
	position: relative;
	display: inline-flex;
	color: var(--mh-cart, #1C1C1C);
	text-decoration: none;
	transition: color .2s ease, transform .2s ease;
}
.mh-header .mh-cart svg { width: 26px; height: 26px; }
.mh-header .mh-cart:hover { color: var(--mh-active, #A67C32); transform: translateY(-1px); }
.mh-cart-count {
	position: absolute;
	top: -7px; right: -9px;
	min-width: 18px; height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--mh-badge-bg, #1C1C1C);
	color: var(--mh-badge-txt, #fff);
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
}
.mh-cart-count[data-count="0"] { display: none; }

/* ── Hamburger (hidden on desktop) ── */
.mh-header .mh-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px; height: 42px;
	padding: 9px;
	background: none;
	border: 0;
	cursor: pointer;
	flex-shrink: 0;
}
.mh-header .mh-burger span {
	display: block;
	height: 2px; width: 100%;
	background: var(--mh-burger, #1C1C1C);
	border-radius: 2px;
	transition: transform .3s ease, opacity .2s ease;
}

/* ── Drawer + backdrop (hidden on desktop) ── */
.mh-header .mh-drawer,
.mh-header .mh-backdrop { display: none; }

/* ============================================================
   MOBILE  (≤ 980px)
============================================================ */
@media (max-width: 980px) {
	.mh-header .mh-inner { padding: 14px 18px; gap: 12px; }
	.mh-header.mh-scrolled .mh-inner { padding-top: 10px; padding-bottom: 10px; }

	.mh-header .mh-nav { display: none; }
	.mh-header .mh-burger { display: flex; order: 1; }
	.mh-header .mh-logo  { order: 2; flex: 1; justify-content: center; }
	.mh-header .mh-logo img { margin: 0 auto; }
	.mh-header .mh-actions { order: 3; }

	/* burger → X when open */
	.mh-header.mh-open .mh-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.mh-header.mh-open .mh-burger span:nth-child(2) { opacity: 0; }
	.mh-header.mh-open .mh-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.mh-header .mh-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(20, 15, 8, .42);
		opacity: 0;
		visibility: hidden;
		transition: opacity .32s ease, visibility .32s;
		z-index: 1098;
	}
	.mh-header.mh-open .mh-backdrop { opacity: 1; visibility: visible; }

	.mh-header .mh-drawer {
		display: block;
		position: fixed;
		top: 0; right: 0;
		height: 100dvh;
		height: 100vh;
		width: min(86vw, 380px);
		background: var(--mh-drawer-bg, #fff);
		box-shadow: -24px 0 60px -28px rgba(40, 28, 10, .55);
		transform: translateX(100%);
		transition: transform .42s cubic-bezier(.5, .05, .2, 1);
		z-index: 1099;
		overflow: hidden;
	}
	.mh-header.mh-open .mh-drawer { transform: translateX(0); }

	.mh-header .mh-drawer-bg {
		position: absolute;
		inset: 0;
		background-repeat: no-repeat;
		background-position: bottom -30px right -40px;
		background-size: 320px auto;
		opacity: .05;
		pointer-events: none;
	}
	.mh-header .mh-drawer-inner {
		position: relative;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 86px 0 24px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.mh-m-menu { list-style: none; margin: 0; padding: 0 26px; flex: 1; }
	.mh-m-item { border-bottom: 1px solid var(--mh-divider, #ECE4D3); opacity: 0; transform: translateX(24px); }
	.mh-header.mh-open .mh-m-item { animation: mhItemIn .5s forwards; }
	.mh-header.mh-open .mh-m-item:nth-child(1) { animation-delay: .10s; }
	.mh-header.mh-open .mh-m-item:nth-child(2) { animation-delay: .16s; }
	.mh-header.mh-open .mh-m-item:nth-child(3) { animation-delay: .22s; }
	.mh-header.mh-open .mh-m-item:nth-child(4) { animation-delay: .28s; }
	.mh-header.mh-open .mh-m-item:nth-child(5) { animation-delay: .34s; }
	.mh-header.mh-open .mh-m-item:nth-child(6) { animation-delay: .40s; }
	@keyframes mhItemIn { to { opacity: 1; transform: translateX(0); } }

	.mh-m-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 17px 2px;
		background: none;
		border: 0;
		cursor: pointer;
		text-align: left;
		font-family: 'Cormorant Garamond', Georgia, serif;
		font-size: 23px;
		font-weight: 600;
		letter-spacing: .5px;
		color: var(--mh-drawer-txt, #1C1C1C);
		text-decoration: none;
		transition: color .2s ease;
	}
	a.mh-m-link:hover,
	a.mh-m-link:active { color: var(--mh-accent, #A67C32); }

	/* plus / minus toggle */
	.mh-m-plus { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
	.mh-m-plus::before,
	.mh-m-plus::after {
		content: '';
		position: absolute;
		top: 50%; left: 50%;
		width: 14px; height: 2px;
		background: var(--mh-accent, #A67C32);
		transform: translate(-50%, -50%);
		transition: transform .3s ease, opacity .3s ease;
	}
	.mh-m-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
	.mh-m-item.is-open .mh-m-plus::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }
	.mh-m-item.is-open .mh-m-toggle { color: var(--mh-accent, #A67C32); }

	.mh-m-sub {
		max-height: 0;
		overflow: hidden;
		transition: max-height .4s ease;
	}
	.mh-m-group { padding: 4px 0 14px; }
	.mh-m-group-head {
		display: block;
		font-family: 'Jost', sans-serif;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 1.6px;
		text-transform: uppercase;
		color: var(--mh-accent, #A67C32);
		text-decoration: none;
		margin: 6px 0 6px;
	}
	.mh-m-group ul { list-style: none; margin: 0; padding: 0; }
	.mh-m-group li a {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 8px 0 8px 12px;
		font-size: 15px;
		color: var(--mh-drawer-txt, #1C1C1C);
		text-decoration: none;
		transition: color .18s ease, padding-left .18s ease;
	}
	.mh-m-group li a:hover { color: var(--mh-accent, #A67C32); padding-left: 16px; }

	/* footer */
	.mh-drawer-foot {
		margin-top: 18px;
		padding: 20px 26px 4px;
		border-top: 1px solid var(--mh-divider, #ECE4D3);
		display: flex;
		flex-direction: column;
		gap: 12px;
		opacity: 0;
	}
	.mh-header.mh-open .mh-drawer-foot { animation: mhItemIn .5s .46s forwards; }
	.mh-drawer-cart {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 9px;
		align-self: flex-start;
		padding: 11px 22px;
		border: 1.5px solid var(--mh-accent, #A67C32);
		border-radius: 999px;
		color: var(--mh-accent, #A67C32);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 1.4px;
		text-transform: uppercase;
		text-decoration: none;
		transition: background .22s ease, color .22s ease;
	}
	.mh-drawer-cart svg { width: 17px; height: 17px; }
	.mh-drawer-cart:hover { background: var(--mh-accent, #A67C32); color: #fff; }
	.mh-drawer-cart .mh-cart-count { position: static; background: transparent; color: inherit; padding: 0; min-width: 0; height: auto; line-height: 1; font-size: 12px; }
	.mh-drawer-cart .mh-cart-count[data-count="0"] { display: none; }
	.mh-drawer-tag {
		font-family: 'Cormorant Garamond', Georgia, serif;
		font-style: italic;
		font-size: 15px;
		color: var(--mh-mega-text, #8a7a5a);
	}

	body.mh-locked { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	.mh-header *,
	.mh-header *::before,
	.mh-header *::after { transition: none !important; animation: none !important; }
	.mh-header.mh-open .mh-m-item,
	.mh-header.mh-open .mh-drawer-foot { opacity: 1; transform: none; }
}