/* ============================================================
   Cart — woocommerce/cart/cart.php
   Skin de la tabla, inputs qty, botones de acción, totales,
   "Proceder al pago" en verde (Woo lo pinta violeta por default).
   Mantenemos las clases de Woo para que snippets sigan aplicando.
   ============================================================ */

.mk-cart {
  padding: var(--mk-sp-6) 0 var(--mk-sp-8);
  background: var(--mk-bg-alt);
  min-height: 60vh;
}

/* ---------- Layout principal (desktop) ----------
   Form (productos, izquierda 60-65%) | cart_totals (derecha 35%, sticky)
   Cross-sells full-width abajo.

   Truco: `.mk-cart-collaterals` (wrapper que Woo emite via
   do_action('woocommerce_cart_collaterals')) usa `display: contents` para
   que sus hijos (.cart_totals, .cross-sells) participen directo en el
   grid de .mk-container. Sin alterar markup de cart.php.
*/
@media (min-width: 1024px) {
  .mk-cart .mk-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    column-gap: var(--mk-sp-5);
    row-gap: var(--mk-sp-5);
    align-items: start;
  }
  .mk-cart .mk-cart-head    { grid-column: 1 / -1; }
  .mk-cart .mk-cart-form    { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .mk-cart .mk-cart-collaterals { display: contents; }
  .mk-cart .cart_totals     {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
  .mk-cart .cross-sells     { grid-column: 1 / -1; grid-row: 3; }
}

/* ---------- Head ---------- */

.mk-cart-head { margin-bottom: var(--mk-sp-5); }

.mk-cart-title {
  font-size: var(--mk-text-3xl);
  margin: var(--mk-sp-3) 0 var(--mk-sp-4);
  position: relative;
  padding-bottom: var(--mk-sp-3);
}

.mk-cart-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--mk-gold-500);
  margin-top: var(--mk-sp-3);
}

/* ---------- Form wrapper ---------- */

.mk-cart-form {
  background: #fff;
  border-radius: var(--mk-radius);
  border: 1px solid var(--mk-bg-soft);
  overflow: hidden;
  margin-bottom: var(--mk-sp-5);
}

/* ---------- Tabla productos ---------- */

.mk-cart-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mk-text-sm);
}

.mk-cart-table thead th {
  text-align: left;
  padding: var(--mk-sp-3) var(--mk-sp-4);
  background: var(--mk-bg-alt);
  font-size: var(--mk-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mk-ink-500);
  font-weight: 700;
  border-bottom: 2px solid var(--mk-bg-soft);
  font-family: var(--mk-font-display);
}

.mk-cart-table tbody td {
  padding: var(--mk-sp-3) var(--mk-sp-4);
  vertical-align: middle;
  border-bottom: 1px solid var(--mk-bg-soft);
}

.mk-cart-table tr.cart_item:hover { background: var(--mk-bg-alt); }

/* Columnas */
.mk-cart-table .product-remove { width: 40px; text-align: center; }
.mk-cart-table .product-remove a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mk-bg-alt);
  color: var(--mk-ink-500);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  transition: all var(--mk-trans);
}

.mk-cart-table .product-remove a:hover {
  background: #c0392b;
  color: #fff;
}

.mk-cart-table .product-thumbnail { width: 84px; }

/* Forzamos el thumbnail a 64x64 incluso si el <img> trae width/height de 500px
   inline (Woo emite eso por default). Sin importar src/srcset/sizes, la imagen
   se escala al box fijo. */
.mk-cart-table .product-thumbnail img,
.cart_item .product-thumbnail img,
.woocommerce-cart-form .product-thumbnail img,
table.cart .product-thumbnail img {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  background: #fafafa;
  border: 1px solid var(--mk-bg-soft);
  border-radius: var(--mk-radius);
  padding: 4px;
  display: block;
}

/* Despachos 3-4 días — nota en header del cart */
.mk-cart-shipping-note {
  font-size: var(--mk-text-sm);
  color: var(--mk-ink-700);
  background: var(--mk-gold-100);
  border-left: 3px solid var(--mk-gold-500);
  padding: var(--mk-sp-2) var(--mk-sp-4);
  margin: 0 0 var(--mk-sp-4);
  display: inline-block;
  border-radius: var(--mk-radius);
  font-family: var(--mk-font-display);
  font-weight: 500;
}

/* Bug #3: la columna Cantidad muestra el label "ANCLAFOX N/F... cantidad"
   visible. Es el .screen-reader-text de Woo que perdió el CSS de oculto
   cuando se desactivaron plugins. Lo restauramos forzando display:none
   visualmente en la tabla del cart.

   Aplicamos también en el resto del flujo Woo (checkout, my-account) por
   seguridad: el .screen-reader-text es un standard accessibility class. */
.screen-reader-text,
.woocommerce .screen-reader-text,
.woocommerce-cart .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mk-cart-table .product-name a {
  color: var(--mk-ink-900);
  text-decoration: none;
  font-weight: 600;
  font-family: var(--mk-font-display);
  line-height: 1.3;
}

.mk-cart-table .product-name a:hover { color: var(--mk-green-700); }

.mk-cart-table .product-name .variation,
.mk-cart-table .product-name dl {
  font-size: var(--mk-text-xs);
  color: var(--mk-ink-500);
  margin: 4px 0 0;
}

.mk-cart-table .product-price,
.mk-cart-table .product-subtotal {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--mk-ink-900);
}

.mk-cart-table .product-subtotal { font-weight: 700; color: var(--mk-green-800); }

/* ---------- Input QUANTITY (FIX) ----------
   Default Woo + algunos themes rompen el padding/altura del input
   number. Forzamos display + altura mínima + tipografía visible. */

.mk-cart-table .quantity {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--mk-bg-soft);
  border-radius: var(--mk-radius);
  background: #fff;
  overflow: hidden;
  max-width: 110px;
}

.mk-cart-table .quantity input.qty,
.mk-cart-table input[type="number"].qty,
.woocommerce-cart-form input.qty {
  width: 60px;
  min-width: 60px;
  height: 38px;
  padding: 6px 8px;
  font-size: var(--mk-text-md);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
  border: 0;
  background: transparent;
  color: var(--mk-ink-900);
  -moz-appearance: textfield;
  appearance: textfield;
  line-height: 1.2;
}

.mk-cart-table .quantity input.qty:focus {
  outline: 2px solid var(--mk-green-700);
  outline-offset: -2px;
}

/* Quitar spinner default del navegador para que se vea limpio (opcional) */
.mk-cart-table .quantity input.qty::-webkit-inner-spin-button,
.mk-cart-table .quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: auto;
  opacity: 1;
}

/* ---------- Auto-update cart (progressive enhancement) ----------
   El JS auto-update-cart.js agrega la clase .mk-cart-auto-update al form
   cuando carga. Mientras la clase exista, ocultamos el botón "Actualizar
   carrito" porque el JS lo dispara solo al cambiar la cantidad. Si el JS
   falla (no carga, error temprano), el form NO recibe la clase y el botón
   queda visible — el usuario mantiene la ruta clásica de actualizar a mano.

   El botón sigue en el DOM porque WC distingue update_cart vs apply_coupon
   por el button submitter; el JS hace .click() programático sobre él.

   .is-updating se aplica durante el debounce — feedback sutil de que algo
   va a pasar. Como el submit causa un reload completo, no hace falta más
   que la opacity reducida en los inputs de cantidad. */
form.woocommerce-cart-form.mk-cart-auto-update button[name="update_cart"] {
  display: none !important;
}

form.woocommerce-cart-form.is-updating input.qty {
  opacity: 0.6;
  pointer-events: none;
}

/* ---------- Acciones (cupón, actualizar, snippets PDF/guardar) ---------- */

.mk-cart-table tr:has(td.actions) td.actions {
  background: var(--mk-bg-alt);
  padding: var(--mk-sp-4);
  border-bottom: 0;
}

.mk-cart-table td.actions {
  background: var(--mk-bg-alt);
  padding: var(--mk-sp-4);
  border-bottom: 0;
}

.mk-cart-table td.actions .coupon {
  display: inline-flex;
  gap: var(--mk-sp-2);
  margin-right: var(--mk-sp-3);
  flex-wrap: wrap;
  align-items: center;
}

.mk-cart-table td.actions input.input-text {
  padding: var(--mk-sp-2) var(--mk-sp-3);
  font-size: var(--mk-text-sm);
  border: 1.5px solid var(--mk-bg-soft);
  border-radius: var(--mk-radius);
  background: #fff;
  font-family: inherit;
  min-height: 40px;
  width: 200px;
}

.mk-cart-table td.actions input.input-text:focus {
  outline: none;
  border-color: var(--mk-green-700);
}

/* Bug #4 + #5: botones de actions (Update, Aplicar cupón) sin estilos / violeta.
   Selectors agresivos para sobrescribir Woo default + cualquier estilo legacy
   que sobrevive sin Elementor. */
.mk-cart-table td.actions button,
.mk-cart-table td.actions input[type="submit"],
.mk-cart-table td.actions .button,
.mk-cart-table td.actions a.button,
table.cart td.actions button,
table.cart td.actions input[type="submit"],
table.cart td.actions .button,
.woocommerce-cart-form td.actions button,
.woocommerce-cart-form td.actions .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--mk-sp-2) !important;
  padding: var(--mk-sp-2) var(--mk-sp-4) !important;
  font-family: var(--mk-font-display) !important;
  font-size: var(--mk-text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  background: #fff !important;
  background-image: none !important;
  border: 2px solid var(--mk-green-700) !important;
  border-radius: var(--mk-radius) !important;
  color: var(--mk-green-700) !important;
  cursor: pointer !important;
  transition: all var(--mk-trans);
  min-height: 40px !important;
  margin: 4px 4px 4px 0 !important;
  box-shadow: none !important;
  width: auto !important;
  text-shadow: none !important;
}

.mk-cart-table td.actions button:hover,
.mk-cart-table td.actions input[type="submit"]:hover,
.mk-cart-table td.actions .button:hover,
table.cart td.actions button:hover,
table.cart td.actions .button:hover {
  background: var(--mk-green-700) !important;
  color: #fff !important;
}

/* "Aplicar cupón" hover dorado para diferenciarlo del Update */
.mk-cart-table td.actions button[name="apply_coupon"]:hover,
table.cart td.actions button[name="apply_coupon"]:hover {
  background: var(--mk-gold-500) !important;
  border-color: var(--mk-gold-500) !important;
  color: var(--mk-ink-900) !important;
}

/* ---------- Cart collaterals (totales) ---------- */

/* Mobile: el wrapper queda como block normal y los hijos
   (.cart_totals, .cross-sells) flowean vertical bajo el form.
   Desktop: ver bloque @media min-width:1024px arriba — el wrapper hace
   display:contents para liberar a sus hijos al grid de .mk-container. */
.mk-cart-collaterals {
  display: block;
}

.cart_totals {
  background: #fff;
  padding: var(--mk-sp-5);
  border: 1px solid var(--mk-bg-soft);
  border-radius: var(--mk-radius);
}

.cart_totals h2 {
  font-size: var(--mk-text-xl);
  margin: 0 0 var(--mk-sp-4);
  position: relative;
  padding-bottom: var(--mk-sp-2);
}

.cart_totals h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--mk-gold-500);
  margin-top: var(--mk-sp-2);
}

.cart_totals table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  font-size: var(--mk-text-sm);
  box-shadow: none;
  margin: 0;
}

/* Sin borders en filas — el card padre ya define la caja.
   El único divisor visual es el border-top sobre .order-total. */
.cart_totals table th,
.cart_totals table td {
  padding: var(--mk-sp-2) 0;
  border: 0;
  text-align: left;
  background: transparent;
}

.cart_totals table td { text-align: right; }

.cart_totals table th {
  text-transform: uppercase;
  font-size: var(--mk-text-xs);
  letter-spacing: 0.05em;
  color: var(--mk-ink-500);
  font-weight: 500;
}

/* Fee row ("Descuento por envío" y similares) — info secundaria.
   Más pequeña y mutada. */
.cart_totals tr.fee th,
.cart_totals tr.fee td {
  font-size: var(--mk-text-xs);
  color: var(--mk-ink-500);
  font-weight: 400;
  padding-top: 0;
}
.cart_totals tr.fee th {
  text-transform: none;
  letter-spacing: 0;
}

.cart_totals .order-total {
  border-top: 2px solid var(--mk-ink-900);
}

.cart_totals .order-total th,
.cart_totals .order-total td {
  padding-top: var(--mk-sp-4);
  font-size: var(--mk-text-md);
  font-weight: 700;
  color: var(--mk-ink-900);
  text-transform: none;
  letter-spacing: 0;
}

/* Total prominente — pieza más grande del sidebar.
   Selector scoped al > strong para no agrandar el .amount dentro
   de .includes_tax (que muestra el desglose de impuestos chico). */
.cart_totals .order-total > td > strong > .amount,
.cart_totals .order-total > td > strong .amount {
  color: var(--mk-green-800);
  font-size: var(--mk-text-2xl);
  font-family: var(--mk-font-display);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  display: inline-block;
}

.cart_totals .amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* "Total" alineación: el <th> a la izquierda, el <td> entero a la derecha
   con el monto principal y el "(incluye X impuestos)" debajo en línea propia. */
.cart_totals .order-total th {
  text-align: left;
  vertical-align: top;
}

.cart_totals .order-total td {
  text-align: right;
  vertical-align: top;
}

.cart_totals .includes_tax {
  display: block;
  margin-top: 4px;
  font-size: var(--mk-text-xs);
  color: var(--mk-ink-500);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--mk-font-body);
  white-space: normal;
}

/* Shipping options inside totals */
.cart_totals .shipping ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cart_totals .shipping ul li {
  padding: 4px 0;
  font-size: var(--mk-text-sm);
}

.cart_totals .shipping input[type="radio"] {
  accent-color: var(--mk-green-700);
  margin-right: var(--mk-sp-2);
}

.cart_totals .shipping-calculator-button {
  font-size: var(--mk-text-sm);
  color: var(--mk-green-700);
  text-decoration: underline;
}

/* ---------- Stack de botones en wc-proceed-to-checkout ----------
   El snippet #51 (Motor B2B) inyecta DOS botones más después del
   "Proceder al pago": "Descargar PDF" y "Guardar en mi cuenta".
   Estructura inyectada (mantener intacta a nivel HTML):

     <div class="wc-proceed-to-checkout">
       <a class="checkout-button button alt wc-forward">Proceder al pago</a>
       <div style="display:flex; gap:10px; ...">
         <button class="btn-cotizacion-marvel">Descargar PDF</button>
         <a href="/my-account/">Guardar en mi cuenta / Iniciar sesión</a>
       </div>
     </div>

   Solo refinamos visualmente: 3 botones, mismo ancho, stack vertical.
   Sin :has(), sin attribute selectors frágiles. */

.wc-proceed-to-checkout {
  margin-top: var(--mk-sp-5);
  padding-top: var(--mk-sp-5);
  border-top: 1px solid var(--mk-bg-soft);
  display: block;
}

/* Botón principal "Proceder al pago" full-width */
.wc-proceed-to-checkout .checkout-button,
.wc-proceed-to-checkout a.button.alt,
.wc-proceed-to-checkout .button.alt.wc-forward,
.button.checkout-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  margin: 0 0 var(--mk-sp-3) 0 !important;
  padding: var(--mk-sp-3) var(--mk-sp-4) !important;
  font-family: var(--mk-font-display) !important;
  font-size: var(--mk-text-md) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  background: var(--mk-green-700) !important;
  background-image: none !important;
  color: #fff !important;
  border: 2px solid var(--mk-green-700) !important;
  border-radius: var(--mk-radius) !important;
  min-height: 48px !important;
  line-height: 1.2 !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: all var(--mk-trans);
}

.wc-proceed-to-checkout .checkout-button:hover,
.wc-proceed-to-checkout a.button.alt:hover,
.button.checkout-button:hover {
  background: var(--mk-gold-500) !important;
  border-color: var(--mk-gold-500) !important;
  color: var(--mk-ink-900) !important;
}

/* Wrapper interno del snippet (display: flex en row originalmente) →
   forzamos column stack a 100% width para que los 2 botones sigan al
   "Proceder al pago" en stack vertical. Selector simple: cualquier
   <div> hijo directo de wc-proceed-to-checkout. */
.wc-proceed-to-checkout > div {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--mk-sp-3) !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Estilos comunes para los dos botones del snippet — bug "Guardar en mi cuenta
   desbordado": forzamos word-break + white-space para que textos largos
   wrappeen dentro del botón en vez de overflow horizontal.
   El snippet B2B (b2b-flow.php:495-499) inyecta:
     - btn PDF: <button class="btn-cotizacion-marvel">
     - btn Guardar (logged in): <button id="btn-guardar-cotizacion">
     - btn Iniciar sesión (anon): <a href="/my-account/">
   Cubrimos las tres formas. */
.wc-proceed-to-checkout .btn-cotizacion-marvel,
.wc-proceed-to-checkout #btn-guardar-cotizacion,
.wc-proceed-to-checkout > div > a,
.wc-proceed-to-checkout > div > button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: var(--mk-sp-3) var(--mk-sp-4) !important;
  font-family: var(--mk-font-display) !important;
  font-size: var(--mk-text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: var(--mk-radius) !important;
  border: 2px solid transparent !important;
  min-height: 48px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  word-break: normal !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  cursor: pointer;
  transition: all var(--mk-trans);
  box-shadow: none !important;
}

/* Jerarquía invertida (bug #7): "Proceder al pago" debe ser primario,
   "Descargar Cotización" secundario. El snippet #53 del PDF era prominente
   por inline styles full-width verde — lo bajamos a outline secundario.

   "Guardar en mi cuenta" / "Iniciar sesión" — outline tinta (terciario). */
.wc-proceed-to-checkout .btn-cotizacion-marvel {
  background: #fff !important;
  border-color: var(--mk-green-700) !important;
  color: var(--mk-green-700) !important;
}

.wc-proceed-to-checkout .btn-cotizacion-marvel:hover {
  background: var(--mk-green-700) !important;
  border-color: var(--mk-green-700) !important;
  color: #fff !important;
}

.wc-proceed-to-checkout #btn-guardar-cotizacion,
.wc-proceed-to-checkout > div > a {
  background: #fff !important;
  border-color: var(--mk-ink-700) !important;
  color: var(--mk-ink-700) !important;
}

.wc-proceed-to-checkout #btn-guardar-cotizacion:hover,
.wc-proceed-to-checkout > div > a:hover {
  background: var(--mk-ink-900) !important;
  border-color: var(--mk-ink-900) !important;
  color: #fff !important;
}

/* Botón principal de Woo "Proceder al pago" */
.wc-proceed-to-checkout .checkout-button,
.wc-proceed-to-checkout a.button.alt,
.wc-proceed-to-checkout .button.alt.wc-forward,
.button.checkout-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--mk-sp-3) var(--mk-sp-4) !important;
  font-family: var(--mk-font-display) !important;
  font-size: var(--mk-text-md) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  background: var(--mk-green-700) !important;
  background-image: none !important;
  color: #fff !important;
  border: 2px solid var(--mk-green-700) !important;
  border-radius: var(--mk-radius) !important;
  cursor: pointer;
  box-shadow: none !important;
  min-height: 48px !important;
  line-height: 1.2 !important;
  transition: all var(--mk-trans);
}

.wc-proceed-to-checkout .checkout-button:hover,
.wc-proceed-to-checkout a.button.alt:hover,
.button.checkout-button:hover {
  background: var(--mk-gold-500) !important;
  border-color: var(--mk-gold-500) !important;
  color: var(--mk-ink-900) !important;
}

/* Mensaje "guardado!" del snippet, si aparece, queda centrado debajo */
#mensaje-guardar-cotizacion {
  text-align: center !important;
  margin: var(--mk-sp-2) 0 0 !important;
}

/* ---------- Cross-sell ("También te puede interesar") ---------- */

.cross-sells {
  grid-column: 1 / -1;
  margin-top: var(--mk-sp-7);
  padding-top: var(--mk-sp-6);
  border-top: 1px solid var(--mk-bg-soft);
}

.cross-sells h2 {
  font-size: var(--mk-text-xl);
  margin: 0 0 var(--mk-sp-5);
  position: relative;
  padding-bottom: var(--mk-sp-2);
}

.cross-sells h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--mk-gold-500);
  margin-top: var(--mk-sp-2);
}

/* Cards de cross-sell — markup estándar de Woo (ul.products li.product) */
.cross-sells ul.products {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mk-sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 480px)  { .cross-sells ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cross-sells ul.products { grid-template-columns: repeat(4, 1fr); } }

.cross-sells ul.products li.product {
  display: flex !important;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mk-bg-soft);
  border-bottom: 3px solid transparent;
  border-radius: var(--mk-radius);
  overflow: hidden;
  transition: transform var(--mk-trans), box-shadow var(--mk-trans), border-color var(--mk-trans);
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
  text-align: left;
}

.cross-sells ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  border-color: var(--mk-bg-soft);
  border-bottom-color: var(--mk-gold-500);
}

.cross-sells ul.products li.product > a {
  text-decoration: none;
  color: var(--mk-ink-900);
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Imagen 1:1 ratio, ~200px en breakpoint normal de 4 cols */
.cross-sells ul.products li.product img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  max-height: 240px !important;
  object-fit: contain !important;
  background: #fafafa;
  padding: var(--mk-sp-4);
  margin: 0 !important;
  border-bottom: 1px solid var(--mk-bg-soft);
  box-sizing: border-box;
}

.cross-sells ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-md) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  padding: var(--mk-sp-4) var(--mk-sp-4) 0 !important;
  color: var(--mk-ink-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--mk-text-md) * 1.35 * 2 + var(--mk-sp-4));
}

/* Precio en una sola línea — el filter PHP `mk_cross_sells_price_html`
   reemplaza el rango "$X – $Y" por "Desde $X" para variables. */
.cross-sells ul.products li.product .price {
  padding: 0 var(--mk-sp-4);
  font-size: var(--mk-text-md);
  color: var(--mk-green-800);
  font-weight: 700;
  font-family: var(--mk-font-display);
  font-variant-numeric: tabular-nums;
  margin: var(--mk-sp-2) 0 var(--mk-sp-3) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Prefijo "Desde" más sobrio que el monto en sí */
.cross-sells ul.products li.product .price .mk-price-from {
  color: var(--mk-ink-500);
  font-weight: 400;
  font-size: var(--mk-text-sm);
  margin-right: 4px;
}

/* Botón "VER PRODUCTO" full-width centrado al pie de la card */
.cross-sells ul.products li.product .button,
.cross-sells ul.products li.product a.added_to_cart {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: auto var(--mk-sp-4) var(--mk-sp-4) !important;
  padding: var(--mk-sp-3) var(--mk-sp-3) !important;
  background: var(--mk-green-700) !important;
  color: #fff !important;
  border: 2px solid var(--mk-green-700) !important;
  border-radius: var(--mk-radius) !important;
  font-family: var(--mk-font-display) !important;
  font-weight: 700 !important;
  font-size: var(--mk-text-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  min-height: 42px !important;
  text-align: center;
  transition: background var(--mk-trans), color var(--mk-trans), border-color var(--mk-trans);
  box-shadow: none !important;
}

.cross-sells ul.products li.product:hover .button,
.cross-sells ul.products li.product:hover a.added_to_cart {
  background: var(--mk-gold-500) !important;
  border-color: var(--mk-gold-500) !important;
  color: var(--mk-ink-900) !important;
}

/* Quitar onsale label si aparece — visualmente conflictúa */
.cross-sells .onsale {
  position: absolute;
  top: var(--mk-sp-2);
  right: var(--mk-sp-2);
  background: var(--mk-gold-500);
  color: var(--mk-ink-900);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ----------------------------------------------------------
   YITH Product Slider Carousel ("Los más vendidos") — widget legacy.
   Ocultamos solo el widget YITH específico y su heading adyacente,
   sin afectar cross-sells de Woo (que también van en .woocommerce > h3
   y romperían con un selector amplio).
*/
body.woocommerce-cart .ywcps-wrapper,
body.woocommerce-cart .ywcps-slider,
body.woocommerce-cart h3:has(+ .ywcps-wrapper) {
  display: none !important;
}

/* Bug #9 — cross-sells (mostrados por woocommerce_cart_collaterals).
   Forzamos consistencia visual: estrellas ocultas, botones verde
   primario uniforme, alturas iguales. */
.woocommerce-cart .cross-sells {
  margin-top: var(--mk-sp-7);
  padding-top: var(--mk-sp-6);
  border-top: 1px solid var(--mk-bg-soft);
  grid-column: 1 / -1;
}

/* Quitar el H3 "Los más vendidos" anidado si aparece */
.woocommerce-cart .cross-sells h3 {
  display: none !important;
}

/* Cards uniformes — estrellas ocultas para consistencia */
.woocommerce-cart .cross-sells .star-rating,
.woocommerce-cart ul.products .star-rating {
  display: none !important;
}

.woocommerce-cart ul.products li.product .button,
.woocommerce-cart ul.products li.product .add_to_cart_button,
.woocommerce-cart ul.products li.product a.button {
  background: var(--mk-green-700) !important;
  border: 2px solid var(--mk-green-700) !important;
  color: #fff !important;
  font-family: var(--mk-font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: var(--mk-text-xs) !important;
  border-radius: var(--mk-radius) !important;
  min-height: 38px !important;
  padding: 6px 12px !important;
  margin: auto var(--mk-sp-4) var(--mk-sp-4) !important;
}

.woocommerce-cart ul.products li.product:hover .button,
.woocommerce-cart ul.products li.product:hover a.button {
  background: var(--mk-gold-500) !important;
  border-color: var(--mk-gold-500) !important;
  color: var(--mk-ink-900) !important;
}

/* ---------- Cart vacío ---------- */

.cart-empty,
.wc-empty-cart-message {
  background: #fff;
  border-radius: var(--mk-radius);
  border: 1px solid var(--mk-bg-soft);
  padding: var(--mk-sp-7);
  text-align: center;
  font-size: var(--mk-text-md);
  color: var(--mk-ink-700);
}

.return-to-shop {
  text-align: center;
  margin-top: var(--mk-sp-4);
}

.return-to-shop .button {
  display: inline-block;
  padding: var(--mk-sp-3) var(--mk-sp-5);
  background: var(--mk-green-700);
  color: #fff;
  border-radius: var(--mk-radius);
  text-decoration: none;
  font-family: var(--mk-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--mk-text-sm);
  letter-spacing: 0.04em;
}

.return-to-shop .button:hover {
  background: var(--mk-gold-500);
  color: var(--mk-ink-900);
}

/* ---------- Mensajes Woo (notices) ---------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--mk-radius);
  border-left: 4px solid;
  padding: var(--mk-sp-3) var(--mk-sp-4);
  margin: 0 0 var(--mk-sp-4);
  list-style: none;
  font-size: var(--mk-text-sm);
}

.woocommerce-message  { background: var(--mk-green-100); border-left-color: var(--mk-green-500); color: var(--mk-green-800); }
.woocommerce-info     { background: var(--mk-gold-100);  border-left-color: var(--mk-gold-500);  color: var(--mk-gold-700); }
.woocommerce-error    { background: #f9e0dc;             border-left-color: #c0392b;             color: #6e2317; }

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .mk-cart-table thead { display: none; }
  .mk-cart-table tbody tr.cart_item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
      "thumb name"
      "thumb price"
      "qty   subtotal"
      "remove remove";
    gap: var(--mk-sp-2);
    padding: var(--mk-sp-3);
    border-bottom: 1px solid var(--mk-bg-soft);
    background: #fff;
  }
  .mk-cart-table tbody tr.cart_item td {
    border: 0;
    padding: 0;
  }
  .mk-cart-table .product-remove   { grid-area: remove; text-align: right; }
  .mk-cart-table .product-thumbnail{ grid-area: thumb; }
  .mk-cart-table .product-name     { grid-area: name; min-width: 0; }
  .mk-cart-table .product-price    { grid-area: price; }
  .mk-cart-table .product-quantity { grid-area: qty; }
  .mk-cart-table .product-subtotal { grid-area: subtotal; text-align: right; }

  .mk-cart-table td.actions {
    display: block;
    grid-column: 1 / -1;
  }
}