Blöcke: Produktliste, Mini-Warenkorb, Kundenkonto, Warenkorb und Kasse

Neue Blöcke mit block.json, gerendert über die Vorlagen des Shops; der Produktblock bleibt mit Namen und Attributen erhalten. Die Produktliste zeigt den Warenkorb-Knopf nur auf Wunsch und nicht für Produkte mit „Kauf nur über die Detailseite“, Varianten oder Pflichtangaben. Der Mini-Warenkorb lädt seinen Inhalt nach, die Seite bleibt cachebar.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

1 files changed, 16 insertions, 0 deletions

diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css
index 1dec306..a0403e7 100644
--- a/views/css/wpsg-theme.css
+++ b/views/css/wpsg-theme.css
@@ -573,6 +573,20 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max
 .wpsg_overview :where(.garan_label_popup .garan_label_popup_image img) { max-width:100%; height:auto; }
 .wpsg_overview :where(.garan_label_popup .garan_label_popup_confirm) { flex:0 0 auto; margin-top:1rem; cursor:pointer; }
 
+/* Blöcke: Produktliste, Mini-Warenkorb, Kundenkonto */
+.wpsg-block-product-list :where(.wpsg-product-list__items) { display:grid; grid-template-columns:repeat(var(--wpsg-columns, 3), minmax(0, 1fr)); gap:calc(var(--wpsg-gap) * 2) var(--wpsg-gap); list-style:none; margin:0; padding:0; }
+.wpsg-block-product-list :where(.wpsg-product-list__item) { display:flex; flex-direction:column; gap:0.5em; min-width:0; margin:0; padding:0; }
+.wpsg-block-product-list :where(.wpsg-product-list__image img) { display:block; width:100%; height:auto; }
+.wpsg-block-product-list :where(.wpsg-product-list__title) { margin:0; font-size:1em; line-height:1.3; overflow-wrap:anywhere; hyphens:auto; }
+.wpsg-block-product-list :where(.wpsg-product-list__price) { font-size:1.2em; }
+.wpsg-block-product-list :where(.wpsg-product-list__taxnote, .wpsg-product-list__baseprice) { font-size:var(--wpsg-font-size-small); opacity:var(--wpsg-muted-opacity); }
+.wpsg-block-product-list :where(.wpsg-product-list__action) { margin-top:auto; padding-top:0.5em; }
+.wpsg-block-product-list :where(.wpsg-product-list__action form) { margin:0; }
+.wpsg-block-product-list :where(.wpsg-product-list__action .wpsg_button) { display:block; width:100%; margin:0; text-align:center; box-sizing:border-box; }
+.wpsg-block-mini-cart :where(.wpsg-mini-cart__link), .wpsg-block-customer-account :where(.wpsg-customer-account__link) { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:0.5em; text-decoration:none; }
+.wpsg-block-mini-cart :where(.wpsg-mini-cart__content) { display:inline-flex; gap:0.5em; }
+.wpsg-block-mini-cart :where(.wpsg-mini-cart__sum) { font-weight:bold; }
+
 /*
  * Aufbau mit Klassen-Spezifität: Ausblenden, Ein- und Überblendungen. Allgemeine Regeln der Themes wie
  * form input[type=radio] { display:inline-block } dürfen versteckte Bausteine nicht einblenden.
@@ -597,6 +611,8 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max
 /* Schmale Breiten */
 @media (max-width:600px) {
 
+	.wpsg-block-product-list :where(.wpsg-product-list__items) { grid-template-columns:repeat(min(var(--wpsg-columns, 3), 2), minmax(0, 1fr)); }
+
 	.wpsg_mod_productindex_grid :where(.wpsg_mod_productindex_product) { width:50%; }
 	.wpsg_mod_productindex_list :where(.wpsg_mod_productindex_product .wpsg_mod_productindex_content) { margin-left:0; clear:both; }
 	.wpsg_mod_productindex :where(.wpsg_mod_productindex_order), .wpsg_mod_productindex :where(.wpsg_mod_productindex_pager), .wpsg_mod_productindex :where(.wpsg_mod_productindex_viewselect) { float:none; margin:0.25em 0; }