/* =====================================================================
 * Produkt-Grids – siehe product-grid.php
 * Look der früheren Ultimate-Addons-Kacheln, ohne deren 750 KB CSS.
 * ===================================================================== */

.br-grid {
	--br-pg-cols: 4;
	--br-pg-gap-x: 20px;
	--br-pg-gap-y: 35px;
	--br-pg-text: #3e4349;
	--br-pg-accent: #3ba9d2;
}
.br-grid.br-grid--cols-3 { --br-pg-cols: 3; }

.br-grid.elementor-wc-products ul.products,
.br-grid ul.products {
	display: grid !important;
	grid-template-columns: repeat(var(--br-pg-cols), minmax(0, 1fr)) !important;
	gap: var(--br-pg-gap-y) var(--br-pg-gap-x) !important;
	margin: 0 !important;
	padding: 0 !important;
}

.br-grid ul.products::before,
.br-grid ul.products::after {
	display: none !important;
}

.br-grid ul.products li.product {
	display: flex !important;
	flex-direction: column;
	width: auto !important;
	margin: 0 !important;
	padding: 0 0 16px !important;
	float: none !important;
	background: #fff;
	text-align: center !important;
}

.br-grid.br-grid--card ul.products li.product {
	border: 1px solid #222;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
}

/* Theme-Markup (Page Builder Framework): Wrapper + Summary auflösen, damit die
   Reihenfolge per "order" steuerbar ist: Bild, Kategorie, Titel, Preis, MwSt/Versand, Button */
.br-grid ul.products li.product .wpbf-woo-product-wrapper {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	flex: 1 1 auto;
	width: 100%;
	padding: 0 !important;
}
.br-grid ul.products li.product .wpbf-woo-loop-summary {
	display: contents !important;
}
.br-grid ul.products li.product .wpbf-woo-loop-thumbnail-wrapper { order: 1; width: 100%; margin: 0 0 16px !important; }
.br-grid ul.products li.product .wpbf-woo-product-category      { order: 2; }
.br-grid ul.products li.product .wpbf-woo-loop-summary > a       { order: 3; }
.br-grid ul.products li.product .price                           { order: 4; }
.br-grid ul.products li.product .wc-gzd-additional-info          { order: 5; }
.br-grid ul.products li.product .wpc-product-button,
.br-grid ul.products li.product .wpbf-woo-loop-summary > .button,
.br-grid ul.products li.product .added_to_cart                   { order: 6; margin-top: auto !important; }

.br-grid ul.products li.product a.woocommerce-loop-product__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.br-grid ul.products li.product a img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

.br-grid ul.products li.product .wpbf-woo-product-category {
	display: none;
	margin: 0 0 7px;
	padding: 0 4px;
	font-family: "PT Sans", sans-serif;
	font-size: .85rem;
	line-height: 1.3;
	color: #222 !important;
	opacity: 1 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.br-grid.br-grid--cat ul.products li.product .wpbf-woo-product-category {
	display: block;
}

.br-grid ul.products li.product .woocommerce-loop-product__title {
	margin: 10px 0 5px !important;
	padding: 0 4px !important;
	font-family: Helvetica, Arial, sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	min-height: 2.4em !important; /* zweizeilige Titel bleiben bündig */
	color: var(--br-pg-text) !important;
}
.br-grid.br-grid--cat ul.products li.product .woocommerce-loop-product__title {
	margin-top: 0 !important;
}

.br-grid ul.products li.product .price {
	display: block;
	margin: 0 0 7px !important;
	padding: 0 4px;
	font-family: "PT Sans", sans-serif;
	font-size: .9rem !important;
	font-weight: 700;
	color: var(--br-pg-text) !important;
}
.br-grid ul.products li.product .price del { font-weight: 400; opacity: .6; }
.br-grid ul.products li.product .price ins { text-decoration: none; }

/* Germanized-Pflichtangaben unter dem Preis: klein und dezent */
.br-grid ul.products li.product .wc-gzd-additional-info,
.br-grid ul.products li.product .price-unit,
.br-grid ul.products li.product .delivery-time-info,
.br-grid ul.products li.product .tax-info,
.br-grid ul.products li.product .shipping-costs-info {
	display: block;
	margin: 0 !important;
	padding: 0 4px;
	font-size: 12px;
	line-height: 1.35;
	color: #7a756d;
}

.br-grid ul.products li.product .wpc-product-button {
	display: block;
	padding-top: 14px;
}
.br-grid ul.products li.product .button {
	align-self: center;
	margin: 0 auto !important;
	padding: 10px 16px !important;
	border: 0 !important;
	border-radius: 2px !important;
	background: var(--br-pg-accent) !important;
	color: #fff !important;
	font-family: "PT Sans", sans-serif;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}
.br-grid ul.products li.product .button:hover {
	filter: brightness(.92);
}

.br-grid.br-grid--nobutton ul.products li.product .button,
.br-grid.br-grid--nobutton ul.products li.product .wpc-product-button,
.br-grid.br-grid--nobutton ul.products li.product .added_to_cart {
	display: none !important;
}

.br-grid ul.products li.product {
	position: relative;
}
.br-grid ul.products li.product .onsale {
	position: absolute !important;
	top: 12px !important;
	left: 12px !important;
	right: auto !important;
	z-index: 2;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 5px 12px !important;
	border-radius: 999px !important;
	font-size: 13px !important;
	font-weight: 700;
	line-height: 1.2 !important;
}

/* Abstand über dem Button – auch bei normalen Produkten ("Details") ohne WPC-Wrapper */
.br-grid ul.products li.product .wpbf-woo-loop-summary > .button {
	margin-top: 14px !important;
}

/* Paginierung */
.br-grid nav.woocommerce-pagination {
	margin-top: 40px;
	text-align: center;
}
.br-grid nav.woocommerce-pagination ul {
	display: inline-flex !important;
	gap: 6px;
	border: 0 !important;
}
.br-grid nav.woocommerce-pagination ul li {
	border: 0 !important;
}
.br-grid nav.woocommerce-pagination ul li a,
.br-grid nav.woocommerce-pagination ul li span {
	min-width: 40px;
	padding: 10px !important;
	border: 1px solid #ddd !important;
	color: var(--br-pg-text);
}
.br-grid nav.woocommerce-pagination ul li span.current {
	background: var(--br-pg-text) !important;
	border-color: var(--br-pg-text) !important;
	color: #fff !important;
}

@media (max-width: 1024px) {
	.br-grid { --br-pg-cols: 2; }
	.br-grid.br-grid--cols-3 { --br-pg-cols: 3; }
}

@media (max-width: 767px) {
	.br-grid { --br-pg-cols: 1; --br-pg-gap-y: 30px; }
	.br-grid.br-grid--cols-3 { --br-pg-cols: 1; }
}