/* ==========================================================================
   Allegro · Dataflow24 — storefront additions (DATAFLOW.md 15.1, 15.2, owner answer 9).
   Loaded on every storefront page while the module is on (cards appear everywhere). Theme tokens only
   (var(--mt-…)): one brand purple and neutrals; red stays reserved for discounts.
   ========================================================================== */

/* ---------- Cards: the long stock line («Під замовлення · орієнтовно до 24.10») wraps beside its dot ---------- */
/* the rest of the first row after the 8 px dot and the 6 px gap; the origin («· Польща») moves to the next row */
.mt-card__stock .df-stock {
  flex: 1 1 calc(100% - 14px); min-width: 0; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mt-card__stock:has(.df-stock) { align-items: flex-start; }
.mt-card__stock:has(.df-stock)::before { margin-top: .4em; }
/* the origin always starts its own row here: no «·» separator at the start of a line, aligned with the text */
.mt-card__stock:has(.df-stock) .mt-card__origin { align-self: center; margin-left: 14px; }
.mt-card__stock:has(.df-stock) .mt-card__origin::before { content: none; }

/* ---------- Condition near the price ---------- */
.df-cond { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.df-cond .mt-badge { height: 28px; padding: 0 12px; font-size: .8125rem; }

/* ---------- Variant links (our own products only) ---------- */
.df-variants { margin: 0 0 18px; }
.df-variants__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.df-variants__list > li { display: flex; max-width: 100%; }
.df-variant {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 0 16px;
  border-radius: var(--mt-r-sm, 10px); background: var(--mt-surface, #fff); box-shadow: inset 0 0 0 1.5px var(--mt-border-strong, #cfcad3);
  color: var(--mt-text, #1e1a22); font: 700 var(--mt-fs-ui, .9375rem)/1.2 var(--mt-font-body, system-ui, sans-serif);
  text-decoration: none; transition: var(--mt-transition, all .15s ease);
}
.df-variant:hover { color: var(--mt-text, #1e1a22); box-shadow: inset 0 0 0 1.5px var(--mt-brand-300, #cf9fcc); }
.df-variant:focus-visible { outline: 3px solid var(--mt-focus, #93278f); outline-offset: 2px; }
.df-variant.is-active { background: var(--mt-tint, #faf5fa); box-shadow: inset 0 0 0 2px var(--mt-brand-500, #93278f); color: var(--mt-on-tint, #6a1a67); }
.df-variant.is-out { color: var(--mt-muted, #6b6571); box-shadow: inset 0 0 0 1.5px var(--mt-border, #e6e3e8); opacity: .7; }
.df-variant.is-out .df-variant__name { text-decoration: line-through; }
.df-variant__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.df-variant--photo { width: 64px; height: 64px; min-height: 0; padding: 4px; justify-content: center; background: var(--mt-media, #f4f3f5); }
.df-variant--photo img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; border-radius: calc(var(--mt-r-sm, 10px) - 4px); }
.df-variant--photo.is-active { background: var(--mt-tint, #faf5fa); }
@media (max-width: 575.98px) { .df-variant__name { max-width: 200px; } }

/* ---------- Placeholder while the card loads ---------- */
.df-pending { display: grid; gap: 14px; padding: 4px 0; }
.df-pending__wait { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--mt-text-2, #4a4450); font-weight: 600; }
.df-spinner {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--mt-brand-100, #f3e6f2); border-top-color: var(--mt-brand-500, #93278f);
  animation: df-spin .8s linear infinite;
}
.df-skeleton { display: grid; gap: 10px; max-width: 640px; }
.df-skeleton i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--mt-bg, #f6f5f7) 0%, var(--mt-border, #e6e3e8) 50%, var(--mt-bg, #f6f5f7) 100%); background-size: 200% 100%; animation: df-shimmer 1.4s ease-in-out infinite; }
.df-skeleton i:nth-child(2) { width: 86%; }
.df-skeleton i:nth-child(3) { width: 62%; }
.df-pending.is-failed .df-skeleton, .df-pending.is-failed .df-pending__wait { display: none; }
/* a long wait: the skeleton gives way to the «опис готуємо» text, the loading line stays above it */
.df-pending.is-long .df-skeleton { display: none; }
.df-pending__note > :last-child { margin-bottom: 0; }
.df-gallery-wait {
  position: absolute; left: 50%; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--mt-r-pill, 999px); transform: translateX(-50%);
  background: rgba(255, 255, 255, .94); box-shadow: var(--mt-sh-1, 0 1px 3px rgba(0, 0, 0, .12)); color: var(--mt-text-2, #4a4450);
  font: 600 var(--mt-fs-xs, .8125rem)/1.2 var(--mt-font-body, system-ui, sans-serif); white-space: nowrap; pointer-events: none;
}
.df-gallery-wait .df-spinner { width: 14px; height: 14px; border-width: 2px; }
.df-fade-in { animation: df-fade .35s ease-out both; }

@keyframes df-spin { to { transform: rotate(360deg); } }
@keyframes df-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes df-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .df-spinner, .df-skeleton i, .df-fade-in { animation: none; }
}