/* =============================================================
   upsell.css — bespoke styles for the post-purchase upsell pages
   Reuses the Qure offer-page system (general.css tokens, Canela /
   TT Commons fonts, .container, .btn--primary, footer.css).
   Only the funnel-specific chrome lives here.
   Design source: Figma "Micro-Infusion — Desktop" (Member Offer).
   ============================================================= */

/* let the long upsell page scroll (general.css sets body{overflow:hidden}) */
html { overflow-x: clip; }
body.up-page { overflow-x: clip; padding-top: 0; background: #fff; }

.up-main { display: block; padding-top: 96px; } /* offset the fixed (two-row) topbar */
/* …but checkout's header (.co2-header) is in normal flow, not fixed, so that offset became ~96px of
   dead white between the logo row and the first content. Only checkout renders .co2-header, so keying
   off the adjacency scopes this without a second body class to keep in sync. */
.co2-header + .up-main { padding-top: 0; }

/* shared section rhythm */
.up-section { padding: 56px 0; }
.up-eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: 12px;
  color: var(--charcoal-light); text-align: center; margin: 0 0 10px;
}
.up-h2 {
  font-family: var(--heading-font-family); font-weight: 300;
  font-size: clamp(28px, 4vw, 44px); line-height: 1.1; color: var(--qure-charcoal);
  text-align: center; margin: 0 0 8px;
}
.up-sub { text-align: center; color: var(--charcoal-light); font-size: 16px; margin: 0 auto; max-width: 620px; }

/* ===================== 1. STICKY PROGRESS TOP BAR =====================
   Design: dark charcoal bar, centred white Qure logo above a 3-step tracker
   (Order Approved ✓ · Customize Order X/3 · Order Summary) with numbered
   mint/grey circles. */
.up-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: var(--qure-charcoal); border-bottom: 1px solid rgba(255,255,255,.08);
}
.up-topbar__in {
  max-width: 1232px; margin: 0 auto; padding: 12px 24px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 11px;
}
.up-topbar__logo { display: inline-flex; align-items: center; color: #fff; text-decoration: none; }
.up-topbar__logo:hover { text-decoration: none; color: #fff; }
.up-topbar__logo .e-icon { font-size: 26px; }

.up-steps { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.up-step { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.up-step__num {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: #3a3e42; color: #9a9d9f;   /* upcoming */
}
.up-step__num svg { width: 14px; height: 14px; }
.up-step__label {
  text-transform: uppercase; letter-spacing: .07em; font-size: 12px; font-weight: 600; color: #8f9295;
}
.up-step__sep { width: 40px; height: 1px; background: #4a4e52; flex: 0 0 auto; }

/* done + active share the mint circle; only upcoming stays grey */
.up-step.is-done .up-step__num,
.up-step.is-active .up-step__num { background: var(--base-color); color: var(--qure-charcoal); }
.up-step.is-done .up-step__label,
.up-step.is-active .up-step__label { color: #fff; }

/* ===================== 1b. PROCESSING WARNING BANNER (item #5) =====================
   "IMPORTANT — do not close this window or press Back, your order is still
   processing." Sits at the very top of the white content area on every upsell page,
   styled to match Luke's design: cream rounded box + sage hexagon stop-hand icon. */
.up-warning-wrap { display: flex; justify-content: center; padding: 26px 24px 0; }
.up-warning {
  display: flex; align-items: center; gap: 16px;
  width: 100%; max-width: 640px;
  background: #f4f6f3; border: 1px solid #e4e8e2; border-radius: 14px;
  padding: 16px 20px;
}
/* icon + text enlarged (Marko 2026-07-03) for more prominence — box width unchanged */
.up-warning__ico {
  flex: 0 0 56px; width: 56px; height: 56px; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
}
.up-warning__ico .hex { position: absolute; inset: 0; width: 56px; height: 56px; color: #d4e4d9; }  /* sage hexagon backplate */
.up-warning__ico .hand { position: relative; width: 30px; height: 30px; z-index: 1; color: #4f8268; }  /* stop-hand icon */
.up-warning__body { line-height: 1.45; }
.up-warning__title {
  font-weight: 700; color: var(--qure-charcoal); font-size: 16px;
  letter-spacing: .02em; margin-bottom: 3px;
}
.up-warning__text { font-size: 15px; color: #5a5e61; }
.up-warning__text strong { color: var(--qure-charcoal); font-weight: 700; }

/* ===================== 2. ORDER-CONFIRMED NOTICE ===================== */
.up-notice-wrap { display: flex; justify-content: center; padding: 22px 16px 0; }
.up-notice {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #e7e8e9; border-radius: 14px;
  box-shadow: 0 8px 24px rgba(33,36,40,.08); padding: 12px 14px; max-width: 460px; width: 100%;
}
.up-notice__ico { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: #e8f4ef; color: var(--color-green); display: inline-flex; align-items: center; justify-content: center; }
.up-notice__ico svg { width: 16px; height: 16px; }
.up-notice__body { flex: 1 1 auto; line-height: 1.3; }
.up-notice__title { font-weight: 600; color: var(--qure-charcoal); font-size: 15px; }
.up-notice__meta { font-size: 13px; color: var(--charcoal-light); }
.up-notice__meta b { color: #4a4d50; font-weight: 600; }
.up-notice__close { flex: 0 0 auto; background: none; border: 0; color: #b6b7b9; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px; }

/* ===================== 3. HERO HEADING ===================== */
.up-hero-head { text-align: center; padding: 34px 16px 8px; max-width: 760px; margin: 0 auto; }
.up-hero-head h1 {
  font-family: var(--heading-font-family); font-weight: 300;
  font-size: clamp(30px, 4.4vw, 48px); line-height: 1.08; color: var(--qure-charcoal); margin: 0 0 14px;
}
.up-hero-head .up-hero-strong { font-weight: 700; color: var(--qure-charcoal); font-size: 18px; margin: 0 0 6px; }
.up-hero-head .up-hero-muted { color: var(--charcoal-light); font-size: 16px; margin: 0; }

/* ===================== 4. VSL + OFFER HERO ===================== */
.up-offer { max-width: 1040px; margin: 30px auto 0; padding: 0 24px; }
/* 1:1 with Figma: ONE light card, product image (left, grey panel) + details (right, dark text) */
.up-offer__grid {
  display: grid; grid-template-columns: 1fr 1.22fr; align-items: stretch;
  background: #fff; border: 1px solid #dfe0e0; border-radius: 24px; overflow: hidden;
}
.up-offer__media { position: relative; background: var(--bg-light); display: flex; align-items: center; justify-content: center; padding: 34px; }
.up-offer__media img { max-width: 100%; max-height: 400px; object-fit: contain; }
.up-offer__media .up-pcard__badge { top: 20px; left: 20px; right: auto; }
.up-offer__body { padding: 36px 40px; display: flex; flex-direction: column; }
.up-offer__supply { font-size: 15px; color: var(--charcoal-light); margin: 0 0 16px; }
.up-card__actions { display: flex; align-items: center; gap: 18px; margin-top: 6px; }

/* The real VSL files are vertical 9:16 (talking-head UGC). Size the stage to the
   video's true aspect ratio so the subject is never cropped — the old wide stage
   used object-fit:cover on a portrait video, so only the eyes showed. The stage is
   portrait, centred, and capped so it doesn't dominate the page. */
.up-video {
  position: relative; border-radius: 16px; overflow: hidden;
  width: 100%; max-width: 360px; aspect-ratio: 9 / 16; margin: 0 auto;
  background: #1c1f22 center/cover no-repeat;
  background-image: var(--up-vsl-img, linear-gradient(135deg,#2a2f34,#14171a));
  display: flex; align-items: center; justify-content: center;
}
/* Desktop is served the 16x9 cut (vsl-source.js, issue #81), so the stage has to follow it —
   otherwise a widescreen video renders inside the 360px portrait box above and letterboxes to a
   sliver. 768px MUST match DESKTOP_MIN in vsl-source.js; if the two drift apart a viewport in the
   gap gets the wrong-shaped stage for its cut. */
@media (min-width: 768px) {
  .up-video { max-width: 720px; aspect-ratio: 16 / 9; }
}
.up-video__badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--color-orange); color: #fff; font-weight: 600; font-size: 12px;
  letter-spacing: .03em; text-transform: uppercase; padding: 7px 12px; border-radius: 8px;
}
.up-video__play {
  width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.92);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: 0; box-shadow: 0 6px 24px rgba(0,0,0,.25); transition: transform .2s;
}
.up-video__play:hover { transform: scale(1.06); }
.up-video__play svg { width: 22px; height: 22px; margin-left: 3px; color: var(--qure-charcoal); }
.up-video__ph { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.55); font-size: 11px; letter-spacing: .04em; }

/* offer details column — light, dark text (Figma 1:1) */
.up-card { display: flex; flex-direction: column; height: 100%; }
.up-card__rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--charcoal-light); margin-bottom: 10px; }
.up-stars { color: var(--color-ice); letter-spacing: 2px; font-size: 15px; }
.up-card__name { font-family: var(--heading-font-family); font-weight: 300; font-size: clamp(28px,3.1vw,44px); line-height: 1.04; margin: 0 0 6px; color: var(--qure-charcoal); }
.up-card__price { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.up-card__now { font-size: 30px; font-weight: 700; color: var(--color-orange); }
.up-card__was { color: #b5b6b7; text-decoration: line-through; font-size: 18px; }
.up-card__save { background: var(--color-orange); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 6px; letter-spacing: .02em; }
.up-card__benefits { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.up-card__benefits li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: #4a4d50; line-height: 1.4; }
.up-card__benefits svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; color: var(--color-green); }
.up-card__trust { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid #ececed; margin: auto 0 18px; }
.up-trust-item { display: flex; align-items: center; gap: 8px; flex: 1; }
.up-trust-item svg { width: 20px; height: 20px; color: #9a9d9f; flex: 0 0 20px; }
.up-trust-item span { font-size: 11px; color: var(--charcoal-light); line-height: 1.2; }
.up-card__cta {
  flex: 1; background: var(--qure-charcoal); color: #fff; border: 0; border-radius: 999px;
  font-weight: 600; font-size: 14.5px; letter-spacing: .04em; text-transform: uppercase;
  padding: 17px; cursor: pointer; transition: background .2s;
}
.up-card__cta:hover { background: #34383c; }
.up-card__cta:disabled { opacity: .5; cursor: default; }
.up-card__skip { background: none; border: 0; color: var(--charcoal-light); font-size: 14px; padding: 0; cursor: pointer; white-space: nowrap; }
.up-card__skip:hover { color: var(--qure-charcoal); }

/* ===================== 5. SUPPLY SELECTOR ===================== */
/* Design: a clearly separate block below the main offer — generous top spacing,
   larger heading, and a raised/scaled featured centre card with grey image panels. */
.up-supply { max-width: 1080px; margin: 0 auto; padding: 64px 24px 30px; }  /* bottom pad matches the buy box's top spacing */
.up-supply .up-eyebrow { margin-bottom: 14px; }
.up-supply .up-h2 { font-size: clamp(32px, 4.4vw, 50px); margin-bottom: 12px; }
.up-supply .up-sub { font-size: 16.5px; }
.up-supply__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; align-items: center; }
.up-pcard {
  position: relative; background: #fff; border: 1px solid #e7e8e9; border-radius: 16px;
  padding: 24px 22px 26px; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s;
}
/* featured centre card — raised + scaled, heavier frame + shadow (matches design) */
.up-pcard.is-featured {
  border: 2px solid var(--qure-charcoal); box-shadow: 0 22px 50px rgba(33,36,40,.16);
  transform: scale(1.06); z-index: 2; background: #fff;
}
.up-pcard__badge {
  position: absolute; top: 16px; right: 16px; background: var(--color-orange); color: #fff;
  font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 7px;
  display: inline-flex; align-items: center; gap: 5px;
}
/* grey rounded image panel behind the bottle render (design) */
.up-pcard__img {
  height: 210px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
  background: var(--bg-light); border-radius: 12px; padding: 16px;
}
.up-pcard__img img { max-height: 100%; max-width: 100%; object-fit: contain; }
.up-pcard__rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--charcoal-light); margin-bottom: 6px; }
.up-pcard__name { font-weight: 600; color: var(--qure-charcoal); font-size: 16px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.up-pcard__now { color: var(--color-orange); font-weight: 700; }
.up-pcard__was { color: #b6b7b9; text-decoration: line-through; font-size: 14px; font-weight: 400; }
.up-pcard__meta { font-size: 13px; color: var(--charcoal-light); margin: 4px 0 16px; }
.up-pcard__meta b { color: #4a4d50; font-weight: 600; }
.up-pcard__cta {
  margin-top: auto; width: 100%; background: var(--qure-charcoal); color: #fff; border: 0;
  border-radius: 999px; font-weight: 600; font-size: 14px; padding: 13px; cursor: pointer; transition: background .2s;
}
.up-pcard__cta:hover { background: #34383c; }
.up-pcard__cta:disabled { opacity: .5; cursor: default; }

/* full-width skip bar */
/* single buy box (MI-style: image + 3 selectable options + one CTA) — Matt 2026-07-06 */
.up-buybox { max-width: 760px; margin: 30px auto 0; display: grid; grid-template-columns: 240px 1fr; gap: 30px; align-items: center;
  background: #fff; border: 1px solid #e7e8e9; border-radius: 18px; padding: 26px 28px; }
.up-buybox__media { text-align: center; }
.up-buybox__img { width: 100%; max-width: 220px; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 12px; background: linear-gradient(150deg,#f2f6f4,#fff 70%); }
.up-buybox__rating { font-size: 13px; color: var(--charcoal-light); margin-top: 10px; }
.up-opts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.up-opt { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 16px; border: 1px solid #dfe0e0; border-radius: 12px; background: #fff; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
.up-opt.sel { border-color: var(--qure-charcoal); box-shadow: inset 0 0 0 1px var(--qure-charcoal); }
.up-opt__radio { flex: 0 0 20px; width: 20px; height: 20px; border: 2px solid #cfd0d1; border-radius: 50%; position: relative; }
.up-opt.sel .up-opt__radio { border-color: var(--qure-charcoal); }
.up-opt.sel .up-opt__radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--qure-charcoal); }
.up-opt__main { flex: 1; display: flex; flex-direction: column; }
.up-opt__main b { font-size: 15px; color: var(--qure-charcoal); font-weight: 600; }
.up-opt__main small { font-size: 12.5px; color: var(--charcoal-light); margin-top: 1px; }
.up-opt__price { font-weight: 700; font-size: 16px; color: var(--qure-charcoal); white-space: nowrap; }
.up-opt__price s { font-weight: 400; font-size: 13px; color: #b6b7b9; margin-left: 3px; }
.up-opt__tag { position: absolute; top: -9px; right: 14px; background: var(--qure-charcoal); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 5px; }
.up-buybox__cta { display: block; width: 100%; background: var(--qure-charcoal); color: #fff; border: 0; border-radius: 999px; padding: 15px; font-family: inherit; font-weight: 600; font-size: 16px; cursor: pointer; transition: background .2s; }
.up-buybox__cta:hover { background: #34383c; }
.up-buybox__cta:disabled { opacity: .55; cursor: default; }

/* ── "Select Your Supply" — desktop: product image LEFT, options RIGHT; dynamic image swaps on select (Marko 2026-07-08) ── */
.up-buybox--supply { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: center; max-width: 880px; }
.up-buybox--supply .up-buybox__media { align-self: center; }
.up-buybox--supply .up-buybox__img { max-width: 300px; width: 100%; }
.up-supply-label { font-size: 16px; font-weight: 600; color: var(--qure-charcoal); margin: 0 0 14px; }
.up-buybox--supply .up-opts { gap: 12px; }
.up-buybox--supply .up-opt { gap: 14px; padding: 16px 18px; border-radius: 14px; }
.up-buybox--supply .up-opt.sel { box-shadow: inset 0 0 0 1.5px var(--qure-charcoal); background: #fafafa; }
.up-buybox--supply .up-opt__tag { background: var(--color-orange); text-transform: none; letter-spacing: .01em; font-size: 11px; padding: 3px 12px; border-radius: 6px; top: -10px; }
.up-opt__thumb { flex: 0 0 52px; width: 52px; height: 52px; object-fit: contain; border-radius: 8px; background: linear-gradient(150deg,#f2f6f4,#fff 70%); }
.up-opt__pricebox { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.up-opt__pricebox .up-opt__price s { margin-left: 0; margin-right: 5px; }
.up-opt__off { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: #fdece5; color: var(--color-orange); white-space: nowrap; }
.up-opt.sel .up-opt__off { background: var(--color-orange); color: #fff; }
@media (max-width: 700px) {
  .up-buybox { grid-template-columns: 1fr; gap: 18px; padding: 20px 16px; }
  .up-buybox__img { max-width: 160px; }
  /* supply buybox: image on TOP, 3 options below — sized so the picture + all 3 options fit one screen */
  .up-buybox--supply { grid-template-columns: 1fr; gap: 14px; }
  .up-buybox--supply .up-buybox__img { max-width: 190px; }
}

/* deliberately low-prominence: small, muted text link (Matt 2026-07-06 — "hard to find and click") */
.up-skipbar {
  display: block; width: auto; margin: 18px auto 0;
  background: none; border: 0; padding: 4px 8px;
  text-align: center; font-weight: 400; color: var(--charcoal-light); cursor: pointer;
  font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px;
}
.up-skipbar:hover { color: var(--qure-charcoal); background: none; }

/* ---- downsell: a single centred product card (reuses .up-pcard) ---- */
.up-downsell { max-width: 460px; margin: 26px auto 0; padding: 0 24px 56px; }   /* bottom pad so "No thanks" isn't on the footer */
.up-downsell .up-pcard.is-featured { transform: none; }        /* no scale — it's the only card */
.up-downsell .up-pcard__img { height: 260px; }
.up-dcard__guarantee { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; font-size: 12.5px; color: var(--charcoal-light); }
.up-dcard__guarantee svg { width: 15px; height: 15px; color: #9a9d9f; }
.up-downsell .up-skipbar { margin-top: 18px; max-width: none; }

/* ===================== 6. TRUST MARQUEE (removed per final design) ===================== */
.up-marquee { display: none; }
.up-marquee--legacy { border-top: 1px solid #ececed; border-bottom: 1px solid #ececed; overflow: hidden; margin-top: 48px; }
.up-marquee__track {
  display: flex; gap: 28px 40px; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 18px 24px; max-width: 1100px; margin: 0 auto;
}
.up-badge { display: inline-flex; align-items: center; gap: 8px; color: #6c6f72; font-size: 13px; flex: 0 0 auto; }
.up-badge svg { width: 18px; height: 18px; color: #9a9d9f; }

/* ===================== 7. BOARD-CERTIFIED EXPERTS ===================== */
.up-experts { background: var(--bg-light); margin-top: 44px; }   /* whitespace between the offer/skip and this grey block */
.up-experts__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 34px; max-width: 1040px; margin-left: auto; margin-right: auto; align-items: start; }
/* Figma: full-photo card — portrait photo fills the card, name/title overlaid bottom-left, ± bottom-right */
.up-doc { display: flex; flex-direction: column; }
.up-doc__photo { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 3.6; background: #e9eceb; cursor: pointer; }
.up-doc__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.up-doc__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,23,26,.72), rgba(20,23,26,.12) 44%, transparent 62%); }
.up-doc__overlay { position: absolute; left: 16px; right: 48px; bottom: 14px; z-index: 2; }
.up-doc__name { color: #fff; font-weight: 600; font-size: 15px; line-height: 1.2; }
.up-doc__title { color: rgba(255,255,255,.82); font-size: 11.5px; margin-top: 2px; line-height: 1.25; }
.up-doc__toggle {
  position: absolute; right: 14px; bottom: 14px; z-index: 3; width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: #fff; color: var(--qure-charcoal); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: background .18s, color .18s;
}
.up-doc.is-open .up-doc__toggle { background: var(--qure-charcoal); color: #fff; }
.up-doc__quote {
  max-height: 0; overflow: hidden; opacity: 0;
  font-size: 13px; color: #5a5e61; line-height: 1.5; font-style: italic;
  transition: max-height .3s ease, opacity .3s ease, margin-top .3s ease;
}
.up-doc.is-open .up-doc__quote { max-height: 220px; opacity: 1; margin-top: 12px; }

/* ===================== CC API log widget (debug only — add ?debug to any page) ===================== */
#logT, #log { display: none; }                        /* hidden for customers; shown only in debug mode */
body.debug #logT { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: block; background: var(--qure-charcoal); color: #fff;
  border: 0; border-radius: 999px; padding: 10px 16px; font-size: 13px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
#logT b { background: var(--color-orange); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
body.debug #log { position: fixed; right: 16px; bottom: 64px; z-index: 80; width: 340px; max-height: 50vh; overflow: auto;
  background: #14171a; color: #cfd1d3; border-radius: 12px; padding: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.35); font-size: 12px; }
body.debug #log.show { display: block; }
#log h4 { color: #fff; margin: 0 0 8px; font-size: 13px; }
#logBody div { padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-family: ui-monospace, Menlo, monospace; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
  .up-offer__grid { grid-template-columns: 1fr; }
  .up-supply__grid { grid-template-columns: 1fr; }
  .up-pcard.is-featured { transform: none; }   /* no scale in single-column → avoids overflow */
  .up-experts__grid { grid-template-columns: repeat(2, 1fr); }
  .up-topbar__in { display: flex; padding: 11px 16px; gap: 12px; }
  .up-steps { flex: 1 1 auto; overflow-x: auto; justify-content: flex-start; -ms-overflow-style: none; scrollbar-width: none; }
  .up-steps::-webkit-scrollbar { display: none; }
  .up-step__sep { width: 16px; }
}
@media (max-width: 560px) {
  .up-step__label { display: none; }
  .up-step.is-active .up-step__label { display: inline; }
  .up-experts__grid { grid-template-columns: 1fr 1fr; }
}

/* =============================================================
   CHECKOUT + THANK-YOU — same Qure system as the upsells
   (shared topbar, Canela, footer; clean form + summary)
   ============================================================= */
/* Full-bleed 2-column Shopify checkout: white form left, mint panel right (edge-to-edge); content hugs the centre gutter. */
.co2-shell { max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.co2-left  { background: #fff;    box-sizing: border-box; padding: 40px 48px 90px max(24px, calc(50vw - 550px)); }
.co2-right { background: #dcebe4; box-sizing: border-box; padding: 40px max(24px, calc(50vw - 550px)) 90px 48px; }
/* Shopify-style pill trust badges under the header */
/* Shopify-1:1 checkout header (2026-08-11): logo + customer avatars + count. Replaces the 3-step
   progress bar on checkout.html only — the upsell pages keep .up-topbar. */
.co2-header { background: #fff; }
.co2-header__in { max-width: 1080px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center;
  justify-content: center; gap: 18px; flex-wrap: wrap; }
/* Proportions taken off the reference header rather than picked: the count text runs at roughly half
   the avatar diameter, and the logo's cap height sits level with the avatars. Ours had a 15px count
   against 34px avatars, which read as small text floating beside oversized circles. */
.co2-header__logo { display: inline-flex; align-items: center; color: var(--qure-charcoal); font-size: 36px; }
.co2-header__proof { display: inline-flex; align-items: center; gap: 10px; }
.co2-avatars { display: inline-flex; }
.co2-avatars img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center top;
  border: 2px solid #fff; box-shadow: 0 0 0 1px #e4e4e4; }
.co2-avatars img + img { margin-left: -13px; }
.co2-header__count { font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--qure-charcoal); }
@media (max-width: 560px) {
  .co2-header__in { gap: 10px; padding: 13px 16px; }
  .co2-header__count { font-size: 15px; }
  .co2-avatars img { width: 32px; height: 32px; }
  .co2-header__logo { font-size: 28px; }
}

/* One grouped pill holding all three claims, as on Shopify — three separate pills read as three
   unrelated badges. Sits tight under the header rather than floating in whitespace. */
/* The rule sits UNDER the trust claims, not between them and the logo — the logo row, the customer
   count and the three claims are one header block in the reference, closed by a single line. Ours drew
   it after the logo row, which split the block in two. */
.co2-trust { display: flex; justify-content: center; padding: 0 24px 18px; border-bottom: 1px solid #ececec; }
.co2-trust__in { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center;
  gap: 4px 22px; background: var(--bg-light); border: 1px solid #ececec; border-radius: 28px; padding: 9px 22px; }
.co2-trust span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500;
  color: var(--qure-charcoal); white-space: nowrap; }
.co2-trust svg { width: 15px; height: 15px; color: var(--qure-charcoal); }

.co2-block { margin-bottom: 15px; }
/* NO "Sign in" on Contact, deliberately. Shopify's checkout has one because Shopify has customer
   accounts; this funnel has none — there is nothing for a shopper to sign in to. The only login in this
   app is site/login.html, which is the internal ANALYTICS dashboard (“Sign in — Qure Analytics”,
   posting to /auth/password). Linking it from checkout pointed customers at staff infrastructure.
   Removed 2026-08-12. Do not re-add for parity: matching a control that does nothing here is worse
   than the small visual difference. */
/* Inert shipping-method prompt shown until the delivery address is complete. */
.co2-ship-empty { border: 1px solid #ececec; background: var(--bg-light); border-radius: 10px;
  padding: 16px 18px; font-size: 14px; color: #5a5e61; }
.co2-block h2 { font-family: var(--base-font-family); font-weight: 600; font-size: 22px; letter-spacing: -.02em; color: var(--qure-charcoal); margin: 0 0 12px; }
.co2-block .co2-sub { font-size: 13px; color: var(--charcoal-light); margin: -3px 0 10px; }

/* labels + inputs */
.co2-label { display: block; font-size: 12px; color: var(--charcoal-light); margin: 7px 0 3px; }
.co2-input, .co2-select { box-sizing: border-box; width: 100%; padding: 10px 13px; border: 1px solid #dfe0e0; border-radius: 9px; font-family: var(--base-font-family); font-size: 14px; color: var(--qure-charcoal); background: #fff; transition: border-color .15s; }
/* prevent horizontal overflow: grid/flex children must be allowed to shrink, form controls use border-box */
.co2-left, .co2-right, .co2-summary, .co2-row2, .co2-block, #airwallex-card { min-width: 0; }
.co2-disc input, #airwallex-card, #airwallex-card * { box-sizing: border-box; max-width: 100%; }
.co2-input:focus, .co2-select:focus { outline: none; border-color: var(--qure-charcoal); }
.co2-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* treatment pills */
.co2-prods { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.co2-prod { padding: 13px; border: 1px solid #dfe0e0; border-radius: 10px; background: #fff; font-size: 14px; font-weight: 500; color: var(--qure-charcoal); cursor: pointer; text-align: center; transition: border-color .15s, box-shadow .15s; }
.co2-prod.sel { border-color: var(--qure-charcoal); box-shadow: inset 0 0 0 1px var(--qure-charcoal); }

/* plan radios */
.co2-plan { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid #dfe0e0; border-radius: 12px; cursor: pointer; margin-bottom: 10px; transition: border-color .15s, box-shadow .15s; }
.co2-plan.sel { border-color: var(--qure-charcoal); box-shadow: inset 0 0 0 1px var(--qure-charcoal); }
.co2-radio { width: 20px; height: 20px; border: 2px solid #cfd0d1; border-radius: 50%; flex: 0 0 20px; position: relative; }
.co2-plan.sel .co2-radio { border-color: var(--qure-charcoal); }
.co2-plan.sel .co2-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--qure-charcoal); }
.co2-plan__body { flex: 1; }
.co2-plan__name { font-weight: 600; color: var(--qure-charcoal); font-size: 15px; display: flex; align-items: center; gap: 8px; }
.co2-plan__tag { background: var(--qure-charcoal); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; }
.co2-plan__meta { font-size: 12.5px; color: var(--charcoal-light); margin-top: 2px; }
.co2-plan__price { text-align: right; }
.co2-plan__price b { font-size: 17px; color: var(--qure-charcoal); }
.co2-plan__price s { display: block; font-size: 12px; color: #b6b7b9; }

/* urgency */
.co2-urgency { display: flex; align-items: center; gap: 9px; background: #fff5f1; border: 1px solid #ffd9cc; border-radius: 9px; padding: 9px 13px; font-size: 13px; color: #8a3a22; margin-bottom: 14px; }
.co2-urgency b { color: var(--color-orange); }

/* card form (Airwallex iframe drops into #airwallex-card at go-live; native inputs are demo-only) */
.co2-pay-secure { font-size: 12.5px; color: var(--charcoal-light); margin: 0 0 7px; display: flex; align-items: center; gap: 6px; }
.co2-cards { display: flex; gap: 6px; margin-bottom: 8px; }
.co2-cards img { height: 20px; }
.co2-cardbox { border: 1px solid #dfe0e0; border-radius: 9px; overflow: hidden; }
.co2-cardrow { display: flex; align-items: center; gap: 8px; padding: 11px 14px; }
.co2-cardrow .lock { color: var(--color-green); flex: 0 0 auto; display: inline-flex; }
.co2-cardrow input { border: 0; outline: 0; flex: 1; font-family: var(--base-font-family); font-size: 15px; color: var(--qure-charcoal); background: transparent; }
.co2-cardgrid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #ececed; }
.co2-cardgrid input { border: 0; outline: 0; padding: 11px 14px; font-family: var(--base-font-family); font-size: 15px; color: var(--qure-charcoal); }
.co2-cardgrid input:first-child { border-right: 1px solid #ececed; }
/* Airwallex Drop-in (card-only) renders its own native stacked card form into this container */
#airwallex-card { background: transparent; }
#airwallex-card:empty { display: none; }  /* before mount → hidden (native demo form shows instead) */

.co2-paynow { width: 100%; background: var(--qure-charcoal); color: #fff; border: 0; border-radius: 12px; padding: 15px; font-weight: 600; font-size: 16px; letter-spacing: .02em; cursor: pointer; margin-top: 14px; transition: background .2s; }
.co2-paynow:hover { background: #34383c; }
.co2-paynow:disabled { opacity: .55; cursor: default; }
.co2-fineprint { font-size: 12.5px; color: var(--charcoal-light); text-align: center; margin: 8px 0 0; }

/* ── Shopify-parity checkout touches ── */
/* The express consent line's styles were removed 2026-08-12 along with the line itself — the express
   block now runs straight from the wallet buttons into the OR divider. */
.co2-reserve { display: flex; align-items: center; gap: 9px; background: #f4f5f6; border-radius: 10px; padding: 11px 14px; font-size: 13px; color: #4a4d50; margin-bottom: 15px; }
.co2-reserve svg { width: 17px; height: 17px; color: #9a9d9f; flex: 0 0 auto; }
.co2-reserve b { color: var(--qure-charcoal); font-variant-numeric: tabular-nums; }
.co2-field { position: relative; }
.co2-field .co2-input { padding-right: 42px; }
.co2-field__help { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; border: 1px solid #cfd0d1; color: #9a9d9f; font-size: 11px; line-height: 17px; text-align: center; cursor: help; background: #fff; user-select: none; }
.co2-social__quote { text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--qure-charcoal); border-top: 1px solid #eef0f1; margin-top: 14px; padding-top: 14px; transition: opacity .3s; }
.co2-social__quote b { font-weight: 700; }
.co2-social__quote cite { display: block; margin-top: 6px; font-style: normal; font-size: 12.5px; color: var(--charcoal-light); }

/* ── Shopify-style floating-label fields (checkout form, 1:1) ── */
.co2-fl { position: relative; margin-bottom: 8px; }
.co2-fl input, .co2-fl select {
  box-sizing: border-box; width: 100%; height: 53px; margin: 0;
  padding: 19px 13px 5px; border: 1px solid #cfd0d1; border-radius: 8px;
  font-family: var(--base-font-family); font-size: 15px; color: var(--qure-charcoal);
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.co2-fl select {
  -webkit-appearance: none; appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%238a8d90' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.co2-fl label {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 15px; color: #6b6e71; pointer-events: none;   /* 5.1:1 on white (was #8a8d90, 3.3:1 — audit C22) */
  max-width: calc(100% - 30px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: top .12s ease, font-size .12s ease, transform .12s ease;
}
.co2-fl input:focus, .co2-fl select:focus { outline: none; border-color: var(--qure-charcoal); box-shadow: inset 0 0 0 1px var(--qure-charcoal); }
.co2-fl input:focus ~ label,
.co2-fl input:not(:placeholder-shown) ~ label,
.co2-fl select ~ label { top: 9px; transform: none; font-size: 11px; }
.co2-fl.has-icon input { padding-right: 42px; }
.co2-fl__icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #9a9d9f; pointer-events: none; }
.co2-fl .co2-field__help { top: 50%; }
.co2-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.co2-row2 { gap: 8px; margin-bottom: 8px; }
.co2-row2 .co2-fl, .co2-row3 .co2-fl { margin-bottom: 0; }

/* full-screen "processing" overlay — shown the instant payment succeeds (wallet sheet closes / card confirms)
   so the ~1-2s finalize window never looks like "nothing happened". */
.co2-processing { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.co2-processing.is-on { display: flex; }
.co2-processing__box { text-align: center; padding: 24px; }
.co2-spinner { width: 46px; height: 46px; border-radius: 50%; border: 3px solid #e7e8e9; border-top-color: var(--qure-charcoal);
  margin: 0 auto 16px; animation: co2-spin .8s linear infinite; }
@keyframes co2-spin { to { transform: rotate(360deg); } }
.co2-processing__title { font-family: var(--heading-font-family); font-weight: 300; font-size: 23px; color: var(--qure-charcoal); }
.co2-processing__sub { font-size: 13.5px; color: var(--charcoal-light); margin-top: 6px; }

/* ===== Express checkout (top of form, Shopify 1:1) — Airwallex Apple/Google Pay button elements ===== */
.co2-express-wrap { margin-bottom: 18px; }
.co2-express__label { font-size: 13px; color: #5a5e61; text-align: center; margin: 0 0 10px; }   /* 7.0:1 (was 3.4:1 — audit C22) */
.co2-express { display: flex; flex-direction: row; gap: 10px; }   /* wallets sit side-by-side (Marko 2026-07-08) */
/* ONE SLOT PER WALLET (#214, Marko's 2026-09-04 recording). The slot — not the mount, not the placeholder —
   is the flex child, so the row always has exactly two width-holders and NOTHING can redistribute it:
   not the iframe mounting (the old squeeze — the mount used to become a third/fourth flex sibling the
   moment it was non-empty, while still painting nothing), not a placeholder retiring (the old gap), not
   both standing at once (the old three-button frame). Mount and placeholder are stacked INSIDE the slot. */
.co2-wallet-slot { flex: 1; min-width: 0; position: relative; min-height: 44px; }
/* DORMANT ≠ dead (#214, 2026-09-04): without ApplePaySession the Apple slot is parked — it must not hold
   half the row as a void — but Airwallex can still mount cross-browser Apple Pay (QR handoff) there, and
   the element's `ready` wakes the slot. display:none, never removal. */
.co2-wallet-slot--dormant { display: none; }
.co2-wallet-mount:empty { display: none; }                 /* an empty mount paints nothing (mock mode / pre-mount) */
/* Express row holds its height from first paint (#46); min-height keeps it from collapsing during
   a currency remount, when both mounts briefly empty out again. */
.co2-express { min-height: 44px; }
/* The pairs never swap sides: Apple left, Google right, whatever order they mount in. */
.co2-wallet-slot.co2-wallet--apple  { order: 1; }
.co2-wallet-slot.co2-wallet--google { order: 2; }
/* A placeholder is visibly not-yet-live and cannot be pressed. In live mode it sits ON TOP of its own
   mount node, OPAQUE (a translucent one would blend with the real button painting underneath), and is
   faded out by retireSkeleton() once the real button is up — a swap in place inside a fixed footprint. */
.co2-wallet--skel { pointer-events: none; cursor: default; background: #a8a9ad; opacity: 1; }
.co2-wallet--skel:hover { opacity: 1; }
.co2-wallet-slot .co2-wallet { width: 100%; }              /* the button was the flex child before the slot existed; inside the slot it must fill it explicitly (mock mode showed content-width pills without this) */
.co2-wallet-slot .co2-wallet--skel { position: absolute; inset: 0; height: 100%; width: 100%; z-index: 1; }
.co2-wallet--skel-out { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .co2-wallet--skel-out { transition: opacity .18s ease-out; }
}
@media (prefers-reduced-motion: no-preference) {
  .co2-wallet-mount > * { animation: co2-wallet-in .18s ease-out; }
  @keyframes co2-wallet-in { from { opacity: 0; } to { opacity: 1; } }
}
.co2-wallet-mount > * { width: 100% !important; }          /* Airwallex button fills its slot */
/* Card-form skeleton (#214) — Payment-section twin of the wallet skeletons above. The skeleton OVERLAYS the
   Drop-in mount node inside .co2-cardwrap, so the iframe renders underneath and `ready` swaps them in place
   with zero layout shift. .is-loading holds the wrapper at the stacked card form's approximate height
   (number / expiry|CVC / name ≈ 3 rows) so the Payment section never collapses mid-chain. */
.co2-cardwrap { position: relative; }
.co2-cardwrap.is-loading { min-height: 190px; }
.co2-card-skel { position: absolute; inset: 0; background: #fff; z-index: 1; }
.co2-card-skel__bar { height: 46px; border-radius: 8px; background: #eef0f1; margin-bottom: 12px; }
.co2-card-skel__row { display: flex; gap: 12px; }
.co2-card-skel__row .co2-card-skel__bar { flex: 1; }
@media (prefers-reduced-motion: no-preference) {
  .co2-card-skel__bar { animation: co2-skel-pulse 1.2s ease-in-out infinite; }
  @keyframes co2-skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
}
.co2-wallet { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: 8px; border: 0; background: #000; color: #fff; cursor: pointer; font-weight: 600; font-size: 15px; transition: opacity .15s; }
.co2-wallet:hover { opacity: .85; }
.co2-wallet svg { height: 19px; width: auto; }
/* PayPal at the top of the express row — full-width, brand yellow, same 44px pill as the wallets */
.co2-wallet--paypal { width: 100%; background: #ffc439; color: #0b051d; }
.co2-wallet--paypal:disabled { opacity: .7; cursor: default; }
/* Shopify "OR" divider */
.co2-or { display: flex; align-items: center; gap: 14px; color: #5a5e61; font-size: 12px; letter-spacing: .04em; margin: 16px 0 0; }
.co2-or::before, .co2-or::after { content: ""; flex: 1; height: 1px; background: #e3e4e6; }
.co2-or span { text-transform: uppercase; }

/* Social-proof / testimonial card in the checkout summary panel (Matt: keep, matches Shopify) */
.co2-social { background: #fff; border-radius: 16px; padding: 20px 20px 16px; margin-top: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.co2-social__h { font-family: var(--heading-font-family); font-weight: 300; font-size: 19px; line-height: 1.25; color: var(--qure-charcoal); text-align: center; margin: 0 0 16px; letter-spacing: -.01em; }
.co2-social__ba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co2-social__ba figure { position: relative; margin: 0; border-radius: 10px; overflow: hidden; }
.co2-social__ba img { display: block; width: 100%; height: auto; }
.co2-social__ba figcaption { position: absolute; top: 8px; left: 8px; background: rgba(255,255,255,.92); color: var(--qure-charcoal); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.co2-social__stat { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 14px; color: var(--qure-charcoal); border-top: 1px solid #eef0f1; margin-top: 16px; padding-top: 14px; }
.co2-social__pct { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--color-green); font-weight: 700; font-size: 13px; flex: 0 0 46px; }
.co2-social__prod { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: var(--charcoal-light); border-top: 1px solid #eef0f1; margin-top: 14px; padding-top: 12px; }
.co2-social__prod img { height: 26px; width: auto; }

/* Shipping method — single free-shipping row (selected, Shopify-styled) */
/* Shipping method, 1:1 with the Shopify checkout: a "First shipment" label above the card, then the
   method name in BOLD with the delivery window under it in regular weight, and the price bold on the
   right. Ours was a single regular-weight line with no window at all. */
.co2-ship-label { font-weight: 600; font-size: 15px; color: var(--qure-charcoal); margin: 0 0 10px; }
.co2-ship { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--qure-charcoal); border-radius: 10px; padding: 14px 16px; font-size: 15px; color: var(--qure-charcoal); background: var(--bg-light); }
.co2-ship__name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.co2-ship__radio { position: relative; display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--qure-charcoal); box-sizing: border-box; flex: 0 0 18px; }
.co2-ship__radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--qure-charcoal); }
.co2-ship__text { display: flex; flex-direction: column; min-width: 0; }
.co2-ship__text b { font-weight: 600; line-height: 1.35; }
.co2-ship__text span { font-weight: 400; line-height: 1.35; color: var(--qure-charcoal); }
.co2-ship__price { font-weight: 600; flex: 0 0 auto; }

/* "Use shipping address as billing address" checkbox */
.co2-billing { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--qure-charcoal); margin-top: 12px; cursor: pointer; }
.co2-billing input { width: 17px; height: 17px; accent-color: var(--color-orange); }

/* Billing address — revealed when "same as shipping" is cleared (Shopify 1:1, 2026-08-11). */
.co2-billaddr { margin-top: 14px; padding-top: 4px; }
.co2-billaddr__h { font-family: var(--base-font-family); font-weight: 600; font-size: 16px;
  letter-spacing: -.01em; color: var(--qure-charcoal); margin: 0 0 12px; }

/* Google Places address-autocomplete dropdown — sit above the form + match our look */
.pac-container { z-index: 100000; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.12); border: 1px solid var(--input-border-color); font-family: var(--base-font-family); margin-top: 2px; }
.pac-item { padding: 6px 12px; font-size: 14px; }

/* payment method tabs (Card / Klarna) */
.co2-methods { display: flex; gap: 8px; margin-bottom: 12px; }
.co2-method { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px; border: 1px solid #dfe0e0; border-radius: 9px; background: #fff; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--qure-charcoal); transition: border-color .15s, box-shadow .15s; }
.co2-method.sel { border-color: var(--qure-charcoal); box-shadow: inset 0 0 0 1px var(--qure-charcoal); }
.co2-klarna-mark { background: #ffb3c7; color: #0b051d; font-weight: 800; padding: 1px 7px; border-radius: 5px; font-size: 13px; letter-spacing: -.02em; }
.co2-klarna { border: 1px solid #f3c6d2; border-radius: 9px; padding: 15px; background: #fff1f5; }
.co2-klarna__head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #0b051d; margin-bottom: 6px; }
.co2-klarna p { font-size: 13px; color: #4a4d50; margin: 0; line-height: 1.45; }
.co2-klarna b { color: var(--qure-charcoal); }

/* right: order summary */
/* Shopify-style mint order-summary panel */
.co2-summary { position: sticky; top: 84px; background: transparent; padding: 0; }  /* sits on the mint .co2-right panel */
.co2-summary h3 { font-family: var(--base-font-family); font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--qure-charcoal); margin: 0 0 16px; }
/* align-items:flex-start, not center. With a single-line price centring was invisible; once the line
   carried a struck compare-at as well, the price block centred itself against the whole row and floated
   away from the product name it belongs to. The reference sits it level with the first line of the
   title. */
.co2-line { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid #c2d8cf; margin-bottom: 16px; }
/* The middle column absorbs the wrapping so the price does not have to. Without min-width:0 a long
   product name refuses to shrink and squeezes the price into two lines instead. */
.co2-line > div { flex: 1 1 auto; min-width: 0; }
.co2-line__thumb { width: 60px; height: 60px; border-radius: 10px; background: #fff; border: 1px solid #c2d8cf; flex: 0 0 60px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.co2-line__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.co2-line__name { font-weight: 600; font-size: 14px; color: var(--qure-charcoal); }
.co2-line__meta { font-size: 12.5px; color: var(--charcoal-light); margin-top: 2px; }
/* Stacked, right-aligned: compare-at above the charged price, the way the supply card presents it on
   the offer page. nowrap applies PER LINE (so neither amount breaks mid-number) while the column
   direction keeps them on separate rows — an earlier pass put them side by side, which was never the
   ask; only the vertical position was wrong. */
.co2-line__price { margin-left: auto; flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; line-height: 1.35; white-space: nowrap; font-weight: 600; color: var(--qure-charcoal); }
/* Always visible, input + Apply side by side (Shopify parity). Taller and lighter-bordered than the
   old collapsed version so it matches the delivery fields on the left rather than looking like a chip. */
.co2-disc { display: flex; gap: 10px; margin: 16px 0; }
.co2-disc input { flex: 1; min-width: 0; padding: 14px 14px; border: 1px solid #c2d8cf; border-radius: 8px; font-size: 14px; background: #fff; color: var(--qure-charcoal); }
.co2-disc input::placeholder { color: var(--charcoal-light); }
.co2-disc input:focus { outline: none; border-color: #8fb0a4; box-shadow: 0 0 0 2px rgba(143,176,164,.25); }
.co2-disc button { flex: 0 0 auto; padding: 14px 22px; border: 1px solid #b7cec5; border-radius: 8px; background: #cdded7; color: #5e6b65; font-weight: 600; font-size: 14px; cursor: pointer; }
.co2-disc button:hover { background: #c2d6ce; }
.co2-trow { display: flex; justify-content: space-between; font-size: 14px; color: #4a4d50; padding: 5px 0; }
.co2-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 20px; font-weight: 700; color: var(--qure-charcoal); padding-top: 12px; margin-top: 8px; border-top: 1px solid #c2d8cf; }
.co2-total .cur { font-size: 12px; color: #4a4d50; font-weight: 500; margin-right: 6px; }   /* 6.9:1 on the mint (was 2.5:1 — audit C22) */
.co2-recur { font-size: 12.5px; color: var(--charcoal-light); margin-top: 8px; }
/* Subscription: the store's bold line under a divider (Marko 2026-10-20), the only recurring wording (Matt 2026-10-21). */
.co2-recur--sub { font-size: 14px; font-weight: 700; color: var(--qure-charcoal); margin-top: 10px; padding-top: 10px; border-top: 1px solid #c2d8cf; }

/* Shopify-1:1 order summary (2026-08-11): quantity badge on each thumb, free-gift line, savings row. */
.co2-line__thumb { position: relative; overflow: visible; }
.co2-line__thumb img { border-radius: 10px; }
/* The gift line uses its own thumbnail asset (…-thumb.webp — the 128px product shot Marko supplied,
   square and already centred), NOT the offer-page band's image.
   One asset cannot serve both. The band needs the raw Figma export: a 1024² canvas it squashes with
   object-fit:fill. That same canvas holds the bottle OFF-CENTRE — 148px of transparency on the left,
   205px on the right — so fitted with `contain` here it drifted left, and an inset added to "fix" it
   padded an image that was already ~35% padding, rendering it 36px against the 58px product thumb
   beside it. The dedicated asset needs no inset and centres on its own. */
/* Top-LEFT, as on Shopify — it sat top-right, which is the one position the reference never uses. */
.co2-qty {
  position: absolute; top: -8px; left: -8px; min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: 999px; background: #4a4d50; color: #fff; font-size: 12px; font-weight: 600;
  line-height: 21px; text-align: center; box-shadow: 0 0 0 2px #dce9e3;
}
/* Free gift: the struck $79 has to stay legible next to the FREE, so it keeps full contrast and only
   the strike carries the meaning — a greyed-out "was" price reads as unavailable rather than waived. */
.co2-line__meta--gift { color: #2f7d5e; font-weight: 600; }
.co2-line__price s { color: var(--charcoal-light); font-weight: 500; }
.co2-line__price b { color: #2f7d5e; }
/* Savings reads as a summary ROW on Shopify — same rhythm as Subtotal/Shipping — not a coloured
   callout band. The band made it the loudest thing in the panel, above the Total. */
.co2-savings {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  color: var(--qure-charcoal); font-size: 13px; font-weight: 600; letter-spacing: .04em;
}
.co2-savings svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--charcoal-light); }
.co2-savings b { margin-left: auto; font-weight: 600; letter-spacing: normal; }
/* Rebill row, below the Total and visually quieter than it. */
.co2-recur-row { margin-top: 10px; font-size: 13.5px; }
.co2-recur-row span:last-child { font-weight: 600; }
.co2-trow--pending { color: var(--charcoal-light); }
/* The ⓘ Shopify puts on rows whose figure is explained rather than self-evident. */
.co2-info {
  display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
  margin-left: 5px; border-radius: 50%; border: 1px solid #b6c4bd; color: var(--charcoal-light);
  font-size: 10px; line-height: 1; cursor: help; vertical-align: -2px;
}

/* slim policy footer (checkout + thank-you) — Shopify-style */
.co2-footer { border-top: 1px solid #ececec; margin-top: 20px; padding: 22px 24px; }
.co2-footer__in { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.co2-footer__in a { font-size: 13px; color: var(--charcoal-light); text-decoration: underline; }
.co2-footer__in a:hover { color: var(--qure-charcoal); }

/* ===================== THANK-YOU ===================== */
.ty-wrap { max-width: 660px; margin: 0 auto; padding: 60px 24px 72px; text-align: center; }
.ty-badge { width: 64px; height: 64px; border-radius: 50%; background: #e8f4ef; color: var(--color-green); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.ty-badge svg { width: 32px; height: 32px; }
.ty-h1 { font-family: var(--heading-font-family); font-weight: 300; font-size: clamp(30px,4vw,42px); color: var(--qure-charcoal); margin: 0 0 8px; }
.ty-sub { color: var(--charcoal-light); font-size: 16px; margin: 0 0 28px; }
.ty-card { background: var(--bg-light); border-radius: 16px; padding: 26px; text-align: left; margin-bottom: 18px; }
.ty-card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--charcoal-light); margin: 0 0 14px; }
.ty-li { display: flex; justify-content: space-between; font-size: 14px; color: #4a4d50; padding: 7px 0; }
.ty-li .sub { font-size: 11px; color: var(--color-green); border: 1px solid #bfe3d4; border-radius: 5px; padding: 1px 6px; margin-left: 6px; }
.ty-li.tot { font-weight: 700; color: var(--qure-charcoal); font-size: 16px; border-top: 1px solid #e7e8e9; margin-top: 8px; padding-top: 12px; }
.ty-next { font-size: 14px; color: var(--charcoal-light); line-height: 1.5; }

/* FB VIP group banner — 1:1 with Figma "Post Purchase FB VIP" (thank-you, 2026-07-06) */
.ty-fb { position: relative; display: block; overflow: hidden; border-radius: 18px;
  background: #e5eef7; margin-bottom: 18px; min-height: 176px; }
.ty-fb, .ty-fb *, .ty-fb:hover, .ty-fb:hover * { text-decoration: none !important; }  /* never underline on hover */
/* border drawn as an overlay ON TOP of the photo → uniform on all four edges (photo can't cover it) */
.ty-fb::after { content: ""; position: absolute; inset: 0; border: 1px solid #9dc0e6; border-radius: 18px; pointer-events: none; z-index: 3; }
.ty-fb__body { position: relative; z-index: 2; max-width: 58%; padding: 28px 30px; }
.ty-fb__head { font-family: var(--base-font-family); font-weight: 400; font-size: 19px; line-height: 1.5;
  color: #1d2733; letter-spacing: -.005em; margin: 0 0 22px; }
.ty-fb__head b { font-weight: 700; }
.ty-fb__head mark { background: #fff; color: #1d2733; padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
.ty-fb__btn { display: inline-block; background: #2a2a2d; color: #fff; font-weight: 700; font-size: 16px;
  line-height: 1; padding: 15px 40px; border-radius: 999px; }
.ty-fb__img { position: absolute; right: 0; top: 0; bottom: 0; height: 100%; width: 44%; z-index: 1;
  object-fit: cover; object-position: center 22%; pointer-events: none; }
@media (max-width: 600px) {
  .ty-fb { min-height: 154px; }
  .ty-fb__body { max-width: 62%; padding: 20px 20px; }
  .ty-fb__head { font-size: 16px; margin: 0 0 16px; }
  .ty-fb__btn { font-size: 14px; padding: 12px 28px; }
  .ty-fb__img { width: 42%; object-position: center 18%; }
}
.ty-help { font-size: 14px; color: var(--charcoal-light); margin: 4px 0 0; }
.ty-help a { color: var(--qure-charcoal); font-weight: 600; text-decoration: underline; }

/* thank-you 2-column order-confirmation (Shopify-style) */
.ty-confirm { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.ty-check { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--qure-charcoal);
  display: inline-flex; align-items: center; justify-content: center; color: var(--qure-charcoal); }
.ty-check svg { width: 22px; height: 22px; }
.ty-conf-num { font-size: 13px; color: var(--charcoal-light); }
.ty-conf-num b { color: var(--charcoal-light); font-weight: 600; }
.ty-conf-h1 { font-family: var(--base-font-family); font-weight: 700; font-size: 24px; letter-spacing: -.01em; color: var(--qure-charcoal); margin: 2px 0 0; }
.ty-box { border: 1px solid #e7e8e9; border-radius: 14px; padding: 18px 20px; margin-bottom: 20px; }
.ty-box b { display: block; font-weight: 700; font-size: 16px; color: var(--qure-charcoal); margin-bottom: 6px; }
.ty-box p { font-size: 13.5px; color: var(--charcoal-light); line-height: 1.5; margin: 0; }
.ty-details { border: 1px solid #e7e8e9; border-radius: 14px; padding: 20px; margin-bottom: 20px; }
.ty-details > h3 { font-family: var(--base-font-family); font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--qure-charcoal); margin: 0 0 16px; }
.ty-details__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.ty-details__grid h4 { font-family: var(--base-font-family); font-size: 13px; font-weight: 700; color: var(--qure-charcoal); margin: 0 0 4px; }
.ty-details__grid p { font-size: 13.5px; color: #5a5e61; line-height: 1.45; margin: 0; }
/* order-summary line items (right mint panel) */
.ty-li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #4a4d50; padding: 8px 0; border-bottom: 1px solid #c2d8cf; }
.ty-li .sub { display: inline-block; font-size: 11px; font-weight: 600; color: var(--color-green); background: #e8f4ef; border-radius: 5px; padding: 1px 7px; margin-left: 7px; }
.ty-li.tot { font-size: 18px; font-weight: 700; color: var(--qure-charcoal); border-bottom: 0; padding-top: 14px; }
@media (max-width: 560px) { .ty-details__grid { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .co2-shell { display: flex; flex-direction: column-reverse; max-width: 100%; }  /* summary on top, form below */
  .co2-left  { padding: 30px 20px 34px; width: 100%; max-width: 100%; overflow-x: clip; }
  .co2-right { padding: 26px 20px 40px; width: 100%; max-width: 100%; overflow-x: clip; }
  .co2-summary { position: static; }
  #airwallex-card, #airwallex-card iframe { max-width: 100% !important; width: 100% !important; }
}

/* =============================================================
   UPSELL ENHANCEMENTS — added for upsell-enhance.js
   (A) video-first reveal / lock / countdown + real <video> element
   (B) marketing email-capture popup
   Consistent with the Qure system above (charcoal #212428,
   orange #ff5429, Canela headings, TT Commons body).
   ============================================================= */

/* ---- real <video> in the VSL stage (replaces the gradient poster) ---- */
/* contain (not cover) so the full subject always shows; the stage already matches
   the video's 9:16 ratio, so there are no bars — contain is the no-crop safety net. */
.up-video__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #14171a; z-index: 0;
}
/* keep the badge + play button above the video */
.up-video__badge, .up-video__play, .up-video__ph { z-index: 2; }
/* once playing, fade the big centre play button out of the way */
.up-video.is-playing .up-video__play { opacity: 0; pointer-events: none; transition: opacity .25s; }

/* ---- (item #2) UNMUTE / "tap for sound" affordance ----
   The VSL autoplays muted (browser policy). We surface a clear "tap for sound"
   control + make the whole stage clickable to unmute. Standard VSL pattern. */
.up-video { cursor: pointer; }                 /* the whole stage unmutes on click */
.up-video__sound {
  position: absolute; z-index: 3; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: rgba(20,23,26,.82); color: #fff; border: 0; cursor: pointer;
  font-family: var(--base-font-family); font-weight: 600; font-size: 13.5px; letter-spacing: .01em;
  padding: 9px 16px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.3);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: up-sound-pulse 1.8s ease-in-out infinite;
}
.up-video__sound svg { width: 17px; height: 17px; flex: 0 0 17px; }
.up-video__sound:hover { background: rgba(20,23,26,.95); }
/* hidden until the video is actually playing-but-muted, and once unmuted */
.up-video__sound { display: none; }
.up-video.is-playing.is-muted .up-video__sound { display: inline-flex; }

/* small persistent mute/unmute toggle in the bottom-right corner (Marko 2026-07-08) */
.up-video__mute {
  position: absolute; z-index: 3; right: 12px; bottom: 12px;
  width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(20,23,26,.55); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: background .15s;
}
.up-video__mute:hover { background: rgba(20,23,26,.9); }
.up-video__mute svg { width: 18px; height: 18px; }
.up-video__mute-off { display: none; }                        /* default (sound on) shows the speaker-waves icon */
.up-video.is-muted .up-video__mute-on { display: none; }
.up-video.is-muted .up-video__mute-off { display: block; }    /* muted → speaker-with-x icon */
@keyframes up-sound-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.05); }
}

/* ---- (A) lock / reveal ---- */
/* JS adds .is-locked to .up-lockable sections until the VSL is watched.
   No-JS visitors never get .is-locked, so the offer stays visible for them. */
.up-lockable.is-locked { display: none !important; }

/* small countdown chip under the video while locked */
.up-countdown {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 14px auto 48px; padding: 9px 16px; border-radius: 999px;
  background: #fff5f1; border: 1px solid #ffd9cc; color: #8a3a22;
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
}
.up-countdown::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-orange); box-shadow: 0 0 0 0 rgba(255,84,41,.5);
  animation: up-pulse 1.4s infinite;
}
.up-countdown.is-hidden { display: none; }
.up-countdown-wrap { text-align: center; }
@keyframes up-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,84,41,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(255,84,41,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,84,41,0); }
}

/* gentle entrance when the offer + supply reveal */
/* 240ms ease-out, not 450ms ease (audit U8) — the same 14px rise, felt rather than watched. */
body.up-revealed .up-offer,
body.up-revealed .up-supply { animation: up-reveal 240ms cubic-bezier(.23, 1, .32, 1) both; }
@keyframes up-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---- (B) marketing email popup ---- */
body.up-pop-open { overflow: hidden; }
.up-pop {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(20,23,26,.62); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .22s ease;
}
.up-pop.is-open { opacity: 1; }
.up-pop__card {
  position: relative; width: 100%; max-width: 520px;
  background: #fff; border-radius: 20px; padding: 40px 38px 34px;
  text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.35);
  transform: translateY(18px) scale(.98); transition: transform .24s ease;
}
.up-pop.is-open .up-pop__card { transform: none; }
.up-pop__close {
  position: absolute; top: 14px; right: 16px; background: none; border: 0;
  color: #b6b7b9; font-size: 26px; line-height: 1; cursor: pointer; padding: 4px;
}
.up-pop__close:hover { color: var(--qure-charcoal); }
.up-pop__eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; font-weight: 600;
  color: var(--color-orange); margin: 0 0 12px;
}
.up-pop__title {
  font-family: var(--heading-font-family); font-weight: 300;
  font-size: clamp(24px, 3.4vw, 32px); line-height: 1.12; color: var(--qure-charcoal); margin: 0 0 12px;
}
.up-pop__sub { font-size: 15px; color: var(--charcoal-light); line-height: 1.45; margin: 0 auto 22px; max-width: 400px; }
.up-pop__form { display: flex; flex-direction: column; gap: 10px; max-width: 380px; margin: 0 auto; }
.up-pop__input {
  width: 100%; padding: 14px 16px; border: 1px solid #dfe0e0; border-radius: 11px;
  font-family: var(--base-font-family); font-size: 16px; color: var(--qure-charcoal); background: #fff;
  transition: border-color .15s;
}
.up-pop__input:focus { outline: none; border-color: var(--qure-charcoal); }
.up-pop__input.is-invalid { border-color: var(--color-orange); box-shadow: 0 0 0 1px var(--color-orange); }
.up-pop__cta {
  width: 100%; background: var(--qure-charcoal); color: #fff; border: 0; border-radius: 999px;
  font-weight: 600; font-size: 15px; letter-spacing: .02em; padding: 15px; cursor: pointer; transition: background .2s;
}
.up-pop__cta:hover { background: #34383c; }
.up-pop__fine { font-size: 12px; color: var(--charcoal-light); margin: 12px 0 0; }
.up-pop__continue { max-width: 380px; margin: 20px auto 0; }
.up-pop__check {
  width: 60px; height: 60px; border-radius: 50%; background: #e8f4ef; color: var(--color-green);
  display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.up-pop__check svg { width: 30px; height: 30px; }

@media (max-width: 560px) {
  .up-pop__card { padding: 34px 22px 28px; }
}

/* ================================================================================================
   MOBILE FIXES (2026-07-10)
   ================================================================================================ */

/* ---- iOS zoom guard -----------------------------------------------------------------------
   iOS Safari force-zooms the page whenever a FOCUSED input has font-size < 16px, and it never
   zooms back out — that is the "page gets stuck zoomed and pans in every direction" report
   (hit on the card fields and on the discount code). 16px is the exact threshold. Bump every
   focusable field at touch widths; desktop keeps its smaller type. */
@media (max-width: 768px) {
  .co2-input,
  .co2-select,
  /* The delivery/contact fields were missing from this list, which is why iOS still zoomed the moment
     you tapped into the Delivery section — the exact fields a shopper actually fills. */
  .co2-fl input,
  .co2-fl select,
  .co2-cardrow input,
  .co2-cardgrid input,
  .co2-disc input { font-size: 16px; }
}

/* ---- Upsell video: scroll cue --------------------------------------------------------------
   The video fills the viewport, so when the offer reveals below it there is nothing to tell the
   shopper to scroll. Show a pill over the video's bottom edge once the offer appears; it hides
   itself as soon as the offer scrolls into view. Was phone-only: on a 1440×900 desktop the revealed
   heading lands at y=863 with no cue, and on a shorter laptop entirely off-screen (audit U7). */
#vsl { position: relative; }
.up-scrollcue { display: none; }
.up-scrollcue svg { width: 16px; height: 16px; fill: currentColor; }

body.up-revealed .up-scrollcue {
  display: inline-flex; align-items: center; gap: 6px;
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 5; padding: 10px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(0,0,0,.78); color: #fff;
  font-family: var(--base-font-family); font-size: 14px; font-weight: 600; line-height: 1;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  animation: up-cue-in .28s ease-out both, up-cue-bob 1.8s ease-in-out 1s infinite;
}
body.up-revealed .up-scrollcue.is-gone { display: none; }

@keyframes up-cue-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes up-cue-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 4px); } }

@media (prefers-reduced-motion: reduce) {
  body.up-revealed .up-scrollcue { animation: none; }
}

/* ===================== COLOUR SWATCH PICKER (water filters) =====================
   Every Faucet/Shower SKU is colour-specific, so the filter upsell must capture a colour
   before it can resolve a variant. The picker sits directly above the CTA; picking a colour
   rewrites the productKey suffix (…|WH → …|BK) and swaps the product shot. The Family Bundle
   carries TWO pickers because faucet colour and shower colour are independent options. */
/* The water-filter product shots ship with a white background baked into the file (the faucet
   PNGs are ~62% opaque white, the shower JPGs fully opaque). On the default grey .up-pcard__img
   panel that renders as a visible pale rectangle around the product. Plain white matches the card
   (.up-pcard is #fff) so the baked-in background disappears entirely — a gradient still leaves a
   faint edge where the image's white meets it.
   Scoped on purpose: the other downsells use cut-out images that look correct on grey. */
.up-pcard__img--wash { background: #fff; }

.up-colours { margin: 14px 0 4px; }
.up-swatches { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; flex-wrap: wrap; }
/* .up-swatches sets display:flex, which beats the [hidden] UA rule — needs the override */
.up-swatches[hidden] { display: none; }
.up-swatches__label { font-size: 12px; color: var(--charcoal-light); margin-right: 2px; }
.up-swatches__label b { color: #4a4d50; font-weight: 600; }
.up-swatch {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid #d9dadc; box-shadow: inset 0 0 0 2px #fff; transition: border-color .15s, transform .15s;
}
.up-swatch:hover { transform: scale(1.08); }
.up-swatch.is-on { border-color: var(--qure-charcoal); }
.up-swatch:focus-visible { outline: 2px solid var(--qure-charcoal); outline-offset: 2px; }
.up-swatch--white  { background: #f2f2f0; }
.up-swatch--black  { background: #24262a; }
.up-swatch--silver { background: linear-gradient(135deg, #d8dade, #a8acb2 55%, #e6e8ea); }
/* the swatch row is a form control — never let it inherit the disabled-CTA look */
.up-swatch:disabled { cursor: default; opacity: .45; }

/* ---- mobile order-summary toggle (2026-08-12) ----
   Shopify's mobile checkout collapses the summary into a bar carrying the order total, so the shopper
   lands on express checkout instead of scrolling past the cart to reach it. Desktop keeps the panel
   open beside the form, so the bar only exists below the stacking breakpoint. */
.co2-sumbar { display: none; }

@media (max-width: 900px) {
  .co2-sumbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; box-sizing: border-box; margin: 0; padding: 16px 20px;
    background: transparent; border: 0; border-bottom: 1px solid #b9d3ca;
    font-family: inherit; font-size: 16px; color: var(--qure-charcoal); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .co2-sumbar__label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
  .co2-sumbar__label svg { width: 18px; height: 18px; transition: transform .18s ease; }
  /* Chevron points down when collapsed (tap to open), up when the panel is showing. */
  .co2-right.is-open .co2-sumbar__label svg { transform: rotate(180deg); }
  .co2-sumbar__total { font-weight: 700; font-size: 17px; }
  .co2-sumbar:focus-visible { outline: 2px solid var(--qure-charcoal); outline-offset: -3px; }

  /* The panel's own padding belongs to the body, not the bar — collapsed, the bar has to sit flush
     against the header above it and the form below it. Scoped to --collapsible: this rule was written
     bare as `.co2-right`, which also stripped the padding from thank-you.html's summary (same class,
     no toggle, no .co2-sumbody to hand the padding to) and left its text flush against the phone edge.
     Doubling the class keeps this above the generic .co2-right padding regardless of source order. */
  .co2-right.co2-right--collapsible { padding: 0; }
  .co2-sumbody { padding: 24px 20px 32px; }
}

/* ================================================================================================
   CHECKOUT — 2026-09-09 audit (issue #228, PR 1). Craft and friction fixes on the existing design; every
   conversion device stays. IDs refer to docs/audits/2026-09-09-upsell-design-audit/README.md.
   ================================================================================================ */

/* C1 · no first-frame jump on phones. The form painted with the summary OPEN on top, then setSummaryOpen(false)
   collapsed it after paint and the whole form leapt ~590px (layout-shift score 0.67; good is < 0.1). Collapse it
   in CSS, before any script runs; JS still toggles .is-open + hidden (a11y) exactly as before. */
@media (max-width: 900px) {
  .co2-right--collapsible:not(.is-open) .co2-sumbody { display: none; }
  /* C16 · the bar above already says "Order summary" — hide the panel heading text, keep the Edit link. */
  .co2-right--collapsible .co2-summary__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* C22 · Edit on the mint panel was 2.5:1 (inline var(--charcoal-light)); same size and underline, readable now. */
.co2-summary__edit { margin-left: auto; text-transform: none; letter-spacing: normal; font-size: 13px; font-weight: 500; color: #4a4d50; text-decoration: underline; }
.co2-summary__edit:hover { color: var(--qure-charcoal); }

/* C15 · "Santa Monica" clipped to "Santa Mon" in the equal three-column row at 390px. */
@media (max-width: 400px) {
  .co2-row3 { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* C16 · the shipping-method block grows from a one-line prompt (~52px) to label + card (~93px) as the last
   address field completes, pushing the card iframe down mid-typing. Hold the filled height from the start. */
.co2-block--sub { min-height: 128px; }

/* C16 · tap-to-toggle caption for the "?" help (title tooltips never show on touch). */
.co2-field__tip { font-size: 12.5px; line-height: 1.45; color: #5a5e61; margin: 6px 2px 2px; }
.co2-field__help { cursor: pointer; }

/* C17 · general.css sets *{outline:0}; keyboard users had no focus ring on Pay now, the wallets, the checkbox,
   Edit or the footer links (text fields keep their own border + inset ring). Keyboard only — :focus-visible. */
.co2-checkout :is(button, a, input[type="checkbox"], select):focus-visible { outline: 2px solid var(--qure-charcoal); outline-offset: 2px; }

/* O6/C8 · the reservation strip after 0:00 — same strip, different copy (see the reserveClock script). */
.co2-reserve.is-expired { color: var(--qure-charcoal); }

/* ================================================================================================
   UPSELLS / DOWNSELLS / THANK-YOU / SHARED — 2026-09-09 audit (issue #228, PR 1). Craft and friction fixes on
   the existing design; the gate, the hidden skip, the WAIT badge, the banner, the countdown, the chips, the
   tags and the pulses all stay. IDs refer to docs/audits/2026-09-09-upsell-design-audit/README.md.
   ================================================================================================ */

/* S1 · general.css sets *{outline:0}: keyboard users had no focus ring on any upsell control (0 of 10 in the
   Tab sweep). Keyboard only — :focus-visible — mouse and touch users see nothing. */
.up-page :is(a, button, [tabindex="0"], input[type="checkbox"], select):focus-visible { outline: 2px solid var(--qure-charcoal); outline-offset: 2px; }
.up-page :is(.co2-fl input, .co2-fl select, .co2-input, .co2-disc input):focus-visible { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* U5 · 44px hit areas without changing what is drawn. The skip link keeps its 12.5px underlined grey text;
   padding grows the target, the margins give the space back. Mute toggle 34 → 44 (icon unchanged). Swatches
   keep their 26px dot and gain an invisible 44px halo. */
.up-skipbar { min-height: 44px; padding: 12px 16px; margin-top: 6px; margin-bottom: -6px; color: #6b6e71; }
.up-video__mute { width: 44px; height: 44px; right: 8px; bottom: 8px; }
.up-swatch { position: relative; }
.up-swatch::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }

/* U6 · the small grey text was #8b8c8e (3.4:1) and the struck prices #b6b7b9 (2.0:1) at 12–14px. One shade
   darker, same grey; the orange chips and tags are untouched (device). Downsell stars: blue was 2.0:1 and
   off-palette — charcoal, like the shop's rating rows. */
.up-opt__main small { color: #6b6e71; }
.up-dcard__guarantee { color: #6b6e71; }
.up-pcard__meta { color: #6b6e71; }
.up-pcard__rating { color: #6b6e71; }
.up-opt__price s { color: #6b6e71; }
.up-pcard__was { color: #6b6e71; }
.up-card__was { color: #6b6e71; }
.up-stars { color: #212428; }

/* U8 · digits that do not jitter: the countdown repaints every second, prices swap on selection. */
.up-countdown { font-variant-numeric: tabular-nums; }
.up-opt__price { font-variant-numeric: tabular-nums; }
.up-pcard__now { font-variant-numeric: tabular-nums; }
.up-pcard__was { font-variant-numeric: tabular-nums; color: #6b6e71; }

/* U10 · the CTA wins as well: 56px tall, 17px semibold, a pressed state. Every chip and tag stays. The h2 was
   50px on desktop against a 48px h1 — one step down, still the section heading. */
.up-buybox__cta { padding: 17px; font-size: 17px; 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); }
.up-buybox__cta:active:not(:disabled) { transform: scale(.985); }
.up-pcard__cta { 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); }
.up-pcard__cta:active:not(:disabled) { transform: scale(.985); }
.up-opt { transition: border-color 150ms cubic-bezier(.23, 1, .32, 1), box-shadow 150ms cubic-bezier(.23, 1, .32, 1), background-color 150ms cubic-bezier(.23, 1, .32, 1), transform 120ms cubic-bezier(.23, 1, .32, 1); }
.up-opt:active { transform: scale(.99); }
.up-supply .up-h2 { font-size: clamp(28px, 3.6vw, 40px); }

/* T6 · thank-you on phones: the greeting leads, the summary follows. Checkout keeps summary-on-top (its bar). */
@media (max-width: 900px) {
  .up-page:not(.co2-checkout) .co2-shell { flex-direction: column; }
}

/* U8 · motion respects the OS setting. The pulses, the bob and the reveal stay for everyone else. */
@media (prefers-reduced-motion: reduce) {
  .up-video__sound, .up-countdown::before, .up-scrollcue { animation: none; }
  body.up-revealed .up-offer, body.up-revealed .up-supply { animation: none; }
  .up-buybox__cta:active:not(:disabled), .up-pcard__cta:active:not(:disabled), .up-opt:active { transform: none; }
}

/* C6 · field-level validation marks (checkout.html#markInvalid): the field the sentence names, in the same red. */
.co2-fl.is-invalid :is(input, select) { border-color: #c0392b; box-shadow: inset 0 0 0 1px #c0392b; }
.co2-fl.is-invalid label { color: #c0392b; }

/* ================================================================================================
   CHECKOUT UPGRADES (feat/checkout-upgrades-local) — the receiving half of the processing stage hand-off,
   and the "Your order" pill. Proposal: https://claude.ai/artifact/StsHsjYMmDvpJn4pbSurfv
   ================================================================================================ */
/* 1 · cross-document View Transition: checkout's Charcoal stage (view-transition-name: qstage, set at hand-off by
   checkout-stage.js) folds into this top bar. Between two upsells the bar is the same box on both sides, so it
   simply stays put while the page content cross-fades. Browsers without the API load the page as before. */
@view-transition { navigation: auto; }
.up-topbar { view-transition-name: qstage; }
::view-transition-group(qstage) { animation-duration: .56s; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
::view-transition-old(qstage) { animation: none; opacity: 1; height: 100%; object-fit: cover; object-position: top; }
::view-transition-new(qstage) { animation: qsVtIn .56s cubic-bezier(.65, 0, .25, 1) both; height: 100%; object-fit: cover; object-position: top; }
::view-transition-old(root) { animation-duration: .3s; }
::view-transition-new(root) { animation-duration: .45s; animation-delay: .12s; }
@keyframes qsVtIn { 0%, 55% { opacity: 0 } 100% { opacity: 1 } }

/* 8 · "Your order": what has been bought so far, and its total — the place a one-tap add visibly lands */
.up-topbar__in { position: relative; }
.qs-order { position: absolute; right: 16px; top: 11px; display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px; border-radius: 999px; background: rgba(255,255,255,.09); color: rgba(255,255,255,.75);
  font: 500 13px/1 var(--base-font-family); font-variant-numeric: tabular-nums; }
.qs-order b { color: #fff; font-weight: 600; font-size: 14px; }
.qs-order__th { display: inline-flex; }
.qs-order__th i { width: 24px; height: 24px; border-radius: 50%; background: #fff center/contain no-repeat; box-shadow: 0 0 0 2px var(--qure-charcoal); }
.qs-order__th i + i { margin-left: -8px; }
.qs-order__lbl { display: none; }
@media (min-width: 640px) { .qs-order { right: 24px; top: 14px; } .qs-order__lbl { display: inline; } }
.qs-ghost { position: fixed; z-index: 400; border-radius: 50%; background: #fff center/contain no-repeat; pointer-events: none;
  box-shadow: 0 8px 30px rgba(0,0,0,.25); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(qstage), ::view-transition-new(qstage), ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .01s; animation-delay: 0s; }
}
/* the tapped add-on button stays Charcoal and carries a moving Teal sheen while the charge runs (was a grey
   disabled pill for up to ~6 s); the other buttons on the page stay plainly disabled */
.up-page .qs-busy:disabled { opacity: 1 !important; background-color: var(--qure-charcoal) !important; color: #fff !important;
  background-image: linear-gradient(100deg, rgba(199,229,219,0) 30%, rgba(199,229,219,.38) 50%, rgba(199,229,219,0) 70%) !important;
  background-size: 220% 100% !important; animation: qsBusy 1.3s linear infinite; }
@keyframes qsBusy { from { background-position: 120% 0 } to { background-position: -120% 0 } }
@media (prefers-reduced-motion: reduce) { .up-page .qs-busy:disabled { animation: none; } }

/* Subscription version terms line (sub-offer-arm.js termsAfter), approved 10 Nov: 14px muted, centred, no colour block. */
.sub-terms { margin: 14px 0 0; color: #6d6d6d; font-size: 14px; line-height: 1.4; text-align: center; text-wrap: balance; }
.sub-terms svg { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; color: #212428; }