/**
 * Frame & Thread — Quick Shop (ft-quickshop) v1.0.0
 *
 * ONLY the hydration loading states live here. All shop visual styling
 * remains owned by the existing CSS snippets (4284456 Shop Page, 4284490
 * Shop Filter CSS, etc.) — this file must never grow into a second owner
 * of the shop's look.
 *
 * Two states:
 *   form.cart.ft-qs-pending  — payload not yet injected: the raw (unpruned)
 *                              dropdown must never be readable or usable.
 *   article.ft-qs-loading    — drawer opened before hydration finished:
 *                              a quiet skeleton shimmer for the beat.
 */

/* ---- Pending lock: hide the unpruned dropdown entirely ---- */

article.ft-shop form.cart.ft-qs-pending .variations {
  position: relative;
  pointer-events: none;
}

article.ft-shop form.cart.ft-qs-pending .variations select {
  color: transparent !important;
  text-shadow: none !important;
}

/* Option text can leak through `color: transparent` in some mobile
   pickers — belt and suspenders: fade the whole control and overlay it. */
article.ft-shop form.cart.ft-qs-pending .variations::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(
    100deg,
    #faf9f7 40%,
    #f1efeb 50%,
    #faf9f7 60%
  );
  background-size: 200% 100%;
  animation: ft-qs-shimmer 1.4s ease-in-out infinite;
  opacity: 0.92;
}

/* While pending, the price/stock region below the dropdown is meaningless
   — keep it collapsed so nothing jumps. */
article.ft-shop form.cart.ft-qs-pending .single_variation_wrap {
  visibility: hidden;
}

/* ---- Drawer-open loading beat ---- */

article.ft-shop.ft-qs-loading .ft-quick-add-trigger {
  opacity: 0.65;
}

@keyframes ft-qs-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Respect reduced motion — hold a quiet solid instead of shimmering. */
@media (prefers-reduced-motion: reduce) {
  article.ft-shop form.cart.ft-qs-pending .variations::after {
    animation: none;
    background: #f1efeb;
  }
}
