/* Option-delete icon control + mobile viewport horizontal lock. */
.cart-item [data-cart-remove] {
  display: none !important;
}

.cart-option-runtime-remove-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #737373 !important;
  background: transparent !important;
  font-family: Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.cart-option-runtime-remove-button:hover:not(:disabled),
.cart-option-runtime-remove-button:focus-visible:not(:disabled) {
  color: var(--red) !important;
  background: #f7f7f8 !important;
  outline: 0;
}

.cart-option-runtime-remove-button:disabled {
  cursor: default;
  opacity: .42;
}

.cart-option-runtime-remove-button.is-removing {
  font-size: 18px !important;
}

@media (max-width: 767px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
  }

  body,
  #app,
  #main-content,
  .site-header,
  .page-shell,
  .cart-page,
  .cart-page > .container,
  .cart-layout,
  .cart-main,
  .cart-item,
  .cart-product,
  .cart-product-info,
  .cart-option-strip,
  .cart-option-runtime-list,
  .cart-option-runtime-item,
  .cart-option-runtime-row,
  .cart-summary,
  .mobile-dock {
    max-width: 100%;
    min-width: 0;
  }

  #app {
    width: 100%;
    overflow-x: hidden;
  }

  .cart-option-runtime-row {
    grid-template-columns: minmax(0, 1fr) 34px 34px !important;
    grid-template-areas:
      "name name name"
      "qty memo remove" !important;
  }

  .cart-option-runtime-remove-button {
    grid-area: remove;
    justify-self: end;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    font-size: 25px !important;
  }

  /* Keep intentionally scrollable inner rails working while the viewport stays fixed. */
  .listing-breadcrumb,
  .mypage-nav,
  .order-steps,
  .spot-cards,
  .feature-matrix,
  .product-tabs,
  .point-table-scroll,
  .data-table {
    max-width: 100%;
  }

  .listing-breadcrumb {
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
}