/*
 * Archive banners: the category promo link, the sidebar promo banner and the
 * banner above the product list (archive and search; layout: components/catalog.css).
 * Ported from Oxygen template 39, the global classes in universal.css and snippet 165.
 */

/* Category promo banner: the [banner_cat_product] shortcode, often empty. */
.wa-archive__promo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Sidebar banner (shop settings: banner image + texts). */
.wa-sidebar-banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	min-height: 400px; /* Oxygen original */
	padding: var(--space-s) var(--space-s) var(--space-l);
	border-radius: var(--radius-s);
	background-repeat: no-repeat;
}

.wa-sidebar-banner__subtitle {
	color: var(--white);
	font-size: var(--text-m);
	text-align: center;
}

.wa-sidebar-banner__title {
	margin-bottom: var(--space-s);
	color: var(--white);
	font-size: var(--text-l);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.wa-sidebar-banner__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-s);
	border-radius: var(--radius-s);
	background-color: var(--accent);
	color: var(--white);
	font-size: var(--text-s);
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

@media (min-width: 1024px) {
	.wa-sidebar-banner {
		min-height: 460px; /* Oxygen original */
	}
}

/* Banner above the product list (shop settings: banner image + texts). */
.wa-archive-banner-above-products {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 110px; /* Oxygen original */
	margin-bottom: var(--space-m);
	padding-right: var(--space-l);
	border-radius: var(--radius-s);
	text-align: center;
}

.wa-archive-banner-above-products__subtitle {
	color: var(--white);
	font-size: var(--text-m);
	line-height: 1.3;
	text-align: center;
}

.wa-archive-banner-above-products__title {
	color: var(--white);
	font-size: var(--text-l);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}