/*
 * Product-page one-click: the spacing for the Apple Pay / Google Pay row that
 * `theme/js/happywags-express-pdp.js` injects under Add to Cart.
 *
 * WHY THIS IS ITS OWN FILE
 * ------------------------
 * These rules used to live in `happywags-checkout.css`, which is linked only by
 * the authored pages (`scripts/checkout-page.mjs` HEAD_EXTRA: /checkout,
 * /checkout-embed, /preview/checkout, /thank-you). No product page has ever
 * linked it — `scripts/build.mjs` injects the two express <script> tags into
 * /products/* and nothing else — so every rule written for `.hw-pdp-express`
 * was dead in production and the row rendered on UA defaults: no margin, no
 * min-height, no skeleton, and a bare <p> for the note. That is why the button
 * sat flush against Add to Cart.
 *
 * Splitting it out rather than linking the whole checkout sheet keeps ~10KB of
 * `.hw-co-*` rules off the highest-traffic template. Nothing here may depend on
 * `happywags-checkout.css` being present — the PDP loads this file alone, which
 * is why the shimmer keyframes are repeated at the bottom.
 *
 * THE SPACING, AND WHY THESE NUMBERS
 * ----------------------------------
 * Add to Cart and one-click are two competing primary actions, and the whole
 * point of the express row is that it is a *different* decision from adding to
 * the cart. Flush against the button it reads as one control with a seam in it,
 * and a mis-tap lands on a charge rather than a cart.
 *
 *   24px  above the row — the repo's separation constant between an express
 *         row and the control it is an alternative to. Same value in
 *         happywags-checkout.css `.hw-co-express` (margin-bottom) and
 *         `.hw-co-or`, tanora-fields.css `.tf-express` / `.tf-express-or`, and
 *         brenner's `src/style.css`. Not a new number.
 *   16px  below — the theme's `.guarantee-badges-container` immediately after
 *         the buy box carries `margin-top: -5px` (and -10px under its own
 *         mobile query), so a 0 bottom margin lets the badges climb onto the
 *         note. 16px absorbs the pull and still leaves a real gap.
 *    8px  under the button for the note, matching `.hw-pdp-express-note`'s
 *         long-standing value and tanora's `.tf-express-note`.
 *
 * The divider carries the same geometry as every other one in the repo —
 * flex, 12px gap, `flex: 1 1 auto` 1px rules, 13/18px, subdued — so the PDP
 * does not invent a third look for a component that already has one.
 */

.hw-pdp-express {
  margin: 24px 0 16px;
  /*
   * FULL WIDTH, EXPLICITLY — defensive, not currently load-bearing.
   *
   * The JS anchors the row inside `.shop-add-to-cart-wrapper`, a block box at
   * `width: 100% !important`, so it fills the buy box on its own. These lines
   * exist because the row is one anchor-fallback away from being a child of
   * `.shop-product-info`, which is `display: flex; flex-direction: column` —
   * and a flex item in a column shrink-wraps unless stretched. Measured while
   * the row was briefly parented there: a 257px express button under a 580px
   * Add to Cart. Cheap insurance against that fallback ever being taken.
   */
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
}

.hw-pdp-express[hidden] {
  display: none;
}

/*
 * "or", between Add to Cart and one-click.
 *
 * It lives INSIDE `.hw-pdp-express` on purpose: the row withdraws itself whole
 * on a device with no wallet, and a divider left behind would be a labelled
 * separator with nothing under it.
 */
.hw-pdp-express-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 18px;
  opacity: 0.6;
}

.hw-pdp-express-or::before,
.hw-pdp-express-or::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
}

.hw-pdp-express-row {
  position: relative;
  min-height: 46px;
}

.hw-pdp-express whop-express-checkout-button {
  display: block;
  width: 100%;
  max-width: 100%;
}

.hw-pdp-express whop-express-checkout-button iframe {
  max-width: 100% !important;
}

.hw-pdp-express[data-express-state='probing'] whop-express-checkout-button {
  opacity: 0;
}

/*
 * The skeleton is a promise that something is coming, so it never outlives the
 * probe — `happywags-express-pdp.js` withdraws the whole row at the deadline.
 *
 * The radius tracks the THEME's own button variable rather than the checkout
 * page's `--hw-radius`, which is not defined on a product page. It resolves to
 * 40px here, matching the Add to Cart pill the skeleton sits under — the old
 * rule only matched by accident, via `var(--hw-radius, 40px)` falling through
 * to a 40px literal that happened to equal `--global-button-radius`. Reading
 * the theme's variable makes the match intentional and survives a retheme.
 */
.hw-pdp-express[data-express-state='probing'] .hw-pdp-express-row::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--global-button-radius, 40px);
  background-color: rgba(37, 40, 42, 0.07);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: hw-shimmer 1.25s ease-in-out infinite;
  pointer-events: none;
}

/* The note is a claim about the order, so it only appears once the button
 * actually has, never over the skeleton. */
.hw-pdp-express-note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  opacity: 0.6;
}

.hw-pdp-express[data-express-state='probing'] .hw-pdp-express-note {
  visibility: hidden;
}

/* Repeated from happywags-checkout.css rather than shared: the product page
 * links this file and only this file. */
@keyframes hw-shimmer {
  from {
    background-position: -120% 0;
  }
  to {
    background-position: 220% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hw-pdp-express[data-express-state='probing'] .hw-pdp-express-row::after {
    animation: none;
  }
}