<header class="checkout-header">
    <div class="checkout-header__inner u-page-width-max-gutters">
        <a class="checkout-header__logo-wrapper" href="#">
      <img class="checkout-header__logo" src="/assets/images/mauijim-brand-logo.png" alt="Maui Jim logo">
    </a>
        <h1 class="checkout-header__title">
            <span class="checkout-header__title-label">Checkout</span>
            <svg class="icon icon--lock">
  <use xlink:href="/assets/icons/icons.svg#lock"></use>
</svg>

            <span class="checkout-header__cart-number">C014550633</span>
        </h1>
    </div>
    <a class="checkout-header__cart-link" href="#checkout-cart">
    <svg class="icon icon--cart-item">
  <use xlink:href="/assets/icons/icons.svg#cart-item"></use>
</svg>

  </a>
</header>

<div class="checkout-page--wrapper">
    <main id="main-section" class="main main--checkout u-page-width-max">
        <div class="l-checkout-forms">
            <div class="checkout-express">
                <h2 class="checkout-express__iframe-header">Express Checkout Options - Skip the Line</h2>
                <iframe class="checkout-express__iframe" src="../../assets/html/express-checkout.html" frameborder="0"></iframe>
            </div>

            <hr class="l-checkout-line">
            <div class="l-checkout-form">
                <form class="checkout-form checkout-form--addresses-edit-guest js-checkout-form js-checkout-form-addresses-edit-guest">
                    <span class="checkout-form__step-number checkout-form__step-number--present">1</span>
                    <div class="checkout-form__title">
                        <h4 class="checkout-form__title-embedded-heading">Shipping &amp; Billing Addresses</h4>
                        <span class="checkout-form__login-message">
      Have an account?
      <a href="#" class="checkout-form__login-link js-modal-open-link" data-modal-id="login">Login</a>
      to speed things up.
    </span>
                    </div>
                    <div class="checkout-form__form-items">
                        <div class="checkout-form__form-item-group js-checkout-form-item-group">
                            <div class="form-item form-item--text form-item--checkout-first-name form-item--required">
                                <label for="checkout-first-name" class="label label--text label--required">First Name</label>
                                <input type="text" id="checkout-first-name" name="first-name" class="input input--text" autocomplete="given-name">
                            </div>

                            <div class="form-item form-item--text form-item--checkout-last-name form-item--required">
                                <label for="checkout-last-name" class="label label--text label--required">Last Name</label>
                                <input type="text" id="checkout-last-name" name="last-name" class="input input--text" autocomplete="family-name">
                            </div>

                            <div class="form-item form-item--text form-item--checkout-company-name">
                                <label for="checkout-company-name" class="label label--text">Company Name or c/o</label>
                                <input type="text" id="checkout-company-name" name="company-name" class="input input--text" placeholder="Optional" autocomplete="organization">
                            </div>

                            <div class="form-item form-item--text form-item--checkout-address-1 form-item--required">
                                <label for="checkout-address-1" class="label label--text label--required">Address 1</label>
                                <input type="text" id="checkout-address-1" name="address-1" class="input input--text" autocomplete="address-line1">
                            </div>

                            <div class="form-item form-item--text form-item--checkout-address-2">
                                <label for="checkout-address-2" class="label label--text">Address 2</label>
                                <input type="text" id="checkout-address-2" name="address-2" class="input input--text" placeholder="Optional" autocomplete="address-line2">
                            </div>

                            <div class="form-item form-item--text form-item--checkout-city form-item--required">
                                <label for="checkout-city" class="label label--text label--required">City</label>
                                <input type="text" id="checkout-city" name="city" class="input input--text" autocomplete="address-level2">
                            </div>

                            <div class="form-item form-item--text form-item--checkout-zip form-item--required">
                                <label for="checkout-zip" class="label label--text label--required">Zip Code</label>
                                <input type="text" id="checkout-zip" name="zip" class="input input--text" autocomplete="postal-code">
                            </div>

                            <div class="form-item form-item--select form-item--required form-item--locked">
                                <label for="checkout-country" class="label label--required">Country</label>
                                <div class="select-wrapper">
                                    <select id="checkout-country" name="country" class="select js-select" autocomplete="country">
      <option value="USA">United States</option>
    </select>
                                </div>
                            </div>

                            <div class="form-item form-item--select form-item--required">
                                <label for="checkout-state" class="label label--required">State</label>
                                <div class="select-wrapper">
                                    <select id="checkout-state" name="state" class="select js-select" autocomplete="address-level1">
      <option value="">Select</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="AZ">Arizona</option>
      <option value="AR">Arkansas</option>
      <option value="CA">California</option>
      <option value="CO">Colorado</option>
    </select>
                                </div>
                            </div>

                            <div class="form-item form-item--email form-item--checkout-email form-item--required">
                                <label for="checkout-email" class="label label--email label--required">Email Address</label>
                                <input type="email" id="checkout-email" name="email" class="input input--email" placeholder="name@example.com" autocomplete="email">
                            </div>

                            <div class="form-item form-item--text form-item--checkout-phone form-item--required">
                                <label for="checkout-phone" class="label label--text label--required">Phone Number</label>
                                <input type="text" id="checkout-phone" name="phone" class="input input--text" placeholder="000-123-4567" autocomplete="tel">
                            </div>

                        </div>
                        <div class="checkout-form__form-item-group js-checkout-form-item-group">
                            <div class="form-item form-item--checkbox">
                                <input type="checkbox" id="checkout-billing-address-shipping" name="checkout-billing-address" class="checkbox checkbox--default" checked="true">
                                <label for="checkout-billing-address-shipping">
    Billing address same as shipping address
    
  </label>
                            </div>

                        </div>
                        <div class="checkout-form__form-item-group js-checkout-form-item-group js-hidden" data-toggle-id="checkout-billing-address-shipping" data-reverse-toggle="true">
                            <h5 class="checkout-form__form-item-group-title">Billing Address</h5>
                            <div class="form-item form-item--text form-item--checkout-first-name form-item--required">
                                <label for="checkout-first-name" class="label label--text label--required">First Name</label>
                                <input type="text" id="checkout-first-name" name="first-name" class="input input--text" autocomplete="given-name">
                            </div>

                            <div class="form-item form-item--text form-item--checkout-last-name form-item--required">
                                <label for="checkout-last-name" class="label label--text label--required">Last Name</label>
                                <input type="text" id="checkout-last-name" name="last-name" class="input input--text" autocomplete="family-name">
                            </div>

                            <div class="form-item form-item--text form-item--checkout-company-name">
                                <label for="checkout-company-name" class="label label--text">Company Name or c/o</label>
                                <input type="text" id="checkout-company-name" name="company-name" class="input input--text" placeholder="Optional" autocomplete="organization">
                            </div>

                            <div class="form-item form-item--text form-item--checkout-address-1 form-item--required">
                                <label for="checkout-address-1" class="label label--text label--required">Address 1</label>
                                <input type="text" id="checkout-address-1" name="address-1" class="input input--text" autocomplete="address-line1">
                            </div>

                            <div class="form-item form-item--text form-item--checkout-address-2">
                                <label for="checkout-address-2" class="label label--text">Address 2</label>
                                <input type="text" id="checkout-address-2" name="address-2" class="input input--text" placeholder="Optional" autocomplete="address-line2">
                            </div>

                            <div class="form-item form-item--text form-item--checkout-city form-item--required">
                                <label for="checkout-city" class="label label--text label--required">City</label>
                                <input type="text" id="checkout-city" name="city" class="input input--text" autocomplete="address-level2">
                            </div>

                            <div class="form-item form-item--text form-item--checkout-zip form-item--required">
                                <label for="checkout-zip" class="label label--text label--required">Zip Code</label>
                                <input type="text" id="checkout-zip" name="zip" class="input input--text" autocomplete="postal-code">
                            </div>

                            <div class="form-item form-item--select form-item--required">
                                <label for="checkout-country" class="label label--required">Country</label>
                                <div class="select-wrapper">
                                    <select id="checkout-country" name="country" class="select js-select" autocomplete="country">
      <option value="">Select</option>
      <option value="USA">United States</option>
      <option value="AUS">Australia</option>
      <option value="CAN">Canada</option>
      <option value="FRA">France</option>
      <option value="GER">Germany</option>
      <option value="HK">Hong Kong</option>
      <option value="IND">India</option>
      <option value="IRE">Ireland</option>
      <option value="ITA">Italy</option>
      <option value="MEX">Mexico</option>
      <option value="NZE">New Zealand</option>
      <option value="SAF">South Africa</option>
      <option value="SPA">Spain</option>
      <option value="SWE">Sweden</option>
      <option value="UAE">United Arab Emirates</option>
      <option value="UK">United Kingdom</option>
    </select>
                                </div>
                            </div>

                            <div class="form-item form-item--select form-item--required">
                                <label for="checkout-state" class="label label--required">State</label>
                                <div class="select-wrapper">
                                    <select id="checkout-state" name="state" class="select js-select" autocomplete="address-level1">
      <option value="">Select</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="AZ">Arizona</option>
      <option value="AR">Arkansas</option>
      <option value="CA">California</option>
      <option value="CO">Colorado</option>
    </select>
                                </div>
                            </div>

                            <div class="form-item form-item--text form-item--checkout-phone form-item--required">
                                <label for="checkout-phone" class="label label--text label--required">Phone Number</label>
                                <input type="text" id="checkout-phone" name="phone" class="input input--text" placeholder="000-123-4567" autocomplete="tel">
                            </div>

                        </div>
                        <div class="checkout-form__actions js-checkout-form-actions">
                            <button class="button button--primary">Next: Shipping Method &amp; Payment </button>

                        </div>
                    </div>
                </form>

            </div>
        </div>
        <div class="l-checkout-cart" id="checkout-cart">
            <div class="checkout-cart checkout-cart--default">
                <h4 class="checkout-cart__title">Order Summary</h4>
                <ul class="checkout-cart__items">
                    <li class="checkout-cart__item">
                        <table class="checkout-cart__item-details">
                            <tr>
                                <td><img class="checkout-cart__item-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;120" alt="Gloss Black"></td>
                                <td class="checkout-cart__item-qty"><strong>Qty:</strong> 1</td>
                                <td class="checkout-cart__item-price">
                                    $149.00
                                    <div class="checkout-cart__item-tax-info">
                                        <span class="checkout-cart__item-tax-value">Inkl. MWST</span>
                                    </div>
                                </td>
                            </tr>
                        </table>
                        <div class="checkout-cart__item-info-group">
                            <span class="checkout-cart__item-name"><strong>PEAHI</strong> - 202-02</span>
                            <span class="checkout-cart__item-info">Gloss Black</span>
                            <span class="checkout-cart__item-info">Neutral Grey | SuperThin Glass</span>
                            <span class="checkout-cart__item-info">Single Gradient</span>
                        </div>
                    </li>
                    <li class="checkout-cart__item">
                        <table class="checkout-cart__item-details">
                            <tr>
                                <td><img class="checkout-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;120" alt="Olive Stripe"></td>
                                <td class="checkout-cart__item-qty"><strong>Qty:</strong> 1</td>
                                <td class="checkout-cart__item-price">
                                    $219.00
                                    <div class="checkout-cart__item-tax-info">
                                        <span class="checkout-cart__item-tax-value">Inkl. MWST</span>
                                    </div>
                                    <div class="checkout-cart__item-vip-info">
                                        <span class="checkout-cart__item-vip-card-value">VIP Card 30%</span>
                                        <span class="checkout-cart__item-vip-original-price">$319.00</span>
                                    </div>
                                </td>
                            </tr>
                        </table>
                        <div class="checkout-cart__item-info-group">
                            <span class="checkout-cart__item-name"><strong>WATERWAYS</strong> - HTS267-15C</span>
                            <span class="checkout-cart__item-info">Olive Stripe</span>
                            <span class="checkout-cart__item-info">Maui HT™ | SuperThin Glass</span>
                            <span class="checkout-cart__item-info">Single Gradient</span>
                        </div>
                    </li>
                    <li class="checkout-cart__item">
                        <table class="checkout-cart__item-details">
                            <tr>
                                <td><img class="checkout-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;120" alt="Tortoise with Antique Gold"></td>
                                <td class="checkout-cart__item-qty"><strong>Qty:</strong> 1</td>
                                <td class="checkout-cart__item-price">
                                    $299.00
                                    <div class="checkout-cart__item-vip-info">
                                        <span class="checkout-cart__item-vip-card-value">VIP Card 30%</span>
                                        <span class="checkout-cart__item-vip-original-price">$319.00</span>
                                    </div>
                                </td>
                            </tr>
                        </table>
                        <div class="checkout-cart__item-info-group">
                            <span class="checkout-cart__item-name"><strong>KAWIKA</strong> - H257-16C</span>
                            <span class="checkout-cart__item-info">Tortoise with Antique Gold</span>
                            <span class="checkout-cart__item-info">HCL® Bronze | MauiPure</span>
                            <span class="checkout-cart__item-info">Single Gradient</span>
                        </div>
                    </li>
                    <li class="checkout-cart__item">
                        <table class="checkout-cart__item-details">
                            <tr>
                                <td><img class="checkout-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;120" alt="Tortoise"></td>
                                <td class="checkout-cart__item-qty"><strong>Qty:</strong> 1</td>
                                <td class="checkout-cart__item-price">
                                    $219.00
                                </td>
                            </tr>
                        </table>
                        <div class="checkout-cart__item-info-group">
                            <span class="checkout-cart__item-name"><strong>VOYAGER</strong> - H178-10</span>
                            <span class="checkout-cart__item-info">Tortoise</span>
                            <span class="checkout-cart__item-info">HCL® Bronze | SuperThin Glass</span>
                            <span class="checkout-cart__item-info">Single Gradient</span>
                        </div>
                    </li>
                    <li class="checkout-cart__item">
                        <table class="checkout-cart__item-details">
                            <tr>
                                <td><img class="checkout-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/RS708-26D_front?$config1800$&amp;wid&#x3D;120" alt="Brown Feathered"></td>
                                <td class="checkout-cart__item-qty"><strong>Qty:</strong> 1</td>
                                <td class="checkout-cart__item-price">
                                    $299.00
                                </td>
                            </tr>
                        </table>
                        <div class="checkout-cart__item-info-group">
                            <span class="checkout-cart__item-name"><strong>LEIA</strong> - RS708-26D</span>
                            <span class="checkout-cart__item-info">Brown Feathered</span>
                            <span class="checkout-cart__item-info">Maui Rose® | SuperThin Glass</span>
                            <span class="checkout-cart__item-info">Single Gradient</span>
                        </div>
                    </li>
                    <li class="checkout-cart__item">
                        <table class="checkout-cart__item-details">
                            <tr>
                                <td><img class="checkout-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H711-18_front?$config1800$&amp;wid&#x3D;120" alt="Copper"></td>
                                <td class="checkout-cart__item-qty"><strong>Qty:</strong> 1</td>
                                <td class="checkout-cart__item-price">
                                    $279.00
                                </td>
                            </tr>
                        </table>
                        <div class="checkout-cart__item-info-group">
                            <span class="checkout-cart__item-name"><strong>KOHALA</strong> - H711-18</span>
                            <span class="checkout-cart__item-info">Copper</span>
                            <span class="checkout-cart__item-info">HCL® Bronze | MauiPure</span>
                            <span class="checkout-cart__item-info">Single Gradient</span>
                        </div>
                    </li>
                    <li class="checkout-cart__item">
                        <table class="checkout-cart__item-details">
                            <tr>
                                <td><img class="checkout-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H706-16C_front?$config1800$&amp;wid&#x3D;120" alt="Antique Gold"></td>
                                <td class="checkout-cart__item-qty"><strong>Qty:</strong> 1</td>
                                <td class="checkout-cart__item-price">
                                    $329.00
                                </td>
                            </tr>
                        </table>
                        <div class="checkout-cart__item-info-group">
                            <span class="checkout-cart__item-name"><strong>STILLWATER</strong> - H706-16C</span>
                            <span class="checkout-cart__item-info">Antique Gold</span>
                            <span class="checkout-cart__item-info">HCL® Bronze | SuperThin Glass</span>
                            <span class="checkout-cart__item-info">Single Gradient</span>
                        </div>
                    </li>
                </ul>
                <div class="checkout-cart__footer">
                    <ul class="checkout-cart__totals">
                        <li class="checkout-cart__totals-item">
                            <span class="checkout-cart__totals-label">Subtotal (7):</span>
                            <span class="checkout-cart__totals-value">$1,389.97</span>
                        </li>
                        <li class="checkout-cart__totals-item">
                            <span class="checkout-cart__totals-label">Gift Bag (1):</span>
                            <span class="checkout-cart__totals-value">$3.99</span>
                        </li>
                        <li class="checkout-cart__totals-item">
                            <span class="checkout-cart__totals-label">Gift Card:</span>
                            <span class="checkout-cart__totals-value">- $300.00</span>
                        </li>
                        <li class="checkout-cart__totals-item">
                            <span class="checkout-cart__totals-label">Est. Tax:</span>
                            <span class="checkout-cart__totals-value checkout-cart__totals-value--tbd">Based on Shipping Information</span>
                        </li>
                        <li class="checkout-cart__totals-item">
                            <span class="checkout-cart__totals-label">Delivery:</span>
                            <span class="checkout-cart__totals-value checkout-cart__totals-value--tbd">Based on Shipping Method</span>
                        </li>
                        <li class="checkout-cart__totals-item checkout-cart__totals-item--total">
                            <span class="checkout-cart__totals-label">Total:</span>
                            <span class="checkout-cart__totals-value">$1,206.30</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="l-shopping-cart-secondary">
                <div class="l-shopping-cart-payment-faqs">
                    <div class="payment-faqs js-payment-faqs">
                        <h2 class="payment-faqs__title">FAQs</h2>
                        <div class="payment-faqs__content-wrapper js-payment-faqs-content-wrapper js-payment-faqs-content-wrapper--active">
                            <button class="payment-faqs__control js-payment-faqs-control">
      Security Payment
      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

    </button>
                            <div class="payment-faqs__content">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum enim velit, id sagittis enim consequat sed. Curabitur ante nisi, posuere vitae velit et, posuere laoreet lectus.
                                <ul class="payment-faqs__payment-methods">
                                    <li class="payment-faqs__payment-method"><img class="payment-method payment-method--visa" src="/assets/images/payment-method-visa.png" alt="">
                                    </li>
                                    <li class="payment-faqs__payment-method"><img class="payment-method payment-method--mastercard" src="/assets/images/payment-method-mastercard.png" alt="">
                                    </li>
                                    <li class="payment-faqs__payment-method"><img class="payment-method payment-method--amex" src="/assets/images/payment-method-amex.png" alt="">
                                    </li>
                                    <li class="payment-faqs__payment-method"><img class="payment-method payment-method--discover" src="/assets/images/payment-method-discover.png" alt="">
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="payment-faqs__content-wrapper js-payment-faqs-content-wrapper">
                            <button class="payment-faqs__control js-payment-faqs-control">
      Can We Help?
      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

    </button>
                            <div class="payment-faqs__content">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum enim velit, id sagittis enim consequat sed. Curabitur ante nisi, posuere vitae velit et, posuere laoreet lectus.
                            </div>
                        </div>
                        <div class="payment-faqs__content-wrapper js-payment-faqs-content-wrapper">
                            <button class="payment-faqs__control js-payment-faqs-control">
      Conditions of Sale
      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

    </button>
                            <div class="payment-faqs__content">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum enim velit, id sagittis enim consequat sed. Curabitur ante nisi, posuere vitae velit et, posuere laoreet lectus.
                            </div>
                        </div>
                        <div class="payment-faqs__content-wrapper js-payment-faqs-content-wrapper">
                            <button class="payment-faqs__control js-payment-faqs-control">
      Free Shipping and Returns
      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

    </button>
                            <div class="payment-faqs__content">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum enim velit, id sagittis enim consequat sed. Curabitur ante nisi, posuere vitae velit et, posuere laoreet lectus.
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </main>
</div>
{{render (dynamicComponent header)}}
<div class="checkout-page--wrapper">
  <main id="main-section" class="main main--checkout u-page-width-max">
    <div class="l-checkout-forms">
      {{#if message}}
      <div class="l-global-messages">
        {{render (dynamicComponent message.component) message}}
      </div>
      {{/if}}
      {{#if express}}
      {{render (dynamicComponent express)}}
      <hr class="l-checkout-line">
      {{/if}}
      {{#each formItems}}
      <div class="l-checkout-form">
        {{render (dynamicVariant component variant) context merge=true}}
      </div>
      {{/each}}
    </div>
    <div class="l-checkout-cart" id="checkout-cart">
      {{render (dynamicComponent cart)}}
      <div class="l-shopping-cart-secondary">
        <div class="l-shopping-cart-payment-faqs">
          {{render '@payment-faqs'}}
        </div>
      </div>
    </div>
  </main>
</div>
{
  "pageCss": [
    "checkout"
  ],
  "header": "checkout-header--maui-jim",
  "cart": "checkout-cart",
  "express": "checkout-express",
  "formItems": [
    {
      "component": "checkout-form",
      "variant": "addresses-edit-guest"
    }
  ],
  "pageModals": [
    {
      "component": "form-modal--login"
    },
    {
      "component": "form-modal--reset-password"
    }
  ]
}
  • Content:
    // Note: This entire stylesheet is served as critical CSS.
    /* critical:start */
    .checkout-page--wrapper {
      @include breakpoint($breakpoint-md) {
        padding: 50px;
        background-color: $color-lighter;
      }
    }
    
    .main--checkout {
      @include breakpoint($breakpoint-md) {
        padding: 20px 10px 0;
        background-color: transparent;
      }
    
      @include breakpoint($page-width-checkout-max) {
        padding-right: 0;
      }
    
      .l-global-messages {
        & ~ .l-checkout-forms {
          padding-top: 0;
        }
    
        @include breakpoint($breakpoint-md) {
          margin: 0;
          padding: 0 50px;
          float: none;
          clear: both;
        }
    
        @include breakpoint($page-width-checkout-max) {
          padding: 0;
    
          & ~ .l-checkout-cart {
            padding-top: 0;
          }
        }
      }
    }
    
    .l-checkout-line {
      display: block;
      height: 1px;
      margin: 0 0 1rem;
      padding: 0;
      border: 0;
      border-top: 1px solid $color-light;
    }
    
    .l-checkout-forms,
    .l-checkout-cart {
      padding: 0 $gutter-width-half;
    
      @include breakpoint($breakpoint-md) {
        padding: 20px 50px 0;
      }
    }
    
    .l-checkout-forms {
      @include clearfix;
    
      @include breakpoint($breakpoint-md) {
        background-color: $color-white;
      }
    
      @include breakpoint($page-width-checkout-max) {
        @include span(8);
        padding-right: 40px;
        padding-left: 40px;
      }
    }
    
    .l-checkout-form {
      margin-bottom: 50px;
    }
    
    .l-checkout-cart {
      margin-bottom: 50px;
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 120px;
        background-color: $color-white;
      }
    
      @include breakpoint($page-width-checkout-max) {
        @include span(4);
        margin-bottom: 0;
        margin-left: 0;
        padding-top: 0;
        padding-right: 70px;
        padding-left: 20px;
        background: $color-lighter;
    
        .checkout-cart__items {
          padding: 15px;
          background-color: $color-white;
        }
    
        .checkout-cart__footer {
          padding: 0 15px 10px;
          background-color: $color-white;
          font-size: 2rem;
        }
      }
    
      .l-shopping-cart-secondary {
        width: 100%;
      }
    
      .l-shopping-cart-payment-faqs {
        width: 100%;
      }
    
      .payment-faqs__title,
      .payment-faqs__control {
        font-size: 1.6rem;
      }
    
      .payment-faqs__content {
        font-size: 1.4rem;
      }
    }
    
    .checkout-form--upcoming-step {
      .checkout-form__step-number,
      .checkout-form__title {
        color: $color-light;
      }
    }
    /* critical:end */
    
  • URL: /components/raw/checkout-page/checkout-page.scss
  • Filesystem Path: src/components/03-pages/checkout-page/checkout-page.scss
  • Size: 2.3 KB

There are no notes for this item.