/**
 * cart.css
 */

/* Layout: CartPage, narrower than the main container on desktop */
.shop-page.is-cart {
  max-width: var(--cart-page-width);
}

/* Layout: CartPage, the lines and totals on the product sections' grid */
.cart-page-layout {
  display: grid;
  grid-template-columns: var(--section-columns);
  gap: var(--section-gap);
  align-items: start;
}

.cart-page-body {
  transition: opacity 0.2s ease-out;

  &:focus {
    outline: none;
  }

  &.is-loading {
    opacity: 0.5;
    pointer-events: none;
  }

  /* The empty state fills the height like it does on the archives. */
  &.is-empty .empty-state {
    min-height: 50vh;
  }
}

/* Component: CartPage Lines, the header's rows with more room */
.cart-page-form {
  min-width: 0;

  .cart-items {
    overflow: visible;
    border-top: 1px solid var(--color-white-dark);
  }

  .cart-items-row {
    border-bottom: 1px solid var(--color-white-dark);
  }

  .cart-items-row + .cart-items-row {
    border-top: none;
  }

  article.cart-item {
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 24px;
    padding: 20px 0;

    .cart-item-title {
      font-size: var(--font-size-body);
    }

    .cart-item-price {
      font-size: var(--font-size-medium);
    }
  }
}

/* Component: CartPage Actions */
.cart-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;

  .cart-page-coupon {
    display: flex;
    flex: 1 1 320px;
    gap: 8px;
    max-width: 420px;

    input.input-text {
      flex: 1;
      min-width: 0;
    }
  }
}

/* Component: CartPage Summary */
.cart-page-summary {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: calc(var(--header-offset) + 24px);
  min-width: 0;

  .cart_totals {
    padding: 24px;
    border: 1px solid var(--color-grey-light);
    border-radius: var(--border-radius-default);
    background: var(--color-white);
  }

  .cart-page-summary-title {
    margin-bottom: 8px;
    font-size: var(--font-size-h3);
  }

  .wc-proceed-to-checkout {
    margin-top: 20px;
  }
}

/* Component: CrossSells, the upsells' compact cards in a grid */
.cross-sells {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--color-grey-light);

  .cross-sells-title {
    font-size: var(--font-size-h3);
  }

  .cross-sells-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cross-sells-item {
    height: 56px;
    min-width: 0;
  }
}

/* Tablet: CartPage */
@media (max-width: 1024px) {
  .cart-page-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-page-summary {
    position: static;
  }
}

/* Mobile: CartPage */
@media (max-width: 767px) {
  .cart-page-form article.cart-item {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 16px;
  }

  .cart-page-summary .cart_totals {
    padding: 16px;
  }

  .cross-sells .cross-sells-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-page-body {
    transition: none;
  }
}