/* Buyer payment page v3 (payment_card_v3). Markup: pay_view_render() in app/pay-view.php
   (class .pv--v3). Loaded only when the switch is on. Selectors start with .pv.pv--v3 so
   they win over wom.css, which loads later.
   B1: one rounded field card with the home hero card's real values (10 px from the screen
   edges, 24 px radius), the site header inside its top, one logo. */
body:has(.pv--v3){overflow-x:clip}
body:has(.pv--v3) main{margin-top:0}
body:has(.pv--v3) .bf-nav-shell:not(.bf-nav-scrolled):not(.bf-drawer-open){padding:10px 0 0}
.pv.pv--v3 .pv-hero{margin:-68px calc(50% - 50vw + 10px) 0;border-radius:24px;clip-path:inset(0 round 24px)}
.pv.pv--v3 .pv-hero-in{max-width:1296px;margin:0 auto;padding:116px 48px 48px;box-sizing:border-box}
@media (max-width:860px){.pv.pv--v3 .pv-hero{margin-top:-60px}}

/* The chip is a small eyebrow above the title; "{Seller} is selling you", then the item alone as the H1. */
.pv.pv--v3 .pv-chip--d{display:inline-flex;border-color:rgba(255,255,255,.7);font:600 13px/1 var(--ff-body)}
.pv.pv--v3 .pv-sellerline{margin:18px 0 0;font-size:20px;line-height:1.35;color:rgba(255,255,255,.85)}
.pv.pv--v3 .pv-h1{margin:6px 0 0;font:400 56px/1.02 var(--ff-display);letter-spacing:-.04em;overflow-wrap:normal;word-break:normal;hyphens:auto}

/* B2: fewer boxes. The seller row has no box; the total is plain text, no tile. */
.pv.pv--v3 .pv-snap{background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;margin-top:22px;max-width:none}
.pv.pv--v3 .pv-av{width:40px;height:40px;font-size:16px}
.pv.pv--v3 .pv-snap-t b{font:600 16px/1.3 var(--ff-body);color:#fff}
.pv.pv--v3 .pv-snap-t span{font-size:13px}
.pv.pv--v3 .pv-card{border-radius:24px}
.pv.pv--v3 .pv-item{font-size:26px}
.pv.pv--v3 .pv-amount{margin-top:12px;padding:0;background:none;text-align:left;border-radius:0}
.pv.pv--v3 .pv-amount b{font:400 48px/1 var(--ff-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pv.pv--v3 .pv-amount span{margin-top:6px;font-size:13px}

@media (max-width:1023px){
  .pv.pv--v3 .pv-hero-in{padding:100px 32px 32px}
}
@media (max-width:760px){
  .pv.pv--v3 .pv-hero{margin:-60px calc(50% - 50vw + 10px) 0;border-radius:24px;clip-path:inset(0 round 24px)}
  .pv.pv--v3 .pv-hero-in{padding:84px 0 10px}
  .pv.pv--v3 .pv-left{padding:0 20px}
  .pv.pv--v3 .pv-sellerline{margin-top:14px;font-size:17px}
  .pv.pv--v3 .pv-h1{font-size:40px;margin-top:4px}
  .pv.pv--v3 .pv-lead{font-size:15px}
  .pv.pv--v3 .pv-snap{margin-top:18px}
  .pv.pv--v3 .pv-card{margin:20px 10px 0;padding:20px}
  .pv.pv--v3 .pv-amount b{font-size:48px}
  body.has-pay-dock{padding-bottom:calc(var(--pay-dock-h,72px) + 24px + env(safe-area-inset-bottom))}
}

/* B3: the floating pay dock (phones only). */
.pv-dock{display:none}
@media (max-width:760px){
  .pv-dock{display:flex;align-items:center;gap:12px;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;
    padding:10px 10px 10px 18px;border-radius:24px;background:#fff;border:1px solid rgba(14,20,23,.08);
    box-shadow:0 10px 30px rgba(14,20,23,.12);opacity:0;transform:translateY(16px);
    transition:opacity .18s cubic-bezier(.2,.7,.2,1),transform .18s cubic-bezier(.2,.7,.2,1)}
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .pv-dock{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%)}
  }
  .pv-dock.is-on{opacity:1;transform:none}
  .pv-dock[hidden]{display:none}
  .pv-dock-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .pv-dock-t span{font-size:13px;line-height:1.3;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pv-dock-t b{font:400 22px/1.1 var(--ff-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
  .pv-dock-pay{flex:none;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 26px;border:0;border-radius:999px;
    background:var(--ink);color:#fff;font:600 16px/1 var(--ff-body);cursor:pointer}
  .pv-dock-pay:focus-visible{outline:3px solid rgba(14,20,23,.25);outline-offset:2px}
  .pv-dock-pay.is-busy{opacity:.6;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){.pv-dock{transition:none;transform:none}}