/* ============================================================================= WARENKORB — Feinschliff der klassischen Warenkorbseite ----------------------------------------------------------------------------- Lag bis zum 14.08.2026 im WPCode-Snippet „SPF Checkout-Politur (Cowork) — CSS" (KTM 275660, Husky 6086), dort sitewide im Kopf. Inhaltlich unveraendert uebernommen; geaendert wurden nur die vier fest eingetragenen Markenfarben, die jetzt ueber `--brand-accent` laufen und damit je Shop stimmen. GELTUNGSBEREICH: Diese Datei wird ausschliesslich auf der Warenkorbseite eingereiht (SPF_Checkout::enqueue). Alle Regeln setzen zusaetzlich auf `body.woocommerce-cart` auf — der zweite Riegel ist Absicht, damit ein spaeterer Umzug der Datei nicht stillschweigend andere Seiten trifft. NUR FUER DEN KLASSISCHEN WARENKORB. KTM laeuft auf dem Shortcode-Warenkorb, Husky auf dem Blocks-Warenkorb (`.wc-block-cart`) — dort greift hier nichts. Solange das so ist, sieht der Husky-Warenkorb anders aus als der von KTM. ============================================================================= */ /* ============================================================ SPF Checkout-Politur (Cowork, 21.07.2026) — v2 Ergänzt spf-cart.css/spf-checkout.css (Plugin spf-api-connector). Warenkorb: 1 Sticky-Summary · 2 EIN Code-Feld · 3 Summen-Zeilen · 4 Unfit ohne Ausgrauen · 5 Varianten-Meta · 6 PASST-Badges · 7 Stepper in Spalte · 8 Button-Höhe Kasse: 9 Doppelrahmen weg · 10 sauberer Radio-Punkt · 11 Radius Wandern diese Regeln in die Plugin-CSS: dieses Snippet löschen. ============================================================ */ /* 1) Rechte Spalte sticky — das JS-Snippet gleichen Namens verschiebt das Guthaben-Panel in .cart-collaterals und die Cross-Sells aus dem Grid-Container, damit die Spalte sauber davor endet. */ @media (min-width: 1024px){ body.woocommerce-cart .woocommerce > .cart-collaterals{ position: sticky; top: 96px; align-self: start; } } body.woocommerce-cart .cart-collaterals .spf-guthaben-panel{ margin: 14px 0 0; } /* 2) EIN Code-Feld: Woo-Coupon-Zeile ausblenden, die bso-Gutschein- Zeile wird DIE Code-Zeile des Panels. Sollen Woo-Coupons wieder sichtbar sein: die ersten zwei Regeln entfernen. */ body.woocommerce-cart .spf-guthaben-panel .spf-coupon-form{ display: none; } body.woocommerce-cart .spf-wallet-slot .bso-wallet-row > label{ display: none; } body.woocommerce-cart .spf-wallet-slot .bso-wallet-input{ display: flex; gap: 8px; } body.woocommerce-cart .spf-wallet-slot .bso-wallet-input input{ flex: 1; min-width: 0; min-height: 42px; padding: 0 13px; border: 1px solid var(--spfco-border, #d7d9dc); border-radius: 10px; background: var(--spfco-card, #fff); color: var(--spfco-ink, #16181c); font-size: 13.5px; } body.woocommerce-cart .spf-wallet-slot .bso-wallet-input .button{ min-height: 42px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--brand-accent, #ff6600); color: #fff; font-weight: 800; font-size: 12.5px; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; } @media (hover:hover){ body.woocommerce-cart .spf-wallet-slot .bso-wallet-input .button:hover{ background: var(--brand-accent-dark, #e65c00); }} body.spf-night.woocommerce-cart .spf-wallet-slot .bso-wallet-input input{ background: var(--spfco-card, #1a1c1e); border-color: var(--spfco-border, #33363a); color: var(--spfco-ink, #e8eaed); } /* 3) Summen-Zeilen: Label links, Wert rechts; Versand-Wert DARF umbrechen (nowrap erzeugte Überlappung bei schmalen Breiten) */ body.woocommerce-cart .cart_totals table th{ white-space: nowrap; vertical-align: top; padding-top: 11px; } body.woocommerce-cart .cart_totals table td{ text-align: right; } body.woocommerce-cart .cart_totals .woocommerce-shipping-totals td{ font-size: 12.5px; white-space: normal; line-height: 1.45; overflow-wrap: anywhere; } /* 4) Nicht passende Artikel: rote Kennzeichnung JA, Ausgrauen NEIN */ body.woocommerce-cart .spf-ci.spf-unfit{ opacity: 1; } body.woocommerce-cart .spf-ci.spf-unfit .spf-ci__title, body.woocommerce-cart .spf-ci.spf-unfit .spf-ci__title a, body.woocommerce-cart .spf-ci.spf-unfit .spf-ci__total{ color: var(--spfco-ink, #16181c); } body.spf-night.woocommerce-cart .spf-ci.spf-unfit .spf-ci__title, body.spf-night.woocommerce-cart .spf-ci.spf-unfit .spf-ci__title a, body.spf-night.woocommerce-cart .spf-ci.spf-unfit .spf-ci__total{ color: var(--spfco-ink, #e8eaed); } /* 5) Varianten-/Geschenkgutschein-Meta kompakt */ body.woocommerce-cart .spf-ci__name dl.variation{ display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 4px 0 0; font-size: 12px; color: var(--spfco-muted, #6b7280); } body.woocommerce-cart .spf-ci__name dl.variation dt{ font-weight: 600; margin: 0; } body.woocommerce-cart .spf-ci__name dl.variation dd{ margin: 0; } body.woocommerce-cart .spf-ci__name dl.variation dd p{ margin: 0; display: inline; } /* 6) Cross-Sells: PASST-Badge als ECHTES Element (JS injiziert .spf-xs-badge). Keine ::before-Eingriffe — die Karten nutzen ihre Pseudo-Elemente selbst (Hover-Linie!). */ body.woocommerce-cart .spf-crosssells .spfcard__imgwrap{ position: relative; } body.woocommerce-cart .spf-xs-badge{ position: absolute; top: 10px; left: 10px; z-index: 5; background: #22a447; color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; } /* 7) Mengen-Stepper bleibt in seiner Spalte (lief über den Preis) */ body.woocommerce-cart .spf-ci__qty{ width: 126px; justify-self: start; } body.woocommerce-cart .spf-ci__qty .quantity{ display: inline-flex; align-items: center; width: 126px; max-width: 126px; box-sizing: border-box; } body.woocommerce-cart .spf-ci__qty .quantity input.qty{ flex: 1 1 auto; min-width: 0; width: 40px; padding: 0 2px; } body.woocommerce-cart .spf-ci__qty .quantity .action{ flex: 0 0 32px; width: 32px; box-sizing: border-box; } /* 14) Mengen-Stepper symmetrisch & kompakt 112 statt 110 px seit dem 03.09.2026: Die zwei Pixel gehen an das Eingabefeld, das damit auf 44 px Trefferbreite kommt (29 + 44 + 29 = 102 nutzbar, siehe Rechnung in spf-cart.css). Die Spalte ist 126 px breit, der Platz ist also da. Knopfbreiten unveraendert. */ body.woocommerce-cart .spf-ci__qty{ width: 112px; } body.woocommerce-cart .spf-ci__qty .quantity{ width: 112px; max-width: 112px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: space-between; } body.woocommerce-cart .spf-ci__qty .quantity .action{ flex: 0 0 30px; width: 30px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; } body.woocommerce-cart .spf-ci__qty .quantity input.qty{ flex: 1 1 auto; min-width: 0; width: 34px; padding: 0; text-align: center; } /* ----------------------------------------------------------------------------- Leerer Warenkorb im Nachtmodus ----------------------------------------------------------------------------- Gefunden am 14.08.2026 beim Nachtmodus-Rundgang. WooCommerce gibt „Dein Warenkorb ist derzeit leer." in seiner eigenen `.woocommerce-info`-Box aus: heller Grund #f6f5f8, blauer 3-px-Balken links, keine Nachtfassung. Der Text kam bereits aus unserer Palette (`--spfco-muted`, im Nachtmodus ein helles Grau) — helles Grau auf hellem Grund, gemessen 2,43:1. Hier bekommt die Box denselben Grund und dieselbe Kante wie die uebrigen Flaechen der Kasse. Der Text bleibt gedaempft, steht damit aber auf #17181a statt auf Weiss. -------------------------------------------------------------------------- */ body.spf-night .cart-empty.woocommerce-info, html.spf-night .cart-empty.woocommerce-info{ background: var(--spfco-panel, #17181a) !important; border-color: var(--spfco-line-strong, #2a2d30); /* 10.09.2026: trug die Tagfarbe, auf Husky 1,57:1 gegen #17181a. */ border-left-color: var(--spf-brand-night, var(--brand-accent, #ff6600)); color: var(--spfco-ink, #e8eaed); border-radius: var(--spfco-r, 14px); }