/* Managed banners: editable in Appearance > Banners and page meta boxes. */
.ma-managed-banner {
	--ma-banner-height: 430px;
	--ma-banner-mobile-height: 340px;
	--ma-banner-overlay: .25;
	--ma-banner-position: 50% 50%;
	--ma-banner-shift: 0px;
	--ma-banner-fixed-offset: 0px;
	position: relative;
	isolation: isolate;
	min-height: var(--ma-banner-height);
	display: grid;
	align-items: center;
	overflow: hidden;
	background: #f7f1e7;
}

.ma-managed-banner__media,
.ma-managed-banner__shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ma-managed-banner__media {
	z-index: -3;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: var(--ma-banner-position);
}

.ma-managed-banner__shade {
	z-index: -2;
	background: rgba(4, 39, 70, var(--ma-banner-overlay));
}

/* Normal background: no transform and no hidden overscan. */
.ma-managed-banner--parallax-off .ma-managed-banner__media {
	inset: 0;
	transform: none;
}

/* Smooth mode uses a deliberately oversized layer, so movement never exposes
 * an empty strip at the upper or lower edge of the banner. */
.ma-managed-banner--parallax-smooth .ma-managed-banner__media {
	top: -15%;
	right: 0;
	bottom: auto;
	left: 0;
	height: 130%;
	transform: translate3d(0, var(--ma-banner-shift), 0) scale(1.02);
	will-change: transform;
}

/* CSS fallback, visible before JavaScript starts or when it is blocked. */
.ma-managed-banner--parallax-fixed .ma-managed-banner__media {
	background-attachment: fixed;
	transform: none;
}

/* Reliable fixed effect. JavaScript anchors this oversized media layer to the
 * viewport, while overflow:hidden on the banner clips it to the banner area. */
.ma-banner-parallax-js .ma-managed-banner--parallax-fixed .ma-managed-banner__media {
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
	height: max(100vh, var(--ma-banner-height));
	min-height: 100%;
	background-attachment: scroll;
	transform: translate3d(0, var(--ma-banner-fixed-offset), 0);
	will-change: transform;
}

.ma-managed-banner__inner {
	width: min(1180px, calc(100% - 48px));
	margin-inline: auto;
	padding-block: 56px;
}

.ma-managed-banner__content {
	max-width: 620px;
}

.ma-managed-banner--align-center .ma-managed-banner__content {
	margin-inline: auto;
	text-align: center;
}

.ma-managed-banner--align-right .ma-managed-banner__content {
	margin-left: auto;
	text-align: right;
}

.ma-managed-banner__eyebrow {
	margin: 0 0 14px;
	color: #bd8437;
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ma-managed-banner__title {
	margin: 0;
	color: #052f55;
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(48px, 5.6vw, 78px);
	font-weight: 500;
	line-height: .98;
}

.ma-managed-banner__text {
	margin: 22px 0 0;
	color: #38526a;
	font-size: 16px;
	line-height: 1.7;
}

.ma-managed-banner__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 26px;
	min-height: 46px;
	padding: 11px 24px;
	border: 1px solid #c58d42;
	color: #062f54;
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .2s ease, color .2s ease;
}

.ma-managed-banner__button:hover {
	background: #c58d42;
	color: #fff;
}

.ma-managed-banner--split .ma-managed-banner__shade {
	background: linear-gradient(90deg, #f8f2e8 0%, rgba(248,242,232,.96) 28%, rgba(248,242,232,.63) 46%, rgba(248,242,232,0) 68%);
}

.ma-managed-banner--split.ma-managed-banner--align-right .ma-managed-banner__shade {
	background: linear-gradient(270deg, #f8f2e8 0%, rgba(248,242,232,.96) 28%, rgba(248,242,232,.63) 46%, rgba(248,242,232,0) 68%);
}

.ma-managed-banner--overlay .ma-managed-banner__title,
.ma-managed-banner--overlay .ma-managed-banner__text {
	color: #fff;
}

.ma-managed-banner--overlay .ma-managed-banner__eyebrow {
	color: #d4a45f;
}

.ma-managed-banner--overlay .ma-managed-banner__button {
	color: #fff;
}

.ma-managed-banner--paper .ma-managed-banner__content {
	padding: 36px 42px;
	background: rgba(248,242,232,.93);
	border: 1px solid rgba(197,141,66,.45);
}

@media (max-width: 899px) {
	.ma-managed-banner {
		min-height: var(--ma-banner-mobile-height);
	}

	.ma-managed-banner__inner {
		width: min(100% - 32px, 1180px);
		padding-block: 42px;
	}

	/* Fixed mode is intentionally static on phones/tablets. */
	.ma-managed-banner--parallax-fixed .ma-managed-banner__media,
	.ma-banner-parallax-js .ma-managed-banner--parallax-fixed .ma-managed-banner__media {
		inset: 0;
		height: auto;
		min-height: 0;
		background-attachment: scroll;
		transform: none;
		will-change: auto;
	}

	.ma-managed-banner--parallax-smooth .ma-managed-banner__media {
		top: -12%;
		height: 124%;
	}

	.ma-managed-banner--split .ma-managed-banner__shade,
	.ma-managed-banner--split.ma-managed-banner--align-right .ma-managed-banner__shade {
		background: linear-gradient(90deg, rgba(248,242,232,.98) 0%, rgba(248,242,232,.88) 65%, rgba(248,242,232,.45) 100%);
	}

	.ma-managed-banner__content {
		max-width: 88%;
	}

	.ma-managed-banner__title {
		font-size: clamp(42px, 12vw, 62px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ma-managed-banner--parallax-smooth .ma-managed-banner__media {
		inset: 0;
		height: auto;
		transform: none !important;
		will-change: auto;
	}
}

body.search-results.post-type-archive-product .ma-v4-store-navigation,
body.search-results.post-type-archive-product .ma-v4-category-note {
	display: none;
}

/* About and Contact keep the original side composition on desktop. */
.ma-managed-banner--context-about.ma-managed-banner--align-left .ma-managed-banner__content,
.ma-managed-banner--context-contact.ma-managed-banner--align-left .ma-managed-banner__content {
	max-width: 590px;
	margin-right: auto;
	margin-left: 0;
	text-align: left;
}

.ma-managed-banner--context-about.ma-managed-banner--overlay.ma-managed-banner--align-left .ma-managed-banner__shade,
.ma-managed-banner--context-contact.ma-managed-banner--overlay.ma-managed-banner--align-left .ma-managed-banner__shade {
	background: linear-gradient(90deg, rgba(4, 29, 50, .78) 0%, rgba(4, 29, 50, .54) 42%, rgba(4, 29, 50, .16) 78%, rgba(4, 29, 50, .08) 100%);
}

@media (max-width: 782px) {
	.ma-managed-banner--context-about.ma-managed-banner--overlay.ma-managed-banner--align-left .ma-managed-banner__shade,
	.ma-managed-banner--context-contact.ma-managed-banner--overlay.ma-managed-banner--align-left .ma-managed-banner__shade {
		background: rgba(4, 29, 50, .58);
	}
}