/*
 * PromotionOnline mobile header and mega-menu remediation.
 * Child-theme only; desktop mega menu and commerce logic are untouched.
 * 2026-07-19
 */

@media (max-width: 991px) {
	html,
	body {
		max-width: 100%;
		overflow-x: clip;
	}

	/* Header geometry: keep logo, cart and hamburger inside the viewport. */
	html body #header.header-builder,
	html body #header.header-builder .header-main,
	html body #header.header-builder .header-main.sticky {
		width: 100% !important;
		max-width: 100% !important;
		min-height: 78px !important;
		height: auto !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		transform: none !important;
	}

	html body #header.header-builder .header-main .porto-wrap-container.container {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 20px !important;
		box-sizing: border-box !important;
	}

	html body #header.header-builder .header-main .porto-wrap-container.container > .row {
		display: flex !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		min-height: 78px !important;
		margin: 0 !important;
		padding: 0 !important;
		align-items: center !important;
		justify-content: space-between !important;
		flex-wrap: nowrap !important;
		box-sizing: border-box !important;
	}

	html body #header.header-builder .header-main .porto-wrap-container.container > .row > .vc_column_container:first-child {
		display: block !important;
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	html body #header.header-builder .logo,
	html body #header.header-builder .logo > a,
	html body #header.header-builder .logo img {
		display: block !important;
		width: min(180px, calc(100vw - 146px)) !important;
		max-width: min(180px, calc(100vw - 146px)) !important;
		height: auto !important;
		max-height: 32px !important;
		margin: 0 !important;
		padding: 0 !important;
		object-fit: contain !important;
		object-position: left center !important;
	}

	html body #header.header-builder .po__header_icon.vc_column_container {
		display: block !important;
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		height: auto !important;
		margin: 0 0 0 12px !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	html body #header.header-builder .po__header_icon > .wpb_wrapper {
		display: flex !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: 8px !important;
		overflow: visible !important;
	}

	html body #header.header-builder #mega-menu-wrap-main_menu,
	html body #header.header-builder .po-header-extra-nav,
	html body #header.header-builder .searchform-popup,
	html body #header.header-builder .my-account,
	html body #header.header-builder .my-wishlist,
	html body #header.header-builder .po-nav-hover-indicator,
	html body .po-desktop-mega {
		display: none !important;
	}

	html body #header.header-builder #mini-cart,
	html body #header.header-builder .mobile-toggle {
		display: inline-flex !important;
		flex: 0 0 40px !important;
		width: 40px !important;
		min-width: 40px !important;
		max-width: 40px !important;
		height: 40px !important;
		min-height: 40px !important;
		margin: 0 !important;
		padding: 0 !important;
		align-items: center !important;
		justify-content: center !important;
		box-sizing: border-box !important;
	}

	html body #header.header-builder #mini-cart .cart-head {
		display: flex !important;
		width: 40px !important;
		height: 40px !important;
		margin: 0 !important;
		padding: 0 !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* The closed off-canvas cart must be completely outside the viewport. */
	html body #header.header-builder #mini-cart .cart-popup {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: auto !important;
		width: min(88vw, 360px) !important;
		max-width: 360px !important;
		height: 100dvh !important;
		max-height: 100dvh !important;
		margin: 0 !important;
		transform: translate3d(105%, 0, 0) !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transition: transform .28s ease, opacity .2s ease, visibility 0s linear .28s !important;
		box-sizing: border-box !important;
	}

	html body #header.header-builder #mini-cart.minicart-opened .cart-popup {
		transform: translate3d(0, 0, 0) !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transition: transform .28s ease, opacity .2s ease, visibility 0s !important;
	}

	/* Porto mobile side panel: compact, scrollable and predictable. */
	html body #side-nav-panel {
		width: min(100%, 420px) !important;
		max-width: 420px !important;
		height: 100dvh !important;
		max-height: 100dvh !important;
		padding: 0 20px 24px !important;
		background: #fff !important;
		color: #171b20 !important;
		flex-direction: column !important;
		align-items: stretch !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		overscroll-behavior: contain !important;
		-webkit-overflow-scrolling: touch !important;
		box-sizing: border-box !important;
	}

	html body .side-nav-panel-close {
		top: 14px !important;
		right: 14px !important;
		left: auto !important;
		display: flex !important;
		width: 42px !important;
		height: 42px !important;
		align-items: center !important;
		justify-content: center !important;
		border-radius: 50% !important;
		background: #fff !important;
		color: #21364d !important;
	}

	html body #side-nav-panel > .searchform {
		flex: 0 0 auto !important;
		width: calc(100% - 52px) !important;
		height: 48px !important;
		margin: 14px 52px 0 0 !important;
		padding: 0 !important;
		border: 1px solid #e5e0d9 !important;
		border-radius: 24px !important;
		background: #f7f5f2 !important;
		box-shadow: none !important;
		box-sizing: border-box !important;
	}

	html body #side-nav-panel > .searchform .searchform-fields {
		display: flex !important;
		width: 100% !important;
		height: 46px !important;
		align-items: center !important;
	}

	html body #side-nav-panel > .searchform .text {
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
		height: 46px !important;
	}

	html body #side-nav-panel > .searchform input[type="text"],
	html body #side-nav-panel > .searchform input[type="search"] {
		width: 100% !important;
		height: 46px !important;
		padding: 0 8px 0 18px !important;
		border: 0 !important;
		background: transparent !important;
		color: #171b20 !important;
		font-size: 16px !important;
		line-height: 46px !important;
		box-shadow: none !important;
	}

	html body #side-nav-panel > .searchform .button-wrap,
	html body #side-nav-panel > .searchform button {
		display: flex !important;
		flex: 0 0 46px !important;
		width: 46px !important;
		height: 46px !important;
		margin: 0 !important;
		padding: 0 !important;
		align-items: center !important;
		justify-content: center !important;
		border: 0 !important;
		background: transparent !important;
		color: #21364d !important;
		box-shadow: none !important;
	}

	html body #side-nav-panel .menu-wrap {
		flex: 0 0 auto !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 22px 0 0 !important;
	}

	html body #side-nav-panel #mega-menu-wrap-main_menu,
	html body #side-nav-panel #mega-menu-main_menu {
		display: flex !important;
		position: static !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		flex-direction: column !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	html body #side-nav-panel #mega-menu-main_menu li.mega-menu-item {
		position: relative !important;
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		box-sizing: border-box !important;
	}

	html body #side-nav-panel #mega-menu-main_menu > li.mega-menu-item {
		border-bottom: 1px solid #e7e2dc !important;
	}

	html body #side-nav-panel #mega-menu-main_menu a.mega-menu-link {
		display: flex !important;
		width: 100% !important;
		min-height: 44px !important;
		height: auto !important;
		margin: 0 !important;
		padding: 11px 42px 11px 12px !important;
		align-items: center !important;
		border: 0 !important;
		background: transparent !important;
		color: #20252a !important;
		font-family: inherit !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		line-height: 1.45 !important;
		text-transform: none !important;
		box-shadow: none !important;
		box-sizing: border-box !important;
	}

	html body #side-nav-panel #mega-menu-main_menu > li.mega-menu-item > a.mega-menu-link {
		min-height: 54px !important;
		padding-top: 14px !important;
		padding-bottom: 14px !important;
		font-size: 19px !important;
		font-weight: 700 !important;
	}

	html body #side-nav-panel #mega-menu-main_menu .mega-indicator {
		position: absolute !important;
		top: 50% !important;
		right: 10px !important;
		left: auto !important;
		display: flex !important;
		width: 30px !important;
		height: 30px !important;
		margin: 0 !important;
		align-items: center !important;
		justify-content: center !important;
		transform: translateY(-50%) !important;
	}

	html body #side-nav-panel #mega-menu-main_menu ul.mega-sub-menu {
		position: static !important;
		float: none !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 0 8px 10px !important;
		border: 0 !important;
		background: #fff !important;
		box-shadow: none !important;
		box-sizing: border-box !important;
	}

	html body #side-nav-panel #mega-menu-main_menu li.po-mobile-expanded > ul.mega-sub-menu {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	html body #side-nav-panel #mega-menu-main_menu li.po-mobile-expanded > a.mega-menu-link > .mega-indicator::after {
		transform: rotate(180deg) !important;
	}

	html body #side-nav-panel #mega-menu-main_menu > li.po-mobile-extra-link > a.mega-menu-link {
		padding-right: 12px !important;
	}

	html body #side-nav-panel .po__mobile-menu-bottom {
		width: 100% !important;
		margin: 20px 0 0 !important;
		padding: 18px 12px 0 !important;
		border-top: 1px solid #e7e2dc !important;
		box-sizing: border-box !important;
	}

	html body #side-nav-panel .po__mobile-email,
	html body #side-nav-panel .po__mobile-footer,
	html body #side-nav-panel .po__mobile-bottom-text {
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		color: #5a6066 !important;
		font-size: 14px !important;
		line-height: 1.5 !important;
	}

	html body #side-nav-panel .po__mobile-bottom-text {
		margin-top: 16px !important;
	}
}

@media (max-width: 479px) {
	html body #header.header-builder .header-main .porto-wrap-container.container {
		padding-right: 16px !important;
		padding-left: 16px !important;
	}

	html body #header.header-builder .logo,
	html body #header.header-builder .logo > a,
	html body #header.header-builder .logo img {
		width: min(172px, calc(100vw - 136px)) !important;
		max-width: min(172px, calc(100vw - 136px)) !important;
	}

	html body #side-nav-panel {
		width: 100% !important;
		max-width: 100% !important;
		padding-right: 16px !important;
		padding-left: 16px !important;
	}
}