/* =========================================================
   SP — CART PAGE STYLING
   Design language: Matches Equipment page and VPB
   - Typography: SF Pro, matching equipment grid
   - Colors: #1A1A1A (text), #6E6E6E (muted)
   - Border radius: 10px
   - Border color: #ECECEC
   ========================================================= */

/* =========================================================
   0) Hide Default WooCommerce "Cart Updated" Notice
   ========================================================= */

/* Hide cart updated notices immediately - prevent page movement */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-notice{
  /* Hide all notices - JS will show toast instead */
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Show empty cart message (but style it) */
body.woocommerce-cart .cart-empty.woocommerce-info,
body.woocommerce-cart .wc-empty-cart-message{
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* =========================================================
   0.1) Toast Notification (matching Equipment page)
   ========================================================= */

/* Toast host (top-right) - positioned below menu bar */
#sp-toast-host{
  position: fixed !important;
  top: 80px !important;  /* Moved down below menu bar */
  right: 16px !important;
  z-index: 999999 !important;
  display: grid;
  gap: 10px;
  width: min(280px, calc(100vw - 32px));
  pointer-events: none;  /* Don't interfere with page layout */
  margin: 0 !important;
  padding: 0 !important;
}

/* Allow pointer events on toast itself */
#sp-toast-host .sp-toast{
  pointer-events: auto;
}

/* Toast card - white background, black text */
.sp-toast{
  position: relative;
  background: #fff !important;
  color: #000 !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 14px;
  padding: 14px 14px 14px 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.15) !important;
  overflow: hidden;
  transform: translateY(0);
  opacity: 1;
  transition: opacity .22s ease, transform .22s ease;
}

.sp-toast.is-hiding{
  opacity: 0;
  transform: translateY(-6px);
}

.sp-toast-body h4{
  margin: 0 !important;  /* No bottom margin since there's no subline */
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #000 !important;
}

/* No paragraph/subline for cart toast */
.sp-toast-body p{
  display: none !important;
}

.sp-toast-close{
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: 0;
  color: rgba(0,0,0,.65) !important;
  font-size: 16px !important;  /* Smaller than equipment page (18px) */
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.sp-toast-close:hover{
  color: rgba(0,0,0,1) !important;  /* Full black on hover */
  background-color: #fff !important;  /* White background on hover */
  opacity: 1 !important;
}

/* Design tokens (matching Equipment page design language) */
body.woocommerce-cart{
  --sp-max: 1200px;
  --sp-pad: 32px;
  --sp-gap: 28px;
  
  --sp-text: #1A1A1A;
  --sp-muted: #6E6E6E;
  --sp-line: #ECECEC;
  --sp-card: #FFF;
  
  --sp-radius: 10px;
  --sp-shadow: 0 8px 18px rgba(0,0,0,.08);
}

/* Container max-width */
body.woocommerce-cart .woocommerce{
  max-width: var(--sp-max) !important;
  margin: 0 auto;
  padding: 0 var(--sp-pad) 60px !important;
}

/* Reduce top padding/margin to move cart table higher */
body.woocommerce-cart .woocommerce-cart-form{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.woocommerce-cart .woocommerce-cart-form table.shop_table{
  margin-top: 0 !important;
}

/* =========================================================
   0) Hide Cart Title
   ========================================================= */

body.woocommerce-cart .entry-title,
body.woocommerce-cart h1.entry-title,
body.woocommerce-cart .page-title,
body.woocommerce-cart h1.page-title,
body.woocommerce-cart .woocommerce-cart h1,
body.woocommerce-cart .woocommerce h1{
  display: none !important;
}

/* =========================================================
   0.5) Hide Coupon Section
   ========================================================= */

body.woocommerce-cart .woocommerce .coupon,
body.woocommerce-cart .woocommerce-cart-form .coupon,
body.woocommerce-cart .woocommerce-cart-form .actions .coupon{
  display: none !important;
}

/* =========================================================
   1) Cart Table Styling
   ========================================================= */

/* Cart table */
body.woocommerce-cart .woocommerce-cart-form table.shop_table{
  border: 1px solid var(--sp-line) !important;
  border-radius: var(--sp-radius) !important;
  background: var(--sp-card) !important;
  box-shadow: var(--sp-shadow) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
}

/* Table header */
body.woocommerce-cart .woocommerce-cart-form table.shop_table thead th{
  background: var(--sp-card) !important;
  border-bottom: 1px solid var(--sp-line) !important;
  padding: 12px 16px !important;
  font-size: 12px !important;
  font-weight: 590 !important;
  color: var(--sp-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  font-family: "SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
}

/* Table rows - make smaller */
body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr{
  border-bottom: 1px solid var(--sp-line) !important;
}

body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr:last-child{
  border-bottom: none !important;
}

/* Table cells - reduced padding */
body.woocommerce-cart .woocommerce-cart-form table.shop_table td{
  padding: 12px 16px !important;
  vertical-align: middle !important;
}

/* =========================================================
   2) Product Name - Match Equipment Grid Font
   ========================================================= */

body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-name,
body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-name a{
  font-size: 14px !important;   /* match equipment grid product card */
  font-weight: 800 !important;  /* match equipment grid product card */
  line-height: 1.1 !important;  /* match equipment grid product card */
  font-family: "SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  color: var(--sp-text) !important;
  text-decoration: none !important;
}

body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-name a:hover{
  opacity: 0.8;
}

/* =========================================================
   3) Hide Dates from Line Items
   ========================================================= */

/* Hide rental period dates from cart items */
body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-name dl.variation,
body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-name .wc-item-meta,
body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-name .variation{
  display: none !important;
}

/* Hide any date-related meta data */
body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-name dt.variation-RentalPeriod,
body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-name dt.variation-Rental,
body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-name dt.variation-Dates,
body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-name dt.variation-Date{
  display: none !important;
}

body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-name dd.variation-RentalPeriod,
body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-name dd.variation-Rental,
body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-name dd.variation-Dates,
body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-name dd.variation-Date{
  display: none !important;
}

/* =========================================================
   4) Product Thumbnail - Smaller
   ========================================================= */

body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-thumbnail img{
  width: 50px !important;
  height: 50px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
}

/* =========================================================
   5) Price, Quantity, Subtotal - Smaller Font
   ========================================================= */

body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-price,
body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-quantity,
body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-subtotal{
  font-size: 14px !important;
  font-family: "SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  color: var(--sp-text) !important;
}

body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-subtotal{
  font-weight: 590 !important;
}

/* Quantity input - smaller */
body.woocommerce-cart .woocommerce-cart-form table.shop_table .quantity input.qty{
  width: 60px !important;
  padding: 6px 8px !important;
  font-size: 14px !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 6px !important;
}

/* =========================================================
   6) Remove Button - Black Trash Icon (EXACTLY matching VPB)
   ========================================================= */

/* Hide the cross character (×) completely - EXACTLY matching VPB */
body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-remove a.remove{
  width: 40px !important;  /* match VPB exactly */
  height: 40px !important;  /* match VPB exactly */
  font-size: 0 !important;  /* Hide the original cross character */
  line-height: 0 !important;
  background: transparent !important;
  border: none !important;
  color: transparent !important;  /* Make text invisible */
  position: relative !important;
  display: block !important;
  text-decoration: none !important;
  overflow: visible !important;
  text-shadow: none !important;
  /* Move text completely off-screen */
  text-indent: -9999px !important;
  white-space: nowrap !important;
}

/* Hide any child elements that might contain the × */
body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-remove a.remove *,
body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-remove a.remove::after{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  font-size: 0 !important;
  content: none !important;
}

/* Replace cross with trash icon - EXACTLY matching VPB */
body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-remove a.remove::before{
  content: "" !important;
  display: block !important;
  width: 18px !important;  /* match VPB exactly */
  height: 18px !important;  /* match VPB exactly */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;  /* Don't block clicks on parent link */
  /* Reset text-indent for ::before so it displays correctly */
  text-indent: 0 !important;
}

body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-remove a.remove:hover:not(:disabled){
  background: transparent !important;
  opacity: 0.7 !important;
}

/* =========================================================
   7) Hide "You may be interested in" / Cross-sells Section
   ========================================================= */

body.woocommerce-cart .woocommerce .cross-sells,
body.woocommerce-cart .woocommerce .cart-collaterals .cross-sells,
body.woocommerce-cart .woocommerce section.cross-sells,
body.woocommerce-cart .woocommerce .cross-sells h2,
body.woocommerce-cart .woocommerce h2.cross-sells-title,
body.woocommerce-cart .woocommerce .cart-collaterals > .cross-sells,
body.woocommerce-cart .woocommerce .cart-collaterals .cross-sells{
  display: none !important;
}

/* =========================================================
   8) Cart Totals / Collaterals - Match Design Language
   ========================================================= */

body.woocommerce-cart .woocommerce .cart-collaterals{
  margin-top: var(--sp-gap) !important;
}

body.woocommerce-cart .woocommerce .cart_totals{
  border: 1px solid var(--sp-line) !important;
  border-radius: var(--sp-radius) !important;
  background: var(--sp-card) !important;
  box-shadow: var(--sp-shadow) !important;
  padding: 20px !important;
}

body.woocommerce-cart .woocommerce .cart_totals h2{
  font-size: 20px !important;
  font-weight: 590 !important;
  font-family: "SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  color: var(--sp-text) !important;
  margin: 0 0 16px 0 !important;
}

body.woocommerce-cart .woocommerce .cart_totals table{
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
}

body.woocommerce-cart .woocommerce .cart_totals table th,
body.woocommerce-cart .woocommerce .cart_totals table td{
  padding: 8px 0 !important;
  border: none !important;
  font-size: 14px !important;
  font-family: "SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
}

body.woocommerce-cart .woocommerce .cart_totals table th{
  font-weight: 510 !important;
  color: var(--sp-muted) !important;
}

body.woocommerce-cart .woocommerce .cart_totals table td{
  font-weight: 590 !important;
  color: var(--sp-text) !important;
  text-align: right !important;
}

body.woocommerce-cart .woocommerce .cart_totals table .order-total th,
body.woocommerce-cart .woocommerce .cart_totals table .order-total td{
  border-top: 1px solid var(--sp-line) !important;
  padding-top: 12px !important;
  font-weight: 590 !important;
  font-size: 16px !important;
}

/* =========================================================
   9) Checkout Button - Match VPB Button Style
   ========================================================= */

body.woocommerce-cart .woocommerce .cart_totals .checkout-button,
body.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button{
  width: 100% !important;
  padding: 12px 16px !important;
  border-radius: var(--sp-radius) !important;
  border: 1px solid var(--sp-line) !important;
  background: #111111 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  text-align: center !important;
  text-decoration: none !important;
  display: block !important;
  margin-top: 16px !important;
}

body.woocommerce-cart .woocommerce .cart_totals .checkout-button:hover,
body.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button:hover{
  opacity: 0.92 !important;
}

/* =========================================================
   10) Update Cart Button - Match Design
   ========================================================= */

body.woocommerce-cart .woocommerce .cart .button[name="update_cart"]{
  padding: 10px 16px !important;
  border-radius: var(--sp-radius) !important;
  border: 1px solid var(--sp-line) !important;
  background: #111111 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

body.woocommerce-cart .woocommerce .cart .button[name="update_cart"]:hover{
  opacity: 0.92 !important;
}

/* =========================================================
   10.1) Clear Cart Button - Match Update Cart Button Styling
   ========================================================= */

body.woocommerce-cart .woocommerce .cart .button.sp-clear-cart-btn{
  padding: 10px 16px !important;
  border-radius: var(--sp-radius) !important;
  border: 1px solid var(--sp-line) !important;
  background: #d32f2f !important;  /* Red background */
  color: #fff !important;  /* White text */
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  margin-left: 12px !important;  /* Space between buttons */
}

body.woocommerce-cart .woocommerce .cart .button.sp-clear-cart-btn:hover{
  opacity: 0.92 !important;
}

/* =========================================================
   10.2) Clear Cart Modal/Popup
   ========================================================= */

.sp-clear-cart-modal{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  z-index: 9999999;
  align-items: center;
  justify-content: center;
}

.sp-clear-cart-modal.is-open{
  display: flex;
}

.sp-clear-cart-modal-content{
  background: #fff;
  border-radius: 14px;
  padding: 32px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  position: relative;
}

/* Modal close button - matching toast close button */
.sp-clear-cart-modal-close{
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: 0;
  color: rgba(0,0,0,.65) !important;
  font-size: 16px !important;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.sp-clear-cart-modal-close:hover{
  color: rgba(0,0,0,1) !important;
  background-color: #fff !important;
  opacity: 1 !important;
}

.sp-clear-cart-modal-title{
  font-size: 20px;
  font-weight: 590;
  font-family: "SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color: #1A1A1A;
  margin: 0 0 16px 0;
}

.sp-clear-cart-modal-message{
  font-size: 14px;
  line-height: 1.5;
  font-family: "SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color: #6E6E6E;
  margin: 0 0 24px 0;
}

.sp-clear-cart-modal-buttons{
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.sp-clear-cart-modal-btn{
  padding: 10px 16px !important;
  border-radius: 10px !important;
  border: 1px solid #ECECEC !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.sp-clear-cart-modal-btn:hover{
  opacity: 0.92 !important;
}

.sp-clear-cart-modal-btn-yes{
  background: #d32f2f !important;
  color: #fff !important;  /* White text */
}

.sp-clear-cart-modal-btn-no{
  background: #111111 !important;
  color: #fff !important;
}

/* =========================================================
   11) Date Picker Pills - Match VPB Exactly
   ========================================================= */

/* Date picker input fields - match VPB pill styling */
body.woocommerce-cart input[type="date"],
body.woocommerce-cart input[type="datetime-local"],
body.woocommerce-cart input[type="text"].date-picker,
body.woocommerce-cart .date-picker,
body.woocommerce-cart .woocommerce input[type="date"],
body.woocommerce-cart .woocommerce input[type="datetime-local"],
body.woocommerce-cart .woocommerce-cart-form input[type="date"],
body.woocommerce-cart .woocommerce-cart-form input[type="datetime-local"],
body.woocommerce-cart .cart_totals input[type="date"],
body.woocommerce-cart .cart_totals input[type="datetime-local"],
body.woocommerce-cart input[name*="date"],
body.woocommerce-cart input[name*="Date"],
body.woocommerce-cart input[name*="pickup"],
body.woocommerce-cart input[name*="return"],
body.woocommerce-cart #rental-period-start,
body.woocommerce-cart #rental-period-end,
body.woocommerce-cart .rental-period input[type="date"],
body.woocommerce-cart .rental-period input[type="datetime-local"]{
  height: 36px !important;
  line-height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid #C6C6C6 !important;
  border-radius: 20px !important;
  min-width: 220px !important;
  font-size: 14px !important;
  background: #fff !important;
  color: #111 !important;
  font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

body.woocommerce-cart input[type="date"]:focus,
body.woocommerce-cart input[type="datetime-local"]:focus,
body.woocommerce-cart input[type="text"].date-picker:focus,
body.woocommerce-cart .date-picker:focus,
body.woocommerce-cart .woocommerce input[type="date"]:focus,
body.woocommerce-cart .woocommerce input[type="datetime-local"]:focus,
body.woocommerce-cart .woocommerce-cart-form input[type="date"]:focus,
body.woocommerce-cart .woocommerce-cart-form input[type="datetime-local"]:focus,
body.woocommerce-cart .cart_totals input[type="date"]:focus,
body.woocommerce-cart .cart_totals input[type="datetime-local"]:focus,
body.woocommerce-cart input[name*="date"]:focus,
body.woocommerce-cart input[name*="Date"]:focus,
body.woocommerce-cart input[name*="pickup"]:focus,
body.woocommerce-cart input[name*="return"]:focus,
body.woocommerce-cart #rental-period-start:focus,
body.woocommerce-cart #rental-period-end:focus,
body.woocommerce-cart .rental-period input[type="date"]:focus,
body.woocommerce-cart .rental-period input[type="datetime-local"]:focus{
  outline: none !important;
  border-color: #0b57d0 !important;
  box-shadow: 0 0 0 3px rgba(11,87,208,.10) !important;
}

/* Date picker container/label styling - match VPB field styling */
body.woocommerce-cart .date-picker-wrapper,
body.woocommerce-cart .rental-dates,
body.woocommerce-cart .rental-period,
body.woocommerce-cart .cart_totals .rental-dates,
body.woocommerce-cart label[for*="date"],
body.woocommerce-cart label[for*="Date"],
body.woocommerce-cart label[for*="pickup"],
body.woocommerce-cart label[for*="return"],
body.woocommerce-cart label[for="rental-period-start"],
body.woocommerce-cart label[for="rental-period-end"],
body.woocommerce-cart .rental-period th,
body.woocommerce-cart .rental-period label{
  font-size: 12px !important;
  font-weight: 510 !important;
  color: #6E6E6E !important;
  letter-spacing: 0.2px !important;
  opacity: 1 !important;
  font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* =========================================================
   12) Responsive
   ========================================================= */

@media (max-width: 768px){
  body.woocommerce-cart .woocommerce{
    padding: 0 18px 60px !important;
  }
  
  body.woocommerce-cart .woocommerce-cart-form table.shop_table thead{
    display: none !important;
  }
  
  body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr{
    display: block !important;
    border: 1px solid var(--sp-line) !important;
    border-radius: var(--sp-radius) !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
    background: var(--sp-card) !important;
  }
  
  body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody td{
    display: block !important;
    padding: 8px 0 !important;
    text-align: left !important;
  }
  
  body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody td::before{
    content: attr(data-title) ": ";
    font-weight: 590 !important;
    color: var(--sp-muted) !important;
  }
}

/* =========================================================
   12) Empty Cart Message - Centered with Website Font
   ========================================================= */

body.woocommerce-cart .wc-empty-cart-message,
body.woocommerce-cart .cart-empty.woocommerce-info{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 400px !important;  /* Center vertically on page */
  text-align: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.woocommerce-cart .wc-empty-cart-message .woocommerce-info,
body.woocommerce-cart .cart-empty.woocommerce-info{
  font-size: 14px !important;  /* Match website font size */
  font-weight: 510 !important;  /* Match website font weight */
  font-family: "SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  color: var(--sp-text) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  display: block !important;
}

/* Update the message text to "Your Cart is Empty" */
body.woocommerce-cart .wc-empty-cart-message .woocommerce-info::before,
body.woocommerce-cart .cart-empty.woocommerce-info::before{
  display: none !important;  /* Hide WooCommerce icon */
}

/* Hide return to shop link if needed, or style it separately */
body.woocommerce-cart .return-to-shop{
  text-align: center !important;
  margin-top: 20px !important;
}