/* ==========================================================================
   commerce.css — the bag, the checkout and the account

   Loaded ONLY on those three pages, after wordpress.css. Everything here
   exists because the theme dequeues WooCommerce's own three stylesheets: the
   design is the source of truth and WooCommerce's CSS overrode it on exactly
   the pages WooCommerce renders. Dequeuing it also removed its resets, and
   what follows puts back only what the design needs, in the design's terms.

   This is not one of the seven approved stylesheets. Those are carried across
   from the prototype untouched; this and wordpress.css are the theme's own.
   ========================================================================== */

/* ==========================================================================
   The checkout payment step

   The design draws a payment method as a RADIO CARD — the same .option-card
   the delivery step uses. WooCommerce draws it as a <ul> of <li>s, and the
   theme cannot hand-write that markup: gateways register themselves through
   woocommerce_checkout_payment(), and a hand-built step would silently support
   only the gateways that existed when it was written. checkout.js moves
   WooCommerce's #payment into the design's step instead.

   So the markup stays WooCommerce's and these rules give it the design's
   appearance. They matter more than they look: the theme dequeues
   WooCommerce's three stylesheets, which took its list reset with them, and
   nothing replaced it — which is why the payment methods rendered as a
   bulleted list with a small grey button under it.
   ========================================================================== */

#payment { margin-top: var(--s-5); }

.wc_payment_methods {
  margin: 0;
  padding: 0;
  list-style: none;              /* WooCommerce's own reset, which is dequeued */
}

/* One method = one .option-card. */
li.wc_payment_method {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  margin: 0;
  padding: var(--s-4) var(--s-5);
  border: var(--border);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

li.wc_payment_method + li.wc_payment_method { margin-top: var(--s-3); }
li.wc_payment_method:hover { border-color: var(--c-muted-soft); }

/* The chosen method, drawn as the design draws a chosen option-card. */
li.wc_payment_method:has(input:checked) {
  border-color: var(--c-navy);
  background: var(--c-tint);
}
li.wc_payment_method:has(input:focus-visible) {
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}

li.wc_payment_method > input[type="radio"] {
  grid-column: 1;
  grid-row: 1;
  margin: 4px 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--c-blue);
}

li.wc_payment_method > label {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-ink);
  cursor: pointer;
}

/* A gateway's logo. Left at its own width, capped so a large one cannot
   push the method name out of the card. */
li.wc_payment_method > label img {
  max-width: 64px;
  max-height: 24px;
  width: auto;
  height: auto;
  margin: 0;
  vertical-align: middle;
}

/* The description a gateway supplies: the design's option-card meta line. */
.payment_box {
  grid-column: 2;
  grid-row: 2;
  margin: var(--s-2) 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-muted);
}

.payment_box p { margin: 0; }
.payment_box p + p { margin-top: var(--s-2); }

/* WooCommerce's little pointer above the description box: the design has no
   such thing, and it is drawn with a border trick that shows as a stray
   triangle once the box's own border is removed. */
.payment_box::before { display: none; }

/* ---- Terms, and the order button ---------------------------------------- */

#payment .place-order {
  margin: var(--s-5) 0 0;
  padding: 0;
}

/* The terms checkbox, drawn as the design's .checkbox row. */
#payment .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--s-4); }
#payment .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0; padding: 0; }

#payment .woocommerce-privacy-policy-text p,
#payment .woocommerce-terms-and-conditions-wrapper label {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-muted);
  cursor: pointer;
}

#payment .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  flex: none;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--c-blue);
}

#payment .woocommerce-terms-and-conditions-wrapper a { text-decoration: underline; }
#payment .woocommerce-terms-and-conditions-wrapper .required {
  color: var(--c-danger);
  text-decoration: none;
}

/*
 * Place order. The design's primary commitment button is the lime one — the
 * same weight as "Proceed to checkout" on the bag, because it is the same
 * decision one step later. WooCommerce ships it as a bare `.button.alt`, which
 * with its own stylesheet dequeued is an unstyled 32px grey box.
 */
#place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 0.95rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-0);
  background: var(--c-lime);
  color: var(--c-navy);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

#place_order:hover { background: var(--c-navy); color: var(--c-white); }
#place_order:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
#place_order:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---- The coupon prompt --------------------------------------------------- */

/*
 * WooCommerce offers the coupon form above the checkout. The design has no
 * such banner — its promotion code lives in the bag — so this is quietened to
 * a single line of the design's own text rather than left as a full-width
 * bordered notice competing with the first step.
 */
.woocommerce-form-coupon-toggle { margin-bottom: var(--s-5); }

.woocommerce-form-coupon-toggle .woocommerce-info {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }
.woocommerce-form-coupon-toggle .showcoupon {
  color: var(--c-blue);
  text-decoration: underline;
}

/* The form it reveals, in the design's inline-form idiom. */
form.checkout_coupon {
  margin: 0 0 var(--s-5);
  padding: var(--s-4);
  border: var(--border);
  background: var(--c-tint);
}

form.checkout_coupon .form-row { margin: 0; padding: 0; }
form.checkout_coupon p:first-child { margin-top: 0; font-size: var(--fs-xs); color: var(--c-muted); }

/* ==========================================================================
   The promotion code row, held to the design under third-party CSS

   template-parts/cart/coupon-form.php renders the design's markup exactly, and
   measured on its own the input and the button are both 48px on one row. The
   cart and checkout are also the two pages where a payment or shipping plugin
   loads ITS stylesheet, which the theme cannot dequeue the way it dequeues
   WooCommerce's — a plugin rule on `button` or `input` is enough to push the
   Apply button off the input it is joined to.

   These restate the design's own geometry at a specificity a plugin is
   unlikely to beat. They change nothing when nothing interferes.
   ========================================================================== */

.woocommerce .promo .inline-form,
.woocommerce-page .promo .inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.woocommerce .promo .inline-form .field__input,
.woocommerce-page .promo .inline-form .field__input {
  flex: 1 1 220px;
  min-width: 0;
  height: 48px;
  margin: 0;
  align-self: stretch;
}

.woocommerce .promo .inline-form .btn-ls,
.woocommerce-page .promo .inline-form .btn-ls {
  flex: none;
  height: 48px;
  margin: 0;
  align-self: stretch;
  line-height: normal;
  vertical-align: top;
}

/* The design stacks them on a narrow screen; keep that rather than squeezing
   a 220px field and a button into a phone-width summary panel. */
@media (max-width: 479.98px) {
  .woocommerce .promo .inline-form,
  .woocommerce-page .promo .inline-form {
    flex-direction: column;
  }

  .woocommerce .promo .inline-form .btn-ls,
  .woocommerce-page .promo .inline-form .btn-ls {
    width: 100%;
  }
}