/**
 * Header — combined mobile menu (primary nav + cart/account).
 */

@media (min-width: 900px) {
	.header-mobile-panel {
		display: contents;
	}

	.main-navigation__utilities {
		display: none;
	}
}

@media (max-width: 899px) {
	.site-header__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			'branding toggle'
			'mobile-panel mobile-panel';
		align-items: center;
		gap: var(--onoff-gap-md);
	}

	.site-branding {
		grid-area: branding;
		order: unset;
		justify-self: start;
	}

	.nav-toggle {
		grid-area: toggle;
		order: unset;
		margin: 0;
		justify-self: end;
	}

	.header-end-cluster {
		display: none !important;
	}

	.header-mobile-panel {
		grid-area: mobile-panel;
		order: unset;
		display: none;
		width: 100%;
		min-width: 0;
	}

	.header-mobile-panel.is-open {
		display: block;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		z-index: 90;
		padding: var(--onoff-gap-md) var(--onoff-gutter);
		background: var(--onoff-color-surface);
		border-block-end: 1px solid var(--onoff-color-border);
		box-shadow: var(--onoff-shadow);
		text-align: start;
	}

	.header-mobile-panel.is-open .main-navigation {
		display: block !important;
		position: static !important;
		inset: auto !important;
		top: auto !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	.main-navigation__utilities {
		margin-block-start: var(--onoff-gap-md);
		padding-block-start: var(--onoff-gap-md);
		border-block-start: 1px solid var(--onoff-color-border);
	}

	.header-utilities--menu .header-utilities__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
		width: 100%;
	}

	.header-utilities--menu .header-utilities__link {
		justify-content: flex-start;
		gap: 0.75rem;
		width: 100%;
		height: auto;
		min-block-size: var(--onoff-touch-target-min, 2.75rem);
		padding-block: 0.5rem;
		font-weight: 500;
	}

	.header-utilities--menu .header-utilities__label {
		font-family: var(--onoff-font-family);
		font-size: 1rem;
		line-height: 1.5;
	}

	.header-utilities--menu .header-utilities__count {
		position: static;
		margin-inline-start: auto;
	}

	/* Inner pages — dark header dropdown */
	body:not(.home) .site-branding {
		display: flex;
		align-items: center;
		align-self: center;
	}

	body:not(.home) .onoff-site-logo-link,
	body:not(.home) .site-branding .site-title {
		display: flex;
		align-items: center;
		margin: 0;
	}

	body:not(.home) .header-mobile-panel.is-open {
		background: #262415;
		border-block-end-color: rgba(255, 255, 255, 0.12);
	}

	body:not(.home) .main-navigation__utilities {
		border-block-start-color: rgba(255, 255, 255, 0.12);
	}

	body:not(.home) .header-mobile-panel.is-open .main-navigation a,
	body:not(.home) .header-utilities--menu .header-utilities__link {
		color: #fff;
	}

	body:not(.home) .header-mobile-panel.is-open .main-navigation a:hover,
	body:not(.home) .header-mobile-panel.is-open .main-navigation a:focus-visible,
	body:not(.home) .header-mobile-panel.is-open .main-navigation .current-menu-item > a,
	body:not(.home) .header-utilities--menu .header-utilities__link:hover,
	body:not(.home) .header-utilities--menu .header-utilities__link:focus-visible {
		color: var(--onoff-color-nav-active);
	}

	/* Homepage hero overlay header */
	.home .site-header--over-hero .header-mobile-panel.is-open {
		background: var(--onoff-color-surface);
	}

	.home .site-header--over-hero .header-mobile-panel.is-open .main-navigation a {
		color: var(--onoff-color-text);
		text-shadow: none;
	}

	.home .site-header--over-hero .header-mobile-panel.is-open .main-navigation a:hover,
	.home .site-header--over-hero .header-mobile-panel.is-open .main-navigation a:focus-visible,
	.home .site-header--over-hero .header-mobile-panel.is-open .main-navigation .current-menu-item > a {
		color: var(--onoff-color-nav-active);
	}

	.home .site-header--over-hero .header-utilities--menu .header-utilities__link {
		color: var(--onoff-color-primary-dark);
		text-shadow: none;
	}

	[dir='ltr'] .site-branding {
		justify-self: start;
	}

	[dir='ltr'] .nav-toggle {
		justify-self: end;
	}
}