/* Product page one-click buying: fulfillment choice, Express Checkout mount, Buy now.
   Loaded only by product.html. Extends shop.css (.choice-group, .bag-alert, .btn); no new tokens. */

/* "How do you want it?" reuses the bag's .choice component, just tighter above the buttons */
.pdp-ship { margin: 0 0 12px; }
.pdp-ship .choice span .num { font-variant-numeric: tabular-nums; color: inherit; }

/* Express Checkout Element: takes no room until Stripe reports a wallet this browser can use */
.express { margin: 0 0 12px; }
.express:not(.is-ready) { height: 0; margin: 0; overflow: hidden; visibility: hidden; }
.express.is-failed [data-express-mount] { display: none; }
.express .bag-alert {
  margin: 0; padding: 12px 14px; font-size: var(--t-ui); color: var(--ink);
  background: var(--white); box-shadow: inset 0 0 0 1px var(--ink);
}
.express .bag-alert svg { width: 18px; height: 18px; }
.express .bag-alert[hidden] { display: none; }

/* Add to bag + Buy now. Phone: side by side in the pinned bar. */
.cta-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cta-two form { min-width: 0; }
.cta-two .btn { padding: 0 12px; }
.cta-two .pdp-add .sep, .cta-two .pdp-add .num { display: none; } /* the price sits right above */
[data-buy-now] .spin { display: none; }
[data-buy-now].is-busy .spin { display: block; }
[data-buy-now].is-busy [data-buy-label] { opacity: .6; }

@media (min-width: 700px) {
  /* the bar is no longer pinned: stack the two full width, price back on Add to bag */
  .cta-two { grid-template-columns: 1fr; }
  .cta-two .btn { padding: 0 22px; }
  .cta-two .pdp-add .sep, .cta-two .pdp-add .num { display: revert; }
  .cta-two .pdp-add .sep { display: block; }
}