/* ==========================================================================
   Sanquell · Warenkorb

   Gestaltet die Ausgabe von [woocommerce_cart] in der Sprache der
   Produktseite: Bitter für Überschriften und Beträge, Public Sans für den
   Fließtext, IBM Plex Mono für Beschriftungen. Farben, Linien und Maße sind
   dieselben wie in assets/sq-product.css.

   Es wird keine WooCommerce-Vorlage ersetzt. Alle Regeln greifen an dem
   Markup an, das WooCommerce, Germanized und die Zahlungs-Plugins ohnehin
   ausgeben. Fällt diese Datei aus, bleibt der Warenkorb vollständig
   bedienbar — er sieht dann nur wieder aus wie vorher.

   Geladen über inc/sq-warenkorb.php, ausschließlich auf der Warenkorbseite.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Schriften — dieselben Dateien wie auf der Produktseite, selbst gehostet.
   Die Angaben stehen hier noch einmal, weil sq-product.css auf der
   Warenkorbseite nicht geladen wird. Beide Dateien liegen in assets/,
   die relativen Pfade stimmen deshalb unverändert.
   ------------------------------------------------------------------------ */
@font-face{
  font-family:"Bitter";
  src:url("fonts/Bitter-latin.woff2") format("woff2");
  font-weight:500 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Public Sans";
  src:url("fonts/PublicSans-latin.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/IBMPlexMono-500-latin.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------------------------------------------------------------------------
   1 · Rahmen und Raster

   Der Shortcode gibt vier Geschwister aus: Hinweise, Formular,
   .cart-collaterals und ein Feld der Zahlungsanbieter. Die Collaterals
   werden mit display:contents aufgelöst, damit Empfehlungen und Summe
   eigenständig im Raster stehen: Positionen links, Summe rechts,
   Empfehlungen über die volle Breite darunter.

   Die Tokens hängen an .woocommerce, nicht am body. So können sie nicht in
   den Kopfbereich oder die Fußzeile durchschlagen, die eigene --sq-Werte
   mitbringen.
   ------------------------------------------------------------------------ */
body.woocommerce-cart .woocommerce{
  --sq-gold:#A9812E;
  --sq-gold-d:#8C6A22;
  --sq-gold-bg:#FAF6EC;
  --sq-kauf:#B3271E;
  --sq-kauf-h:#8F1E17;
  --sq-navy:#12172A;
  --sq-navy-2:#1B2A4A;
  --sq-ink:#1F2937;
  --sq-ink-2:#4B5563;
  --sq-ink-3:#6B7280;
  --sq-linie:#D7E1EC;
  --sq-linie-2:#EDF1F6;
  --sq-flaeche:#F3F5F9;
  --sq-ok:#1F7A45;

  --sq-breite:1280px;
  --sq-rand:1.25rem;

  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(17rem,23rem);
  column-gap:2.75rem;
  align-items:start;

  max-width:var(--sq-breite);
  margin:0 auto;
  padding:2.5rem var(--sq-rand) 4rem;

  font-family:"Public Sans",-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--sq-ink);
}
body.woocommerce-cart .woocommerce *,
body.woocommerce-cart .woocommerce *::before,
body.woocommerce-cart .woocommerce *::after{box-sizing:border-box}

/* Alles, was hier sonst noch landet — von Plugins ergänzte Felder etwa —
   nimmt die volle Breite, statt das Raster zu zerlegen. */
body.woocommerce-cart .woocommerce > *{grid-column:1 / -1;min-width:0}

body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper{grid-row:1}
body.woocommerce-cart .woocommerce > .sq-korb__kopf{grid-row:2}
body.woocommerce-cart .woocommerce > .woocommerce-cart-form{grid-column:1;grid-row:3}
body.woocommerce-cart .woocommerce > .cart-collaterals{display:contents}
body.woocommerce-cart .woocommerce .cart_totals{grid-column:2;grid-row:3}
body.woocommerce-cart .woocommerce .cross-sells{grid-column:1 / -1;grid-row:4}
body.woocommerce-cart .woocommerce > wc-order-attribution-inputs{display:none}

/* Schriften im ganzen Bereich verbindlich. Theme und Elementor setzen für
   Seiteninhalte eigene Familien; ohne diese Zeilen mischt sich Sofia
   zwischen die Tabellenzellen. */
body.woocommerce-cart .woocommerce p,
body.woocommerce-cart .woocommerce li,
body.woocommerce-cart .woocommerce td,
body.woocommerce-cart .woocommerce th,
body.woocommerce-cart .woocommerce span,
body.woocommerce-cart .woocommerce a,
body.woocommerce-cart .woocommerce strong,
body.woocommerce-cart .woocommerce small,
body.woocommerce-cart .woocommerce label,
body.woocommerce-cart .woocommerce button,
body.woocommerce-cart .woocommerce input,
body.woocommerce-cart .woocommerce select{
  font-family:"Public Sans",-apple-system,"Segoe UI",Arial,sans-serif;
}
body.woocommerce-cart .woocommerce h1,
body.woocommerce-cart .woocommerce h2,
body.woocommerce-cart .woocommerce h3{
  font-family:Bitter,Georgia,"Times New Roman",serif;
  font-weight:600;
  color:var(--sq-navy);
  letter-spacing:-.01em;
  text-transform:none;
  text-wrap:balance;
  margin:0;
}
body.woocommerce-cart .woocommerce img{max-width:100%;height:auto}
body.woocommerce-cart .woocommerce :focus-visible{outline:2px solid var(--sq-gold);outline-offset:2px}

/* ---------------------------------------------------------------------------
   2 · Seitenkopf

   Das Markup liefert inc/sq-warenkorb.php. Fehlt es, bleibt der Rest
   unberührt — die Regeln greifen dann einfach ins Leere.
   ------------------------------------------------------------------------ */
.sq-korb__kopf{display:flex;flex-direction:column;gap:.45rem;margin:0 0 2rem}
.sq-korb__eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  font-size:.7rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sq-gold-d);
}
body.woocommerce-cart .woocommerce .sq-korb__titel{
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.15;
}
.sq-korb__rule{border:0;border-top:2px solid var(--sq-gold);width:44px;margin:.15rem 0 .1rem}
.sq-korb__hinweis{margin:0;font-size:.88rem;color:var(--sq-ink-3);max-width:52ch}

/* ---------------------------------------------------------------------------
   3 · Hinweise

   WooCommerce, Germanized und die Gutscheinlogik melden sich über dieselben
   drei Kästen. Sie bekommen die ruhige Fassung der Produktseite: heller
   Grund, feine Linie, farbige Kante links.
   ------------------------------------------------------------------------ */
body.woocommerce-cart .woocommerce .woocommerce-message,
body.woocommerce-cart .woocommerce .woocommerce-info,
body.woocommerce-cart .woocommerce .woocommerce-error{
  list-style:none;
  border:1px solid var(--sq-linie);
  border-left:3px solid var(--sq-ok);
  background:#fff;
  color:var(--sq-ink);
  font-size:.92rem;
  line-height:1.5;
  padding:.85rem 1rem;
  margin:0 0 1.5rem;
  border-radius:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
}
body.woocommerce-cart .woocommerce .woocommerce-message::before,
body.woocommerce-cart .woocommerce .woocommerce-info::before,
body.woocommerce-cart .woocommerce .woocommerce-error::before{display:none}
body.woocommerce-cart .woocommerce .woocommerce-info{border-left-color:var(--sq-gold)}
body.woocommerce-cart .woocommerce .woocommerce-error{border-left-color:var(--sq-kauf)}
body.woocommerce-cart .woocommerce .woocommerce-message .button{margin-left:auto}

/* ---------------------------------------------------------------------------
   4 · Positionsliste

   Aus der Tabelle wird eine Liste mit Haarlinien. Die Tabellenstruktur
   bleibt erhalten, damit Screenreader die Zuordnung Spalte/Wert behalten
   und die Mengenfelder weiter über cart[…][qty] gesendet werden.
   ------------------------------------------------------------------------ */
body.woocommerce-cart .woocommerce-cart-form{margin:0}
body.woocommerce-cart .woocommerce table.cart{
  width:100%;
  /* Feste Spaltenbreiten. Ohne sie verteilt der Browser die Breite nach dem
     Inhalt — die Zeile mit Gutschein und Knoepfen spannt ueber alle sechs
     Spalten und zerrt die Tabelle dann breiter als ihre Spalte. */
  table-layout:fixed;
  border:0;
  border-collapse:collapse;
  margin:0;
  background:transparent;
  font-size:.95rem;
}
body.woocommerce-cart .woocommerce table.cart th,
body.woocommerce-cart .woocommerce table.cart td{
  border:0;
  background:transparent;
  padding:1.1rem .75rem;
  vertical-align:middle;
}

/* Kopfzeile als Beschriftung, nicht als Balken. */
body.woocommerce-cart .woocommerce table.cart thead th{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.68rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sq-ink-3);
  text-align:left;
  padding:0 .75rem .7rem;
  border-bottom:1px solid var(--sq-linie);
}
body.woocommerce-cart .woocommerce table.cart thead th.product-price,
body.woocommerce-cart .woocommerce table.cart thead th.product-subtotal{text-align:right}
body.woocommerce-cart .woocommerce table.cart thead th.product-quantity{text-align:center}

body.woocommerce-cart .woocommerce tr.cart_item td{border-bottom:1px solid var(--sq-linie-2)}

/* Spaltenbreiten: Bild und Zahlen fest, der Name nimmt den Rest.
   Bei table-layout:fixed entscheidet die erste Zeile — deshalb stehen die
   Masse an den Zellen der Kopfzeile. */
body.woocommerce-cart .woocommerce table.cart th.product-remove{width:2.75rem}
body.woocommerce-cart .woocommerce table.cart th.product-thumbnail{width:5.5rem}
body.woocommerce-cart .woocommerce table.cart th.product-name{width:auto}
body.woocommerce-cart .woocommerce table.cart th.product-price{width:6.5rem}
body.woocommerce-cart .woocommerce table.cart th.product-quantity{width:6.5rem}
body.woocommerce-cart .woocommerce table.cart th.product-subtotal{width:7.5rem}

body.woocommerce-cart .woocommerce table.cart .product-remove{padding-left:0;padding-right:0}
body.woocommerce-cart .woocommerce table.cart .product-price,
body.woocommerce-cart .woocommerce table.cart .product-subtotal{text-align:right}
body.woocommerce-cart .woocommerce table.cart .product-quantity{text-align:center}
/* Lange Produktnamen duerfen die Spalte nicht sprengen. */
body.woocommerce-cart .woocommerce td.product-name{overflow-wrap:anywhere}

/* Entfernen — unauffällig, bis der Zeiger darauf steht. */
body.woocommerce-cart .woocommerce td.product-remove a.remove{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  font-size:20px;line-height:1;font-weight:400;
  color:var(--sq-ink-3);
  background:transparent;
  border:1px solid transparent;
  border-radius:50%;
  text-decoration:none;
  transition:color .15s,border-color .15s,background .15s;
}
body.woocommerce-cart .woocommerce td.product-remove a.remove:hover,
body.woocommerce-cart .woocommerce td.product-remove a.remove:focus{
  color:var(--sq-kauf)!important;
  background:#fff!important;
  border-color:var(--sq-linie);
}

body.woocommerce-cart .woocommerce td.product-thumbnail img{
  width:72px;height:auto;
  border:1px solid var(--sq-linie);
  background:#fff;
  border-radius:0;
}

body.woocommerce-cart .woocommerce td.product-name{color:var(--sq-ink-2)}
body.woocommerce-cart .woocommerce td.product-name > a{
  display:inline-block;
  font-family:Bitter,Georgia,serif;
  font-size:1rem;font-weight:600;line-height:1.3;
  color:var(--sq-navy);
  text-decoration:none;
  max-width:44ch;
}
body.woocommerce-cart .woocommerce td.product-name > a:hover{color:var(--sq-gold-d);text-decoration:underline}
body.woocommerce-cart .woocommerce td.product-name .variation{
  margin:.35rem 0 0;font-size:.8rem;color:var(--sq-ink-3);
}

/* Germanized: Lieferzeit und Kurztext unter dem Namen — als Fußzeile der
   Position gesetzt, genau wie unter dem Preis auf der Produktseite. */
body.woocommerce-cart .woocommerce td.product-name .wc-gzd-cart-info,
body.woocommerce-cart .woocommerce td.product-name .wc-gzd-item-desc,
body.woocommerce-cart .woocommerce td.product-name .wc-gzd-item-desc p{
  display:block;
  font-size:.78rem;font-weight:400;font-style:normal;
  line-height:1.5;color:var(--sq-ink-3);
  margin:.3rem 0 0;
}
body.woocommerce-cart .woocommerce td.product-name .delivery-time-data{color:var(--sq-ink-2);font-weight:600}

body.woocommerce-cart .woocommerce td.product-price{
  color:var(--sq-ink-2);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
body.woocommerce-cart .woocommerce td.product-subtotal{
  font-family:Bitter,Georgia,serif;
  font-size:1.05rem;font-weight:600;
  color:var(--sq-navy);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Mengenfeld. Der Seiteninhalt bringt eine eigene Regel für input[type=number]
   mit (volle Breite, 3em hoch, grauer Rand). Die Auswahl hier ist gezielter
   und sticht sie deshalb, ohne !important. */
body.woocommerce-cart .woocommerce td.product-quantity .quantity{display:inline-flex;margin:0}
body.woocommerce-cart .woocommerce td.product-quantity .quantity input.qty{
  width:5rem;height:44px;
  padding:0 .25rem;
  text-align:center;
  font-size:.95rem;font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--sq-navy);
  border:1px solid var(--sq-linie);
  border-radius:0;
  background:#fff;
  transition:border-color .15s;
}
body.woocommerce-cart .woocommerce td.product-quantity .quantity input.qty:focus{
  border-color:var(--sq-navy-2);
  outline:none;
  box-shadow:inset 0 0 0 1px var(--sq-navy-2);
}

/* ---------------------------------------------------------------------------
   5 · Zeile unter der Liste: Gutschein, Aktualisieren, Teilen
   ------------------------------------------------------------------------ */
/* Die Zelle bleibt eine Tabellenzelle. Bekaeme sie display:flex, waere sie
   keine Zelle mehr — der Browser legt dann eine unsichtbare Zelle darum, und
   die erbt bei table-layout:fixed die Breite der ersten Spalte. Deshalb hier
   Floats: Gutschein links, die uebrigen Knoepfe rechts. */
body.woocommerce-cart .woocommerce td.actions{
  padding:1.4rem 0 0;
  border:0;
  text-align:left;
}
body.woocommerce-cart .woocommerce td.actions::after{content:"";display:block;clear:both}
body.woocommerce-cart .woocommerce td.actions .coupon{
  float:left;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:0;
}
body.woocommerce-cart .woocommerce td.actions > button,
body.woocommerce-cart .woocommerce td.actions > .button{float:right;margin-left:.5rem}
body.woocommerce-cart .woocommerce td.actions .coupon input#coupon_code{
  width:11rem;height:44px;
  padding:0 .75rem;
  font-size:.9rem;
  border:1px solid var(--sq-linie);
  border-radius:0;
  background:#fff;
  color:var(--sq-ink);
}
body.woocommerce-cart .woocommerce td.actions .coupon input#coupon_code::placeholder{color:var(--sq-ink-3)}

/* Alle Knöpfe dieser Zeile in der zurückhaltenden Fassung: weißer Grund,
   feine Linie. Der einzige starke Knopf der Seite ist „Weiter zur Kasse“. */
body.woocommerce-cart .woocommerce td.actions .button,
body.woocommerce-cart .woocommerce td.actions button{
  height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 1rem!important;
  font-size:.88rem!important;font-weight:600!important;
  letter-spacing:0;text-transform:none;
  color:var(--sq-ink-2)!important;
  background:#fff!important;
  border:1px solid var(--sq-linie)!important;
  border-radius:0!important;
  box-shadow:none!important;
  text-decoration:none;
  transition:border-color .15s,color .15s,background .15s;
}
body.woocommerce-cart .woocommerce td.actions .button:hover:not(:disabled),
body.woocommerce-cart .woocommerce td.actions button:hover:not(:disabled){
  background:var(--sq-flaeche)!important;
  border-color:var(--sq-navy-2)!important;
  color:var(--sq-navy)!important;
}
body.woocommerce-cart .woocommerce td.actions button:disabled{opacity:.45;cursor:default}
body.woocommerce-cart .woocommerce td.actions .wpcss-btn.button{border-style:solid!important}

/* ---------------------------------------------------------------------------
   6 · Summe

   Dasselbe Bauteil wie der Kaufblock der Produktseite: heller Grund, feine
   Linie, goldene Oberkante. Bleibt beim Scrollen stehen, damit der Weg zur
   Kasse bei langen Listen sichtbar ist.
   ------------------------------------------------------------------------ */
body.woocommerce-cart .woocommerce .cart_totals{
  position:sticky;
  top:6rem;
  width:100%;
  float:none;
  border:1px solid var(--sq-linie);
  border-top:3px solid var(--sq-gold);
  background:var(--sq-flaeche);
  padding:1.25rem;
}
body.woocommerce-cart .woocommerce .cart_totals > h2{
  font-size:1.15rem;line-height:1.25;
  text-transform:none;
  margin:0 0 .9rem;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--sq-linie);
}
body.woocommerce-cart .woocommerce .cart_totals table.shop_table{
  width:100%;margin:0;border:0;border-collapse:collapse;background:transparent;font-size:.92rem;
}
body.woocommerce-cart .woocommerce .cart_totals table.shop_table th,
body.woocommerce-cart .woocommerce .cart_totals table.shop_table td{
  border:0;background:transparent;padding:.5rem 0;vertical-align:top;
}
body.woocommerce-cart .woocommerce .cart_totals table.shop_table th{
  width:7rem;
  font-weight:400;color:var(--sq-ink-2);text-align:left;
}
body.woocommerce-cart .woocommerce .cart_totals table.shop_table td{
  text-align:right;color:var(--sq-ink);font-variant-numeric:tabular-nums;
}
body.woocommerce-cart .woocommerce .cart_totals tr.order-total th,
body.woocommerce-cart .woocommerce .cart_totals tr.order-total td{
  padding-top:.9rem;
  border-top:1px solid var(--sq-linie);
}
body.woocommerce-cart .woocommerce .cart_totals tr.order-total th{
  font-family:Bitter,Georgia,serif;font-size:1rem;font-weight:600;color:var(--sq-navy);
}
body.woocommerce-cart .woocommerce .cart_totals tr.order-total td strong,
body.woocommerce-cart .woocommerce .cart_totals tr.order-total td .amount{
  font-family:Bitter,Georgia,serif;
  font-size:1.5rem;font-weight:600;line-height:1.15;
  color:var(--sq-navy);
}
body.woocommerce-cart .woocommerce .cart_totals tr.order-total .includes_tax{
  display:block;margin-top:.15rem;
  font-size:.75rem;font-weight:400;color:var(--sq-ink-3);
}
body.woocommerce-cart .woocommerce .cart_totals tr.order-tax th,
body.woocommerce-cart .woocommerce .cart_totals tr.order-tax td{
  font-size:.8rem;color:var(--sq-ink-3);padding-top:.2rem;
}

/* Versandart und Lieferanschrift */
body.woocommerce-cart .woocommerce .woocommerce-shipping-methods{list-style:none;margin:0;padding:0}
body.woocommerce-cart .woocommerce .woocommerce-shipping-methods li{margin:0 0 .3rem;text-align:right}
body.woocommerce-cart .woocommerce .woocommerce-shipping-methods label{
  font-size:.88rem;color:var(--sq-ink);cursor:pointer;
}
body.woocommerce-cart .woocommerce .woocommerce-shipping-destination{
  margin:.3rem 0 0;font-size:.78rem;line-height:1.45;color:var(--sq-ink-3);
}
body.woocommerce-cart .woocommerce .woocommerce-shipping-destination strong{color:var(--sq-ink-2);font-weight:600}
body.woocommerce-cart .woocommerce a.shipping-calculator-button{
  display:inline-block;margin-top:.35rem;
  font-size:.78rem;color:var(--sq-ink-2);text-decoration:underline;text-underline-offset:2px;
}
body.woocommerce-cart .woocommerce a.shipping-calculator-button:hover{color:var(--sq-navy)}

/* Rechner für die Anschrift */
body.woocommerce-cart .woocommerce .shipping-calculator-form{
  margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--sq-linie);text-align:left;
}
body.woocommerce-cart .woocommerce .shipping-calculator-form .form-row{margin:0 0 .6rem;padding:0}
body.woocommerce-cart .woocommerce .shipping-calculator-form label{
  display:block;margin-bottom:.25rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.66rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sq-ink-3);
}
body.woocommerce-cart .woocommerce .shipping-calculator-form .form-row input.input-text,
body.woocommerce-cart .woocommerce .shipping-calculator-form .form-row select{
  width:100%;height:42px;
  padding:0 .6rem;
  font-size:.9rem;
  color:var(--sq-ink);
  border:1px solid var(--sq-linie);
  border-radius:0;
  background:#fff;
}
body.woocommerce-cart .woocommerce .shipping-calculator-form .button{
  width:100%;height:42px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.88rem!important;font-weight:600!important;
  color:var(--sq-ink-2)!important;
  background:#fff!important;
  border:1px solid var(--sq-linie)!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body.woocommerce-cart .woocommerce .shipping-calculator-form .button:hover{
  background:var(--sq-flaeche)!important;border-color:var(--sq-navy-2)!important;color:var(--sq-navy)!important;
}

/* ---------------------------------------------------------------------------
   7 · Weg zur Kasse

   Im Quelltext stehen die Sofortzahlungen vor dem Kassenknopf. Sichtbar
   kommt zuerst der Hauptweg, darunter „ODER“ und die Sofortzahlungen. Die
   Reihenfolge im Markup bleibt unberührt, damit die Plugins ihre Elemente
   weiter finden.
   ------------------------------------------------------------------------ */
body.woocommerce-cart .woocommerce .wc-proceed-to-checkout{
  display:flex;flex-direction:column;gap:.65rem;
  margin:1.2rem 0 0;padding:1.1rem 0 0;
  border-top:1px solid var(--sq-linie);
}
body.woocommerce-cart .woocommerce .wc-proceed-to-checkout > *{margin:0!important;width:100%}
body.woocommerce-cart .woocommerce .wc-proceed-to-checkout > a.checkout-button{order:1}
body.woocommerce-cart .woocommerce .wc-proceed-to-checkout > .fkwcs_stripe_smart_button_wrapper{order:2}
body.woocommerce-cart .woocommerce .wc-proceed-to-checkout > .ppcp-messages{order:3}
body.woocommerce-cart .woocommerce .wc-proceed-to-checkout > .ppc-button-wrapper{order:4}
body.woocommerce-cart .woocommerce .wc-proceed-to-checkout > .wcpay-express-checkout-wrapper{order:5}

body.woocommerce-cart .woocommerce a.checkout-button{
  display:flex;align-items:center;justify-content:center;
  min-height:52px;
  padding:1rem 1.5rem!important;
  font-size:1rem!important;font-weight:700!important;
  letter-spacing:.01em;text-transform:none;text-decoration:none;
  color:#fff!important;
  background:var(--sq-kauf)!important;
  border:1px solid var(--sq-kauf)!important;
  border-radius:2px!important;
  box-shadow:none!important;
  transition:background .15s,border-color .15s;
}
body.woocommerce-cart .woocommerce a.checkout-button:hover{
  background:var(--sq-kauf-h)!important;border-color:var(--sq-kauf-h)!important;color:#fff!important;
}
body.woocommerce-cart .woocommerce a.checkout-button:focus-visible{outline:3px solid var(--sq-navy);outline-offset:2px}

/* Sofortzahlungen. FunnelKit schreibt Maße direkt ins style-Attribut des
   Knopfs — die Werte hier müssen deshalb mit !important nachziehen. */
body.woocommerce-cart .woocommerce #fkwcs_stripe_smart_button{display:flex;flex-direction:column;gap:.65rem}
body.woocommerce-cart .woocommerce #fkwcs-payment-request-separator{order:-1;margin:0}
body.woocommerce-cart .woocommerce #fkwcs-payment-request-separator label{
  display:flex;align-items:center;gap:.75rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.66rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sq-ink-3);
}
body.woocommerce-cart .woocommerce #fkwcs-payment-request-separator label::before,
body.woocommerce-cart .woocommerce #fkwcs-payment-request-separator label::after{
  content:"";flex:1;height:1px;background:var(--sq-linie);
}
body.woocommerce-cart .woocommerce .fkwcs_smart_buttons{
  width:100%;
  min-height:48px!important;max-height:48px!important;
  padding:0 1rem!important;
  font-size:.95rem!important;
  line-height:1.2!important;
  border-radius:2px!important;
  box-shadow:none!important;
}
body.woocommerce-cart .woocommerce .ppcp-messages{min-height:0}
body.woocommerce-cart .woocommerce .ppc-button-wrapper{margin:0}

/* ---------------------------------------------------------------------------
   8 · Empfehlungen

   Die Kacheln nehmen die Bauform der Kategoriekarten auf: weißer Grund,
   feine Linie, Bild oben, Preis in Bitter, ein Kaufknopf und darunter der
   ruhige Knopf für die Angebotsanfrage.
   ------------------------------------------------------------------------ */
/* WooCommerce stellt Empfehlungen und Summe als zwei Spalten zu je 48 %
   nebeneinander. Im Raster hier wird beides zurueckgesetzt. */
body.woocommerce-cart .woocommerce .cross-sells{
  width:100%;float:none;
  margin:3rem 0 0;padding:2.5rem 0 0;border-top:1px solid var(--sq-linie-2);
}
body.woocommerce-cart .woocommerce .cross-sells > h2{
  font-size:clamp(1.2rem,2vw,1.5rem);margin:0 0 1.5rem;
}
body.woocommerce-cart .woocommerce .cross-sells ul.products{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:1.25rem;
  list-style:none;margin:0;padding:0;
}
body.woocommerce-cart .woocommerce .cross-sells ul.products::before,
body.woocommerce-cart .woocommerce .cross-sells ul.products::after{display:none}
body.woocommerce-cart .woocommerce .cross-sells ul.products li.product{
  width:auto!important;float:none!important;margin:0!important;padding:0;
  display:flex;flex-direction:column;
  border:1px solid var(--sq-linie);
  background:#fff;
  position:relative;
  transition:border-color .15s;
}
body.woocommerce-cart .woocommerce .cross-sells ul.products li.product:hover{border-color:var(--sq-navy-2)}
body.woocommerce-cart .woocommerce .cross-sells li.product .woocommerce-loop-product__link{
  display:flex;flex-direction:column;gap:.5rem;
  padding:0 0 .2rem;text-decoration:none;
}
body.woocommerce-cart .woocommerce .cross-sells li.product img{
  width:100%;margin:0 0 .3rem;border-bottom:1px solid var(--sq-linie-2);
}
body.woocommerce-cart .woocommerce .cross-sells li.product .woocommerce-loop-product__title{
  font-family:Bitter,Georgia,serif;
  font-size:.92rem;font-weight:600;line-height:1.3;
  text-transform:none;color:var(--sq-navy);
  margin:0;padding:0 .9rem;
}
body.woocommerce-cart .woocommerce .cross-sells li.product .price{
  font-family:Bitter,Georgia,serif;
  font-size:1.1rem;font-weight:600;color:var(--sq-navy);
  font-variant-numeric:tabular-nums;
  margin:0;padding:0 .9rem;
}
body.woocommerce-cart .woocommerce .cross-sells li.product .price del{
  font-family:"Public Sans",Arial,sans-serif;
  font-size:.85rem;font-weight:400;color:var(--sq-ink-3);margin-right:.35rem;
}
body.woocommerce-cart .woocommerce .cross-sells li.product .price ins{text-decoration:none}
body.woocommerce-cart .woocommerce .cross-sells li.product .wc-gzd-additional-info{
  font-size:.75rem;font-style:normal;color:var(--sq-ink-3);
  margin:.35rem 0 0;padding:0 .9rem;
}
body.woocommerce-cart .woocommerce .cross-sells li.product .onsale{
  position:absolute;top:.6rem;left:.6rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--sq-kauf);
  padding:.25rem .45rem;
  border-radius:0;margin:0;min-height:0;min-width:0;line-height:1.2;
}

/* Knöpfe der Kachel: unten bündig, Kauf stark, Anfrage zurückhaltend. */
body.woocommerce-cart .woocommerce .cross-sells li.product > a.button{
  margin:auto .9rem 0;
  margin-top:auto;
}
body.woocommerce-cart .woocommerce .cross-sells li.product a.button{
  display:flex;align-items:center;justify-content:center;
  min-height:44px;
  margin:.7rem .9rem 0;
  padding:.6rem .9rem!important;
  font-size:.85rem!important;font-weight:700!important;
  text-transform:none;text-decoration:none;text-align:center;
  color:#fff!important;
  background:var(--sq-kauf)!important;
  border:1px solid var(--sq-kauf)!important;
  border-radius:2px!important;
  box-shadow:none!important;
  transition:background .15s,border-color .15s;
}
body.woocommerce-cart .woocommerce .cross-sells li.product a.button:hover{
  background:var(--sq-kauf-h)!important;border-color:var(--sq-kauf-h)!important;
}
/* Angebotsanfrage trägt vom Plugin dieselben Klassen wie der Kaufknopf und
   säße sonst als zweiter roter Block darunter. */
body.woocommerce-cart .woocommerce .cross-sells li.product a.afrfqbt,
body.woocommerce-cart .woocommerce .cross-sells li.product a[data-rule_id]{
  font-weight:600!important;font-size:.8rem!important;
  min-height:40px;
  margin-bottom:.9rem;
  color:var(--sq-ink-2)!important;
  background:#fff!important;
  border:1px solid var(--sq-linie)!important;
}
body.woocommerce-cart .woocommerce .cross-sells li.product a.afrfqbt:hover,
body.woocommerce-cart .woocommerce .cross-sells li.product a[data-rule_id]:hover{
  background:var(--sq-flaeche)!important;border-color:var(--sq-navy-2)!important;color:var(--sq-navy)!important;
}
body.woocommerce-cart .woocommerce .cross-sells li.product a.added_to_cart{
  display:block;margin:.4rem .9rem .9rem;
  font-size:.78rem;color:var(--sq-ink-2);text-decoration:underline;
}
body.woocommerce-cart .woocommerce .cross-sells li.product > a.button:last-child{margin-bottom:.9rem}
body.woocommerce-cart .woocommerce .cross-sells .screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------------------------------------------------------------------------
   9 · Leerer Warenkorb
   ------------------------------------------------------------------------ */
body.woocommerce-cart .woocommerce .cart-empty{
  font-family:Bitter,Georgia,serif;
  font-size:1.3rem;font-weight:600;color:var(--sq-navy);
  border:0;background:transparent;padding:0;margin:0 0 1rem;
}
body.woocommerce-cart .woocommerce .cart-empty::before{display:none}
body.woocommerce-cart .woocommerce .return-to-shop{margin:0}
body.woocommerce-cart .woocommerce .return-to-shop .button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;
  padding:.9rem 1.4rem!important;
  font-size:.95rem!important;font-weight:700!important;
  color:#fff!important;
  background:var(--sq-kauf)!important;
  border:1px solid var(--sq-kauf)!important;
  border-radius:2px!important;
}
body.woocommerce-cart .woocommerce .return-to-shop .button:hover{
  background:var(--sq-kauf-h)!important;border-color:var(--sq-kauf-h)!important;
}

/* ---------------------------------------------------------------------------
   10 · Schmale Schirme

   Ab 980 px eine Spalte: Liste, Summe, Empfehlungen. Ab 760 px wird aus
   jeder Tabellenzeile eine Karte — Bild links, Angaben rechts, darunter
   Menge und Zwischensumme mit den Beschriftungen aus data-title.
   ------------------------------------------------------------------------ */
@media (max-width:980px){
  body.woocommerce-cart .woocommerce{
    grid-template-columns:minmax(0,1fr);
    padding-top:1.75rem;
  }
  body.woocommerce-cart .woocommerce > .woocommerce-cart-form{grid-column:1;grid-row:3}
  body.woocommerce-cart .woocommerce .cart_totals{
    grid-column:1;grid-row:4;
    position:static;
    margin-top:2rem;
  }
  body.woocommerce-cart .woocommerce .cross-sells{grid-column:1;grid-row:5}
}

@media (max-width:760px){

  /* WooCommerce bringt fuer schmale Schirme eine eigene Darstellung mit:
     Vorschaubild aus, Spaltennamen als ::before vor jeden Wert, alles
     rechtsbuendig, jede zweite Zeile grau hinterlegt. Sie wird hier
     abgeloest — an ihre Stelle tritt die Karte. Mehrere dieser Angaben
     tragen !important, deshalb steht es hier ebenfalls. */
  body.woocommerce-cart .woocommerce table.cart thead{display:none}

  body.woocommerce-cart .woocommerce table.cart,
  body.woocommerce-cart .woocommerce table.cart tbody{display:block;width:auto}

  /* --- eine Position als Karte --- */
  body.woocommerce-cart .woocommerce table.cart tr.cart_item{
    position:relative;
    display:grid;
    grid-template-columns:88px minmax(0,1fr);
    grid-template-areas:
      "bild  name"
      "bild  preis"
      "menge summe";
    column-gap:1rem;
    align-items:start;
    padding:1.1rem 0;
    border-bottom:1px solid var(--sq-linie-2);
    background:transparent!important;
  }
  body.woocommerce-cart .woocommerce table.cart tr.cart_item td{
    display:block;
    width:auto;
    padding:0;
    border:0!important;
    text-align:left!important;
    background:transparent!important;
  }
  body.woocommerce-cart .woocommerce table.cart tr.cart_item td::before{
    content:none;
    display:none;
  }

  body.woocommerce-cart .woocommerce table.cart tr.cart_item td.product-thumbnail{
    display:block!important;
    grid-area:bild;
  }
  body.woocommerce-cart .woocommerce table.cart tr.cart_item td.product-thumbnail img{width:100%}

  body.woocommerce-cart .woocommerce table.cart tr.cart_item td.product-name{
    grid-area:name;
    padding-right:2rem;
  }

  /* Beim Preis bleibt die Beschriftung stehen: ohne Kopfzeile waere sonst
     nicht klar, ob es der Stueckpreis oder die Zwischensumme ist. */
  body.woocommerce-cart .woocommerce table.cart tr.cart_item td.product-price{
    grid-area:preis;
    margin-top:.35rem;
    font-size:.85rem;
    color:var(--sq-ink-3);
  }
  body.woocommerce-cart .woocommerce table.cart tr.cart_item td.product-price::before{
    content:attr(data-title) ": ";
    display:inline;
    float:none;
    font-weight:400;
    color:inherit;
  }

  body.woocommerce-cart .woocommerce table.cart tr.cart_item td.product-quantity{
    grid-area:menge;
    margin-top:.9rem;
  }
  body.woocommerce-cart .woocommerce table.cart tr.cart_item td.product-subtotal{
    grid-area:summe;
    align-self:center;
    margin-top:.9rem;
    text-align:right!important;
  }

  /* Entfernen liegt oben rechts ueber der Karte. */
  body.woocommerce-cart .woocommerce table.cart tr.cart_item td.product-remove{
    display:block!important;
    position:absolute;
    top:.9rem;
    right:0;
    width:auto;
  }

  /* --- Aktionszeile --- */
  body.woocommerce-cart .woocommerce table.cart td.actions{
    display:block;
    padding:1.2rem 0 0;
    text-align:left!important;
    background:transparent!important;
  }
  body.woocommerce-cart .woocommerce td.actions .coupon{
    float:none;
    display:flex;
    width:100%;
    padding-bottom:0;
  }
  body.woocommerce-cart .woocommerce td.actions .coupon input#coupon_code{flex:1 1 8rem;width:auto}
  body.woocommerce-cart .woocommerce td.actions .coupon .button{width:auto!important;flex:0 0 auto}
  body.woocommerce-cart .woocommerce td.actions > button,
  body.woocommerce-cart .woocommerce td.actions > .button{
    float:none;
    width:100%;
    margin:.5rem 0 0;
  }

  /* --- Summe bleibt zweispaltig --- */
  body.woocommerce-cart .woocommerce .cart_totals table.shop_table tr{display:table-row}
  body.woocommerce-cart .woocommerce .cart_totals table.shop_table tbody th{display:table-cell;width:auto}
  body.woocommerce-cart .woocommerce .cart_totals table.shop_table td{
    display:table-cell;
    text-align:right!important;
  }
  body.woocommerce-cart .woocommerce .cart_totals table.shop_table td::before{content:none;display:none}
}

@media (max-width:420px){
  body.woocommerce-cart .woocommerce{--sq-rand:1rem}
  body.woocommerce-cart .woocommerce table.cart tr.cart_item{grid-template-columns:68px minmax(0,1fr)}
}