/* =========================================================
   MALUME CART — MOBILE EXPERIENCE
========================================================= */

@media (max-width: 680px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }


  /* =======================================================
     CART PAGE
  ======================================================= */

  .cart-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    padding:
      58px
      16px
      150px;

    overflow-x: hidden;
  }


  .cart-heading {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }


  .cart-heading h1 {
    max-width: 100%;

    font-size:
      clamp(
        3rem,
        14vw,
        4.6rem
      );

    line-height: 0.94;

    overflow-wrap: break-word;
  }


  .cart-heading-description {
    width: 100%;
    max-width: 100%;

    overflow-wrap: break-word;
  }


  /* =======================================================
     MAIN CART LAYOUT
  ======================================================= */

  .cart-layout {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    grid-template-columns:
      minmax(0, 1fr);

    gap: 24px;
  }


  .cart-layout > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }


  /* =======================================================
     CART ITEMS
  ======================================================= */

  .cart-items {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }


  .cart-item {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    grid-template-columns:
      82px
      minmax(0, 1fr);

    gap: 14px;

    padding: 14px;

    overflow: hidden;
  }


  .cart-item-visual {
    width: 82px;
    max-width: 82px;
    min-width: 0;

    min-height: 110px;
  }


  .cart-item-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }


  .cart-item-content h2,
  .cart-item-content p {
    max-width: 100%;

    overflow-wrap: break-word;
  }


  .cart-item-details {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    flex-wrap: wrap;

    gap:
      6px
      10px;
  }


  /* =======================================================
     QUANTITY / REMOVE
  ======================================================= */

  .cart-item-bottom {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    align-items: flex-start;
    flex-direction: column;

    gap: 12px;
  }


  .cart-quantity {
    grid-template-columns:
      36px
      40px
      36px;

    width: 112px;
    max-width: 100%;

    flex: 0 0 auto;
  }


  .remove-cart-item {
    max-width: 100%;
  }


  /* =======================================================
     ITEM PRICE
  ======================================================= */

  .cart-item-price {
    grid-column: 2;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    align-items: flex-start;

    gap: 4px;

    margin-top: 4px;

    text-align: left;
  }


  /* =======================================================
     ORDER SUMMARY
  ======================================================= */

  .cart-summary {
    position: static;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    padding: 20px;

    overflow: hidden;
  }


  .cart-summary-header {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    gap: 12px;
  }


  .cart-summary-header h2 {
    min-width: 0;
  }


  .cart-summary-header span {
    flex: 0 0 auto;
  }


  .cart-summary-row,
  .cart-summary-total {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    gap: 12px;
  }


  .cart-summary-row > span,
  .cart-summary-total > span {
    min-width: 0;
  }


  .cart-summary-row strong,
  .cart-summary-total strong {
    max-width: 55%;

    overflow-wrap: break-word;

    text-align: right;
  }


  /* =======================================================
     STICKY MOBILE CHECKOUT BUTTON
  ======================================================= */

  .checkout-button {
    position: fixed;

    left: 16px;
    right: 16px;
    bottom:
      calc(
        16px +
        env(safe-area-inset-bottom)
      );

    z-index: 1000;

    display: flex;

    width: auto;
    max-width: none;
    min-width: 0;

    min-height: 60px;

    margin: 0;

    padding:
      0
      22px;

    justify-content: center;
    align-items: center;

    gap: 10px;

    color: var(--color-white);
    background: var(--color-black);

    border:
      1px
      solid
      var(--color-black);

    border-radius: var(--radius-round);

    font-size: 0.82rem;
    font-weight: 700;

    white-space: normal;

    text-align: center;

    transform: none;

    touch-action: manipulation;

    box-shadow:
      0
      10px
      35px
      rgba(0, 0, 0, 0.16);
  }


  .checkout-button:hover {
    color: var(--color-white);
    background: var(--color-black);

    transform: none;
  }


  .checkout-button:active {
    transform: scale(0.98);
  }


  .checkout-button svg {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;
  }


  .checkout-button.disabled {
    pointer-events: none;

    opacity: 0.45;
  }


  /* =======================================================
     SECURITY MESSAGE
  ======================================================= */

  .cart-security {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    padding: 14px;
  }


  .cart-security p {
    min-width: 0;

    overflow-wrap: break-word;
  }


  /* =======================================================
     EMPTY CART
  ======================================================= */

  .empty-cart {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    padding:
      42px
      18px;

    overflow: hidden;
  }

}