/* MegaMasterok — site header and shared search form. */

.megam-header {
	position: relative;
	z-index: 50;
	background: var(--megam-surface);
	border-bottom: 1px solid var(--megam-line);
}

.megam-header__bar {
	display: flex;
	align-items: center;
	gap: var(--megam-space-5);
	min-height: 70px;
}

/* Brand ----------------------------------------------------------------- */

.megam-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: none;
	color: var(--megam-ink);
	text-decoration: none;
}

.megam-brand:hover,
.megam-brand:focus {
	color: var(--megam-ink);
}

.megam-brand__mark {
	width: 50px;
	height: 46px;
	flex: none;
}

.megam-brand__mark .megam-visual__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.megam-brand__logo {
	display: block;
	width: auto;
	max-height: 44px;
}

.megam-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.megam-brand__name {
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.02;
}

.megam-brand__tagline {
	margin-top: 4px;
	font-size: 0.71875rem;
	font-weight: 500;
	color: var(--megam-muted);
	letter-spacing: 0.005em;
	white-space: nowrap;
}

/* Navigation ------------------------------------------------------------ */

.megam-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.megam-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(16px, 8.1vw - 77px, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.megam-nav__list li {
	margin: 0;
}

.megam-nav__list a {
	display: block;
	padding: 10px 0;
	color: var(--megam-text);
	font-size: var(--megam-fs-md);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease;
}

.megam-nav__list a:hover,
.megam-nav__list a:focus-visible,
.megam-nav__list .current-menu-item > a {
	color: var(--megam-accent);
}

.megam-nav__list .current-menu-item > a {
	box-shadow: inset 0 -2px 0 var(--megam-accent);
}

.megam-nav__list a:focus-visible {
	outline: none;
	border-radius: 4px;
	box-shadow: var(--megam-focus);
}

/* Category groups: disclosure button + dropdown of real categories (megam_nav_fallback()). */
.megam-nav__group {
	position: relative;
}

.megam-header .megam-nav__toggle,
.megam-header .megam-nav__toggle:hover,
.megam-header .megam-nav__toggle:focus {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 10px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--megam-text);
	font-family: inherit;
	font-size: var(--megam-fs-md);
	font-weight: 500;
	line-height: inherit;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s ease;
}

.megam-header .megam-nav__toggle:hover,
.megam-header .megam-nav__toggle[aria-expanded="true"],
.megam-nav__group:focus-within > .megam-nav__toggle,
.megam-nav__group.current-menu-ancestor > .megam-nav__toggle {
	color: var(--megam-accent);
}

.megam-nav__group.current-menu-ancestor > .megam-nav__toggle {
	box-shadow: inset 0 -2px 0 var(--megam-accent);
}

.megam-header .megam-nav__toggle:focus-visible {
	outline: none;
	border-radius: 4px;
	box-shadow: var(--megam-focus);
}

.megam-nav__toggle .megam-icon {
	flex: none;
	color: var(--megam-subtle);
	transition: transform 0.15s ease, color 0.15s ease;
}

.megam-nav__toggle:hover .megam-icon,
.megam-nav__toggle[aria-expanded="true"] .megam-icon {
	color: currentColor;
}

.megam-nav__toggle[aria-expanded="true"] .megam-icon {
	transform: rotate(180deg);
}

.megam-nav__sub {
	display: none;
	position: absolute;
	top: 100%;
	left: -12px;
	z-index: 60;
	box-sizing: border-box;
	min-width: 212px;
	margin: 0;
	padding: 6px;
	border: 1px solid var(--megam-line);
	border-radius: var(--megam-radius);
	background: var(--megam-surface);
	box-shadow: var(--megam-shadow-2);
	list-style: none;
}

/* Without JavaScript the groups open on hover/focus; enhanced, only by their button. */
.megam-header:not(.is-enhanced) .megam-nav__group:hover > .megam-nav__sub,
.megam-header:not(.is-enhanced) .megam-nav__group:focus-within > .megam-nav__sub,
.megam-header.is-enhanced .megam-nav__group.is-open > .megam-nav__sub {
	display: block;
}

.megam-nav__list .megam-nav__sub a {
	padding: 9px 12px;
	border-radius: var(--megam-radius-sm);
	font-size: var(--megam-fs-base);
}

.megam-nav__list .megam-nav__sub a:hover,
.megam-nav__list .megam-nav__sub .current-menu-item > a {
	background: var(--megam-surface-alt);
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.megam-nav__toggle .megam-icon {
		transition: none;
	}
}

/* Actions --------------------------------------------------------------- */

.megam-header__actions {
	display: flex;
	align-items: center;
	gap: var(--megam-space-4);
	flex: none;
	margin-left: auto;
}

.megam-nav + .megam-header__actions {
	margin-left: 0;
}

.megam-header .megam-header__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--megam-radius-sm);
	background: transparent;
	color: var(--megam-ink);
	cursor: pointer;
}

.megam-header .megam-header__icon-btn[hidden] {
	display: none;
}

.megam-header .megam-header__icon-btn:hover,
.megam-header .megam-header__icon-btn[aria-expanded="true"] {
	background: var(--megam-surface-alt);
	color: var(--megam-accent);
}

.megam-header .megam-header__icon-btn:focus-visible {
	outline: none;
	box-shadow: var(--megam-focus);
}

.megam-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 22px;
	border-radius: var(--megam-radius-sm);
	background: var(--megam-accent);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--megam-shadow-accent);
	transition: background-color 0.15s ease;
}

.megam-button:hover,
.megam-button:focus {
	background: var(--megam-accent-strong);
	color: #fff;
}

/* Header search panel (collapsed only once JS has enhanced the header) --- */

.megam-header__search {
	padding: var(--megam-space-4) 0;
	border-top: 1px solid var(--megam-line);
	background: var(--megam-surface);
}

.megam-header.is-enhanced .megam-header__search {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	box-shadow: 0 12px 24px rgba(20, 26, 38, 0.08);
}

.megam-header.is-enhanced.is-search-open .megam-header__search {
	display: block;
}

.megam-header__search .megam-search {
	max-width: 880px;
	margin-inline: auto;
}

/* Search form (shared) ---------------------------------------------------- */

.megam-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--megam-space-2);
	box-sizing: border-box;
	width: 100%;
	padding: 6px;
	border: 1px solid var(--megam-line);
	border-radius: var(--megam-radius);
	background: var(--megam-surface);
	box-shadow: var(--megam-shadow-2);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.megam-search:focus-within {
	border-color: var(--megam-blue);
	box-shadow: var(--megam-shadow-2), var(--megam-focus);
}

.megam-search__icon {
	display: flex;
	padding-left: 12px;
	color: var(--megam-ink);
}

.megam-search input.megam-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 4px;
	border: 0;
	background: transparent;
	color: var(--megam-ink);
	font-family: inherit;
	font-size: 0.96875rem;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.megam-search input.megam-search__input:focus {
	border: 0;
	background: transparent;
	color: var(--megam-ink);
	outline: none;
}

.megam-search input.megam-search__input::placeholder {
	color: var(--megam-subtle);
	opacity: 1;
}

.megam-search input.megam-search__input::-webkit-search-cancel-button {
	cursor: pointer;
}

.megam-search .megam-search__submit {
	flex: none;
	height: 44px;
	padding: 0 32px;
	border: 0;
	border-radius: var(--megam-radius-sm);
	background: var(--megam-accent);
	color: #fff;
	font-family: inherit;
	font-size: var(--megam-fs-base);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--megam-shadow-accent);
	transition: background-color 0.15s ease;
}

.megam-search .megam-search__submit:hover,
.megam-search .megam-search__submit:focus {
	background: var(--megam-accent-strong);
	color: #fff;
}

.megam-search .megam-search__submit:focus-visible {
	outline: none;
	box-shadow: var(--megam-focus);
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1180px) {
	.megam-header__bar {
		min-height: 64px;
		gap: var(--megam-space-3);
	}

	.megam-header.is-enhanced .megam-header__menu-toggle {
		display: inline-flex;
	}

	.megam-header.is-enhanced .megam-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		padding: var(--megam-space-2) var(--megam-gutter) var(--megam-space-4);
		border-top: 1px solid var(--megam-line);
		background: var(--megam-surface);
		box-shadow: 0 12px 24px rgba(20, 26, 38, 0.08);
	}

	.megam-header.is-enhanced.is-nav-open .megam-nav {
		display: block;
	}

	.megam-header.is-enhanced .megam-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.megam-header.is-enhanced .megam-nav__list a {
		padding: 14px 0;
		border-bottom: 1px solid var(--megam-line);
		font-size: var(--megam-fs-md);
	}

	.megam-header.is-enhanced .megam-nav__list .current-menu-item > a {
		box-shadow: none;
	}

	/* Groups become an accordion inside the menu panel. */
	.megam-header.is-enhanced .megam-nav__toggle,
	.megam-header.is-enhanced .megam-nav__toggle:hover,
	.megam-header.is-enhanced .megam-nav__toggle:focus {
		justify-content: space-between;
		width: 100%;
		padding: 14px 0;
		border-bottom: 1px solid var(--megam-line);
		text-align: left;
	}

	.megam-header.is-enhanced .megam-nav__group.current-menu-ancestor > .megam-nav__toggle {
		box-shadow: none;
	}

	.megam-header.is-enhanced .megam-nav__sub {
		position: static;
		min-width: 0;
		padding: 2px 0 8px 16px;
		border: 0;
		border-bottom: 1px solid var(--megam-line);
		border-radius: 0;
		box-shadow: none;
	}

	.megam-header.is-enhanced .megam-nav__list .megam-nav__sub a {
		padding: 11px 0;
		border-bottom: 0;
		border-radius: 0;
		background: transparent;
		font-size: var(--megam-fs-base);
	}

	.megam-header.is-enhanced .megam-header__actions {
		margin-left: auto;
		gap: var(--megam-space-2);
	}
}

@media (min-width: 1181px) {
	.megam-header .megam-header__menu-toggle {
		display: none;
	}
}

@media (max-width: 600px) {
	/* Gap 12 px: brand + three 44 px actions fit a 390 px viewport without overflow. */
	.megam-header__bar {
		gap: var(--megam-space-3);
		min-height: 60px;
	}

	.megam-brand {
		gap: 8px;
	}

	.megam-brand__mark {
		width: 36px;
		height: 33px;
	}

	.megam-brand__name {
		font-size: 1.3125rem;
	}

	.megam-brand__tagline {
		font-size: 0.625rem;
	}

	.megam-header .megam-header__account {
		justify-content: center;
		width: 44px;
		padding: 0;
	}

	.megam-header__account-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.megam-search .megam-search__submit {
		padding: 0 18px;
	}
}

/*
 * Narrow phones. Measured need: mark + wordmark + tagline (216 px) + three
 * 44 px actions (148 px) exceed a 390 px content box, so the tagline goes at
 * ≤ 400 px. At ≤ 380 px the wordmark block alone is still too wide, so gaps,
 * mark and wordmark tighten slightly; tap targets stay 44 px.
 */
@media (max-width: 400px) {
	.megam-brand__tagline {
		display: none;
	}
}

@media (max-width: 380px) {
	.megam-header__bar {
		gap: var(--megam-space-2);
	}

	.megam-header .megam-header__actions,
	.megam-header.is-enhanced .megam-header__actions {
		gap: 4px;
	}

	.megam-brand {
		gap: 6px;
	}

	.megam-brand__mark {
		width: 32px;
		height: 29px;
	}

	.megam-brand__name {
		font-size: 1.1875rem;
	}
}