/* =========================================================
   MALUME CHECKOUT — MOBILE WIDTH FIX
========================================================= */

@media (max-width: 680px) {

    html,
    body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }
  
  
    /* =======================================================
       PAGE
    ======================================================= */
  
    .checkout-page {
      width: 100%;
      max-width: 100%;
      min-width: 0;
  
      padding:
        58px
        16px
        90px;
  
      overflow-x: hidden;
    }
  
  
    .checkout-heading {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }
  
  
    .checkout-heading h1 {
      max-width: 100%;
  
      font-size:
        clamp(
          3rem,
          14vw,
          4.6rem
        );
  
      line-height: 0.94;
  
      overflow-wrap: break-word;
    }
  
  
    /* =======================================================
       CHECKOUT LAYOUT
    ======================================================= */
  
    .checkout-layout {
      width: 100%;
      max-width: 100%;
      min-width: 0;
  
      grid-template-columns:
        minmax(0, 1fr);
  
      gap: 24px;
    }
  
  
    .checkout-layout > * {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }
  
  
    /* =======================================================
       FORM
    ======================================================= */
  
    .checkout-form {
      width: 100%;
      max-width: 100%;
      min-width: 0;
  
      overflow: visible;
    }
  
  
    .checkout-form-section {
      width: 100%;
      max-width: 100%;
      min-width: 0;
  
      padding: 20px;
  
      overflow: hidden;
    }
  
  
    .checkout-section-heading {
      width: 100%;
      min-width: 0;
  
      grid-template-columns:
        38px
        minmax(0, 1fr);
  
      gap: 13px;
    }
  
  
    .checkout-section-heading > div {
      min-width: 0;
    }
  
  
    .checkout-section-heading h2,
    .checkout-section-heading p {
      max-width: 100%;
  
      overflow-wrap: break-word;
    }
  
  
    /* =======================================================
       FIELDS
    ======================================================= */
  
    .checkout-fields {
      width: 100%;
      max-width: 100%;
      min-width: 0;
  
      grid-template-columns:
        minmax(0, 1fr);
    }
  
  
    .checkout-field,
    .checkout-field-full {
      width: 100%;
      max-width: 100%;
      min-width: 0;
  
      grid-column: 1;
    }
  
  
    .checkout-field input,
    .checkout-field select,
    .checkout-field textarea {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }
  
  
    /* =======================================================
       DELIVERY
    ======================================================= */
  
    .delivery-option {
      width: 100%;
      max-width: 100%;
      min-width: 0;
  
      grid-template-columns:
        22px
        minmax(0, 1fr);
    }
  
  
    .delivery-option-content {
      width: 100%;
      max-width: 100%;
      min-width: 0;
  
      flex-direction: column;
      align-items: flex-start;
  
      gap: 10px;
    }
  
  
    .delivery-option-content > span {
      min-width: 0;
    }
  
  
    /* =======================================================
       PAYMENT BOX
    ======================================================= */
  
    .payment-placeholder {
      width: 100%;
      max-width: 100%;
      min-width: 0;
  
      align-items: flex-start;
    }
  
  
    .payment-placeholder > div {
      min-width: 0;
    }
  
  
    .payment-placeholder p {
      overflow-wrap: break-word;
    }
  
  
    /* =======================================================
       PROCEED TO PAYMENT BUTTON
    ======================================================= */
  
    .place-order-button {
      position: static;
  
      display: flex;
  
      width: 100%;
      max-width: 100%;
      min-width: 0;
      min-height: 58px;
  
      margin: 0;
      padding: 0 20px;
  
      justify-content: center;
      align-items: center;
  
      white-space: normal;
      text-align: center;
  
      transform: none;
  
      touch-action: manipulation;
    }
  
  
    .place-order-button:hover {
      transform: none;
    }
  
  
    .place-order-button svg {
      flex: 0 0 auto;
    }
  
  
    /* =======================================================
       ORDER SUMMARY
    ======================================================= */
  
    .checkout-summary {
      width: 100%;
      max-width: 100%;
      min-width: 0;
  
      padding: 20px;
  
      overflow: hidden;
    }
  
  
    .checkout-summary-heading {
      width: 100%;
      min-width: 0;
  
      align-items: flex-start;
      flex-direction: column;
    }
  
  
    .checkout-order-items {
      width: 100%;
      min-width: 0;
    }
  
  
    .checkout-order-item {
      width: 100%;
      min-width: 0;
  
      grid-template-columns:
        58px
        minmax(0, 1fr);
    }
  
  
    .checkout-order-item-content {
      min-width: 0;
    }
  
  
    .checkout-order-item-content h3,
    .checkout-order-item-content p {
      overflow-wrap: break-word;
    }
  
  
    .checkout-order-item-price {
      grid-column: 2;
  
      text-align: left;
    }
  
  
    .checkout-form-message {
      max-width: 100%;
  
      overflow-wrap: break-word;
    }
  
  }