/* =====================================================================
   MAYFIELD — CART STYLES
   Loaded only on the cart page (see mayfield_cart_assets() in functions.php).
   Styles the classic [woocommerce_cart] markup with the Mayfield design tokens.
   No cart.html exists in the design folder — styled to theme tokens.
   ===================================================================== */

.woocommerce-cart .mf-page-content { display: block; }
.woocommerce-cart .woocommerce { width: 100%; }

/* ---------- Cart table ---------- */
.woocommerce-cart table.shop_table {
    width: 100%;
    border-collapse: collapse;
    background: var(--off-white);
    border: 2px solid #bcb0a9;
    border-top: 0;
    border-bottom: 0;
    margin: 0 0 var(--sp-5);
    display: block;
}
.woocommerce-cart table.shop_table th {
  text-align: left;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 400;
  color: var(--black);
  padding: 14px 12px;
  border-bottom: 1px solid var(--sage);
}
.woocommerce-cart table.shop_table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--sage);
  vertical-align: middle;
}
.woocommerce-cart table.shop_table tbody{display: block;}
/* ---------- Remove (×) ---------- */
.woocommerce-cart td.product-remove { width: 36px; text-align: center; }
.woocommerce-cart td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pink-bg);
  color: var(--orange) !important;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
}

/* ---------- Thumbnail ---------- */
.woocommerce-cart td.product-thumbnail { width: 96px; }
.woocommerce-cart td.product-thumbnail img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

/* ---------- Product name / price / subtotal ---------- */
.woocommerce-cart td.product-name a { font-weight: 700; color: var(--black); }
.woocommerce-cart td.product-name a:hover { color: var(--dark-green); }
.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal { white-space: nowrap; font-weight: 700; }

/* ---------- Quantity ---------- */
.woocommerce-cart .product-quantity .quantity input.qty {
  width: 68px;
  height: 40px;
  text-align: center;
  border: 1px solid var(--sage);
  border-radius: var(--radius);
  font-weight: 700;
}

/* ---------- Subscription options inside the product cell (plugin-rendered) ---------- */
.woocommerce-cart td.product-name .wcsatt-options-product,
.woocommerce-cart td.product-name .wcsatt-options-prompt-label-subscription,
.woocommerce-cart td.product-name fieldset {
  margin-top: 8px;
  font-size: 14px;
}
.woocommerce-cart td.product-name select {
  border: 1px solid var(--sage);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 14px;
  margin-top: 4px;
}

/* ---------- Coupon + update actions row ---------- */
.woocommerce-cart .actions { padding: 16px 12px !important; }
.woocommerce-cart .actions .coupon { display: inline-flex; gap: 8px; vertical-align: middle; }
.woocommerce-cart .actions .coupon input.input-text {
  width: 220px;
  max-width: 100%;
  height: 44px;
  border: 1px solid var(--sage);
  border-radius: var(--radius);
  padding: 0 12px;
}
.woocommerce-cart .actions .button {
  background: var(--teal);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 13px 20px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  height: 44px;
}
.woocommerce-cart .actions button[name="update_cart"],
.woocommerce-cart .actions .button[name="update_cart"] { background: var(--brown); float: right; }
.woocommerce-cart .actions .button:hover { filter: brightness(1.06); }

/* ---------- Cart totals ---------- */
.woocommerce-cart .cart-collaterals { display: flex; justify-content: flex-end; }
.woocommerce-cart .cart_totals {
  width: 100%;
  max-width: 420px;
  background: var(--off-white);
  border: 2px solid #bcb0a9;
  border-top: 0;
  border-bottom: 0;
  padding: var(--sp-4);
}
.woocommerce-cart .cart_totals h2 {
  font-family: var(--font-head);
  font-size: 28px;
  margin: 0 0 var(--sp-3);
}
.woocommerce-cart .cart_totals table {
    width: 100%;
    border-collapse: collapse;
    border: none;
}
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td {
  padding: 10px 0;
  border-bottom: 1px solid var(--sage);
  text-align: left;
}
.woocommerce-cart .cart_totals td { text-align: right; font-weight: 700; }
.woocommerce-cart .cart_totals .order-total td { font-size: 20px; color: var(--dark-green); }
.woocommerce-cart .wc-proceed-to-checkout { margin-top: var(--sp-4); }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  display: block;
  width: 100%;
  background: var(--orange);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 16px 24px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover { filter: brightness(1.06); }

/* ---------- Desktop: items + totals side by side ---------- */
@media (min-width: 769px) {
  .woocommerce-cart .woocommerce {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--sp-5);
  }
  /* Notices (and any other full-row elements) span the whole width above the columns */
  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { flex: 0 0 100%; width: 100%; }
  /* Left column: cart items */
  .woocommerce-cart .woocommerce-cart-form { flex: 1 1 0; min-width: 0; margin: 0; }
  /* Right column: cart totals */
  .woocommerce-cart .cart-collaterals { flex: 0 0 420px; }
  .woocommerce-cart .cart_totals { max-width: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .woocommerce-cart table.shop_table thead { display: none; }
  .woocommerce-cart table.shop_table tr {  border-bottom: 1px solid var(--sage); padding: 10px 0; }
  .woocommerce-cart table.shop_table td { display: block; border: 0; padding: 6px 12px; text-align: left; }
  /* thead is hidden on mobile, so surface each column heading inline before its
     value (WooCommerce sets data-title="Price|Quantity|Subtotal" on each cell). */
  .woocommerce-cart table.shop_table td.product-price,
  .woocommerce-cart table.shop_table td.product-quantity,
  .woocommerce-cart table.shop_table td.product-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .woocommerce-cart table.shop_table td.product-price::before,
  .woocommerce-cart table.shop_table td.product-quantity::before,
  .woocommerce-cart table.shop_table td.product-subtotal::before {
    content: attr(data-title);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--black);
  }
  .woocommerce-cart table.shop_table td.actions { display: block; }
  .woocommerce-cart .cart-collaterals { justify-content: stretch; }
  .woocommerce-cart .cart_totals { max-width: 100%; padding: 10px;border: none;}
  .woocommerce-cart table.shop_table {
  
    border: 0px solid #bcb0a9;
  }
  
  .woocommerce-cart .actions button[name="update_cart"],
  .woocommerce-cart .actions .button[name="update_cart"] { float: none; width: 100%; margin-top: 8px; }
.woocommerce-cart .actions .coupon input.input-text {
    width: 150px;
    max-width: 100%;
    height: 44px;
    border: 1px solid var(--sage);
    border-radius: var(--radius);
    padding: 0 12px;
}
form.woocommerce-cart-form.paper-panel {
    padding: 0px;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    display: block;
    width: 100%;
    background: var(--orange);
    color: #fff;
    border: 0;
    border-radius: var(--radius);
    padding: 16px 24px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-align: center;
    font-size: 16px;
}
}


/* ---------- Auto-update cart (cart.js) ---------- */
/* The cart recalculates automatically on qty/option change, so the manual
   "Update cart" button is hidden (kept in the DOM as the form submitter). */
.woocommerce-cart .actions button[name="update_cart"],
.woocommerce-cart .actions .button[name="update_cart"] { display: none !important; }
/* Pending state while an update is in flight — checkout is held until totals refresh. */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button.mf-btn-pending {
  opacity: .55;
  cursor: progress;
}
.woocommerce-cart .cart_totals.mf-updating { opacity: .6; transition: opacity .15s ease; }

/* ---------- Shipping row tidy ---------- */
.woocommerce-cart .cart_totals .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 400;
  color: #7a726c;
  text-align: left;
  line-height: 1.4;
}
.woocommerce-cart .cart_totals .shipping-calculator-button,
.woocommerce-cart .cart_totals .wc-shipping-calculator-toggle { font-size: 13px; font-weight: 600; }