/* ------------------------------------------------------------------
   "Buy in one click" (common/quick_order + js/quick.js).
   The popup reuses the dark .auth-modal card from content.css; here
   are only the quick-order additions: the product line, the "thank
   you" screen, the scroll lock and the trigger button on the cards.
   ------------------------------------------------------------------ */
html.quick-open { overflow: hidden; }

/* product line above the fields: name + price (+ quantity) */
.quick-modal__product {
  display: grid;
  gap: .25rem;
  border-radius: .5rem;
  border: 1px solid color-mix(in oklab, var(--background) 12%, transparent);
  background: color-mix(in oklab, var(--background) 6%, transparent);
  padding: .75rem .875rem;
  font-size: .875rem;
  line-height: 1.4;
}
.quick-modal__product[hidden] { display: none; }
.quick-modal__product-name { font-weight: 600; color: var(--background); }
.quick-modal__product-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
  color: color-mix(in oklab, var(--background) 65%, transparent);
}
.quick-modal__product-meta strong {
  font-family: Outfit, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary);
}
.quick-modal__product-meta strong:empty,
.quick-modal__product-meta span:empty { display: none; }

.quick-modal__note { margin-top: -.25rem; text-align: center; }

/* "thank you" screen */
.quick-modal__done { justify-items: center; text-align: center; padding-top: .5rem; }
.quick-modal__done[hidden] { display: none; }
.quick-modal__done-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--primary) 18%, transparent);
  color: var(--primary);
}
.quick-modal__done-title {
  font-family: Outfit, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}
.quick-modal__done .auth-modal__lead { margin: 0; }
.quick-modal__done .auth-modal__submit { margin-top: .5rem; }

/* the submit with the bolt icon */
.auth-modal__submit svg { margin-right: .5rem; flex: none; }

/* trigger on the product cards: a compact outline button under "Add to cart" */
.quick-btn { gap: .4rem; }
.quick-btn svg { color: var(--primary); }
.quick-btn:hover svg { color: currentColor; }
@media (max-width: 480px) {
  .quick-btn { padding-left: .5rem; padding-right: .5rem; font-size: .8125rem; }
}