/* KCL shop page banner — matches the ~500px hero treatment used on
   /technology-pricing/ and /people-pricing/, in place of Avada's default
   small title bar. Scoped to body.woocommerce-shop only. */

body.woocommerce-shop .avada-page-titlebar-wrapper {
	position: relative;
	margin-top: -65px;
	min-height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-image: url("https://kcl.yourinfo.wiki/wp-content/uploads/2026/05/Mel-and-Aid-at-Son-Prim.jpg");
	background-size: cover;
	background-position: center;
	/* same brand-purple-over-photo treatment as the rest of the site's hero
	   banners (e.g. About Us, Technology), instead of a flat black tint. */
	background-color: var(--awb-color6);
	background-blend-mode: overlay;
}

/* Avada's default title bar paints its own solid background behind the
   heading/breadcrumb (this is what showed up as a solid purple band cutting
   across the photo). Strip every layer of that out so only the photo +
   ::before overlay above show through, same as the reference pages. */
body.woocommerce-shop .fusion-page-title-bar,
body.woocommerce-shop .fusion-page-title-row,
body.woocommerce-shop .fusion-page-title-wrapper,
body.woocommerce-shop .fusion-page-title-captions,
body.woocommerce-shop .fusion-page-title-secondary,
body.woocommerce-shop #awb-ptb-heading {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

body.woocommerce-shop .fusion-page-title-bar {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 0 20px;
}

body.woocommerce-shop .fusion-page-title-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

body.woocommerce-shop .fusion-page-title-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

body.woocommerce-shop #awb-ptb-heading {
	color: #ffffff;
	font-size: 56px;
	font-weight: 700;
	margin: 0;
}

body.woocommerce-shop .fusion-page-title-secondary {
	margin-top: 14px;
}

body.woocommerce-shop .fusion-breadcrumbs,
body.woocommerce-shop .fusion-breadcrumbs a,
body.woocommerce-shop .fusion-breadcrumbs .breadcrumb-leaf {
	color: rgba(255, 255, 255, 0.85);
}

body.woocommerce-shop .fusion-breadcrumbs a:hover {
	color: #ffffff;
}

@media (max-width: 782px) {
	body.woocommerce-shop .avada-page-titlebar-wrapper {
		min-height: 340px;
		margin-top: 0;
	}

	body.woocommerce-shop #awb-ptb-heading {
		font-size: 38px;
	}
}