/* 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;
  overscroll-behavior: contain;   /* the sheet's own scroll must not chain into the page on iOS (audit O2) */
}
.qcart--open .qcart__overlay { opacity: 1; }
.qcart--open .qcart__panel { transform: translateX(0); }
/* The page scrolls on <html> (general.css already hides body overflow, so a body class locked nothing and the
   page moved under the open drawer — audit O2). Same lock as html.navdrawer-open in nav-menu.css. */
html.qcart-lock { overflow: hidden !important; }
.qcart__overlay { touch-action: none; }

/* 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;
}
/* 44px hit area around the same 18px glyph (was ~22px — audit O14); top/right shifted so the icon stays put. */
.qcart__remove { position: absolute; top: -1px; right: -1px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: #9a9a9a; cursor: pointer; padding: 0; }
.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; }
/* Expired reservation: the strip stays (the device), only its copy changes — see cart-drawer.js#startTicker. */
.qcart__demand.is-expired { color: #212428; }
.qcart__demand.is-expired b { color: #e8501f; }

/* ---------------- pressed states + named transitions (audit O13) ----------------
   general.css gives .btn `transition: all .4s` — a 400ms lag on the hover/press of the primary CTAs. Name the
   properties and answer the press at once. Same look, faster answer. */
.btn, .btn--primary, .btn--secondary {
  transition: background-color 160ms cubic-bezier(.23, 1, .32, 1), color 160ms cubic-bezier(.23, 1, .32, 1),
              border-color 160ms cubic-bezier(.23, 1, .32, 1), transform 120ms cubic-bezier(.23, 1, .32, 1);
}
.btn:active { transform: scale(.985); }
.btn--primary:active { transform: scale(.985); }
.qcart__checkout { transition: background-color 160ms cubic-bezier(.23, 1, .32, 1), transform 120ms cubic-bezier(.23, 1, .32, 1), opacity 160ms cubic-bezier(.23, 1, .32, 1); }
.qcart__checkout:active { transform: scale(.985); }
.fcta__btn { transition: background-color 160ms cubic-bezier(.23, 1, .32, 1), transform 120ms cubic-bezier(.23, 1, .32, 1); }
.fcta__btn:active { transform: scale(.985); }
/* CHECKOUT while the next page loads: label kept, spinner appended, taps ignored (cart-drawer.js adds .is-loading). */
.qcart__checkout.is-loading { pointer-events: none; opacity: .85; }
.qcart__checkout.is-loading::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%; margin-left: 2px;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: qcart-spin .8s linear infinite;
}
@keyframes qcart-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn:active, .btn--primary:active, .qcart__checkout:active, .fcta__btn:active { transform: none; }
  .qcart__panel, .qcart__overlay, .fcta { transition-duration: .01ms; }
}

@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; }
}

/* ---------------- the sticky bar: the chosen supply + "Select supply" + "Add to cart" (Marko 2026-10-24) ----------------
   floating-cta.js. Add to cart is the strong, right-hand button; Select supply opens the sheet below. */
.fcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  background: rgba(255, 255, 255, .94); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.10);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px max(24px, calc((100vw - 1200px) / 2)) calc(12px + env(safe-area-inset-bottom));
  font-family: "TT Commons","TT Commons Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  opacity: 1; transform: translateY(0); transition: opacity 260ms ease, transform 260ms ease;
}
@supports (backdrop-filter: blur(1px)) { .fcta { background: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); } }
.fcta--hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
.fcta__sum { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fcta__name { font-weight: 600; font-size: 17px; color: #212428; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcta__price { font-size: 14px; font-variant-numeric: tabular-nums; }
.fcta__price em { font-style: normal; font-weight: 600; color: #ff5429; }
.fcta__price s { margin-left: 5px; color: #8b8c8e; }
.fcta__btns { display: flex; gap: 10px; flex: none; }
.fcta__sel, .fcta__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 16px/1 "TT Commons","TT Commons Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; }
.fcta__sel { padding: 0 20px; background: #fff; color: #212428; box-shadow: inset 0 0 0 1.5px #212428; }
.fcta__btn { padding: 0 26px; background: #212428; color: #fff; box-shadow: 0 8px 20px -10px rgba(33, 36, 40, .6); }
.fcta__btn:hover { background: #000; }
.fcta__p:not(:empty)::before { content: "·"; margin-right: 8px; }
.fcta__sel:active, .fcta__btn:active { transform: scale(.97); }
@media (max-width: 767px) {
  .fcta { flex-wrap: wrap; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .fcta__sum { flex: 1 0 100%; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; }
  .fcta__name { font-size: 15px; }
  .fcta__btns { flex: 1 0 100%; }
  .fcta__sel { flex: 0 0 38%; padding: 0 8px; font-size: 15px; min-height: 50px; }
  .fcta__btn { flex: 1; padding: 0 10px; min-height: 50px; }
  .fcta__btn svg { display: none; }
}

/* the supply sheet: the buy box's options as rows with their product photo */
.fcta-sheet { position: fixed; inset: 0; z-index: 1001; visibility: hidden; color: #212428;
  font-family: "TT Commons","TT Commons Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
.fcta-sheet.on { visibility: visible; }
.fcta-sheet__bg { position: absolute; inset: 0; background: rgba(20, 22, 25, .42); opacity: 0; transition: opacity .3s cubic-bezier(.2, .8, .2, 1); }
.fcta-sheet.on .fcta-sheet__bg { opacity: 1; }
.fcta-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 90vh; overflow: auto; overscroll-behavior: contain; background: #fff; border-radius: 22px 22px 0 0;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .45s cubic-bezier(.2, .9, .25, 1); }
.fcta-sheet.on .fcta-sheet__panel { transform: none; }
.fcta-sheet__grab { width: 40px; height: 5px; border-radius: 3px; background: #d6d6d6; margin: 0 auto 10px; }
.fcta-sheet__h { display: flex; justify-content: space-between; align-items: center; margin: 0 2px 12px; font-weight: 500; font-size: 18px; }
.fcta-sheet__x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f6f6f7; font-size: 22px; line-height: 1; cursor: pointer; color: #212428; }
.fcta-sheet__rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.fcta-row { position: relative; display: grid; grid-template-columns: 22px 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px 10px 12px;
  border: 1px solid #e6e6e6; border-radius: 12px; background: #fff; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: border-color .2s, box-shadow .2s; }
.fcta-row[aria-checked="true"] { border-color: #212428; box-shadow: inset 0 0 0 1px #212428; }
.fcta-row__radio { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #c9c9c9; transition: box-shadow .2s; }
.fcta-row[aria-checked="true"] .fcta-row__radio { box-shadow: inset 0 0 0 7px #212428; }
.fcta-row__img { width: 64px; height: 64px; border-radius: 10px; background: #f6f6f7; overflow: hidden; }
.fcta-row__img img { width: 100%; height: 100%; object-fit: contain; }
.fcta-row__t b { display: block; font-weight: 500; font-size: 15px; line-height: 1.25; }
.fcta-row__t span { display: block; margin-top: 3px; font-size: 13px; color: #6d6d6d; }
.fcta-row__p { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fcta-row__p b { display: block; font-weight: 600; font-size: 18px; color: #ff5429; }
.fcta-row__p s { font-size: 13px; color: #8b8c8e; }
/* free gift under the row that earns it (gift A/B, Marko 12 Nov): the buy-box gift band, small; promo tint, solid pill,
   struck value over FREE. Filled by floating-cta.js paint() from the band itself. */
.fcta-row__gift { grid-column: 2 / -1; display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 10px;
  background: #fff0ea; border: 1px solid rgba(255,84,41,.22); }
.fcta-row__gift[hidden] { display: none; }
.fcta-row__gift-img { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.fcta-row__gift-img img { width: 88%; height: 88%; object-fit: contain; display: block; }
.fcta-row__gift-t { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.25; font-weight: 500; color: #212428; }
.fcta-row__gift-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #ff5429; color: #fff; font-weight: 600; font-size: 12px; line-height: 16px; }
.fcta-row__gift-ico { display: inline-block; width: 12px; height: 12px; flex: 0 0 12px; background: currentColor;
  -webkit-mask: url(offer/icons/gift.svg) center/contain no-repeat; mask: url(offer/icons/gift.svg) center/contain no-repeat; }
.fcta-row__gift-p { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; font-size: 13px; line-height: 16px; font-variant-numeric: tabular-nums; }
.fcta-row__gift-p s { color: #8b8c8e; }
.fcta-row__gift-p b { font-weight: 600; font-size: 14px; color: #ff5429; }
.fcta-row__tag { position: absolute; top: -10px; right: 12px; padding: 3px 9px; border-radius: 999px; background: #212428; color: #fff; font-weight: 600; font-size: 12px; line-height: 1.3; }
.fcta-sheet__add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 58px; border: 0; border-radius: 999px; background: #212428; color: #fff;
  font: 600 18px/1 "TT Commons","TT Commons Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; cursor: pointer; font-variant-numeric: tabular-nums; }
.fcta-sheet__p:not(:empty)::before { content: "·"; margin-right: 8px; }
@media (min-width: 720px) { .fcta-sheet__panel { left: 50%; right: auto; width: 500px; margin-left: -250px; bottom: 24px; border-radius: 22px; padding: 14px 20px 20px; } .fcta-sheet__grab { display: none; } }

/* the serum toggle in the sheet (Rejuvenating / Brightening on / and /v2): a sliding thumb, as on the sub page */
.fcta-seg { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 0 0 12px; padding: 4px; border-radius: 999px; background: #f6f6f7; isolation: isolate; --k: 0; }
.fcta-seg__thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); transform: translateX(calc(var(--k) * 100%)); transition: transform .42s cubic-bezier(.2, .8, .2, 1); }
.fcta-seg button { position: relative; z-index: 1; min-height: 44px; border: 0; background: none; border-radius: 999px; cursor: pointer; font: 500 15px/1 "TT Commons","TT Commons Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color: #6d6d6d; transition: color .25s; }
.fcta-seg button[aria-pressed="true"] { color: #212428; }

/* the hand-off: the cart item glides into checkout's summary (cross-document View Transition; cart-drawer.js
   names it when Checkout is pressed, checkout-clean.css names the summary row the same) */
@view-transition { navigation: auto; }
.qcart.qcart--leaving .qcart__item { view-transition-name: qs-cart-item; }
::view-transition-group(qs-cart-item) { animation-duration: .45s; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
::view-transition-old(root) { animation-duration: .25s; }
::view-transition-new(root) { animation-duration: .35s; }
@media (prefers-reduced-motion: reduce) {
  .fcta-sheet__panel, .fcta-sheet__bg { transition-duration: .01ms; }
  ::view-transition-group(qs-cart-item), ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .01s; }
}

/* Gift A/B: the free gift's row, under the product. [hidden] must win over .qcart__item's display. */
.qcart__item--gift[hidden]{display:none}
.qcart__item--gift{border-top:1px solid #e6e6e6}
.qcart__item--gift .qcart__price b{color:#ff5429}