/* * Der Bestellweg im Organic-Design (wp/mockup, Ansichten "Warenkorb" und * "Checkout"): Warenkorb, Kasse und Bestellbestaetigung. * * Die drei Seiten stehen in einer Datei, weil die ersten beiden aus derselben * Bausteinsammlung von WooCommerce gebaut sind -- Summenzeilen, Gutscheinfeld, * Mengensteller, Formularfelder und Knoepfe tragen dort dieselben Klassen. Auf * drei Dateien verteilt stuende jede dieser Regeln zweimal da. Die * Bestellbestaetigung schliesst den Weg ab und bringt eigene Klassen mit; sie * bekommt weiter unten einen eigenen Abschnitt. * * Die Klassen c-cart-layout, c-checkout-layout und c-order-layout kommen aus * den Vorlagen page-cart, page-checkout und order-confirmation im Site-Editor, * alles andere sind Klassen von Core- und WooCommerce-Bloecken. Tokens: * src/pages/design/design.css. * * Alles ist unter die drei Layout-Klassen gehaengt. Das ist nicht nur Ordnung: * das Warenkorb-Panel im Seitenkopf benutzt dieselben Bausteine und hat sein * eigenes Kleid in src/pages/mini-cart/mini-cart.css -- ohne die Klammer * faerbten die Regeln hier dort hinein. * * Ein Umschaltpunkt bei 900px: darunter rutscht die Seitenspalte mit der * Summe unter den Inhalt. */ /* Die Flaeche der Seite. Am haengen die Klassen 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.woocommerce-cart, body.woocommerce-checkout, .editor-styles-wrapper:has(.c-cart-layout), .editor-styles-wrapper:has(.c-checkout-layout), .editor-styles-wrapper:has(.c-order-layout) { background : var(--color-bg); color : var(--color-text); font-family : var(--font-body); } .woocommerce-cart :focus-visible, .woocommerce-checkout :focus-visible { outline : 2px solid var(--color-accent); outline-offset : 2px; } /* ── Seitenlayout ──────────────────────────────────────────────────────── Breite und Rand wie bei .c-shop-layout, damit die Kante zur Karte des Seitenkopfs stimmt. */ .c-cart-layout, .c-checkout-layout, .c-order-layout { box-sizing : border-box; display : flex; flex-direction : column; gap : var(--space-6); max-width : var(--page-width); margin-inline : auto; padding : 0 var(--space-4) var(--space-6); } /* Der leere Meldungsblock wuerde sonst als eigener Abschnitt den Abstand oben aufreissen -- wie auf der Produktseite. */ .c-cart-layout > .wc-block-store-notices:has(> .woocommerce-notices-wrapper:empty), .c-checkout-layout > .wc-block-store-notices:has(> .woocommerce-notices-wrapper:empty) { display : none; } /* Meldungen im Warenkorb: WooCommerce schiebt die Meldungsleiste per margin: 33px 0 0 und das Banner darin per margin: 16px 0 0 nach unten. */ .c-cart-layout .wc-block-components-notices, .c-cart-layout .wc-block-store-notice, .c-cart-layout .wc-block-store-notices, .c-cart-layout .wc-block-components-notices .wc-block-components-notice-banner { margin-top : 0; } .c-cart-layout .wc-block-components-notices:empty, .c-checkout-layout .wc-block-components-notices:empty { display : none; } /* Meldungen an der Kasse: - Sitzen ganz oben im entry-content (padding-top von checkout und margin-top der Meldung auf 0). - Falls eine Meldung vorhanden ist, bleibt sie beim Scrollen sticky unter dem Header. - Ist der Meldungsblock leer, nimmt er keinen Raum ein. */ .c-checkout-layout .wp-block-woocommerce-checkout:has(.wc-block-components-notices:not(:empty)) { padding-top : 0; } .c-checkout-layout .wc-block-components-notices { position : sticky; top : calc(var(--site-header-offset, 0px) + 19px); margin : 0 0 var(--space-6) 0; z-index : 90; } .c-checkout-layout .wc-block-components-notices .wc-block-components-notice-banner { margin-top : 0; } /* Verhindert, dass Browser oder Skripte (z. B. WooCommerce scrollToTop) den Hauptbereich oder Formularfelder unter die fixierte Leiste schieben. */ html:has(.c-checkout-layout .wc-block-components-notices:not(:empty)) { scroll-padding-top : calc(var(--site-header-offset, 0px) + var(--checkout-notice-offset, 0px) + var(--space-4)); } .c-checkout-layout .with-scroll-to-top__scroll-point { top : 0; scroll-margin-top : calc(var(--site-header-offset, 0px) + var(--checkout-notice-offset, 0px) + var(--space-4)); } .c-checkout-layout .wc-block-components-main { scroll-margin-top : calc(var(--site-header-offset, 0px) + var(--checkout-notice-offset, 0px) + var(--space-4)); } .c-cart-layout > .wp-block-post-title { margin : 0; font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 32px; line-height : 1.15; color : var(--color-text); } .c-cart-layout > .wp-block-post-content, .c-checkout-layout > .wp-block-post-content { margin : 0; } /* ══ Warenkorb und Kasse ═══════════════════════════════════════════════ */ /* ── Zwei Spalten ─────────────────────────────────────────────────────── WooCommerce baut die Zeile selbst als Flex und legt den Zwischenraum als Innenabstand der beiden Spalten an. Hier traegt ihn das gap, damit die Karte rechts an ihrer eigenen Kante beginnt. */ .c-cart-layout .wc-block-components-sidebar-layout, .c-checkout-layout .wc-block-components-sidebar-layout { align-items : flex-start; gap : var(--space-8); /* WooCommerce haengt 66px unter die Zeile; den Abstand zur Fusszeile setzt hier das Seitenlayout. */ margin : 0; } /* Im Site-Editor schiebt WordPress eine Huelle zwischen die Zeile und ihre beiden Spalten; WooCommerce stellt die Zeile dort deshalb auf Block und macht die Huelle zum Flex-Behaelter. Ohne dieselben Werte dort legte sich die Karte mit der Summe in der Leinwand ueber die Artikelliste. */ .c-cart-layout .wc-block-components-sidebar-layout > .block-editor-inner-blocks > .block-editor-block-list__layout, .c-checkout-layout .wc-block-components-sidebar-layout > .block-editor-inner-blocks > .block-editor-block-list__layout { align-items : flex-start; gap : var(--space-8); margin : 0; } /* flex-basis 0 und nicht auto: die Artikeltabelle ist von Haus aus breiter als die Spalte, und aus ihrer eigenen Breite heraus draengte sie die Karte daneben aus der Zeile. */ .c-cart-layout .wc-block-components-main, .c-checkout-layout .wc-block-components-main { flex : 1 1 0; min-width : 0; padding : 0; } .c-cart-layout .wc-block-components-sidebar, .c-checkout-layout .wc-block-components-sidebar { box-sizing : border-box; flex : 0 0 340px; max-width : 340px; padding : var(--space-4); border-radius : calc(var(--radius-lg) * 1.15); background : var(--color-surface); box-shadow : var(--shadow-sm); } /* Die Kasse gibt der Uebersicht im Mockup etwas mehr Platz. */ .c-checkout-layout .wc-block-components-sidebar { flex : 0 0 380px; max-width : 380px; } /* Die Uebersicht laeuft beim Blaettern mit: - Ohne Meldung: unter dem Seitenkopf (mit var(--space-4) Abstand). - Mit Meldung: unter der Meldung (mit var(--space-4) Abstand), genau wie sonst unter dem Header. */ .c-checkout-layout .wc-block-components-sidebar.is-sticky { position : sticky; top : calc(var(--site-header-offset, 0px) + var(--checkout-notice-offset, 0px) + var(--space-4)); } /* ── Summenzeilen ──────────────────────────────────────────────────────── */ .c-cart-layout .wc-block-cart__totals-title { margin : 0 0 var(--space-3); padding : 0; font-family : var(--font-body); font-weight : 400; font-size : 11px; letter-spacing: 0.08em; text-transform: uppercase; color : var(--color-neutral-600); } /* WooCommerce trennt die Gruppen selbst mit einer Linie und laesst sie am ersten Kind eines Behaelters weg -- hier bekommt sie nur die Farbe des Designs und den Abstand des Mockups. */ .c-cart-layout .wc-block-components-totals-wrapper, .c-checkout-layout .wc-block-components-totals-wrapper { padding-block : var(--space-3); border-top-color : var(--color-divider); } /* Die Gruppe der Summenzeilen ist selbst keine solche Huelle, und ihr erstes Kind laesst die eigene Linie weg -- zwischen Gutschein und Versand fehlte deshalb die Trennung des Mockups. */ .c-cart-layout .wp-block-woocommerce-cart-order-summary-totals-block, .c-checkout-layout .wp-block-woocommerce-checkout-order-summary-totals-block { border-top : 1px solid var(--color-divider); } /* Gebuehren und Rabatte stehen als leere Huelle in der Seite, solange es keine gibt -- mit dem Polster oben und unten rissen sie mitten in der Uebersicht eine Luecke auf. WooCommerce faengt nur den Fall ab, dass ein einzelnes leeres Kind darin steht, nicht den ganz ohne Inhalt. */ .c-cart-layout .wc-block-components-totals-wrapper:empty, .c-checkout-layout .wc-block-components-totals-wrapper:empty { display : none; } /* Die Uebersicht bringt einen eigenen Rahmen mit -- in der Karte der Seitenspalte waere das ein Rahmen im Rahmen. */ .c-checkout-layout .wp-block-woocommerce-checkout-order-summary-block { border : none; border-radius : 0; } .c-cart-layout .wc-block-components-totals-item, .c-checkout-layout .wc-block-components-totals-item { font-size : 14px; } .c-cart-layout .wc-block-components-totals-item__label, .c-checkout-layout .wc-block-components-totals-item__label { font-weight : 400; } /* Der Versand ist im Mockup gruen und halbfett -- das einzige Feld, das hervorgehoben wird. */ .c-cart-layout .wc-block-components-totals-shipping .wc-block-components-totals-item__value, .c-checkout-layout .wc-block-components-totals-shipping .wc-block-components-totals-item__value { color : var(--color-accent-2-700); font-weight : 600; } .c-cart-layout .wc-block-components-totals-footer-item, .c-checkout-layout .wc-block-components-totals-footer-item { font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 18px; } /* "Veranschlagte Gesamtsumme" ist in der 340px-Karte breiter als die halbe Zeile. Die Zeile darf umbrechen (der Steuerhinweis gehoert darunter), und mit `flex-basis: auto` misst der Browser die Beschriftung an ihrem ganzen Text -- der Betrag passte daneben nicht mehr und rutschte auf eine eigene Zeile. Aus der Null heraus wachsen beide erst, wenn sie nebeneinander stehen, und die Beschriftung bricht selbst um. */ .c-cart-layout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, .c-checkout-layout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { flex : 1 1 0; min-width : 0; } .c-cart-layout .wc-block-components-totals-footer-item-tax, .c-checkout-layout .wc-block-components-totals-footer-item-tax { margin : 4px 0 0; font-family : var(--font-body); font-weight : 400; font-size : 12px; color : var(--color-neutral-600); } /* ── Gutscheinfeld ────────────────────────────────────────────────────── Der aufklappbare Streifen "Gutscheine hinzufuegen" mit dem Winkel rechts. */ .c-cart-layout .wc-block-components-panel__button, .c-checkout-layout .wc-block-components-panel__button { padding : 0; font-family : var(--font-body); font-size : 14px; font-weight : 400; color : var(--color-text); } .c-cart-layout .wc-block-components-panel__button-icon, .c-checkout-layout .wc-block-components-panel__button-icon { fill : var(--color-text); } .c-cart-layout .wc-block-components-totals-coupon__form, .c-checkout-layout .wc-block-components-totals-coupon__form { gap : var(--space-2); margin-top : var(--space-3); } /* ── Eingabefelder ───────────────────────────────────────────────────── Die Pille des Design-Systems (.input): warme Flaeche, feiner Rand, rund. */ .c-cart-layout .wc-block-components-text-input input[type="text"], .c-cart-layout .wc-block-components-text-input input[type="email"], .c-cart-layout .wc-block-components-text-input input[type="tel"], .c-checkout-layout .wc-block-components-text-input input[type="text"], .c-checkout-layout .wc-block-components-text-input input[type="email"], .c-checkout-layout .wc-block-components-text-input input[type="tel"], .c-checkout-layout .wc-blocks-components-select__select, .c-checkout-layout .wc-block-components-textarea, .c-checkout-layout textarea { box-sizing : border-box; border : 1px solid var(--color-divider); border-radius : var(--radius-md); background : var(--color-surface); color : var(--color-text); font-family : var(--font-body); font-size : 14px; } .c-cart-layout input::placeholder, .c-checkout-layout input::placeholder, .c-checkout-layout .wc-block-components-textarea::placeholder, .c-checkout-layout textarea::placeholder { color : color-mix(in srgb, var(--color-text) 50%, transparent); opacity : 1; } /* Das Auswahlfeld sitzt bei WooCommerce in einer weissen Huelle mit nur 4px Rundung. Hinter der Pille darauf blitzten deren Ecken als weisse Zipfel hervor -- Land/Region und Kanton, in Liefer- wie Rechnungsadresse. */ .c-checkout-layout .wc-blocks-components-select__container { background : transparent; border-radius : var(--radius-md); } .c-cart-layout .wc-block-components-text-input input:hover, .c-checkout-layout .wc-block-components-text-input input:hover, .c-checkout-layout .wc-blocks-components-select__select:hover, .c-checkout-layout .wc-block-components-textarea:hover, .c-checkout-layout textarea:hover { border-color : color-mix(in srgb, var(--color-text) 45%, transparent); } .c-cart-layout .wc-block-components-text-input input:focus, .c-checkout-layout .wc-block-components-text-input input:focus, .c-checkout-layout .wc-blocks-components-select__select:focus, .c-checkout-layout .wc-block-components-textarea:focus, .c-checkout-layout textarea:focus { border-color : var(--color-accent); box-shadow : none; outline : none; } /* Die Beschriftung schwebt bei WooCommerce ins Feld und beim Tippen darueber. Beide Zustaende bekommen die Schrift des Mockups. */ .c-cart-layout .wc-block-components-text-input label, .c-checkout-layout .wc-block-components-text-input label, .c-checkout-layout .wc-blocks-components-select__label { font-family : var(--font-body); font-size : 14px; color : var(--color-neutral-600); } .c-checkout-layout .wc-block-components-text-input.is-active label, .c-checkout-layout .wc-blocks-components-select__label { font-size : 12px; } .c-checkout-layout .wc-blocks-components-select__expand { fill : var(--color-neutral-600); } /* ── Kaestchen und Punkte ────────────────────────────────────────────── */ .c-cart-layout .wc-block-components-checkbox__label, .c-checkout-layout .wc-block-components-checkbox__label { font-size : 14px; color : var(--color-text); } .c-cart-layout .wc-block-components-checkbox__input[type="checkbox"], .c-checkout-layout .wc-block-components-checkbox__input[type="checkbox"] { width : 18px; height : 18px; border : 1.5px solid var(--color-divider); border-radius : 6px; background : var(--color-surface); } .c-cart-layout .wc-block-components-checkbox__input[type="checkbox"]:checked, .c-checkout-layout .wc-block-components-checkbox__input[type="checkbox"]:checked { border-color : var(--color-accent); background : var(--color-accent); } .c-cart-layout .wc-block-components-checkbox__mark, .c-checkout-layout .wc-block-components-checkbox__mark { fill : var(--color-bg); } /* ── Knoepfe ──────────────────────────────────────────────────────────── .btn-primary des Design-Systems. WooCommerce faerbt die Knoepfe ueber eigene Regeln ein, deshalb steht die Klasse des Bausteins mit im Selektor. */ .c-cart-layout .wc-block-components-button.contained, .c-checkout-layout .wc-block-components-button.contained { 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; } .c-cart-layout .wc-block-components-button.contained:hover, .c-checkout-layout .wc-block-components-button.contained:hover { background : var(--color-accent-600); } /* "Anwenden" neben dem Gutscheinfeld ist im Mockup der schlichte Knopf. Er traegt die Klasse `contained` mit, also muss der Selektor hier laenger sein als der darueber -- sonst stuende dunkle Schrift auf der Akzentfarbe. */ .c-cart-layout .wc-block-components-button.contained.wc-block-components-totals-coupon__button, .c-checkout-layout .wc-block-components-button.contained.wc-block-components-totals-coupon__button { 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 : 14px; } .c-cart-layout .wc-block-components-button.contained.wc-block-components-totals-coupon__button:hover, .c-checkout-layout .wc-block-components-button.contained.wc-block-components-totals-coupon__button:hover { background : color-mix(in srgb, var(--color-text) 7%, transparent); } /* Solange kein Code eingetippt ist, laesst WooCommerce den Knopf gesperrt. */ .c-cart-layout .wc-block-components-totals-coupon__button:disabled, .c-checkout-layout .wc-block-components-totals-coupon__button:disabled { opacity : 0.5; cursor : not-allowed; } /* Die Meldungen selbst -- auch die vom Hinzufuegen zum Warenkorb -- stehen in src/pages/notice/notice.css: sie erscheinen ebenso auf der Produktseite. */ /* ══ Nur Warenkorb ═════════════════════════════════════════════════════ */ /* Die Kopfzeile der Liste: "PRODUKT" links, "GESAMTSUMME" rechts. */ .c-cart-layout .wc-block-cart-items__header { font-size : 11px; letter-spacing: 0.08em; text-transform: uppercase; color : var(--color-neutral-600); } .c-cart-layout .wc-block-cart-items__header th { padding-bottom : var(--space-2); border-bottom : 1px solid var(--color-divider); } /* Die Trennlinie gehoert an die Zeile, nicht an die Zellen: WooCommerce stellt die Zelle mit der Summe auf Flex, damit das Aktionsschild daneben passt -- sie waechst dann nicht auf die Hoehe der Zeile mit, und ihre eigene Linie saesse auf halber Hoehe. Zeilenraender brauchen border-collapse. */ .c-cart-layout table.wc-block-cart-items { border-collapse : collapse; } .c-cart-layout .wc-block-cart-items__row { border-bottom : 1px solid var(--color-divider); } /* Auch border-top, nicht nur border-bottom: WooCommerce zieht jeder Zelle oben eine eigene Linie. Bei den beiden linken faellt sie mit der Linie der Kopfzeile zusammen und blieb unsichtbar -- die Zelle mit der Summe steht aber auf `display: flex` (siehe oben) und ist damit keine Tabellenzelle mehr. Sie nimmt an border-collapse nicht teil, und ihre Linie stand als zweiter Strich neben dem der Kopfzeile. Die Trennung kommt allein von der Zeile. */ .c-cart-layout .wc-block-cart-items__row td { padding-block : var(--space-4); border-block : none; } /* Das Foto faellt wie im Raster in die warme Flaeche zurueck (.washed). */ .c-cart-layout .wc-block-cart-item__image img { width : 88px; height : 88px; object-fit : cover; border-radius : var(--radius-sm); background : var(--color-neutral-200); filter : saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94); } .c-cart-layout .wc-block-components-product-name { color : var(--color-accent); font-size : 16px; font-weight : 600; line-height : 1.3; text-decoration : none; } .c-cart-layout .wc-block-components-product-name:hover { color : var(--color-accent-600); } .c-cart-layout .wc-block-cart-item__prices { font-size : 14px; color : var(--color-neutral-600); } .c-cart-layout .wc-block-cart-item__total .wc-block-components-product-price { font-weight : 600; color : var(--color-accent-700); } /* Der Mengensteller: dieselbe Pille wie auf der Produktseite und im Panel. */ .c-cart-layout .wc-block-components-quantity-selector { border : 1.5px solid var(--color-divider); border-radius : 999px; background : transparent; } .c-cart-layout .wc-block-components-quantity-selector::after { content : none; /* WooCommerce zeichnet den Rahmen sonst ein zweites Mal */ } .c-cart-layout .wc-block-components-quantity-selector__input { background : transparent; color : var(--color-text); font-size : 14px; } .c-cart-layout .wc-block-components-quantity-selector__button { background : transparent; color : var(--color-accent); font-size : 14px; } .c-cart-layout .wc-block-components-quantity-selector__button:hover { color : var(--color-accent-600); } /* Der Papierkorb steht bei WooCommerce auf `color: inherit`, und zwar aus einer Regel mit vier Klassen -- die ganze Kette hier noch einmal. */ .c-cart-layout table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link { color : var(--color-accent); font-size : 0; /* WooCommerce liefert das Symbol als svg, den Text daneben nicht */ } .c-cart-layout table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover { color : var(--color-accent-600); } /* Der leere Warenkorb: die Karte des Mockups statt der nackten Meldung. */ .c-cart-layout .wp-block-woocommerce-empty-cart-block { display : flex; flex-direction : column; align-items : center; text-align : center; } /* ══ Nur Kasse ═════════════════════════════════════════════════════════ */ .c-checkout-layout .wc-block-components-checkout-step__title { font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 18px; color : var(--color-text); } .c-checkout-layout .wc-block-components-checkout-step { padding : 0; border : none; } /* Versand- und Zahlungsarten stehen im Mockup als einzelne Karten untereinander. Ohne Abstand dazwischen stossen ihre Raender aneinander und ergeben den Anschein eines zweiten Rahmens um die ganze Gruppe. */ .c-checkout-layout .wc-block-checkout__shipping-option .wc-block-components-radio-control, .c-checkout-layout .wc-block-checkout__payment-method .wc-block-components-radio-control { display : flex; flex-direction : column; gap : var(--space-3); } /* WooCommerce platziert standardmaessig per ::after einen grauen Gruppenrahmen sowie Trennlinien um und zwischen die Radio-Optionen. */ .c-checkout-layout .wc-block-components-radio-control::after, .c-checkout-layout .wc-block-components-radio-control-accordion-option::after, .c-checkout-layout .wc-block-components-radio-control__option::after { display : none; content : none; } /* Versand- und Zahlungsarten sind im Mockup Karten mit rundem Punkt; die gewaehlte bekommt den Rand in Akzentfarbe. */ .c-checkout-layout .wc-block-components-radio-control-accordion-option, .c-checkout-layout .wc-block-components-radio-control__option { border : 1.5px solid var(--color-divider); border-radius : var(--radius-md); background : var(--color-surface); } .c-checkout-layout .wc-block-components-radio-control-accordion-option { overflow : hidden; } /* In der Ziehharmonika sitzt die Beschriftung schon in einer Karte -- der zweite Rahmen darin waere einer zu viel. */ .c-checkout-layout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option { border : none; border-radius : 0; background : transparent; } .c-checkout-layout .wc-block-components-radio-control__option--checked-option-highlighted, .c-checkout-layout .wc-block-components-radio-control-accordion-option--checked-option-highlighted { border-color : var(--color-accent); } /* Die gewaehlte Versandart hebt WooCommerce anders hervor als die gewaehlte Zahlungsart: mit einem Ring aus box-shadow und einem eigenen Radius von 4px (Klasse --highlight-checked). Beides waere staerker gewichtet als die Regeln oben -- die Karte saehe neben den Zahlungsarten eckig und doppelt umrandet aus. Der Rand in Akzentfarbe von oben genuegt. */ .c-checkout-layout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted, .c-checkout-layout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted { border-radius : var(--radius-md); box-shadow : none; } .c-checkout-layout .wc-block-components-radio-control__label { font-size : 14px; color : var(--color-text); } .c-checkout-layout .wc-block-components-radio-control__label > div { display : inline-flex; align-items : center; gap : var(--space-2); line-height : 1; } .c-checkout-layout .wc-block-components-radio-control__label img { vertical-align : middle; display : inline-block; height : auto; max-height : 24px; } .c-checkout-layout .wc-block-components-radio-control__secondary-label { font-size : 13px; font-weight : 600; color : var(--color-accent-2-700); } .c-checkout-layout .c-payment-description { margin : 0 0 var(--space-3) 0; font-size : 14px; line-height : 1.45; color : var(--color-text); } /* Die gespeicherte Adresse mit dem Verweis "Bearbeiten" daneben. */ .c-checkout-layout .wc-block-components-address-card { padding : var(--space-4); border : 1px solid var(--color-divider); border-radius : var(--radius-md); background : var(--color-surface); font-size : 14px; } .c-checkout-layout .wc-block-components-address-card__edit { color : var(--color-accent); font-size : 14px; text-decoration : none; } .c-checkout-layout .wc-block-components-address-form__address_2-toggle { color : var(--color-accent); font-size : 14px; } .c-checkout-layout .wc-block-checkout__terms { font-size : 13px; color : var(--color-neutral-600); } .c-checkout-layout .wc-block-checkout__terms--with-separator::before { background : var(--color-divider); } /* Der Bestellknopf nimmt im Mockup die volle Breite. */ .c-checkout-layout .wc-block-checkout__actions_row { display : block; } .c-checkout-layout .wc-block-components-checkout-place-order-button { width : 100%; } /* ── Bestelluebersicht in der Seitenspalte ───────────────────────────── */ .c-checkout-layout .wc-block-components-checkout-order-summary__title-text { font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 18px; color : var(--color-text); } .c-checkout-layout .wc-block-components-order-summary-item__image img { width : 56px; height : 56px; object-fit : cover; border-radius : var(--radius-sm); background : var(--color-neutral-200); filter : saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94); } /* Die Zahl in der Ecke des Fotos. */ .c-checkout-layout .wc-block-components-order-summary-item__quantity { border : none; border-radius : 999px; background : var(--color-neutral-900); color : var(--color-bg); font-size : 11px; box-shadow : none; } .c-checkout-layout .wc-block-components-order-summary-item .wc-block-components-product-name { font-family : var(--font-body); font-size : 14px; font-weight : 600; line-height : 1.3; color : var(--color-text); } .c-checkout-layout .wc-block-components-order-summary-item__individual-prices, .c-checkout-layout .wc-block-components-order-summary-item__total-price { font-size : 13px; color : var(--color-neutral-600); } /* ══ Bestellbestaetigung ═══════════════════════════════════════════════ */ body.woocommerce-order-received { background : var(--color-bg); color : var(--color-text); font-family : var(--font-body); } .woocommerce-order-received :focus-visible { outline : 2px solid var(--color-accent); outline-offset : 2px; } .c-order-layout .wc-block-order-confirmation-status h1 { margin : 0 0 var(--space-2); font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 32px; line-height : 1.15; color : var(--color-text); } .c-order-layout .wc-block-order-confirmation-status p { margin : 0; font-size : 15px; color : var(--color-neutral-700); } /* Jeder Abschnitt der Bestaetigung ist im Design eine Karte -- dieselbe wie die Summe im Warenkorb. */ .c-order-layout .wc-block-order-confirmation-summary, .c-order-layout .wc-block-order-confirmation-totals-wrapper, .c-order-layout .wc-block-order-confirmation-downloads-wrapper, .c-order-layout .wc-block-order-confirmation-shipping-wrapper, .c-order-layout .wc-block-order-confirmation-billing-wrapper, .c-order-layout .wc-block-order-confirmation-additional-fields-wrapper, .c-order-layout .wc-block-order-confirmation-additional-information { box-sizing : border-box; margin : 0; padding : var(--space-4); border : none; border-radius : calc(var(--radius-lg) * 1.15); background : var(--color-surface); box-shadow : var(--shadow-sm); } .c-order-layout .wc-block-order-confirmation-address-wrapper { gap : var(--space-4); margin : 0; } .c-order-layout h2.wp-block-heading { margin : 0 0 var(--space-3); font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 18px; line-height : 1.2; color : var(--color-text); } .c-order-layout .wc-block-order-confirmation-summary-list { gap : var(--space-3) var(--space-6); margin : 0; padding : 0; border : none; list-style : none; font-size : 14px; } .c-order-layout .wc-block-order-confirmation-summary-list-item__key { color : var(--color-neutral-600); font-weight : 400; } .c-order-layout .wc-block-order-confirmation-summary-list-item__value { font-weight : 600; } .c-order-layout .wc-block-order-confirmation-totals__table { width : 100%; border : none; border-collapse : collapse; font-size : 14px; } .c-order-layout .wc-block-order-confirmation-totals__table th, .c-order-layout .wc-block-order-confirmation-totals__table td { padding : var(--space-2) 0; border : none; background : transparent; text-align : left; vertical-align: baseline; } .c-order-layout .wc-block-order-confirmation-totals__table thead th { border-bottom : 1px solid var(--color-divider); font-family : var(--font-body); font-weight : 400; font-size : 11px; letter-spacing: 0.08em; text-transform: uppercase; color : var(--color-neutral-600); } .c-order-layout .wc-block-order-confirmation-totals__table tbody td { border-bottom : 1px solid var(--color-divider); } /* Bezeichnung links, Betrag rechts -- wie in der Summe des Warenkorbs. Die Tabellenklasse steht mit im Selektor, damit die Regel die allgemeine fuer th und td darueber schlaegt. */ .c-order-layout .wc-block-order-confirmation-totals__table .wc-block-order-confirmation-totals__total { text-align : right; white-space : nowrap; } .c-order-layout .wc-block-order-confirmation-totals__table tfoot th { font-weight : 400; color : var(--color-neutral-600); } .c-order-layout .wc-block-order-confirmation-totals__table tfoot tr:last-child th, .c-order-layout .wc-block-order-confirmation-totals__table tfoot tr:last-child td { padding-top : var(--space-3); font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 18px; color : var(--color-text); } .c-order-layout .wc-block-order-confirmation-totals__table .includes_tax { display : block; font-family : var(--font-body); font-weight : 400; font-size : 12px; color : var(--color-neutral-600); } /* Die Adresse bringt einen eigenen Rahmen mit -- in der Karte einer zu viel. */ .c-order-layout .wc-block-order-confirmation-shipping-address, .c-order-layout .wc-block-order-confirmation-billing-address { padding : 0; border : none; background : transparent; } .c-order-layout address { font-style : normal; font-size : 14px; line-height: 1.6; } /* Die Zahlungshinweise der Bank stehen sonst in der Ueberschriftgroesse des Themes. */ .c-order-layout .wc-block-order-confirmation-additional-information, .c-order-layout .wc-block-order-confirmation-additional-information p { margin : 0; font-size : 15px; } .c-order-layout .wc-block-order-confirmation-additional-fields { font-size : 14px; } /* Das Angebot, ein Konto anzulegen, erscheint nur fuer Gaeste -- und dann mit dem schwarzen Knopf des Themes. */ .c-order-layout .wc-block-order-confirmation-create-account-button { 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; } .c-order-layout .wc-block-order-confirmation-create-account-button:hover { background : var(--color-accent-600); } .c-order-layout a { color : var(--color-accent); } .c-order-layout a:hover { color : var(--color-accent-600); } /* ── Schmale Fenster ─────────────────────────────────────────────────── */ /* Unter 900px bleibt neben der 340px-Karte zu wenig fuer die Artikelliste -- die Summe rutscht darunter und nimmt die volle Breite. */ @media (max-width: 899px) { .c-cart-layout .wc-block-components-sidebar-layout, .c-checkout-layout .wc-block-components-sidebar-layout { flex-direction : column; gap : var(--space-6); } .c-cart-layout .wc-block-components-sidebar, .c-checkout-layout .wc-block-components-sidebar { flex : 1 1 auto; max-width : none; width : 100%; } .c-checkout-layout .wc-block-components-sidebar.is-sticky { position : static; } } @media (max-width: 781px) { .c-order-layout .wc-block-order-confirmation-address-wrapper { gap : var(--space-4); } } @media (max-width: 600px) { .c-cart-layout, .c-checkout-layout, .c-order-layout { gap : var(--space-4); padding : 0 var(--space-3) var(--space-4); } .c-cart-layout > .wp-block-post-title, .c-order-layout .wc-block-order-confirmation-status h1 { font-size : 24px; } .c-cart-layout .wc-block-cart-item__image img { width : 64px; height : 64px; } } /* Land: der Laden liefert nur in die Schweiz, die Auswahl hat also genau einen Eintrag. Ausgeblendet wird hier und nicht per `hidden` in der Locale, weil der Checkout-Block den Wert jedes ausgeblendeten Feldes leert -- das Land waere dann leer statt "Schweiz". Begruendung in pages/checkout/address.php. Die Klasse sitzt am ganzen Feld, also samt Beschriftung, und trifft Rechnungs- wie Lieferadresse und den Versandrechner im Warenkorb. */ .wc-block-components-country-input { display : none; }