/**
 * Category banner overlay readability fix.
 *
 * Use-case:
 * WooCommerce category pages output banner:
 *  - .page-banner.page-banner.archive-banner
 *  - .image-wrap > img (background/hero image)
 *  - .page-banner-content > h1.category-title.entry-title
 *
 * Problem:
 * title becomes unreadable when it overlays the image.
 *
 * No LESS compilation. Keep scope narrow.
 */

/* Banner image wrapper */
.page-banner .image-wrap {
	position: relative;
	display: block;
}

.page-banner .image-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.62) 0%,
		rgba(0, 0, 0, 0.32) 45%,
		rgba(0, 0, 0, 0.10) 70%,
		rgba(0, 0, 0, 0.02) 100%
	);
	z-index: 1;
	pointer-events: none;
}

.page-banner .image-wrap img {
	position: relative;
	z-index: 0;
	display: block;
	width: 100%;
	height: auto;
}

/* Title above overlay */
.page-banner .page-banner-content {
	position: absolute; /* already in theme CSS, but keep safe */
	z-index: 5;
}

.page-banner .page-banner-content .category-title.entry-title {
	position: relative;
	z-index: 6;
	color: #ffffff !important;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6) !important;
	background: transparent !important;
	padding: 0 !important;
	border-radius: 0 !important;
	display: inline-block;
}

.page-banner .page-banner-content .category-title.entry-title::before {
	content: "";
	position: absolute;
	inset: -6px -12px -6px -12px;
	background: rgba(0, 0, 0, 0.48);
	border-radius: 12px;
	z-index: -1;
}

/* Breadcrumbs: один рядок + читабельність на банері */
.page-banner .page-banner-content .woocommerce-breadcrumb,
.page-banner .page-banner-content .breadcrumbs {
	position: relative;
	z-index: 6;
	color: #ffffff !important;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6) !important;
	background: rgba(0, 0, 0, 0.38) !important;
	padding: 8px 14px !important;
	border-radius: 10px !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0 !important;
	margin-top: 10px !important;
	font-size: 14px !important;
	line-height: 1.35 !important;
	white-space: nowrap !important;
	max-width: 100%;
	box-sizing: border-box;
}

.page-banner .page-banner-content .woocommerce-breadcrumb a,
.page-banner .page-banner-content .breadcrumbs a,
.page-banner .page-banner-content .woocommerce-breadcrumb span,
.page-banner .page-banner-content .breadcrumbs span {
	color: #ffffff !important;
	display: inline !important;
	font-size: inherit !important;
	line-height: inherit !important;
	white-space: nowrap !important;
}

.page-banner .page-banner-content .woocommerce-breadcrumb span.separator,
.page-banner .page-banner-content .breadcrumbs span.separator {
	display: inline !important;
	color: rgba(255, 255, 255, 0.9) !important;
}

@media (max-width: 767px) {
	.page-banner .page-banner-content .category-title.entry-title::before {
		inset: -5px -10px -5px -10px;
		border-radius: 10px;
	}

	.page-banner .page-banner-content .woocommerce-breadcrumb,
	.page-banner .page-banner-content .breadcrumbs {
		padding: 6px 10px !important;
		font-size: 13px !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		justify-content: flex-start !important;
	}
}