/**
 * Ecosol — Carrito.
 *
 * IMPORTANTE: esta hoja está escrita contra el markup del widget Cart de Elementor Pro
 * (.e-cart__container, .e-shop-table, .e-cart-totals), que es lo que hay en producción.
 * La versión anterior estaba escrita para el carrito clásico de WooCommerce y por eso
 * rompía la página; se desactivó en la 0.14.1. Antes de tocar acá, mirá el markup real.
 *
 * No cambia el DOM ni oculta nada que haga falta para comprar: solo reordena y pinta.
 * Los !important son contra los estilos del propio widget y del kit, que ganan por
 * especificidad y por orden de carga.
 */

/* ---- Lienzo ---- */
.woocommerce-cart .e-cart__container {
  --ec-card: #fff;
  --ec-ink: #27374D;
  --ec-body: #4f4f4f;
  --ec-muted: #7c8794;
  --ec-line: #e6ebf0;
  --ec-teal: #22a18a;
  --ec-teal-dark: #15806d;
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

/* ---- Tarjetas de las dos columnas ---- */
.woocommerce-cart .e-cart-section {
  background: var(--ec-card);
  border: 1px solid var(--ec-line);
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(39, 55, 77, .07);
  padding: 8px 22px 18px;
}

/* ---- Lista de productos: de tabla a filas tipo tarjeta ---- */
.woocommerce-cart .e-shop-table table.cart,
.woocommerce-cart .e-shop-table table.cart tbody {
  display: block;
  width: 100%;
  border: 0;
}

/* El encabezado Producto/Precio/Cantidad/Subtotal no está en el diseño. */
.woocommerce-cart .e-shop-table table.cart thead { display: none; }

.woocommerce-cart table.cart tr.cart_item {
  display: grid;
  grid-template-columns: 84px 1fr auto auto;
  grid-template-areas:
    "foto nombre cantidad precio"
    "foto quitar cantidad precio";
  align-items: center;
  column-gap: 18px;
  row-gap: 4px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ec-line);
}

.woocommerce-cart table.cart tr.cart_item td {
  display: block;
  border: 0;
  padding: 0;
}

/* WooCommerce mete el nombre de la columna con ::before en pantallas chicas. */
.woocommerce-cart table.cart tr.cart_item td::before { content: none !important; }

.woocommerce-cart table.cart td.product-thumbnail { grid-area: foto; }

.woocommerce-cart table.cart td.product-thumbnail img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  background: #f6f9fb;
  border-radius: 12px;
  display: block;
}

.woocommerce-cart table.cart td.product-name { grid-area: nombre; }

.woocommerce-cart table.cart td.product-name a {
  color: var(--ec-ink) !important;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
}

/* La columna «precio unitario» duplica el subtotal cuando hay una sola unidad.
   Va con tr.cart_item adelante para ganarle a la regla de arriba que pone en block
   todas las celdas: si no, esa tiene un elemento más y gana por especificidad. */
.woocommerce-cart table.cart tr.cart_item td.product-price { display: none; }

.woocommerce-cart table.cart td.product-quantity { grid-area: cantidad; }

.woocommerce-cart table.cart td.product-quantity .quantity input.qty {
  width: 74px;
  height: 42px;
  text-align: center;
  font-weight: 600;
  color: var(--ec-ink);
  border: 1px solid var(--ec-line);
  border-radius: 10px;
  background: #fff;
}

.woocommerce-cart table.cart td.product-subtotal {
  grid-area: precio;
  text-align: right;
  font-weight: 700;
  font-size: 18px;
  color: var(--ec-ink) !important;
  white-space: nowrap;
}

.woocommerce-cart table.cart td.product-subtotal .amount { color: var(--ec-ink) !important; }

/* ---- «Eliminar» ---- */
/* El enlace de WooCommerce es una «×». El nombre accesible sale del aria-label del
   propio enlace, así que reemplazar la × por la palabra no deja al lector de pantalla
   sin texto. */
.woocommerce-cart table.cart td.product-remove {
  grid-area: quitar;
  align-self: start;
}

.woocommerce-cart table.cart td.product-remove a.remove {
  font-size: 0 !important;
  color: transparent !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.woocommerce-cart table.cart td.product-remove a.remove::after {
  content: "Eliminar";
  font-size: 13px;
  font-weight: 500;
  color: var(--ec-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.woocommerce-cart table.cart td.product-remove a.remove:hover::after { color: #d3455b; }

/* ---- Fila de acciones ---- */
.woocommerce-cart table.cart td.actions {
  display: block;
  border: 0;
  padding: 16px 0 0;
  text-align: left;
}

.woocommerce-cart table.cart td.actions button[name="update_cart"] {
  background: #fff !important;
  color: var(--ec-teal-dark) !important;
  border: 1.5px solid #bfe7dc !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 11px 22px !important;
}

.woocommerce-cart table.cart td.actions button[name="update_cart"]:hover {
  background: #f0faf7 !important;
  border-color: var(--ec-teal) !important;
}

/* ---- Resumen del pedido ---- */
.woocommerce-cart .e-cart-totals { padding: 22px; }

/* El widget deja el título vacío. Se completa solo si nadie escribió uno en Elementor:
   así, el día que la agencia cargue el suyo en el panel, este deja de aplicarse. */
.woocommerce-cart .cart_totals h2:empty::before {
  content: "Resumen del pedido";
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--ec-ink);
  margin-bottom: 4px;
}

.woocommerce-cart .cart_totals table.shop_table {
  width: 100%;
  border: 0;
  margin: 0;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  border: 0;
  padding: 12px 0;
  vertical-align: middle;
}

.woocommerce-cart .cart_totals table.shop_table th {
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ec-body) !important;
  text-align: left;
}

.woocommerce-cart .cart_totals table.shop_table td {
  text-align: right;
  font-weight: 600;
  color: var(--ec-ink) !important;
}

.woocommerce-cart .cart_totals .amount { color: var(--ec-ink) !important; }

.woocommerce-cart .cart_totals tr.cart-subtotal { border-bottom: 1px solid var(--ec-line); }

.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
  border-top: 1px solid var(--ec-line);
  padding-top: 16px;
  font-size: 20px;
  font-weight: 800;
  color: var(--ec-ink) !important;
}

/* ---- Calculadora de envío ---- */
.woocommerce-cart .cart_totals tr.shipping td { text-align: left; }

.woocommerce-cart .woocommerce-shipping-calculator .shipping-calculator-button {
  color: var(--ec-teal-dark) !important;
  font-weight: 600;
  font-size: 14px;
}

.woocommerce-cart .shipping-calculator-form .form-row { margin-bottom: 10px; }

.woocommerce-cart .shipping-calculator-form label {
  font-size: 13px;
  color: var(--ec-muted);
  display: block;
  margin-bottom: 4px;
}

.woocommerce-cart .shipping-calculator-form input.input-text,
.woocommerce-cart .shipping-calculator-form select {
  padding-right: 34px;
  width: 100%;
  height: 44px;
  border: 1px solid var(--ec-line) !important;
  border-radius: 10px !important;
  padding: 0 12px;
  font-size: 14px;
  color: var(--ec-ink);
  background-color: #fff;
}

.woocommerce-cart .shipping-calculator-form button[name="calc_shipping"] {
  background: #fff !important;
  color: var(--ec-teal-dark) !important;
  border: 1.5px solid #bfe7dc !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 20px !important;
  width: 100%;
}

/* ---- Botón de finalizar ---- */
.woocommerce-cart .wc-proceed-to-checkout { padding: 18px 0 0; }

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: linear-gradient(180deg, #29AB90 0%, #11453A 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 16px 22px !important;
  text-align: center;
  transition: filter .2s;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { filter: brightness(1.12); }

/* El widget le pone un carrito adelante; en el diseño el botón va solo con el texto. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::before,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button i,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button svg { display: none !important; }

/* ---- Celular ---- */
@media (max-width: 767px) {
  .woocommerce-cart .e-cart__container { flex-direction: column; gap: 18px; }

  .woocommerce-cart table.cart tr.cart_item {
    grid-template-columns: 68px 1fr;
    grid-template-areas:
      "foto nombre"
      "foto precio"
      "quitar cantidad";
    row-gap: 8px;
  }

  .woocommerce-cart table.cart td.product-thumbnail img { width: 68px; height: 68px; }
  .woocommerce-cart table.cart td.product-subtotal { text-align: left; font-size: 17px; }
  .woocommerce-cart table.cart td.product-quantity { justify-self: end; }
}

/**
 * Etiquetas del resumen: van en td::before, no en th.
 *
 * La tabla de totales es `shop_table_responsive`: WooCommerce esconde los th —medidos
 * en 0x0— y dibuja la etiqueta con `td::before { content: attr(data-title) }`. Pintar
 * los th no se ve; hay que pintar el pseudo-elemento.
 *
 * Van con `body` adelante porque Elementor inyecta hojas dentro del <body> y esas caen
 * después que la nuestra en la cascada.
 */
body.woocommerce-cart .e-cart-totals .cart_totals table.shop_table tr td {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: right;
  padding: 13px 0 !important;
  border: 0 !important;
}

body.woocommerce-cart .e-cart-totals .cart_totals table.shop_table tr td::before {
  content: attr(data-title);
  float: none !important;
  color: #4f4f4f !important;
  font-weight: 500;
  font-size: 14.5px;
  text-align: left;
}

body.woocommerce-cart .e-cart-totals .cart_totals table.shop_table tr td,
body.woocommerce-cart .e-cart-totals .cart_totals table.shop_table tr td .amount,
body.woocommerce-cart .e-cart-totals .cart_totals table.shop_table tr td .woocommerce-Price-currencySymbol {
  color: #27374D !important;
  font-weight: 600;
}

body.woocommerce-cart .e-cart-totals .cart_totals table.shop_table tr.cart-subtotal {
  border-bottom: 1px solid #e6ebf0;
}

body.woocommerce-cart .e-cart-totals .cart_totals table.shop_table tr.order-total td {
  border-top: 1px solid #e6ebf0 !important;
  padding-top: 16px !important;
}

body.woocommerce-cart .e-cart-totals .cart_totals table.shop_table tr.order-total td,
body.woocommerce-cart .e-cart-totals .cart_totals table.shop_table tr.order-total td .amount,
body.woocommerce-cart .e-cart-totals .cart_totals table.shop_table tr.order-total td strong {
  font-size: 21px !important;
  font-weight: 800 !important;
  color: #27374D !important;
}

body.woocommerce-cart .e-cart-totals .cart_totals table.shop_table tr.order-total td::before {
  font-size: 17px;
  font-weight: 700;
  color: #27374D !important;
}

/* La fila de envío abre un formulario: la etiqueta arriba y el contenido debajo. */
body.woocommerce-cart .e-cart-totals .cart_totals table.shop_table tr.shipping td {
  display: block !important;
  text-align: left;
}

body.woocommerce-cart .e-cart-totals .cart_totals table.shop_table tr.shipping td::before {
  display: block;
  margin-bottom: 6px;
}

body.woocommerce-cart .e-cart-totals .woocommerce-shipping-calculator a.shipping-calculator-button {
  color: #15806D !important;
  font-weight: 600;
}

body.woocommerce-cart .e-shop-table table.cart tr.cart_item td.product-subtotal,
body.woocommerce-cart .e-shop-table table.cart tr.cart_item td.product-subtotal .amount,
body.woocommerce-cart .e-shop-table table.cart tr.cart_item td.product-subtotal .woocommerce-Price-currencySymbol {
  color: #27374D !important;
}

body.woocommerce-cart .e-shop-table table.cart tr.cart_item td.product-name a {
  color: #27374D !important;
}

/* ---- Proporción de las dos columnas, como en el diseño ---- */
.woocommerce-cart .e-cart__column-start { flex: 1 1 auto; min-width: 0; }
.woocommerce-cart .e-cart__column-end { flex: 0 0 380px; max-width: 380px; }

@media (max-width: 767px) {
  .woocommerce-cart .e-cart__column-end { flex: 1 1 auto; max-width: none; }
}

/* El select traía su flecha como fondo a la derecha y le pisaba el texto. */
.woocommerce-cart .shipping-calculator-form select {
  padding-right: 40px !important;
  text-overflow: ellipsis;
}

/* En celular el contenedor pasa a columna, y ahí `align-items:flex-start` —que en
   escritorio evita que la tarjeta del resumen se estire a lo alto— hace que no se
   estire a lo ANCHO: quedaba en 311px sobre 480 disponibles. En columna va stretch. */
@media (max-width: 767px) {
  .woocommerce-cart .e-cart__container { align-items: stretch; }
  .woocommerce-cart .e-cart__column-start,
  .woocommerce-cart .e-cart__column-end { width: 100%; }
}

/* ---- Botones de cantidad ---- */
.woocommerce-cart .ecosol-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ec-line, #e6ebf0);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.woocommerce-cart .ecosol-qty__btn {
  width: 38px;
  height: 42px;
  border: 0;
  background: #fff;
  color: #27374D;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background .15s;
}

.woocommerce-cart .ecosol-qty__btn:hover { background: #f0faf7; color: #15806d; }
.woocommerce-cart .ecosol-qty__btn:disabled { opacity: .35; cursor: default; background: #fff; }

.woocommerce-cart .ecosol-qty .quantity { margin: 0; }

.woocommerce-cart .ecosol-qty input.qty {
  width: 46px !important;
  height: 42px !important;
  border: 0 !important;
  border-left: 1px solid var(--ec-line, #e6ebf0) !important;
  border-right: 1px solid var(--ec-line, #e6ebf0) !important;
  border-radius: 0 !important;
  -moz-appearance: textfield;
}

/* Las flechitas nativas del input number sobran: ya tenemos las nuestras. */
.woocommerce-cart .ecosol-qty input.qty::-webkit-outer-spin-button,
.woocommerce-cart .ecosol-qty input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@media (max-width: 767px) {
  /* El nombre y el precio heredaban la alineación a la derecha de la celda original. */
  .woocommerce-cart table.cart tr.cart_item td.product-name,
  .woocommerce-cart table.cart tr.cart_item td.product-name a,
  .woocommerce-cart table.cart tr.cart_item td.product-subtotal {
    text-align: left !important;
  }
}