/* gd-purchase-bar: the bottom-accessory card (iteration 04). The host is
   a transparent fixed anchor; the full and compact cards are stacked
   layers crossfaded with transform/opacity only (no layout animation).
   The full layer sizes the anchor; the compact layer bottom-aligns. */
gd-purchase-bar { display: block; position: fixed; left: var(--inset-floating); right: var(--inset-floating);
  bottom: max(var(--inset-floating), env(safe-area-inset-bottom, 0px)); z-index: 15; max-width: 456px; margin: 0 auto; pointer-events: none; }
gd-purchase-bar .pb-layer { pointer-events: auto; border-radius: var(--radius-card);
  background: var(--glass-strong); border: 1px solid var(--accent-soft-border);
  backdrop-filter: blur(var(--blur-glass-strong)) saturate(var(--glass-saturate));
  box-shadow: inset 0 1px 0 var(--glass-edge);
  /* Enter timing: slight delay so the outgoing layer (--dur-exit below) is
     mostly gone before the incoming one appears - one card morphing, not two
     glass panels overlapping at mid-opacity. */
  transition: opacity var(--dur-quick) var(--ease-out) 60ms, transform var(--dur-quick) var(--ease-out) 60ms; }
gd-purchase-bar .pb-full { padding: var(--space-md) 18px var(--space-sm); }
gd-purchase-bar .pb-compact { position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px var(--space-md) var(--space-sm); opacity: 0; transform: translateY(var(--shift-swap)); pointer-events: none; }
gd-purchase-bar.compact .pb-full { opacity: 0; transform: translateY(var(--shift-swap)); pointer-events: none; }
/* Exit timing: whichever layer is currently hidden got there via these rules,
   so the outgoing fade runs shorter and with no delay. */
gd-purchase-bar:not(.compact) .pb-compact, gd-purchase-bar.compact .pb-full {
  transition: opacity var(--dur-exit) var(--ease-out), transform var(--dur-exit) var(--ease-out); }
gd-purchase-bar.compact .pb-compact { opacity: 1; transform: none; pointer-events: auto; }

gd-purchase-bar .pb-title { display: flex; justify-content: space-between; align-items: baseline;
  font: 500 var(--type-title)/1.2 var(--font-display); color: var(--ink); }
gd-purchase-bar .pb-price { font: 700 var(--type-title)/1.2 var(--font-ui); color: var(--accent); }
/* The summary row is a button (the ledger's cart entry point): reset the UA
   chrome, keep the row look. Tappable only while there are picks. */
gd-purchase-bar .pb-sub { display: flex; justify-content: space-between; width: 100%;
  background: none; border: 0; padding: 0; text-align: left; cursor: default;
  font: var(--type-note)/1.6 var(--font-ui); color: var(--ink-2); margin: var(--space-2xs) 0 0; }
gd-purchase-bar .pb-sub.tappable { cursor: pointer; position: relative;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-soft-border); }
/* Extended hit area: the row stays one text line visually but accepts a
   44px-tall touch (HIG rule) without moving its neighbors. */
gd-purchase-bar .pb-sub.tappable::after { content: ''; position: absolute; left: 0; right: 0;
  top: 50%; height: var(--tap-min); transform: translateY(-50%); }
/* Ladder nudge: one voice at a time. Base = the lifted-ink delta line
   (step 1); .promo = the mechanism / savings lines (steps 2-3), the promo
   voice: gold, still 600, always arithmetic. */
gd-purchase-bar .pb-nudge { font: 600 var(--type-note)/1.6 var(--font-ui); color: var(--ink); margin: 0 0 2px; }
gd-purchase-bar .pb-nudge.promo { color: var(--accent-2); }
gd-purchase-bar .pb-nudge .pb-delta { color: var(--accent-2); font-weight: 600; }
gd-purchase-bar .btn.primary.full { margin-top: var(--gap-grid); }

@media (prefers-reduced-motion: reduce) {
  gd-purchase-bar .pb-layer { transition-duration: 1ms; }
}

/* Desktop (>= 900px): the same card docks bottom-center, never a sidebar.
   The scroll collapse is disabled in JS (no thumb economy to serve);
   hover states come from shared.css. */

/* Kiosk: token overrides in tokens.css scale controls; the card itself
   may also widen. */
@media (min-width: 1400px) and (pointer: coarse) {
  gd-purchase-bar { max-width: 560px; }
}