/* ═══════════════════════════════════════════
   SHOP — Mini-Cart, Toast, Header-Zustände
   (ergänzt components.css; Produkt-/Checkout-Styles
    liegen in components.css)
   ═══════════════════════════════════════════ */

/* Header z-index an die Hierarchie koppeln */
.header { z-index: var(--z-sticky); }
.nav.is-open { z-index: var(--z-overlay); }

/* Solider Header auf Innenseiten (kein Hero dahinter) */
.header--solid {
  background: hsla(42, 38%, 96%, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}

/* "Jetzt kaufen" im Header auf Mobile ausblenden (Platz für Icons) */
@media (max-width: 600px) {
  .header__buy { display: none; }
}

/* ── Mini-Cart (außerhalb des Headers gerendert) ── */
.mini-cart {
  position: fixed;
  top: var(--header-height);
  right: var(--space-md);
  width: 384px;
  max-width: calc(100vw - 2 * var(--space-md));
  max-height: calc(100vh - var(--header-height) - var(--space-lg));
  display: none;
  flex-direction: column;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-modal);
  overflow: hidden;
}
.mini-cart.active { display: flex; }
.mini-cart__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.mini-cart__header h3 { font-size: var(--fs-h4); }
.mini-cart__items { flex: 1; overflow-y: auto; padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.mini-cart__footer { border-top: 1px solid var(--color-border); padding: var(--space-md); display: flex; flex-direction: column; gap: 0.6rem; }
.mini-cart__sum { display: flex; justify-content: space-between; align-items: baseline; }
.mini-cart__sum strong { font-family: var(--font-heading); font-size: var(--fs-h3); color: var(--color-text-heading); }

/* Mini-Cart Mobile: Vollbild von unten */
@media (max-width: 767px) {
  .mini-cart {
    top: auto; right: 0; bottom: 0; left: 0;
    width: 100%; max-width: 100%;
    max-height: 85vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}

/* ── Toast ── */
.toast-container {
  position: fixed;
  top: calc(var(--header-height) + var(--space-sm));
  right: var(--space-md);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 0.5rem;
  pointer-events: none;
}
.toast {
  background: var(--color-text-heading);
  color: var(--color-cta-text);
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-small);
  font-weight: 700;
  opacity: 0;
  transform: translateX(120%);
  transition: opacity var(--transition), transform var(--transition);
  max-width: 320px;
}
.toast.is-in { opacity: 1; transform: translateX(0); }
.toast--success { background: var(--color-success); }
.toast--error { background: var(--color-error); }
.toast--info { background: var(--color-text-heading); }
@media (max-width: 767px) {
  .toast-container { left: var(--space-sm); right: var(--space-sm); top: auto; bottom: calc(var(--space-sm) + 70px); }
  .toast { max-width: 100%; }
}

/* No-JS: Mengen-Buttons/Mini-Cart sinnvoll degradieren */
.no-js .cart-btn { display: none; }