/* ==========================================================================
   singlewing.de — Design-Spezifikation
   Aus der Design-Canvas extrahiert (Turn 2, Boards 2a–2l), 23.08.2026.

   ZWECK
   Die Runbooks beschreiben Inhalt und Struktur. Diese Datei beschreibt das
   AUSSEHEN — jeden Abstand, jede Schriftgröße, jede Farbe als konkreten Wert.
   Ohne sie muss der Umsetzende Abstände schätzen, und genau das ist bisher
   passiert.

   EINBAU
   Als eigene Datei ins Theme, NACH dem bestehenden Stylesheet laden:

     wp_enqueue_style('sw-design',
       get_stylesheet_directory_uri().'/css/design-spec.css',
       ['singlewing-main'], '1.0');

   Die Custom Properties sind die eigentliche Spezifikation. Die
   Komponentenklassen darunter sind Referenz-Implementierungen — wenn das Theme
   eigene Klassennamen hat, dort die gleichen Werte einsetzen.

   REGEL BEI KONFLIKTEN
   Nie einen Wert erfinden, der hier nicht steht. Fehlt einer, nachfragen.
   ========================================================================== */

:root {

  /* --- FARBEN ------------------------------------------------------------
     Sechs Farben, keine mehr. Jede hat genau eine Aufgabe.                */

  --sw-ink:        #1a1a1a;   /* Text, dunkle Flächen, dunkle Buttons       */
  --sw-green:      #8DC63F;   /* NUR die eine Kaufhandlung pro Ansicht      */
  --sw-green-text: #577b27;   /* Grün als TEXT (Preise, Links) — 4,6:1      */
  --sw-paper:      #f8f6f3;   /* Seitenhintergrund, Kartenrücken            */
  --sw-line:       #e8e4df;   /* Rahmen, Trennlinien                        */
  --sw-white:      #ffffff;   /* Karten                                     */

  /* Grautöne — Text nach Wichtigkeit */
  --sw-text-2:     #4a453f;   /* Fließtext                                  */
  --sw-text-3:     #6b6560;   /* Nebeninfo, Labels                          */
  --sw-text-4:     #8a837c;   /* Hinweise, deaktiviert                      */
  --sw-line-2:     #cfc9c1;   /* stärkerer Rahmen, gestrichelt              */
  --sw-line-3:     #f0ede9;   /* Trennlinie innerhalb einer Karte           */

  /* Fehler / Warnung */
  --sw-error-bg:   #fbf1ef;
  --sw-error-line: #e0b8b0;
  --sw-error-text: #7d3427;

  /* ⚠ KONTRAST-REGEL — nicht verhandelbar
     Weiße Schrift auf #8DC63F ergibt 2,04:1 und ist unlesbar.
     Grüne Flächen tragen IMMER dunkle Schrift (#1a1a1a).
     Grüne Schrift auf hell ist IMMER #577b27, nie #8DC63F.                */


  /* --- SCHRIFT -----------------------------------------------------------
     Open Sans, bereits im Theme. Gewichte 600 / 700 / 800.
     Größen sind absolut, nicht relativ — deshalb px.                      */

  --sw-font: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --sw-font-mono: ui-monospace, Menlo, monospace;   /* nur Codes, Slugs */

  --sw-h1:        30px;  /* Seitentitel, Produktname            w800 */
  --sw-h1-hero:   36px;  /* nur Hero und Bestellbestätigung     w800 */
  --sw-h2:        30px;  /* Abschnittstitel                     w800 */
  --sw-h3:        24px;  /* Karten-/Blocktitel                  w800 */
  --sw-lead:      18px;  /* Preis, Kartentitel                  w800 */
  --sw-body:      15px;  /* Fließtext                           w400 */
  --sw-body-s:    14px;  /* Nebentext, Buttons                  w600/700 */
  --sw-small:     13px;  /* Hinweise                            w400 */
  --sw-label:     12px;  /* Overline, IMMER uppercase           w800 */

  --sw-lh-tight:  1.2;   /* Überschriften */
  --sw-lh-body:   1.65;  /* Fließtext */
  --sw-lh-dense:  1.55;  /* mehrzeilige Labels */

  --sw-ls-h1:     -0.015em;  /* Überschriften enger */
  --sw-ls-hero:   -0.02em;
  --sw-ls-label:   0.12em;   /* Overlines weiter, 0.10–0.14em */

  /* MINDESTGRÖSSE: nichts unter 12px. 12px nur für uppercase-Labels und
     Monospace-Hinweise, niemals für Fließtext.                            */


  /* --- ABSTÄNDE ----------------------------------------------------------
     Eine Skala. Zwischenwerte gibt es nicht.                              */

  --sw-1:   4px;
  --sw-2:   6px;
  --sw-3:   8px;
  --sw-4:  10px;
  --sw-5:  12px;
  --sw-6:  14px;
  --sw-7:  16px;
  --sw-8:  18px;
  --sw-9:  20px;
  --sw-10: 22px;
  --sw-11: 24px;
  --sw-12: 26px;
  --sw-13: 28px;
  --sw-14: 32px;
  --sw-15: 36px;
  --sw-16: 40px;
  --sw-17: 48px;
  --sw-18: 56px;

  /* Die vier, die am häufigsten falsch gemacht werden: */
  --sw-page-x:      40px;   /* linker/rechter Seitenrand Desktop           */
  --sw-page-x-mob:  18px;   /* linker/rechter Seitenrand Mobil             */
  --sw-card-pad:    24px;   /* Innenabstand Karte (klein 16–20, groß 26–32)*/
  --sw-grid-gap:    24px;   /* Abstand zwischen Produktkarten              */

  /* Abstand zwischen zwei Seitensektionen: 56px.
     Zwischen Block und Überschrift darüber: 20–22px.
     Innerhalb eines Blocks zwischen Zeilen: 10–14px.                      */
  --sw-section-gap: 56px;


  /* --- MASSE -------------------------------------------------------------
     Höhen sind fix, nicht aus Padding gerechnet — sonst wandern sie.      */

  --sw-content-max:   1280px;  /* Inhaltsbreite                            */
  --sw-footer-max:    1360px;  /* Footer darf breiter                      */

  --sw-bar-h:         38px;    /* Ankündigungsleiste oben                  */
  --sw-header-h:      72px;    /* Header Desktop                           */
  --sw-header-h-mob:  64px;    /* Header Mobil                             */

  --sw-btn-h:         48px;    /* Standardbutton                           */
  --sw-btn-h-lg:      56px;    /* Hauptaktion (in den Warenkorb, Kasse)    */
  --sw-btn-h-sm:      42px;    /* in Karten                                */
  --sw-btn-h-mob:     52px;    /* Mobil — nie unter 44px                   */
  --sw-field-h:       48px;    /* Formularfeld                             */
  --sw-chip-h:        38px;    /* Filter-Chip, Badge-Pille                 */

  --sw-thumb:        110px;    /* Galerie-Vorschaubild                     */
  --sw-cart-thumb:   104px;    /* Produktbild im Warenkorb                 */

  /* MOBIL: kein Bedienelement unter 44px Höhe. Ausnahmslos.               */


  /* --- RADIEN ------------------------------------------------------------
     Drei Werte. Alles andere ist ein Fehler.                              */

  --sw-r-pill:  50px;   /* Buttons, Chips, Badges — ALLE                   */
  --sw-r-card:  12px;   /* Karten, Blöcke, Bilder                         */
  --sw-r-small:  6px;   /* Vorschaubilder, Formularfelder, Menüeinträge    */


  /* --- SCHATTEN ----------------------------------------------------------
     Warmer Ton (58,48,36), nie neutrales Schwarz.                         */

  --sw-shadow-card: 0 6px 18px rgba(58,48,36,0.06);   /* Produktkarte      */
  --sw-shadow-up:   0 -12px 26px rgba(58,48,36,0.12); /* fester Kaufbalken */
  --sw-shadow-pop:  0 20px 34px rgba(58,48,36,0.08);  /* Dropdown          */
}


/* ==========================================================================
   KOMPONENTEN — Referenz-Implementierung
   ========================================================================== */

/* --- Ankündigungsleiste ------------------------------------------------- */
.sw-announce {
  height: var(--sw-bar-h);
  background: var(--sw-ink);
  color: var(--sw-green);
  font-size: var(--sw-label);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sw-13);              /* 28px zwischen den Claims */
}

/* --- Header ------------------------------------------------------------- */
.sw-header {
  height: var(--sw-header-h);
  padding: 0 var(--sw-page-x);
  border-bottom: 1px solid var(--sw-line);
  background: var(--sw-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sw-16);
}
.sw-header__nav {
  display: flex;
  align-items: center;
  gap: var(--sw-11);              /* 24px zwischen Menüpunkten */
  font-size: var(--sw-body);
  font-weight: 600;
}
.sw-header__nav a[aria-current] {
  color: var(--sw-green-text);
  border-bottom: 2px solid var(--sw-green);
  padding-bottom: 3px;
}
.sw-header__tools { display: flex; align-items: center; gap: var(--sw-5); }

.sw-search {
  width: 230px;
  height: 40px;
  padding: 0 var(--sw-7);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-pill);
  background: var(--sw-paper);
  font-size: var(--sw-body-s);
  color: var(--sw-text-4);
}

/* Warenkorbzähler — grüner Chip auf dunklem Button, Text dunkel */
.sw-cart-count {
  min-width: 20px;
  height: 20px;
  padding: 0 var(--sw-2);
  border-radius: var(--sw-r-pill);
  background: var(--sw-green);
  color: var(--sw-ink);
  font-size: var(--sw-label);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 782px) {
  .sw-header { height: var(--sw-header-h-mob); padding: 0 var(--sw-page-x-mob); }
  /* Suche wandert unter den Header, volle Breite, 44px hoch */
  .sw-search { width: 100%; height: 44px; }
}

/* --- Buttons ------------------------------------------------------------- */
.sw-btn {
  height: var(--sw-btn-h);
  padding: 0 var(--sw-10);
  border-radius: var(--sw-r-pill);
  font-size: var(--sw-body-s);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
/* Hauptaktion — HÖCHSTENS EINE pro Ansicht */
.sw-btn--primary {
  background: var(--sw-green);
  color: var(--sw-ink);           /* niemals weiß */
  height: var(--sw-btn-h-lg);
  font-size: var(--sw-body);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sw-btn--dark      { background: var(--sw-ink); color: var(--sw-white); }
.sw-btn--secondary { background: transparent; color: var(--sw-ink);
                     border: 1px solid var(--sw-ink); }
.sw-btn--disabled  { background: #efece7; color: #a39c95; pointer-events: none; }
.sw-btn--sm        { height: var(--sw-btn-h-sm); font-size: var(--sw-small); }

@media (max-width: 782px) {
  .sw-btn, .sw-btn--sm { height: var(--sw-btn-h-mob); }
}

/* --- Karte -------------------------------------------------------------- */
.sw-card {
  background: var(--sw-white);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-card);
  padding: var(--sw-card-pad);
}

/* --- Produktkarte ------------------------------------------------------- */
.sw-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sw-grid-gap);
  max-width: var(--sw-content-max);
  margin: 0 auto;
}
@media (max-width: 1024px) { .sw-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:  782px) { .sw-product-grid { grid-template-columns: 1fr; gap: var(--sw-7); } }

.sw-product {
  background: var(--sw-white);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-card);
  overflow: hidden;
  box-shadow: var(--sw-shadow-card);
}
.sw-product__media { position: relative; height: 230px; }
.sw-product__body {
  padding: var(--sw-9);           /* 20px */
  display: flex;
  flex-direction: column;
  gap: 9px;                       /* enger als die Skala — Karteninneres */
}
.sw-product__eyebrow { font-size: var(--sw-label); color: var(--sw-text-3); font-weight: 600; }
.sw-product__title   { font-size: var(--sw-lead);  font-weight: 800; }
.sw-product__price   { font-size: var(--sw-lead);  font-weight: 800;
                       color: var(--sw-green-text); margin-top: var(--sw-1); }
.sw-product__vat     { font-size: var(--sw-label); color: var(--sw-text-3); }
.sw-product__cta     { margin-top: var(--sw-3); }

/* Badge — HÖCHSTENS EINER pro Karte, oben links, 12px Abstand */
.sw-badge {
  position: absolute;
  top: var(--sw-5);
  left: var(--sw-5);
  padding: 5px var(--sw-4);
  border-radius: var(--sw-r-pill);
  font-size: 11px;
  font-weight: 800;
  background: var(--sw-green);
  color: var(--sw-ink);
}
.sw-badge--dark { background: var(--sw-ink); color: var(--sw-green); }

/* --- Overline / Label --------------------------------------------------- */
.sw-overline {
  font-size: var(--sw-label);
  font-weight: 800;
  letter-spacing: var(--sw-ls-label);
  text-transform: uppercase;
  color: var(--sw-green-text);
}

/* --- Filterleiste — horizontal, NICHT als Sidebar ---------------------- */
.sw-filters {
  max-width: var(--sw-content-max);
  margin: 0 auto;
  background: var(--sw-white);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-card);
  padding: var(--sw-7) var(--sw-9);
  display: flex;
  align-items: center;
  gap: var(--sw-6);
  flex-wrap: wrap;
}
.sw-chip {
  height: var(--sw-chip-h);
  padding: 0 var(--sw-7);
  border-radius: var(--sw-r-pill);
  border: 1px solid var(--sw-line);
  background: var(--sw-paper);
  font-size: var(--sw-body-s);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--sw-3);
}
.sw-chip--active {
  background: var(--sw-ink);
  color: var(--sw-white);
  border-color: var(--sw-ink);
  font-weight: 700;
}

/* --- Sektion ------------------------------------------------------------ */
.sw-section {
  padding: var(--sw-section-gap) var(--sw-page-x);
  background: var(--sw-paper);
}
.sw-section__inner {
  max-width: var(--sw-content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sw-9);
}
.sw-section__title { font-size: var(--sw-h3); font-weight: 800; margin: 0; }

@media (max-width: 782px) {
  .sw-section { padding: var(--sw-14) var(--sw-page-x-mob); }
}

/* --- Vertrauenszeilen — grüner Punkt 8px, Lücke 11px ------------------- */
.sw-trust { display: flex; flex-direction: column; gap: var(--sw-4); }
.sw-trust__row {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: var(--sw-body-s);
  color: var(--sw-text-2);
}
.sw-trust__dot {
  flex: none;
  width: var(--sw-3);
  height: var(--sw-3);
  border-radius: var(--sw-r-pill);
  background: var(--sw-green);
}

/* --- Footer ------------------------------------------------------------- */
.sw-footer {
  background: var(--sw-ink);
  padding: 52px var(--sw-page-x) var(--sw-12);
  color: #c9c5bf;
  font-size: var(--sw-body-s);
}
.sw-footer__cols {
  max-width: var(--sw-footer-max);
  margin: 0 auto;
  display: flex;
  gap: 64px;
  align-items: flex-start;
}
.sw-footer__head {
  font-size: var(--sw-label);
  font-weight: 800;
  letter-spacing: var(--sw-ls-label);
  text-transform: uppercase;
  color: var(--sw-green);
  margin-bottom: var(--sw-5);
}
.sw-footer__list { line-height: 2; }
.sw-footer__bottom {
  max-width: var(--sw-footer-max);
  margin: var(--sw-14) auto 0;
  padding-top: var(--sw-10);
  border-top: 1px solid #3a3a36;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sw-14);
}
/* MwSt.-Hinweis — Pflicht, siehe Auftrag Aufgabe 3 */
.sw-vat-note { font-size: var(--sw-label); color: var(--sw-text-4); line-height: 1.7; margin: 0; }
.sw-vat-note a { color: #c9c5bf; border-bottom: 1px solid #3a3a36; text-decoration: none; }

.sw-pay { display: flex; gap: var(--sw-2); flex-wrap: wrap; }
.sw-pay img { height: 26px; }

@media (max-width: 782px) {
  .sw-footer__cols  { flex-direction: column; gap: var(--sw-13); }
  .sw-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sw-7); }
}

/* --- Links -------------------------------------------------------------- */
a { color: var(--sw-green-text); text-decoration: none; }
a:hover { color: var(--sw-ink); text-decoration: underline; }


/* ==========================================================================
   DIE FÜNF FEHLER, DIE IMMER PASSIEREN
   1  Weiße Schrift auf Grün. Grün trägt dunkle Schrift, immer.
   2  Mehr als ein grüner Button pro Ansicht. Grün = die eine Kaufhandlung.
   3  Eigene Radien. Es gibt drei: 50px, 12px, 6px.
   4  Bedienelemente unter 44px auf Mobil.
   5  Abstände geschätzt statt aus der Skala genommen.
      Seitenrand 40 / 18. Karteninneres 24. Kartenabstand 24. Sektion 56.
   ========================================================================== */


/* ==========================================================================
   ADDENDUM — STARTSEITE: BREITENSTEUERUNG
   Ermittelt im Inspektor, nicht geraten. Auf dieser Seite gibt es
   WEDER `.elementor-container` NOCH `.e-con-inner` (je 0 Vorkommen).
   Der reale Container ist `.e-con` / `.e-con-full`; seine Breite kommt aus
   Elementors frontend.min.css:
     :is(.elementor-section-wrap,[data-elementor-id]) > .e-con
     { max-width: min(100%, var(--width)) }   mit --width: 82.976%
   Deshalb wird hier --width ueberschrieben statt max-width — so bleibt
   Elementors eigene Regel intakt.
   ========================================================================== */

/* 1 · Ein Container fuer alles: 1280 px, zentriert, 40 px Seitenrand. */
/* Elementor setzt --width pro Element mit hoeherer Spezifitaet
   (.elementor-16 .elementor-element.elementor-element-XXXX = 0,3,0).
   Deshalb hier !important — der einzige Weg, ohne die generierte
   Element-ID fest zu verdrahten. */
:is(.elementor-section-wrap, [data-elementor-id]) > .e-con,
[data-elementor-id] > .e-con-full {
  --width: var(--sw-content-max) !important;
  margin-inline: auto;
  padding-inline: var(--sw-page-x);
  box-sizing: border-box;
}

/* Direkte Kinder des Containers sind Flex-Items und schrumpfen sonst auf
   Inhaltsbreite — daher volle Breite erzwingen. */
[data-elementor-id] > .e-con > * {
  width: 100%;
  min-width: 0;
}

@media (max-width: 782px) {
  :is(.elementor-section-wrap, [data-elementor-id]) > .e-con,
  [data-elementor-id] > .e-con-full {
    padding-inline: var(--sw-page-x-mob);
  }
}

/* 2 · Produktzeile der Startseite: Raster statt schrumpfendem Scroll-Flex.
      Die alte Regel setzte flex 0 0 200px und max-width 200px. */
.sw-home-products ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sw-grid-gap);
  overflow-x: visible;
  padding: 0;
  margin: 0;
  list-style: none;
}

.sw-home-products ul.products li.product {
  flex: initial !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}

/* 3 · Lesetexte begrenzen. Reale Klassen dieser Seite. */
.sw-faq,
.sw-hero-sub,
.sw-gutschein-sub {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

/* 4 · `.sw-badge` der Startseite ist KEIN Produktkarten-Badge.
      Die Regel weiter oben positioniert absolut — das riss die gruene Blase
      nach oben links. Nur innerhalb eines Kartenbildes darf sie absolut sein. */
.sw-badge {
  position: static;
}

.sw-product__media .sw-badge,
li.product .sw-badge {
  position: absolute;
}

/* 5 · Leermeldung nur zeigen, wenn wirklich nichts da ist. */
main:has(ul.products li.product) p.woocommerce-info {
  display: none;
}

/* 6 · Mindestschriftgroesse in den Sortiment-Karten. */
.sw-sortiment-sub,
.sw-sortiment-price,
.sw-b2b-sub {
  font-size: var(--sw-body-s);
}

/* 7 · Sammellink: eigene Trefferflaeche statt nackter Textzeile.
      Er stand nach dem Container-Fix mit 26 px unter der Mindestgroesse
      und wirkte zwischen den Karten verloren. */
.sw-sortiment-all {
  display: inline-flex;
  align-items: center;
  min-height: var(--sw-btn-h-sm);
  padding: 0 var(--sw-7);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-pill);
  background: var(--sw-white);
  font-size: var(--sw-body-s);
}

@media (max-width: 782px) {
  .sw-sortiment-all { min-height: var(--sw-btn-h-mob); width: 100%; justify-content: center; }
}

/* ==========================================================================
   WARENKORB (layout-fix2, Schritt 5)
   ========================================================================== */

/* W1b · Adresse unter der Abholung. */
.sw-pickup-address {
  display: block;
  margin: 2px 0 0 24px;
  font-size: var(--sw-small);
  color: var(--sw-text-3);
  line-height: var(--sw-lh-dense);
}

/* W1c · Hinweis statt Balken bei Abholung. */
.sw-ship-pickup .sw-ship-headline { margin: 0; }

/* W2 · Cross-Sell: eine Karte pro Zeile, Bild links, Text rechts. */
.woocommerce .cross-sells ul.products {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: var(--sw-6);
}

.woocommerce .cross-sells ul.products li.product {
  display: grid !important;
  grid-template-columns: 88px 1fr;
  gap: var(--sw-6);
  align-items: center;
  padding: var(--sw-5);
  max-width: none !important;
  min-width: 0 !important;
}

.woocommerce .cross-sells ul.products li.product a img {
  width: 88px;
  height: 88px;
  border-radius: var(--sw-r-small);
  margin: 0;
}

/* Alle Textzeilen der Karte in die rechte Spalte, ohne Beschnitt. */
.woocommerce .cross-sells ul.products li.product > :not(a:first-child) {
  grid-column: 2;
  padding-inline: 0;
}

.woocommerce .cross-sells ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--sw-body-s);
  line-height: var(--sw-lh-dense);
  white-space: normal;
  overflow: visible;
}

.woocommerce .cross-sells ul.products li.product .button {
  justify-self: start;
  padding-inline: var(--sw-7);
  white-space: nowrap;
}

/* Auf der schmalen Karte sind Formatzeile, Chips und MwSt.-Zeile zu viel. */
.woocommerce .cross-sells .sw-card-format,
.woocommerce .cross-sells .sw-card-sizes,
.woocommerce .cross-sells .sw-card-tax,
.woocommerce .cross-sells .sw-card-flag { display: none; }

.woocommerce .cross-sells h2 { font-size: var(--sw-lead); margin-bottom: var(--sw-1); }

.sw-crosssell-sub {
  margin: 0 0 var(--sw-7);
  font-size: var(--sw-body-s);
  color: var(--sw-text-3);
}

/* W4 · Vorschlaege stehen jetzt links unter der Artikelliste. */
.woocommerce-cart .cross-sells {
  margin-top: var(--sw-14);
  max-width: var(--sw-content-max);
}

/* W5 · MwSt.-Zeile im Summenblock. */
.sw-vat-row td { padding-top: 0 !important; }
.sw-vat-row .sw-vat-note {
  font-size: var(--sw-label);
  color: var(--sw-text-4);
  line-height: 1.7;
}

/* W5 · Vertrauenszeilen unter dem Kasse-Button. */
.sw-cart-trust {
  display: flex;
  flex-direction: column;
  gap: var(--sw-4);
  margin-top: var(--sw-7);
}

.sw-cart-trust .sw-trust__row {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: var(--sw-body-s);
  color: var(--sw-text-2);
}

/* W5 · Mengensteller als Pille, 44 px hoch. */
.woocommerce-cart-form .quantity.sw-qty {
  display: inline-flex;
  align-items: center;
  height: 44px;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-pill);
  background: var(--sw-white);
  overflow: hidden;
}

.sw-qty .sw-qty-btn {
  width: 40px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--sw-ink);
  font-size: var(--sw-lead);
  line-height: 1;
  cursor: pointer;
}

.sw-qty .sw-qty-btn:hover { background: var(--sw-paper); }

.sw-qty input.qty {
  width: 34px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  font-size: var(--sw-body-s);
  font-weight: 700;
  -moz-appearance: textfield;
}

.sw-qty input.qty::-webkit-outer-spin-button,
.sw-qty input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}