/* Am haengt die Klasse nur im Frontend; in der Leinwand des Site-Editors erkennt man die Vorlage stattdessen an der Layout-Klasse darin -- sonst staende das Design dort auf Weiss. */ body.single-product, .editor-styles-wrapper:has(.c-product-layout) { background : var(--color-bg); color : var(--color-text); font-family : var(--font-body); } .single-product :focus-visible { outline : 2px solid var(--color-accent); outline-offset : 2px; } /* ── Seitenlayout ──────────────────────────────────────────────────────── Dieselbe Breite und derselbe Rand wie .c-shop-layout, damit die Kante zur Karte des Seitenkopfs stimmt. Die Abschnitte -- Brotkrumen, Kopfbereich, Reiter, aehnliche Produkte -- stehen im Mockup mit --space-8 auseinander. */ .c-product-layout { box-sizing : border-box; display : flex; flex-direction : column; gap : var(--space-8); max-width : var(--page-width); margin-inline : auto; padding : 0 var(--space-4) var(--space-6); } /* Die Meldungen von WooCommerce (in den Warenkorb gelegt, Fehler) stehen ueber dem Produkt. Solange keine anliegt, ist der Block zwar da, aber leer -- und wuerde als eigener Abschnitt trotzdem den Abstand oben aufreissen. :has prueft das lebendig mit, die Meldung kommt nach dem Absenden des Formulars mit der neu geladenen Seite. */ .c-product-layout > .wc-block-store-notices:has(> .woocommerce-notices-wrapper:empty) { display : none; } /* ── Brotkrumen ──────────────────────────────────────────────────────── */ .c-product-layout .wc-block-breadcrumbs { margin : 0; font-size : 13px; color : var(--color-neutral-600); } .c-product-layout .wc-block-breadcrumbs a { color : var(--color-accent); text-decoration : none; } .c-product-layout .wc-block-breadcrumbs a:hover { color : var(--color-accent-600); text-decoration : underline; } /* ── Kopfbereich: Bild und Angaben ───────────────────────────────────── */ /* Der Spalten-Block von Core schreibt sein gap inline in die Seite, deshalb zwei Klassen im Selektor. align-items:start haelt die Angaben oben, statt sie ueber die Hoehe des Bildes zu ziehen. */ .c-product-layout .wp-block-columns.c-product-hero { gap : var(--space-8); align-items : flex-start; margin : 0; } /* Das Foto liegt im Mockup in einer abgerundeten, warmen Flaeche. Die Galerie von WooCommerce bringt dafuer mehrere Huellen mit; die aeusserste bekommt die Form, die inneren geben ihre Groesse durch. */ .c-product-media .wp-block-woocommerce-product-image-gallery { margin : 0; } .c-product-media .woocommerce-product-gallery { position : relative; width : 100% !important; /* WooCommerce setzt hier eine Breite inline */ border-radius : var(--radius-lg); background : var(--color-neutral-200); overflow : hidden; } .c-product-media .woocommerce-product-gallery__wrapper { margin : 0; } .c-product-media .woocommerce-product-gallery__image { margin : 0; } /* Quadratisch wie im Mockup. contain und nicht cover: die Packungsfotos stehen frei, ein Anschnitt wuerde ihnen den Kopf abschneiden. */ .c-product-media .woocommerce-product-gallery__image img { display : block; width : 100%; aspect-ratio: 1; object-fit : contain; /* .washed aus dem Design-System -- wie im Produktraster. */ filter : saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94); } /* Die Lupe oeffnet die Grossansicht. Als runder Symbolknopf wie im Seitenkopf, damit sie nicht als schwarzes Zeichen auf dem Foto liegt. */ .c-product-media .woocommerce-product-gallery__trigger { position : absolute; z-index : 2; top : var(--space-3); right : var(--space-3); display : inline-flex; align-items : center; justify-content : center; width : 36px; height : 36px; margin : 0; border-radius : 999px; background : var(--color-surface); box-shadow : var(--shadow-sm); color : var(--color-accent); text-decoration : none; } .c-product-media .woocommerce-product-gallery__trigger:hover { background : var(--color-neutral-100); } /* Das Angebots-Etikett. Im Produktraster der Shop-Seite zeichnet es der Block woocommerce/product-sale-badge -- ein kleines rotes Schild mit Versalien. Die Produktseite bekommt es dagegen vom klassischen Sale-Flash, das ab Werk ein grosser gelber Kreis ist. Hier steht darum das Aussehen des Blocks nachgebaut, damit beide Seiten dasselbe Etikett zeigen. Das Rot kommt nicht aus dem Design-System, sondern steht auf der Shop-Seite als Blockeinstellung in der Vorlage -- deshalb hier derselbe feste Wert. Es sitzt links oben statt rechts oben wie im Raster: rechts oben liegt auf der Produktseite bereits die Lupe. Der Abstand ist derselbe wie ihrer, so stehen beide auf gleicher Hoehe in ihrer Ecke. Der Selektor traegt .woocommerce und span mit, weil das Blockstylesheet von WooCommerce den Kreis mit `.woocommerce .wp-block-woocommerce-product-image-gallery span.onsale` an den linken Rand haengt -- ohne die beiden bliebe das Etikett dort halb neben der Flaeche stehen. */ .woocommerce .c-product-media .wp-block-woocommerce-product-image-gallery > span.onsale { position : absolute; z-index : 2; top : var(--space-3); left : var(--space-3); right : auto; bottom : auto; box-sizing : border-box; width : fit-content; min-width : 0; min-height : 0; margin : 0; padding : 0.25em 0.75em; border-radius : 4px; background : #ff0404; color : #fff; font-size : 12.25px; /* wie im Raster: 0.875em auf 14px Grundschrift */ font-weight : 600; line-height : 1.4; text-align : center; text-transform : uppercase; } /* Die rechte Spalte. Der gemeinsame Abstand steht hier einmal; einzelne Bausteine ruecken ihn unten zurecht. */ .c-product-summary.wp-block-column { display : flex; flex-direction : column; gap : var(--space-3); padding-top : var(--space-2); } /* Core gibt jedem Kind einer Spalte `margin-block: 1.2rem 0` mit -- zusammen mit dem gap oben stuende ueberall der doppelte Abstand. */ .c-product-summary.wp-block-column > * { margin-block : 0; } /* ── Kategorie und Marke als Etiketten ───────────────────────────────── */ .c-product-badges { gap : 6px; } .c-product-badges .wp-block-post-terms { width : fit-content; margin : 0; padding : 3px 10px; border-radius : 999px; font-size : 11px; letter-spacing: 0.02em; line-height : 1.5; } .c-product-badges .wp-block-post-terms a { color : inherit; text-decoration : none; } .c-product-badges .taxonomy-product_cat { background : var(--color-accent-100); color : var(--color-accent-800); } .c-product-badges .taxonomy-product_brand { background : var(--color-accent-2-100); color : var(--color-accent-2-800); } /* ── Name, Preis, Verfuegbarkeit ─────────────────────────────────────── */ .c-product-summary .wp-block-post-title { font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 30px; line-height : 1.15; color : var(--color-text); } .c-product-summary .wp-block-woocommerce-product-price { font-size : 26px; font-weight : 700; color : var(--color-accent-700); } /* Der Preis je Stueck unter dem Preis (src/functions/pieces.php). Er tritt bewusst zurueck -- deutlich kleiner, ohne Fettung und in einem gedeckten Braun --, damit der Packungspreis darueber der Betrag bleibt, den das Auge zuerst findet. */ .c-product-summary .c-unit-price { margin : 4px 0 0; font-size : 14px; font-weight : 400; line-height : 1.3; color : var(--color-neutral-600); } /* Die Kurzbeschreibung steht im Mockup nicht -- der Block bleibt trotzdem in der Vorlage, damit ein spaeter gepflegter Text hier erscheint. Solange keiner da ist, nimmt ihn src/pages/product/main.php ganz aus der Seite. */ .c-product-summary .wp-block-post-excerpt__excerpt { margin : 0; font-size : 15px; color : var(--color-neutral-700); } /* ── In den Warenkorb ────────────────────────────────────────────────── */ .c-product-summary .wp-block-add-to-cart-form { margin : 0; } /* Der Lagerhinweis mit dem Punkt davor, wie im Mockup. */ .c-product-summary .wp-block-add-to-cart-form .stock { display : flex; align-items : center; gap : 8px; margin : 0; font-size : 14px; color : var(--color-accent-2-700); } .c-product-summary .wp-block-add-to-cart-form .stock::before { content : ""; width : 8px; height : 8px; flex : none; border-radius : 999px; background : var(--color-accent-2); } .c-product-summary .wp-block-add-to-cart-form .stock.out-of-stock { color : var(--color-neutral-600); } .c-product-summary .wp-block-add-to-cart-form .stock.out-of-stock::before { background : var(--color-neutral-400); } /* Die Trennlinie des Mockups zwischen Verfuegbarkeit und Bestellzeile. Sie haengt am Formular, damit sie auch dann sitzt, wenn kein Lagerhinweis ausgegeben wird. column-gap statt gap: Apple Pay und Google Pay von Stripe stehen als eigene Zeilen im Formular und sind meist ausgeblendet -- mit einem row-gap risse jede von ihnen trotzdem eine Luecke auf. Ihren Abstand bringen sie darum selbst mit, weiter unten. Die lange Kette ist noetig, weil woocommerce.css dem Formular ueber `.woocommerce div.product form.cart` 2em Abstand nach unten gibt. */ .single-product .c-product-summary .wp-block-add-to-cart-form form.cart { display : flex; flex-wrap : wrap; align-items : center; column-gap : var(--space-3); row-gap : 0; margin : var(--space-2) 0 0; padding-block-start: var(--space-4); border-block-start : 1px solid var(--color-divider); } /* Der Mengensteller: dieselbe Pille wie im Warenkorb-Panel. Die Knoepfe kommen vom Block selbst -- die Vorlage stellt ihn auf "stepper". */ .c-product-summary .quantity.wc-block-components-quantity-selector { display : flex; align-items : center; width : auto; border : 1.5px solid var(--color-divider); border-radius : 999px; background : transparent; } .c-product-summary .wc-block-components-quantity-selector::after { content : none; /* WooCommerce zeichnet den Rahmen sonst ein zweites Mal */ } /* Feste Hoehe statt Polster: das Zahlenfeld bringt aus dem Theme reichlich davon mit und machte die Pille dadurch hoeher als den Knopf daneben. */ .single-product .c-product-summary .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { box-sizing : border-box; width : 44px; min-width : 0; height : 34px; padding : 0; border : none; background : transparent; color : var(--color-text); font-size : 14px; text-align : center; } /* Die eigenen Pfeilchen des Zahlenfeldes wuerden neben den Knoepfen ein zweites Mal dasselbe anbieten. */ .c-product-summary .wc-block-components-quantity-selector__input::-webkit-outer-spin-button, .c-product-summary .wc-block-components-quantity-selector__input::-webkit-inner-spin-button { margin : 0; -webkit-appearance : none; appearance : none; } .c-product-summary .wc-block-components-quantity-selector__input { -moz-appearance : textfield; appearance : textfield; } .c-product-summary .wc-block-components-quantity-selector__button { display : inline-flex; align-items : center; justify-content : center; width : 34px; height : 34px; padding : 0; border : none; border-radius : 999px; background : transparent; color : var(--color-accent); font-size : 16px; line-height : 1; cursor : pointer; } .c-product-summary .wc-block-components-quantity-selector__button:hover { background : color-mix(in srgb, var(--color-accent) 10%, transparent); } /* .btn.btn-primary aus dem Design-System. Das Theme faerbt den Knopf ueber wp-element-button ein, deshalb steht hier die Klasse des Blocks davor. */ .c-product-summary .single_add_to_cart_button.button { padding : var(--space-2) calc(var(--space-3) * 1.4); border : 1px solid transparent; border-radius : 999px; background : var(--color-accent); color : var(--color-bg); font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 14px; line-height : 1.2; cursor : pointer; } .c-product-summary .single_add_to_cart_button.button:hover { background : var(--color-accent-600); } /* Apple Pay und Google Pay von Stripe stehen im Formular und wuerden neben dem Knopf in derselben Zeile landen. Eigene Zeile darunter -- und der Abstand dorthin haengt an den Knoepfen selbst, die Stripe ausblendet, solange der Browser die Zahlungsart nicht anbietet. */ .c-product-summary form.cart .wc-stripe-product-checkout-container, .c-product-summary form.cart .wc-stripe-clear { flex : 1 0 100%; margin : 0; } .c-product-summary form.cart .wc_stripe_product_payment_methods { margin : 0; padding : 0; } .c-product-summary form.cart .wc_stripe_product_payment_methods li { margin-block-start : var(--space-3); } /* ── SKU, Kategorie, Marke ───────────────────────────────────────────── */ .c-product-summary .wp-block-woocommerce-product-meta { margin-block-start : var(--space-3); } .c-product-meta { gap : 4px; font-size : 13px; color : var(--color-neutral-600); } .c-product-meta .wp-block-post-terms, .c-product-meta .wc-block-components-product-sku { margin : 0; } .c-product-meta a { color : var(--color-accent); text-decoration : none; } .c-product-meta a:hover { color : var(--color-accent-600); text-decoration : underline; } /* ── Reiter: Informationen und Rezensionen ───────────────────────────── */ .c-product-details { margin : 0; } .c-product-details .woocommerce-tabs { margin : 0; } /* Die Ketten in diesem Abschnitt sind so lang, weil an den Reitern drei fremde Stylesheets ziehen: woocommerce.css zeichnet um jeden eine Sprechblase mit Rand, Rundung und Schatten; product-details.css macht im Stil "minimal" daraus einen Strich in Textfarbe und stellt die Liste auf schmalen Fenstern hochkant, mit dem Strich links; das Theme legt seine Schrift darueber. Deren laengste Kette hat vier Klassen -- eine kuerzere kommt hier an nichts heran. */ .single-product .c-product-details.is-style-minimal ul.tabs.wc-tabs { display : flex; flex-wrap : wrap; gap : var(--space-6); margin : 0; padding : 0; border-bottom : 1px solid var(--color-divider); list-style : none; } /* Das Mockup markiert den offenen Reiter allein mit einem Strich darunter -- in Akzentfarbe, nicht in der Textfarbe des "minimal"-Stils. */ .single-product .c-product-details.is-style-minimal ul.tabs.wc-tabs li { display : inline-block; margin : 0; padding : 0; border-width : 0 0 2px; border-style : solid; border-color : transparent; border-radius : 0; background : transparent; box-shadow : none; opacity : 1; } .single-product .c-product-details.is-style-minimal ul.tabs.wc-tabs li::before, .single-product .c-product-details.is-style-minimal ul.tabs.wc-tabs li::after { content : none; } .single-product .c-product-details.is-style-minimal ul.tabs.wc-tabs li.active { border-bottom-color : var(--color-accent); } .single-product .c-product-details.is-style-minimal ul.tabs.wc-tabs li a { display : block; padding : 10px 0; border : none; color : var(--color-neutral-600); font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 14px; text-decoration : none; } .single-product .c-product-details.is-style-minimal ul.tabs.wc-tabs li a:hover, .single-product .c-product-details.is-style-minimal ul.tabs.wc-tabs li.active a { color : var(--color-text); } .single-product .c-product-details .woocommerce-tabs .panel.woocommerce-Tabs-panel { margin : 0; padding : var(--space-4) 0 0; } /* Der Reiter darueber sagt schon, was folgt. */ .c-product-details .woocommerce-Tabs-panel > h2:first-child { display : none; } /* Die Merkmalstabelle wird zur schlichten Liste aus Bezeichnung und Wert. width:auto statt der 100% von WooCommerce, sonst stuende der Wert am rechten Rand statt neben seiner Bezeichnung. */ .single-product .c-product-details table.shop_attributes { width : auto; margin : 0; border : none; border-collapse : collapse; font-size : 14px; } /* woocommerce.css zeichnet in `table.shop_attributes` gepunktete Linien und setzt die Werte kursiv -- das Mockup laesst beides weg. Und woocommerce-smallscreen.css stellt unter 768px Bezeichnung und Wert untereinander; bei einer einzigen kurzen Angabe wie "Gewicht 1 kg" ist das auch auf dem Telefon nicht noetig. */ .single-product .c-product-details table.shop_attributes tr { display : table-row; border : none; } .single-product .c-product-details table.shop_attributes th, .single-product .c-product-details table.shop_attributes td { display : table-cell; width : auto; max-width : none; padding : 4px var(--space-3) 4px 0; border : none; background : transparent; text-align : left; font-style : normal; } .single-product .c-product-details table.shop_attributes th { min-width : 100px; color : var(--color-neutral-600); font-weight : 400; } .c-product-details .woocommerce-product-attributes td p { margin : 0; } .c-product-details .woocommerce-Reviews-title { margin : 0 0 var(--space-2); font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 16px; color : var(--color-text); } .c-product-details .woocommerce-noreviews { margin : 0; font-size : 14px; color : var(--color-neutral-600); } .c-product-details .comment-reply-title { display : block; margin-block: var(--space-4) var(--space-3); font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 16px; } /* Beschriftung ueber das Feld statt daneben: das Theme laesst Beschriftung und Feld sonst in derselben Zeile stehen und stellt die Beschriftung so gross wie eine Ueberschrift. */ .c-product-details .comment-form label { display : block; margin-bottom: 4px; font-family : var(--font-body); font-size : 14px; font-weight : 400; color : var(--color-neutral-700); } .c-product-details .comment-form > p, .c-product-details .comment-form .comment-form-rating { margin : 0 0 var(--space-3); } .c-product-details .comment-form p.stars { margin : 0; font-size : 15px; } .c-product-details .comment-form input[type="text"], .c-product-details .comment-form input[type="email"], .c-product-details .comment-form textarea, .c-product-details .comment-form select { box-sizing : border-box; width : 100%; max-width : 520px; padding : var(--space-2) var(--space-3); border : 1.5px solid var(--color-divider); border-radius : var(--radius-sm); background : var(--color-surface); color : var(--color-text); font-family : var(--font-body); font-size : 14px; } .c-product-details .comment-form .submit { padding : var(--space-2) calc(var(--space-3) * 1.4); border : 1px solid transparent; border-radius : 999px; background : var(--color-accent); color : var(--color-bg); font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 14px; cursor : pointer; } .c-product-details .comment-form .submit:hover { background : var(--color-accent-600); } /* ── Aehnliche Produkte ──────────────────────────────────────────────── */ .c-product-related { display : flex; flex-direction : column; gap : var(--space-4); margin : 0; } /* Der Produktsammlung-Block schreibt seiner Ueberschrift die kleine Schriftgroesse des Themes vor -- dagegen braucht es die dritte Klasse. */ .c-product-layout .c-product-related > h2.wp-block-heading { margin : 0; font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 22px; line-height : 1.2; color : var(--color-text); } /* Meldungen des Blocks (etwa "in den Warenkorb gelegt") stehen leer im Raster und wuerden sonst eine Zeile Abstand kosten. */ .c-product-related > .wc-block-components-notices:empty { display : none; } /* 200px wie im Mockup. auto-fill statt der festen fuenf Spalten des Blocks: so bleibt die Kartenbreite in jedem Fenster gleich. */ .c-product-related ul.wc-block-product-template { display : grid; grid-template-columns : repeat(auto-fill, minmax(200px, 1fr)); gap : var(--space-4); margin : 0; padding : 0; list-style : none; } /* Die Karte des Mockups: Foto, Name, Preis, Knopf -- untereinander und der Knopf unten buendig, auch wenn die Namen unterschiedlich lang sind. */ .c-product-related li.wc-block-product { display : flex; flex-direction : column; gap : var(--space-2); margin : 0; padding : var(--space-3); border-radius : var(--radius-md); background : var(--color-surface); box-shadow : var(--shadow-sm); transition : box-shadow 0.2s ease, transform 0.2s ease; } .c-product-related li.wc-block-product:hover { box-shadow : var(--shadow-md); transform : translateY(-2px); } .c-product-related li.wc-block-product .wp-block-woocommerce-product-image { width : 100%; margin : 0; aspect-ratio : 1; overflow : hidden; border-radius : var(--radius-sm); background : var(--color-neutral-200); } .c-product-related li.wc-block-product .wp-block-woocommerce-product-image a, .c-product-related li.wc-block-product .wp-block-woocommerce-product-image img { display : block; width : 100%; height : 100%; } .c-product-related li.wc-block-product .wp-block-woocommerce-product-image img { object-fit : cover; filter : saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94); } .c-product-related li.wc-block-product .wp-block-post-title { margin : 0; font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 15px; line-height : 1.2; } .c-product-related li.wc-block-product .wp-block-post-title a { color : var(--color-text); text-decoration : none; } .c-product-related li.wc-block-product .wp-block-post-title a:hover { color : var(--color-accent-700); } /* margin-top:auto haelt Preis und Knopf am Fuss der Karte -- so stehen sie in einer Reihe unterschiedlich hoher Karten trotzdem auf einer Linie. */ .c-product-related li.wc-block-product .wp-block-woocommerce-product-price { margin : auto 0 0; font-weight : 600; color : var(--color-accent-700); } /* Wie in der Zusammenfassung oben, nur im Massstab der kleinen Karte. */ .c-product-related li.wc-block-product .c-unit-price { margin : 2px 0 0; font-size : 12px; font-weight : 400; line-height : 1.3; color : var(--color-neutral-600); } .c-product-related li.wc-block-product .wc-block-components-product-button { margin : 0; } /* .btn.btn-secondary aus dem Design-System. */ .c-product-related li.wc-block-product .wc-block-components-product-button__button { display : block; width : 100%; padding : var(--space-2) var(--space-3); border : 1px solid var(--color-divider); border-radius : 999px; background : transparent; color : var(--color-text); font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 13px; line-height : 1.2; text-align : center; text-decoration : none; } .c-product-related li.wc-block-product .wc-block-components-product-button__button:hover { background : color-mix(in srgb, var(--color-text) 7%, transparent); } /* Der Verweis "zum Warenkorb", den WooCommerce nach dem Hinzufuegen einblendet. */ .c-product-related li.wc-block-product .added_to_cart { display : block; margin-top: var(--space-1); color : var(--color-accent); font-size : 12px; text-align: center; } /* ── Schmale Fenster ─────────────────────────────────────────────────── */ /* Ab hier stapelt der Spalten-Block von Core selbst. Die Angaben ruecken dann direkt unter das Foto, der Innenabstand oben faellt weg. */ @media (max-width: 781px) { .c-product-layout { gap : var(--space-6); padding : 0 var(--space-3) var(--space-4); } .c-product-layout .wp-block-columns.c-product-hero { gap : var(--space-4); } .c-product-summary.wp-block-column { padding-top : 0; } .c-product-summary .wp-block-post-title { font-size : 24px; } .c-product-summary .wp-block-woocommerce-product-price { font-size : 22px; } .c-product-summary .c-unit-price { font-size : 13px; } } @media (max-width: 600px) { .c-product-related ul.wc-block-product-template { grid-template-columns : 1fr 1fr; gap : var(--space-3); } .c-product-related li.wc-block-product { padding : var(--space-2); gap : var(--space-1); } .c-product-related li.wc-block-product .wp-block-post-title { font-size : 13px; } } @media (prefers-reduced-motion: reduce) { .c-product-related li.wc-block-product { transition : none; } }