/* TOGOPEPTIDE — Inventory + stock signals (PDP)
   Cluster 23 (items 787–800). Additive only. Light + dark via tokens.
   Pulse animation respects prefers-reduced-motion. */

/* ── Wrapper container under variant chips ───────────────────────── */
.togo-inv {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  margin: var(--space-3, 12px) 0 var(--space-2, 8px);
}

/* ── Pill row: batch + stock side-by-side ───────────────────────── */
.togo-inv__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Generic pill */
.togo-inv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
  background: var(--color-bg-elevated, #0f0f0f);
  color: var(--color-text-muted, #a0a0a0);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.togo-inv-pill__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

/* Variants ----------------------------------------------------- */
.togo-inv-pill--batch        { color: var(--color-text, #fff); }

.togo-inv-pill--in-stock {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.28);
  background: rgba(74, 222, 128, 0.08);
}

.togo-inv-pill--low {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.32);
  background: rgba(251, 191, 36, 0.10);
}

/* Pulsing red badge — applied at ≤5 vials */
.togo-inv-pill--pulse {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.36);
  background: rgba(248, 113, 113, 0.10);
  animation: togoInvPulse 1.6s ease-in-out infinite;
}
@keyframes togoInvPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(248, 113, 113, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .togo-inv-pill--pulse { animation: none; }
}

/* "Last batch" amber badge */
.togo-inv-pill--retiring {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.36);
  background: rgba(245, 158, 11, 0.10);
}

/* COA-link micro affordance inside batch pill */
.togo-inv-pill__coa {
  color: inherit;
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.togo-inv-pill__coa:hover { opacity: 1; }

/* ── Out-of-stock banner ─────────────────────────────────────── */
.togo-inv-banner {
  margin-top: var(--space-3, 12px);
  padding: 14px 16px;
  border: 1px solid var(--color-border, rgba(255,255,255,0.12));
  border-radius: var(--radius-md, 10px);
  background: var(--color-bg-elevated, #0f0f0f);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.togo-inv-banner__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #fff);
  display: flex;
  align-items: center;
  gap: 8px;
}
.togo-inv-banner__title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
  flex-shrink: 0;
}
.togo-inv-banner__lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted, #a0a0a0);
}

/* ── Restock-subscribe form ─────────────────────────────────── */
.togo-inv-restock {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.togo-inv-restock__row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.togo-inv-restock__input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border, rgba(255,255,255,0.14));
  border-radius: var(--radius-sm, 8px);
  background: var(--color-bg, #0a0a0a);
  color: var(--color-text, #fff);
  font: inherit;
  font-size: 14px;
}
.togo-inv-restock__input:focus {
  outline: none;
  border-color: var(--color-accent, #e01b1b);
  box-shadow: 0 0 0 3px rgba(224, 27, 27, 0.18);
}
.togo-inv-restock__btn {
  padding: 10px 16px;
  border: 1px solid var(--color-border, rgba(255,255,255,0.14));
  border-radius: var(--radius-sm, 8px);
  background: var(--color-bg-elevated, #161616);
  color: var(--color-text, #fff);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 160ms ease, background 160ms ease;
}
.togo-inv-restock__btn:hover {
  border-color: var(--color-accent, #e01b1b);
  background: var(--color-bg, #0a0a0a);
}
.togo-inv-restock__btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.togo-inv-restock__btn--preorder {
  background: var(--color-accent, #e01b1b);
  border-color: var(--color-accent, #e01b1b);
  color: #fff;
}
.togo-inv-restock__btn--preorder:hover {
  background: var(--color-accent-hover, #c41818);
  border-color: var(--color-accent-hover, #c41818);
}
.togo-inv-restock__msg {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-muted, #a0a0a0);
  line-height: 1.5;
}
.togo-inv-restock__msg--ok    { color: #4ade80; }
.togo-inv-restock__msg--error { color: #f87171; }

/* ── Light-mode token overrides ─────────────────────────────── */
[data-theme="light"] .togo-inv-pill {
  background: #f8f8f8;
  border-color: rgba(0, 0, 0, 0.10);
  color: #555;
}
[data-theme="light"] .togo-inv-pill--batch       { color: #111; }
[data-theme="light"] .togo-inv-pill--in-stock    { color: #166534; background: rgba(22, 163, 74, 0.10); border-color: rgba(22, 163, 74, 0.25); }
[data-theme="light"] .togo-inv-pill--low         { color: #b45309; background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.30); }
[data-theme="light"] .togo-inv-pill--pulse       { color: #b91c1c; background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.32); }
[data-theme="light"] .togo-inv-pill--retiring    { color: #b45309; background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.30); }
[data-theme="light"] .togo-inv-banner            { background: #fafafa; border-color: rgba(0,0,0,0.10); }
[data-theme="light"] .togo-inv-banner__title     { color: #111; }
[data-theme="light"] .togo-inv-banner__lead      { color: #555; }
[data-theme="light"] .togo-inv-restock__input    { background: #fff; color: #111; border-color: rgba(0,0,0,0.14); }
[data-theme="light"] .togo-inv-restock__btn      { background: #fff; color: #111; border-color: rgba(0,0,0,0.14); }
[data-theme="light"] .togo-inv-restock__btn:hover{ background: #f8f8f8; }
[data-theme="light"] .togo-inv-restock__msg      { color: #555; }
[data-theme="light"] .togo-inv-restock__msg--ok  { color: #15803d; }
[data-theme="light"] .togo-inv-restock__msg--error{ color: #b91c1c; }

/* ── Pipeline detail line in OOS banner ────────────────────────
   Renders e.g. "15/30 vrij voor pre-order · Leverancier: Bachem AG"
   Sits between bannerLead and the restock form. Subtle but readable. */
.togo-inv-banner__pipeline {
  margin: var(--space-2, 8px) 0 0;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-size: 0.85em;
  color: var(--color-info-on-weak, #8ab4ff);
  background: var(--color-info-soft, rgba(80, 145, 255, 0.10));
  border-radius: 8px;
  line-height: 1.45;
}

/* ── Per-mg variant chip state ─────────────────────────────────
   Applied by togo-inventory-pdp.js after inventory.json loads.
   Keep unavailable chips readable; never dim the whole card with opacity. */
.variant-chip[data-mg-state="pre-order"] {
  border-color: color-mix(in srgb, var(--color-warning, #f0b429) 32%, transparent);
}
.variant-chip[data-mg-state="unavailable"] {
  opacity: 1;
  cursor: not-allowed;
}
.variant-chip[data-mg-state="unavailable"] .variant-chip__label {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-bg-elevated, #161616) 94%, var(--color-text-muted, #8c8c92) 6%),
      var(--color-bg-elevated, #161616)) !important;
  border-color: color-mix(in srgb, var(--color-text-muted, #8c8c92) 34%, transparent) !important;
}
.variant-chip[data-mg-state="unavailable"] .variant-chip__size,
.variant-chip[data-mg-state="unavailable"] .variant-chip__per-unit,
.variant-chip[data-mg-state="unavailable"] .togo-lead {
  color: var(--color-text-muted, #8c8c92) !important;
}
.variant-chip[data-mg-state="unavailable"] input {
  cursor: not-allowed;
}
.togo-lead--unavailable {
  color: var(--color-text-muted, #8c8c92) !important;
}
.togo-lead--unavailable .togo-lead__dot {
  background: var(--color-text-muted, #8c8c92);
}
html[data-theme="light"] .variant-chip[data-mg-state="unavailable"] .variant-chip__label {
  background: #f7f6f3 !important;
  border-color: rgba(20, 18, 12, 0.16) !important;
}
html[data-theme="light"] .variant-chip[data-mg-state="unavailable"] .variant-chip__size,
html[data-theme="light"] .variant-chip[data-mg-state="unavailable"] .variant-chip__per-unit,
html[data-theme="light"] .variant-chip[data-mg-state="unavailable"] .togo-lead,
html[data-theme="light"] .togo-lead--unavailable {
  color: #5a574f !important;
}
.togo-variant-state {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-2, 8px);
}
.togo-variant-state::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-muted, #8c8c92);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-text-muted, #8c8c92) 25%, transparent);
}
.togo-variant-state--preorder::before {
  background: var(--color-warning, #f0b429);
  box-shadow: 0 0 0 2px var(--color-warning-soft, rgba(240, 180, 41, 0.18));
}
.togo-variant-state--unavailable::before {
  background: var(--color-text-muted, #8c8c92);
  box-shadow: 0 0 0 2px rgba(140, 140, 146, 0.18);
}

/* ── Per-card stock dot (shop + category cards) ─────────────────
   Bottom-right corner of card__media, diagonal-opposite of the
   top-left brand badge stack. Always visible (small, non-distracting). */
.togo-card-stock {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
  pointer-events: auto;
}
.togo-card-stock__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted, #8c8c92);
}
.togo-card-stock--in_stock .togo-card-stock__dot     { background: var(--color-success, #2ec27e); box-shadow: 0 0 0 3px rgba(46, 194, 126, 0.25); }
.togo-card-stock--preorder .togo-card-stock__dot     { background: var(--color-warning, #f0b429); box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.25); }
.togo-card-stock--unavailable .togo-card-stock__dot  { background: var(--color-text-muted, #8c8c92); box-shadow: 0 0 0 3px rgba(140, 140, 146, 0.20); }

@media (max-width: 640px) {
  .togo-card-stock { width: 24px; height: 24px; right: 6px; bottom: 6px; } /* touch target ≥40px when including padding from parent */
}

[data-theme="light"] .togo-card-stock { background: rgba(255, 255, 255, 0.85); }
[data-theme="light"] .togo-inv-banner__pipeline {
  color: var(--color-info-on-weak, #1E3A8A);
  background: var(--color-info-soft, rgba(40, 95, 200, 0.10));
}