/* Prevent horizontal scroll — body overflow-x doesn't clip position:fixed */
html, body { overflow-x: clip; max-width: 100%; }

/* Standalone checkout layout — kill any global site chrome that might leak in */
html:has(body.catalyst-checkout-standalone),
body.catalyst-checkout-standalone {
  background: var(--bg, #f5f3f0) !important;
}
body.catalyst-checkout-standalone {
  margin: 0 !important;
  padding: 0 !important;
  /* 2026-04-15 — Respect the iOS safe-area-inset so the sticky nav doesn't
     render behind the status bar / dynamic island on notched iPhones. The
     site-wide body padding from shared.css (`padding-top: var(--nav-h)`) is
     killed by the `padding: 0 !important` above, so we re-add just the
     top safe-area inset for the standalone checkout. */
  padding-top: env(safe-area-inset-top, 0) !important;
  /* 2026-04-16 Mobile QA — prevent rubber-band overscroll on iOS/Android.
     Keeps the checkout feeling like a native app, not a webpage. */
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.catalyst-checkout-standalone > header,
body.catalyst-checkout-standalone > footer,
body.catalyst-checkout-standalone > .site-header,
body.catalyst-checkout-standalone > .site-footer,
body.catalyst-checkout-standalone #page > .site-header,
body.catalyst-checkout-standalone #page > .site-footer,
body.catalyst-checkout-standalone #wpadminbar {
  display: none !important;
}
body.catalyst-checkout-standalone main.checkout-page,
body.catalyst-checkout-standalone #main {
  min-height: 100vh;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--bg, #f5f3f0);
  /* 2026-04-15 — KILL the catalyst-fadeIn animation from shared.css on the
     standalone checkout. That animation sets `transform: translateY(0)` (via
     `both` fill mode) which creates a containing block for any fixed-positioned
     descendant of <main> — breaking the sign-in bottom sheet (#cc-signin-sheet)
     which is `position: fixed; inset: 0`. With the transform present, `inset: 0`
     resolves to <main>'s box (height 825px+) instead of the viewport (664px),
     and the panel slides to a position below the visible viewport. */
  animation: none !important;
  transform: none !important;
}
/* Fallback for older browsers without :has() */
body.catalyst-checkout-standalone html { background: var(--bg, #f5f3f0) !important; }

:root {
  --font: 'Satoshi', 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono: 'Satoshi', 'Helvetica Neue', Helvetica, sans-serif;

  /* ═══════════════════════════════════════════════════════════════════
   * PALETTE — Cart-matched warm (2026-04-15 final)
   * Matches shared.css exactly so /cart/ → /checkout/ feels like one
   * surface. Pure neutral white read "clinical" — Victor: kill it.
   * The body::after noise overlay (shared.css, opacity 0.022) gives
   * the cream a subtle organic texture that flat hex can't.
   * ═══════════════════════════════════════════════════════════════════ */
  --carbon: #0E0D0B;                   /* Warm near-black (trace umber undertone) */
  --white: #ffffff;
  --bg: #f5f3f0;                       /* MATCH shared.css --bg */
  --surface-warm: #edebe7;             /* MATCH shared.css --surface-warm (cards) */
  --surface-light: #f0eee8;            /* Interpolated tier between bg and surface-warm */
  --cream-sidebar: #f0ece7;            /* v3 sidebar background — warm cream */

  --text-primary: #0E0D0B;             /* Warm near-black for body */
  --text-secondary: #5C5955;           /* Warm grey — complements warm bg */
  --text-muted: #8F8C87;               /* Muted warm grey */

  --catalyst-teal: #2A9D8F;             /* v3 reskin — deeper pharmaceutical teal */
  --catalyst-teal-dark: #1f7a6f;
  --catalyst-orange: #C45530;          /* Deep terracotta — darker, editorial */
  --catalyst-orange-light: rgba(196,85,48,0.06);

  /* Payment brand colors — kept vivid but used SPARINGLY (icons only, no bg) */
  --pay-cashapp: #00D632;
  --pay-venmo: #008CFF;
  --pay-zelle: #6D1ED4;
  --pay-ach: #1a1a2e;

  /* Warm hairline borders — matches shared.css */
  --border: rgba(14, 13, 11, 0.08);
  --border-solid: #ddd8d3;
  --handle-color: #2A9D8F;

  /* ═══════════════════════════════════════════════════════════════════
   * SPACING SCALE — 8pt base (with 4pt micro)
   * ═══════════════════════════════════════════════════════════════════ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* ═══════════════════════════════════════════════════════════════════
   * BORDER-RADIUS SCALE
   * ═══════════════════════════════════════════════════════════════════ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ═══════════════════════════════════════════════════════════════════
   * MOTION SYSTEM
   * ═══════════════════════════════════════════════════════════════════ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-slow: 320ms;

  /* ═══════════════════════════════════════════════════════════════════
   * SHADOWS — warm-tinted, minimal (Ro barely uses shadows)
   * ═══════════════════════════════════════════════════════════════════ */
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 10, 10, 0.06);
  --shadow-lg: 0 12px 32px rgba(10, 10, 10, 0.10);

  /* Input sizing — iOS Safari requires >= 16px to prevent auto-zoom on focus.
     NEVER set any input font-size below this value. Change it here, once. */
  --input-font-size: 16px;
  --input-font-size-label: 16px;
  --input-font-size-label-up: 10px;
}

/* === NAV — premium checkout shell (2026-04-14) ===
   Layout: 3-col grid [secure badge · elevated centered logo · sign-in tab]
   Logic: Fitts's Law — tap targets ≥44pt where they matter;
          Gestalt proximity — left/center/right triad reads as frame;
          Nielsen #1 visibility — "Secure Checkout" speaks, not just a lock.
*/
.nav {
  position: sticky; top: 0; z-index: 100;
  background: #f5f3f0; /* SOLID — content must never bleed through */
  border-bottom: 1px solid var(--border);
  transition: border-color var(--motion-base) var(--ease-out);
  /* iOS Safari bleed-through fix (Victor 2026-04-17):
     backdrop-filter on a SOLID-bg sticky element makes iOS's compositor
     treat the element as partially transparent during fast scroll, showing
     the content underneath through what should be an opaque cream bar.
     Since the bg is already solid, backdrop-filter served no visual purpose
     — it was a leftover from an earlier translucent-glass design. Remove
     the filter and promote the nav to its own compositing layer so the
     cream paint lands cleanly on every scroll frame. */
  will-change: transform;
  isolation: isolate;
  transform: translateZ(0);
}
.nav__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  gap: 16px;
}
.nav__right { display: flex; align-items: center; gap: 16px; }
.nav__lock { width: 14px; height: 14px; flex-shrink: 0; }

/* Left-aligned logo (2026-04-15 — Victor: move logo to left, was centered) */
.nav__brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  padding: 4px 8px; /* Fitts: small but still tappable for back-to-home */
  border-radius: 8px;
  transition: opacity 0.18s ease;
}
.nav__brand:hover { opacity: 0.85; }
.nav__icon {
  width: 32px; height: 32px; display: block;
  /* Monochrome the icon on checkout only — Ro/Warby/Glossier pattern.
     Orange brand color is reserved for the main site; checkout stays neutral. */
  filter: brightness(0) saturate(100%);
}
.nav__logo-text {
  font-size: 26px;
  font-weight: 700;
  color: var(--carbon);          /* Black on checkout (not brand orange) */
  letter-spacing: -0.035em;
  line-height: 1;
}

/* Secure Checkout badge — labelled, not icon-only.
   Nielsen #1 (visibility of status) + #6 (recognition over recall). */
.nav__secure {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-secondary);
}
.nav__secure svg { color: var(--carbon); opacity: 0.85; }
.nav__secure-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  white-space: nowrap;
}
/* Keep "Secure Checkout" label visible at 375px (iPhone SE/Mini/standard).
   Nielsen #1 (visibility of system status): an unlabelled lock icon fails recognition.
   Only hide on truly tiny viewports (< 340px is basically nothing in 2026). */
@media (max-width: 359px) {
  .nav__secure-label { display: none; }
}
/* On 375-480px, abbreviate to "Secure" to save space */
@media (min-width: 360px) and (max-width: 479px) {
  .nav__secure-label::before { content: "Secure"; }
  .nav__secure-label { font-size: 0; } /* hide the long "Secure Checkout" text */
  .nav__secure-label::before { font-size: 10px; } /* show the abbreviated text */
}

/* Sign-in TAB — dark outline, 44pt tap target, bold type.
   Fitts's Law: large enough + at edge so cursor doesn't overshoot. */
.nav__signin {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1.5px solid var(--carbon);
  color: var(--carbon);
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 20px;
  min-height: 44px; /* Apple HIG + Fitts */
  border-radius: 100px;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.nav__signin:hover {
  background: var(--carbon);
  color: var(--white);
  transform: translateY(-1px);
}
.nav__signin:active { transform: translateY(0); }
.nav__signin:focus-visible { outline: 2px solid var(--carbon); outline-offset: 3px; }
.nav__signin svg { stroke: currentColor; }

@media (max-width: 480px) {
  .nav__inner { padding: 14px 16px; gap: 10px; }
  .nav__logo-text { font-size: 22px; }
  .nav__icon { width: 28px; height: 28px; }
  .nav__signin { padding: 10px 16px; font-size: 13px; }
}
@media (max-width: 360px) {
  .nav__signin-label { display: none; }
  .nav__signin { padding: 11px 12px; }
  .nav__logo-text { font-size: 20px; }
  .nav__icon { width: 26px; height: 26px; }
}

/* === PROGRESS === v3: hidden — accordion sections replace visual progress */
.progress { display: none !important; }
.progress__inner { display: flex; align-items: center; justify-content: center; max-width: 380px; margin: 0 auto; }
@media (max-width: 599px) { .progress { padding: 14px 16px 10px; } }
.progress__step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.progress__dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 500; border: 2px solid var(--border-solid); background: var(--white); color: var(--text-muted); transition: all 0.4s ease; }
.progress__dot--active { background: var(--carbon); color: var(--white); border-color: var(--carbon); box-shadow: 0 0 0 4px rgba(42,42,42,0.08); }
.progress__dot--complete { background: var(--catalyst-teal); color: var(--white); border-color: var(--catalyst-teal); }
.progress__dot--confirmed { background: var(--catalyst-orange); color: var(--white); border-color: var(--catalyst-orange); box-shadow: 0 0 0 4px rgba(231,111,81,0.12); }
.progress__label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } /* 2026-04-16 Mobile QA — bumped from 9px for mobile readability */
.progress__label--active { color: var(--carbon); font-weight: 600; }
.progress__segment { flex: 1; height: 2px; margin: 0 8px; margin-bottom: 20px; background: var(--border-solid); transition: background 0.4s ease; }
.progress__segment--complete { background: var(--catalyst-teal); }

/* === LAYOUT === */
.main { display: grid; grid-template-columns: 1fr; max-width: 1080px; margin: 0 auto; padding: 0 16px 40px; gap: 32px; }
@media (min-width: 600px) { .main { padding: 0 20px 40px; } }
@media (min-width: 900px) { .main { grid-template-columns: 1fr 380px; padding: 0 40px 60px; gap: 40px; } }

/* === STEPS === */
.cc-step { display: none; }
.cc-step--active { display: block; animation: fadeIn 0.35s ease; }
/* === STEP LABELS & TITLES — v3: hidden, replaced by clean section flow === */
.cc-step__label { display: none; }
.cc-step__title { display: none; }
.cc-step__title strong { font-weight: 700; }

/* === ITEMS (Step 1) — cart rows as subtle cards === */
.cc-item {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4);
  margin-bottom: var(--space-2);
  background: var(--white);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-lg);
  transition: border-color var(--motion-base) var(--ease-out),
              transform var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
.cc-item:hover {
  border-color: rgba(14,13,11,0.22);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.cc-item:last-child { border-bottom: 1px solid var(--border-solid); margin-bottom: 0; }
.cc-item--no-qty { flex-wrap: nowrap; }
.cc-item__img {
  width: 72px; height: 72px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--surface-warm);
  flex-shrink: 0;
}
.cc-item__details { flex: 1; min-width: 0; }
.cc-item__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.cc-item__spec {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 6px;
  font-weight: 500;
}
.cc-item__qty { display: flex; align-items: center; background: var(--white); border: 1px solid var(--border-solid); border-radius: 24px; overflow: hidden; flex-shrink: 0; }
.cc-qty__btn { width: 44px; height: 44px; border: none; background: none; font-size: 18px; cursor: pointer; color: var(--carbon); display: flex; align-items: center; justify-content: center; }
.cc-qty__btn:hover { background: var(--surface-warm); }
.cc-qty__count { font-family: var(--font-mono); font-size: 14px; font-weight: 600; min-width: 22px; text-align: center; }
.cc-item__price { font-family: var(--font-mono); font-size: 14px; font-weight: 500; flex-shrink: 0; min-width: 44px; text-align: right; }
.cc-item__note { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.02em; }
.cc-item__remove {
  background: none; border: none; cursor: pointer;
  padding: 10px;  /* 2026-04-16 Mobile QA — expand from 4px to hit 44px touch target (24 + 20 = 44) */
  color: var(--text-muted);
  opacity: 0.5;
  transition: opacity 0.15s;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  flex-shrink: 0;
  /* Touch target is 44px (24px icon + 10px padding each side) — Apple HIG compliant */
}
.cc-item__remove:hover { opacity: 1; }
@media (max-width: 599px) {
  /* Default cart row (with qty stepper) — grid layout
     2026-04-15: added horizontal padding (was flush to edge), bumped image to 56px,
     killed the align-self:stretch + min-height that made the BAC image vertical-stretch,
     vertical breathing room via padding 18 + margin-bottom 10. */
  .cc-item { display: grid; grid-template-columns: 56px 1fr auto; grid-template-rows: auto auto; gap: 4px 14px; align-items: center; padding: 18px 16px; margin-bottom: 10px; }
  .cc-item__img { grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 10px; align-self: center; object-fit: cover; }
  .cc-item__details { grid-column: 2; grid-row: 1; align-self: center; min-width: 0; }
  .cc-item__details > * { min-width: 0; }
  .cc-item__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cc-item__price { grid-column: 3; grid-row: 1; align-self: center; }
  .cc-item__qty { grid-column: 2; grid-row: 2; width: fit-content; margin-top: 6px; }
  .cc-item__remove { grid-column: 3; grid-row: 2; justify-self: end; align-self: start; margin-top: 4px; }

  /* No-qty cart row (BAC, Item after add) — switch to flex so img/details/price/remove don't collide */
  .cc-item--no-qty {
    display: flex;
    align-items: center;
    gap: 12px;
    grid-template-columns: none;
    grid-template-rows: none;
  }
  .cc-item--no-qty .cc-item__img { width: 56px; height: 56px; flex-shrink: 0; align-self: center; }
  .cc-item--no-qty .cc-item__details { flex: 1; min-width: 0; grid-column: auto; grid-row: auto; }
  .cc-item--no-qty .cc-item__price { flex-shrink: 0; grid-column: auto; grid-row: auto; min-width: auto; }
  .cc-item--no-qty .cc-item__remove { flex-shrink: 0; grid-column: auto; grid-row: auto; margin: 0; justify-self: auto; align-self: center; }
}

/* === LOGIN PROMPT (Step 1) === */
.cc-login-prompt { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--white); border: 1px solid var(--border-solid); border-radius: 12px; margin-bottom: 14px; }
.cc-login-prompt__text { flex: 1; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.cc-login-prompt__text strong { color: var(--carbon); font-weight: 600; font-size: 14px; display: block; margin-bottom: 1px; }
.cc-login-prompt__actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.cc-login-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--border-solid); border-radius: 100px; background: var(--white); font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--carbon); cursor: pointer; transition: all 0.2s; white-space: nowrap; justify-content: center; }
.cc-login-btn:hover { border-color: var(--carbon); }
@media (min-width: 600px) { .cc-login-prompt__actions { flex-direction: row; } }

/* === ACCESS CODE — minimal inline row, premium restraint === */
.cc-coupon { margin: var(--space-4) 0 0; }
.cc-coupon__row { display: flex; gap: var(--space-2); }
.cc-coupon__input {
  flex: 1;
  padding: 0 var(--space-4);
  min-height: 48px;
  font-size: var(--input-font-size);
  font-family: var(--font);
  font-weight: 500;
  background: var(--white);
  border: 1.5px solid var(--border-solid);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--motion-base) var(--ease-out);
}
.cc-coupon__input::placeholder { color: var(--text-muted); font-weight: 400; }
.cc-coupon__input:focus { border-color: var(--carbon); }
.cc-coupon__btn {
  padding: 0 var(--space-5);
  min-height: 48px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  background: var(--carbon);
  border: 1.5px solid var(--carbon);
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--white);
  transition: background var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
  letter-spacing: -0.005em;
}
.cc-coupon__btn:hover { background: #1c1a17; transform: translateY(-1px); }
.cc-coupon__btn:active { transform: translateY(0); }

/* === SUMMARY — editorial totals with luxury kerning on the hero number === */
.cc-summary {
  margin: var(--space-5) 0 var(--space-5);
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border-solid);
}
.cc-summary__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--space-2) 0;
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 400;
}
.cc-summary__row .cc-mono { color: var(--text-primary); font-weight: 500; }
.cc-summary__divider {
  height: 1px; background: var(--border-solid);
  margin: var(--space-3) 0 var(--space-2);
}
/* The Total row — the luxury typographic moment */
.cc-summary__row--total {
  padding: var(--space-3) 0 0;
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  align-items: center;
}
.cc-summary__row--total .cc-mono {
  font-family: var(--font);          /* NOT mono — we want display */
  font-size: 32px;                   /* Ro's exact value (28–32) */
  font-weight: 700;
  letter-spacing: -0.025em;          /* Luxury signature: negative kerning */
  color: var(--text-primary);
  line-height: 1;
  text-transform: none;
}
@media (max-width: 599px) {
  .cc-summary__row--total .cc-mono { font-size: 28px; }
}

/* === FLOATING LABEL FIELDS === */
/* === FORM FIELDS — editorial floating labels, warm borders === */
.cc-form__row { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
.cc-form__row--2col { grid-template-columns: 1fr 1fr; }
.cc-float { position: relative; }
.cc-float__input {
  width: 100%;
  padding: 22px var(--space-4) 8px;
  min-height: 62px;
  font-family: var(--font);
  font-size: var(--input-font-size);
  font-weight: 500;
  color: var(--text-primary);
  background: var(--white);
  border: 1.5px solid var(--border-solid);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--motion-base) var(--ease-out);
  letter-spacing: -0.005em;
}
.cc-float__input:focus { border-color: var(--carbon); }
.cc-float__label {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font);
  font-size: var(--input-font-size-label);
  font-weight: 400;
  color: var(--text-muted);
  pointer-events: none;
  transition: all var(--motion-base) var(--ease-out);
}
/* Focused-but-empty: float the label to the top so the cursor has room
   AND the user still sees what field they're in while typing the first char. */
.cc-float__input:focus:not(.has-value) ~ .cc-float__label {
  top: 12px;
  transform: translateY(0);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}
/* Has-value: hide the label completely. Victor 2026-04-15 — filled fields show
   value only, no clutter. The .cc-float__input retains its 22/8 padding so the
   value sits in its natural position; the label is invisible but in DOM (a11y). */
.cc-float__input.has-value ~ .cc-float__label {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-fast) var(--ease-out), visibility 0s linear var(--motion-fast);
}
.cc-back {
  background: none; border: none;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-2) 0;
  margin-bottom: var(--space-3);
  min-height: 44px;  /* 2026-04-16 Mobile QA — bumped from 40px to meet Apple HIG 44px minimum */
  display: inline-flex; align-items: center;
  transition: color var(--motion-base) var(--ease-out);
}
.cc-back:hover { color: var(--text-primary); }

/* Form validation */
.cc-float__input--error { border-color: #c04040 !important; }
.cc-float__input--valid { border-color: var(--catalyst-teal) !important; }
.cc-float__error { font-size: 11px; color: #c04040; margin-top: var(--space-1); padding-left: var(--space-1); display: none; }
.cc-float__error--visible { display: block; }

/* === PAYMENT SECTION === */
.cc-payment { margin-top: var(--space-7); }
.cc-payment__header { margin-bottom: var(--space-4); }
.cc-payment__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.cc-payment__intro {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
  max-width: 52ch;
}
/* 2026-04-15 — When a payment method is picked, hide the intro paragraph
   and tighten the header margin. The intro ("Choose how to send your payment...")
   is counterproductive once the user has made a choice. Saves ~66px vertical
   space on mobile, ~58px on desktop. JS adds/removes .is-picked in
   selectPayment()/resetPayment(). */
.cc-payment.is-picked .cc-payment__intro { display: none; }
.cc-payment.is-picked .cc-payment__header { margin-bottom: var(--space-2); }
.cc-payment.is-picked .cc-payment__label { margin-bottom: 0; }
.cc-order-error {
  background: rgba(196,85,48,0.06);
  border: 1px solid rgba(196,85,48,0.3);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 13px;
  color: var(--catalyst-orange);
  font-weight: 500;
}
/* === PAYMENT METHOD CARDS — unified premium monochrome (2026-04-14)
   Victor: "colored icon backgrounds are Web 2.0 toy." Fixed: icons are now
   monochrome strokes on neutral tile, brand identity comes from the method
   NAME + description, not gaudy color fills. === */
.cc-payment__methods {
  display: flex; flex-direction: column;
  gap: var(--space-2);
}
.cc-pay-card {
  display: flex; align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  min-height: 72px;
  background: var(--white);
  border: 1.5px solid var(--border-solid);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: max-height 0.3s var(--ease-out),
              opacity 0.2s ease,
              border-color var(--motion-base) var(--ease-out),
              background var(--motion-base) var(--ease-out),
              transform var(--motion-base) var(--ease-out),
              padding 0.3s var(--ease-out),
              margin 0.3s var(--ease-out),
              min-height 0.3s var(--ease-out),
              border-width 0.2s var(--ease-out);
  text-align: left;
  width: 100%;
  overflow: hidden;
  max-height: 100px;
  opacity: 1;
  font-family: var(--font);
}
.cc-pay-card:hover {
  border-color: var(--text-secondary);
  transform: translateY(-1px);
}
.cc-pay-card.is-selected {
  border-color: var(--carbon);
  border-width: 2px;
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(38,38,38,0.06);
  transform: translateY(0);
}
/* v3 reskin — smooth collapse animation for unselected payment tiles.
   The transition on .cc-pay-card handles the animation. min-height must
   override the 72px base to allow full collapse. */
.cc-pay-card.is-hidden {
  max-height: 0 !important;
  min-height: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
  border-color: transparent;
  border-width: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Icon tile — ALWAYS monochrome neutral. Brand identity is in the name, not the bg. */
/* ===== V3 PAYMENT TILES — complete visual override ===== */
/* Make .cc-pay-card look exactly like the v3 prototype's .pay-tile */
.cc-pay-card {
  display: flex !important; align-items: center !important; gap: 14px !important;
  padding: 14px 16px !important;
  background: #fff !important;
  border: 1.5px solid #ddd8d3 !important; border-radius: 14px !important;
  cursor: pointer !important;
  max-height: 90px !important; opacity: 1 !important;
  transition: max-height 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.2s ease,
              border-color 0.15s, transform 0.08s, box-shadow 0.2s,
              padding 0.3s cubic-bezier(0.16,1,0.3,1), margin 0.3s cubic-bezier(0.16,1,0.3,1),
              border-width 0.2s ease !important;
  overflow: hidden !important;
  min-height: 0 !important; /* kill old min-height rules */
}
.cc-pay-card:hover { border-color: #3a3a3a !important; }
.cc-pay-card:active { transform: scale(0.98) !important; }

/* Selected tile */
.cc-pay-card.is-selected,
.cc-pay-card.cc-pay-card--selected {
  border-color: #262626 !important; border-width: 2px !important;
  box-shadow: 0 0 0 3px rgba(38,38,38,0.06) !important;
}

/* Collapsed tiles (non-selected after a selection is made) */
.cc-pay-card.is-hidden,
.cc-pay-card.cc-pay-card--collapsed {
  max-height: 0 !important; opacity: 0 !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
  margin-top: 0 !important; margin-bottom: 0 !important;
  border-width: 0 !important; border-color: transparent !important;
  pointer-events: none !important;
  min-height: 0 !important;
}

/* Icons — branded color backgrounds */
.cc-pay-card__icon {
  width: 44px !important; height: 44px !important;
  border-radius: 11px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.cc-pay-card__icon svg { width: 24px !important; height: 24px !important; }
.cc-pay-card__icon--card { background: #262626 !important; color: #fff !important; }
.cc-pay-card__icon--cashapp { background: #00D632 !important; color: #fff !important; }
.cc-pay-card__icon--venmo { background: #008CFF !important; color: #fff !important; }
.cc-pay-card__icon--zelle { background: #6D1ED4 !important; color: #fff !important; }
.cc-pay-card__icon--ach { background: #ddd8d3 !important; color: #262626 !important; }

/* Selected state: keep brand colors */
.cc-pay-card.is-selected .cc-pay-card__icon { /* brand colors stay */ }

/* Name + desc */
.cc-pay-card__info { flex: 1 !important; min-width: 0 !important; }
.cc-pay-card__name { font-size: 15px !important; font-weight: 600 !important; }
.cc-pay-card__desc { font-size: 12px !important; color: #8a8580 !important; margin-top: 1px !important; }

/* Hide old radio indicator */
.cc-pay-card__radio { display: none !important; }

/* Payment methods container */
.cc-payment__methods { display: grid !important; gap: 10px !important; flex-direction: unset !important; }

.cc-pay-card__info { flex: 1; min-width: 0; }
.cc-pay-card__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.cc-pay-card__desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  font-weight: 400;
}
.cc-pay-card__radio {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border-solid);
  transition: all var(--motion-base) var(--ease-out);
  flex-shrink: 0;
}
.cc-pay-card.is-selected .cc-pay-card__radio {
  border-color: var(--carbon);
  background: var(--carbon);
  box-shadow: inset 0 0 0 4px var(--white);
}

/* Change method link */
/* "Change payment method" — ghost pill button, premium affordance */
.cc-change-method {
  display: none;
  background: transparent;
  border: 1.5px solid var(--border-solid);
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0 var(--space-5);
  min-height: 44px;
  width: auto;
  max-width: 100%;
  margin: var(--space-4) auto 0;
  text-align: center;
  transition: border-color var(--motion-base) var(--ease-out),
              color var(--motion-base) var(--ease-out);
  letter-spacing: -0.005em;
}
.cc-change-method:hover {
  border-color: var(--carbon);
  color: var(--text-primary);
}
.cc-change-method.is-visible { display: inline-flex; align-items: center; justify-content: center; }

/* === PAYMENT LAYOUT === */
/* 2026-04-15: margin-top reduced 16px → 0. The .cc-change-method button above
   already has margin: var(--space-4) auto 0 which provides breathing room. */
.cc-payment-layout { display: none; margin-top: 0; }
.cc-payment-layout--visible { display: block; animation: fadeIn 0.3s ease; }
.cc-payment-layout__trust { margin-bottom: 14px; }
.cc-payment-layout__exec { max-width: 460px; }
@media (max-width: 599px) {
  .cc-payment-layout__exec { max-width: none; }
}

/* === EXECUTION PANEL — immersive guided flow === */
/* === EXEC PANEL — unified premium redesign (2026-04-14)
   Philosophy: One pattern, four variants. Editorial, quiet, confident.
   Amount is the hero. CTA is always Catalyst-dark. Brand is a subtle icon. === */
.cc-exec {
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-lg);
}
/* Amount hero — the single display moment every exec panel has */
.cc-exec__amount {
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-solid);
}
.cc-exec__amount-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.cc-exec__amount-value {
  font-family: var(--font);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
@media (max-width: 599px) {
  .cc-exec__amount-value { font-size: 40px; }
}

.cc-exec__instruction {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 var(--space-5);
  max-width: 48ch;
}
.cc-exec__instruction strong { color: var(--text-primary); font-weight: 600; }

/* CTA — unified: ALL methods use dark Catalyst pill, brand icon on left.
   Kill the loud green/blue/purple method-specific backgrounds. */
.cc-exec__cta {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0 var(--space-5);
  min-height: 56px;
  border: 1.5px solid var(--carbon);
  background: var(--carbon);
  color: var(--white);
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--motion-base) var(--ease-out),
              transform var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
  letter-spacing: -0.005em;
}
.cc-exec__cta:hover {
  background: #1c1a17;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.cc-exec__cta:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.cc-exec__cta svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Override the old brand-color variants — force dark on all */
.cc-exec__cta--cashapp,
.cc-exec__cta--venmo,
.cc-exec__cta--zelle {
  background: var(--carbon) !important;
  border-color: var(--carbon) !important;
  color: var(--white) !important;
}
.cc-exec__cta--cashapp:hover,
.cc-exec__cta--venmo:hover,
.cc-exec__cta--zelle:hover {
  background: #1c1a17 !important;
}

.cc-exec__micro {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-3);
  line-height: 1.6;
}
.cc-exec__micro strong { color: var(--text-secondary); font-weight: 500; }
/* === GUIDED FLOW — immersive step-by-step === */
/* Guided steps (Cash App / Venmo) — typographic hierarchy, no circle-numbers.
   The numbers are hidden visually but kept for screen readers via aria markers. */
.cc-exec__guided {
  display: flex; flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.cc-exec__guided-step {
  display: flex; align-items: flex-start;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-solid);
}
.cc-exec__guided-step:first-child { border-top: none; padding-top: 0; }
.cc-exec__guided-num {
  flex-shrink: 0;
  width: auto;
  height: auto;
  min-width: 28px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  padding-top: 3px;
  display: block;
}
.cc-exec__guided-num::before { content: "0"; }  /* 01 / 02 / 03 editorial numbering */
.cc-exec__guided-text {
  flex: 1;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary);
  padding-top: 0;
}
.cc-exec__guided-text strong { font-weight: 600; color: var(--text-primary); }
@media (max-width: 599px) {
  .cc-exec__guided-text { font-size: 15px; }
  .cc-exec__guided-num { width: 30px; height: 30px; font-size: 13px; }
}
/* 2026-04-15 — QR row removed entirely (Issue 2). Kept this comment as a
   breadcrumb so future greppers know the class name is intentionally gone. */

/* Manual send fallback — also immersive */
.cc-manual-send { margin-top: 20px; }
.cc-manual-send__or { text-align: center; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 14px; position: relative; }
.cc-manual-send__or::before, .cc-manual-send__or::after { content: ''; position: absolute; top: 50%; width: calc(50% - 24px); height: 1px; background: var(--border-solid); }
.cc-manual-send__or::before { left: 0; }
.cc-manual-send__or::after { right: 0; }
.cc-manual-send__card { padding: 20px 22px; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; }
.cc-manual-send__label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 8px; }
.cc-manual-send__body { font-size: 15px; color: var(--text-secondary); line-height: 1.7; }
.cc-manual-send .cc-handle { color: var(--handle-color); font-family: var(--font-mono); font-weight: 600; font-size: 15px; }

@media (max-width: 599px) {
  .cc-exec { padding: 20px 16px; border-radius: 14px; }
  .cc-exec__cta { padding: 18px 24px; font-size: 17px; }
  .cc-exec__micro { font-size: 12px; margin-top: 10px; }
  .cc-manual-send { margin-top: 14px; }
  .cc-manual-send__card { padding: 16px; }
}

/* Zelle steps */
/* Zelle step cards — editorial rows with label + value, minimal circle-numbers */
.cc-exec__steps { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }
.cc-exec__step-card {
  display: flex; align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-light);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-md);
}
.cc-exec__step-num {
  width: auto; height: auto;
  min-width: 24px;
  background: transparent;
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  flex-shrink: 0;
  padding-top: 2px;
}
.cc-exec__step-num::before { content: "0"; }
.cc-exec__step-content { flex: 1; min-width: 0; }
.cc-exec__step-label {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}
.cc-exec__step-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-all;
  letter-spacing: -0.01em;
}

/* ACH detail rows */
/* ACH detail rows — editorial label/value stack with warm surface */
.cc-exec__detail-rows {
  display: flex; flex-direction: column;
  margin-top: var(--space-5);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cc-exec__detail-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-4) var(--space-5);
  background: var(--white);
  border-top: 1px solid var(--border-solid);
}
.cc-exec__detail-row:first-child { border-top: none; }
.cc-exec__detail-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
}
.cc-exec__detail-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  text-align: right;
}
.cc-exec__detail-value--bold { font-weight: 700; }

/* Tab return indicator */
.cc-exec__return-notice { display: none; padding: 12px 16px; background: var(--catalyst-orange-light); border: 1px solid rgba(231,111,81,0.15); border-radius: 10px; margin-top: 14px; text-align: center; font-size: 13px; color: var(--catalyst-orange); font-weight: 500; animation: fadeIn 0.3s ease; }

/* === BUTTONS === */
/* === PRIMARY CTAs — 56px pill, editorial weight === */
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-7);
  min-height: 56px;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--motion-base) var(--ease-out),
              transform var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
  text-decoration: none;
  line-height: 1;
  border: 1.5px solid transparent;
}
.cc-btn--primary {
  background: var(--carbon);
  color: var(--white);
  border-color: var(--carbon);
}
.cc-btn--primary:hover {
  background: #1c1a17;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.cc-btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.cc-btn--outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-solid);
}
.cc-btn--outline:hover { border-color: var(--carbon); }
.cc-btn--full { width: 100%; }
.cc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cc-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 599px) {
  .cc-btn { font-size: 15px; padding: 0 var(--space-5); }

  /* Sticky-bottom primary CTA on mobile — thumb-zone physics (Ro/Shop Pay pattern).
     The CTA docks at the bottom of the viewport while scrolling through long steps,
     and releases back to inline position when the user reaches the end.
     2026-04-16 Mobile QA — add safe-area-inset-bottom so the CTA clears the
     iPhone home-bar on Face ID models (bottom inset ~34px). */
  .cc-step--active > .cc-btn--primary.cc-btn--full {
    position: sticky;
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    margin-top: var(--space-5);
    margin-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    box-shadow: 0 8px 24px rgba(14,13,11,0.12),
                0 2px 6px rgba(14,13,11,0.08);
  }

  /* Give the step content extra bottom padding so the sticky CTA never covers content */
  .cc-step--active { padding-bottom: var(--space-6); }
}

/* Primary CTA — single "Pay with X · $Y" button below the tile grid for
   Stripe-hosted methods (card, Apple Pay). P2P tiles auto-advance on tap
   so the CTA stays hidden for them. Phase A #1, 2026-04-17. */
.cc-primary-cta-wrap { margin-top: 14px; }
.cc-primary-cta-wrap[hidden] { display: none; }
.cc-primary-cta {
  width: 100%;
  padding: 15px 20px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  background: var(--carbon);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s ease, transform .08s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cc-primary-cta:hover { background: #000; }
.cc-primary-cta:active { transform: scale(0.985); }
.cc-primary-cta:disabled {
  opacity: 0.7;
  cursor: progress;
  background: var(--carbon);
  transform: none;
}
.cc-primary-cta__label { display: inline-block; }

/* === STEP 3: CONFIRMATION === */
.confirmed__title {
  font-size: 42px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.02;
  animation: fadeUp 0.5s var(--ease-out) forwards;
}
.confirmed__title strong { font-weight: 700; }
.confirmed__title .cc-orange { color: var(--catalyst-orange); font-weight: 700; }
@media (max-width: 599px) {
  .confirmed__title { font-size: 32px; letter-spacing: -0.025em; }
}

/* 2026-04-15 Issue 7 — Option B subtitle element. Pairs with the title in
   the waiting state. In verified state, JS clears the text and this :empty
   rule collapses the element so it takes zero vertical space (the "what
   happens next" hero-row is the verified-state subtitle equivalent). */
.confirmed__subtitle {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
  max-width: 460px;
  margin: 8px auto 0;
  animation: fadeUp 0.5s var(--ease-out) 0.1s both;
}
.confirmed__subtitle:empty {
  display: none;
}
@media (max-width: 599px) {
  .confirmed__subtitle { font-size: 14px; }
}

/* 2026-04-15 Issue 7 — State-based visibility. When step3 is in "waiting"
   state, hide the celebration content (what-happens-next + Read the science).
   When it flips to "verified", both fade in. The order-card stays visible
   throughout (the chip inside it morphs between verifying and confirmed). */
#step3[data-confirm-state="waiting"] .confirm-hero-row,
#step3[data-confirm-state="waiting"] .confirm-actions {
  display: none !important;
}
/* 2026-04-15 (evening, Victor locked) — Premium waiting state.
   Hide the entire .confirmed wrapper (title + subtitle) during waiting
   so there's no text above the order card. The order card with its
   VERIFYING chip is the single status indicator. */
#step3[data-confirm-state="waiting"] .confirmed {
  display: none !important;
}
#step3[data-confirm-state="verified"] .confirm-hero-row,
#step3[data-confirm-state="verified"] .confirm-actions {
  animation: fadeUp 0.5s var(--ease-out) both;
}

/* 2026-04-15 Issue 7 — Chip celebrate pulse. Fires when the chip transitions
   from verifying → confirmed. Subtle (matches Catalyst's editorial restraint). */
@keyframes cc-chip-celebrate {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
#order-status-badge.order-status-chip--celebrate {
  animation: cc-chip-celebrate 0.6s var(--ease-out);
}

.hero { text-align: center; padding: 0; animation: floatIn 0.6s ease 0.15s both; }
.hero__box-img { width: 140px; height: auto; margin: 0 auto; display: block; filter: drop-shadow(0 16px 40px rgba(0,0,0,0.12)); }
@media (min-width: 600px) { .hero__box-img { width: 160px; } }

.next-steps {
  margin-top: 0;
  padding: var(--space-5) var(--space-5);
  background: var(--white);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-lg);
}
.next-steps__title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}
.next-steps__items { display: flex; flex-direction: column; position: relative; gap: var(--space-3); }
.next-steps__items::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 32px;
  bottom: 14px;
  width: 1px;
  background: var(--border-solid);
}
.next-steps__item { display: flex; align-items: flex-start; gap: var(--space-3); position: relative; }
.next-steps__dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--white);
  border: 1.5px solid var(--border-solid);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.next-steps__dot--done {
  border-color: var(--catalyst-teal);
  background: var(--catalyst-teal);
  color: var(--white);
}
.next-steps__content { padding-top: 4px; flex: 1; }
.next-steps__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.next-steps__desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.45;
}

.order-card { background: var(--white); border: 1px solid var(--border-solid); border-radius: 16px; overflow: hidden; margin-top: 14px; }
.order-card__label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); padding: 18px 20px 0; }
.order-card__products { padding: 12px 20px 0; }
.order-card__product { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.order-card__product + .order-card__product { border-top: 1px solid var(--border); }
.order-card__thumb { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--surface-warm); flex-shrink: 0; }
.order-card__product-info { flex: 1; }
.order-card__product-name { font-size: 14px; font-weight: 500; }
.order-card__product-detail { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.order-card__product-price { font-family: var(--font-mono); font-size: 13px; font-weight: 500; flex-shrink: 0; }
.order-card__details { display: grid; grid-template-columns: 1fr 1fr; padding: 0 20px; margin-top: 12px; border-top: 1px solid var(--border); }
.order-card__detail { padding: 10px 0; border-bottom: 1px solid var(--border); }
.order-card__detail:nth-child(odd) { padding-right: 14px; border-right: 1px solid var(--border); }
.order-card__detail:nth-child(even) { padding-left: 14px; }
.order-card__detail-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 3px; } /* 2026-04-16 Mobile QA — bumped from 9px for mobile readability */
.order-card__detail-value { font-size: 14px; font-weight: 500; }
.order-card__detail-value--mono { font-family: var(--font-mono); font-size: 13px; }
.order-card__total { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--border-solid); }
.order-card__total-label { font-size: 14px; font-weight: 500; }
.order-card__total-value { font-family: var(--font-mono); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }

.shipping { margin-top: 14px; }
.shipping__card { background: var(--white); border: 1px solid var(--border-solid); border-radius: 16px; overflow: hidden; }
.shipping__label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); padding: 16px 20px 0; }
.shipping__info { padding: 14px 20px 16px; }
.shipping__address { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

.confirm-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 24px; }
.confirm-actions .cc-btn { max-width: 320px; width: 100%; }
.btn--science { background: transparent; color: var(--catalyst-teal); border: 1.5px solid var(--catalyst-teal); font-size: 13px; }
.btn--science:hover { background: transparent; color: var(--catalyst-orange); border-color: var(--catalyst-orange); }

/* === SIDEBAR === */
.cc-sidebar { display: none; }
@media (min-width: 900px) {
  .cc-sidebar { display: block; }
  .cc-sidebar__inner { position: sticky; top: 80px; background: var(--cream-sidebar); border: none; border-radius: 16px; padding: 28px; }
  .cc-sidebar__label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 14px; }
  .cc-sidebar__item { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
  /* Sidebar total: proportional to compact sidebar, not the full 32px display size */
  .cc-sidebar .cc-summary__row--total .cc-mono { font-size: 22px; }
}

/* === ANIMATIONS === */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes floatIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes textPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.main--waiting .confirmed__title { animation: textPulse 2.5s ease-in-out infinite; }
.main--waiting .hero, .main--waiting .next-steps, .main--waiting .order-card, .main--waiting .shipping, .main--waiting .confirm-actions { opacity: 0.25; filter: blur(2px); pointer-events: none; }

/* Utility */
.cc-mono { font-family: var(--font-mono); }
.cc-teal { color: var(--catalyst-teal); }
.cc-hide-mobile { display: none; }
@media (min-width: 600px) { .cc-hide-mobile { display: inline; } }

/* === STEP 3 FULL WIDTH === */
.main--step3 { display: block; max-width: 480px; margin: 0 auto; padding: 0 20px 60px; }
@media (min-width: 900px) {
  .main--step3 { max-width: 600px; padding: 0 40px 60px; }
}

/* === CONFIRMATION: hero row === */
.confirmed { text-align: left; padding: 6px 0 0; }
.confirm-hero-row { display: flex; flex-direction: row; align-items: flex-start; gap: 14px; margin-top: 14px; }
.confirm-hero-row .next-steps { flex: 1; margin-top: 0; }
.confirm-hero-row .hero { flex: 0 0 120px; padding: 0; order: 2; display: flex; align-items: center; justify-content: center; }
.confirm-hero-row .hero__box-img { width: 110px; }
@media (min-width: 600px) {
  .confirm-hero-row .hero { flex: 0 0 160px; }
  .confirm-hero-row .hero__box-img { width: 140px; }
}

/* === PAYMENT NOT CONFIRMED STATE === */
.not-confirmed { text-align: left; padding: var(--space-3) 0 0; }
.not-confirmed__title {
  font-size: 34px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.not-confirmed__title strong { font-weight: 700; }
.not-confirmed__subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  margin-top: var(--space-3);
  line-height: 1.5;
}
@media (max-width: 599px) {
  .not-confirmed__title { font-size: 28px; letter-spacing: -0.022em; }
}
.not-confirmed__card { background: var(--white); border: 1px solid var(--border-solid); border-radius: 16px; padding: 24px; margin-top: 20px; }
.not-confirmed__status { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.not-confirmed__status-dot { width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; animation: statusPulse 2s ease-in-out infinite; }
@keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.not-confirmed__status-text { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #f59e0b; font-weight: 500; }
.not-confirmed__help-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.not-confirmed__help-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.not-confirmed__help-num { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-warm); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--text-secondary); flex-shrink: 0; }
.not-confirmed__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.not-confirmed__actions .cc-btn { width: 100%; max-width: 100%; }
.not-confirmed__contact { font-size: 12px; color: var(--text-muted); margin-top: 16px; }
.not-confirmed__contact a { color: var(--catalyst-teal); text-decoration: none; }

/* === LOGIN MODALS ===
   Modal + keypad + phone code styles moved to shared component:
   assets/css/components/catalyst-phone-modal.css
   Enqueued via wp_enqueue_style in v2-form-checkout.php
*/

/* === CITY / STATE / ZIP RESPONSIVE === */
.cc-form__row--city-state-zip { display: grid; gap: 10px; grid-template-columns: 1fr 120px 100px; }
@media (max-width: 599px) {
  .cc-form__row--city-state-zip { grid-template-columns: 1fr; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .cc-form__row--city-state-zip { grid-template-columns: 1fr 1fr; }
  .cc-form__row--city-state-zip .cc-float:nth-child(3) { grid-column: 1 / -1; }
}

/* === STATE SELECT LABEL === */
.cc-float__label--select { top: 10px; transform: none; font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }

/* === ACH CHECK DIAGRAM === */
/* Check diagram KILLED 2026-04-14 (Victor: "cute but not premium") — hide via display:none.
   The underlying markup in v2-checkout.js still emits it, but CSS removes it from the page.
   If users need routing/account help, the detail-rows above already show the info clearly. */
.cc-check-diagram,
.cc-check-diagram__title,
.cc-check-diagram__check,
.cc-check-diagram__header,
.cc-check-diagram__name,
.cc-check-diagram__num,
.cc-check-diagram__fields,
.cc-check-diagram__field-label,
.cc-check-diagram__field-label--routing,
.cc-check-diagram__field-label--account,
.cc-check-diagram__field-label--check,
.cc-check-diagram__field-value,
.cc-check-diagram__field--check,
.cc-check-diagram__hint {
  display: none !important;
}

/* === COUPON SUCCESS CHECK === */
/* .cc-coupon__check REMOVED 2026-04-14 — replaced by plain-text discount label */

/* === COUPON APPLIED LABEL (plain text in summary discount row, no pill) === */
/* Victor 2026-04-14: "Simple, clean. Just leave it as a green Alohomora, and that's it." */
#summary-discount-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--catalyst-teal-dark, var(--catalyst-teal, #2a9d8f));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* === CHECKING / VERIFYING STATE === */
/* ===== CHECKING / VERIFICATION STATE ===== */
.checking { text-align: center; padding: 60px 20px 40px; }
.checking__orb { position: relative; width: 88px; height: 88px; margin: 0 auto 28px; }
.checking__orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; }
.checking__orb-ring--1 { border-top-color: var(--catalyst-orange); animation: orb-spin 2s cubic-bezier(.4,0,.2,1) infinite; }
.checking__orb-ring--2 { inset: 8px; border-right-color: var(--catalyst-teal); animation: orb-spin 2.8s cubic-bezier(.4,0,.2,1) infinite reverse; opacity: .7; }
.checking__orb-ring--3 { inset: 16px; border-bottom-color: var(--catalyst-orange); animation: orb-spin 3.4s linear infinite; opacity: .4; }
.checking__orb-core { position: absolute; inset: 22px; display: flex; align-items: center; justify-content: center; background: var(--bg); border-radius: 50%; box-shadow: 0 0 24px rgba(var(--catalyst-orange-rgb, 232,119,34), .12); animation: orb-pulse 2s ease-in-out infinite; }
@keyframes orb-spin { to { transform: rotate(360deg); } }
@keyframes orb-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.94); opacity: .85; } }
.checking__title {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.checking__title strong { font-weight: 700; }
.checking__subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 360px;
}
@media (max-width: 599px) {
  .checking__title { font-size: 26px; letter-spacing: -0.022em; }
}
.checking__dots { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.checking__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--catalyst-orange); animation: dot-bounce 1.4s ease-in-out infinite; }
.checking__dot:nth-child(2) { animation-delay: .16s; }
.checking__dot:nth-child(3) { animation-delay: .32s; }
@keyframes dot-bounce { 0%,80%,100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1.1); } }

/* === BAC WATER UPSELL CARD === */
.cc-item--upsell { border: 1.5px dashed var(--catalyst-teal); border-radius: 12px; padding: 12px 14px !important; margin-top: 8px; background: rgba(42,157,143,0.03); }
.cc-item--upsell .cc-item__name { font-size: 13px; color: var(--text-secondary); }
.cc-upsell-add { background: none; border: 1.5px solid var(--catalyst-teal); border-radius: 100px; font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--catalyst-teal); padding: 6px 16px; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.cc-upsell-add:hover { background: var(--catalyst-teal); color: var(--white); }
.cc-upsell-remove { background: none; border: 1px solid var(--border-solid); border-radius: 100px; font-family: var(--font); font-size: 11px; color: var(--text-muted); padding: 4px 12px; cursor: pointer; }
.cc-upsell-remove:hover { border-color: #dc3545; color: #dc3545; }


/* === GOOGLE PLACES AUTOCOMPLETE FIX === */
.pac-container { font-family: var(--font) !important; border: 1px solid var(--border-solid) !important; border-radius: 10px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important; margin-top: 4px !important; z-index: 10000 !important; }
.pac-item { padding: 10px 14px !important; border-top: 1px solid var(--border-soft) !important; cursor: pointer !important; font-size: 13px !important; }
.pac-item:first-child { border-top: none !important; }
.pac-item:hover { background: var(--bg) !important; }
.pac-icon, .pac-icon-marker { display: none !important; }
.pac-item-query { font-weight: 500 !important; color: var(--carbon) !important; }
.pac-matched { font-weight: 600 !important; }

/* === CHROME AUTOFILL OVERRIDE === */
.cc-float__input:-webkit-autofill,
.cc-float__input:-webkit-autofill:hover,
.cc-float__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--white) inset !important;
  -webkit-text-fill-color: var(--carbon) !important;
  font-family: var(--font) !important;
  font-size: var(--input-font-size) !important;
  transition: background-color 5000s ease-in-out 0s;
}
/* Float label up when autofilled */
.cc-float__input:-webkit-autofill ~ .cc-float__label {
  top: 10px; transform: translateY(0); font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);
}

/* === HIDE MAIN SITE HEADER ON V2 CHECKOUT === */
.catalyst-nav,
.catalyst-nav__cart-btn,
.cart-panel,
.catalyst-nav + .cart-panel,
header.site-header {
  display: none !important;
}
/* Hide site footer on checkout too — clean, focused experience */
footer.site-footer,
.site-footer {
  display: none !important;
}

/* === HIDE CATALYST FOOTER + NEWSLETTER ON CHECKOUT === */
.catalyst-footer,
.catalyst-footer__top,
.catalyst-footer__bottom,
.catalyst-newsletter,
.real-science-section,
section.elementor-section:last-of-type,
.elementor-location-footer {
  display: none !important;
}

/* ===== COPY-TO-CLIPBOARD ===== */
.cc-copy-val { display: inline-flex; align-items: center; gap: 4px; }
.cc-copy-val--mono .cc-copy-val__text { font-family: var(--font-mono); font-weight: 500; }
.cc-copy-val--bold .cc-copy-val__text { font-weight: 600; }
.cc-copy-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text-muted); cursor: pointer; transition: all .15s ease; flex-shrink: 0; }
.cc-copy-btn:hover { background: var(--bg-hover, #f5f5f5); border-color: var(--catalyst-teal); color: var(--catalyst-teal); }
.cc-copy-btn:active { transform: scale(.92); }
.cc-copy--success { border-color: var(--catalyst-teal) !important; color: var(--catalyst-teal) !important; background: rgba(var(--catalyst-teal-rgb, 0,179,167), .08) !important; }

/* ===== MANUAL STEPS (P2P Instructions) ===== */
.cc-manual-steps { display: flex; flex-direction: column; gap: 14px; }
.cc-manual-steps__item { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; line-height: 1.6; color: var(--carbon); }
.cc-manual-steps__num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-warm); color: var(--carbon); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 2px; }

/* ===== VALIDATION BANNER ===== */
.cc-validation-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 16px; background: #FFF5F5; border: 1px solid #FED7D7; border-radius: 10px; font-size: 13.5px; color: #C53030; line-height: 1.4; animation: banner-in .3s ease; }
.cc-validation-banner svg { flex-shrink: 0; color: #E53E3E; }
@keyframes banner-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ===== SHAKE ANIMATION ===== */
@keyframes cc-shake { 0%,100% { transform: translateX(0); } 10%,50%,90% { transform: translateX(-4px); } 30%,70% { transform: translateX(4px); } }
.cc-shake { animation: cc-shake .5s ease; }

/* iOS Safari: prevent auto-zoom on input focus.
   Any input/select/textarea with font-size < 16px triggers viewport zoom on iOS.
   This safety net ensures ALL interactive fields meet the threshold. */
@media (max-width: 599px) {
  input, select, textarea,
  .cc-float__input,
  .cc-coupon__input,
  .modal__input,
  .phone-code-digit {
    font-size: var(--input-font-size) !important;
  }
}

/* === ORDER STATUS CHIP (2026-04-15) ===
   Pill-shaped chip in the order card header. Two states:
   - verifying: orange tint + pulsing dot (in-progress)
   - confirmed: teal tint + static checkmark (verified by webhook)
   States are set by JS via the setOrderStatusChip() helper in v2-checkout.js.
   Use #order-status-badge.order-status-chip selector for specificity win
   against any residual inline `color` styles. */
#order-status-badge.order-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;  /* 2026-04-16 Mobile QA — bumped from 9px for mobile readability */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background var(--motion-base) var(--ease-out),
              color var(--motion-base) var(--ease-out);
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: 0;
}
#order-status-badge.order-status-chip--verifying {
  background: rgba(196, 85, 48, 0.10);
  color: var(--catalyst-orange);
}
#order-status-badge.order-status-chip--verifying::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: catalyst-chip-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
#order-status-badge.order-status-chip--confirmed {
  background: rgba(42, 157, 143, 0.10);
  color: var(--catalyst-teal);
}
#order-status-badge.order-status-chip--confirmed::before {
  content: "\2713"; /* ✓ */
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  flex-shrink: 0;
}
@keyframes catalyst-chip-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1); }
}

/* === SIGN-IN BOTTOM SHEET / DROPDOWN (2026-04-14) === */
.cc-signin-sheet {
  position: fixed; inset: 0;
  background: rgba(17, 17, 17, 0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
}
.cc-signin-sheet.is-open { opacity: 1; pointer-events: auto; }
.cc-signin-sheet__panel {
  width: 100%;
  max-width: 520px;
  background: var(--white);
  border-radius: 20px 20px 0 0;
  padding: 12px 20px 32px;
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
}
.cc-signin-sheet.is-open .cc-signin-sheet__panel { transform: translateY(0); }
.cc-signin-sheet__handle {
  width: 40px; height: 4px;
  background: var(--border-solid);
  border-radius: 2px;
  margin: 0 auto 16px;
}
.cc-signin-sheet__title {
  font-size: 17px; font-weight: 600;
  color: var(--carbon);
  margin-bottom: 4px;
  text-align: center;
}
.cc-signin-sheet__sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  text-align: center;
}
.cc-signin-sheet__btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 14px 18px;
  margin-bottom: 10px;
  border: 1px solid var(--border-solid);
  border-radius: 100px;
  background: var(--white);
  font-family: var(--font);
  font-size: 14px; font-weight: 500;
  color: var(--carbon);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.cc-signin-sheet__btn:hover { border-color: var(--carbon); }
.cc-signin-sheet__btn:focus-visible { outline: 2px solid var(--catalyst-teal); outline-offset: 2px; }
.cc-signin-sheet__guest {
  display: block; width: 100%;
  text-align: center;
  padding: 12px;
  margin-top: 4px;
  background: none; border: none;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.cc-signin-sheet__guest:hover { color: var(--carbon); text-decoration: underline; }

/* Desktop: convert bottom sheet to top-right dropdown anchored to nav */
@media (min-width: 700px) {
  .cc-signin-sheet {
    align-items: flex-start;
    justify-content: flex-end;
    background: transparent;
    pointer-events: none;
  }
  .cc-signin-sheet.is-open { pointer-events: none; }
  .cc-signin-sheet__panel {
    pointer-events: auto;
    max-width: 340px;
    margin: 64px 16px 0 0;
    border-radius: 16px;
    padding: 20px;
    transform: translateY(-10px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
    border: 1px solid var(--border-solid);
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
  }
  .cc-signin-sheet.is-open .cc-signin-sheet__panel { transform: translateY(0); opacity: 1; }
  .cc-signin-sheet__handle { display: none; }
}

/* ========== CARD PAYMENT TILE + EXEC PANEL (Chunk 2) ========== */
.cc-pay-card__icon--card { color: var(--carbon, #262626); }
.cc-pay-card--card .cc-pay-card__desc { color: var(--text-muted, #888); }

.cc-exec__cta--card {
  display: block;
  width: 100%;
  padding: 16px 24px;
  margin: 16px 0 8px;
  background: var(--carbon, #262626);
  color: #fff;
  font-family: var(--font, 'Satoshi', sans-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, transform 0.1s;
}
.cc-exec__cta--card:hover { background: #3a3a3a; }
.cc-exec__cta--card:active { transform: scale(0.98); }
.cc-exec__cta--card:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Inline "I've sent the payment" button — Zelle/ACH panels (Phase A
   regression fix, 2026-04-17). Replaces the deleted global #confirm-btn
   with a per-method inline action so users have time to copy routing/
   email details before confirming. */
.cc-exec__cta--sent {
  display: block;
  width: 100%;
  padding: 16px 24px;
  margin: 20px 0 4px;
  background: var(--carbon, #262626);
  color: #fff;
  font-family: var(--font, 'Satoshi', sans-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, transform 0.1s;
}
.cc-exec__cta--sent:hover { background: #3a3a3a; }
.cc-exec__cta--sent:active { transform: scale(0.98); }
.cc-exec__cta--sent:disabled {
  opacity: 0.7;
  cursor: progress;
}

.cc-exec__card-secure {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted, #888);
  margin: 0;
  padding: 4px 0 8px;
}

/* ═══════════════════════════════════════════════════════════════════
 * v3 RESKIN ADDITIONS — 2026-04-16
 * Porting key visual improvements from checkout-v3 prototype.
 * ═══════════════════════════════════════════════════════════════════ */

/* Confirmation background shift — subtle cream darken on confirm */
body.catalyst-checkout-standalone.cc-confirmed {
  background: #ede9e3 !important;
  transition: background-color 0.6s ease;
}
body.catalyst-checkout-standalone.cc-confirmed main.checkout-page,
body.catalyst-checkout-standalone.cc-confirmed #main {
  background: #ede9e3;
}

/* Confirmation: timeline-first layout with receipt card styling */
#step3[data-confirm-state="verified"] .confirmed {
  text-align: left;
  padding: 40px 0 0;
}
@media (min-width: 600px) {
  #step3[data-confirm-state="verified"] .confirmed { text-align: left; }
}

/* Next-steps timeline: refined connector line */
.next-steps__items::before {
  background: var(--border-solid);
}
.next-steps__dot--done {
  border-color: var(--catalyst-teal);
  background: var(--catalyst-teal);
}

/* Order card refinement: receipt-like styling on confirm */
#step3[data-confirm-state="verified"] .order-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
}

/* Stagger animation for summary rows — v3 pattern */
.cc-summary__row {
  animation: v3-stagger-in 0.3s var(--ease-out) both;
}
.cc-summary__row:nth-child(1) { animation-delay: 0ms; }
.cc-summary__row:nth-child(2) { animation-delay: 60ms; }
.cc-summary__row:nth-child(3) { animation-delay: 120ms; }
.cc-summary__row:nth-child(4) { animation-delay: 180ms; }
.cc-summary__row--total { animation: v3-stagger-in 0.4s var(--ease-out) 260ms both; }
@keyframes v3-stagger-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sidebar: hide on confirmation mobile, show simplified on desktop */
.main--step3 .cc-sidebar { display: none; }

/* 2026-04-17 phaseA (revised per Victor): on confirmation page, KEEP the
   Step 1 + Step 2 minimized checkmark rows visible as passive breadcrumbs
   ("✓ Review your order", "✓ Your details") — but suppress the Edit button
   so the user can't try to edit a confirmed order. The .cc-step--completed
   rule elsewhere keeps the bodies collapsed; this rule kills only the Edit. */
.main--step3 #step1 .v3-header__edit,
.main--step3 #step2 .v3-header__edit {
  display: none !important;
}

/* v3 border radius refinements */
.cc-pay-card { border-radius: 14px; }
.order-card { border-radius: 16px; }
.cc-exec { border-radius: 14px; }

/* v3 form field radius */
.cc-float__input { border-radius: 10px; }
.cc-coupon__input { border-radius: 10px; }

/* v3 CTA button radius */
.cc-btn { border-radius: 12px; }
.cc-exec__cta { border-radius: 12px; }

/* Payment tile selected: show radio check with teal fill */
.cc-pay-card.is-selected .cc-pay-card__radio {
  border-color: var(--catalyst-teal);
  background: var(--catalyst-teal);
  box-shadow: inset 0 0 0 4px var(--white);
}

/* ===== V3 ACCORDION (2026-04-16) ===== */

/* Override old step visibility — accordion uses 3 state classes from JS */
.cc-step { display: block !important; border-bottom: 1px solid var(--border-light, #e8e4df); }
.cc-step:last-child { border-bottom: none; }

/* COMPLETED steps: show ONLY the v3-header, hide all content */
.cc-step--completed > *:not(.v3-header) { display: none !important; }
.cc-step--completed { cursor: pointer; }

/* ACTIVE step: show header + all content */
.cc-step--active > .v3-header { margin-bottom: 12px; }

/* FUTURE steps: hidden entirely */
.cc-step.cc-step--future { display: none !important; }

/* V3 Section Headers */
.v3-header {
  display: flex; align-items: center; padding: 20px 0; gap: 14px;
}
.v3-header__num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--carbon, #262626); color: #fff;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.v3-header__label {
  flex: 1; font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
}
.v3-header__edit {
  font-size: 13px; font-weight: 500; color: var(--catalyst-teal, #2A9D8F);
  background: none; border: none; cursor: pointer; padding: 4px 8px;
  display: none;
}
/* Show Edit only on completed steps */
.cc-step--completed .v3-header__edit { display: block; }
/* Hide Edit on active and future */
.cc-step--active .v3-header__edit { display: none; }

/* Step 3 header: hidden when active (confirmation takes over), shown when future/completed */
#step3.cc-step--active .v3-header { display: none; }

/* Hide old UI chrome */
.progress { display: none !important; }
.cc-step__label { display: none !important; }
.cc-step__title { display: none !important; }
.cc-back { display: none !important; }

/* Payment tile collapse animation */
.cc-pay-card { transition: max-height 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.2s ease, padding 0.3s ease, margin 0.3s ease, border-width 0.2s ease; }
.cc-pay-card--collapsed {
  max-height: 0 !important; opacity: 0 !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
  margin-top: 0 !important; margin-bottom: 0 !important;
  border-width: 0 !important; overflow: hidden;
  pointer-events: none;
}
.cc-pay-card--selected { border-color: var(--carbon, #262626); border-width: 2px; }

/* ═══════════════════════════════════════════════════════════════════
 * V3 "CONFIDENT RESTRAINT" — 2026-04-16
 * New element styles for the v3 checkout redesign. These classes
 * replace old naming (.cc-pay-card → .pay-tile, .cc-float → .field, etc.)
 * The old classes are kept above for backward compat with any JS that
 * still references them during the transition period.
 * ═══════════════════════════════════════════════════════════════════ */

/* ===== V3 FONT ===== */
:root {
  --cream: #f5f3f0;
  --cream-sidebar: #f0ece7;
  --cream-confirmed: #ede9e3;
  --teal: #2A9D8F;
  --teal-light: rgba(42,157,143,0.10);
  --orange: #E07A2F;
  --orange-light: rgba(224,122,47,0.12);
  --border-light: #e8e4df;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== V3 PAGE LAYOUT ===== */
.page { max-width: 1080px; margin: 0 auto; padding: 0 24px 80px; }
@media (min-width: 768px) {
  .page--checkout { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
  .page__main { min-width: 0; }
  .page__sidebar { position: sticky; top: 80px; }
}
/* Step 3: single column, centered, no sidebar */
.page--checkout.main--step3 { display: block; max-width: 600px; }
.main--step3 .page__sidebar { display: none !important; }

/* ===== V3 SIDEBAR ===== */
.sidebar { display: none; }
@media (min-width: 768px) {
  .sidebar {
    display: block;
    background: var(--cream-sidebar);
    border-radius: 16px;
    padding: 28px;
  }
  .sidebar__title {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--muted, #8a8580); margin-bottom: 20px;
  }
  .sidebar .cc-summary__row { font-size: 13px; }
  .sidebar .cc-summary__row--total .cc-mono { font-size: 22px; }
}

/* ===== V3 SECTION BODY ===== */
.section__body { padding-bottom: 24px; overflow: hidden; animation: reveal 0.35s var(--ease); }
@keyframes reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.cc-step--completed .section__body { display: none !important; }

/* ===== V3 FORM ===== */
.form { display: grid; gap: 14px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form__row--3 { grid-template-columns: 1fr 80px 100px; }
.form__row--contact { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 599px) {
  .form__row--3 { grid-template-columns: 1fr; }
  .form__row--contact { grid-template-columns: 1fr; }
}

/* ===== V3 FIELD (floating label) ===== */
.field { position: relative; }
.field__input {
  width: 100%; padding: 17px 14px 7px;
  font-family: var(--font); font-size: 15px; color: var(--carbon);
  background: var(--white);
  border: 1px solid var(--border-solid, #ddd8d3); border-radius: 10px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, border-width 0.15s;
}
.field__input:focus {
  border-color: var(--carbon); border-width: 1.5px;
  box-shadow: 0 0 0 3px rgba(38,38,38,0.05);
}
.field__label {
  position: absolute; left: 14px; top: 13px;
  font-size: 14px; color: var(--muted, #8a8580); pointer-events: none;
  transition: all 0.25s var(--spring);
}
/* Focused: label floats up */
.field__input:focus + .field__label {
  top: 5px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; opacity: 1;
}
/* Filled but not focused: label disappears */
.field__input:not(:placeholder-shown):not(:focus) + .field__label {
  opacity: 0; pointer-events: none;
}
/* Filled and focused: show label at floated position */
.field__input:not(:placeholder-shown):focus + .field__label {
  top: 5px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; opacity: 1;
}
/* has-value class (set by JS) — also float the label */
.field__input.has-value + .field__label {
  opacity: 0; pointer-events: none;
}
.field__input.has-value:focus + .field__label {
  top: 5px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; opacity: 1;
}
/* Select label always floated */
.field__label--select {
  top: 5px !important; font-size: 10px !important; font-weight: 600 !important;
  letter-spacing: 0.06em !important; text-transform: uppercase !important;
  transform: none !important; opacity: 1 !important;
}
/* Select styling */
.field__input--select {
  appearance: none; -webkit-appearance: none;
  padding-top: 20px; padding-bottom: 10px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23999%22 stroke-width=%222%22><polyline points=%226 9 12 15 18 9%22/></svg>');
  background-repeat: no-repeat; background-position: right 12px center;
}
/* Validation states — applied by JS */
.field__input.cc-float__input--error,
.field__input[class*="--error"] { border-color: #c04040 !important; }
.field__input.cc-float__input--valid,
.field__input[class*="--valid"] { border-color: var(--teal, var(--catalyst-teal)) !important; }
/* Shake */
.field--error .field__input { border-color: #D84D4D; }
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.field--shake { animation: field-shake 0.4s ease; }

/* Chrome autofill for .field__input */
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--white) inset !important;
  -webkit-text-fill-color: var(--carbon) !important;
  transition: background-color 5000s ease-in-out 0s;
}
.field__input:-webkit-autofill + .field__label {
  top: 5px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; opacity: 1;
}
/* iOS Safari zoom prevention */
@media (max-width: 599px) {
  .field__input, .field__input--select { font-size: 16px !important; }
}

/* ===== V3 PAY TILES — tightened 2026-04-17 (paytile-tighten) ===== */
.pay-grid { display: grid; gap: 8px; margin-bottom: 16px; }

.pay-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border-solid, #ddd8d3); border-radius: 12px;
  cursor: pointer;
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  max-height: 66px; opacity: 1;
  transition: max-height 0.3s var(--ease), opacity 0.2s ease,
              border-color 0.15s, transform 0.08s, box-shadow 0.2s,
              padding 0.3s var(--ease), margin 0.3s var(--ease);
  overflow: hidden;
  text-align: left; width: 100%;
}
.pay-tile:hover { border-color: #3a3a3a; }
.pay-tile:active { transform: scale(0.98); }

.pay-tile--selected {
  border-color: var(--carbon, #262626); border-width: 1.5px;
  box-shadow: 0 0 0 2px rgba(38,38,38,0.06);
}

.pay-tile--collapsed {
  max-height: 0; opacity: 0;
  padding-top: 0; padding-bottom: 0;
  margin-top: 0; margin-bottom: 0;
  border-color: transparent;
  pointer-events: none;
  /* 2026-04-17 phaseA — remove from grid flow entirely so parent gap
     doesn't reserve space for 5 invisible tiles (was ~40px empty). */
  display: none !important;
}

.pay-tile__icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pay-tile__icon svg { width: 22px; height: 22px; }
.pay-tile__icon--apple { background: #000; color: #fff; }
.pay-tile__icon--card { background: var(--carbon, #262626); color: #fff; }
.pay-tile__icon--cashapp { background: #00D632; color: #fff; }
.pay-tile__icon--venmo { background: #008CFF; color: #fff; }
.pay-tile__icon--zelle { background: #6D1ED4; color: #fff; }
.pay-tile__icon--ach { background: var(--border-solid, #ddd8d3); color: var(--carbon); }
.pay-tile__icon--cashapp-text {
  font-size: 18px; font-weight: 700; color: #fff; line-height: 1;
}

.pay-tile__info { flex: 1; min-width: 0; }
.pay-tile__name { font-size: 14px; font-weight: 600; color: var(--carbon); }
.pay-tile__desc { font-size: 12px; color: var(--muted, #8a8580); margin-top: 2px; }

.pay-tile__check {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--teal, var(--catalyst-teal));
  display: none; align-items: center; justify-content: center;
  flex-shrink: 0;
  animation: scaleCheck 0.25s var(--spring);
}
.pay-tile--selected .pay-tile__check { display: flex; }
.pay-tile__check svg { width: 12px; height: 12px; }
@keyframes scaleCheck { from { transform: scale(0); } to { transform: scale(1); } }

/* ===== V3 CHANGE PAYMENT ===== */
.pay-change {
  display: none;
  font-size: 13px; font-weight: 500; color: var(--teal, var(--catalyst-teal));
  background: none; border: none; cursor: pointer;
  padding: 4px 0; margin-top: 8px;
  font-family: var(--font);
  transition: opacity 0.15s;
}
.pay-change:hover { text-decoration: underline; }
.pay-change--visible { display: block; }

/* ===== V3 CTA BUTTONS ===== */
.cta {
  width: 100%; padding: 16px; margin-top: 20px;
  background: var(--carbon); color: var(--white);
  font-family: var(--font); font-size: 15px; font-weight: 600;
  border: none; border-radius: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 0.15s, transform 0.08s;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  position: relative; overflow: hidden;
}
.cta:hover { background: #3a3a3a; }
.cta:active { transform: scale(0.97); }
.cta svg { width: 18px; height: 18px; }
/* CTA shimmer */
.cta::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  animation: cta-shimmer 4s ease-in-out infinite;
}
@keyframes cta-shimmer {
  0%, 85% { left: -100%; }
  100% { left: 200%; }
}
.cta--secondary {
  background: transparent;
  color: var(--carbon);
  border: 1.5px solid var(--border-solid, #ddd8d3);
  margin-top: 10px;
}
.cta--secondary:hover { background: rgba(0,0,0,0.02); border-color: var(--carbon); }
.cta--secondary::after { display: none; }
/* Safe area bottom padding */
.cta { padding-bottom: max(16px, env(safe-area-inset-bottom)); }

/* ===== V3 ORANGE ACCENT ===== */
.cc-orange { color: var(--orange, var(--catalyst-orange)); }

/* V3: Hide form fields when payment method is selected (is-picked state) */
.cc-payment.is-picked ~ form,
.cc-payment.is-picked ~ .cc-form__row,
.is-picked ~ #cc-shipping-form,
#step2.cc-step--active .cc-payment.is-picked ~ form {
  display: none !important;
}
/* Also hide the form when payment container has is-picked */
#cc-shipping-form:has(~ .cc-payment.is-picked) {
  display: none !important;
}

/* ============================================================
   V3 PAYMENT-SELECTED STATE (2026-04-16 — coordinated fix)
   When a payment method is selected on Step 2:
   - Hide the form fields (already filled — no need to keep visible)
   - Hide the "Payment Method" header (selected method is the answer)
   - Transform Step 2 v3-header to "completed" state with teal check + Edit
   - Kill empty padding on the section body
   ============================================================ */

/* Hide form, payment intro, trust intro when a payment is picked */
#step2.payment-selected #cc-shipping-form,
#step2.payment-selected .cc-payment__header {
  display: none !important;
}

/* Step 2 header transforms to "completed" look — teal checkmark replaces "2" */
#step2.payment-selected .v3-header__num {
  background: var(--catalyst-teal, #2A9D8F);
  color: #fff;
  position: relative;
  font-size: 0; /* hide the digit */
}
#step2.payment-selected .v3-header__num::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
#step2.payment-selected .v3-header__edit { display: inline-block; }

/* Edit button styling — show only when payment-selected */
#step2 .v3-header__edit {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--catalyst-teal, #2A9D8F);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  display: none;
}

/* Kill empty space when payment-selected — no padding on dead containers */
#step2.payment-selected .section__body { padding-top: 0; min-height: 0; }
#step2.payment-selected .cc-payment-layout__exec { max-width: 100%; }

/* Default state: P2P trust note visible (JS hides for card/apple) */
#p2p-trust-note { display: block; }

/* === V3 SIDEBAR — product rows with thumbnails (matches prototype) === */
.cc-sidebar__product {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, #ddd8d3);
}
.cc-sidebar__product:last-of-type { border-bottom: none; padding-bottom: 14px; }
.cc-sidebar__thumb {
  width: 48px; height: 48px; border-radius: 10px;
  object-fit: cover; background: var(--cream-warm, #edeae5);
  flex-shrink: 0;
}
.cc-sidebar__info { flex: 1; min-width: 0; }
.cc-sidebar__name {
  font-size: 13px; font-weight: 600; color: var(--carbon, #262626);
  letter-spacing: -0.01em; line-height: 1.3;
}
.cc-sidebar__dose {
  font-size: 11px; color: var(--muted, #8a8580); margin-top: 2px;
  letter-spacing: 0.01em;
}
.cc-sidebar__price {
  font-size: 13px; font-weight: 600; color: var(--carbon, #262626);
  margin-left: auto; flex-shrink: 0;
}

/* =========================================================================
   Brand chips on payment tiles (2026-04-17) — mimics Stripe's method rows
   ========================================================================= */

.brand-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.brand-row__tail {
  font-size: 11px;
  color: var(--cc-text-muted, #6e6a66);
  letter-spacing: 0.01em;
}

.brand-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 3px;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fff;
  user-select: none;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

.brand-chip--visa     { background: #1A1F71; }
.brand-chip--amex     { background: #2E77BC; }
.brand-chip--diners   { background: #0079BE; letter-spacing: 0.02em; font-size: 8.5px; }
.brand-chip--cashapp  { background: #00D64F; color: #0a2a1a; }
.brand-chip--venmo    { background: #008CFF; }
.brand-chip--zelle    { background: #6D1ED4; }
.brand-chip--ach      { background: #4A5568; }

.brand-chip--mc {
  background: #fff;
  padding: 0 2px;
  width: 28px;
  position: relative;
  border: 1px solid #e7e5e1;
}
.brand-chip--mc .mc-c {
  width: 12px; height: 12px; border-radius: 50%;
  position: absolute; top: 2px;
}
.brand-chip--mc .mc-c--r { background: #EB001B; left: 3px; }
.brand-chip--mc .mc-c--y { background: #F79E1B; right: 3px; mix-blend-mode: multiply; }

/* Apple Pay — hidden by default, shown by JS on capable devices */
.pay-tile--apple[hidden]        { display: none !important; }
.pay-tile--apple-visible         { display: flex !important; }