/* Qure MI funnel — offer-page UX layer (2026-08-24):
   1) the cart drawer (cart-drawer.js) — the Shopify-style add-to-cart moment
   2) the floating "Select Supply" CTA (floating-cta.js) — sticky bottom bar that fades away while
      the supply selector itself is on screen.
   One file so both offer pages load one extra stylesheet, not two. */

/* ---------------- cart drawer ---------------- */
.qcart { position: fixed; inset: 0; z-index: 1000; display: none; }
.qcart--mounted { display: block; }
.qcart__overlay { position: absolute; inset: 0; background: rgba(11, 5, 29, 0.45); opacity: 0; transition: opacity 240ms ease; }
.qcart__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 94vw);
  background: #fff; box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
  transform: translateX(100%); transition: transform 280ms ease;
  display: flex; flex-direction: column; padding: 0 22px 18px; overflow-y: auto;
}
.qcart--open .qcart__overlay { opacity: 1; }
.qcart--open .qcart__panel { transform: translateX(0); }
body.qcart-lock { overflow: hidden; }

/* reservation strip — full-bleed across the panel top, like the shop's */
.qcart__demand {
  margin: 0 -22px; padding: 12px 22px; background: #f4f4f4;
  color: #e8501f; font-size: 13.5px; text-align: center;
}
.qcart__demand b { font-weight: 700; letter-spacing: 0.02em; }
.qcart__demand-sep { margin: 0 7px; color: #c9c9c9; }
.qcart__timer { font-weight: 700; font-variant-numeric: tabular-nums; }

.qcart__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 14px; }
.qcart__title { font-size: 20px; font-weight: 600; }
.qcart__close { background: none; border: 0; font-size: 30px; line-height: 1; cursor: pointer; padding: 2px 6px; color: #222; }

/* item card — bordered rounded box like the shop's */
.qcart__item {
  position: relative; display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid #e6e6e6; border-radius: 12px; padding: 16px 14px;
}
.qcart__remove { position: absolute; top: 10px; right: 10px; background: none; border: 0; color: #9a9a9a; cursor: pointer; padding: 2px; }
.qcart__remove:hover { color: #333; }
.qcart__img { width: 92px; height: 92px; flex: 0 0 92px; border-radius: 10px; background: #f6f6f6; overflow: hidden; }
.qcart__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.qcart__info { flex: 1 1 auto; min-width: 0; padding-right: 18px; }
.qcart__name { font-weight: 600; font-size: 15px; line-height: 1.35; }
.qcart__rating { font-size: 12px; color: #555; margin-top: 5px; }
.qcart__stars { color: #16a34a; letter-spacing: 1px; }
.qcart__stock { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #3d8b40; margin-top: 4px; }
.qcart__sub { font-size: 12.5px; color: #777; margin-top: 5px; }
.qcart__price { margin-top: 9px; }
.qcart__price s { color: #9a9a9a; font-size: 13.5px; margin-right: 7px; }
.qcart__price b { font-size: 17px; }

/* summary — pinned toward the bottom like the shop's */
.qcart__summary { margin-top: auto; padding-top: 18px; }
.qcart__row { display: flex; justify-content: space-between; align-items: center; font-size: 14.5px; padding: 4px 0; }
.qcart__row--savings b { color: #16a34a; }
.qcart__row--subtotal { font-size: 15.5px; padding-top: 7px; }
.qcart__subtotal s { color: #9a9a9a; font-size: 13.5px; margin-right: 7px; }
.qcart__subtotal b { font-size: 17px; }

.qcart__checkout {
  width: 100%; border: 0; cursor: pointer; border-radius: 999px;
  background: #111; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0.04em;
  padding: 16px 18px; margin-top: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.qcart__checkout:hover { background: #000; }
.qcart__guarantee { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: #555; padding-top: 12px; }

@media (max-width: 560px) {
  /* bottom sheet on phones — same pattern the webshop's drawer follows */
  .qcart__panel {
    top: auto; left: 0; right: 0; width: auto; max-height: 86vh;
    border-radius: 16px 16px 0 0; transform: translateY(100%);
  }
  .qcart--open .qcart__panel { transform: translateY(0); }
  .qcart__demand { border-radius: 16px 16px 0 0; }
  .qcart__summary { margin-top: 18px; }
}

/* ---------------- floating "Select Supply" CTA ---------------- */
.fcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  background: #fff; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.10);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px max(24px, calc((100vw - 1200px) / 2));
  opacity: 1; transform: translateY(0); transition: opacity 260ms ease, transform 260ms ease;
}
.fcta--hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
.fcta__title { font-family: "Ivar Text", Georgia, serif; font-size: 20px; }
.fcta__btn {
  border: 0; cursor: pointer; border-radius: 999px; background: #111; color: #fff;
  font-size: 16px; font-weight: 600; padding: 15px 34px; white-space: nowrap;
}
.fcta__btn:hover { background: #000; }
@media (max-width: 560px) {
  /* Marko 2026-08-24: centered reads better on phones than the shop's left/right split */
  .fcta { justify-content: center; padding: 12px 16px; }
  .fcta__title { display: none; }
  .fcta__btn { width: min(420px, 92vw); }
}