/** Shopify CDN: Minification failed

Line 551:9 Expected identifier but found whitespace
Line 551:10 Unexpected "0"

**/
/* ==========================================================================
   FluxLights — Warenkorb-Drawer
   Eigenes Design (freigegebener Entwurf 2026-08-07). Das Markup liegt in
   snippets/cart-drawer.liquid; hier steht ausschließlich die Gestaltung.
   ========================================================================== */

cart-drawer {
  --fl-ink: #131417;
  --fl-slate: #6b7280;
  --fl-muted: #8a919c;
  --fl-line: #e8eaee;
  --fl-cloud: #f6f7f9;
  --fl-green: #17b26a;
  --fl-green-dark: #12854e;
  --fl-red: #e0322d;
}

/* ---------- Panel ---------- */
cart-drawer .drawer__inner {
  width: min(100vw, 430px);
  max-width: 100%;
  background: #fff;
  font-family: var(--font-body-family);
  color: var(--fl-ink);
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  border-radius: 0;
}

/* ---------- Kopf ---------- */
.fl-dh {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--fl-line);
  flex: 0 0 auto;
}
.fl-dh__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  flex: 1 1 auto;
  color: var(--fl-ink);
}
.fl-dh__count {
  flex: 0 0 auto;
  background: var(--fl-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}
.fl-dh__x,
.fl-x {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--fl-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 8px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
}
.fl-dh__x:hover,
.fl-x:hover { background: var(--fl-cloud); }
.fl-dh__x svg,
.fl-x svg { width: 17px; height: 17px; }

/* ---------- Zuspruch ---------- */
.fl-cheer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 11px 18px;
  background: var(--fl-cloud);
  border-bottom: 1px solid var(--fl-line);
  font-size: 12px;
  color: #3d434c;
  flex: 0 0 auto;
}
.fl-cheer svg { width: 14px; height: 14px; color: var(--fl-green); flex: 0 0 auto; }
.fl-cheer b { font-weight: 700; color: var(--fl-green-dark); }

/* ---------- Positionsliste ---------- */
cart-drawer cart-drawer-items {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}
.fl-form { margin: 0; }
.fl-items { display: grid; gap: 10px; padding: 12px 14px; }

.fl-item {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--fl-line);
  border-radius: 12px;
  background: #fff;
}
.fl-item__media {
  width: 76px;
  height: 76px;
  border-radius: 9px;
  background: var(--fl-cloud);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.fl-item__media img { width: 100%; height: 100%; object-fit: contain; display: block; }

.fl-item__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fl-item__top { display: flex; align-items: flex-start; gap: 8px; }
.fl-item__name {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--fl-ink);
  text-decoration: none;
  flex: 1 1 auto;
}
.fl-item__name:hover { text-decoration: underline; }
.fl-item__variant { font-size: 10.5px; color: var(--fl-muted); margin: 0; }

.fl-item__del { flex: 0 0 auto; display: block; }
.fl-item__del-btn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #b6bcc7;
  border-radius: 6px;
  text-decoration: none;
}
.fl-item__del-btn:hover { color: var(--fl-red); background: #fdf1f1; }
.fl-item__del-btn svg { width: 15px; height: 15px; display: block; }

.fl-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e7f7ee;
  color: var(--fl-green-dark);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  margin-top: 6px;
  align-self: flex-start;
}
.fl-chip svg { width: 11px; height: 11px; }

.fl-item__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

/* Menge */
quantity-input.fl-qty,
.fl-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--fl-line);
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
}
.fl-qty__btn {
  width: 28px;
  height: 28px;
  border: none;
  background: #fff;
  color: var(--fl-ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.fl-qty__btn:hover { background: var(--fl-cloud); }
.fl-qty__input {
  width: 32px;
  height: 28px;
  border: none;
  text-align: center;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fl-ink);
  background: #fff;
  padding: 0;
  -moz-appearance: textfield;
}
.fl-qty__input::-webkit-outer-spin-button,
.fl-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fl-qty__input:focus { outline: none; }

.fl-item__price { text-align: right; line-height: 1.2; }
.fl-item__now { font-size: 14px; font-weight: 700; display: block; color: var(--fl-ink); }
.fl-item__old { font-size: 11px; color: var(--fl-muted); text-decoration: line-through; }

cart-drawer .cart-item__error { margin: 0; }
cart-drawer .cart-item__error-text { font-size: 11px; color: var(--fl-red); }
cart-drawer .cart-item__error-text:empty { display: none; }

/* ---------- Upsell ---------- */
.fl-up {
  border: 1px dashed #d7dbe3;
  border-radius: 12px;
  padding: 11px 12px;
  margin: 0 0 12px;
}
.fl-up__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fl-muted);
  margin: 0 0 8px;
}
.fl-up__row { display: flex; align-items: center; gap: 10px; }
.fl-up__thumb {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid var(--fl-line);
  overflow: hidden;
  flex: 0 0 auto;
  background: #fff;
}
.fl-up__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fl-up__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.fl-up__name { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.fl-up__sub { font-size: 9.5px; color: var(--fl-muted); }
.fl-up__btn {
  border: 1.5px solid var(--fl-ink);
  background: #fff;
  color: var(--fl-ink);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}
.fl-up__btn:hover { background: var(--fl-ink); color: #fff; }
.fl-up__btn:disabled { opacity: 0.6; cursor: default; }

/* ---------- Fuß ---------- */
cart-drawer .cart-drawer__footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--fl-line);
  padding: 14px 18px 16px;
  background: #fff;
}
.fl-sum { display: grid; gap: 5px; margin: 0 0 6px; }
.fl-sum__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--fl-slate);
}
.fl-sum__row--save { color: var(--fl-green-dark); font-weight: 700; }
.fl-sum__row--save span:last-child { color: var(--fl-green-dark); }
.fl-free { color: var(--fl-green-dark); font-weight: 700; letter-spacing: 0.03em; }

.fl-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 8px 0 2px;
}
.fl-total__l { font-size: 14px; font-weight: 700; }
.fl-total__v { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.fl-vat { font-size: 10.5px; color: var(--fl-muted); margin: 0 0 12px; }

.fl-cta {
  width: 100%;
  border: none;
  border-radius: 12px;
  background: var(--fl-ink);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  padding: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 10px 24px -12px rgba(22, 24, 33, 0.6);
  text-decoration: none;
}
.fl-cta:hover { background: #000; }
.fl-cta svg { width: 15px; height: 15px; flex: 0 0 auto; }
.fl-cta--ghost {
  background: #fff;
  color: var(--fl-ink);
  border: 1.5px solid var(--fl-ink);
  box-shadow: none;
}
.fl-cta--ghost:hover { background: var(--fl-ink); color: #fff; }

/* ---------- Vertrauen / Zahlarten ---------- */
.fl-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 12px;
}
.fl-trust span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--fl-muted);
}
.fl-trust svg { width: 13px; height: 13px; color: #b6bcc7; }

.fl-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--fl-line);
}
.fl-pay .fl-pay__icon { height: 20px; width: auto; display: block; }

/* ---------- Leerer Warenkorb ---------- */
.fl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
  padding: 24px;
  text-align: center;
}
.fl-empty .fl-x { position: absolute; top: 14px; right: 14px; }
.fl-empty__title { font-size: 17px; font-weight: 700; margin: 0; }
.fl-empty .fl-cta { width: auto; padding: 13px 24px; }

@media (max-width: 749px) {
  cart-drawer .drawer__inner { width: 100vw; }
  .fl-item { grid-template-columns: 66px 1fr; padding: 11px; gap: 11px; }
  .fl-item__media { width: 66px; height: 66px; }
}

/* ---------- Lieferzeile direkt über dem Button ---------- */
.fl-deliv {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
}
.fl-deliv__rule { flex: 1 1 auto; height: 1px; background: var(--fl-line); }
.fl-deliv__text {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--fl-muted);
  white-space: nowrap;
}
.fl-deliv__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fl-green); flex: 0 0 auto; }
.fl-deliv__stock { color: #6f9d72; }

/* Dawn-Klassen an den Steppern sind nur für dessen JS nötig — sein Standard-
   Aussehen wird hier bewusst überschrieben. */
cart-drawer .fl-qty__btn.quantity__button {
  width: 28px; height: 28px; min-width: 0; min-height: 0;
  padding: 0; margin: 0; border: none; background: #fff;
  font-size: 15px; color: var(--fl-ink);
}
cart-drawer .fl-qty__btn.quantity__button svg { display: none; }
cart-drawer .fl-qty__btn.quantity__button.disabled { opacity: .35; cursor: default; }
cart-drawer .fl-qty__input.quantity__input {
  width: 32px; height: 28px; min-height: 0; padding: 0; border: none;
  text-align: center; font-size: 12.5px; font-weight: 700;
}

/* Stepper darf in der Flex-Zeile nicht schrumpfen (sonst wird er plattgedrückt) */
cart-drawer quantity-input.fl-qty { flex: 0 0 auto; width: auto; }
cart-drawer .fl-item__price { flex: 0 1 auto; min-width: 0; }

/* Geschlossener Zustand: Drawer UND Overlay müssen unsichtbar sein.
   Ohne diese Regel liegt das dunkle Overlay dauerhaft über der Seite
   (Seite wirkt grau, kein Drawer sichtbar). */
cart-drawer.drawer { visibility: hidden; }
cart-drawer.drawer.active { visibility: visible; }

/* Produktname einzeilig halten (bricht sonst z.B. zu "SeatGlow / V2" um) */
cart-drawer .fl-item__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Dawn setzt `.cart-drawer .cart-item { grid-template-columns: repeat(4,1fr) }`
   (Spezifität 0,2,0) und drückt damit unser 2-Spalten-Layout auf vier gleich
   breite Spalten — Text und Preis landen dann gequetscht in der Mitte.
   Diese Regeln stechen das mit höherer Spezifität aus.
   ========================================================================== */
cart-drawer .fl-item.cart-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
}
cart-drawer .fl-item.cart-item > .fl-item__media { grid-column: 1; }
cart-drawer .fl-item.cart-item > .fl-item__body { grid-column: 2; min-width: 0; }

@media (max-width: 749px) {
  cart-drawer .fl-item.cart-item {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 11px;
    padding: 11px;
  }
}

/* Gesamtsumme dezenter — 22px wirkte zu wuchtig */
cart-drawer .fl-total__v { font-size: 17px; font-weight: 700; }
cart-drawer .fl-total__l { font-size: 13px; font-weight: 700; }
cart-drawer .fl-total { margin: 6px 0 2px; }

/* ================= Kompakte Karten (mehr Positionen ohne Scrollen) ========= */
cart-drawer .fl-items { gap: 8px; padding: 10px 12px; }

cart-drawer .fl-item.cart-item {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
}
cart-drawer .fl-item__media { width: 58px; height: 58px; border-radius: 8px; }
cart-drawer .fl-item__body { gap: 1px; }
cart-drawer .fl-item__name { font-size: 12.5px; line-height: 1.3; }
cart-drawer .fl-item__variant { font-size: 10px; }
cart-drawer .fl-item__bottom { margin-top: 4px; }
cart-drawer .fl-item__now { font-size: 13px; }
cart-drawer .fl-item__old { font-size: 10.5px; }
cart-drawer .fl-item__del-btn { padding: 3px; }
cart-drawer .fl-item__del-btn svg { width: 14px; height: 14px; }

cart-drawer .fl-qty__btn.quantity__button { width: 24px; height: 24px; font-size: 13px; }
cart-drawer .fl-qty__input.quantity__input { width: 26px; height: 24px; font-size: 12px; }

@media (max-width: 480px) {
  cart-drawer .fl-item.cart-item { grid-template-columns: 54px minmax(0, 1fr); gap: 9px; padding: 8px 9px; }
  cart-drawer .fl-item__media { width: 54px; height: 54px; }
}

/* ---------- Zuspruch-Band wieder wie im Entwurf ---------- */
cart-drawer .fl-cheer {
  padding: 12px 18px 13px;
  font-size: 12px;
  gap: 9px;
}
cart-drawer .fl-cheer svg { width: 15px; height: 15px; stroke-width: 2.6; }

/* ---------- Zahlungslogos (Trust-Zeile entfaellt) ---------- */
cart-drawer .fl-pay { margin-top: 12px; padding-top: 12px; gap: 8px; }

/* Hoehenfresser in der Karte: Dawn-Stepper, Rabatt-Chip, leere Fehlerzeile */
cart-drawer quantity-input.fl-qty { height: 24px; min-height: 0; }
cart-drawer .fl-item .fl-chip {
  font-size: 9.5px; padding: 2px 6px; margin-top: 3px; align-self: flex-start;
}
cart-drawer .fl-item .fl-chip svg { width: 9px; height: 9px; }
cart-drawer .fl-item .cart-item__error { margin: 0; }
cart-drawer .fl-item .cart-item__error:empty { display: none; }

/* Preis einzeilig statt gestapelt -> spart eine ganze Zeile pro Karte */
cart-drawer .fl-item__bottom { padding-top: 0; }
cart-drawer .fl-item__price {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 6px;
}
cart-drawer .fl-item__now { display: inline; }

/* Leere zweite Grid-Zeile in der Karte nicht mit Abstand bezahlen */
cart-drawer .fl-item.cart-item { column-gap: 10px; row-gap: 0; }

/* Schliessen-Button: Dawn setzt .cart-drawer .drawer__close absolut auf right:-1rem
   -> ragte aus dem Panel und lag ueber dem Positionszaehler. */
cart-drawer .fl-dh__x.drawer__close {
  position: static;
  inset: auto;
  width: 30px;
  height: 30px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  transform: none;
}
cart-drawer .fl-dh__x.drawer__close svg { width: 17px; height: 17px; }

/* Echter Bestandshinweis (nur bei getracktem Lager <= 10) */
cart-drawer .fl-item__stock {
  margin: 2px 0 0;
  font-size: 10px;
  font-weight: 700;
  color: #c2410c;
  letter-spacing: .01em;
}

  margin: 0 0 6px; font-size: 11.5px; color: #3d434c; text-align: center;
}

/* Laenderbasierte Lieferzeile: Flagge + Land + Laufzeit */
cart-drawer .fl-deliv__text { gap: 6px; }
cart-drawer .fl-flag {
  width: 17px; height: 12px; border-radius: 2px; flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(16, 19, 26, .10); display: block;
}
cart-drawer .fl-deliv__country { font-weight: 600; color: #6b7280; }
cart-drawer .fl-deliv__dot { color: #c3c8d0; }

/* ---------- Zuspruch-Band: 1:1 aus dem freigegebenen Entwurf (.ship) ---------- */
cart-drawer .fl-cheer {
  display: block;
  margin: 0;
  padding: 12px 18px 14px;
  background: var(--fl-cloud);
  border-bottom: 1px solid var(--fl-line);
  flex: 0 0 auto;
}
cart-drawer .fl-cheer__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin: 0 0 8px;
  color: var(--fl-ink);
}
cart-drawer .fl-cheer__row svg { width: 14px; height: 14px; color: var(--fl-green); flex: 0 0 auto; }
cart-drawer .fl-cheer__row b { font-weight: 700; color: inherit; }
cart-drawer .fl-cheer__bar {
  height: 5px; border-radius: 999px; background: #e2e5ea; overflow: hidden;
}
cart-drawer .fl-cheer__fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #17b26a, #0ea05e);
  transition: width .35s ease;
}


/* ---------- Zusammenfassung enger ziehen (2026-08-12) ----------
   Am Handy war der untere Teil des Warenkorbs zur Haelfte von der
   Betriebssystemleiste verdeckt. Der Steuerhinweis steht jetzt hinter
   „Gesamt“ statt darunter, die Zahlungssymbole ruecken an den Knopf und
   die Abstaende in der Spalte sind kleiner. */
.fl-total__l {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.fl-total__vat {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--fl-muted);
  letter-spacing: 0;
}

cart-drawer .fl-sum { gap: 3px; margin-bottom: 2px; }
cart-drawer .fl-total { margin: 4px 0 0; }
cart-drawer .fl-deliv { margin: 8px 0; }
cart-drawer .fl-cta { margin-top: 8px; }

/* Die Symbole gehoeren optisch zum Knopf, nicht in eine eigene Zone */
cart-drawer .fl-pay {
  margin-top: 7px;
  padding-top: 0;
  border-top: 0;
  gap: 7px;
}
cart-drawer .fl-pay .fl-pay__icon { height: 17px; }

@media screen and (max-width: 749px) {
  cart-drawer .fl-total__v { font-size: 19px; }
  cart-drawer .fl-deliv { margin: 6px 0; }
  cart-drawer .fl-cta { margin-top: 6px; }
  cart-drawer .fl-pay { margin-top: 6px; }
}