/* MC Wear Header
 * Specificity bumped (.mcw-header .mcw-header__*) to beat Elementor Site
 * Settings (0,1,1) without using !important.
 *
 * Layout: optional black promo bar on top, then 3-column header below
 *   [left cluster: hamburger + EN|USA] [centered logo] [right cluster: icons]
 *
 * Tokens are pulled from CSS variables set inline on the root (so users
 * can change colors via the Settings panel without us touching the Style
 * panel, which is the only place V4 exposes color/font controls).
 */

.mcw-header.mcw-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	box-sizing: border-box;
	width: 100%;
	z-index: 100;
	color: var(--mcw-header-fg, #ffffff);
}

.admin-bar .mcw-header.mcw-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .mcw-header.mcw-header {
		top: 46px;
	}
}

/* Inner-page variant: sits in normal flow at first, no fixed positioning.
 * JS adds .mcw-header--floating once the user scrolls past the header so
 * it reattaches to the top and behaves like the homepage scrolled state. */
.mcw-header.mcw-header.mcw-header--always-scrolled {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	/* Break out of any Elementor container max-width so the header spans
	 * the full viewport even though it's `position: relative`. */
	width: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.admin-bar .mcw-header.mcw-header.mcw-header--always-scrolled {
	top: auto;
}

.mcw-header.mcw-header.mcw-header--always-scrolled.mcw-header--floating {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

.admin-bar .mcw-header.mcw-header.mcw-header--always-scrolled.mcw-header--floating {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .mcw-header.mcw-header.mcw-header--always-scrolled.mcw-header--floating {
		top: 46px;
	}
}

/* ---------- Promo bar ---------- */
.mcw-header .mcw-header__promo {
	width: 100%;
	background: var(--mcw-promo-bg, #000000);
	color: var(--mcw-promo-fg, #ffffff);
}

.mcw-header .mcw-header__promo-inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 10px 80px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	min-height: 36px;
}

/* Viewport wraps the marquee track. On desktop it's just a centered block;
 * on mobile it clips overflow so the track can scroll. */
.mcw-header .mcw-header__promo-viewport {
	grid-column: 2;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.mcw-header .mcw-header__promo-track {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0;
	min-width: 0;
}

.mcw-header .mcw-header__promo-content {
	display: inline-flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: "Mona Sans Expanded", "Mona Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
}

/* Desktop: hide the duplicate copy. The track stays static and the single
 * visible copy renders normally. */
.mcw-header .mcw-header__promo-content + .mcw-header__promo-content {
	display: none;
}

.mcw-header .mcw-header__promo-text {
	color: inherit;
}

.mcw-header .mcw-header__promo-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: opacity 0.2s ease;
}

.mcw-header .mcw-header__promo-link:hover,
.mcw-header .mcw-header__promo-link:focus-visible {
	opacity: 0.75;
	outline: none;
}

.mcw-header .mcw-header__promo-sep {
	opacity: 0.7;
	display: inline-block;
}

.mcw-header .mcw-header__promo-close {
	grid-column: 3;
	justify-self: end;
	width: 28px;
	height: 28px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}

.mcw-header .mcw-header__promo-close:hover,
.mcw-header .mcw-header__promo-close:focus-visible {
	opacity: 0.7;
	outline: none;
}

.mcw-header .mcw-header__promo-close svg {
	width: 14px;
	height: 14px;
	display: block;
}

.mcw-header .mcw-header__promo[hidden] {
	display: none;
}

/* ---------- Header bar ---------- */
.mcw-header .mcw-header__bar {
	width: 100%;
	background: var(--mcw-header-bg, transparent);
	color: var(--mcw-header-fg, #ffffff);
	transition: background-color 0.25s ease;
}

/* Scrolled state: white bg + invert content so white text/icons render black.
 * `--always-scrolled` pins this look for inner-page headers. */
.mcw-header.mcw-header--scrolled .mcw-header__bar,
.mcw-header.mcw-header--always-scrolled .mcw-header__bar {
	background: #ffffff;
}

.mcw-header.mcw-header--scrolled .mcw-header__inner,
.mcw-header.mcw-header--always-scrolled .mcw-header__inner {
	filter: invert(1);
	transition: filter 0.25s ease;
}

.mcw-header .mcw-header__inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 80px;
	min-height: var(--mcw-header-height, 80px);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
}

/* Left cluster */
.mcw-header .mcw-header__left {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	justify-self: start;
}

.mcw-header .mcw-header__toggle {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	transition: opacity 0.2s ease;
}

/* Invisible hit-area expansion so taps near the icon still register */
.mcw-header .mcw-header__toggle::before {
	content: "";
	position: absolute;
	inset: -10px;
}

.mcw-header .mcw-header__toggle:hover,
.mcw-header .mcw-header__toggle:focus-visible {
	opacity: 0.75;
	outline: none;
}

.mcw-header .mcw-header__toggle svg {
	width: 24px;
	height: 24px;
	display: block;
	pointer-events: none;
}

.mcw-header .mcw-header__lang {
	color: inherit;
	text-decoration: none;
	font-family: "Mona Sans Expanded", "Mona Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: opacity 0.2s ease;
}

.mcw-header .mcw-header__lang:hover,
.mcw-header .mcw-header__lang:focus-visible {
	opacity: 0.75;
	outline: none;
}

/* Logo (centered) */
.mcw-header .mcw-header__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	text-decoration: none;
	line-height: 0;
	justify-self: center;
}

.mcw-header .mcw-header__logo img {
	display: block;
	height: auto;
	max-width: 100%;
}

/* Right cluster */
.mcw-header .mcw-header__icons {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	justify-self: end;
}

.mcw-header .mcw-header__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.mcw-header .mcw-header__icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

.mcw-header .mcw-header__icon:hover,
.mcw-header .mcw-header__icon:focus-visible {
	opacity: 0.75;
	outline: none;
}

/* Wishlist badge */
.mcw-header .mcw-header__badge {
	position: absolute;
	top: -3px;
	right: -3px;
	background: #ffffff;
	color: #000000;
	pointer-events: none;
}

.mcw-header .mcw-header__badge--dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
}

.mcw-header .mcw-header__badge--count {
	min-width: 14px;
	height: 14px;
	padding: 0 4px;
	border-radius: 7px;
	font-family: "Mona Sans Expanded", "Mona Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 600;
	font-size: 9px;
	line-height: 14px;
	letter-spacing: 0;
	text-align: center;
	display: inline-block;
	box-sizing: border-box;
	top: -2px;
	right: -4px;
}

/* Indicator style is driven by a stable class on the icon link, so it survives
 * the cart's WooCommerce fragment swap and the wishlist's JS re-render (both
 * always emit the count badge when there are items). Dot mode collapses that
 * badge into a dot and hides the digits; number mode leaves the pill as-is. */
.mcw-header .mcw-header__icon--ind-dot .mcw-header__badge--count {
	min-width: 0;
	width: 5px;
	height: 5px;
	padding: 0;
	border-radius: 50%;
	font-size: 0;
	line-height: 0;
	top: -3px;
	right: -3px;
}

/* ---------- Tablet (≤1499) ---------- */
@media (max-width: 1499px) {
	.mcw-header .mcw-header__promo-inner {
		padding: 10px 32px;
	}
	.mcw-header .mcw-header__promo-content {
		font-size: 12px;
		line-height: 16px;
		gap: 6px;
	}
	.mcw-header .mcw-header__inner {
		padding: 0 32px;
		gap: 16px;
		min-height: calc(var(--mcw-header-height, 80px) - 8px);
	}
	.mcw-header .mcw-header__left {
		gap: 16px;
	}
	.mcw-header .mcw-header__icons {
		gap: 16px;
	}
}

/* ---------- Mobile (≤767) ---------- */
@media (max-width: 767px) {
	.mcw-header .mcw-header__promo-inner {
		grid-template-columns: 1fr auto;
		padding: 10px 16px;
		gap: 8px;
	}
	.mcw-header .mcw-header__promo-viewport {
		grid-column: 1;
		justify-content: flex-start;
	}
	.mcw-header .mcw-header__promo-track {
		flex-wrap: nowrap;
		gap: 48px;
		animation: mcw-promo-marquee var(--mcw-promo-marquee-speed, 10s) linear infinite;
		will-change: transform;
	}
	.mcw-header .mcw-header__promo-content {
		flex-shrink: 0;
		flex-wrap: nowrap;
		white-space: nowrap;
		font-size: 12px;
		line-height: 16px;
		letter-spacing: 0.04em;
	}
	/* Show BOTH copies on mobile for seamless marquee loop. */
	.mcw-header .mcw-header__promo-content + .mcw-header__promo-content {
		display: inline-flex;
	}
	.mcw-header .mcw-header__promo-track:hover,
	.mcw-header .mcw-header__promo-track:focus-within {
		animation-play-state: paused;
	}
	.mcw-header .mcw-header__promo-close {
		grid-column: 2;
	}
	/* Mobile layout: logo left | icons + hamburger right.
	   EN|USA lang moved into the offcanvas, so it's hidden in the bar. */
	.mcw-header .mcw-header__inner {
		padding: 12px 16px;
		gap: 14px;
		min-height: 0;
		grid-template-columns: 1fr auto auto;
		align-items: center;
	}
	.mcw-header .mcw-header__logo {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}
	.mcw-header .mcw-header__icons {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		display: inline-flex;
		align-items: center;
		gap: 14px;
	}
	.mcw-header .mcw-header__left {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}
	.mcw-header .mcw-header__lang {
		display: none;
	}
}

/* When promo is dismissed via JS, hide w/ inline class for safety */
.mcw-header .mcw-header__promo.is-dismissed {
	display: none;
}

/* Promo marquee: translate the track by exactly half its width — each
 * copy of the content is identical so the loop is seamless. */
@keyframes mcw-promo-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.mcw-header .mcw-header__promo-track {
		animation: none;
	}
}

/* On the off chance the gap pseudo class isn't enough, fall back to
 * static layout when JS marks the track for reduced motion. */
.mcw-header .mcw-header__promo-track.is-paused {
	animation-play-state: paused;
}

/* ---------------------------------------------------------------------------
 * Fixed-header gap fix.
 * The homepage header is position:fixed (out of flow), but the Elementor
 * section/container holding it still reserves vertical height (a Min-Height or
 * top padding). That reserved strip sits at the very top of the page — masked
 * by the black promo bar, then exposed as a white gap the moment the promo is
 * dismissed (visible on mobile Safari/Chrome). Collapse that wrapper to zero.
 *
 * Scoped via :has() (supported in those browsers) to the FIXED header only —
 * inner-page headers use .mcw-header--always-scrolled (position:relative) and
 * MUST keep their flow height, so they're excluded.
 * ------------------------------------------------------------------------- */
.elementor-section:has(.mcw-header:not(.mcw-header--always-scrolled)),
.e-con:has(.mcw-header:not(.mcw-header--always-scrolled)),
.elementor-widget-mcw-classic-header:has(.mcw-header:not(.mcw-header--always-scrolled)),
.elementor-widget-mcw-classic-header:has(.mcw-header:not(.mcw-header--always-scrolled)) > .elementor-widget-container {
	min-height: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	line-height: 0;
}

/* ---------------------------------------------------------------------------
 * Search overlay — white top sheet over a blurred backdrop (AJAX live search).
 * Empty state: heading/underline input + hint + suggestions. Typing swaps in a
 * count line + a horizontal scroller of product cards (same card as Collection).
 * ------------------------------------------------------------------------- */
.mcw-header .mcw-header__search {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
	transition: visibility 0s linear 0.45s;
}
.mcw-header .mcw-header__search.is-open {
	visibility: visible;
	transition: visibility 0s linear 0s;
}

/* Animate the blur + dim on the backdrop itself (not via parent opacity, which
 * makes a backdrop-filtered layer pop in abruptly). */
.mcw-header .mcw-header__search-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 11, 11, 0);
	-webkit-backdrop-filter: blur(0px);
	backdrop-filter: blur(0px);
	cursor: default;
	transition: background-color 0.45s ease, -webkit-backdrop-filter 0.45s ease, backdrop-filter 0.45s ease;
}
.mcw-header .mcw-header__search.is-open .mcw-header__search-backdrop {
	background: rgba(11, 11, 11, 0.61);
	-webkit-backdrop-filter: blur(45px);
	backdrop-filter: blur(45px);
}

/* White sheet inset 24px from the viewport (like the cart drawer), height
 * driven by content. */
.mcw-header .mcw-header__search-dialog {
	position: absolute;
	left: 24px;
	right: 24px;
	top: 24px;
	z-index: 1;
	background: #ffffff;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	opacity: 0;
	transform: translateY(-24px);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.mcw-header .mcw-header__search.is-open .mcw-header__search-dialog {
	opacity: 1;
	transform: translateY(0);
}

/* WordPress admin bar: push the sheet below the fixed bar (32px desktop /
 * 46px mobile) so it isn't clipped underneath it. */
body.admin-bar .mcw-header .mcw-header__search-dialog {
	top: 56px; /* 24 inset + 32 admin bar */
	max-height: calc(100vh - 80px);
}
@media screen and (max-width: 782px) {
	body.admin-bar .mcw-header .mcw-header__search-dialog {
		top: 62px; /* 16 inset + 46 admin bar */
		max-height: calc(100vh - 78px);
	}
}

.mcw-header .mcw-header__search-close {
	position: absolute;
	top: 24px;
	right: 80px; /* aligns to the container right edge (matches inner padding) */
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: #efeeef;
	color: #000000;
	cursor: pointer;
	z-index: 2;
	transition: background 0.2s ease;
}
.mcw-header .mcw-header__search-close:hover,
.mcw-header .mcw-header__search-close:focus-visible {
	background: #e2e1e2;
	outline: none;
}

.mcw-header .mcw-header__search-inner {
	position: relative;
	box-sizing: border-box;
	max-width: 1440px;
	margin: 0 auto;
	padding: 56px 80px 48px; /* site container: matches header 80/32/16 */
	text-align: left;
}

/* Heading hidden visually — the input placeholder carries the label per design. */
.mcw-header .mcw-header__search-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.mcw-header .mcw-header__search-form {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 560px;
	border-bottom: 1px solid #000000;
}
.mcw-header .mcw-header__search-input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	margin: 0;
	padding: 8px 48px 8px 0;
	border: 0;
	background: transparent;
	font-family: "Mona Sans Expanded", "Mona Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 1px;
	color: #000000;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.mcw-header .mcw-header__search-input::placeholder {
	color: #000000;
	opacity: 1;
}
.mcw-header .mcw-header__search-input::-webkit-search-decoration,
.mcw-header .mcw-header__search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.mcw-header .mcw-header__search-submit,
.mcw-header .mcw-header__search-clear {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: #000000;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.mcw-header .mcw-header__search-submit:hover,
.mcw-header .mcw-header__search-submit:focus-visible,
.mcw-header .mcw-header__search-clear:hover,
.mcw-header .mcw-header__search-clear:focus-visible {
	opacity: 0.6;
	outline: none;
}
.mcw-header .mcw-header__search-submit svg,
.mcw-header .mcw-header__search-clear svg { display: block; }
.mcw-header .mcw-header__search-submit[hidden],
.mcw-header .mcw-header__search-clear[hidden] { display: none; }

/* Intro: hint + suggestions (empty state). Figma: field → 34px → hint → 19px → suggestions. */
.mcw-header .mcw-header__search-intro { margin-top: 34px; }
.mcw-header .mcw-header__search-intro[hidden] { display: none; }
.mcw-header .mcw-header__search-hint {
	margin: 0 0 19px;
	font-family: "Mona Sans Expanded", "Mona Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 1px;
	text-transform: capitalize;
	color: #717680;
}
.mcw-header .mcw-header__search-suggest {
	margin: 0;
	font-family: "Mona Sans Expanded", "Mona Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 1px;
	text-transform: capitalize;
	color: #717680;
}
.mcw-header .mcw-header__search-suggest-label { color: #000000; margin-right: 8px; }
.mcw-header .mcw-header__search-suggest-link {
	color: #717680;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.mcw-header .mcw-header__search-suggest-link:hover,
.mcw-header .mcw-header__search-suggest-link:focus-visible {
	color: #000000;
	border-bottom-color: #000000;
	outline: none;
}

/* Results (typed state). */
.mcw-header .mcw-header__search-results { margin-top: 28px; }
.mcw-header .mcw-header__search-results[hidden] { display: none; }
.mcw-header .mcw-header__search-count {
	margin: 0 0 24px;
	font-family: "Mona Sans Expanded", "Mona Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 14px;
	letter-spacing: 1px;
	color: #717680;
}
.mcw-header .mcw-header__search-count-label { color: #000000; margin-right: 6px; }

/* Results carousel — reuses the wishlist card + Swiper. Neutralise the wishlist
 * section's full-bleed margins since we're already inside a padded container. */
.mcw-header .mcw-header__search-grid { width: 100%; }
.mcw-header .mcw-header__search-grid .mcw-wishlist { display: block; padding: 0; }
.mcw-header .mcw-header__search-grid .mcw-wishlist__inner {
	margin: 0;
	padding: 0;
	max-width: none;
}
.mcw-header .mcw-header__search-grid .mcw-wishlist__carousel {
	width: 100%;
	margin: 0;
	overflow: hidden;
}
.mcw-header .mcw-header__search.is-loading .mcw-header__search-grid { opacity: 0.55; transition: opacity 0.15s ease; }

@media (max-width: 1024px) {
	.mcw-header .mcw-header__search-inner { padding: 56px 32px 40px; }
	.mcw-header .mcw-header__search-close { right: 32px; }
}
@media (max-width: 767px) {
	.mcw-header .mcw-header__search-dialog {
		left: 16px;
		right: 16px;
		top: 16px;
		max-height: calc(100vh - 32px);
	}
	.mcw-header .mcw-header__search-close { top: 16px; right: 16px; }
	.mcw-header .mcw-header__search-inner { padding: 64px 16px 32px; }
	.mcw-header .mcw-header__search-input { font-size: 18px; }
	.mcw-header .mcw-header__search-hint,
	.mcw-header .mcw-header__search-suggest { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.mcw-header .mcw-header__search,
	.mcw-header .mcw-header__search-dialog { transition: none; }
}