/** * Pizzaschmiede – Markenfarben fuer Astra & WooCommerce * * Gilt fuer ALLE Seiten ausser der custom Startseite (die traegt ihre Farben * selbst in home.css). Ziel: Shop, Warenkorb, Kasse und Konto sollen aussehen * wie die Startseite – nicht wie Astra-Blau. * * Astra 4.13 rendert praktisch alles ueber neun globale CSS-Variablen. Die hier * zu ueberschreiben faerbt in einem Rutsch Links, Buttons, den Scroll-nach-oben- * Knopf, den Warenkorb-Zaehler, "Angebot"-Badges und Elementors Global Colors. * * Reihenfolge statt !important: Astras dynamisches CSS steht inline im , * dieses Stylesheet wird danach eingebunden (Abhaengigkeit 'astra-theme-css' in * functions.php). Bei gleicher Spezifitaet gewinnt damit der spaetere Block. * Falls Astra das je aendert, sind hier ploetzlich blaue Buttons zu sehen. * * Die Werte spiegeln die Tokens aus home.css. */ :root { /* 0 = Akzent (Links, Buttons, Badges), 1 = dessen Hover/Aktiv-Zustand. */ --ast-global-color-0: #8b1a1a; --ast-global-color-1: #6d1414; /* 2 = Fliesstext, 3 = Ueberschriften. */ --ast-global-color-2: #282420; --ast-global-color-3: #1e1a17; /* 4 = Seiten-/Inhaltsflaeche. Bewusst NICHT Weiss, sondern exakt der Hintergrund, auf dem die Produktfotos freigestellt wurden – so verschwindet die Kante um die Thumbnails im Shop-Archiv. */ --ast-global-color-4: #f4eee2; /* 5 = abgesetzte Flaeche (Tabellenzeilen, Kasten-Hintergruende). */ --ast-global-color-5: #f0ebe3; --ast-global-color-6: #1e1a17; --ast-global-color-7: #d4c9b8; /* Rahmen und Trennlinien. */ --ast-global-color-8: #1e1a17; /* Astra spiegelt seine Palette in Elementors Global Colors. Wer eine Unterseite in Elementor baut, greift ueber diese Namen darauf zu. */ --e-global-color-astglobalcolor0: #8b1a1a; --e-global-color-astglobalcolor1: #6d1414; --e-global-color-astglobalcolor2: #282420; --e-global-color-astglobalcolor3: #1e1a17; --e-global-color-astglobalcolor4: #f4eee2; --e-global-color-astglobalcolor5: #f0ebe3; --e-global-color-astglobalcolor6: #1e1a17; --e-global-color-astglobalcolor7: #d4c9b8; --e-global-color-astglobalcolor8: #1e1a17; } /* ── Was Astra an den Variablen vorbei hart verdrahtet ── Ermittelt aus dem inline-CSS der Live-Seite; nur diese Stellen brauchen eine eigene Regel. */ /* Fokusrahmen der Formularfelder – steckte als #046bd2 im Stylesheet. */ .woocommerce input[type="text"]:focus, .woocommerce input[type="email"]:focus, .woocommerce input[type="tel"]:focus, .woocommerce input[type="password"]:focus, .woocommerce input[type="number"]:focus, .woocommerce input[type="search"]:focus, .woocommerce textarea:focus, .woocommerce select:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="search"]:focus, textarea:focus { border-color: var(--ast-global-color-0); } /* Sternebewertung: Astras Orange (#fda256) gegen das Marken-Gold tauschen. */ .woocommerce .star-rating, .woocommerce .star-rating::before, .woocommerce .comment-form-rating .stars a, .woocommerce p.stars a { color: #c4a35a; } /* Gutenberg-Buttons erben sonst das Core-Grau (#32373c). */ :root :where(.wp-element-button, .wp-block-button__link) { background-color: var(--ast-global-color-0); color: #fff; } :root :where(.wp-element-button, .wp-block-button__link):hover { background-color: var(--ast-global-color-1); } /* Sticky-Menu-Plugin bringt ein eigenes Creme (#f7f5e7) mit. */ #mysticky-nav.wrapfixed, #mysticky-nav.wrapfixed .myfixed { background-color: #f8f4ee; } /* ── Feinschliff, damit die Shop-Seiten zur Startseite passen ── */ /* Serifen-Ueberschriften wie auf der Startseite. Die Schriften laedt pizzaschmiede_enqueue_brand_assets() zusammen mit dieser Datei. */ .entry-title, .woocommerce-products-header__title, .woocommerce div.product .product_title, h1, h2, h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 400; } /* Astras Buttons sind rund per Default; die Marke ist kantig (2px wie .ps-btn). */ .ast-button, .ast-custom-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce .button.single_add_to_cart_button { border-radius: 2px; letter-spacing: 0.3px; } /* "Angebot"-Badge: Astra faerbt ihn ueber color-0 rot – auf dem roten Produktbild-Hintergrund braucht er eine Kante, sonst verschwimmt er. */ .woocommerce span.onsale { border-radius: 2px; font-weight: 500; letter-spacing: 0.5px; } /* =========================================================================== Phase 3 – Marken-Layout fuer die handgebauten Unterseiten --------------------------------------------------------------------------- Die Content- und Rechtsseiten (Ueber uns, Kontakt, FAQ, Impressum …) werden als normale WordPress-Seiten angelegt und mit diesen ps-Klassen gestaltet – dieselbe Bildsprache wie die Startseite, aber ohne deren eigenes Stylesheet. Astra liefert Header/Footer, den Rahmen dazwischen macht dieses CSS. Die Seiten laufen als "page-builder"-Layout (volle Breite); die Prosa begrenzt sich selbst ueber max-width. =========================================================================== */ :root { --ps-accent: #8b1a1a; --ps-accent-dark: #6d1414; --ps-ink: #282420; --ps-head: #1e1a17; --ps-cream: #f4eee2; --ps-surface: #f0ebe3; --ps-border: #d4c9b8; --ps-green: #4a7c59; --ps-gold: #c4a35a; --ps-muted: #6b6157; } /* Serifen-Display wie auf der Startseite. */ .ps-page h1, .ps-page h2, .ps-page h3, .ps-page h4 { font-family: "Playfair Display", Georgia, serif; color: var(--ps-head); line-height: 1.15; } .ps-page { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ps-ink); } /* ── Seiten-Kopf (Hero-Band) ── */ .ps-page__hero { background: linear-gradient(180deg, #fbf8f1 0%, var(--ps-cream) 100%); border-bottom: 1px solid var(--ps-border); padding: 64px 24px 56px; text-align: center; } .ps-page__hero-inner { max-width: 760px; margin: 0 auto; } .ps-eyebrow { display: inline-block; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 500; color: var(--ps-accent); margin-bottom: 16px; } .ps-eyebrow--green { color: var(--ps-green); } .ps-page__title { font-size: clamp(30px, 5vw, 46px); font-weight: 700; margin: 0 0 18px; } .ps-page__title em { font-style: italic; color: var(--ps-accent); } .ps-page__lead { font-size: 18px; line-height: 1.6; color: var(--ps-muted); margin: 0 auto; max-width: 620px; } /* ── Prosa-Bereich ── */ .ps-page__body { padding: 56px 24px 72px; } .ps-prose { max-width: 760px; margin: 0 auto; } .ps-prose > * + * { margin-top: 20px; } .ps-prose h2 { font-size: 27px; font-weight: 700; margin-top: 44px; padding-bottom: 10px; border-bottom: 1px solid var(--ps-border); } .ps-prose h3 { font-size: 20px; font-weight: 700; margin-top: 30px; } .ps-prose p, .ps-prose li { font-size: 16.5px; line-height: 1.7; } .ps-prose ul, .ps-prose ol { padding-left: 22px; } .ps-prose li + li { margin-top: 8px; } .ps-prose a { color: var(--ps-accent); text-underline-offset: 3px; } .ps-prose strong { color: var(--ps-head); } /* Bloecke fuer eingerueckte Hinweise / Werte. */ .ps-note { background: var(--ps-surface); border: 1px solid var(--ps-border); border-left: 3px solid var(--ps-accent); border-radius: 3px; padding: 18px 22px; font-size: 15.5px; line-height: 1.65; } /* ── Karten-Grid (Werte, Schritte, Kontaktwege) ── */ .ps-cards { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; } .ps-card { background: #fff; border: 1px solid var(--ps-border); border-radius: 5px; padding: 28px 26px; } .ps-card__num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ps-accent); color: #fff; font-weight: 600; font-size: 17px; margin-bottom: 16px; } .ps-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; } .ps-card p { font-size: 15px; line-height: 1.6; color: var(--ps-muted); margin: 0; } /* ── Abschnitts-Ueberschrift zentriert ── */ .ps-section { padding: 56px 24px; } .ps-section--cream { background: var(--ps-surface); } .ps-section__head { max-width: 620px; margin: 0 auto 38px; text-align: center; } .ps-section__head h2 { font-size: clamp(24px, 4vw, 34px); font-weight: 700; margin: 8px 0 12px; } .ps-section__head p { color: var(--ps-muted); font-size: 16.5px; line-height: 1.6; margin: 0; } /* ── FAQ (natives details/summary, kein JS) ── */ .ps-faq { max-width: 760px; margin: 0 auto; } .ps-faq details { background: #fff; border: 1px solid var(--ps-border); border-radius: 5px; margin-bottom: 12px; overflow: hidden; } .ps-faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 600; color: var(--ps-head); font-size: 16.5px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .ps-faq summary::-webkit-details-marker { display: none; } .ps-faq summary::after { content: "+"; font-size: 22px; color: var(--ps-accent); line-height: 1; flex: none; } .ps-faq details[open] summary::after { content: "–"; } .ps-faq details[open] summary { border-bottom: 1px solid var(--ps-border); } .ps-faq__answer { padding: 16px 22px 20px; } .ps-faq__answer p { font-size: 15.5px; line-height: 1.7; color: var(--ps-ink); margin: 0; } /* ── Kontaktseite ── */ .ps-contact-grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .ps-contact-card { background: #fff; border: 1px solid var(--ps-border); border-radius: 5px; padding: 26px 24px; text-align: center; } .ps-contact-card h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; } .ps-contact-card p { font-size: 15px; color: var(--ps-muted); margin: 0; line-height: 1.6; } .ps-contact-card a { color: var(--ps-accent); } /* Beispiel-Kontaktformular (nur Ansicht, kein echter Versand). */ .ps-form { max-width: 640px; margin: 34px auto 0; } .ps-form__row { margin-bottom: 16px; } .ps-form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--ps-head); } .ps-form input, .ps-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--ps-border); border-radius: 3px; background: #fff; font-size: 15px; font-family: inherit; color: var(--ps-ink); } .ps-form textarea { min-height: 130px; resize: vertical; } /* Marken-Button fuer die Seiten. */ .ps-page .ps-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ps-accent); color: #fff; padding: 14px 28px; border-radius: 2px; font-weight: 600; font-size: 15px; letter-spacing: 0.3px; border: none; cursor: pointer; text-decoration: none; transition: background 0.2s; } .ps-page .ps-btn:hover { background: var(--ps-accent-dark); } /* ── Rechtstexte ── */ .ps-legal { max-width: 760px; margin: 0 auto; } .ps-legal__id { background: #fff; border: 1px solid var(--ps-border); border-left: 3px solid var(--ps-accent); border-radius: 3px; padding: 16px 20px; margin-bottom: 28px; font-size: 15px; line-height: 1.6; } .ps-legal__id strong { color: var(--ps-accent); } /* ── Produktfinder-Seite (regelbasiert, ohne JS-Frameworks) ── */ .ps-finder-page { max-width: 720px; margin: 0 auto; } .ps-finder-step { margin-bottom: 34px; } .ps-finder-step__q { font-family: "Playfair Display", Georgia, serif; font-size: 22px; font-weight: 700; color: var(--ps-head); margin: 0 0 16px; } .ps-finder-step__q span { display: inline-block; background: var(--ps-accent); color: #fff; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; font-family: "DM Sans", sans-serif; font-size: 15px; margin-right: 12px; vertical-align: middle; } .ps-finder-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .ps-finder-options label { display: block; background: #fff; border: 1px solid var(--ps-border); border-radius: 5px; padding: 16px 18px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .ps-finder-options input { margin-right: 10px; accent-color: var(--ps-accent); } .ps-finder-options label:hover { border-color: var(--ps-accent); } .ps-finder-options label strong { display: block; font-size: 15.5px; color: var(--ps-head); } .ps-finder-options label small { color: var(--ps-muted); font-size: 13.5px; } .ps-finder-result { background: #fff; border: 1px solid var(--ps-border); border-radius: 6px; padding: 34px 28px; text-align: center; margin-top: 20px; box-shadow: 0 4px 20px rgba(40, 36, 32, 0.08); } .ps-finder-result__img { display: block; max-width: 260px; height: auto; margin: 0 auto 24px; border-radius: 4px; } .ps-finder-result__kicker { font-size: 13.5px; color: var(--ps-green); font-weight: 500; margin: 0 0 6px; } .ps-finder-result h2 { font-size: 24px; margin: 0 0 10px; } .ps-finder-result p { color: var(--ps-muted); font-size: 15.5px; line-height: 1.6; margin: 0 0 20px; } .ps-finder-hint { text-align: center; color: var(--ps-muted); font-size: 14px; margin-top: 8px; } @media (max-width: 600px) { .ps-page__hero { padding: 44px 20px 38px; } .ps-page__body, .ps-section { padding-left: 20px; padding-right: 20px; } } /* =========================================================================== Phase 3 – Shop-, Kategorie- und Produktseiten feinschleifen --------------------------------------------------------------------------- Rein additive Politur auf dem WooCommerce/Astra-Standard: Produktkarten bekommen einen ruhigen Rahmen mit Hover, der Kategorie-Kopf einen Marken-Anstrich, die Produktdetailseite mehr Ruhe. Keine Template-Overrides. =========================================================================== */ /* ── Kopf von Shop & Kategorie ── */ .woocommerce-products-header { text-align: center; max-width: 760px; margin: 0 auto 8px; padding-top: 12px; } .woocommerce-products-header__title.page-title { font-size: clamp(28px, 4.5vw, 42px); font-weight: 700; margin-bottom: 10px; } .woocommerce .term-description, .woocommerce-page .term-description { max-width: 680px; margin: 0 auto 26px; text-align: center; font-size: 16.5px; line-height: 1.65; color: var(--ps-muted); } /* Breadcrumb, Result-Count und Sortierung teilen dieselbe ruhige Typo (DM Sans, gedaempft) – vorher erbten sie uneinheitliche Schriften. */ .woocommerce .woocommerce-breadcrumb, .woocommerce-page .woocommerce-breadcrumb { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13.5px; letter-spacing: 0.2px; color: var(--ps-muted); margin-bottom: 22px; } .woocommerce .woocommerce-breadcrumb a { color: var(--ps-accent); text-decoration: none; } .woocommerce .woocommerce-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; } .woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; color: var(--ps-muted); margin-bottom: 26px; padding-top: 6px; } .woocommerce .woocommerce-ordering { margin-bottom: 26px; } .woocommerce .woocommerce-ordering select, .woocommerce-page .woocommerce-ordering select { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding: 9px 13px; border: 1px solid var(--ps-border); border-radius: 3px; background: #fff; font-size: 14px; color: var(--ps-ink); } /* ── Produktkarten im Loop ── */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { background: #fff; border: 1px solid var(--ps-border); border-radius: 6px; padding: 14px 14px 22px; transition: box-shadow 0.2s ease, transform 0.2s ease; } .woocommerce ul.products li.product:hover { box-shadow: 0 10px 26px rgba(30, 26, 23, 0.10); transform: translateY(-3px); } .woocommerce ul.products li.product a img { border-radius: 4px; background: var(--ps-cream); margin-bottom: 14px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: "Playfair Display", Georgia, serif; font-size: 17px; font-weight: 600; color: var(--ps-head); line-height: 1.3; padding: 0 0 6px; } .woocommerce ul.products li.product .price { color: var(--ps-head); font-weight: 600; font-size: 16px; } .woocommerce ul.products li.product .price del { color: var(--ps-muted); font-weight: 400; } .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart { margin-top: 10px; font-size: 13.5px; } /* Sterne im Loop dezenter (statische Deko im fiktiven Shop). */ .woocommerce ul.products li.product .star-rating { font-size: 0.8em; margin: 0 0 8px; } /* ── Einzelnes Produkt ── */ .woocommerce div.product .product_title { font-size: clamp(26px, 3.5vw, 36px); font-weight: 700; margin-bottom: 12px; } .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ps-accent); font-weight: 700; font-size: 24px; } .woocommerce div.product .woocommerce-product-details__short-description { font-size: 16px; line-height: 1.65; color: var(--ps-ink); } /* Tab-Reiter (Beschreibung / Bewertungen) an die Marke angleichen. */ .woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: transparent; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ps-accent); } .woocommerce #reviews h2, .woocommerce div.product .woocommerce-tabs .panel h2, .woocommerce .related.products > h2, .woocommerce .upsells.products > h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 24px; } /* Menge + In-den-Warenkorb ruhiger ausrichten. */ .woocommerce div.product form.cart .button { padding: 14px 30px; } @media (max-width: 600px) { .woocommerce ul.products li.product { padding: 10px 10px 18px; } } /* =========================================================================== Warenkorb & Kasse --------------------------------------------------------------------------- Astra/WooCommerce liefern hier reine Formular-/Tabellen-Standardmarkup ohne eigene Loop-Karten wie im Shop – bisher liefen beide Seiten komplett im Astra-Blau/-Grau. Rein additive Politur auf dem Standard-Markup, keine Template-Overrides: Tabellen als Karte, CTA im Markenrot, ruhige Formulare. =========================================================================== */ /* ── Gemeinsame Tabellen-Karte (Warenkorb-Zeilen, Bestelluebersicht) ── */ .woocommerce table.shop_table { border: 1px solid var(--ps-border); border-radius: 6px; background: #fff; border-collapse: separate; border-spacing: 0; overflow: hidden; } .woocommerce table.shop_table th { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ps-muted); background: var(--ps-surface); border-bottom: 1px solid var(--ps-border); padding: 14px 16px; } .woocommerce table.shop_table td { border-top: 1px solid var(--ps-border); padding: 16px; font-size: 15px; color: var(--ps-ink); } .woocommerce table.shop_table tr:first-child td { border-top: none; } .woocommerce table.shop_table td.product-name a { font-family: "Playfair Display", Georgia, serif; font-weight: 600; color: var(--ps-head); text-decoration: none; } .woocommerce table.shop_table td.product-name a:hover { color: var(--ps-accent); } .woocommerce table.shop_table td.product-price, .woocommerce table.shop_table td.product-subtotal, .woocommerce table.shop_table .amount { font-weight: 600; color: var(--ps-head); } .woocommerce table.shop_table img { border-radius: 4px; background: var(--ps-cream); } .woocommerce table.shop_table tr.cart-subtotal th, .woocommerce table.shop_table tr.cart-subtotal td, .woocommerce table.shop_table tr.order-total th, .woocommerce table.shop_table tr.order-total td { background: var(--ps-surface); } .woocommerce table.shop_table tr.order-total .amount { color: var(--ps-accent); font-size: 18px; } /* ── Warenkorb-Seite ── */ .woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info { border-top-color: var(--ps-accent); background: var(--ps-surface); } .woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info::before { color: var(--ps-accent); } /* Menge im Warenkorb: gleiches ruhige Feld wie auf der Produktseite. */ .woocommerce-cart td.product-quantity .qty { border: 1px solid var(--ps-border); border-radius: 2px; box-shadow: none; text-align: center; height: 40px; } /* "Entfernen"-Kreuz dezent, Markenrot beim Hover statt Astra-Grau. */ .woocommerce a.remove { color: var(--ps-muted) !important; border: none !important; } .woocommerce a.remove:hover { color: #fff !important; background: var(--ps-accent) !important; } /* Gutschein + "Warenkorb aktualisieren" in einer ruhigen Zeile. */ .woocommerce-cart .coupon .input-text { border: 1px solid var(--ps-border); border-radius: 2px; height: 44px; padding: 0 14px; } .woocommerce-cart table.cart td.actions .button { border-radius: 2px; } /* Warenkorb-Summe: von der Tabelle abgesetzte Karte, wie die Buy-Box. */ .woocommerce-cart .cart_totals { background: #fff; border: 1px solid var(--ps-border); border-radius: 8px; padding: 22px 24px 26px; box-shadow: 0 2px 12px rgba(30, 26, 23, 0.05); } .woocommerce-cart .cart_totals h2 { font-size: 21px; margin-bottom: 16px; } .woocommerce-cart .cart_totals table.shop_table { border: none; border-radius: 0; } .woocommerce-cart .cart_totals table.shop_table td, .woocommerce-cart .cart_totals table.shop_table th { padding: 12px 0; } .woocommerce-cart .wc-proceed-to-checkout { padding: 20px 0 0; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { background: var(--ps-accent); border-radius: 2px; font-weight: 600; letter-spacing: 0.3px; padding: 16px 20px; font-size: 15.5px; box-shadow: 0 2px 10px rgba(139, 26, 26, 0.22); transition: background 0.2s ease; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--ps-accent-dark); } .woocommerce-cart .cross-sells > h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 22px; } /* Leerer Warenkorb: ruhige Fehlermeldung statt Astra-Grau. */ .woocommerce-cart .cart-empty { background: var(--ps-surface); border: 1px solid var(--ps-border); border-left: 3px solid var(--ps-accent); border-radius: 3px; padding: 18px 22px; } .woocommerce-cart .return-to-shop .button { border-radius: 2px; } @media (max-width: 768px) { .woocommerce table.shop_table th:not(.product-name), .woocommerce table.shop_table td:not(.product-name):not(.product-remove) { text-align: right; } } /* ── Warenkorb: Gratis-Versand-Fortschritt + Trust-Leiste (Conversion) ── Beides haengt sich per the_content-Filter (pizzaschmiede_cart_extras) vor bzw. hinter den WooCommerce-Cart-Block; assets/js/cart.js verschiebt beide danach an ihren eigentlichen Platz (Balken an den Kopf der Sidebar-Spalte, Trust-Leiste unter den Kassen-Button) und haelt den Balken live synchron, weil der Cart-Block Mengen ueber die Store-API ohne Seiten-Reload aktualisiert. Ohne JS bleibt der Balken volle Breite ueber dem Cart-Block stehen – funktioniert, sieht nur weniger kompakt aus. */ .ps-ship-bar { background: #fff; border: 1px solid var(--ps-border); border-radius: 6px; padding: 16px 20px; margin-bottom: 20px; } .ps-ship-bar__text { margin: 0 0 10px; font-size: 14.5px; color: var(--ps-ink); } .ps-ship-bar__text strong { color: var(--ps-accent); } .ps-ship-bar.is-complete .ps-ship-bar__text { color: var(--ps-green); font-weight: 600; } .ps-ship-bar__track { height: 6px; border-radius: 3px; background: var(--ps-surface); overflow: hidden; } .ps-ship-bar__fill { height: 100%; background: var(--ps-accent); border-radius: 3px; width: 0; transition: width 0.4s ease, background 0.3s ease; } .ps-ship-bar.is-complete .ps-ship-bar__fill { background: var(--ps-green); } /* Trust-Leiste: gleiche Bausteine wie im Shop-Streifen (.ps-trust-strip / .ps-trust--inline), hier etwas abgesetzt, egal ob sie unten am Content sitzt (Fallback) oder per JS neben den Kassen-Button wandert. */ .ps-trust-strip--cart { margin: 32px 0 0; } /* ── Warenkorb: WooCommerce-Blocks-Markup ── Diese Seite laeuft ueber das Cart-Block (Gutenberg), nicht die klassische [woocommerce_cart]-Tabelle oben – eigenes Markup (wc-block-cart-item__*), eigene Klassen. Astra spiegelt seine Farben zwar automatisch hinein, die Typografie bleibt aber Block-Editor-Standard. Groessere Produktnamen in Playfair wie auf der Produktseite, groessere Bilder, ruhigerer Stepper. */ /* WooCommerce definiert die Zeile als CSS-Grid mit einer fest verdrahteten 80px-Bildspalte (.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 80px 132px }) – das ist keine Frage der Lade- reihenfolge, sondern hoehere Spezifitaet (Element + 3 Klassen). Eine einfache Klassenregel wie zuvor gewinnt dagegen nie. Deshalb hier auf dieselbe Verschachtelung gehen + !important als Sicherheitsnetz – sonst bleibt das Bild trotz width-Angabe auf 80px geklemmt. */ .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row, table.wc-block-cart-items .wc-block-cart-items__row, .wc-block-cart-items__row { grid-template-columns: 116px 1fr !important; padding: 24px 0 !important; align-items: center; } .wc-block-cart-item__image img { border-radius: 6px; background: var(--ps-cream); } /* WooCommerce liefert in wc-blocks/cart.css eine Regel mit hoeherer Spezifitaet (table.wc-block-cart-items .wc-block-cart-items__row .X) fuer genau diese Klasse – eine einfache Klassenregel wie oben verliert dagegen unabhaengig von der Ladereihenfolge. Deshalb hier auf die gleiche Verschachtelungstiefe gehen + !important als Sicherheitsnetz. */ table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name, .wc-block-cart-items__row .wc-block-components-product-name, .wc-block-components-product-name { font-family: "Playfair Display", Georgia, serif !important; font-size: 21px !important; font-weight: 600 !important; color: var(--ps-head) !important; line-height: 1.3 !important; max-width: none !important; } a.wc-block-components-product-name:hover { color: var(--ps-accent) !important; } .wc-block-components-product-metadata__description p { font-size: 15px !important; color: var(--ps-muted); line-height: 1.6; margin-top: 6px; } .wc-block-cart-item__prices .wc-block-components-product-price__value { font-size: 15px; color: var(--ps-muted); } .wc-block-cart-item__total .wc-block-formatted-money-amount { font-size: 18px; font-weight: 700; color: var(--ps-head); } .wc-block-cart-items__header-product, .wc-block-cart-items__header-total { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ps-muted); padding-bottom: 14px; } /* Mengen-Stepper: eckiger Rahmen statt Astra-Rund, wie das Mengenfeld auf der Produktseite (form.cart .quantity .qty). */ .wc-block-components-quantity-selector { border: 1px solid var(--ps-border); border-radius: 3px; overflow: hidden; height: 42px; box-shadow: none; } .wc-block-components-quantity-selector__input { font-size: 15px; color: var(--ps-head); } .wc-block-components-quantity-selector__button { color: var(--ps-muted); } .wc-block-components-quantity-selector__button:hover { color: var(--ps-accent); background: var(--ps-surface); } .wc-block-cart-item__remove-link.wc-block-components-button { color: var(--ps-muted) !important; font-size: 13px; } .wc-block-cart-item__remove-link.wc-block-components-button:hover { color: var(--ps-accent) !important; } @media (max-width: 600px) { .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row, table.wc-block-cart-items .wc-block-cart-items__row, .wc-block-cart-items__row { grid-template-columns: 84px 1fr !important; } .wc-block-components-product-name, table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name { font-size: 17px !important; } } /* ── Kasse ── */ .woocommerce-checkout .woocommerce-billing-fields h3, .woocommerce-checkout #order_review_heading, .woocommerce-checkout .woocommerce-additional-fields h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 22px; margin-bottom: 18px; } .woocommerce-checkout .woocommerce-billing-fields .form-row label, .woocommerce-checkout .woocommerce-shipping-fields .form-row label, .woocommerce-checkout .woocommerce-additional-fields .form-row label { font-size: 13.5px; font-weight: 600; color: var(--ps-head); } .woocommerce-checkout .woocommerce-input-wrapper input.input-text, .woocommerce-checkout .woocommerce-input-wrapper select, .woocommerce-checkout .woocommerce-input-wrapper textarea, .woocommerce-checkout #order_comments { border: 1px solid var(--ps-border); border-radius: 3px; box-shadow: none; padding: 12px 14px; } .woocommerce-checkout .select2-container--default .select2-selection--single { border: 1px solid var(--ps-border); border-radius: 3px; height: 46px; padding: 8px 14px; } /* Bestelluebersicht rechts: dieselbe abgesetzte Karte wie im Warenkorb. */ .woocommerce-checkout #order_review { background: #fff; border: 1px solid var(--ps-border); border-radius: 8px; padding: 22px 24px 26px; box-shadow: 0 2px 12px rgba(30, 26, 23, 0.05); } .woocommerce-checkout #order_review table.shop_table { border: none; } /* Zahlarten-Liste: Astras Radios sind unauffaellig, Karten heben die Wahl staerker hervor und markieren die aktive Option in Markenrot. */ .woocommerce-checkout ul.wc_payment_methods { list-style: none; margin: 0 0 18px; padding: 0; } .woocommerce-checkout ul.payment_methods li { border: 1px solid var(--ps-border); border-radius: 4px; padding: 14px 16px; margin-bottom: 8px; background: var(--ps-surface); } .woocommerce-checkout ul.payment_methods li input[type="radio"] { accent-color: var(--ps-accent); } .woocommerce-checkout ul.payment_methods li label { font-weight: 600; color: var(--ps-head); } .woocommerce-checkout ul.payment_methods li .payment_box { margin-top: 10px; font-size: 14px; color: var(--ps-muted); } /* Der finale CTA: gleiches Gewicht wie "Zur Kasse" im Warenkorb. */ .woocommerce-checkout #place_order { width: 100%; background: var(--ps-accent); border-radius: 2px; font-weight: 600; font-size: 15.5px; letter-spacing: 0.3px; padding: 16px 20px; box-shadow: 0 2px 10px rgba(139, 26, 26, 0.22); transition: background 0.2s ease; } .woocommerce-checkout #place_order:hover { background: var(--ps-accent-dark); } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { font-size: 13.5px; color: var(--ps-muted); margin: 14px 0; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a { color: var(--ps-accent); } @media (max-width: 900px) { .woocommerce-checkout #order_review { margin-top: 32px; } } /* =========================================================================== Phase 3 – Gemeinsames Marken-Chrome (Hinweisbar, Header, Footer) --------------------------------------------------------------------------- Damit der Wechsel Startseite -> Shop nicht wie ein Weltenbruch wirkt, tragen die Astra-Seiten dieselbe dunkle Hinweisbar, einen creme-farbenen Header mit Marken-Navigation und einen markengleichen dunklen Footer. Markup dazu in functions.php (astra_header_before / astra_footer_after). =========================================================================== */ /* ── Dunkle Hinweisbar (Pendant zur Startseite) ── */ .ps-topbar { background: var(--ps-head); text-align: center; padding: 10px 24px; border-bottom: 1px solid #3a3630; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 24px; row-gap: 4px; } .ps-topbar__text { font-size: 13px; color: #c8bfb4; margin: 0; letter-spacing: 0.2px; } .ps-topbar__text strong { font-weight: 600; color: #f0ece6; } .ps-topbar__sep { margin: 0 12px; opacity: 0.3; } .ps-topbar__link { color: #c2a87a; text-decoration: none; font-weight: 500; border-bottom: 1px solid rgba(194,168,122,0.4); } .ps-topbar__link:hover { color: #d8bd8c; } .ps-topbar__disclaimer::before { content: ""; display: inline-block; width: 1px; height: 12px; margin-right: 20px; background: currentColor; opacity: 0.25; vertical-align: -1px; } @media (max-width: 900px) { .ps-topbar__disclaimer::before { display: none; } } /* ── Astra-Header ersetzt (siehe pizzaschmiede_render_header() + header.css) ── Der eigentliche Astra-Header wird nicht mehr gestylt, sondern komplett ausgeblendet: er laeuft technisch weiter mit, ist aber unsichtbar. Unser Markup haengt per astra_header_before davor im DOM und uebernimmt visuell – exakt dasselbe Pattern wie beim Astra-Footer (siehe unten). */ #masthead.site-header { display: none !important; } /* ── Vertrauens-/Verkaufselemente (Phase 5) ── */ .ps-trust { list-style: none; margin: 0; padding: 0; } /* Produktseite: gestapelt unter dem Warenkorb-Button. Kompakt gehalten, damit die Reassurance direkt am Button (Lieferung/Zahlarten) im Fokus bleibt. */ .ps-trust--stacked { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ps-border); display: grid; grid-template-columns: 1fr 1fr; gap: 11px 18px; } .ps-trust--stacked .ps-trust__icon { width: 17px; height: 17px; } .ps-trust__item { display: flex; align-items: center; gap: 10px; } .ps-trust__icon { color: var(--ps-accent); flex: none; } .ps-trust__text { display: flex; flex-direction: column; line-height: 1.25; } .ps-trust__text strong { font-size: 13.5px; color: var(--ps-head); font-weight: 600; } .ps-trust__text small { font-size: 12px; color: var(--ps-muted); } /* Shop-Streifen: eine Reihe ueber dem Archiv. */ .ps-trust-strip { background: #fff; border: 1px solid var(--ps-border); border-radius: 6px; padding: 16px 26px; margin: 0 0 30px; width: 100%; } .ps-trust--inline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 24px; } .ps-trust--inline .ps-trust__item { flex: 1 1 200px; } @media (max-width: 600px) { .ps-trust--stacked { grid-template-columns: 1fr; } } /* Set-Inhalte auf der Produktseite (nur bei Set-Produkten sichtbar). margin-bottom spiegelt margin-top: sonst klebt die Lieferzeile direkt an der Unterkante der beigen Flaeche (faellt nur bei Set-Produkten auf, weil dieser Block sonst gar nicht rendert). */ .ps-set-includes { margin-top: 18px; margin-bottom: 18px; padding: 16px 18px; background: var(--ps-cream, #f4eee2); border-radius: 6px; } .ps-set-includes__title { display: block; font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ps-head); margin-bottom: 8px; } .ps-set-includes ul { list-style: none; margin: 0; padding: 0; } .ps-set-includes li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--ps-body, #3a3a3a); line-height: 1.6; } .ps-set-includes li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--ps-accent); } /* =========================================================================== Produktseite – Conversion-Elemente (Phase 5) --------------------------------------------------------------------------- Highlights unter dem Preis, Lager-/Lieferzeile und Zahlarten am Warenkorb- Button, dazu eine beim Scrollen einblendende Sticky-Kaufleiste. Markup in functions.php (woocommerce_single_product_summary / _add_to_cart_* Hooks). =========================================================================== */ /* ── Buy-Box: der Kaufbereich als abgesetzte Karte ── Hebt Preis + CTA + Reassurance von der cremefarbenen Seitenflaeche ab und buendelt alle Kaufsignale in einem Block. Markup: pizzaschmiede_buybox_open/ _close (Prio 11/36 in der Summary). */ .woocommerce div.product .ps-buybox { /* Eine Quelle fuer die Hoehe von Mengenfeld UND Button – so koennen die beiden nicht auseinanderlaufen. Ueber 44px = Tap-Target-Minimum. */ --ps-cta-h: 54px; background: #fff; border: 1px solid var(--ps-border); border-radius: 8px; padding: 22px 24px 20px; margin: 16px 0 18px; box-shadow: 0 2px 12px rgba(30, 26, 23, 0.05); } /* Preis in der Karte: der visuelle Anker. */ .woocommerce div.product .ps-buybox p.price, .woocommerce div.product .ps-buybox span.price { font-size: 30px; line-height: 1.1; margin-bottom: 12px; display: block; } .woocommerce div.product .ps-buybox p.price del { font-size: 19px; } /* Kurzbeschreibung in der Karte etwas ruhiger. */ .woocommerce div.product .ps-buybox .woocommerce-product-details__short-description { margin-bottom: 16px; color: var(--ps-muted); } /* Der CTA ist das visuell dominanteste Element der Seite. */ .woocommerce div.product .ps-buybox form.cart .button.single_add_to_cart_button { flex: 1; height: var(--ps-cta-h); min-height: var(--ps-cta-h); /* WICHTIG: Der Button erbt ein margin-bottom:16px. Flexbox zentriert die MARGIN-Boxen – dadurch sass der Button 8px (halbe Margin) hoeher als das Mengenfeld, was aussah, als waere das Feld zu hoch. Beide sind 54px. */ margin: 0; padding: 0 34px; font-size: 16px; font-weight: 500; line-height: 1; background: var(--ps-accent); box-shadow: 0 2px 10px rgba(139, 26, 26, 0.22); transition: background 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease; } .woocommerce div.product .ps-buybox form.cart .button.single_add_to_cart_button:hover { background: var(--ps-accent-dark); box-shadow: 0 4px 16px rgba(139, 26, 26, 0.3); } .woocommerce div.product .ps-buybox form.cart .button.single_add_to_cart_button:active { transform: translateY(1px); } /* Menge + CTA in einer Zeile, CTA nimmt den Rest. Achtung: der Zahlarten-Block haengt an woocommerce_after_add_to_cart_button und liegt damit INNERHALB des Formulars – er wuerde sonst als drittes Flex-Item neben dem Button landen. Daher wrap + volle Breite fuer .ps-pay. */ .woocommerce div.product .ps-buybox form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 0; } /* .quantity ist ein Block-Div mit inline-block-Input darin – die Kombination erzeugt je nach Browser einen Baseline-Versatz unter dem Feld, wodurch es hoeher wirkt als der Button. Als Flex-Container mit stretch kann der Input gar nicht mehr von der Containerhoehe abweichen. */ .woocommerce div.product .ps-buybox form.cart .quantity { flex: none; margin: 0; height: var(--ps-cta-h); display: flex; align-items: stretch; } .woocommerce div.product .ps-buybox form.cart .ps-pay { flex: 1 1 100%; margin: 4px 0 0; } .woocommerce div.product .ps-buybox form.cart .quantity .qty { /* Astra setzt auf input[type=number] global height:40px, padding:12px 16px, width:100% und einen Schatten – alles hier gezielt neutralisiert. */ height: auto; min-height: 0; align-self: stretch; width: 68px; margin: 0; padding: 0 6px; border: 1px solid var(--ps-border); border-radius: 2px; box-shadow: none; text-align: center; font-size: 15px; line-height: 1; box-sizing: border-box; } /* Sterne-Snippet direkt unter dem Titel (Social Proof ueber der Faltung). */ .woocommerce div.product .woocommerce-product-rating { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; } .woocommerce div.product .woocommerce-product-rating .star-rating { margin: 0; } .woocommerce div.product .woocommerce-product-rating .woocommerce-review-link { font-size: 13.5px; color: var(--ps-muted); text-decoration: none; border-bottom: 1px solid var(--ps-border); } .woocommerce div.product .woocommerce-product-rating .woocommerce-review-link:hover { color: var(--ps-accent); } /* Meta (Artikelnummer/Kategorie) sitzt ausserhalb der Karte – dezent. */ .woocommerce div.product .product_meta { font-size: 13px; color: var(--ps-muted); padding-top: 4px; } .woocommerce div.product .product_meta a { color: var(--ps-muted); } .woocommerce div.product .product_meta a:hover { color: var(--ps-accent); } @media (max-width: 600px) { .woocommerce div.product .ps-buybox { padding: 18px 16px 16px; } .woocommerce div.product .ps-buybox p.price, .woocommerce div.product .ps-buybox span.price { font-size: 26px; } /* Menge und CTA bleiben auch mobil in EINER Zeile. Liesse man den Button auf 100% umbrechen, bliebe das Mengenfeld allein in Zeile 1 zurueck und saesse um den gap-Wert versetzt. Bei 375px bleibt der Button ~267px breit – weit ueber dem 44px-Tap-Target. */ .woocommerce div.product .ps-buybox form.cart .quantity .qty { width: 60px; } .woocommerce div.product .ps-buybox form.cart .button.single_add_to_cart_button { padding: 0 16px; font-size: 15px; } } /* ── Produkt-Highlights (scannbare Stichpunkte) ── */ .woocommerce div.product .summary .ps-highlights { list-style: none; margin: 4px 0 20px; padding: 0; display: grid; gap: 9px; } .ps-highlights__item { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--ps-ink); } .ps-highlights__icon { color: var(--ps-green); flex: none; margin-top: 1px; } /* ── Lager-/Lieferzeile direkt ueber dem Button ── */ .woocommerce div.product .ps-delivery { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; font-size: 14.5px; line-height: 1.4; color: var(--ps-ink); } .ps-delivery svg { flex: none; margin-top: 1px; } .ps-delivery--in svg { color: var(--ps-green); } .ps-delivery--in strong { color: var(--ps-green); font-weight: 600; } .ps-delivery small { display: block; color: var(--ps-muted); font-size: 13px; margin-top: 2px; } .ps-delivery--out { color: var(--ps-muted); } .ps-delivery--out svg { color: var(--ps-muted); } /* ── Zahlarten + Sicherheitshinweis unter dem Button ── */ .ps-pay { margin: 16px 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .ps-pay__note { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ps-muted); } .ps-pay__note svg { color: var(--ps-green); flex: none; } .ps-pay__methods { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .ps-pay__methods li { font-size: 11.5px; font-weight: 600; letter-spacing: 0.3px; color: var(--ps-head); background: #fff; border: 1px solid var(--ps-border); border-radius: 3px; padding: 3px 8px; } /* ── Bewertungen ── */ /* Offener Hinweis, dass die Rezensionen Beispieldaten sind. */ .ps-demo-note { background: var(--ps-surface); border-left: 3px solid var(--ps-gold); border-radius: 0 4px 4px 0; padding: 12px 16px; margin: 0 0 26px; font-size: 13.5px; line-height: 1.6; color: var(--ps-muted); } .woocommerce #reviews .commentlist { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 16px; } .woocommerce #reviews .commentlist li.review { margin: 0; background: #fff; border: 1px solid var(--ps-border); border-radius: 6px; padding: 18px 20px; } .woocommerce #reviews .commentlist li .comment_container { display: flex; gap: 14px; align-items: flex-start; border: 0; padding: 0; background: transparent; } .woocommerce #reviews .commentlist li img.avatar { position: static; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ps-border); padding: 0; background: var(--ps-cream); float: none; flex: none; } .woocommerce #reviews .commentlist li .comment-text { margin: 0; border: 0; padding: 0; width: auto; flex: 1; min-width: 0; } .woocommerce #reviews .commentlist li .comment-text .star-rating { float: none; margin: 0 0 6px; font-size: 0.85em; } .woocommerce #reviews .commentlist li .comment-text p.meta { font-size: 13.5px; color: var(--ps-muted); margin: 0 0 8px; } .woocommerce #reviews .commentlist li .comment-text p.meta strong { color: var(--ps-head); font-weight: 600; font-size: 14.5px; } .woocommerce #reviews .commentlist li .comment-text .description p { font-size: 15px; line-height: 1.65; color: var(--ps-ink); margin: 0; } /* Bewertungsformular Astras woocommerce-grid.min.css setzt hier gezielt `.woocommerce-js div.product #reviews #review_form_wrapper{padding-left:0}` – mit ZWEI IDs (Spezifitaet 2-2-1). Ein schlichtes `.woocommerce #review_form_wrapper` (1-1-0) verliert dagegen, wodurch rechts 24px Innen- abstand standen und links keiner. Die Selektor-Struktur muss daher gespiegelt werden; brand.css laedt spaeter und gewinnt bei Gleichstand – kein !important noetig (Hausregel dieser Datei). */ .woocommerce-js div.product #reviews #review_form_wrapper, .woocommerce div.product #reviews #review_form_wrapper { background: #fff; border: 1px solid var(--ps-border); border-radius: 6px; padding: 22px 24px; } .woocommerce #review_form #respond p { margin-bottom: 12px; } .woocommerce #review_form #respond label { font-size: 14px; font-weight: 600; color: var(--ps-head); } .woocommerce #review_form #respond input[type="text"], .woocommerce #review_form #respond input[type="email"], .woocommerce #review_form #respond textarea { border: 1px solid var(--ps-border); border-radius: 3px; padding: 10px 12px; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; } /* ── Spec-Tabelle ("Weitere Informationen") ── Daten stammen aus Assets/Unternehmen/Produktkatalog.md (recherchiert, mit Quellen). Produkte ohne belastbare Angaben haben bewusst keine Attribute – WooCommerce blendet den Tab dann automatisch aus. */ .woocommerce div.product .shop_attributes { border: 1px solid var(--ps-border); border-radius: 6px; border-collapse: separate; border-spacing: 0; overflow: hidden; max-width: 620px; background: #fff; } .woocommerce div.product .shop_attributes th, .woocommerce div.product .shop_attributes td { border: 0; border-bottom: 1px solid var(--ps-border); padding: 12px 16px; font-size: 14.5px; line-height: 1.5; } .woocommerce div.product .shop_attributes tr:last-child th, .woocommerce div.product .shop_attributes tr:last-child td { border-bottom: 0; } .woocommerce div.product .shop_attributes th { width: 40%; background: var(--ps-surface); color: var(--ps-head); font-weight: 600; text-align: left; } .woocommerce div.product .shop_attributes td { color: var(--ps-ink); } .woocommerce div.product .shop_attributes td p { margin: 0; padding: 0; } /* ── Produkt-FAQ (nutzt die .ps-faq-Basis der Phase-3-Seiten) ── */ .ps-product-faq { margin-top: 46px; padding-top: 36px; border-top: 1px solid var(--ps-border); } .ps-product-faq > h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 24px; margin: 0 0 20px; } /* Die Basis-.ps-faq zentriert sich in 760px (margin:0 auto) – richtig auf den mittigen Phase-3-Seiten, falsch hier: Auf der Produktseite laeuft alles ueber die volle Inhaltsbreite. Beide Begrenzungen daher aufheben. */ .ps-product-faq .ps-faq { max-width: none; margin-left: 0; margin-right: 0; } /* ── Cross-Selling ("Passt dazu") deutlicher absetzen ── */ .woocommerce .related.products, .woocommerce .upsells.products { margin-top: 46px; padding-top: 36px; border-top: 1px solid var(--ps-border); } /* ── Sticky-Kaufleiste ── */ .ps-sticky-cart { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: #fff; border-top: 1px solid var(--ps-border); box-shadow: 0 -6px 24px rgba(30, 26, 23, 0.10); transform: translateY(100%); transition: transform 0.28s ease; pointer-events: none; } .ps-sticky-cart.is-visible { transform: translateY(0); pointer-events: auto; } .ps-sticky-cart__inner { max-width: 1200px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .ps-sticky-cart__info { display: flex; align-items: center; gap: 14px; min-width: 0; } .ps-sticky-cart__img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; background: var(--ps-cream); flex: none; } .ps-sticky-cart__meta { display: flex; flex-direction: column; min-width: 0; } .ps-sticky-cart__name { font-family: "Playfair Display", Georgia, serif; font-size: 16px; font-weight: 600; color: var(--ps-head); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ps-sticky-cart__price { font-size: 14px; color: var(--ps-accent); font-weight: 600; } .ps-sticky-cart__price del { color: var(--ps-muted); font-weight: 400; margin-right: 6px; } .ps-sticky-cart__price ins { text-decoration: none; } .woocommerce .ps-sticky-cart__btn, .ps-sticky-cart__btn { flex: none; background: var(--ps-accent); color: #fff; border: 0; border-radius: 2px; padding: 13px 28px; font-size: 14.5px; letter-spacing: 0.3px; cursor: pointer; transition: background 0.2s ease; } .woocommerce .ps-sticky-cart__btn:hover, .ps-sticky-cart__btn:hover { background: var(--ps-accent-dark); } @media (max-width: 600px) { .ps-sticky-cart__inner { padding: 9px 16px; gap: 12px; } .ps-sticky-cart__img { display: none; } .ps-sticky-cart__name { font-size: 15px; } .ps-sticky-cart__btn { padding: 12px 18px; font-size: 14px; } .ps-pay { gap: 8px 12px; } } /* ── Astra-Standardfooter ausblenden, eigener Marken-Footer stattdessen ── */ .site-footer { display: none !important; }