/* Checkout and account pages. WooCommerce's markup, the theme's look.
   Light touch on purpose: checkout belongs to WooCommerce and its payment
   plugins. Works with both the shortcode and the block checkout. */

.wc-page { max-width: 64rem; }

.wc-content input[type='text'],
.wc-content input[type='email'],
.wc-content input[type='tel'],
.wc-content input[type='password'],
.wc-content input[type='number'],
.wc-content select,
.wc-content textarea,
.wc-block-components-text-input input,
.wc-block-components-textarea {
  min-height: 48px;
  padding: var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-input);
  background: var(--color-chaux);
  color: var(--color-encre);
  font: inherit;
}

.wc-content label { font-size: var(--text-xs); color: var(--on-surface-soft); }
.wc-content .form-row { margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }

.wc-content .button,
.wc-content button[type='submit'],
.wc-block-components-button:not(.is-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-encre);
  color: var(--color-chaux);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.wc-content table { width: 100%; border-collapse: collapse; }
.wc-content th,
.wc-content td { padding: var(--space-3) 0; border-block-end: 1px solid var(--hairline); text-align: start; }

.wc-content .woocommerce-checkout-review-order,
.wc-content #order_review { background: var(--color-pierre); border-radius: var(--radius-panel); padding: var(--space-5); }

.wc-content .wc_payment_methods { list-style: none; padding: 0; }
.wc-content .wc_payment_method { padding-block: var(--space-3); border-block-end: 1px solid var(--hairline); }
.wc-content .payment_box { font-size: var(--text-xs); color: var(--on-surface-soft); }

.wc-content .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); }

@media screen and (min-width: 990px) {
  .wc-content form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--space-7); align-items: start; }
  .wc-content form.checkout > * { grid-column: 1; }
  .wc-content form.checkout #order_review_heading,
  .wc-content form.checkout #order_review { grid-column: 2; }
  .wc-content form.checkout #order_review_heading { grid-row: 1; }
  .wc-content form.checkout #order_review { grid-row: 2 / span 3; }
}