/* ==========================================================================
   bs-design · shop.css
   Warenkorb (/warenkorb/) · Produktseite (/item/*) · Warenkorb-Schublade · Übersicht (/produkte/)

   Grundlage: DESIGN-BRIEF.md (Run shop-kasse-design-2026-09), DOM und Tokens am 10.09.2026
   live gemessen. FluentCart 1.6.3. Die Tokens liegen site-weit in :root — hier wird nichts
   neu definiert, nur angeschlossen.

   DIE LEITPLANKE
   Jeder Selektor beginnt mit body:not(.bdf-checkout). Die Klasse kommt aus dem body_class-
   Filter und steht schon im ausgelieferten HTML. Damit kann keine Regel dieser Datei einen
   Festival-Warenkorb an der Kasse erreichen — baulich, nicht durch Abzählen von Spezifität.
   Nichts hier zielt auf die Kasse (/kasse/, Seite 7170) oder ihre Klassen.

   ZUR SPEZIFITÄT
   FluentCart schreibt seine Warenkorb-Regeln als vierfache Klassenkette
   (.fct-cart-drawer-list .fct-cart-item .fct-cart-item-details .fct-cart-item-title). Um sie
   ohne !important zu überschreiben, spiegelt diese Datei die Kette und stellt den Wächter davor:
   genau eine Stufe über FluentCart, nie mehr. Das ist absichtlich unabhängig von der Ladereihen-
   folge — wer die Reihenfolge der Stylesheets ändert, verliert hier nichts lautlos.
   Für die Festival-Schicht ist die Spezifität dieser Datei ohne Belang: unter body.bdf-checkout
   greift keiner dieser Selektoren.

   !important kommt genau einmal vor (Toast-Schließkreuz), begründet an Ort und Stelle.

   MAGENTA
   Genau einmal je Ansicht, auf der Handlung, die Geld bewegt:
   Warenkorb → „Zur Kasse" · Schublade → „Zur Kasse" · Produktseite → „Direkt buchen".
   Übersicht → kein Magenta, weil dort keine Handlung Geld bewegt („Ansehen" ist Navigation).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · ABKOPPLUNG — die alte Elementor-Kit-Regel loslassen
   .bs-kit button {background:#FF00FF; border-radius:12px; font:Roboto 22px; box-shadow …}
   sitzt am <body> und trifft jedes <button> der FluentCart-Oberfläche. Die Kit-Regel bleibt
   für den Rest der Seite bestehen; hier werden nur FluentCarts Bedienelemente herausgelöst.
   Bewusst eine benannte Liste statt „alle Buttons im Shop": so kann diese Datei nie in den
   Kassen-Modal-Container hineinreichen, der auf der Produktseite mitgeliefert wird. Taucht mit
   einem FluentCart-Update ein neuer Knopf magenta auf, ist das sichtbar — nicht still.
   -------------------------------------------------------------------------- */

body:not(.bdf-checkout) .fct-cart-item-quantity .qty-btn,
body:not(.bdf-checkout) .fct-cart-item-remove .fct-cart-item-delete-button,
body:not(.bdf-checkout) .fct-cart-drawer-header .fct-cart-drawer-close-button,
body:not(.bdf-checkout) button.fct-cart-drawer-open-btn,
body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-decrease-button,
body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-increase-button,
body:not(.bdf-checkout) .fct-shop-view-switcher button,
body:not(.bdf-checkout) .fct-gallery-thumb-controls button,
body:not(.bdf-checkout) .fct-bundle-products .fct-see-more-btn,
body:not(.bdf-checkout) .fct-single-product-page .fluent-cart-add-to-cart-button,
body:not(.bdf-checkout) .fct-product-card .fct-product-view-button {
  background-color: transparent;
  background-image: none;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  border-radius: var(--radius-subtle);
  box-shadow: none;
  text-shadow: none;
}

/* Die Kit-Regel hat eigene Hover/Focus-Zustände (Radius 15 px, Innenschatten, #FF00B7).
   Auch die müssen weg, sonst springt der Knopf beim Berühren zurück ins alte Design. */
body:not(.bdf-checkout) .fct-cart-item-quantity .qty-btn:hover,
body:not(.bdf-checkout) .fct-cart-item-quantity .qty-btn:focus,
body:not(.bdf-checkout) .fct-cart-item-remove .fct-cart-item-delete-button:hover,
body:not(.bdf-checkout) .fct-cart-item-remove .fct-cart-item-delete-button:focus,
body:not(.bdf-checkout) .fct-cart-drawer-header .fct-cart-drawer-close-button:hover,
body:not(.bdf-checkout) .fct-cart-drawer-header .fct-cart-drawer-close-button:focus,
body:not(.bdf-checkout) button.fct-cart-drawer-open-btn:hover,
body:not(.bdf-checkout) button.fct-cart-drawer-open-btn:focus,
body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-decrease-button:hover,
body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-decrease-button:focus,
body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-increase-button:hover,
body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-increase-button:focus,
body:not(.bdf-checkout) .fct-shop-view-switcher button:hover,
body:not(.bdf-checkout) .fct-shop-view-switcher button:focus,
body:not(.bdf-checkout) .fct-gallery-thumb-controls button:hover,
body:not(.bdf-checkout) .fct-gallery-thumb-controls button:focus,
body:not(.bdf-checkout) .fct-bundle-products .fct-see-more-btn:hover,
body:not(.bdf-checkout) .fct-bundle-products .fct-see-more-btn:focus,
body:not(.bdf-checkout) .fct-single-product-page .fluent-cart-add-to-cart-button:hover,
body:not(.bdf-checkout) .fct-single-product-page .fluent-cart-add-to-cart-button:focus,
body:not(.bdf-checkout) .fct-product-card .fct-product-view-button:hover,
body:not(.bdf-checkout) .fct-product-card .fct-product-view-button:focus {
  background-color: transparent;
  color: var(--text-primary);
  border-radius: var(--radius-subtle);
  box-shadow: none;
}


/* --------------------------------------------------------------------------
   2 · BAUSTEINE — dieselben Formen auf allen vier Flächen
   -------------------------------------------------------------------------- */

/* 2.1 Haus-Knopf, primär — das eine Magenta je Ansicht.
   Form von der Kurs-LP übernommen (.btn-primary, gemessen 10.09.): JetBrains Mono 600,
   Versalien, --fs-button, Radius 2 px, Polster --gap-m/--gap-xl (16/32 px im Vollbild).
   Volle Breite und mindestens 48 px hoch, weil der Daumen auf 375 px sonst danebengreift —
   gemessen war „Go to Checkout" ein 110 × 23 px Textlink.
   min-width statt width: FluentCart setzt auf einer Kassen-Knopf-Klasse width:auto!important;
   min-width gewinnt gegen width, ganz ohne eigenes !important. */
body:not(.bdf-checkout) .fct-cart-page .fluent-cart-cart-cart-button-wrap a.checkout-button,
body:not(.bdf-checkout) .fct-cart-drawer-footer .fct-cart-drawer-footer-actions a.checkout-button,
body:not(.bdf-checkout) .fct-product-buttons-wrap a.fluent-cart-direct-checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
  min-height: 3rem;
  max-height: none;
  margin: 0;
  padding: var(--gap-m) var(--gap-xl);
  background-color: var(--brand-magenta);
  background-image: none;
  /* Weiß = --bg-base, damit kein Fremdwert im Stylesheet steht. */
  color: var(--bg-base);
  border: 0;
  border-radius: var(--radius-subtle);
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: var(--fs-button);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

body:not(.bdf-checkout) .fct-cart-page .fluent-cart-cart-cart-button-wrap a.checkout-button:hover,
body:not(.bdf-checkout) .fct-cart-page .fluent-cart-cart-cart-button-wrap a.checkout-button:focus-visible,
body:not(.bdf-checkout) .fct-cart-drawer-footer .fct-cart-drawer-footer-actions a.checkout-button:hover,
body:not(.bdf-checkout) .fct-cart-drawer-footer .fct-cart-drawer-footer-actions a.checkout-button:focus-visible,
body:not(.bdf-checkout) .fct-product-buttons-wrap a.fluent-cart-direct-checkout-button:hover,
body:not(.bdf-checkout) .fct-product-buttons-wrap a.fluent-cart-direct-checkout-button:focus-visible {
  background-color: var(--brand-magenta-hover);
  background-image: none;
  color: var(--bg-base);
  box-shadow: none;
  text-decoration: none;
}

/* Tastatur-Fokus sichtbar in Anthrazit, nicht als Browser-Blau — und mit Abstand,
   damit der Ring nicht mit der Magenta-Fläche verschmilzt. */
body:not(.bdf-checkout) .fct-cart-page .fluent-cart-cart-cart-button-wrap a.checkout-button:focus-visible,
body:not(.bdf-checkout) .fct-cart-drawer-footer .fct-cart-drawer-footer-actions a.checkout-button:focus-visible,
body:not(.bdf-checkout) .fct-product-buttons-wrap a.fluent-cart-direct-checkout-button:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

/* FluentCart färbt die Kindknoten des Direkt-Knopfs hart weiß — passt zufällig, wird hier
   trotzdem explizit auf das Token gesetzt, damit die Farbe aus einer Quelle kommt. */
body:not(.bdf-checkout) .fct-product-buttons-wrap a.fluent-cart-direct-checkout-button * {
  color: var(--bg-base);
}

/* 2.2 Haus-Knopf, sekundär („Geist") — Rahmen statt Fläche.
   Gemessen an der LP: JetBrains Mono 10 px, Versalien, letter-spacing 1,4 px, Rand 1 px --line,
   Polster 12/24. Steht immer neben dem einen Magenta, nie an dessen Stelle.
   a.view-cart-button stammt aus FluentCarts CSS (im DOM vom 10.09. nicht vorhanden, wird aber
   in anderen Konfigurationen in den Schubladen-Fuß gerendert). */
body:not(.bdf-checkout) .fct-single-product-page .fluent-cart-add-to-cart-button,
body:not(.bdf-checkout) .fct-product-card .fct-product-view-button,
body:not(.bdf-checkout) .fluent-cart-cart-empty-content .continue-shopping-link,
body:not(.bdf-checkout) .fct-cart-drawer-footer .fct-cart-drawer-footer-actions a.view-cart-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  box-sizing: border-box;
  min-height: 2.75rem;
  max-height: none;
  margin: 0;
  padding: var(--gap-s) var(--gap-l);
  background-color: transparent;
  background-image: none;
  color: var(--text-primary);
  border: 1px solid var(--line);
  border-radius: var(--radius-subtle);
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

body:not(.bdf-checkout) .fct-single-product-page .fluent-cart-add-to-cart-button:hover,
body:not(.bdf-checkout) .fct-single-product-page .fluent-cart-add-to-cart-button:focus-visible,
body:not(.bdf-checkout) .fct-product-card .fct-product-view-button:hover,
body:not(.bdf-checkout) .fct-product-card .fct-product-view-button:focus-visible,
body:not(.bdf-checkout) .fluent-cart-cart-empty-content .continue-shopping-link:hover,
body:not(.bdf-checkout) .fluent-cart-cart-empty-content .continue-shopping-link:focus-visible,
body:not(.bdf-checkout) .fct-cart-drawer-footer .fct-cart-drawer-footer-actions a.view-cart-button:hover,
body:not(.bdf-checkout) .fct-cart-drawer-footer .fct-cart-drawer-footer-actions a.view-cart-button:focus-visible {
  background-color: var(--bg-accent-soft);
  color: var(--text-primary);
  border-color: var(--text-primary);
  text-decoration: none;
}

body:not(.bdf-checkout) .fct-single-product-page .fluent-cart-add-to-cart-button:focus-visible,
body:not(.bdf-checkout) .fct-product-card .fct-product-view-button:focus-visible,
body:not(.bdf-checkout) .fluent-cart-cart-empty-content .continue-shopping-link:focus-visible,
body:not(.bdf-checkout) .fct-cart-drawer-footer .fct-cart-drawer-footer-actions a.view-cart-button:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

/* Ausverkauft/deaktiviert: keine eigene Farbe, nur zurückgenommen — kein Grau, das es im
   Token-Satz nicht gibt. */
body:not(.bdf-checkout) .fct-single-product-page .fluent-cart-add-to-cart-button:disabled,
body:not(.bdf-checkout) .fct-single-product-page .fluent-cart-add-to-cart-button.disabled,
body:not(.bdf-checkout) .fct-single-product-page .fluent-cart-add-to-cart-button.out-of-stock,
body:not(.bdf-checkout) .fct-product-buttons-wrap a.fluent-cart-direct-checkout-button:disabled,
body:not(.bdf-checkout) .fct-product-buttons-wrap a.fluent-cart-direct-checkout-button.disabled,
body:not(.bdf-checkout) .fct-product-buttons-wrap a.fluent-cart-direct-checkout-button.out-of-stock,
body:not(.bdf-checkout) .fct-product-card .fct-product-view-button.out-of-stock {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--text-primary);
  border-color: var(--line);
  background-color: transparent;
}

/* Ladezustand im Knopf: FluentCart legt eine hellgraue Fläche mit blauem Spinner darüber.
   Hier cremefarben mit anthrazitfarbenem Spinner, damit das Warten nicht fremd aussieht. */
body:not(.bdf-checkout) .fct-single-product-page .fluent-cart-add-to-cart-button .fluent-cart-loader,
body:not(.bdf-checkout) .fct-product-card .fct-product-view-button .fluent-cart-loader,
body:not(.bdf-checkout) .fct-product-card button .fluent-cart-loader {
  background: var(--bg-accent);
  border-radius: var(--radius-subtle);
}

body:not(.bdf-checkout) .fct-single-product-page .fluent-cart-add-to-cart-button .fluent-cart-loader svg,
body:not(.bdf-checkout) .fct-product-card .fct-product-view-button .fluent-cart-loader svg,
body:not(.bdf-checkout) .fct-product-card button .fluent-cart-loader svg {
  fill: var(--text-primary);
  color: var(--line);
  margin-right: 0;
}

/* 2.3 Etikett — Versalien-Kleinschrift in JetBrains Mono.
   Funktionale Etiketten (Gesamt, Anzahl, inkl. USt.) in --text-secondary (5,3:1 auf Weiß),
   nicht in --text-tertiary (3,6:1): sie tragen Bedeutung und müssen die 4,5:1 halten. */
body:not(.bdf-checkout) .fct-cart-total-wrapper > span:first-child,
body:not(.bdf-checkout) .fct-product-quantity-container .quantity-title,
body:not(.bdf-checkout) .fct-product-item-price .fct_price_suffix,
body:not(.bdf-checkout) .fct-product-card-prices .fct_price_suffix,
body:not(.bdf-checkout) .fct-cart-drawer-header .title > span,
body:not(.bdf-checkout) .bs-shop-label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* 2.4 Preis — Mono mit Tabellenziffern, damit Beträge untereinander bündig stehen und ein
   vierstelliger Preis dieselbe Ruhe hat wie ein zweistelliger.
   ⚠ Der Betrag wird ueber :nth-of-type(2) angesprochen, NICHT ueber :last-child. FluentCart
   rendert <span>Gesamt:</span><span>Betrag</span>; sobald etwas dahinter gehaengt wird — der
   USt-Hinweis tut genau das — erbt der neue Knoten sonst die Preis-Darstellung, und der Betrag
   verliert sie. Am 10.09. genau so passiert und nachgemessen. */
body:not(.bdf-checkout) .fct-cart-drawer-list .fct-cart-item .fct-cart-item-total,
body:not(.bdf-checkout) .fct-cart-total-wrapper > span:nth-of-type(2),
body:not(.bdf-checkout) .fct-single-product-page .fct-product-item-price,
body:not(.bdf-checkout) .fct-single-product-page .fct-product-prices,
body:not(.bdf-checkout) .fct-product-card .fct-product-card-prices .fct-item-price,
body:not(.bdf-checkout) .fct-product-variant-item .fct-product-variant-price,
body:not(.bdf-checkout) .bs-shop-variant-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-primary);
}

/* 2.5 Mengensteller — ein Rahmen, drei Zellen, alle 44 px.
   Warenkorb und Schublade nutzen .qty-btn/.qty-value (aus cart_item_layout gemessen),
   die Produktseite .fct-quantity-*-button/.fct-quantity-input. Dieselbe Form für beide. */
body:not(.bdf-checkout) .fct-cart-drawer-list .fct-cart-item .fct-cart-item-quantity,
body:not(.bdf-checkout) .fct-product-quantity-container .fct-product-quantity {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-subtle);
  background-color: var(--bg-base);
  overflow: hidden;
}

body:not(.bdf-checkout) .fct-cart-item-quantity .qty-btn,
body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-decrease-button,
body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-increase-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

body:not(.bdf-checkout) .fct-cart-item-quantity .qty-btn:hover,
body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-decrease-button:hover,
body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-increase-button:hover {
  background-color: var(--bg-accent-soft);
  color: var(--text-primary);
}

body:not(.bdf-checkout) .fct-cart-item-quantity .qty-btn:focus-visible,
body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-decrease-button:focus-visible,
body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-increase-button:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: -2px;
}

body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-decrease-button:disabled,
body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-increase-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: transparent;
}

/* FluentCart füllt die Warenkorb-Symbole hart mit #000; currentColor bindet sie an den Text. */
body:not(.bdf-checkout) .fct-cart-item-quantity .qty-btn svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-decrease-button svg,
body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-increase-button svg {
  width: 14px;
  height: 14px;
}

body:not(.bdf-checkout) .fct-cart-item-quantity .qty-value,
body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-input {
  box-sizing: border-box;
  width: 3rem;
  max-width: 3rem;
  height: 2.75rem;
  max-height: none;
  margin: 0;
  padding: 0 var(--gap-xxs);
  border: 0;
  border-left: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

body:not(.bdf-checkout) .fct-cart-item-quantity .qty-value:focus,
body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-input:focus {
  outline: 2px solid var(--text-primary);
  outline-offset: -2px;
  box-shadow: none;
}

/* Die Browser-Spinner im Zahlenfeld sind überflüssig — Plus und Minus stehen daneben. */
body:not(.bdf-checkout) .fct-cart-item-quantity .qty-value::-webkit-inner-spin-button,
body:not(.bdf-checkout) .fct-cart-item-quantity .qty-value::-webkit-outer-spin-button,
body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-input::-webkit-inner-spin-button,
body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 2.6 Bild-Leerzustand — 8 von 9 Produkten haben kein Bild.
   FluentCart liefert dann sein placeholder.svg (graues Bildsymbol, sieht aus wie kaputt).
   Hier: Fläche in --bg-accent, feine Innenlinie, optional die Initiale des Produkts.
   Das Bild wird nur unsichtbar, nicht entfernt: Vue tauscht das src später ggf. aus.
   Die Initiale schreibt das JS als data-bs-initial an den Rahmen (leer = nur Fläche und Linie).
   Kein Markenwort per CSS: /produkte/ und der Warenkorb können auch das Festival-Produkt
   zeigen — ein „Bachatasaar" aus dem Stylesheet wäre dort Markenvermischung. */
body:not(.bdf-checkout) .fct-cart-drawer-list .fct-cart-item .fct-cart-item-image,
body:not(.bdf-checkout) .fct-product-gallery-wrapper .fct-product-gallery-thumb,
body:not(.bdf-checkout) .fct-product-card .fct-product-card-image-wrap {
  position: relative;
  background-color: var(--bg-accent);
  border-radius: var(--radius-subtle);
  overflow: hidden;
}

body:not(.bdf-checkout) .fct-cart-item-image:has(> a > img[src$="placeholder.svg"]) img,
body:not(.bdf-checkout) .fct-product-gallery-thumb:has(> img[src$="placeholder.svg"]) img,
body:not(.bdf-checkout) .fct-product-card-image-wrap:has(> img[src$="placeholder.svg"]) img {
  visibility: hidden;
}

body:not(.bdf-checkout) .fct-cart-item-image:has(> a > img[src$="placeholder.svg"])::before,
body:not(.bdf-checkout) .fct-product-gallery-thumb:has(> img[src$="placeholder.svg"])::before,
body:not(.bdf-checkout) .fct-product-card-image-wrap:has(> img[src$="placeholder.svg"])::before {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid var(--line);
  pointer-events: none;
}

body:not(.bdf-checkout) .fct-cart-item-image:has(> a > img[src$="placeholder.svg"])::after,
body:not(.bdf-checkout) .fct-product-gallery-thumb:has(> img[src$="placeholder.svg"])::after,
body:not(.bdf-checkout) .fct-product-card-image-wrap:has(> img[src$="placeholder.svg"])::after {
  content: attr(data-bs-initial);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Dekorativ, nicht funktional — hier darf die dritte Textstufe stehen. */
  color: var(--text-tertiary);
  pointer-events: none;
}

/* Größe der Initiale relativ zum Rahmen: klein im Warenkorb, groß in der Galerie. */
body:not(.bdf-checkout) .fct-cart-item-image:has(> a > img[src$="placeholder.svg"])::after {
  font-size: var(--fs-caption);
}

body:not(.bdf-checkout) .fct-product-card-image-wrap:has(> img[src$="placeholder.svg"])::after {
  font-size: var(--fs-h-m);
}

body:not(.bdf-checkout) .fct-product-gallery-thumb:has(> img[src$="placeholder.svg"])::after {
  font-size: var(--fs-h-xl);
}

/* 2.7 Ergänzte Vertrauens-Elemente (per JS eingefügt, Klassen bs-shop-*).
   Nur Text, Linie, Fläche. Nichts davon trägt Magenta. */
body:not(.bdf-checkout) .bs-shop-back {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  /* Trefferflaeche 44 px hoch, ohne dass der Link wie ein Knopf aussieht: die Hoehe kommt aus
     min-height, der optische Abstand bleibt unveraendert, weil der Innenabstand nach oben durch
     den negativen Aussenabstand wieder aufgehoben wird. Gemessen 10.09. auf 375 px: vorher
     109 x 20 px — zu klein fuer einen Daumen, und es ist der einzige Weg aus dem Warenkorb
     heraus, ohne zu kaufen. */
  min-height: 44px;
  padding-block: var(--gap-s);
  margin: calc(var(--gap-s) * -1) 0 calc(var(--gap-l) - var(--gap-s));
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}

body:not(.bdf-checkout) .bs-shop-back::before {
  content: "←";
  font-family: var(--font-mono);
}

body:not(.bdf-checkout) .bs-shop-back:hover,
body:not(.bdf-checkout) .bs-shop-back:focus-visible {
  color: var(--text-primary);
  text-decoration: none;
}

body:not(.bdf-checkout) .bs-shop-pay {
  margin: var(--gap-m) 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--text-secondary);
}

body:not(.bdf-checkout) .bs-shop-trust {
  display: grid;
  gap: var(--gap-xs);
  margin: var(--gap-s) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--text-secondary);
}

body:not(.bdf-checkout) .bs-shop-trust > li {
  display: flex;
  gap: var(--gap-xs);
  margin: 0;
  padding: 0;
}

body:not(.bdf-checkout) .bs-shop-trust > li::before {
  content: "✓";
  flex: none;
  font-family: var(--font-mono);
  color: var(--state-success);
}

/* Hinweis unter dem Gesamtbetrag („inkl. USt."): sitzt im Flex-Wrapper des Gesamt und nimmt
   die volle Breite, damit Etikett und Betrag in ihrer Zeile bleiben. */
body:not(.bdf-checkout) .fct-cart-total-wrapper .bs-shop-note {
  flex-basis: 100%;
  margin: var(--gap-xxs) 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  text-align: right;
  color: var(--text-secondary);
}

/* Kursstart an der Position — Mono, weil es ein Datum ist, kein Fließtext. */
body:not(.bdf-checkout) .fct-cart-item-details .bs-shop-course-date {
  display: block;
  margin: 0 0 var(--gap-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--text-secondary);
}


/* --------------------------------------------------------------------------
   3 · WARENKORB — /warenkorb/ (Seite 7171)
   Gemessen: Inhalt 1140 px breit, eine Zeile von Kante zu Kante, Überschrift 56,7 px wird
   auf 375 px abgeschnitten, der Weg zur Kasse ein Textlink am rechten Rand.
   -------------------------------------------------------------------------- */

/* Seitentitel des Themes („Warenkorb", „Produkte"): Größe, die auf 375 px hineinpasst,
   Anthrazit statt des Kit-Magentas — das Magenta gehört dem Kassen-Knopf.
   Erkannt am Shop-Inhalt der Seite, nicht an Seiten-IDs (abgeleitet statt beschrieben).
   Die Schriftart bleibt die Display-Schrift des Themes — sie ist der Seitentitel-Stil der
   ganzen Site, nicht Teil dieses Entwurfs. */
body:not(.bdf-checkout):has(.fct-cart-page, .fluent-cart-cart-empty-content, .fct-products-wrapper) .page-header .entry-title {
  font-size: var(--fs-h-l);
  line-height: 1.05;
  color: var(--text-primary);
  margin: 0 auto var(--gap-xl);
  overflow-wrap: anywhere;
}

/* Der Warenkorb-Titel läuft mit dem Warenkorb-Container (56 rem), nicht mit dem Site-Container. */
body:not(.bdf-checkout):has(.fct-cart-page, .fluent-cart-cart-empty-content) .page-header .entry-title {
  max-width: 56rem;
  box-sizing: border-box;
  padding-inline: var(--gap-m);
}

/* Der Rahmen: ~80 % des Site-Containers, zentriert. Mobil zuerst eine Spalte in DOM-Reihen-
   folge (Positionen, Gesamt, Kasse, Hinweise); ab 48 rem zwei Spalten. */
body:not(.bdf-checkout) .fct-cart-page {
  box-sizing: border-box;
  max-width: 56rem;
  margin: 0 auto var(--section-s);
  padding-inline: var(--gap-m);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  column-gap: var(--gap-xl);
  align-items: start;
}

/* Rückweg als erstes Kind der Sektion (per JS), über beide Spalten. */
body:not(.bdf-checkout) .fct-cart-page > .bs-shop-back {
  grid-column: 1 / -1;
  justify-self: start;
}

/* Die Schubladen-Regel max-height:calc(100% - 220px) gilt auch auf der Seite —
   dort gibt es keinen Fuß zum Freihalten. */
body:not(.bdf-checkout) .fct-cart-page .fct-cart-drawer-content-wrapper {
  max-height: none;
  overflow: visible;
}

body:not(.bdf-checkout) .fct-cart-page .fct-cart-drawer-list-content {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Gesamt-Karte, oberer Teil: Gesamt und Kassen-Knopf sind Geschwister ohne gemeinsamen
   Rahmen — deshalb trägt das Gesamt die oberen drei Kanten, der Knopf-Wrapper die unteren. */
body:not(.bdf-checkout) .fct-cart-page .fct-cart-total-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-s);
  margin: var(--gap-l) 0 0;
  padding: var(--gap-l) var(--gap-l) var(--gap-m);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius-subtle) var(--radius-subtle) 0 0;
  background-color: var(--bg-accent-soft);
  font-size: var(--fs-body);
  color: var(--text-primary);
}

body:not(.bdf-checkout) .fct-cart-page .fct-cart-total-wrapper > span:nth-of-type(2) {
  font-size: var(--fs-h-s);
  line-height: 1.1;
}

body:not(.bdf-checkout) .fct-cart-page .fluent-cart-cart-cart-button-wrap {
  display: flex;
  margin: 0;
  padding: 0 var(--gap-l) var(--gap-l);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius-subtle) var(--radius-subtle);
  background-color: var(--bg-accent-soft);
}

/* Leerer Warenkorb: Gesamt und Kassen-Knopf haben nichts zu sagen. */
body:not(.bdf-checkout) .fct-cart-page:has(.fluent-cart-cart-empty-content) .fct-cart-total-wrapper,
body:not(.bdf-checkout) .fct-cart-page:has(.fluent-cart-cart-empty-content) .fluent-cart-cart-cart-button-wrap,
body:not(.bdf-checkout) .fct-cart-page:has(.fluent-cart-cart-empty-content) .bs-shop-pay,
body:not(.bdf-checkout) .fct-cart-page:has(.fluent-cart-cart-empty-content) .bs-shop-trust {
  display: none;
}

@media (min-width: 48rem) {
  body:not(.bdf-checkout) .fct-cart-page {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem);
  }

  /* Zeile 1 gehört dem Rückweg, der über beide Spalten spannt. Ohne diese Festlegung schiebt
     das automatische Setzen ihn hinter die belegten Zeilen 1–5 der Positionsliste, er landet
     UNTER der Liste und drückt die Summen-Karte 375 px nach unten (gemessen 10.09. bei 1280 px).
     Fügt das JS ihn nicht ein, bleibt Zeile 1 leer und kostet nichts:
     grid-auto-rows ist max-content und das Gitter hat nur column-gap, keinen row-gap. */
  body:not(.bdf-checkout) .fct-cart-page > .bs-shop-back {
    grid-row: 1;
  }

  /* Positionen links über alle Zeilen; alles Übrige fällt automatisch in die rechte Spalte. */
  body:not(.bdf-checkout) .fct-cart-page .fct-cart-drawer-content-wrapper {
    grid-column: 1;
    grid-row: 2 / span 5;
  }

  body:not(.bdf-checkout) .fct-cart-page .fct-cart-total-wrapper,
  body:not(.bdf-checkout) .fct-cart-page .fluent-cart-cart-cart-button-wrap,
  body:not(.bdf-checkout) .fct-cart-page .bs-shop-pay,
  body:not(.bdf-checkout) .fct-cart-page .bs-shop-trust {
    grid-column: 2;
  }

  /* Die rechte Spalte bekommt FESTE Zeilen statt automatischer Platzierung.
     Warum so ausdrücklich: Zeile 1 gehört dem Rückweg. Fügt das JS ihn nicht ein, bleibt sie frei
     — und die automatische Platzierung füllt jede freie Zelle mit dem nächstbesten Kind. Gemessen
     am 10.09. bei 1280 px: erst rutschte die Summen-Karte 67 px über die Liste, nach dem ersten
     Versuch sprang der Kassen-Knopf über die Summe. Beides sah nach einem Zufallsfehler aus und
     wäre nur ohne JavaScript aufgetreten — also genau dann, wenn niemand hinschaut.
     Feste Zeilen sind hier keine Umständlichkeit, sondern die Bedingung dafür, dass beide Fälle
     gleich aussehen. Fehlen die JS-Kacheln (pay/trust), bleiben ihre Zeilen leer und kosten
     nichts: grid-auto-rows ist max-content, das Gitter hat keinen row-gap. */
  body:not(.bdf-checkout) .fct-cart-page .fct-cart-total-wrapper          { grid-row: 2; }
  body:not(.bdf-checkout) .fct-cart-page .fluent-cart-cart-cart-button-wrap { grid-row: 3; }
  body:not(.bdf-checkout) .fct-cart-page .bs-shop-pay                     { grid-row: 4; }
  body:not(.bdf-checkout) .fct-cart-page .bs-shop-trust                   { grid-row: 5; }

  body:not(.bdf-checkout) .fct-cart-page .fct-cart-total-wrapper {
    margin-top: 0;
  }

  body:not(.bdf-checkout) .fct-cart-page:has(.fluent-cart-cart-empty-content) .fct-cart-drawer-content-wrapper {
    grid-column: 1 / -1;
  }
}

/* 3.1 Die Position — geteilt mit der Schublade (gleiche Klassen, ein Entwurf).
   Mobil: Bild | Titel, Variante, Menge — darunter eine Zeile mit Betrag und Papierkorb.
   .fct-cart-item-info wird zu display:contents, damit Bild und Details eigene Rasterzellen
   bekommen; der Knoten bleibt im DOM für Vue erhalten. */
body:not(.bdf-checkout) .fct-cart-drawer-list .fct-cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  grid-template-areas:
    "image details"
    "summary summary";
  gap: var(--gap-s) var(--gap-m);
  align-items: start;
  padding: var(--gap-l) 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
}

body:not(.bdf-checkout) .fct-cart-drawer-list .fct-cart-item .fct-cart-item-info {
  display: contents;
}

body:not(.bdf-checkout) .fct-cart-drawer-list .fct-cart-item .fct-cart-item-image {
  grid-area: image;
  width: 4rem;
  height: auto;
  aspect-ratio: 1 / 1;
  flex: none;
  border: 1px solid var(--line-soft);
}

body:not(.bdf-checkout) .fct-cart-drawer-list .fct-cart-item .fct-cart-item-image a {
  display: block;
  height: 100%;
  border-radius: 0;
  text-decoration: none;
}

body:not(.bdf-checkout) .fct-cart-drawer-list .fct-cart-item .fct-cart-item-image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  object-fit: cover;
}

body:not(.bdf-checkout) .fct-cart-drawer-list .fct-cart-item .fct-cart-item-details {
  grid-area: details;
  min-width: 0;
  padding-right: 0;
}

body:not(.bdf-checkout) .fct-cart-drawer-list .fct-cart-item .fct-cart-item-details .fct-cart-item-title {
  display: block;
  margin: 0 0 var(--gap-xxs);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

body:not(.bdf-checkout) .fct-cart-drawer-list .fct-cart-item .fct-cart-item-details .fct-cart-item-title a {
  color: inherit;
  text-decoration: none;
}

body:not(.bdf-checkout) .fct-cart-drawer-list .fct-cart-item .fct-cart-item-details .fct-cart-item-title a:hover,
body:not(.bdf-checkout) .fct-cart-drawer-list .fct-cart-item .fct-cart-item-details .fct-cart-item-title a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.15em;
}

body:not(.bdf-checkout) .fct-cart-drawer-list .fct-cart-item .fct-cart-item-details .fct-cart-item-variant {
  margin: 0 0 var(--gap-s);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text-secondary);
}

body:not(.bdf-checkout) .fct-cart-drawer-list .fct-cart-item .fct-cart-item-details .fct-cart-item-quantity {
  margin-top: var(--gap-xs);
}

/* Zusammenfassung mobil als Zeile: Betrag links, Papierkorb rechts. */
body:not(.bdf-checkout) .fct-cart-drawer-list .fct-cart-item .fct-cart-item-summary {
  grid-area: summary;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  min-width: 0;
}

body:not(.bdf-checkout) .fct-cart-drawer-list .fct-cart-item .fct-cart-item-total {
  font-size: var(--fs-body);
  line-height: 1.1;
  white-space: nowrap;
}

/* Papierkorb: Geist-Knopf ohne Rand, 44 px Trefferfläche, Rot erst beim Berühren —
   Entfernen ist erlaubt, soll aber nicht zum Blickfang werden. */
body:not(.bdf-checkout) .fct-cart-item-remove .fct-cart-item-delete-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 calc(-1 * var(--gap-s)) 0 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-subtle);
  background-color: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

body:not(.bdf-checkout) .fct-cart-item-remove .fct-cart-item-delete-button:hover,
body:not(.bdf-checkout) .fct-cart-item-remove .fct-cart-item-delete-button:focus-visible {
  color: var(--state-error);
  border-color: var(--line);
  background-color: transparent;
}

body:not(.bdf-checkout) .fct-cart-item-remove .fct-cart-item-delete-button:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

body:not(.bdf-checkout) .fct-cart-item-remove .fct-cart-item-delete-button svg {
  width: 16px;
  height: 16px;
}

/* Auf der Seite ab 48 rem: Bild | Details | Zusammenfassung als Spalte rechts.
   In der Schublade bleibt die Mobil-Anordnung — sie ist nie breiter als 27,5 rem. */
@media (min-width: 48rem) {
  body:not(.bdf-checkout) .fct-cart-page .fct-cart-drawer-list .fct-cart-item {
    grid-template-columns: 5rem minmax(0, 1fr) auto;
    grid-template-areas: "image details summary";
    column-gap: var(--gap-l);
  }

  body:not(.bdf-checkout) .fct-cart-page .fct-cart-drawer-list .fct-cart-item .fct-cart-item-image {
    width: 5rem;
  }

  body:not(.bdf-checkout) .fct-cart-page .fct-cart-drawer-list .fct-cart-item .fct-cart-item-summary {
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    align-self: stretch;
  }

  body:not(.bdf-checkout) .fct-cart-page .fct-cart-item-remove .fct-cart-item-delete-button {
    margin: 0 calc(-1 * var(--gap-s)) calc(-1 * var(--gap-s)) 0;
  }
}


/* --------------------------------------------------------------------------
   4 · SCHUBLADE — .fct-cart-drawer-container (auf allen Shop-Seiten)
   -------------------------------------------------------------------------- */

/* Abdunkeln mit dem Anthrazit-Token statt Schwarz — wärmer, passt zur Creme.
   Fallback bei fehlendem color-mix: FluentCarts eigenes #00000080 bleibt stehen. */
body:not(.bdf-checkout) .fct-cart-drawer-container .fct-cart-drawer-overlay {
  background-color: color-mix(in srgb, var(--bg-dark) 60%, transparent);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Breite und Öffnungsposition hängen aneinander: FluentCart rechnet .open über
   calc(100% - min(100%,500px)). Wer nur die Breite ändert, bekommt einen Spalt am Rand.
   Deshalb eine Variable für beides. Flex-Spalte statt absolutem Fuß: der Fuß wird durch
   Zahlarten-Zeile und Hinweis höher als FluentCarts fest reservierte 220 px. */
body:not(.bdf-checkout) .fct-cart-drawer-container .fct-cart-drawer {
  --bs-drawer-w: min(100%, 27.5rem);
  display: flex;
  flex-direction: column;
  width: var(--bs-drawer-w);
  max-width: 100%;
  background-color: var(--bg-base);
  box-shadow: -12px 0 40px -16px color-mix(in srgb, var(--bg-dark) 45%, transparent);
  transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

body:not(.bdf-checkout) .fct-cart-drawer-container .fct-cart-drawer.open {
  left: calc(100% - var(--bs-drawer-w));
}

body:not(.bdf-checkout) .fct-cart-drawer-container .fct-cart-drawer-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  padding: var(--gap-l);
  border: 0;
  border-bottom: 1px solid var(--line);
}

body:not(.bdf-checkout) .fct-cart-drawer-header .title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-s);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-h-xs);
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  color: var(--text-primary);
}

/* Schließen: 44 px, negativ eingerückt, damit das Kreuz optisch am Rand steht. */
body:not(.bdf-checkout) .fct-cart-drawer-header .fct-cart-drawer-close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin: calc(-1 * var(--gap-s)) calc(-1 * var(--gap-s)) calc(-1 * var(--gap-s)) 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-subtle);
  background-color: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

body:not(.bdf-checkout) .fct-cart-drawer-header .fct-cart-drawer-close-button:hover {
  background-color: var(--bg-accent-soft);
}

body:not(.bdf-checkout) .fct-cart-drawer-header .fct-cart-drawer-close-button:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: -2px;
}

body:not(.bdf-checkout) .fct-cart-drawer-header .fct-cart-drawer-close-button svg {
  width: 16px;
  height: 16px;
}

body:not(.bdf-checkout) .fct-cart-drawer-container .fct-cart-drawer-content-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
}

body:not(.bdf-checkout) .fct-cart-drawer .fct-cart-drawer-list .fct-cart-item {
  padding: var(--gap-l);
}

body:not(.bdf-checkout) .fct-cart-drawer-container .fct-cart-drawer-footer {
  flex: none;
  position: static;
  width: 100%;
  border-top: 1px solid var(--line);
  background-color: var(--bg-accent-soft);
}

body:not(.bdf-checkout) .fct-cart-drawer .fct-cart-total-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-s);
  margin: 0;
  padding: var(--gap-l) var(--gap-l) 0;
  font-size: var(--fs-body);
  color: var(--text-primary);
}

body:not(.bdf-checkout) .fct-cart-drawer .fct-cart-total-wrapper > span:nth-of-type(2) {
  font-size: var(--fs-h-s);
  line-height: 1.1;
}

/* Fuß-Aktionen: kein Schatten, kein zweites Weiß — und Platz für die iOS-Home-Leiste. */
body:not(.bdf-checkout) .fct-cart-drawer-footer .fct-cart-drawer-footer-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap-s);
  padding: var(--gap-m) var(--gap-l) calc(var(--gap-l) + env(safe-area-inset-bottom, 0px));
  background-color: transparent;
  box-shadow: none;
}

body:not(.bdf-checkout) .fct-cart-drawer-footer .bs-shop-pay,
body:not(.bdf-checkout) .fct-cart-drawer-footer .bs-shop-trust {
  margin: 0;
  padding: 0 var(--gap-l);
}

body:not(.bdf-checkout) .fct-cart-drawer-footer .bs-shop-trust {
  padding-bottom: var(--gap-m);
}

/* Schwebender Öffnen-Knopf: weiße Fläche mit Linie, scharfe Kanten, kein Magenta.
   Der Zähler als Etikett in Anthrazit — ein Hinweis, kein Alarm. */
body:not(.bdf-checkout) button.fct-cart-drawer-open-btn {
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-subtle);
  background-color: var(--bg-base);
  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--bg-dark) 45%, transparent);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

body:not(.bdf-checkout) button.fct-cart-drawer-open-btn:hover {
  background-color: var(--bg-base);
  border-color: var(--text-primary);
}

body:not(.bdf-checkout) button.fct-cart-drawer-open-btn:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

body:not(.bdf-checkout) button.fct-cart-drawer-open-btn img {
  height: 24px;
}

body:not(.bdf-checkout) .fct-cart-drawer-container .fct-cart-badge-count {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--gap-xxs);
  border-radius: var(--radius-subtle);
  background-color: var(--bg-dark);
  color: var(--text-on-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1;
}

body:not(.bdf-checkout) button.fct-cart-drawer-open-btn .fct-cart-badge-count {
  top: -0.375rem;
  right: -0.375rem;
}


/* --------------------------------------------------------------------------
   5 · PRODUKTSEITE — /item/<slug>/
   Gemessen: halbe Seite grauer Platzhalter, „Buy Now" und „Add To Cart" gleichrangig,
   Preisspanne ohne Erklärung, tote Bildsymbole in den Varianten-Kacheln.
   -------------------------------------------------------------------------- */

body:not(.bdf-checkout) .fct-single-product-page {
  box-sizing: border-box;
  max-width: 71.25rem;
  margin: 0 auto var(--section-s);
  padding-inline: var(--gap-m);
}

/* FluentCart gibt unter 1290 px 30 px Seitenrand — auf 375 px zu viel; der Site-Container
   bringt schon 10 px mit. */
@media (max-width: 1290px) {
  body:not(.bdf-checkout) .fct-single-product-page {
    padding-inline: var(--gap-m);
  }
}

body:not(.bdf-checkout) .fct-single-product-page .fct-single-product-page-row {
  margin-bottom: 0;
  gap: var(--gap-xxl);
  align-items: start;
}

/* Bild schmaler als Text: das Angebot (Variante, Preis, Knopf) ist das Wichtigere.
   Container-Query wie FluentCart selbst, damit die Spalten am gleichen Punkt entstehen. */
@container product-page (min-width: 768px) {
  body:not(.bdf-checkout) .fct-single-product-page .fct-single-product-page-row {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
    gap: var(--section-xs);
  }
}

/* 5.1 Galerie */
body:not(.bdf-checkout) .fct-product-gallery-wrapper .fct-product-gallery-thumb {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: var(--radius-subtle);
}

body:not(.bdf-checkout) .fct-product-gallery-wrapper .fct-product-gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

body:not(.bdf-checkout) .fct-product-gallery-wrapper .fct-product-gallery-thumb .containerZoom {
  border-radius: 0;
}

/* Leere Thumbnail-Leiste (nur Whitespace) nimmt sonst 14 px Abstand ein. */
body:not(.bdf-checkout) .fct-product-gallery-wrapper .fct-gallery-thumb-controls:not(:has(*)) {
  display: none;
}

body:not(.bdf-checkout) .fct-product-gallery-wrapper.thumb-pos-bottom .fct-gallery-thumb-controls {
  gap: var(--gap-s);
  margin-top: var(--gap-s);
  border-radius: 0;
}

body:not(.bdf-checkout) .fct-gallery-thumb-controls .fct-gallery-thumb-control-button,
body:not(.bdf-checkout) .fct-gallery-thumb-controls .fct-gallery-see-more-button {
  width: 4.5rem;
  height: 4.5rem;
  min-width: 4.5rem;
  min-height: 4.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-subtle);
  background-color: var(--bg-accent-soft);
  transition: border-color 0.15s ease;
}

body:not(.bdf-checkout) .fct-gallery-thumb-controls .fct-gallery-thumb-control-button img {
  border-radius: 0;
}

body:not(.bdf-checkout) .fct-gallery-thumb-controls .fct-gallery-thumb-control-button:hover,
body:not(.bdf-checkout) .fct-gallery-thumb-controls .fct-gallery-thumb-control-button.active {
  border-color: var(--text-primary);
  background-color: var(--bg-accent-soft);
}

body:not(.bdf-checkout) .fct-gallery-thumb-controls .fct-gallery-thumb-control-button:focus-visible,
body:not(.bdf-checkout) .fct-gallery-thumb-controls .fct-gallery-see-more-button:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

/* 5.2 Titel — Geist statt Display-Schrift: Produktnamen sind lang („Bachata Anfängerkurs
   Teil 2") und müssen dreimal so lang noch tragen. Anthrazit statt Kit-Magenta. */
body:not(.bdf-checkout) .fct-product-summary .fct-product-title {
  margin: 0 0 var(--gap-m);
}

body:not(.bdf-checkout) .fct-product-summary .fct-product-title h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-h-m);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

/* .fct-product-meta ist im gemessenen DOM leer — dann auch keinen Abstand. */
body:not(.bdf-checkout) .fct-product-summary .fct-product-meta:not(:has(*)) {
  display: none;
}

/* Die Preisspanne „69,00€ - 79,00€" erklärt nicht, warum es zwei Preise gibt. Sie wird
   ausgeblendet (nicht entfernt); den Preis zeigt die gewählte Variante darunter, und das JS
   schreibt jeder Variante ihren eigenen Preis aus data-item-price an die Kachel. Eine
   Einzelpreis-Anzeige (.fct-product-prices ohne .fct-price-range) bleibt sichtbar. */
body:not(.bdf-checkout) .fct-product-summary .fct-product-prices.fct-price-range {
  display: none;
}

body:not(.bdf-checkout) .fct-single-product-page .fct-product-prices {
  margin: 0 0 var(--gap-l);
  font-size: var(--fs-h-s);
  line-height: 1.2;
}

/* 5.3 Kaufbereich als ruhige Karte — hier passiert das Geld. */
body:not(.bdf-checkout) .fct-product-summary .fct_buy_section {
  box-sizing: border-box;
  padding: var(--gap-l);
  border: 1px solid var(--line);
  border-radius: var(--radius-subtle);
  background-color: var(--bg-accent-soft);
}

/* Varianten als Liste von Radio-Zeilen (role=radio ist bereits im Markup). Masonry wird zur
   Spalte: zwei Kacheln nebeneinander mit halbem Text sind auf 375 px nicht lesbar. */
body:not(.bdf-checkout) .fct_buy_section .fct-product-variants,
body:not(.bdf-checkout) .fct_buy_section .fct-product-variants.column-type-masonry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-s);
  margin: 0 0 var(--gap-l);
}

body:not(.bdf-checkout) .fct-product-variants .fct-product-variant-item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  min-height: 3.5rem;
  margin: 0;
  padding: var(--gap-m) var(--gap-l) var(--gap-m) calc(var(--gap-l) + 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-subtle);
  background-color: var(--bg-base);
  box-shadow: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Radio-Marke: leerer Ring; gewählt = gefüllter Punkt mit weißem Innenring. */
body:not(.bdf-checkout) .fct-product-variants .fct-product-variant-item::before {
  content: "";
  position: absolute;
  left: var(--gap-l);
  top: 50%;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--radius-round);
  background-color: var(--bg-base);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

body:not(.bdf-checkout) .fct-product-variants .fct-product-variant-item:hover {
  border-color: var(--text-tertiary);
}

body:not(.bdf-checkout) .fct-product-variants .fct-product-variant-item.selected {
  border-color: var(--text-primary);
  /* Innenring statt zweitem Rand: die Kachel wächst nicht, das Raster bleibt ruhig. */
  box-shadow: inset 0 0 0 1px var(--text-primary);
}

body:not(.bdf-checkout) .fct-product-variants .fct-product-variant-item.selected::before {
  border-color: var(--text-primary);
  background-color: var(--text-primary);
  box-shadow: inset 0 0 0 3px var(--bg-base);
}

body:not(.bdf-checkout) .fct-product-variants .fct-product-variant-item:focus {
  outline: 0;
}

body:not(.bdf-checkout) .fct-product-variants .fct-product-variant-item:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

body:not(.bdf-checkout) .fct-product-variant-item .variant-content {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--gap-m);
  width: 100%;
  min-width: 0;
}

/* Das tote Bildsymbol in der Kachel: nur ausblenden, wenn es der Platzhalter ist —
   Varianten mit echtem Bild (Merch-Farben) behalten es. */
body:not(.bdf-checkout) .fct-product-variant-item .fct-product-variant-image:has(> img[src$="placeholder.svg"]) {
  display: none;
}

body:not(.bdf-checkout) .fct-product-variant-item .fct-product-variant-image {
  width: 2rem;
  height: 2rem;
  flex: none;
}

body:not(.bdf-checkout) .fct-product-variant-item .fct-product-variant-image img {
  border-radius: var(--radius-subtle);
}

body:not(.bdf-checkout) .fct-product-variant-item .fct-product-variant-text {
  min-width: 0;
}

body:not(.bdf-checkout) .fct-product-variant-item .fct-product-variant-title {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

/* Preis in der Kachel — FluentCarts eigener (wenn konfiguriert) und der per JS ergänzte:
   rechtsbündig im Fluss, nicht absolut über dem Text. */
body:not(.bdf-checkout) .fct-product-variant-item .fct-product-variant-price,
body:not(.bdf-checkout) .fct-product-variant-item .bs-shop-variant-price {
  position: static;
  transform: none;
  margin-left: auto;
  flex: none;
  font-size: var(--fs-small);
  line-height: 1;
  white-space: nowrap;
}

body:not(.bdf-checkout) .fct-product-variant-item .fct-product-variant-price .fct-product-variant-compare-price {
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--text-secondary);
}

/* Aktueller Preis der gewählten Variante — die eine große Zahl der Seite. */
body:not(.bdf-checkout) .fct-single-product-page .fct-product-item-price {
  margin: 0 0 var(--gap-l);
  font-size: var(--fs-h-s);
  line-height: 1.1;
}

body:not(.bdf-checkout) .fct-product-item-price .fct_price_suffix {
  display: inline-block;
  margin-left: var(--gap-s);
  vertical-align: 0.15em;
}

body:not(.bdf-checkout) .fct-single-product-page .fct-product-payment-type {
  margin: 0 0 var(--gap-m);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Menge */
body:not(.bdf-checkout) .fct_buy_section .fct-product-quantity-container {
  margin: 0 0 var(--gap-l);
}

body:not(.bdf-checkout) .fct-product-quantity-container .quantity-title {
  display: block;
  margin: 0 0 var(--gap-s);
}

/* 5.4 Die zwei Knöpfe — Rangfolge statt Gleichstand.
   „Direkt buchen" führt ohne Umweg zur Kasse und bewegt das Geld: Magenta, oben.
   „In den Warenkorb" ist der Nebenweg: Geist-Knopf, darunter. Reihenfolge per order,
   das DOM bleibt, wie FluentCart es rendert. Untereinander statt nebeneinander, weil auf
   375 px zwei Knöpfe in einer Zeile beide zu schmal für ihre Beschriftung sind. */
body:not(.bdf-checkout) .fct_buy_section .fct-product-buttons-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  margin-top: var(--gap-l);
}

body:not(.bdf-checkout) .fct-product-buttons-wrap a.fluent-cart-direct-checkout-button {
  order: 0;
}

body:not(.bdf-checkout) .fct-product-buttons-wrap .fluent-cart-add-to-cart-button {
  order: 1;
  width: 100%;
}

body:not(.bdf-checkout) .fct-product-buttons-wrap .fluent-cart-add-to-cart-button .text {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
}

/* Beschreibung und Reiter unter dem Kaufbereich, falls gepflegt. */
body:not(.bdf-checkout) .fct-single-product-page .fct-product-excerpt {
  margin: 0 0 var(--gap-l);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-secondary);
}

body:not(.bdf-checkout) .fct-single-product-page .fct-product-tab-nav {
  gap: var(--gap-l);
  margin-bottom: var(--gap-l);
  border-color: var(--line);
}

body:not(.bdf-checkout) .fct-product-tab-nav .fct-product-tab-nav-item {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

body:not(.bdf-checkout) .fct-product-tab-nav .fct-product-tab-nav-item.active {
  color: var(--text-primary);
}

body:not(.bdf-checkout) .fct-product-tab-nav .tab-active-bar {
  height: 1px;
  background-color: var(--text-primary);
}

/* Lagerabzeichen: Erfolg/Fehler aus den Zustandstokens statt aus FluentCarts Grün/Rot. */
body:not(.bdf-checkout) .fct-product-stock .fct-stock-badge {
  border-radius: var(--radius-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body:not(.bdf-checkout) .fct-product-stock .fct_status_badge_in-stock {
  background-color: var(--state-success-bg);
  color: var(--state-success);
}

body:not(.bdf-checkout) .fct-product-stock .fct_status_badge_out-of-stock {
  background-color: var(--state-error-bg);
  color: var(--state-error);
}


/* --------------------------------------------------------------------------
   6 · ÜBERSICHT — /produkte/ (Seite 7174, unverlinkt, noindex)
   Mitgestaltet, nicht entschieden: ob die Seite bleibt, Marken trennt oder schließt, ist
   GF-Entscheidung. Kein Magenta — „Ansehen" ist Navigation, kein Kauf.
   -------------------------------------------------------------------------- */

body:not(.bdf-checkout) .fct-products-wrapper {
  box-sizing: border-box;
  padding-inline: var(--gap-m);
  margin-bottom: var(--section-s);
}

/* Ansichts-Umschalter: ein Rahmen, zwei 44-px-Zellen, aktiv = Creme-Fläche. */
body:not(.bdf-checkout) .fct-products-wrapper .fct-shop-view-switcher-wrap {
  justify-content: flex-end;
  margin-bottom: var(--gap-l);
}

body:not(.bdf-checkout) .fct-shop-view-switcher-wrap .fct-shop-view-switcher {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-subtle);
  overflow: hidden;
}

body:not(.bdf-checkout) .fct-shop-view-switcher button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

body:not(.bdf-checkout) .fct-shop-view-switcher button + button {
  border-left: 1px solid var(--line);
}

body:not(.bdf-checkout) .fct-shop-view-switcher button:hover {
  background-color: var(--bg-accent-soft);
  color: var(--text-primary);
}

body:not(.bdf-checkout) .fct-shop-view-switcher button.active {
  background-color: var(--bg-accent);
  color: var(--text-primary);
}

body:not(.bdf-checkout) .fct-shop-view-switcher button:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: -2px;
}

body:not(.bdf-checkout) .fct-products-wrapper .fct-products-container {
  gap: var(--gap-l);
}

/* 6.1 Karte — Linie statt Schatten, Bild bündig, Text mit Innenabstand. */
body:not(.bdf-checkout) .fct-products-container .fct-product-card {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-subtle);
  background-color: var(--bg-base);
  transition: border-color 0.15s ease;
}

body:not(.bdf-checkout) .fct-products-container .fct-product-card:hover {
  border-color: var(--text-tertiary);
}

body:not(.bdf-checkout) .fct-product-card .fct-product-card-image-wrap {
  display: block;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
}

body:not(.bdf-checkout) .fct-product-card .fct-product-card-image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  object-fit: cover;
}

body:not(.bdf-checkout) .fct-product-card .fct-product-card-image:hover {
  opacity: 1;
}

body:not(.bdf-checkout) .fct-product-card .fct-product-card-title {
  margin: 0 0 var(--gap-xs);
  padding: var(--gap-m) var(--gap-m) 0;
  font-family: var(--font-sans);
  font-size: var(--fs-h-xs);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}

body:not(.bdf-checkout) .fct-product-card .fct-product-card-title a {
  color: inherit;
  text-decoration: none;
}

body:not(.bdf-checkout) .fct-product-card .fct-product-card-title a:hover,
body:not(.bdf-checkout) .fct-product-card .fct-product-card-title a:focus {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.15em;
}

/* Kurztext nur, wo gepflegt — auf drei Zeilen begrenzt, damit die Karten gleich hoch bleiben. */
body:not(.bdf-checkout) .fct-product-card .fct-product-card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0 0 var(--gap-s);
  padding: 0 var(--gap-m);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-secondary);
}

body:not(.bdf-checkout) .fct-product-card .fct-product-card-prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-xs);
  margin: 0;
  padding: 0 var(--gap-m) var(--gap-m);
  font-size: var(--fs-body);
  color: var(--text-primary);
}

body:not(.bdf-checkout) .fct-product-card .fct-product-card-prices .fct_price_suffix {
  margin-left: 0;
}

body:not(.bdf-checkout) .fct-product-card .fct-product-view-button {
  width: calc(100% - 2 * var(--gap-m));
  margin: auto var(--gap-m) var(--gap-m);
}

/* Lade-Skelett in Creme statt Grau. */
body:not(.bdf-checkout) .fct-products-wrapper .fluent-cart-shop-app-product-skeleton-loader {
  border-radius: var(--radius-subtle);
  background: linear-gradient(90deg, var(--bg-accent-soft) 25%, var(--bg-accent), var(--bg-accent-soft) 75%);
  background-size: 200% 100%;
}


/* --------------------------------------------------------------------------
   7 · LEERER ZUSTAND · LADEN · MELDUNGEN
   -------------------------------------------------------------------------- */

/* Leerer Warenkorb: das graue Illustrations-SVG weg (es zeigt einen Warenkorb aus einer
   anderen Welt), stattdessen ein ruhiger Block mit Satz und Rückweg. Die Serverfassung
   sitzt direkt in .page-content, die Schubladenfassung in der Schublade — beide hier. */
body:not(.bdf-checkout) .fluent-cart-cart-empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-m);
  box-sizing: border-box;
  max-width: 56rem;
  margin: 0 auto var(--section-s);
  padding: var(--section-s) var(--gap-l);
  border: 1px solid var(--line);
  border-radius: var(--radius-subtle);
  background-color: var(--bg-accent-soft);
  text-align: center;
}

body:not(.bdf-checkout) .fluent-cart-cart-empty-content > svg {
  display: none;
}

body:not(.bdf-checkout) .fluent-cart-cart-empty-content .fluent-cart-cart-empty-content-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-l);
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
}

body:not(.bdf-checkout) .fct-cart-drawer .fluent-cart-cart-empty-content {
  max-width: none;
  margin: 0;
  padding: var(--section-xs) var(--gap-l);
  border: 0;
  background-color: transparent;
}

/* Lade-Schleier über der Schublade: Weiß-Token halbtransparent, Spinner in Anthrazit. */
body:not(.bdf-checkout) .fct-cart-drawer .fct-loader-wrap {
  background: color-mix(in srgb, var(--bg-base) 70%, transparent);
}

body:not(.bdf-checkout) .fct-loader-wrap .fct-loader-spinner::before,
body:not(.bdf-checkout) .fct-loader-wrap .fct-loader-spinner::after {
  border-color: var(--text-primary);
  border-top-color: transparent;
  border-right-color: transparent;
}

/* Toast („in den Warenkorb gelegt"): Anthrazit-Fläche, Creme-Schrift, scharfe Kante. */
body:not(.bdf-checkout) .toastify {
  padding: var(--gap-m) var(--gap-l);
  border-radius: var(--radius-subtle);
  background: var(--bg-dark);
  color: var(--text-on-dark);
  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--bg-dark) 60%, transparent);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.4;
}

/* Einziges !important dieser Datei: FluentCart setzt das Schließkreuz des Toasts mit
   color:#fc0000!important — ein Signalrot auf Anthrazit. Nur !important schlägt !important. */
body:not(.bdf-checkout) .toastify .toast-close {
  color: var(--text-on-dark) !important;
  opacity: 0.7;
}


/* --------------------------------------------------------------------------
   8 · BEWEGUNG
   Übergänge sind kurz und betreffen nur Farbe, Rand und Position der Schublade.
   Wer weniger Bewegung wünscht, bekommt sie: Schublade und Schleier erscheinen sofort,
   der Warenkorb-Knopf wackelt nicht. Der Lade-Spinner bleibt — er ist Information.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body:not(.bdf-checkout) .fct-cart-drawer-container .fct-cart-drawer,
  body:not(.bdf-checkout) .fct-cart-drawer-container .fct-cart-drawer-overlay,
  body:not(.bdf-checkout) .fct-product-variants .fct-product-variant-item,
  body:not(.bdf-checkout) .fct-product-variants .fct-product-variant-item::before,
  body:not(.bdf-checkout) .fct-products-container .fct-product-card,
  body:not(.bdf-checkout) .fct-cart-item-quantity .qty-btn,
  body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-decrease-button,
  body:not(.bdf-checkout) .fct-product-quantity .fct-quantity-increase-button,
  body:not(.bdf-checkout) .fct-cart-item-remove .fct-cart-item-delete-button,
  body:not(.bdf-checkout) button.fct-cart-drawer-open-btn {
    transition: none;
  }

  body:not(.bdf-checkout) .fluent-cart-shake-cart-button {
    animation: none;
  }

  body:not(.bdf-checkout) .fct-products-wrapper .fluent-cart-shop-app-product-skeleton-loader {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   9 · Platzhalter auf /produkte/ (GF-Entscheidung 10.09.2026)
   Kurse, Mitgliedschaft und Festival-Tickets gehoeren nicht in den Shop — sie haben eigene
   Seiten. Bis es echte Shop-Ware gibt (Onlinekurse, Merch), steht hier eine ruhige Ansage
   statt eines Rasters, das drei Marken mischt. Kein Magenta: hier bewegt keine Handlung Geld.
   -------------------------------------------------------------------------- */
body:not(.bdf-checkout) .bs-shop-soon {
  max-width: 34rem;
  margin: var(--section-xs) auto var(--section-s);
  padding: var(--gap-xxl) var(--gap-xl);
  background: var(--bg-accent-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-subtle);
  text-align: center;
}

body:not(.bdf-checkout) .bs-shop-soon__eyebrow {
  margin: 0 0 var(--gap-s);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

body:not(.bdf-checkout) .bs-shop-soon__titel {
  margin: 0 0 var(--gap-m);
  font-family: var(--font-sans);
  font-size: var(--fs-h-s);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
}

body:not(.bdf-checkout) .bs-shop-soon__text {
  margin: 0 0 var(--gap-xl);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Sekundaerform (Umriss), nicht die Magenta-Hauptform: der Kursplan ist der Weg weiter,
   aber hier wird nichts gekauft. */
body:not(.bdf-checkout) .bs-shop-soon__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--gap-s) var(--gap-xl);
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-button);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-primary);
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

body:not(.bdf-checkout) .bs-shop-soon__cta:hover,
body:not(.bdf-checkout) .bs-shop-soon__cta:focus-visible {
  background: var(--text-primary);
  color: var(--bg-base);
}