/* FOGSMOKE Warenkorbseite v1 — Besitzer: DRAWER-FEINSCHLIFF, 28.08.2026
   Freigabe: Design-Shotgun Variante F (Kompakt-Liste + schwarzes Kassenband),
   Ablage ~/.gstack/projects/FOGSMOKE/designs/warenkorb-mobil-20260828/.
   Ersetzt fuer die MOBILE Warenkorbseite die Ticket-Kasse-Freigabe vom 20.08.
   (Ansage Yunus 28.08.); KONTAKTs .fsc-ticket bleibt als Detail-Uebersicht
   stehen, nur sein ZUR-KASSE-Knopf wandert mobil ins fixe Kassenband.
   Ohne fs-warenkorb.js bleibt die Seite voll funktionsfaehig (Regel Null):
   dann kein Band, kein Merkmal-Filter — nur die deterministischen Ausblendungen. */

/* ---- Datenzeilen-Aufraeumung (alle Breiten, Befund 27.08.) ---- */
/* Artikelnummer/Hersteller/Versandgewicht raus; Merkmale filtert fs-warenkorb.js
   (Geschmack bleibt, GHS-Zeilen gehoeren dem fsc-Klappknopf und bleiben unberuehrt). */
.container.basket #cart-form li.sku,
.container.basket #cart-form li.manufacturer,
.container.basket #cart-form li.weight {
  display: none;
}

/* Whitelist- und Dubletten-Ausblendungen aus fs-warenkorb.js (auch fuer
   Elemente ausserhalb des Formulars, z.B. den Gratisgeschenk-Hinweis). */
.container.basket .fsw-hide {
  display: none !important;
}

/* Coupon-Knopf im Kanon — ALLE Breiten. Der Gegner ist ein Juli-Relikt:
   custom.css importiert /staging_custom_fix.css (Webroot!), dort steht
   ".container.basket #basket-coupon-form .btn-outline-primary" mit
   Lila-Pille (var(--fs-magenta), 999px) und !important bei Spezifitaet
   (1,3,0). Import-Sheets sind im CSSOM hinter importRule.styleSheet
   versteckt — normale Regel-Scans uebersehen sie. Zwei IDs (2,1,0)
   uebertrumpfen sicher. */
#content #basket-coupon-form .btn {
  min-height: 44px;
  background: var(--brand-aktion, #c90f88) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-weight: 850;
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
#content #basket-coupon-form .btn:hover,
#content #basket-coupon-form .btn:focus-visible {
  background: var(--brand-aktion-hover, #830779) !important;
}
#content #basket-coupon-form input.form-control {
  border: 1px solid var(--brand-tinte, #111114);
  border-radius: 0 !important;
}

/* GHS raus aus dem Warenkorb (Ansage Yunus 28.08.; PDP behaelt die
   Pflichthinweise im Reiter). Knopf-li und Zeilen entstehen zur LAUFZEIT
   durch fs-checkout.js — deshalb CSS statt Whitelist-Lauf; fs-warenkorb.js
   raeumt im Nachlauf zusaetzlich per fsw-hide (Fallback ohne :has). */
.container.basket #cart-form li.fsc-ghs-li,
.container.basket #cart-form li:has(.fsc-ghs-toggle) {
  display: none !important;
}

/* Unsichtbarer 44px-Enter-Fangknopf staut Leerraum (gleiche Falle wie im
   Drawer geloest) — aus dem Fluss nehmen, im DOM lassen. */
.container.basket #cart-form > .btn-hidden,
.container.basket #cart-form .btn-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Kanon-Stepper: rechteckig, Tinte-Kontur, weisse Flaeche. */
.container.basket .qty-wrapper .form-counter .btn {
  background: #fff;
  color: var(--brand-tinte, #111114);
  border: 1px solid var(--brand-tinte, #111114);
  border-radius: 0;
  box-shadow: none;
}
.container.basket .qty-wrapper .form-counter .btn:hover {
  background: var(--brand-tinte, #111114);
  color: #fff;
}
.container.basket .qty-wrapper .form-counter input.form-control {
  border-top: 1px solid var(--brand-tinte, #111114);
  border-bottom: 1px solid var(--brand-tinte, #111114);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  text-align: center;
  font-weight: 800;
  /* Theme-Festhoehe (37px) liess unter dem Feld einen Grauspalt in der
     44px-Gruppe — auf Gruppenhoehe strecken. */
  height: auto;
  align-self: stretch;
}

/* Band existiert im DOM auf allen Breiten, sichtbar nur mobil (unten). */
.fsw-band { display: none; }

/* ---- Mobile Variante F ---- */
@media (max-width: 767.98px) {
  /* Kopf als schwarze Vollbreiten-Leiste (Anton ueber FS Display).
     color !important: die Seitenueberschriften-Kaskade (fs-pages/custom)
     faerbt h1-Text sonst Tinte-auf-Tinte — unsichtbar. */
  .container.basket h1.basket-heading {
    margin: 0 -15px 14px;
    padding: 14px 16px;
    background: var(--brand-tinte, #111114);
    color: #fff !important;
    font-family: "FS Display", Anton, "Arial Black", Impact, sans-serif;
    font-weight: 400;
    font-size: 1.45rem;
    letter-spacing: 0.015em;
    text-transform: uppercase;
  }
  .container.basket h1.basket-heading .fsw-count { color: var(--brand-aktion, #c90f88); }

  /* Positionen dichter takten. */
  .container.basket #cart-form .cart-items-body td { padding-top: 0.9rem; padding-bottom: 0.9rem; }

  /* Band aktiv: Original-Kassenknopf im Ticket ausblenden (Dublette),
     Platz fuer das fixe Band, Trusted-Shops-Siegel parken (Kollision,
     Praezedenz FILTERBAR im Drawer). */
  /* HANDY-REGEL (Yunus 28.08.): echte Geraetehoehe rechnen, nicht das
     schmale Desktopfenster. iOS-Safari legt unten eine Adressleiste ueber
     alles Fixe -> safe-area einrechnen, sonst verschwindet die Trustzeile. */
  body.fsw-band-open { padding-bottom: calc(205px + env(safe-area-inset-bottom, 0px)); }
  /* Der "nach oben"-Knopf des Themes lag mit z-index 100 UNTER dem Band
     (z 1030) und war unerreichbar; ueber das Band gehoben ueberdeckte er die
     Rechtszeile (Impressum). Auf der Warenkorbseite mit Band ist er ohnehin
     ueberfluessig - mobil ausblenden (gleiche Loesung wie beim TS-Siegel). */
  body.fsw-band-open .smoothscroll-top { display: none !important; }
  /* !important: eine fremde Kaskade haelt den Knopf sonst auf display:block. */
  body.fsw-band-open .cart-summary #cart-checkout-btn { display: none !important; }

  /* Dubletten zur Bandanzeige mobil aus: KONTAKTs Ticket-Kopf (fsc-thead)
     und Zahlarten-/Bewertungszeile (fsc-trust) entstehen zur Laufzeit,
     Summen-/USt-Zeilen stehen im Band. PayPal-Express, Fog-Coin und
     Versandkosten-Hinweis bleiben. */
  body.fsw-band-open .fsc-thead,
  body.fsw-band-open .fsc-trust,
  body.fsw-band-open .cart-summary .row.tax,
  body.fsw-band-open .cart-summary .basket-summary-total {
    display: none !important;
  }

  /* Gratisversand-Fortschritt unter den Artikeln (von fs-warenkorb.js
     nach KONTAKTs Lauf dorthin gesetzt). */
  .fsw-progress {
    padding: 4px 0 10px;
    border-bottom: 1px solid #ead2e8;
    margin-bottom: 4px;
  }

  /* Rabattcode im Kanon: rechteckig, Magenta-Knopf statt Lila-Pille. */
  .fsw-coupon {
    margin-top: 14px;
    border: 1px solid #ead2e8;
    border-radius: 0 !important;
  }
  /* Ticket-Rest (Versandkosten, Fog-Coin, PayPal-Express) nicht am Coupon
     kleben lassen. */
  body.fsw-rearranged .cart-summary { margin-top: 18px; }
  .fsw-coupon .card-header {
    background: #faf7fa;
    border-radius: 0 !important;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
  .fsw-coupon input.form-control {
    border: 1px solid var(--brand-tinte, #111114);
    border-radius: 0 !important;
  }
  body.fsw-band-open [id^="trustbadge-container"] { display: none !important; }

  /* Das schwarze Kassenband (Markup aus fs-warenkorb.js). */
  .fsw-band {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1030;
    background: var(--brand-tinte, #111114);
    color: #fff;
    padding: 13px 16px calc(11px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 24px rgba(17, 17, 20, 0.28);
    border-radius: 0;
  }
  .fsw-band .fsw-l1 { display: flex; justify-content: space-between; align-items: baseline; }
  .fsw-band .fsw-lbl {
    font-family: "FS Display", Anton, "Arial Black", Impact, sans-serif;
    font-weight: 400;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
  /* Freigabe-Detail: Summe GROSS und in Textschrift — Anton-Ziffern waren
     schlecht lesbar; helles Magenta wegen Kontrast auf Tinte (F26-Logik). */
  .fsw-band .fsw-sum {
    font-family: "FS Text", "DM Sans", Arial, sans-serif;
    font-weight: 850;
    font-size: 1.7rem;
    line-height: 1.05;
    color: #ff4fc0;
  }
  .fsw-band .fsw-l2 { color: #b9b6bf; font-size: 0.72rem; margin: 2px 0 9px; }
  .fsw-band .fsw-kasse,
  .fsw-band a.fsw-kasse.btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 46px;
    background: var(--brand-aktion, #c90f88);
    color: #fff;
    border: 0; border-radius: 0;
    font-weight: 850; font-size: 0.86rem;
    letter-spacing: 0.03em; text-transform: uppercase;
  }
  .fsw-band .fsw-kasse:hover { background: var(--brand-aktion-hover, #830779); color: #fff; }
  .fsw-band .fsw-weiter {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 40px; margin-top: 8px;
    background: transparent; color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 0;
    font-weight: 800; font-size: 0.8rem;
    letter-spacing: 0.03em; text-transform: uppercase;
    text-decoration: none;
  }
  .fsw-band .fsw-weiter:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
  .fsw-band .fsw-trust {
    margin-top: 9px;
    color: #b9b6bf;
    font-size: 0.7rem; font-weight: 650;
    text-align: center;
  }
}