/* ============================================================
   Lyu Stock Badge — editorial-style indicator під ціною товару
   ============================================================ */

.lyu-stock-badge {
  --lsb-green:    #16a34a;
  --lsb-green-bg: rgba(22, 163, 74, 0.10);
  --lsb-amber:    #d97706;
  --lsb-amber-bg: rgba(217, 119, 6, 0.10);
  --lsb-red:      #cb003d;
  --lsb-red-bg:   rgba(203, 0, 61, 0.10);
  --lsb-blue:     #2563eb;
  --lsb-blue-bg:  rgba(37, 99, 235, 0.10);
  --lsb-gray:     #6b6e78;
  --lsb-gray-bg:  rgba(107, 110, 120, 0.10);

  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 2px;
  padding: 3px 10px 4px 8px;
  font-family: "Open Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.005em;
  border-radius: 999px;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
}

.lyu-stock-badge__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lyu-stock-badge__text {
  white-space: nowrap;
}

/* ── Стани ──────────────────────────────────────────────── */

/* В наявності (10+) — спокійний зелений */
.lyu-stock-badge--in {
  color: var(--lsb-green);
  background: var(--lsb-green-bg);
}
.lyu-stock-badge--in .lyu-stock-badge__dot {
  background: var(--lsb-green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

/* Низький залишок (4-10) — теплий помаранчевий */
.lyu-stock-badge--low {
  color: var(--lsb-amber);
  background: var(--lsb-amber-bg);
}
.lyu-stock-badge--low .lyu-stock-badge__dot {
  background: var(--lsb-amber);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
}

/* Критично мало (1-3) — бренд-червоний + пульсація */
.lyu-stock-badge--critical {
  color: var(--lsb-red);
  background: var(--lsb-red-bg);
}
.lyu-stock-badge--critical .lyu-stock-badge__dot {
  background: var(--lsb-red);
  box-shadow: 0 0 0 3px rgba(203, 0, 61, 0.18);
  animation: lyu-stock-pulse 1.6s ease-in-out infinite;
}

@keyframes lyu-stock-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(203, 0, 61, 0.18);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(203, 0, 61, 0.06);
    transform: scale(1.15);
  }
}

/* На замовлення — синій */
.lyu-stock-badge--backorder {
  color: var(--lsb-blue);
  background: var(--lsb-blue-bg);
}
.lyu-stock-badge--backorder .lyu-stock-badge__dot {
  background: var(--lsb-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Немає в наявності — сірий, muted */
.lyu-stock-badge--out {
  color: var(--lsb-gray);
  background: var(--lsb-gray-bg);
}
.lyu-stock-badge--out .lyu-stock-badge__dot {
  background: var(--lsb-gray);
  box-shadow: 0 0 0 3px rgba(107, 110, 120, 0.15);
}

/* ── Контекстні варіанти ─────────────────────────────────── */

/* Single product — бейдж вгорі summary блока (замість захардкоженого .lyu-avail).
   Має виглядати як акцент-pill: чітко, але не перебивати заголовок товару. */
.lyu-stock-badge--single {
  display: inline-flex;
  margin: 0 0 14px;
  padding: 5px 13px 6px 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.lyu-stock-badge--single .lyu-stock-badge__dot {
  width: 8px;
  height: 8px;
}

/* V1 layout (.lyu-summary) — бейдж стоїть перед заголовком */
.lyu-summary .lyu-stock-badge--single {
  align-self: flex-start;
  margin-bottom: 12px;
}

/* V2 layout (.lyu-v2-summary) — dark hybrid, бейдж окремим рядком */
.lyu-v2-summary .lyu-stock-badge--single {
  align-self: flex-start;
  margin-bottom: 10px;
}

/* Fallback для legacy .summary / .product wrappers */
.summary .lyu-stock-badge--single,
.product .lyu-stock-badge--single {
  display: inline-flex;
  vertical-align: middle;
}
/* Якщо тема ставить badge після ціни — теж окей */
.summary .price + .lyu-stock-badge--single,
.product .price + .lyu-stock-badge--single {
  display: inline-flex;
  margin-top: 10px;
}

/* OOS variant на single — лідер-формат, не просто pill */
.lyu-stock-badge--single.lyu-stock-badge--out {
  padding-left: 12px;
  padding-right: 15px;
}
.lyu-stock-badge--single.lyu-stock-badge--out .lyu-stock-badge__dot {
  width: 9px;
  height: 9px;
}
/* Critical (1-3) на single — додатковий emphasis */
.lyu-stock-badge--single.lyu-stock-badge--critical {
  background: rgba(203, 0, 61, 0.13);
}

/* WC archive loop — компактний, окремий рядок між ціною та кнопкою */
.lyu-stock-badge--loop {
  display: inline-flex;
  margin: 8px 0;
  width: max-content;
  max-width: 100%;
}

/* В Vibratex `.lte-item-descr` товари йдуть вертикально:
   назва → ціна → [наш badge] → кнопка. Гарантуємо вертикальний стек. */
.lte-item .lyu-stock-badge--loop {
  display: flex;
  margin: 6px 0 8px;
}
/* Кнопка add-to-cart всередині .lte-image (поверх фото) — нічого не робимо. */

/* lyu-inline-products card — між price та btn (vertical flex) */
.lyu-stock-badge--inline {
  display: flex;
  margin: 2px 0 4px;
  align-self: flex-start;
}

/* ── На single product: ховаємо тільки стандартний WC «.stock» рядок
   щоб не дублювати наш badge. Власні теми-блоки (.lyu-avail) НЕ чіпаємо
   — нехай вони залишаються як індикатор статусу зверху, а наш badge
   виведе число одразу після ціни. */
.woocommerce div.product .stock,
.woocommerce-page div.product .stock,
.single-product .summary > .stock,
.single-product .product .stock {
  display: none !important;
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lyu-stock-badge--critical .lyu-stock-badge__dot {
    animation: none;
  }
}

/* ── Mobile tweaks ───────────────────────────────────────── */
@media (max-width: 640px) {
  .lyu-stock-badge {
    font-size: 11.5px;
    padding: 2px 9px 3px 7px;
  }
  .lyu-stock-badge--single {
    font-size: 12.5px;
  }
}