/**
 * Canonical mobile header geometry.
 *
 * Page-specific layers may choose which actions are present, but the logo,
 * row, spacing and action targets must remain visually stable everywhere.
 */
@media (max-width: 781px) {
	:root {
		--oo-mobile-header-height: 76px;
		--oo-mobile-header-gutter: 18px;
		--oo-mobile-header-logo-width: 148px;
		--oo-mobile-header-control-size: 40px;
		--oo-mobile-header-action-gap: 8px;
	}

	body .wp-site-blocks > header.wp-block-template-part:has(.oo-sport-header-row),
	body .wp-site-blocks > .wp-block-template-part:has(.oo-sport-header-row),
	body .oo-sport-header,
	body header.oo-sport-header {
		box-sizing: border-box !important;
		min-height: var(--oo-mobile-header-height) !important;
		height: var(--oo-mobile-header-height) !important;
	}

	body .oo-sport-header-row,
	body.home .oo-sport-header-row,
	body.oo-webshop .oo-sport-header-row,
	body .wp-site-blocks .oo-sport-header .oo-sport-header-row,
	body.oo-sport-team-hub.home .wp-site-blocks > header.wp-block-template-part .oo-sport-header-row {
		box-sizing: border-box !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		max-width: none !important;
		min-height: var(--oo-mobile-header-height) !important;
		height: var(--oo-mobile-header-height) !important;
		margin: 0 !important;
		padding: 8px var(--oo-mobile-header-gutter) !important;
		gap: 12px !important;
	}

	body .oo-sport-header-logo-wrap,
	body .oo-sport-header .wp-block-site-logo,
	body .oo-sport-header .wp-block-site-logo a,
	body .oo-sport-header .oo-sport-header-logo,
	body .oo-sport-header .custom-logo-link,
	body.oo-webshop .oo-sport-header-logo-wrap,
	body.oo-webshop .oo-sport-header .oo-sport-header-logo-wrap,
	body.oo-webshop .oo-sport-header .wp-block-site-logo,
	body.oo-webshop .oo-sport-header .custom-logo-link,
	body.oo-sport-team-hub.home .oo-sport-header .oo-sport-header-logo-wrap,
	body.oo-sport-team-hub.home .oo-sport-header .oo-sport-header-logo,
	body.oo-sport-team-hub.home .oo-sport-header .wp-block-site-logo,
	body.oo-sport-team-hub.home .oo-sport-header .wp-block-site-logo a,
	body.oo-sport-team-hub.home .oo-sport-header .custom-logo-link {
		box-sizing: border-box !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		flex: 0 0 var(--oo-mobile-header-logo-width) !important;
		width: var(--oo-mobile-header-logo-width) !important;
		max-width: var(--oo-mobile-header-logo-width) !important;
		min-width: var(--oo-mobile-header-logo-width) !important;
		height: 60px !important;
		min-height: 0 !important;
		max-height: 60px !important;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 0 !important;
		overflow: visible !important;
	}

	body .oo-sport-header .wp-block-site-logo img,
	body .oo-sport-header .oo-sport-header-logo img,
	body .oo-sport-header .custom-logo,
	body.home .oo-sport-header-logo img,
	body.oo-webshop .oo-sport-header .custom-logo,
	body.oo-webshop .oo-sport-header img.custom-logo,
	body.oo-sport-team-hub.home .oo-sport-header .oo-sport-header-row .oo-sport-header-logo-wrap img.custom-logo,
	body.oo-sport-team-hub.home .oo-sport-header .oo-sport-header-row .wp-block-site-logo img.custom-logo {
		display: block !important;
		width: var(--oo-mobile-header-logo-width) !important;
		max-width: var(--oo-mobile-header-logo-width) !important;
		height: auto !important;
		max-height: 42px !important;
		margin: 0 !important;
		object-fit: contain !important;
		object-position: left center !important;
		transform: none !important;
	}

	body .oo-sport-nav-and-cta,
	body .oo-sport-header-nav,
	body .oo-sport-header-nav.wp-block-navigation,
	body.oo-webshop .oo-sport-nav-and-cta {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		flex: 0 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
		min-height: var(--oo-mobile-header-control-size) !important;
		height: var(--oo-mobile-header-control-size) !important;
		margin: 0 0 0 auto !important;
		padding: 0 !important;
		gap: var(--oo-mobile-header-action-gap) !important;
	}

	body .oo-search-trigger,
	body .oo-sport-header-mobile-menu-toggle,
	body .oo-sport-header-nav .oo-sport-header-mobile-menu-toggle,
	body.oo-webshop .oo-webshop-menu-trigger,
	body.oo-webshop .oo-sport-nav-and-cta > .oo-webshop-mobile-cart-link,
	body.oo-webshop .oo-sport-nav-and-cta > .oo-search-trigger {
		box-sizing: border-box !important;
		position: relative !important;
		inset: auto !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 0 0 var(--oo-mobile-header-control-size) !important;
		width: var(--oo-mobile-header-control-size) !important;
		min-width: var(--oo-mobile-header-control-size) !important;
		max-width: var(--oo-mobile-header-control-size) !important;
		height: var(--oo-mobile-header-control-size) !important;
		min-height: var(--oo-mobile-header-control-size) !important;
		max-height: var(--oo-mobile-header-control-size) !important;
		margin: 0 !important;
		padding: 0 !important;
		transform: none !important;
	}

	body .oo-sport-header-row > .oo-search-trigger {
		position: static !important;
		inset: auto !important;
		align-self: center !important;
		transform: none !important;
	}

	body .oo-sport-header-row > .oo-search-trigger:hover,
	body .oo-sport-header-row > .oo-search-trigger:focus-visible {
		transform: none !important;
	}

	body.oo-webshop .oo-webshop-primary-nav {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 0 0 var(--oo-mobile-header-control-size) !important;
		width: var(--oo-mobile-header-control-size) !important;
		min-width: var(--oo-mobile-header-control-size) !important;
		height: var(--oo-mobile-header-control-size) !important;
		margin: 0 !important;
		padding: 0 !important;
		gap: 0 !important;
	}

	/* The shop drawer trigger uses the same visual hamburger as team pages. */
	body.oo-webshop .oo-webshop-menu-trigger i {
		display: block !important;
		position: relative !important;
		width: 28px !important;
		height: 22px !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: linear-gradient(currentColor, currentColor) center / 100% 2.4px no-repeat !important;
		color: currentColor !important;
		transform: none !important;
	}

	body.oo-webshop .oo-webshop-menu-trigger i::before,
	body.oo-webshop .oo-webshop-menu-trigger i::after {
		content: "" !important;
		position: absolute !important;
		left: 0 !important;
		width: 28px !important;
		height: 2.4px !important;
		border-radius: 999px !important;
		background: currentColor !important;
	}

	body.oo-webshop .oo-webshop-menu-trigger i::before {
		top: 0 !important;
	}

	body.oo-webshop .oo-webshop-menu-trigger i::after {
		top: auto !important;
		bottom: 0 !important;
	}

	body.oo-webshop .oo-webshop-menu-trigger[aria-expanded="true"] i {
		background-size: 0 2.4px !important;
	}

	body.oo-webshop .oo-webshop-menu-trigger[aria-expanded="true"] i::before {
		top: 9.8px !important;
		transform: rotate(45deg) !important;
	}

	body.oo-webshop .oo-webshop-menu-trigger[aria-expanded="true"] i::after {
		bottom: 9.8px !important;
		transform: rotate(-45deg) !important;
	}

	/* Gateway header has different actions, but shares the same baseline. */
	body.oo-sport-hub-gateway .oo-hub-gateway-header {
		box-sizing: border-box !important;
		min-height: var(--oo-mobile-header-height) !important;
		height: var(--oo-mobile-header-height) !important;
		padding: 8px var(--oo-mobile-header-gutter) !important;
		gap: 10px !important;
	}

	body.oo-sport-hub-gateway .oo-hub-logo,
	body.oo-sport-hub-gateway .oo-hub-logo-image {
		width: var(--oo-mobile-header-logo-width) !important;
		max-width: var(--oo-mobile-header-logo-width) !important;
		height: auto !important;
		max-height: 42px !important;
		margin: 0 !important;
		object-fit: contain !important;
		object-position: left center !important;
	}

	body.oo-sport-hub-gateway .oo-search-trigger.is-gateway-trigger {
		flex: 0 0 var(--oo-mobile-header-control-size) !important;
		width: var(--oo-mobile-header-control-size) !important;
		height: var(--oo-mobile-header-control-size) !important;
		margin-left: auto !important;
	}
}

@media (max-width: 350px) {
	:root {
		--oo-mobile-header-gutter: 14px;
		--oo-mobile-header-logo-width: 132px;
		--oo-mobile-header-action-gap: 6px;
	}
}