/* -------------------------
   Produkt Grid
-------------------------- */

.woocommerce ul.products {

	display: grid;

	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

	gap: 30px;

}

/* Standard WooCommerce margins entfernen */

.woocommerce ul.products li.product {

	margin: 0;

	padding: 0;

	height: 100%;

	list-style: none;

}

/* -------------------------
   Produktkarte
-------------------------- */

.product-card-bg {

	position: relative;

	height: 420px;

	border-radius: 12px;

	overflow: hidden;

	display: flex;

	align-items: flex-end;

}

.product-card-link {

	position: relative;

	z-index: 3;

	display: flex;

	align-items: flex-end;

	width: 100%;

	height: 100%;

	text-decoration: none;

	color: inherit;

}

/* Hintergrundbild */

.product-card-bg::before {

	content: "";

	position: absolute;

	inset: 0;

	background-image: var(--bg);

	background-size: cover;

	background-position: center;

	background-repeat: no-repeat;

	transition: transform 0.6s ease;

	z-index: 1;

}

/* Hover Zoom */

.product-card-bg:hover::before,
.product-card-bg:focus-within::before {

	transform: scale(1.08);

}

/* Overlay */

.product-card-bg::after {

	content: "";

	position: absolute;

	inset: 0;

	background: linear-gradient(
		to top,
		rgba(8, 23, 48, 0.86),
		rgba(18, 72, 136, 0.52),
		rgba(46, 132, 215, 0.26)
	);

	z-index: 2;

}

.product-card-bg.is-out-of-stock::before {

	filter: grayscale(0.2) brightness(0.8);

}

.product-stock-badge {

	position: absolute;

	top: 12px;

	right: 12px;

	z-index: 4;

	padding: 6px 10px;

	border-radius: 999px;

	background: rgba(177, 34, 34, 0.9);

	border: 1px solid rgba(255, 255, 255, 0.5);

	color: #fff;

	font-size: 0.78rem;

	font-weight: 700;

	letter-spacing: 0.03em;

	text-transform: uppercase;

}

/* Content */

.card-overlay {

	position: relative;

	z-index: 3;

	padding: 25px;

	color: white;

	width: 100%;

}

/* Titel */

.product-title {

	font-size: 1.55rem;

	margin-bottom: 10px;

	line-height: 1.3;

	color: #fff;

}

/* Beschreibung */

.product-description {

	font-size: 1.02rem;

	line-height: 1.5;

	margin-bottom: 15px;

	display: -webkit-box;

	-webkit-line-clamp: 4;

	-webkit-box-orient: vertical;

	overflow: hidden;

}

/* Footer */

.product-footer {

	display: flex;

	justify-content: space-between;

	align-items: center;

	flex-wrap: wrap;

	gap: 12px;

}

/* Preis */

.product-price {

	font-weight: 600;

	font-size: 1rem;

	flex: 0 0 auto;

}

.product-card-cta {

	font-size: 0.92rem;

	font-weight: 600;

	color: #fff;

	opacity: 0.95;

	margin-left: auto;

	white-space: nowrap;

}

.product-card-link:focus-visible {

	outline: 2px solid rgba(255, 255, 255, 0.95);

	outline-offset: -4px;

}

@media (max-width: 480px) {

	.woocommerce ul.products {

		gap: 18px;

	}

	.product-card-bg {

		height: 360px;

		border-radius: 10px;

	}

	.card-overlay {

		padding: 18px;

	}

	.product-title {

		font-size: 1.28rem;

		margin-bottom: 8px;

	}

	.product-description {

		font-size: 0.98rem;

		margin-bottom: 12px;

		-webkit-line-clamp: 3;

	}

	.product-price {

		font-size: 0.95rem;

	}

	.product-card-cta {

		font-size: 0.86rem;

	}

	.product-stock-badge {

		top: 10px;

		right: 10px;

		padding: 5px 9px;

		font-size: 0.72rem;

	}

}