/**
 * Compact page banner — Cart, Checkout, My Account, Wishlist.
 *
 * The About/Contact hero silhouette (breadcrumb → title → gold diamond
 * divider) on a cream wash instead of a photo, for pages that have no banner
 * image of their own. See template-parts/components/page-banner.php.
 */

.page-banner {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background: var(--wc-banner-bg);
	/*
	 * The header logo is absolutely placed and hangs --header-logo-overhang
	 * past the 72px bar. Home/PLP/About open on a photo hero that absorbs it;
	 * this band is a pale wash, so it has to pad the overhang out or the logo
	 * lands on top of the breadcrumb. Same treatment as single-product.css.
	 */
	padding: calc(var(--header-logo-overhang) + 30px) 0 34px;
	min-height: var(--wc-banner-height);
	display: flex;
	align-items: center;
}

/* Same decorative blur as the Contact banner, mirrored to the right edge. */
.page-banner__blur {
	position: absolute;
	width: 362px;
	height: 270px;
	right: -50px;
	top: -95px;
	border-radius: 50%;
	background: var(--color-hero-blur);
	filter: blur(66.15px);
	pointer-events: none;
}

.page-banner__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wc-page-max);
	margin: 0 auto;
	padding: 0 var(--section-inline-pad);
	box-sizing: border-box;
}

.page-banner .kaahel-breadcrumb {
	margin-bottom: var(--wc-banner-crumb-gap);
}

.page-banner__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--wc-banner-title-size);
	font-weight: 400;
	line-height: var(--wc-banner-title-lh);
	letter-spacing: -0.01em;
	color: var(--color-heading);
}

/* Matches .contact-hero__divider — same width, glyph and gradient falloff. */
.page-banner__divider {
	display: flex;
	align-items: center;
	gap: 4px;
	width: var(--wc-banner-divider-width);
	max-width: 100%;
	height: 11.31px;
	margin-top: var(--wc-banner-divider-gap);
}

.page-banner__divider-line {
	flex: 1 1 auto;
	height: 1px;
	background: var(--color-accent);
}

.page-banner__divider-line:first-child {
	background: linear-gradient(90deg, transparent 0%, var(--color-accent) 100%);
}

.page-banner__divider-line:last-child {
	background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%);
}

.page-banner__divider-glyph {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border: 2px solid var(--color-accent);
	background: var(--color-breadcrumb-diamond);
	transform: rotate(-45deg);
	box-sizing: border-box;
}

.page-banner__subtitle {
	max-width: 520px;
	margin: 16px 0 0;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 26px;
	color: var(--color-body-76);
}

/* ------------------------------------------------------------ responsive --- */

@media (max-width: 1024px) {
	.page-banner__title {
		font-size: 34px;
		line-height: 46px;
	}
}

/*
 * At 782px WordPress returns the header logo to normal flow (56px tall), so
 * the overhang no longer exists and the band can shed the padding that
 * compensated for it.
 */
@media (max-width: 782px) {
	.page-banner {
		padding: 34px 0 28px;
		min-height: 0;
	}

	.page-banner__inner {
		padding: 0 24px;
	}

	.page-banner__blur {
		display: none;
	}
}

@media (max-width: 600px) {
	.page-banner__title {
		font-size: 28px;
		line-height: 38px;
	}

	.page-banner__divider {
		width: 220px;
	}
}