/**
 * Astra 4.x mobile-header compatibility.
 *
 * These rules only apply below Astra's 922px header breakpoint. They undo
 * legacy Astra 2.x positioning without changing the established desktop look.
 */

@media (max-width: 921px) {
	#ast-mobile-header {
		position: relative;
		z-index: 100;
	}

	#ast-mobile-header .site-primary-header-wrap {
		min-height: 94px;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		overflow: visible;
		border-bottom: 1px solid #eee8e2;
		background: #fff;
	}

	#ast-mobile-header .ast-builder-grid-row {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 12px;
		min-height: 94px;
	}

	#ast-mobile-header .site-header-primary-section-left {
		min-width: 0;
		gap: 10px;
	}

	#ast-mobile-header .site-header-primary-section-left > .ast-builder-layout-element,
	#ast-mobile-header .site-branding,
	#ast-mobile-header .site-logo-img,
	#ast-mobile-header .custom-logo-link {
		position: static !important;
		display: flex !important;
		align-items: center;
		width: auto !important;
		height: auto !important;
		min-width: 0;
		line-height: 1;
	}

	#ast-mobile-header [data-section="title_tagline"] {
		flex: 0 0 108px;
		align-self: stretch;
	}

	#ast-mobile-header .site-branding {
		position: relative !important;
		flex: 0 0 108px;
		align-self: stretch;
		height: 94px !important;
		overflow: visible;
	}

	#ast-mobile-header .custom-logo-link {
		position: absolute !important;
		top: 0;
		left: 12px;
		z-index: 5;
	}

	#masthead #ast-mobile-header .site-logo-img img,
	#masthead #ast-mobile-header img.custom-logo {
		position: static !important;
		top: auto !important;
		display: block;
		width: auto !important;
		height: 110px !important;
		max-width: 98px !important;
		object-fit: contain;
		filter: drop-shadow(0 4px 4px rgba(47, 39, 31, 0.28));
	}

	#ast-mobile-header .ast-header-woo-cart {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		gap: 8px;
		margin-left: auto;
		padding-left: 0;
		line-height: 1 !important;
	}

	#ast-mobile-header .velis-mobile-search {
		flex: 0 0 auto;
	}

	#ast-mobile-header .velis-mobile-search > summary {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 32px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: #d3a066;
		color: #fff;
		cursor: pointer;
		list-style: none;
	}

	#ast-mobile-header .velis-mobile-search > summary::-webkit-details-marker {
		display: none;
	}

	#ast-mobile-header .velis-mobile-search[open] > summary {
		background: #b9834b;
	}

	#ast-mobile-header .velis-mobile-search form {
		position: fixed;
		top: 94px;
		right: 12px;
		left: 12px;
		z-index: 999;
		display: flex;
		gap: 8px;
		padding: 12px;
		border: 1px solid #e5ddd5;
		background: #fff;
		box-shadow: 0 12px 28px rgba(47, 39, 31, 0.16);
	}

	body.admin-bar #ast-mobile-header .velis-mobile-search form {
		top: 140px;
	}

	#ast-mobile-header .velis-mobile-search:not([open]) form {
		display: none;
	}

	#ast-mobile-header .velis-mobile-search form label {
		flex: 1;
		margin: 0;
	}

	#ast-mobile-header .velis-mobile-search input[type="search"] {
		width: 100%;
		height: 42px;
		margin: 0;
		padding: 8px 12px;
		border: 1px solid #d9d1c8;
		border-radius: 0;
		font-size: 14px;
	}

	#ast-mobile-header .velis-mobile-search button[type="submit"] {
		min-height: 42px;
		padding: 8px 14px;
		border-radius: 0;
		background: #a97b49;
		font-size: 13px;
	}

	#ast-mobile-header .ast-site-header-cart,
	#ast-mobile-header .ast-site-header-cart .cart-container,
	#ast-mobile-header .ast-site-header-cart .ast-addon-cart-wrap {
		position: relative;
		display: flex;
		float: none;
		align-items: center;
		width: auto !important;
		height: auto;
		margin: 0 !important;
		padding: 0;
		line-height: 1 !important;
	}

	#ast-mobile-header .ast-site-header-cart .cart-container::before {
		content: "";
		display: block;
		flex: 0 0 22px;
		width: 22px;
		height: 22px;
		margin-right: 6px;
		background: url("../../cart.png") center / contain no-repeat;
	}

	#ast-mobile-header .ast-site-header-cart .ast-woo-header-cart-info-wrap {
		position: static;
		display: flex;
		float: none;
		align-items: center;
		width: auto;
		height: auto;
		padding: 0;
		line-height: 1;
	}

	#ast-mobile-header .ast-site-header-cart .ast-woo-header-cart-total {
		display: block;
		float: none;
		width: auto;
		height: 26px;
		padding: 6px 7px !important;
		border-radius: 0;
		font-size: 11px;
		line-height: 14px;
		white-space: nowrap;
	}

	#ast-mobile-header .ast-site-header-cart .ast-cart-menu-wrap {
		position: absolute;
		top: -6px;
		left: 13px;
		display: block;
		align-items: center;
		width: 16px;
		height: 16px;
		line-height: 1;
	}

	#ast-mobile-header .ast-site-header-cart .ast-cart-menu-wrap .count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 16px;
		height: 16px;
		padding: 0 3px;
		border: 0;
		border-radius: 999px;
		background: #f0a14c;
		color: #fff;
		font-size: 9px;
		line-height: 1;
	}

	#ast-mobile-header .ast-site-header-cart .ast-count-text {
		line-height: 1;
	}

	#ast-mobile-header .ast-button-wrap .menu-toggle.main-header-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 38px;
		min-height: 38px;
		padding: 7px;
		border-radius: 0;
		background: #d3a066;
		color: #fff;
	}

	#ast-mobile-header .ast-mobile-header-content {
		position: absolute;
		top: 110px;
		right: 12px;
		left: 12px;
		z-index: 998;
		width: auto;
		max-height: calc(100vh - 122px);
		margin: 0;
		padding: 0;
		overflow-x: hidden;
		overflow-y: auto;
		border: 1px solid #e6ddd4;
		border-radius: 10px;
		background: #fff;
		box-shadow: 0 18px 42px rgba(47, 39, 31, 0.2);
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: #b99b7b #f4eee8;
		animation: velis-mobile-menu-in 180ms ease-out;
	}

	#ast-mobile-header .ast-mobile-header-content::-webkit-scrollbar {
		width: 6px;
	}

	#ast-mobile-header .ast-mobile-header-content::-webkit-scrollbar-track {
		background: #f4eee8;
	}

	#ast-mobile-header .ast-mobile-header-content::-webkit-scrollbar-thumb {
		border-radius: 999px;
		background: #b99b7b;
	}

	body.admin-bar #ast-mobile-header .ast-mobile-header-content {
		max-height: calc(100vh - 168px);
	}

	#ast-mobile-header .ast-mobile-header-content .ast-builder-menu-mobile,
	#ast-mobile-header .ast-main-header-bar-alignment,
	#ast-mobile-header .main-header-bar-navigation,
	#ast-mobile-header #ast-mobile-site-navigation,
	#ast-mobile-header #ast-hf-mobile-menu {
		width: 100%;
		margin: 0;
		padding: 0;
		background: #fff;
	}

	#ast-mobile-header .main-header-bar-navigation {
		box-shadow: none;
	}

	#ast-mobile-header #ast-hf-mobile-menu > li {
		position: relative;
		margin: 0;
		border-bottom: 1px solid #eee8e2;
		background: #fff;
	}

	#ast-mobile-header #ast-hf-mobile-menu > li:last-child {
		border-bottom: 0;
	}

	#ast-mobile-header #ast-hf-mobile-menu .menu-link {
		display: flex;
		align-items: center;
		min-height: 50px;
		padding: 13px 54px 13px 18px;
		color: #44515e;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.35;
		letter-spacing: 0.01em;
		transition: color 160ms ease, background-color 160ms ease;
	}

	#ast-mobile-header #ast-hf-mobile-menu > .current-menu-item,
	#ast-mobile-header #ast-hf-mobile-menu > .current-menu-ancestor {
		box-shadow: inset 3px 0 0 #a97b49;
	}

	#ast-mobile-header #ast-hf-mobile-menu > .current-menu-item > .menu-link,
	#ast-mobile-header #ast-hf-mobile-menu > .current-menu-ancestor > .menu-link {
		background: #f8f2eb;
		font-weight: 600;
	}

	#ast-mobile-header #ast-hf-mobile-menu .current-menu-item > .menu-link,
	#ast-mobile-header #ast-hf-mobile-menu .current-menu-ancestor > .menu-link,
	#ast-mobile-header #ast-hf-mobile-menu .menu-link:hover,
	#ast-mobile-header #ast-hf-mobile-menu .menu-link:focus-visible {
		color: #a97b49 !important;
	}

	#ast-mobile-header #ast-hf-mobile-menu .menu-link:hover,
	#ast-mobile-header #ast-hf-mobile-menu .menu-link:focus-visible {
		background: #fbf7f3;
	}

	#ast-mobile-header #ast-hf-mobile-menu .menu-link > .dropdown-menu-toggle {
		display: none;
	}

	#ast-mobile-header #ast-hf-mobile-menu .menu-item-has-children > .ast-menu-toggle {
		position: absolute;
		top: 4px;
		right: 6px;
		z-index: 2;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 7px;
		background: transparent;
		color: #8c7560;
	}

	#ast-mobile-header #ast-hf-mobile-menu .menu-item-has-children > .ast-menu-toggle:hover,
	#ast-mobile-header #ast-hf-mobile-menu .menu-item-has-children > .ast-menu-toggle:focus-visible {
		background: #eee4da;
		color: #8f6437;
	}

	#ast-mobile-header #ast-hf-mobile-menu .ast-menu-toggle .ast-arrow-svg {
		width: 14px;
		height: 9px;
		transition: transform 160ms ease;
	}

	#ast-mobile-header #ast-hf-mobile-menu .ast-menu-toggle[aria-expanded="true"] .ast-arrow-svg {
		transform: rotate(180deg);
	}

	#ast-mobile-header #ast-hf-mobile-menu .sub-menu {
		margin: 0;
		padding: 6px 0;
		border-top: 1px solid #eadfd5;
		background: #fbf8f4;
		box-shadow: inset 3px 0 0 #dfc5aa;
	}

	#ast-mobile-header #ast-hf-mobile-menu .sub-menu li {
		position: relative;
		border: 0;
		background: transparent;
	}

	#ast-mobile-header #ast-hf-mobile-menu .sub-menu .menu-link {
		min-height: 42px;
		padding: 10px 50px 10px 30px;
		color: #5d6872;
		font-size: 13px;
		font-weight: 400;
	}

	#ast-mobile-header #ast-hf-mobile-menu .sub-menu .sub-menu .menu-link {
		padding-left: 44px;
		font-size: 12.5px;
	}
}

@keyframes velis-mobile-menu-in {
	from {
		opacity: 0;
		transform: translateY(-7px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	#ast-mobile-header .ast-mobile-header-content {
		animation: none;
	}
}

@media (max-width: 359px) {
	#ast-mobile-header .site-header-primary-section-left {
		gap: 6px;
	}

	#ast-mobile-header [data-section="title_tagline"],
	#ast-mobile-header .site-branding {
		flex-basis: 82px;
	}

	#ast-mobile-header .custom-logo-link {
		left: 4px;
	}

	#masthead #ast-mobile-header .site-logo-img img,
	#masthead #ast-mobile-header img.custom-logo {
		height: 94px !important;
		max-width: 84px !important;
	}

	#ast-mobile-header .ast-site-header-cart .ast-woo-header-cart-total {
		padding-right: 5px !important;
		padding-left: 5px !important;
		font-size: 10px;
	}

	#ast-mobile-header .velis-mobile-search > summary {
		width: 30px;
		height: 30px;
	}

	#ast-mobile-header .ast-button-wrap .menu-toggle.main-header-menu-toggle {
		min-width: 34px;
		min-height: 34px;
	}
}