/* ============================================================================
   BLOOM CHÉRIE — SHOP-KOMPONENTEN
   Produktkarte · Warenkorb-Drawer · 3-Schritt-Checkout · Trust · Social Proof
   Setzt bloom-ds.css voraus (Tokens).
   ========================================================================== */

/* ══ 1. TRUST-LEISTE ══════════════════════════════════════════════════════
   Direkt unter dem Hero. Beantwortet die drei Fragen, die jeden Erstkäufer
   vom Kauf abhalten: Kommt es an? Ist es frisch? Was, wenn nicht?        */

.bc-trustbar {
  background: var(--surface-raised);
  border-block: 1px solid var(--line);
  padding: var(--sp-5) var(--sp-4);
}
.bc-trustbar__grid {
  max-width: 1180px; margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5);
}
.bc-trust {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-family: var(--font-ui);
}
.bc-trust__icon {
  flex: 0 0 40px; height: 40px; display: grid; place-items: center;
  background: var(--brand-soft); border-radius: var(--r-full);
  color: var(--brand);
}
.bc-trust__icon svg { width: 20px; height: 20px; }
.bc-trust__t { display: block; font-size: var(--text-sm); font-weight: 600;
               color: var(--ink); line-height: 1.3; }
.bc-trust__d { display: block; margin-top: 2px; font-size: var(--text-xs);
               color: var(--ink-mute); line-height: 1.45; }

@media (max-width: 900px) {
  .bc-trustbar__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}
@media (max-width: 480px) {
  .bc-trustbar { padding: var(--sp-4) var(--sp-4); }
  .bc-trustbar__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .bc-trust { flex-direction: column; gap: var(--sp-2); }
  .bc-trust__icon { flex-basis: 32px; height: 32px; }
}

/* ══ 2. PRODUKTKARTE ══════════════════════════════════════════════════════
   Die Karte selbst ist KEIN Button mehr. Sie enthält zwei getrennte,
   benannte Aktionen: „Details" (Link) und „In den Warenkorb" (Button).
   Vorher war die ganze Karte klickbar → der Nutzer konnte nicht wissen,
   was passiert (Norman: fehlender Signifier, Gulf of Execution).        */

.bc-pcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface-raised); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: box-shadow var(--dur-ui) var(--ease-out),
              transform var(--dur-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .bc-pcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
  .bc-pcard:hover .bc-pcard__img img { transform: scale(1.045); }
}
/* Fokus auf einem Kind hebt die ganze Karte hervor */
.bc-pcard:focus-within { box-shadow: var(--shadow-lg); }

.bc-pcard__img {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--surface-sunken);
}
.bc-pcard__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 420ms var(--ease-out);
}
.bc-pcard__badge {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  background: var(--surface-raised); color: var(--brand);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full);
  font: 600 var(--text-xs)/1.5 var(--font-ui);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}

.bc-pcard__body { padding: var(--sp-4); display: flex; flex-direction: column;
                  gap: var(--sp-2); flex: 1; }
.bc-pcard__name {
  margin: 0; font: 400 var(--text-xl)/var(--leading-snug) var(--font-display);
  color: var(--ink);
}
/* Der Titel-Link dehnt sich über das Bild aus — große Trefferfläche,
   ohne die ganze Karte zu einem mehrdeutigen Button zu machen. */
.bc-pcard__name a { color: inherit; text-decoration: none; }
.bc-pcard__name a::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 60%;
}
.bc-pcard__name a:hover { text-decoration: underline;
                          text-underline-offset: 3px; }

.bc-pcard__meta { font: 400 var(--text-sm)/1.5 var(--font-ui);
                  color: var(--ink-mute); }
.bc-pcard__price {
  display: flex; align-items: baseline; gap: var(--sp-2);
  font: 600 var(--text-lg)/1.2 var(--font-ui); color: var(--ink);
}
.bc-pcard__price small { font-size: var(--text-xs); font-weight: 400;
                         color: var(--ink-mute); }

.bc-pcard__actions { margin-top: auto; padding-top: var(--sp-3);
                     position: relative; z-index: 1; }

/* „Hinzugefügt"-Zustand: der Button bestätigt sich selbst, statt einen
   Dialog zu öffnen (modeless feedback statt Unterbrechung). */
.bc-pcard__add[data-added="true"] {
  background: var(--success); box-shadow: none;
}

.bc-pcard--hidden { display: none; }

/* ══ 3. WARENKORB-DRAWER + 3-SCHRITT-CHECKOUT ════════════════════════════ */

.bc-fab {
  position: fixed; right: var(--sp-5);
  bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
  z-index: var(--z-fab);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 52px; padding: var(--sp-3) var(--sp-5);
  background: var(--brand); color: var(--ink-invert);
  border: none; border-radius: var(--r-full); cursor: pointer;
  font: 500 var(--text-base)/1 var(--font-ui);
  box-shadow: var(--shadow-brand);
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-fast) ease;
}
.bc-fab:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .bc-fab:hover { background: var(--brand-hover); } }
.bc-fab__count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-full);
  background: var(--ink-invert); color: var(--brand);
  font: 600 var(--text-xs)/22px var(--font-ui); text-align: center;
}
/* Leerer Warenkorb: der Knopf verschwindet nicht (er würde „springen"),
   er tritt nur zurück. */
.bc-fab[data-empty="true"] { background: var(--ink); box-shadow: var(--shadow-md); }
.bc-fab[data-empty="true"] .bc-fab__count { display: none; }

.bc-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(26,20,22,.48); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-drawer) var(--ease-out);
}
.bc-overlay[data-open="true"] { opacity: 1; pointer-events: auto; }

.bc-drawer {
  position: fixed; inset-block: 0; right: 0; z-index: var(--z-drawer);
  width: min(460px, 100%); display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); font-family: var(--font-ui);
  box-shadow: -12px 0 40px rgba(26,20,22,.18);
  transform: translateX(100%);
  transition: transform var(--dur-drawer) var(--ease-drawer);
}
.bc-drawer[data-open="true"] { transform: translateX(0); }

.bc-drawer__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
}
.bc-drawer__title { margin: 0; flex: 1;
  font: 400 var(--text-xl)/1.2 var(--font-display); color: var(--brand); }
.bc-drawer__close {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: none; border-radius: var(--r-full);
  color: var(--ink-mute); cursor: pointer; font-size: 22px; line-height: 1;
  transition: background-color var(--dur-fast) ease;
}
@media (hover: hover) { .bc-drawer__close:hover { background: var(--surface-sunken); } }

.bc-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain;
                   padding: var(--sp-5); }
.bc-drawer__foot {
  padding: var(--sp-4) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--surface-raised);
}

/* ── Fortschrittsanzeige: „Dialoge sollen Abschluss erzeugen" (Shneiderman 4).
      Der Nutzer sieht jederzeit, wo er steht und wie viel noch kommt.      */
.bc-steps { display: flex; gap: var(--sp-1); padding: var(--sp-3) var(--sp-5) 0;
            background: var(--surface-raised); }
.bc-step { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.bc-step__bar { height: 3px; border-radius: var(--r-full);
                background: var(--line);
                transition: background-color var(--dur-ui) ease; }
.bc-step__label { font-size: var(--text-xs); color: var(--ink-mute);
                  transition: color var(--dur-ui) ease; }
.bc-step[data-state="done"] .bc-step__bar,
.bc-step[data-state="current"] .bc-step__bar { background: var(--brand); }
.bc-step[data-state="current"] .bc-step__label { color: var(--brand); font-weight: 600; }

.bc-pane[hidden] { display: none; }

/* ── Warenkorb-Zeile ─────────────────────────────────────────────────────
      Zeigt NUR was drin ist. Vorher listete der Drawer den ganzen Katalog
      mit Nullmengen — der Nutzer konnte „Warenkorb" nicht von „Katalog"
      unterscheiden (falsches konzeptuelles Modell).                      */
.bc-line { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0;
           border-bottom: 1px solid var(--line); }
.bc-line__img { flex: 0 0 64px; width: 64px; height: 64px; border-radius: var(--r-md);
                object-fit: cover; background: var(--surface-sunken); }
.bc-line__main { flex: 1; min-width: 0; }
.bc-line__name { font-size: var(--text-base); font-weight: 500; color: var(--ink); }
.bc-line__unit { font-size: var(--text-xs); color: var(--ink-mute); margin-top: 2px; }
.bc-line__sum  { font-size: var(--text-base); font-weight: 600;
                 font-variant-numeric: tabular-nums; white-space: nowrap; }

.bc-qty { display: inline-flex; align-items: center; gap: var(--sp-1);
          margin-top: var(--sp-2); }
.bc-qty button {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--surface-raised); color: var(--brand);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font-size: 18px; line-height: 1; cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-fast) ease;
}
.bc-qty button:active { transform: scale(0.94); }
@media (hover: hover) { .bc-qty button:hover { background: var(--brand-soft); } }
.bc-qty__val { min-width: 34px; text-align: center;
               font-variant-numeric: tabular-nums; font-weight: 600; }

.bc-line__remove {
  background: none; border: none; cursor: pointer; padding: var(--sp-2) 0;
  color: var(--ink-mute); font-size: var(--text-xs); text-decoration: underline;
  min-height: 44px;
}
@media (hover: hover) { .bc-line__remove:hover { color: var(--danger); } }

/* ── Leerer Zustand ── ein Zustand, den die alte Version gar nicht kannte */
.bc-empty { text-align: center; padding: var(--sp-8) var(--sp-4); }
.bc-empty__art { font-size: 46px; line-height: 1; margin-bottom: var(--sp-4); }
.bc-empty__t { font: 400 var(--text-xl)/1.3 var(--font-display);
               color: var(--ink); margin: 0 0 var(--sp-2); }
.bc-empty__d { font-size: var(--text-sm); color: var(--ink-mute);
               margin: 0 0 var(--sp-5); line-height: var(--leading-body); }

/* ── Summenblock ── keine versteckten Kosten (Anti-Dark-Pattern) ── */
.bc-sum { margin-top: var(--sp-4); }
.bc-sum__row { display: flex; justify-content: space-between; gap: var(--sp-4);
               padding: var(--sp-2) 0; font-size: var(--text-sm);
               color: var(--ink-mute); }
.bc-sum__row--total {
  border-top: 1px solid var(--line); margin-top: var(--sp-2);
  padding-top: var(--sp-3); font-size: var(--text-lg); font-weight: 600;
  color: var(--ink);
}
.bc-sum__row span:last-child { font-variant-numeric: tabular-nums; }
.bc-sum__free { color: var(--success); font-weight: 600; }

/* ── Zahlarten ── */
.bc-pay { display: flex; flex-direction: column; gap: var(--sp-2); }
.bc-payinfo { margin-top: var(--sp-3); text-align: center;
              font-size: var(--text-xs); color: var(--ink-mute);
              line-height: var(--leading-body); }
.bc-payinfo a { color: var(--brand); }

/* Fehlerbereich — Text, nicht nur Farbe; wird per role="alert" angesagt */
.bc-alert {
  display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); font-size: var(--text-sm);
  line-height: var(--leading-body); margin-bottom: var(--sp-4);
}
.bc-alert--error { background: var(--danger-soft); color: var(--danger); }
.bc-alert--info  { background: var(--brand-soft);  color: var(--brand); }
.bc-alert--warn  { background: var(--warning-soft); color: var(--warning); }
.bc-alert:empty  { display: none; }

/* ══ 4. SOCIAL PROOF ══════════════════════════════════════════════════════
   Speist sich ausschließlich aus echten, anonymisierten Bestellungen.
   Kein Fake-Timer, keine erfundene Knappheit.                            */
.bc-proof {
  position: fixed; left: var(--sp-5);
  bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
  z-index: var(--z-fab); max-width: 310px;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); background: var(--surface-raised);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); font-family: var(--font-ui);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity var(--dur-ui) var(--ease-out),
              transform var(--dur-ui) var(--ease-out);
}
.bc-proof[data-show="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; }
.bc-proof__img { width: 44px; height: 44px; border-radius: var(--r-sm);
                 object-fit: cover; flex: 0 0 auto; }
.bc-proof__txt { font-size: var(--text-xs); line-height: 1.45; color: var(--ink); }
.bc-proof__txt b { font-weight: 600; }
.bc-proof__when { color: var(--ink-mute); }
.bc-proof__x { background: none; border: none; cursor: pointer; padding: 6px;
               color: var(--ink-mute); font-size: 15px; align-self: flex-start; }
/* Auf kleinen Schirmen würde er den WhatsApp-Button überlagern */
@media (max-width: 720px) { .bc-proof { display: none; } }

/* ══ 5. PERSONALISIERUNG ══════════════════════════════════════════════════ */
.bc-reco { max-width: 1180px; margin: 0 auto; padding: var(--sp-10) var(--sp-4); }
.bc-reco__head { display: flex; align-items: baseline; justify-content: space-between;
                 gap: var(--sp-4); margin-bottom: var(--sp-5); }
.bc-reco__title { margin: 0;
  font: 400 var(--text-2xl)/var(--leading-snug) var(--font-display); color: var(--ink); }
.bc-reco__why { font-size: var(--text-xs); color: var(--ink-mute); }
.bc-reco__rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(260px, 72vw);
  gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-3); scrollbar-width: thin;
}
.bc-reco__rail > * { scroll-snap-align: start; }
.bc-reco[hidden] { display: none; }

/* ══ 6. STICKY MOBILE CTA ════════════════════════════════════════════════
   Auf dem Handy ist der Kaufknopf sonst weg, sobald man scrollt.        */
@media (max-width: 720px) {
  .bc-drawer { width: 100%; }
  .bc-drawer__body { padding: var(--sp-4); }
  .bc-fab { right: var(--sp-4); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); }
}


/* ══ 7. INTEGRATION IN DAS BESTEHENDE LAYOUT ═════════════════════════════
   Das alte Raster klebte die Kacheln mit 2px aneinander. Die neuen Karten
   haben Rahmen und Radius und brauchen echten Abstand (Gestalt: Nähe
   gruppiert — 2px liest sich als EIN Block, nicht als acht Produkte).   */

.product-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  padding-inline: var(--sp-1);
}
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
@media (max-width: 820px)  { .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } }
@media (max-width: 520px)  { .product-grid { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* Scroll-Reveal war mit 800ms und 28px Weg zu träge — die Karten kamen
   spürbar später als der Scroll. */
.reveal {
  transform: translateY(14px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}

/* Filterknöpfe: gedrückter Zustand nicht nur farblich */
.f-btn { min-height: 44px; }
.f-btn[aria-pressed="true"]::before { content: "✓ "; }

/* Modal-Ergänzungen */
.modal-trust {
  margin-top: var(--sp-3); text-align: center;
  font: 400 var(--text-xs)/1.6 var(--font-ui); color: var(--ink-mute);
}
.modal-share {
  display: block; text-align: center; margin-top: var(--sp-2);
  font: 400 var(--text-xs)/1 var(--font-ui); color: var(--ink-mute);
  text-decoration: none; padding: var(--sp-2); min-height: 44px;
}
.modal-share:hover { color: var(--brand); text-decoration: underline; }
.modal-price {
  font: 600 var(--text-xl)/1.2 var(--font-ui) !important;
  color: var(--ink) !important;
}

/* Der WhatsApp-Knopf sitzt links unten — der Social-Proof-Hinweis
   darf ihn nicht verdecken. */
@media (min-width: 721px) { .bc-proof { left: 88px; } }