/*------------------------------------------------------------------------------*/
/* Placement Banner
/*------------------------------------------------------------------------------*/

.PlacementBanners {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 2rem;
}

.PlacementBanners:has(+ .PlacementBanners) {
	margin-bottom: 1rem;
}

.PlacementBanner {
	--default-margin: 0 0 .5rem;
	--padding-block: 1rem;
	--padding-inline: 1.5rem;
	background-color: var(--background-accent-color);
	border-radius: var(--border-radius);
	padding: var(--padding-block) var(--padding-inline);
	position: relative;
}

.PlacementBanner:not(:has(.PlacementBannerText)) {
	padding-bottom: 0;
}

.PlacementBannerImage {
	border-radius: var(--border-radius);
	margin-inline: calc(var(--padding-inline) * -1);
	margin-bottom: 1rem;
	margin-top: calc(var(--padding-block) * -1);
	overflow: hidden;
	position: relative;
	z-index: 1;
	width: calc(100% + (var(--padding-inline) * 2));
}

.PlacementBanner:last-child {
	margin-bottom: 0;
}

.PlacementBanner :last-child {
	margin-bottom: 0;
}

/* Heading Sizes
/*------------------------------------------------------------------------------*/

.PlacementBanner :where(h1, h2) {
	font-size: var(--font-size-large);
}

.PlacementBanner :where(h3) {
	font-size: var(--font-size-regular);
}

.PlacementBanner :where(h4, h5, h6) {
	font-size: var(--font-size-regular);
	text-transform: uppercase;
}

/* Product Page
/*------------------------------------------------------------------------------*/

.ProductPlacementBanner {
	max-width: 500px;
}

.ProductBuy:has(+ .ProductPlacementBanner) {
	margin-bottom: 1rem;
}

/* Cart Drawer
/*------------------------------------------------------------------------------*/

.CartPlacementBanner {
	margin: -1rem -3rem 2rem -3rem;
	gap: 0;
}

.CartPlacementBanner .PlacementBanner {
	border-bottom: 1px solid var(--border-color);
	border-radius: 0;
}

.CartPlacementBanner .PlacementBanner:has(+ .PlacementBanner) {
	border-color: var(--background-accent-color-shade-1);
}

.CartPlacementBanner .PlacementBannerImage {
	border-radius: 0;
}

@media screen and (max-width: 500px) {
	.CartPlacementBanner {
		margin-inline: -1.5rem;
	}
}