#products ul.products li.product.banner {
	box-sizing: border-box;
	display: inline-block;
	margin-bottom: 3%;
	margin-right: 3%;
	overflow: hidden;
	vertical-align: top;
	width: calc(22.75% * 2 + 3%);
}

#products ul.products li.product.banner .banner-inner {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
}
#products ul.products::before,
#products ul.products::after {
	content: unset;
}

/* ===== Produktliste auf Flex umstellen ===== */
#products ul.products.columns-4 {
	display: flex !important;
	flex-wrap: wrap;
	gap: 15px;
	align-items: stretch;
	padding: 0;
	margin: 0;
}

/* Alte Abstände von Woo/Divi neutralisieren, sonst doppelt */
#products ul.products.columns-4 > li.product {
	margin: 0 !important;
}

/* 4 Spalten: Breite einer Kachel = (100 - 3 Gaps) / 4 */
#products ul.products.columns-4 > li.product {
	flex: 0 0 calc((100% - (3 * 15px)) / 4);
	box-sizing: border-box;
}

/* Banner = 2 Kacheln + 1 Gap */
#products ul.products.columns-4 > li.banner {
	flex: 0 0 calc(((100% - (3 * 15px)) / 4) * 2 + 15px);
	box-sizing: border-box;
	overflow: hidden;
}

/* Banner-Inhalt füllt Höhe und kann zentrieren */
#products ul.products.columns-4 > li.banner .banner-inner {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Optional: Produktkarten auch innen auf gleiche Höhe ziehen */
#products ul.products.columns-4 > li.product .woocommerce-LoopProduct-link {
	height: 100%;
	display: flex;
	flex-direction: column;
}

#products ul.products.columns-4 > li.product .et_shop_image {
	display: block;
}

/* CTA/Buttons nach unten drücken (wenn vorhanden) */
#products ul.products.columns-4 > li.product .add_to_cart_button {
	margin-top: auto;
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
	#products ul.products.columns-4 > li.product {
		flex-basis: calc((100% - 1 * 15px) / 2);
	}
	/* Banner = 2 Spalten => volle Breite */
	#products ul.products.columns-4 > li.banner {
		flex-basis: 100% !important;
	}
}

@media (max-width: 480px) {
	#products ul.products.columns-4 > li.product {
        flex-basis: calc(50% - 7.5px);
        flex-grow: 1;
        min-width: 150px;
	}
}

.woocommerce ul.products li.product a.add_to_cart_button {
	display: none;
}

#products ul.products li.product.banner {
	margin: 0 !important;

	.banner-inner .et_pb_module {
		height: 100%;
        min-height: clamp(250px, 40vh, 350px);
		padding: clamp(15px, 2vw, 25px);
		width: 100%;

		&::before {
			background-color: var(--hs-darkgray);
			content: "";
			height: 100%;
			left: 0;
			opacity: .6;
			position: absolute;
			top: 0;
			width: 100%;
		}
		.et_pb_promo_description {
			padding-bottom: 20px;
			position: relative;
		}
		h2, p {
			color: #fff;
			max-width: 400px;
			text-align: left;
			width: 90%;
		}
		h2 {
			font-weight: 400;
		}
		p {
			font-size: var(--btn-fs);
		}
		.et_pb_button_wrapper {
			text-align: left;

			.et_pb_button {
				background-color: #fff;
				border: 2px solid #fff;
				color: var(--hs-darkblue);
				transition: all ease-in-out .3s;
			}
		}
	}
}