/* ==========================================================================
   Shared cart chrome: toast notifications + badge empty state
   Pairs with assets/js/cart.js. Loaded on every page.
   ========================================================================== */

.di-toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.di-toast {
  max-width: 320px;
  padding: 12px 18px;
  border-radius: var(--di-radius-sm);
  background-color: var(--di-green);
  color: var(--di-white);
  font-size: var(--di-fs-sm);
  box-shadow: 0 10px 28px rgba(18, 53, 36, .22);
  animation: di-toast-in .25s ease both;
}

.di-toast--error { background-color: #9b2c2c; }

.di-toast.is-leaving {
  animation: di-toast-out .3s ease both;
}

@keyframes di-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes di-toast-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(6px); }
}

/* A zero count stays visible but muted, matching the design */
.di-badge.is-empty { background-color: #b9b3a7; }

@media (max-width: 575.98px) {
  .di-toasts { right: 12px; left: 12px; bottom: 12px; }
  .di-toast { max-width: none; }
}