/* ==========================================================
   Shopping cart page (checkout_cart_index), Milo & Luna palette:
   cream #fbf9f4, white cards, teal #1f7a68, red #a72122, DM Sans / DM Serif Display.
   Loaded from Magento_Checkout/layout/checkout_cart_index.xml (after home.css, which styles
   the "You may also like" cards). Overrides the old blue / green cart rules in custom.css;
   layout (column widths, mobile stacking) is kept as is.
   ========================================================== */

#html-body.checkout-cart-index,
#html-body.checkout-cart-index .page-wrapper,
#html-body.checkout-cart-index .page-main {
  background: #fbf9f4;
}

#html-body.checkout-cart-index .page-main {
  font-family: 'DM Sans', 'Lato', sans-serif;
  color: #3a3734;
}

/* ---------- Title ---------- */
#html-body.checkout-cart-index .cart-page-title h1 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
  color: #2b2b2b;
}

#html-body.checkout-cart-index .cart-page-title p {
  font-size: 14px;
  font-weight: 400;
  color: #666;
}

/* ---------- Items table (white card) ---------- */
#html-body.checkout-cart-index .cart.table-wrapper {
  padding: 6px 24px 4px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 16px;
  box-sizing: border-box;
}

#html-body.checkout-cart-index .cart.table-wrapper .cart thead tr th.col {
  font-size: 12px;
  font-weight: 700;
  line-height: 44px;
  color: #2b2b2b;
  border-bottom: 1px solid #ececec;
}

#html-body.checkout-cart-index .cart.table-wrapper .cart > .item {
  border-bottom: 1px solid #ececec;
}

#html-body.checkout-cart-index .cart.table-wrapper .cart > .item:last-child {
  border-bottom: 0;
}

#html-body.checkout-cart-index .cart.table-wrapper .cart tbody tr td {
  padding-top: 18px;
  padding-bottom: 18px;
}

#html-body.checkout-cart-index .cart.table-wrapper .product-image-wrapper {
  background: #f4f1ea;
  border-radius: 10px;
}

#html-body.checkout-cart-index .cart.table-wrapper .product-image-wrapper img.product-image-photo {
  color: transparent;
  border-radius: 10px;
}

#html-body.checkout-cart-index .cart.table-wrapper .product-item-details {
  margin-top: 0;
}

#html-body.checkout-cart-index .cart.table-wrapper .product-item-details .product-item-name a {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #1f7a68;
}

#html-body.checkout-cart-index .cart.table-wrapper .product-item-details .product-item-weight,
#html-body.checkout-cart-index .cart.table-wrapper .product-item-details .product-item-sku {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #666;
}

#html-body.checkout-cart-index .cart.table-wrapper .item-options {
  margin: 6px 0 0;
  font-size: 12px;
  color: #666;
}

#html-body.checkout-cart-index .cart.table-wrapper .item-options dt {
  font-weight: 600;
  color: #3a3734;
}

#html-body.checkout-cart-index .cart.table-wrapper .cart tbody td.col.price .cart-price .price {
  font-size: 15px;
  font-weight: 600;
  color: #2b2b2b;
}

#html-body.checkout-cart-index .cart.table-wrapper .cart tbody tr td.col.subtotal .cart-price .price {
  font-size: 15px;
  font-weight: 700;
  color: #1f7a68;
}

/* Qty stepper: same pill as the product page */
#html-body.checkout-cart-index .cart.table-wrapper .cart tbody tr td.col.qty .qty-field-wrapper {
  justify-content: space-between;
  max-width: 120px;
  height: 40px;
  padding: 0 6px;
  border: 1px solid #c9c9c9;
  border-radius: 30px;
  box-shadow: none;
}

#html-body.checkout-cart-index .cart.table-wrapper .cart tbody tr td.col.qty .field.qty input {
  width: 36px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: #2b2b2b;
  text-align: center;
  -moz-appearance: textfield;
}

#html-body.checkout-cart-index .cart.table-wrapper .cart tbody tr td.col.qty .field.qty input::-webkit-outer-spin-button,
#html-body.checkout-cart-index .cart.table-wrapper .cart tbody tr td.col.qty .field.qty input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

#html-body.checkout-cart-index .cart.table-wrapper .cart tbody tr td.col.qty .edit-qty button {
  width: 28px;
  height: 28px;
  background: transparent;
  border-radius: 50%;
  transition: background .2s;
}

/* Mouse only: touch screens keep :hover after a tap */
@media (hover: hover) {
  #html-body.checkout-cart-index .cart.table-wrapper .cart tbody tr td.col.qty .edit-qty button:hover {
    background: #f2f2f2;
  }
}

#html-body.checkout-cart-index .cart.table-wrapper .cart tbody tr td.col.qty .edit-qty.minus button:before,
#html-body.checkout-cart-index .cart.table-wrapper .cart tbody tr td.col.qty .edit-qty.plus button:before {
  font-family: 'DM Sans', 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: #2b2b2b;
}

#html-body.checkout-cart-index .cart.table-wrapper .cart tbody tr td.col.qty .edit-qty.minus button:before {
  content: '\2212';
}

#html-body.checkout-cart-index .cart.table-wrapper .cart tbody tr td.col.qty .edit-qty.plus button:before {
  content: '+';
}

/* Remove item */
#html-body.checkout-cart-index .cart.table-wrapper .actions-toolbar > .action-delete:before {
  color: #8a918d;
  transition: color .2s;
}

#html-body.checkout-cart-index .cart.table-wrapper .actions-toolbar > .action-delete:hover:before {
  color: #a72122;
}

/* ---------- Update Shopping Cart ---------- */
#html-body.checkout-cart-index .form-cart .actions .action.update {
  height: 40px;
  padding: 0 20px;
  font-family: 'DM Sans', 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1f7a68;
  background: #fff;
  border: 1.5px solid #1f7a68;
  border-radius: 30px;
  box-shadow: none;
  transition: background .2s, color .2s;
}

#html-body.checkout-cart-index .form-cart .actions .action.update:hover {
  color: #fff;
  background: #1f7a68;
  border-color: #1f7a68;
}

/* ---------- Totals ---------- */
#html-body.checkout-cart-index .cart-summary {
  background: transparent;
}

#html-body.checkout-cart-index .cart-summary .cart-totals tr th,
#html-body.checkout-cart-index .cart-summary .cart-totals tr td {
  font-size: 14px;
  font-weight: 500;
  line-height: 34px;
  color: #555;
}

#html-body.checkout-cart-index .cart-summary .cart-totals tr td .price {
  font-weight: 600;
  color: #2b2b2b;
}

#html-body.checkout-cart-index .cart-summary .cart-totals tr.grand.totals th,
#html-body.checkout-cart-index .cart-summary .cart-totals tr.grand.totals td,
#html-body.checkout-cart-index .cart-summary .cart-totals tr.grand.totals .price {
  font-size: 17px;
  font-weight: 700;
  color: #1f7a68;
}

#html-body.checkout-cart-index .cart-summary .cart-totals tr.grand.totals th,
#html-body.checkout-cart-index .cart-summary .cart-totals tr.grand.totals td {
  border-top: 1px solid #ececec;
}

/* ---------- Proceed to Checkout / Continue shopping ---------- */
#html-body.checkout-cart-index .cart-summary .checkout-methods-items .action.checkout,
#html-body.checkout-cart-index .cart-summary .checkout-methods-items .action.shopping-btn {
  width: auto;
  max-width: none;
  height: 46px;
  padding: 0 22px;
  font-family: 'DM Sans', 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 30px;
  box-shadow: none;
  transition: background .2s, color .2s, border-color .2s;
}

#html-body.checkout-cart-index .cart-summary .checkout-methods-items .action.checkout {
  color: #fff;
  background: #1f7a68;
  border: 1.5px solid #1f7a68;
}

#html-body.checkout-cart-index .cart-summary .checkout-methods-items .action.checkout:hover {
  color: #fff;
  background: #17614f;
  border-color: #17614f;
}

#html-body.checkout-cart-index .cart-summary .checkout-methods-items .action.checkout:after,
#html-body.checkout-cart-index .cart-summary .checkout-methods-items .action.checkout:hover:after {
  color: #fff;
}

#html-body.checkout-cart-index .cart-summary .checkout-methods-items .action.shopping-btn {
  color: #1f7a68;
  background: #fff;
  border: 1.5px solid #1f7a68;
}

#html-body.checkout-cart-index .cart-summary .checkout-methods-items .action.shopping-btn:before {
  color: #1f7a68;
}

#html-body.checkout-cart-index .cart-summary .checkout-methods-items .action.shopping-btn:hover {
  color: #fff;
  background: #1f7a68;
  border-color: #1f7a68;
}

#html-body.checkout-cart-index .cart-summary .checkout-methods-items .action.shopping-btn:hover:before {
  color: #fff;
}

/* ---------- Voucher (when enabled) ---------- */
#html-body.checkout-cart-index .coupon-summary-container .title #block-discount-heading {
  font-size: 15px;
  font-weight: 700;
  color: #2b2b2b;
}

#html-body.checkout-cart-index .cart-discount .content .fieldset.coupon .field input {
  font-size: 14px;
  color: #2b2b2b;
  border: 1px solid #c9c9c9;
  border-radius: 30px;
}

#html-body.checkout-cart-index .cart-discount .content .fieldset.coupon .actions-toolbar .action.apply,
#html-body.checkout-cart-index .cart-discount .content .fieldset.coupon .actions-toolbar .action.cancel {
  color: #1f7a68;
  background: #fff;
  border: 1.5px solid #1f7a68;
  border-radius: 30px;
  box-shadow: none;
}

#html-body.checkout-cart-index .cart-discount .content .fieldset.coupon .actions-toolbar .action.apply:hover,
#html-body.checkout-cart-index .cart-discount .content .fieldset.coupon .actions-toolbar .action.cancel:hover {
  color: #fff;
  background: #1f7a68;
}

/* ---------- "You may also like" (ml_items.phtml cards) ---------- */
/* .cart-container is a flex row: keep the cards below the totals (old .crosssell had order: 3) */
#html-body.checkout-cart-index .ml-pdp-products {
  order: 3;
  flex: 0 0 100%;
  width: 100%;
  max-width: 1160px;
  margin: 40px auto 30px;
  padding: 0;
  box-sizing: border-box;
}

#html-body.checkout-cart-index .ml-pdp-products-title {
  margin: 0 0 26px;
  font-family: 'DM Sans', 'Lato', sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: #1f7a68;
}

#html-body.checkout-cart-index .ml-pdp-products .home-best-sellers ol.product-items li.ml-card[hidden] {
  display: none !important;
}

#html-body.checkout-cart-index .ml-pdp-products .home-best-sellers .ml-card .actions-primary .action.tocart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}

#html-body.checkout-cart-index .ml-pdp-products .product-image-photo {
  color: transparent;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  #html-body.checkout-cart-index .cart-page-title h1 {
    font-size: 26px;
  }

  /* Mobile turns each item into its own card (custom.css) - drop the outer card */
  #html-body.checkout-cart-index .cart.table-wrapper {
    padding: 0;
    background: transparent;
    border: 0;
  }

  #html-body.checkout-cart-index .cart.table-wrapper .cart tbody.cart.item tr.item-info {
    border: 1px solid #ececec;
    border-radius: 16px;
    box-shadow: none;
  }

  #html-body.checkout-cart-index .cart.table-wrapper .cart tbody tr td:before {
    font-size: 12px;
    font-weight: 700;
    color: #2b2b2b;
  }

  #html-body.checkout-cart-index .cart.table-wrapper .actions-toolbar > .action-delete {
    font-size: 13px;
    color: #a72122;
    background: #fff;
    border: 1.5px solid #a72122;
    border-radius: 30px;
    box-shadow: none;
  }

  #html-body.checkout-cart-index .cart-summary .checkout-methods-items .action.checkout,
  #html-body.checkout-cart-index .cart-summary .checkout-methods-items .action.shopping-btn {
    width: 100%;
  }

  /* The cart page has no side padding on mobile: give everything the header's 15px gutter */
  #html-body.checkout-cart-index .ml-pdp-products {
    margin: 30px 0 24px;
    padding: 0 15px;
  }

  #html-body.checkout-cart-index .cart.table-wrapper .cart tbody.cart.item {
    padding-left: 15px;
    padding-right: 15px;
  }

  #html-body.checkout-cart-index .ml-pdp-products .home-best-sellers ol.product-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}