  <!-- Cart drawer (must be late in <body> so it never sits above the header in the hit-test order when closed) -->
  <div id="cart-drawer" class="cart-drawer" aria-hidden="true">
    <div class="cart-drawer__overlay" aria-label="Close cart"></div>
    <div class="cart-drawer__panel">
      <header class="cart-drawer__header">
        <button type="button" class="cart-drawer__back cart-drawer-close" aria-label="Close cart">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
        </button>
        <h2 class="cart-drawer__title">Cart</h2>
        <div class="cart-drawer__bag">
          <svg width="19" height="23" viewBox="0 0 19 23" fill="currentColor"><path d="M9.42 4C11.31 4 12.82 5.35 12.82 7v2.25H15v1.5h-2.18v1.5c0 .41-.34.75-.75.75h-.38v1.5H7.54v-1.5H6.03v1.5c0 .41-.34.75-.75.75s-.75-.34-.75-.75v-1.5H3.32L1.97 23.5h15.91L16.42 19.18V20.11l1.54.89.43 4-.02.18c-.02.18-.06.35-.14.5l-.06.08c-.14.16-.35.25-.56.25H1.13c-.21 0-.42-.09-.57-.25-.14-.16-.22-.37-.2-.58l.38-15.23c.04-.38.37-.67.75-.67h3.39V7C6.03 5.35 7.54 4 9.42 4z"/></svg>
          <span class="cart-drawer__count cart-count-number">0</span>
        </div>
      </header>
      <div class="cart-drawer__shipping">
        <div class="cart-drawer__progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="60">
          <div class="cart-drawer__progress-fill"></div>
        </div>
        <p class="cart-drawer__shipping-text">Spend <span class="cart-drawer__shipping-remaining">$60.00</span> more to unlock Free Shipping</p>
      </div>
      <div class="cart-drawer__items">
        <div class="cart-drawer__empty">Your cart is empty.</div>
        <div class="cart-drawer__list" style="display: none;"></div>
      </div>
      <footer class="cart-drawer__footer">
        <div class="cart-drawer__subtotal">
          <span>SUBTOTAL</span>
          <span class="cart-drawer__subtotal-value">$0.00</span>
        </div>
        <p class="cart-drawer__tax-note">Shipping &amp; taxes calculated at checkout</p>
        <a href="{{ route('checkout') }}" class="cart-drawer__checkout button button--primary button--full">CHECKOUT</a>
        <p class="cart-drawer__guarantee">100% Money Back Guarantee | Free Shipping on orders $60+</p>
      </footer>
    </div>
  </div>
