/* CHECKOUT AND CARD PAYMENT - ticket 12
   The checkout screen, the confirmation screen and the order views are
   dressed to the house: ivory canvas, sand panels, charcoal buttons, label
   tier for every small line, 2px corners. Nothing here changes the shop
   plugin's behaviour - only how the same markup reads.

   Layout: the form is one column; the order total, the three promises and
   the payment sit together in one panel beside it from 1024px up. Every
   full-width strip (notices, coupon, sign-in, wallets) takes a row of its
   own, so the panel never has to guess where it goes. The panel becomes a
   normal block under the form on a tablet and a phone. */

/* --- 1. The two columns --------------------------------------------- */
.woocommerce-checkout form.checkout.woocommerce-checkout {
  margin-top: 0.5rem;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  float: none;
  width: 100%;
}

@media (min-width: 1024px) {
  .woocommerce-checkout form.checkout.woocommerce-checkout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 3.5rem;
  }

  .woocommerce-checkout .woocommerce-NoticeGroup,
  .woocommerce-checkout .woocommerce-form-coupon-toggle,
  .woocommerce-checkout .woocommerce-form-login-toggle,
  .woocommerce-checkout .woocommerce-form-login,
  .woocommerce-checkout .woocommerce-form-coupon,
  .woocommerce-checkout .nn-checkout-guest,
  .woocommerce-checkout #wc-stripe-express-checkout-element,
  .woocommerce-checkout form.checkout > p {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  .woocommerce-checkout #customer_details {
    flex: 1 1 0;
    min-width: 0;
  }

  .woocommerce-checkout .nn-checkout-aside {
    flex: 0 0 22rem;
    max-width: 22rem;
    align-self: flex-start;
    position: sticky;
    top: 1.5rem;
  }
}

/* --- 2. The section heads ------------------------------------------- */
.woocommerce-checkout h3 {
  margin: 2.5rem 0 1.25rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: var(--type-label-lg-size);
  font-weight: 600;
  line-height: var(--type-label-lg-leading);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-charcoal);
}

.woocommerce-checkout #order_review_heading {
  margin-top: 0;
}

/* --- 3. The fields --------------------------------------------------- */
.woocommerce-checkout form .form-row {
  padding: 0;
  margin: 0 0 1.15rem;
}

.woocommerce-checkout form .form-row label {
  display: block;
  margin: 0 0 0.45rem;
  font-family: var(--font-body);
  font-size: var(--type-label-sm-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  line-height: 1.4;
}

.woocommerce-checkout form .form-row .required {
  color: var(--color-charcoal);
  font-weight: 600;
  text-decoration: none;
  margin-left: 0.15rem;
}

.woocommerce-checkout form .form-row .optional {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--color-stone);
}

.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row textarea,
.woocommerce-checkout form .form-row select {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background-color: var(--color-ivory);
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: var(--type-body-md-size);
  line-height: 1.5;
  box-shadow: none;
  transition: border-color 0.2s ease;
}

.woocommerce-checkout form .form-row textarea {
  min-height: 7rem;
  resize: vertical;
}

.woocommerce-checkout form .form-row input.input-text:focus,
.woocommerce-checkout form .form-row textarea:focus,
.woocommerce-checkout form .form-row select:focus {
  outline: none;
  border-color: var(--color-charcoal);
  box-shadow: none;
}

/* The country field is dressed by the shop plugin's own select box. */
.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: auto;
  padding: 0.85rem 2.2rem 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background-color: var(--color-ivory);
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  font-size: var(--type-body-md-size);
  line-height: 1.5;
  color: var(--color-charcoal);
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50%;
  right: 0.8rem;
  transform: translateY(-50%);
}

/* The country is fixed (one country is served), so the shop plugin prints it
   as plain text. It keeps the field's shape, so the row still reads as a
   field that is already answered and cannot be changed. */
.woocommerce-checkout form .form-row select.country_to_state--single {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background-color: var(--color-ivory);
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: var(--type-body-md-size);
  appearance: none;
  -webkit-appearance: none;
}

/* The "ship to a different address" line is a plain tick, not a form row. */
.woocommerce-checkout #ship-to-different-address {
  margin: 0.5rem 0 1.25rem;
  font-family: var(--font-body);
  font-size: var(--type-body-md-size);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.woocommerce-checkout #ship-to-different-address label {
  margin: 0;
  font-size: var(--type-body-md-size);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

/* Ticks keep the house colour and read at a comfortable size. */
.woocommerce-checkout input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0 0.55rem 0 0;
  accent-color: var(--color-charcoal);
  vertical-align: -2px;
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout form .form-row label.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: var(--type-body-md-size);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
  color: var(--color-charcoal);
  cursor: pointer;
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0.2rem 0 0;
}

/* --- 4. The strips and notices --------------------------------------- */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  margin: 0 0 0.75rem;
}

/* The sign-in fields are already open below the guest block, so the
   "click here to login" strip would only repeat them. */
.woocommerce-checkout .woocommerce-form-login-toggle {
  display: none;
}

.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error {
  margin: 0 0 0.75rem;
  padding: 0.95rem 1.15rem;
  border: 0;
  border-left: 2px solid var(--color-charcoal);
  border-radius: 2px;
  background-color: var(--color-sand);
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
  line-height: 1.6;
  list-style: none;
}

.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-error::before {
  display: none;
}

.woocommerce-checkout .woocommerce-info a,
.woocommerce-checkout .woocommerce-message a,
.woocommerce-checkout .woocommerce-error a {
  color: var(--color-charcoal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.woocommerce-checkout .woocommerce-error {
  border-left-color: var(--color-error);
}

/* The sign-in form the guest gate opens. */
.woocommerce-checkout form.woocommerce-form-login {
  display: block !important;
  margin: 0 0 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background-color: var(--color-ivory);
}

.woocommerce-checkout form.woocommerce-form-login .lost_password {
  margin: 0.75rem 0 0;
  font-size: var(--type-body-sm-size);
}

.woocommerce-checkout form.woocommerce-form-login {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
}

.woocommerce-checkout form.woocommerce-form-login > * {
  flex: 0 0 100%;
}

@media (min-width: 768px) {
  .woocommerce-checkout form.woocommerce-form-login .woocommerce-form-login__username,
  .woocommerce-checkout form.woocommerce-form-login .woocommerce-form-login__password {
    flex: 0 0 calc(50% - 0.5rem);
  }
}

.woocommerce-checkout form.woocommerce-form-login button.button,
.woocommerce-checkout form.woocommerce-form-login .woocommerce-form-login__submit {
  padding: 0.85rem 1.8rem;
  border: 1px solid var(--color-charcoal);
  border-radius: 2px;
  background-color: var(--color-charcoal);
  color: var(--color-ivory);
  font-family: var(--font-body);
  font-size: var(--type-label-lg-size);
  font-weight: 600;
  line-height: var(--type-label-lg-leading);
  letter-spacing: var(--type-label-lg-tracking);
  text-transform: var(--type-label-lg-transform);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce-checkout form.woocommerce-form-login button.button:hover,
.woocommerce-checkout form.woocommerce-form-login .woocommerce-form-login__submit:hover {
  background-color: var(--color-ivory);
  color: var(--color-charcoal);
}

.woocommerce-checkout form.woocommerce-form-login .lost_password a,
.woocommerce-checkout form.woocommerce-form-login a {
  color: var(--color-charcoal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- 5. The order panel ---------------------------------------------- */
.woocommerce-checkout .nn-checkout-aside {
  padding: 1.5rem;
  border-radius: 2px;
  background-color: var(--color-sand);
}

.woocommerce-checkout .nn-checkout-aside h3 {
  margin: 0 0 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(32, 32, 31, 0.15);
}

.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background-color: transparent;
}

.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table td {
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid rgba(32, 32, 31, 0.12);
  background-color: transparent;
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
  line-height: 1.5;
  vertical-align: top;
}

.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table thead th {
  font-size: var(--type-overline-size);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-charcoal);
}

.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table td {
  text-align: right;
  white-space: nowrap;
}

.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table td.product-name {
  text-align: left;
  white-space: normal;
}

.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot td {
  font-size: var(--type-body-md-size);
}

.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
  border-bottom: 0;
  padding-top: 0.9rem;
  font-size: var(--type-body-lg-size);
  font-weight: 600;
}

.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table .nn-wait-row td {
  text-align: right;
}

.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table .nn-wait-note-row td {
  border-bottom: 0;
  padding: 0.3rem 0 0;
  text-align: left;
  white-space: normal;
}

/* --- 6. The three promises ------------------------------------------- */
.woocommerce-checkout .nn-checkout-promises {
  margin: 1.25rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(32, 32, 31, 0.15);
}

.woocommerce-checkout .nn-checkout-promises__row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.9rem;
  margin: 0 0 0.75rem;
  font-size: var(--type-body-sm-size);
  line-height: 1.55;
  color: var(--color-charcoal);
}

.woocommerce-checkout .nn-checkout-promises__row:last-child {
  margin-bottom: 0;
}

.woocommerce-checkout .nn-checkout-promises__label {
  font-size: var(--type-label-sm-size);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-charcoal);
}

/* --- 7. The payment box ---------------------------------------------- */
.woocommerce-checkout #payment {
  margin-top: 1.35rem;
  background-color: transparent;
  border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
  margin: 0;
  padding: 0.9rem 0;
  border-top: 1px solid rgba(32, 32, 31, 0.15);
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  display: inline;
  font-family: var(--font-body);
  font-size: var(--type-body-md-size);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-charcoal);
  cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li input.input-radio {
  margin-right: 0.5rem;
}

/* The shop plugin's own name for the one payment row is drawn by its
   script, in English, and the card frame below already names the method.
   It stays for a screen reader and steps out of the way for the eye. */
.woocommerce-checkout #payment ul.payment_methods li label[for^="payment_method_"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.woocommerce-checkout #payment div.payment_box {
  margin: 0.9rem 0 0;
  padding: 0;
  background-color: transparent;
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
  line-height: 1.55;
}

.woocommerce-checkout #payment div.payment_box::before {
  display: none;
}

.woocommerce-checkout #payment div.payment_box p {
  margin: 0 0 0.6rem;
}

/* The shop plugin's test-mode hint: quiet, small, out of the way. */
.woocommerce-checkout .wc-stripe-payment-method-instruction {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(32, 32, 31, 0.15);
  border-radius: 2px;
  font-size: var(--type-body-sm-size);
  line-height: 1.55;
}

.woocommerce-checkout .wc-stripe-payment-method-instruction strong {
  font-weight: 600;
}

.woocommerce-checkout .wc-stripe-payment-method-instruction a {
  color: var(--color-charcoal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.woocommerce-checkout .wc-stripe-payment-method-instruction .wc-stripe-copy-test-number {
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-body);
  font-size: inherit;
  color: var(--color-charcoal);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* The card fields the payment service draws inside its own frame. */
.woocommerce-checkout #wc-stripe-upe-form {
  margin: 0;
  padding: 0;
  border: 0;
}

.woocommerce-checkout .wc-stripe-upe-element {
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background-color: var(--color-ivory);
  padding: 0.35rem 0.6rem;
}

/* Wallets, when the browser offers them, sit above the card fields. */
.woocommerce-checkout #wc-stripe-express-checkout-element {
  margin: 0 0 1rem;
}

.woocommerce-checkout #wc-stripe-express-checkout-element:empty {
  margin: 0;
}

/* The privacy line and the place-order row. */
.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
  margin: 1rem 0;
  font-size: var(--type-body-sm-size);
  line-height: 1.55;
  color: var(--color-charcoal);
}

.woocommerce-checkout #payment .woocommerce-privacy-policy-text p {
  margin: 0;
}

.woocommerce-checkout #payment .woocommerce-privacy-policy-text a {
  color: var(--color-charcoal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.woocommerce-checkout #payment .form-row.place-order {
  margin: 0;
  padding: 0;
  display: block;
}

.woocommerce-checkout #place_order,
.woocommerce-checkout #payment #place_order {
  width: 100%;
  display: block;
  margin: 0;
  padding: 1.05rem 1.5rem;
  border: 1px solid var(--color-charcoal);
  border-radius: 2px;
  background-color: var(--color-charcoal);
  color: var(--color-ivory);
  font-family: var(--font-body);
  font-size: var(--type-label-lg-size);
  font-weight: 600;
  line-height: var(--type-label-lg-leading);
  letter-spacing: var(--type-label-lg-tracking);
  text-transform: var(--type-label-lg-transform);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #place_order:focus {
  background-color: var(--color-ivory);
  color: var(--color-charcoal);
}

/* --- 8. The guest gate ----------------------------------------------- */
.woocommerce-checkout .nn-checkout-guest {
  margin: 0 0 1.5rem;
  padding: 2rem 2rem 1.75rem;
  border-radius: 2px;
  background-color: var(--color-sand);
}

.woocommerce-checkout .nn-checkout-guest__title {
  margin: 0 0 0.65rem;
  font-family: var(--font-body);
  font-size: var(--type-headline-sm-size);
  font-weight: 600;
  line-height: var(--type-headline-sm-leading);
  color: var(--color-charcoal);
}

.woocommerce-checkout .nn-checkout-guest__text {
  margin: 0;
  max-width: 38rem;
  font-size: var(--type-body-md-size);
  line-height: 1.6;
  color: var(--color-charcoal);
}

.woocommerce-checkout .nn-checkout-guest__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin: 1.35rem 0 0;
}

.woocommerce-checkout .nn-checkout-guest__button {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--color-charcoal);
  border-radius: 2px;
  background-color: var(--color-charcoal);
  color: var(--color-ivory);
  font-family: var(--font-body);
  font-size: var(--type-label-lg-size);
  font-weight: 600;
  line-height: var(--type-label-lg-leading);
  letter-spacing: var(--type-label-lg-tracking);
  text-transform: var(--type-label-lg-transform);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce-checkout .nn-checkout-guest__button:hover {
  background-color: var(--color-ivory);
  color: var(--color-charcoal);
}

.woocommerce-checkout .nn-checkout-guest__quiet {
  font-size: var(--type-label-md-size);
  font-weight: 600;
  letter-spacing: var(--type-label-md-tracking);
  text-transform: var(--type-label-md-transform);
  color: var(--color-charcoal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- 9. The confirmation screen -------------------------------------- */
.woocommerce-order .woocommerce-notice--success {
  margin: 0 0 1.5rem;
  padding: 0.95rem 1.15rem;
  border-left: 2px solid var(--color-charcoal);
  border-radius: 2px;
  background-color: var(--color-sand);
  color: var(--color-charcoal);
  font-size: var(--type-body-md-size);
  line-height: 1.6;
}

.woocommerce-order ul.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem 1.5rem;
  margin: 0 0 2rem;
  padding: 1.35rem 1.5rem;
  border: 0;
  border-radius: 2px;
  background-color: var(--color-sand);
  list-style: none;
}

.woocommerce-order ul.woocommerce-order-overview li {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--type-label-sm-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--color-charcoal);
}

.woocommerce-order ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--type-body-md-size);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
}

.woocommerce-order h2 {
  margin: 2rem 0 1rem;
  font-family: var(--font-body);
  font-size: var(--type-label-lg-size);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-charcoal);
}

.woocommerce-order table.shop_table,
.woocommerce-account .woocommerce-order-details table.shop_table {
  margin: 0 0 1.5rem;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  background-color: transparent;
}

.woocommerce-order table.shop_table th,
.woocommerce-order table.shop_table td,
.woocommerce-account .woocommerce-order-details table.shop_table th,
.woocommerce-account .woocommerce-order-details table.shop_table td {
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background-color: transparent;
  color: var(--color-charcoal);
  font-size: var(--type-body-sm-size);
  line-height: 1.5;
}

.woocommerce-order table.shop_table thead th {
  font-size: var(--type-overline-size);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.woocommerce-order table.shop_table tfoot th,
.woocommerce-order table.shop_table tfoot td {
  font-size: var(--type-body-md-size);
}

/* The product names inside an order are links; the shop plugin paints them
   the theme's accent colour, which reads as an alert. House links are
   charcoal with a quiet underline. */
.woocommerce-order table.shop_table a,
.woocommerce-order .woocommerce-order-overview a,
.woocommerce-account .woocommerce-order-details table.shop_table a,
.woocommerce-account .woocommerce-orders-table a {
  color: var(--color-charcoal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.woocommerce-order .woocommerce-customer-details address {
  border: 0;
  padding: 0;
  font-size: var(--type-body-md-size);
  line-height: 1.6;
  color: var(--color-charcoal);
}

.woocommerce-order .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem;
}

.woocommerce-order .woocommerce-columns--addresses .woocommerce-column {
  width: auto;
  float: none;
  margin: 0;
}

/* --- 10. Phones ------------------------------------------------------ */
@media (max-width: 1023px) {
  .woocommerce-checkout .nn-checkout-aside {
    margin-top: 2rem;
  }
}

@media (max-width: 560px) {
  .woocommerce-checkout form .form-row-first,
  .woocommerce-checkout form .form-row-last {
    width: 100%;
    float: none;
  }
}

@media (max-width: 767px) {
  .woocommerce-checkout h3 {
    margin-top: 2rem;
  }

  .woocommerce-checkout .nn-checkout-aside {
    padding: 1.15rem;
  }

  .woocommerce-checkout .nn-checkout-promises__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }

  .woocommerce-checkout .nn-checkout-guest {
    padding: 1.5rem 1.25rem;
  }

  .woocommerce-checkout .nn-checkout-guest__button {
    width: 100%;
    text-align: center;
  }

  .woocommerce-order ul.woocommerce-order-overview {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
  }
}